@layer properties;
@layer utilities {
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/webfonts/inter-latin-wght-normal.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/webfonts/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/webfonts/inter-latin-wght-italic.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/webfonts/manrope-latin-wght-normal.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/webfonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/webfonts/space-mono-latin-400-normal.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/webfonts/space-mono-latin-700-normal.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Space Mono';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/webfonts/space-mono-latin-400-italic.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Space Mono';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/webfonts/space-mono-latin-700-italic.woff2') format('woff2');
  }
}
@layer utilities {
  :root {
    --color-white: oklch(100% 0 0);
    --color-black: oklch(0% 0 0);
    --color-transparent: oklch(100% 0 0 / 0);
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(70.4% 0.191 22.216);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-red-50-100: oklch(97.1% 0.013 17.38 / 1);
    --color-red-50-90: oklch(97.1% 0.013 17.38 / 0.9);
    --color-red-50-80: oklch(97.1% 0.013 17.38 / 0.8);
    --color-red-50-70: oklch(97.1% 0.013 17.38 / 0.7);
    --color-red-50-60: oklch(97.1% 0.013 17.38 / 0.6);
    --color-red-50-50: oklch(97.1% 0.013 17.38 / 0.5);
    --color-red-50-40: oklch(97.1% 0.013 17.38 / 0.4);
    --color-red-50-30: oklch(97.1% 0.013 17.38 / 0.3);
    --color-red-50-20: oklch(97.1% 0.013 17.38 / 0.2);
    --color-red-50-10: oklch(97.1% 0.013 17.38 / 0.1);
    --color-red-50-5: oklch(97.1% 0.013 17.38 / 0.05);
    --color-red-100-100: oklch(93.6% 0.032 17.717 / 1);
    --color-red-100-90: oklch(93.6% 0.032 17.717 / 0.9);
    --color-red-100-80: oklch(93.6% 0.032 17.717 / 0.8);
    --color-red-100-70: oklch(93.6% 0.032 17.717 / 0.7);
    --color-red-100-60: oklch(93.6% 0.032 17.717 / 0.6);
    --color-red-100-50: oklch(93.6% 0.032 17.717 / 0.5);
    --color-red-100-40: oklch(93.6% 0.032 17.717 / 0.4);
    --color-red-100-30: oklch(93.6% 0.032 17.717 / 0.3);
    --color-red-100-20: oklch(93.6% 0.032 17.717 / 0.2);
    --color-red-100-10: oklch(93.6% 0.032 17.717 / 0.1);
    --color-red-100-5: oklch(93.6% 0.032 17.717 / 0.05);
    --color-red-200-100: oklch(88.5% 0.062 18.334 / 1);
    --color-red-200-90: oklch(88.5% 0.062 18.334 / 0.9);
    --color-red-200-80: oklch(88.5% 0.062 18.334 / 0.8);
    --color-red-200-70: oklch(88.5% 0.062 18.334 / 0.7);
    --color-red-200-60: oklch(88.5% 0.062 18.334 / 0.6);
    --color-red-200-50: oklch(88.5% 0.062 18.334 / 0.5);
    --color-red-200-40: oklch(88.5% 0.062 18.334 / 0.4);
    --color-red-200-30: oklch(88.5% 0.062 18.334 / 0.3);
    --color-red-200-20: oklch(88.5% 0.062 18.334 / 0.2);
    --color-red-200-10: oklch(88.5% 0.062 18.334 / 0.1);
    --color-red-200-5: oklch(88.5% 0.062 18.334 / 0.05);
    --color-red-300-100: oklch(70.4% 0.191 22.216 / 1);
    --color-red-300-90: oklch(70.4% 0.191 22.216 / 0.9);
    --color-red-300-80: oklch(70.4% 0.191 22.216 / 0.8);
    --color-red-300-70: oklch(70.4% 0.191 22.216 / 0.7);
    --color-red-300-60: oklch(70.4% 0.191 22.216 / 0.6);
    --color-red-300-50: oklch(70.4% 0.191 22.216 / 0.5);
    --color-red-300-40: oklch(70.4% 0.191 22.216 / 0.4);
    --color-red-300-30: oklch(70.4% 0.191 22.216 / 0.3);
    --color-red-300-20: oklch(70.4% 0.191 22.216 / 0.2);
    --color-red-300-10: oklch(70.4% 0.191 22.216 / 0.1);
    --color-red-300-5: oklch(70.4% 0.191 22.216 / 0.05);
    --color-red-400-100: oklch(70.4% 0.191 22.216 / 1);
    --color-red-400-90: oklch(70.4% 0.191 22.216 / 0.9);
    --color-red-400-80: oklch(70.4% 0.191 22.216 / 0.8);
    --color-red-400-70: oklch(70.4% 0.191 22.216 / 0.7);
    --color-red-400-60: oklch(70.4% 0.191 22.216 / 0.6);
    --color-red-400-50: oklch(70.4% 0.191 22.216 / 0.5);
    --color-red-400-40: oklch(70.4% 0.191 22.216 / 0.4);
    --color-red-400-30: oklch(70.4% 0.191 22.216 / 0.3);
    --color-red-400-20: oklch(70.4% 0.191 22.216 / 0.2);
    --color-red-400-10: oklch(70.4% 0.191 22.216 / 0.1);
    --color-red-400-5: oklch(70.4% 0.191 22.216 / 0.05);
    --color-red-500-100: oklch(63.7% 0.237 25.331 / 1);
    --color-red-500-90: oklch(63.7% 0.237 25.331 / 0.9);
    --color-red-500-80: oklch(63.7% 0.237 25.331 / 0.8);
    --color-red-500-70: oklch(63.7% 0.237 25.331 / 0.7);
    --color-red-500-60: oklch(63.7% 0.237 25.331 / 0.6);
    --color-red-500-50: oklch(63.7% 0.237 25.331 / 0.5);
    --color-red-500-40: oklch(63.7% 0.237 25.331 / 0.4);
    --color-red-500-30: oklch(63.7% 0.237 25.331 / 0.3);
    --color-red-500-20: oklch(63.7% 0.237 25.331 / 0.2);
    --color-red-500-10: oklch(63.7% 0.237 25.331 / 0.1);
    --color-red-500-5: oklch(63.7% 0.237 25.331 / 0.05);
    --color-red-600-100: oklch(57.7% 0.245 27.325 / 1);
    --color-red-600-90: oklch(57.7% 0.245 27.325 / 0.9);
    --color-red-600-80: oklch(57.7% 0.245 27.325 / 0.8);
    --color-red-600-70: oklch(57.7% 0.245 27.325 / 0.7);
    --color-red-600-60: oklch(57.7% 0.245 27.325 / 0.6);
    --color-red-600-50: oklch(57.7% 0.245 27.325 / 0.5);
    --color-red-600-40: oklch(57.7% 0.245 27.325 / 0.4);
    --color-red-600-30: oklch(57.7% 0.245 27.325 / 0.3);
    --color-red-600-20: oklch(57.7% 0.245 27.325 / 0.2);
    --color-red-600-10: oklch(57.7% 0.245 27.325 / 0.1);
    --color-red-600-5: oklch(57.7% 0.245 27.325 / 0.05);
    --color-red-700-100: oklch(50.5% 0.213 27.518 / 1);
    --color-red-700-90: oklch(50.5% 0.213 27.518 / 0.9);
    --color-red-700-80: oklch(50.5% 0.213 27.518 / 0.8);
    --color-red-700-70: oklch(50.5% 0.213 27.518 / 0.7);
    --color-red-700-60: oklch(50.5% 0.213 27.518 / 0.6);
    --color-red-700-50: oklch(50.5% 0.213 27.518 / 0.5);
    --color-red-700-40: oklch(50.5% 0.213 27.518 / 0.4);
    --color-red-700-30: oklch(50.5% 0.213 27.518 / 0.3);
    --color-red-700-20: oklch(50.5% 0.213 27.518 / 0.2);
    --color-red-700-10: oklch(50.5% 0.213 27.518 / 0.1);
    --color-red-700-5: oklch(50.5% 0.213 27.518 / 0.05);
    --color-red-800-100: oklch(44.4% 0.177 26.899 / 1);
    --color-red-800-90: oklch(44.4% 0.177 26.899 / 0.9);
    --color-red-800-80: oklch(44.4% 0.177 26.899 / 0.8);
    --color-red-800-70: oklch(44.4% 0.177 26.899 / 0.7);
    --color-red-800-60: oklch(44.4% 0.177 26.899 / 0.6);
    --color-red-800-50: oklch(44.4% 0.177 26.899 / 0.5);
    --color-red-800-40: oklch(44.4% 0.177 26.899 / 0.4);
    --color-red-800-30: oklch(44.4% 0.177 26.899 / 0.3);
    --color-red-800-20: oklch(44.4% 0.177 26.899 / 0.2);
    --color-red-800-10: oklch(44.4% 0.177 26.899 / 0.1);
    --color-red-800-5: oklch(44.4% 0.177 26.899 / 0.05);
    --color-red-900-100: oklch(39.6% 0.141 25.723 / 1);
    --color-red-900-90: oklch(39.6% 0.141 25.723 / 0.9);
    --color-red-900-80: oklch(39.6% 0.141 25.723 / 0.8);
    --color-red-900-70: oklch(39.6% 0.141 25.723 / 0.7);
    --color-red-900-60: oklch(39.6% 0.141 25.723 / 0.6);
    --color-red-900-50: oklch(39.6% 0.141 25.723 / 0.5);
    --color-red-900-40: oklch(39.6% 0.141 25.723 / 0.4);
    --color-red-900-30: oklch(39.6% 0.141 25.723 / 0.3);
    --color-red-900-20: oklch(39.6% 0.141 25.723 / 0.2);
    --color-red-900-10: oklch(39.6% 0.141 25.723 / 0.1);
    --color-red-900-5: oklch(39.6% 0.141 25.723 / 0.05);
    --color-red-950-100: oklch(25.8% 0.092 26.042 / 1);
    --color-red-950-90: oklch(25.8% 0.092 26.042 / 0.9);
    --color-red-950-80: oklch(25.8% 0.092 26.042 / 0.8);
    --color-red-950-70: oklch(25.8% 0.092 26.042 / 0.7);
    --color-red-950-60: oklch(25.8% 0.092 26.042 / 0.6);
    --color-red-950-50: oklch(25.8% 0.092 26.042 / 0.5);
    --color-red-950-40: oklch(25.8% 0.092 26.042 / 0.4);
    --color-red-950-30: oklch(25.8% 0.092 26.042 / 0.3);
    --color-red-950-20: oklch(25.8% 0.092 26.042 / 0.2);
    --color-red-950-10: oklch(25.8% 0.092 26.042 / 0.1);
    --color-red-950-5: oklch(25.8% 0.092 26.042 / 0.05);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-orange-950: oklch(26.6% 0.079 36.259);
    --color-orange-50-100: oklch(98% 0.016 73.684 / 1);
    --color-orange-50-90: oklch(98% 0.016 73.684 / 0.9);
    --color-orange-50-80: oklch(98% 0.016 73.684 / 0.8);
    --color-orange-50-70: oklch(98% 0.016 73.684 / 0.7);
    --color-orange-50-60: oklch(98% 0.016 73.684 / 0.6);
    --color-orange-50-50: oklch(98% 0.016 73.684 / 0.5);
    --color-orange-50-40: oklch(98% 0.016 73.684 / 0.4);
    --color-orange-50-30: oklch(98% 0.016 73.684 / 0.3);
    --color-orange-50-20: oklch(98% 0.016 73.684 / 0.2);
    --color-orange-50-10: oklch(98% 0.016 73.684 / 0.1);
    --color-orange-50-5: oklch(98% 0.016 73.684 / 0.05);
    --color-orange-100-100: oklch(95.4% 0.038 75.164 / 1);
    --color-orange-100-90: oklch(95.4% 0.038 75.164 / 0.9);
    --color-orange-100-80: oklch(95.4% 0.038 75.164 / 0.8);
    --color-orange-100-70: oklch(95.4% 0.038 75.164 / 0.7);
    --color-orange-100-60: oklch(95.4% 0.038 75.164 / 0.6);
    --color-orange-100-50: oklch(95.4% 0.038 75.164 / 0.5);
    --color-orange-100-40: oklch(95.4% 0.038 75.164 / 0.4);
    --color-orange-100-30: oklch(95.4% 0.038 75.164 / 0.3);
    --color-orange-100-20: oklch(95.4% 0.038 75.164 / 0.2);
    --color-orange-100-10: oklch(95.4% 0.038 75.164 / 0.1);
    --color-orange-100-5: oklch(95.4% 0.038 75.164 / 0.05);
    --color-orange-200-100: oklch(90.1% 0.076 70.697 / 1);
    --color-orange-200-90: oklch(90.1% 0.076 70.697 / 0.9);
    --color-orange-200-80: oklch(90.1% 0.076 70.697 / 0.8);
    --color-orange-200-70: oklch(90.1% 0.076 70.697 / 0.7);
    --color-orange-200-60: oklch(90.1% 0.076 70.697 / 0.6);
    --color-orange-200-50: oklch(90.1% 0.076 70.697 / 0.5);
    --color-orange-200-40: oklch(90.1% 0.076 70.697 / 0.4);
    --color-orange-200-30: oklch(90.1% 0.076 70.697 / 0.3);
    --color-orange-200-20: oklch(90.1% 0.076 70.697 / 0.2);
    --color-orange-200-10: oklch(90.1% 0.076 70.697 / 0.1);
    --color-orange-200-5: oklch(90.1% 0.076 70.697 / 0.05);
    --color-orange-300-100: oklch(83.7% 0.128 66.29 / 1);
    --color-orange-300-90: oklch(83.7% 0.128 66.29 / 0.9);
    --color-orange-300-80: oklch(83.7% 0.128 66.29 / 0.8);
    --color-orange-300-70: oklch(83.7% 0.128 66.29 / 0.7);
    --color-orange-300-60: oklch(83.7% 0.128 66.29 / 0.6);
    --color-orange-300-50: oklch(83.7% 0.128 66.29 / 0.5);
    --color-orange-300-40: oklch(83.7% 0.128 66.29 / 0.4);
    --color-orange-300-30: oklch(83.7% 0.128 66.29 / 0.3);
    --color-orange-300-20: oklch(83.7% 0.128 66.29 / 0.2);
    --color-orange-300-10: oklch(83.7% 0.128 66.29 / 0.1);
    --color-orange-300-5: oklch(83.7% 0.128 66.29 / 0.05);
    --color-orange-400-100: oklch(75% 0.183 55.934 / 1);
    --color-orange-400-90: oklch(75% 0.183 55.934 / 0.9);
    --color-orange-400-80: oklch(75% 0.183 55.934 / 0.8);
    --color-orange-400-70: oklch(75% 0.183 55.934 / 0.7);
    --color-orange-400-60: oklch(75% 0.183 55.934 / 0.6);
    --color-orange-400-50: oklch(75% 0.183 55.934 / 0.5);
    --color-orange-400-40: oklch(75% 0.183 55.934 / 0.4);
    --color-orange-400-30: oklch(75% 0.183 55.934 / 0.3);
    --color-orange-400-20: oklch(75% 0.183 55.934 / 0.2);
    --color-orange-400-10: oklch(75% 0.183 55.934 / 0.1);
    --color-orange-400-5: oklch(75% 0.183 55.934 / 0.05);
    --color-orange-500-100: oklch(70.5% 0.213 47.604 / 1);
    --color-orange-500-90: oklch(70.5% 0.213 47.604 / 0.9);
    --color-orange-500-80: oklch(70.5% 0.213 47.604 / 0.8);
    --color-orange-500-70: oklch(70.5% 0.213 47.604 / 0.7);
    --color-orange-500-60: oklch(70.5% 0.213 47.604 / 0.6);
    --color-orange-500-50: oklch(70.5% 0.213 47.604 / 0.5);
    --color-orange-500-40: oklch(70.5% 0.213 47.604 / 0.4);
    --color-orange-500-30: oklch(70.5% 0.213 47.604 / 0.3);
    --color-orange-500-20: oklch(70.5% 0.213 47.604 / 0.2);
    --color-orange-500-10: oklch(70.5% 0.213 47.604 / 0.1);
    --color-orange-500-5: oklch(70.5% 0.213 47.604 / 0.05);
    --color-orange-600-100: oklch(64.6% 0.222 41.116 / 1);
    --color-orange-600-90: oklch(64.6% 0.222 41.116 / 0.9);
    --color-orange-600-80: oklch(64.6% 0.222 41.116 / 0.8);
    --color-orange-600-70: oklch(64.6% 0.222 41.116 / 0.7);
    --color-orange-600-60: oklch(64.6% 0.222 41.116 / 0.6);
    --color-orange-600-50: oklch(64.6% 0.222 41.116 / 0.5);
    --color-orange-600-40: oklch(64.6% 0.222 41.116 / 0.4);
    --color-orange-600-30: oklch(64.6% 0.222 41.116 / 0.3);
    --color-orange-600-20: oklch(64.6% 0.222 41.116 / 0.2);
    --color-orange-600-10: oklch(64.6% 0.222 41.116 / 0.1);
    --color-orange-600-5: oklch(64.6% 0.222 41.116 / 0.05);
    --color-orange-700-100: oklch(55.3% 0.195 38.402 / 1);
    --color-orange-700-90: oklch(55.3% 0.195 38.402 / 0.9);
    --color-orange-700-80: oklch(55.3% 0.195 38.402 / 0.8);
    --color-orange-700-70: oklch(55.3% 0.195 38.402 / 0.7);
    --color-orange-700-60: oklch(55.3% 0.195 38.402 / 0.6);
    --color-orange-700-50: oklch(55.3% 0.195 38.402 / 0.5);
    --color-orange-700-40: oklch(55.3% 0.195 38.402 / 0.4);
    --color-orange-700-30: oklch(55.3% 0.195 38.402 / 0.3);
    --color-orange-700-20: oklch(55.3% 0.195 38.402 / 0.2);
    --color-orange-700-10: oklch(55.3% 0.195 38.402 / 0.1);
    --color-orange-700-5: oklch(55.3% 0.195 38.402 / 0.05);
    --color-orange-800-100: oklch(47% 0.157 37.304 / 1);
    --color-orange-800-90: oklch(47% 0.157 37.304 / 0.9);
    --color-orange-800-80: oklch(47% 0.157 37.304 / 0.8);
    --color-orange-800-70: oklch(47% 0.157 37.304 / 0.7);
    --color-orange-800-60: oklch(47% 0.157 37.304 / 0.6);
    --color-orange-800-50: oklch(47% 0.157 37.304 / 0.5);
    --color-orange-800-40: oklch(47% 0.157 37.304 / 0.4);
    --color-orange-800-30: oklch(47% 0.157 37.304 / 0.3);
    --color-orange-800-20: oklch(47% 0.157 37.304 / 0.2);
    --color-orange-800-10: oklch(47% 0.157 37.304 / 0.1);
    --color-orange-800-5: oklch(47% 0.157 37.304 / 0.05);
    --color-orange-900-100: oklch(40.8% 0.123 38.172 / 1);
    --color-orange-900-90: oklch(40.8% 0.123 38.172 / 0.9);
    --color-orange-900-80: oklch(40.8% 0.123 38.172 / 0.8);
    --color-orange-900-70: oklch(40.8% 0.123 38.172 / 0.7);
    --color-orange-900-60: oklch(40.8% 0.123 38.172 / 0.6);
    --color-orange-900-50: oklch(40.8% 0.123 38.172 / 0.5);
    --color-orange-900-40: oklch(40.8% 0.123 38.172 / 0.4);
    --color-orange-900-30: oklch(40.8% 0.123 38.172 / 0.3);
    --color-orange-900-20: oklch(40.8% 0.123 38.172 / 0.2);
    --color-orange-900-10: oklch(40.8% 0.123 38.172 / 0.1);
    --color-orange-900-5: oklch(40.8% 0.123 38.172 / 0.05);
    --color-orange-950-100: oklch(26.6% 0.079 36.259 / 1);
    --color-orange-950-90: oklch(26.6% 0.079 36.259 / 0.9);
    --color-orange-950-80: oklch(26.6% 0.079 36.259 / 0.8);
    --color-orange-950-70: oklch(26.6% 0.079 36.259 / 0.7);
    --color-orange-950-60: oklch(26.6% 0.079 36.259 / 0.6);
    --color-orange-950-50: oklch(26.6% 0.079 36.259 / 0.5);
    --color-orange-950-40: oklch(26.6% 0.079 36.259 / 0.4);
    --color-orange-950-30: oklch(26.6% 0.079 36.259 / 0.3);
    --color-orange-950-20: oklch(26.6% 0.079 36.259 / 0.2);
    --color-orange-950-10: oklch(26.6% 0.079 36.259 / 0.1);
    --color-orange-950-5: oklch(26.6% 0.079 36.259 / 0.05);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);
    --color-amber-50-100: oklch(98.7% 0.022 95.277 / 1);
    --color-amber-50-90: oklch(98.7% 0.022 95.277 / 0.9);
    --color-amber-50-80: oklch(98.7% 0.022 95.277 / 0.8);
    --color-amber-50-70: oklch(98.7% 0.022 95.277 / 0.7);
    --color-amber-50-60: oklch(98.7% 0.022 95.277 / 0.6);
    --color-amber-50-50: oklch(98.7% 0.022 95.277 / 0.5);
    --color-amber-50-40: oklch(98.7% 0.022 95.277 / 0.4);
    --color-amber-50-30: oklch(98.7% 0.022 95.277 / 0.3);
    --color-amber-50-20: oklch(98.7% 0.022 95.277 / 0.2);
    --color-amber-50-10: oklch(98.7% 0.022 95.277 / 0.1);
    --color-amber-50-5: oklch(98.7% 0.022 95.277 / 0.05);
    --color-amber-100-100: oklch(96.2% 0.059 95.617 / 1);
    --color-amber-100-90: oklch(96.2% 0.059 95.617 / 0.9);
    --color-amber-100-80: oklch(96.2% 0.059 95.617 / 0.8);
    --color-amber-100-70: oklch(96.2% 0.059 95.617 / 0.7);
    --color-amber-100-60: oklch(96.2% 0.059 95.617 / 0.6);
    --color-amber-100-50: oklch(96.2% 0.059 95.617 / 0.5);
    --color-amber-100-40: oklch(96.2% 0.059 95.617 / 0.4);
    --color-amber-100-30: oklch(96.2% 0.059 95.617 / 0.3);
    --color-amber-100-20: oklch(96.2% 0.059 95.617 / 0.2);
    --color-amber-100-10: oklch(96.2% 0.059 95.617 / 0.1);
    --color-amber-100-5: oklch(96.2% 0.059 95.617 / 0.05);
    --color-amber-200-100: oklch(92.4% 0.12 95.746 / 1);
    --color-amber-200-90: oklch(92.4% 0.12 95.746 / 0.9);
    --color-amber-200-80: oklch(92.4% 0.12 95.746 / 0.8);
    --color-amber-200-70: oklch(92.4% 0.12 95.746 / 0.7);
    --color-amber-200-60: oklch(92.4% 0.12 95.746 / 0.6);
    --color-amber-200-50: oklch(92.4% 0.12 95.746 / 0.5);
    --color-amber-200-40: oklch(92.4% 0.12 95.746 / 0.4);
    --color-amber-200-30: oklch(92.4% 0.12 95.746 / 0.3);
    --color-amber-200-20: oklch(92.4% 0.12 95.746 / 0.2);
    --color-amber-200-10: oklch(92.4% 0.12 95.746 / 0.1);
    --color-amber-200-5: oklch(92.4% 0.12 95.746 / 0.05);
    --color-amber-300-100: oklch(87.9% 0.169 91.605 / 1);
    --color-amber-300-90: oklch(87.9% 0.169 91.605 / 0.9);
    --color-amber-300-80: oklch(87.9% 0.169 91.605 / 0.8);
    --color-amber-300-70: oklch(87.9% 0.169 91.605 / 0.7);
    --color-amber-300-60: oklch(87.9% 0.169 91.605 / 0.6);
    --color-amber-300-50: oklch(87.9% 0.169 91.605 / 0.5);
    --color-amber-300-40: oklch(87.9% 0.169 91.605 / 0.4);
    --color-amber-300-30: oklch(87.9% 0.169 91.605 / 0.3);
    --color-amber-300-20: oklch(87.9% 0.169 91.605 / 0.2);
    --color-amber-300-10: oklch(87.9% 0.169 91.605 / 0.1);
    --color-amber-300-5: oklch(87.9% 0.169 91.605 / 0.05);
    --color-amber-400-100: oklch(82.8% 0.189 84.429 / 1);
    --color-amber-400-90: oklch(82.8% 0.189 84.429 / 0.9);
    --color-amber-400-80: oklch(82.8% 0.189 84.429 / 0.8);
    --color-amber-400-70: oklch(82.8% 0.189 84.429 / 0.7);
    --color-amber-400-60: oklch(82.8% 0.189 84.429 / 0.6);
    --color-amber-400-50: oklch(82.8% 0.189 84.429 / 0.5);
    --color-amber-400-40: oklch(82.8% 0.189 84.429 / 0.4);
    --color-amber-400-30: oklch(82.8% 0.189 84.429 / 0.3);
    --color-amber-400-20: oklch(82.8% 0.189 84.429 / 0.2);
    --color-amber-400-10: oklch(82.8% 0.189 84.429 / 0.1);
    --color-amber-400-5: oklch(82.8% 0.189 84.429 / 0.05);
    --color-amber-500-100: oklch(76.9% 0.188 70.08 / 1);
    --color-amber-500-90: oklch(76.9% 0.188 70.08 / 0.9);
    --color-amber-500-80: oklch(76.9% 0.188 70.08 / 0.8);
    --color-amber-500-70: oklch(76.9% 0.188 70.08 / 0.7);
    --color-amber-500-60: oklch(76.9% 0.188 70.08 / 0.6);
    --color-amber-500-50: oklch(76.9% 0.188 70.08 / 0.5);
    --color-amber-500-40: oklch(76.9% 0.188 70.08 / 0.4);
    --color-amber-500-30: oklch(76.9% 0.188 70.08 / 0.3);
    --color-amber-500-20: oklch(76.9% 0.188 70.08 / 0.2);
    --color-amber-500-10: oklch(76.9% 0.188 70.08 / 0.1);
    --color-amber-500-5: oklch(76.9% 0.188 70.08 / 0.05);
    --color-amber-600-100: oklch(66.6% 0.179 58.318 / 1);
    --color-amber-600-90: oklch(66.6% 0.179 58.318 / 0.9);
    --color-amber-600-80: oklch(66.6% 0.179 58.318 / 0.8);
    --color-amber-600-70: oklch(66.6% 0.179 58.318 / 0.7);
    --color-amber-600-60: oklch(66.6% 0.179 58.318 / 0.6);
    --color-amber-600-50: oklch(66.6% 0.179 58.318 / 0.5);
    --color-amber-600-40: oklch(66.6% 0.179 58.318 / 0.4);
    --color-amber-600-30: oklch(66.6% 0.179 58.318 / 0.3);
    --color-amber-600-20: oklch(66.6% 0.179 58.318 / 0.2);
    --color-amber-600-10: oklch(66.6% 0.179 58.318 / 0.1);
    --color-amber-600-5: oklch(66.6% 0.179 58.318 / 0.05);
    --color-amber-700-100: oklch(55.5% 0.163 48.998 / 1);
    --color-amber-700-90: oklch(55.5% 0.163 48.998 / 0.9);
    --color-amber-700-80: oklch(55.5% 0.163 48.998 / 0.8);
    --color-amber-700-70: oklch(55.5% 0.163 48.998 / 0.7);
    --color-amber-700-60: oklch(55.5% 0.163 48.998 / 0.6);
    --color-amber-700-50: oklch(55.5% 0.163 48.998 / 0.5);
    --color-amber-700-40: oklch(55.5% 0.163 48.998 / 0.4);
    --color-amber-700-30: oklch(55.5% 0.163 48.998 / 0.3);
    --color-amber-700-20: oklch(55.5% 0.163 48.998 / 0.2);
    --color-amber-700-10: oklch(55.5% 0.163 48.998 / 0.1);
    --color-amber-700-5: oklch(55.5% 0.163 48.998 / 0.05);
    --color-amber-800-100: oklch(47.3% 0.137 46.201 / 1);
    --color-amber-800-90: oklch(47.3% 0.137 46.201 / 0.9);
    --color-amber-800-80: oklch(47.3% 0.137 46.201 / 0.8);
    --color-amber-800-70: oklch(47.3% 0.137 46.201 / 0.7);
    --color-amber-800-60: oklch(47.3% 0.137 46.201 / 0.6);
    --color-amber-800-50: oklch(47.3% 0.137 46.201 / 0.5);
    --color-amber-800-40: oklch(47.3% 0.137 46.201 / 0.4);
    --color-amber-800-30: oklch(47.3% 0.137 46.201 / 0.3);
    --color-amber-800-20: oklch(47.3% 0.137 46.201 / 0.2);
    --color-amber-800-10: oklch(47.3% 0.137 46.201 / 0.1);
    --color-amber-800-5: oklch(47.3% 0.137 46.201 / 0.05);
    --color-amber-900-100: oklch(41.4% 0.112 45.904 / 1);
    --color-amber-900-90: oklch(41.4% 0.112 45.904 / 0.9);
    --color-amber-900-80: oklch(41.4% 0.112 45.904 / 0.8);
    --color-amber-900-70: oklch(41.4% 0.112 45.904 / 0.7);
    --color-amber-900-60: oklch(41.4% 0.112 45.904 / 0.6);
    --color-amber-900-50: oklch(41.4% 0.112 45.904 / 0.5);
    --color-amber-900-40: oklch(41.4% 0.112 45.904 / 0.4);
    --color-amber-900-30: oklch(41.4% 0.112 45.904 / 0.3);
    --color-amber-900-20: oklch(41.4% 0.112 45.904 / 0.2);
    --color-amber-900-10: oklch(41.4% 0.112 45.904 / 0.1);
    --color-amber-900-5: oklch(41.4% 0.112 45.904 / 0.05);
    --color-amber-950-100: oklch(27.9% 0.077 45.635 / 1);
    --color-amber-950-90: oklch(27.9% 0.077 45.635 / 0.9);
    --color-amber-950-80: oklch(27.9% 0.077 45.635 / 0.8);
    --color-amber-950-70: oklch(27.9% 0.077 45.635 / 0.7);
    --color-amber-950-60: oklch(27.9% 0.077 45.635 / 0.6);
    --color-amber-950-50: oklch(27.9% 0.077 45.635 / 0.5);
    --color-amber-950-40: oklch(27.9% 0.077 45.635 / 0.4);
    --color-amber-950-30: oklch(27.9% 0.077 45.635 / 0.3);
    --color-amber-950-20: oklch(27.9% 0.077 45.635 / 0.2);
    --color-amber-950-10: oklch(27.9% 0.077 45.635 / 0.1);
    --color-amber-950-5: oklch(27.9% 0.077 45.635 / 0.05);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(79.5% 0.184 86.047);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-yellow-950: oklch(28.6% 0.066 53.813);
    --color-yellow-50-100: oklch(98.7% 0.026 102.212 / 1);
    --color-yellow-50-90: oklch(98.7% 0.026 102.212 / 0.9);
    --color-yellow-50-80: oklch(98.7% 0.026 102.212 / 0.8);
    --color-yellow-50-70: oklch(98.7% 0.026 102.212 / 0.7);
    --color-yellow-50-60: oklch(98.7% 0.026 102.212 / 0.6);
    --color-yellow-50-50: oklch(98.7% 0.026 102.212 / 0.5);
    --color-yellow-50-40: oklch(98.7% 0.026 102.212 / 0.4);
    --color-yellow-50-30: oklch(98.7% 0.026 102.212 / 0.3);
    --color-yellow-50-20: oklch(98.7% 0.026 102.212 / 0.2);
    --color-yellow-50-10: oklch(98.7% 0.026 102.212 / 0.1);
    --color-yellow-50-5: oklch(98.7% 0.026 102.212 / 0.05);
    --color-yellow-100-100: oklch(97.3% 0.071 103.193 / 1);
    --color-yellow-100-90: oklch(97.3% 0.071 103.193 / 0.9);
    --color-yellow-100-80: oklch(97.3% 0.071 103.193 / 0.8);
    --color-yellow-100-70: oklch(97.3% 0.071 103.193 / 0.7);
    --color-yellow-100-60: oklch(97.3% 0.071 103.193 / 0.6);
    --color-yellow-100-50: oklch(97.3% 0.071 103.193 / 0.5);
    --color-yellow-100-40: oklch(97.3% 0.071 103.193 / 0.4);
    --color-yellow-100-30: oklch(97.3% 0.071 103.193 / 0.3);
    --color-yellow-100-20: oklch(97.3% 0.071 103.193 / 0.2);
    --color-yellow-100-10: oklch(97.3% 0.071 103.193 / 0.1);
    --color-yellow-100-5: oklch(97.3% 0.071 103.193 / 0.05);
    --color-yellow-200-100: oklch(94.5% 0.129 101.54 / 1);
    --color-yellow-200-90: oklch(94.5% 0.129 101.54 / 0.9);
    --color-yellow-200-80: oklch(94.5% 0.129 101.54 / 0.8);
    --color-yellow-200-70: oklch(94.5% 0.129 101.54 / 0.7);
    --color-yellow-200-60: oklch(94.5% 0.129 101.54 / 0.6);
    --color-yellow-200-50: oklch(94.5% 0.129 101.54 / 0.5);
    --color-yellow-200-40: oklch(94.5% 0.129 101.54 / 0.4);
    --color-yellow-200-30: oklch(94.5% 0.129 101.54 / 0.3);
    --color-yellow-200-20: oklch(94.5% 0.129 101.54 / 0.2);
    --color-yellow-200-10: oklch(94.5% 0.129 101.54 / 0.1);
    --color-yellow-200-5: oklch(94.5% 0.129 101.54 / 0.05);
    --color-yellow-300-100: oklch(90.5% 0.182 98.111 / 1);
    --color-yellow-300-90: oklch(90.5% 0.182 98.111 / 0.9);
    --color-yellow-300-80: oklch(90.5% 0.182 98.111 / 0.8);
    --color-yellow-300-70: oklch(90.5% 0.182 98.111 / 0.7);
    --color-yellow-300-60: oklch(90.5% 0.182 98.111 / 0.6);
    --color-yellow-300-50: oklch(90.5% 0.182 98.111 / 0.5);
    --color-yellow-300-40: oklch(90.5% 0.182 98.111 / 0.4);
    --color-yellow-300-30: oklch(90.5% 0.182 98.111 / 0.3);
    --color-yellow-300-20: oklch(90.5% 0.182 98.111 / 0.2);
    --color-yellow-300-10: oklch(90.5% 0.182 98.111 / 0.1);
    --color-yellow-300-5: oklch(90.5% 0.182 98.111 / 0.05);
    --color-yellow-400-100: oklch(85.2% 0.199 91.936 / 1);
    --color-yellow-400-90: oklch(85.2% 0.199 91.936 / 0.9);
    --color-yellow-400-80: oklch(85.2% 0.199 91.936 / 0.8);
    --color-yellow-400-70: oklch(85.2% 0.199 91.936 / 0.7);
    --color-yellow-400-60: oklch(85.2% 0.199 91.936 / 0.6);
    --color-yellow-400-50: oklch(85.2% 0.199 91.936 / 0.5);
    --color-yellow-400-40: oklch(85.2% 0.199 91.936 / 0.4);
    --color-yellow-400-30: oklch(85.2% 0.199 91.936 / 0.3);
    --color-yellow-400-20: oklch(85.2% 0.199 91.936 / 0.2);
    --color-yellow-400-10: oklch(85.2% 0.199 91.936 / 0.1);
    --color-yellow-400-5: oklch(85.2% 0.199 91.936 / 0.05);
    --color-yellow-500-100: oklch(79.5% 0.184 86.047 / 1);
    --color-yellow-500-90: oklch(79.5% 0.184 86.047 / 0.9);
    --color-yellow-500-80: oklch(79.5% 0.184 86.047 / 0.8);
    --color-yellow-500-70: oklch(79.5% 0.184 86.047 / 0.7);
    --color-yellow-500-60: oklch(79.5% 0.184 86.047 / 0.6);
    --color-yellow-500-50: oklch(79.5% 0.184 86.047 / 0.5);
    --color-yellow-500-40: oklch(79.5% 0.184 86.047 / 0.4);
    --color-yellow-500-30: oklch(79.5% 0.184 86.047 / 0.3);
    --color-yellow-500-20: oklch(79.5% 0.184 86.047 / 0.2);
    --color-yellow-500-10: oklch(79.5% 0.184 86.047 / 0.1);
    --color-yellow-500-5: oklch(79.5% 0.184 86.047 / 0.05);
    --color-yellow-600-100: oklch(79.5% 0.184 86.047 / 1);
    --color-yellow-600-90: oklch(79.5% 0.184 86.047 / 0.9);
    --color-yellow-600-80: oklch(79.5% 0.184 86.047 / 0.8);
    --color-yellow-600-70: oklch(79.5% 0.184 86.047 / 0.7);
    --color-yellow-600-60: oklch(79.5% 0.184 86.047 / 0.6);
    --color-yellow-600-50: oklch(79.5% 0.184 86.047 / 0.5);
    --color-yellow-600-40: oklch(79.5% 0.184 86.047 / 0.4);
    --color-yellow-600-30: oklch(79.5% 0.184 86.047 / 0.3);
    --color-yellow-600-20: oklch(79.5% 0.184 86.047 / 0.2);
    --color-yellow-600-10: oklch(79.5% 0.184 86.047 / 0.1);
    --color-yellow-600-5: oklch(79.5% 0.184 86.047 / 0.05);
    --color-yellow-700-100: oklch(55.4% 0.135 66.442 / 1);
    --color-yellow-700-90: oklch(55.4% 0.135 66.442 / 0.9);
    --color-yellow-700-80: oklch(55.4% 0.135 66.442 / 0.8);
    --color-yellow-700-70: oklch(55.4% 0.135 66.442 / 0.7);
    --color-yellow-700-60: oklch(55.4% 0.135 66.442 / 0.6);
    --color-yellow-700-50: oklch(55.4% 0.135 66.442 / 0.5);
    --color-yellow-700-40: oklch(55.4% 0.135 66.442 / 0.4);
    --color-yellow-700-30: oklch(55.4% 0.135 66.442 / 0.3);
    --color-yellow-700-20: oklch(55.4% 0.135 66.442 / 0.2);
    --color-yellow-700-10: oklch(55.4% 0.135 66.442 / 0.1);
    --color-yellow-700-5: oklch(55.4% 0.135 66.442 / 0.05);
    --color-yellow-800-100: oklch(47.6% 0.114 61.907 / 1);
    --color-yellow-800-90: oklch(47.6% 0.114 61.907 / 0.9);
    --color-yellow-800-80: oklch(47.6% 0.114 61.907 / 0.8);
    --color-yellow-800-70: oklch(47.6% 0.114 61.907 / 0.7);
    --color-yellow-800-60: oklch(47.6% 0.114 61.907 / 0.6);
    --color-yellow-800-50: oklch(47.6% 0.114 61.907 / 0.5);
    --color-yellow-800-40: oklch(47.6% 0.114 61.907 / 0.4);
    --color-yellow-800-30: oklch(47.6% 0.114 61.907 / 0.3);
    --color-yellow-800-20: oklch(47.6% 0.114 61.907 / 0.2);
    --color-yellow-800-10: oklch(47.6% 0.114 61.907 / 0.1);
    --color-yellow-800-5: oklch(47.6% 0.114 61.907 / 0.05);
    --color-yellow-900-100: oklch(42.1% 0.095 57.708 / 1);
    --color-yellow-900-90: oklch(42.1% 0.095 57.708 / 0.9);
    --color-yellow-900-80: oklch(42.1% 0.095 57.708 / 0.8);
    --color-yellow-900-70: oklch(42.1% 0.095 57.708 / 0.7);
    --color-yellow-900-60: oklch(42.1% 0.095 57.708 / 0.6);
    --color-yellow-900-50: oklch(42.1% 0.095 57.708 / 0.5);
    --color-yellow-900-40: oklch(42.1% 0.095 57.708 / 0.4);
    --color-yellow-900-30: oklch(42.1% 0.095 57.708 / 0.3);
    --color-yellow-900-20: oklch(42.1% 0.095 57.708 / 0.2);
    --color-yellow-900-10: oklch(42.1% 0.095 57.708 / 0.1);
    --color-yellow-900-5: oklch(42.1% 0.095 57.708 / 0.05);
    --color-yellow-950-100: oklch(28.6% 0.066 53.813 / 1);
    --color-yellow-950-90: oklch(28.6% 0.066 53.813 / 0.9);
    --color-yellow-950-80: oklch(28.6% 0.066 53.813 / 0.8);
    --color-yellow-950-70: oklch(28.6% 0.066 53.813 / 0.7);
    --color-yellow-950-60: oklch(28.6% 0.066 53.813 / 0.6);
    --color-yellow-950-50: oklch(28.6% 0.066 53.813 / 0.5);
    --color-yellow-950-40: oklch(28.6% 0.066 53.813 / 0.4);
    --color-yellow-950-30: oklch(28.6% 0.066 53.813 / 0.3);
    --color-yellow-950-20: oklch(28.6% 0.066 53.813 / 0.2);
    --color-yellow-950-10: oklch(28.6% 0.066 53.813 / 0.1);
    --color-yellow-950-5: oklch(28.6% 0.066 53.813 / 0.05);
    --color-lime-50: oklch(98.6% 0.031 120.757);
    --color-lime-100: oklch(96.7% 0.067 122.328);
    --color-lime-200: oklch(93.8% 0.127 124.321);
    --color-lime-300: oklch(89.7% 0.196 126.665);
    --color-lime-400: oklch(84.1% 0.238 128.85);
    --color-lime-500: oklch(76.8% 0.233 130.85);
    --color-lime-600: oklch(64.8% 0.2 131.684);
    --color-lime-700: oklch(53.2% 0.157 131.589);
    --color-lime-800: oklch(45.3% 0.124 130.933);
    --color-lime-900: oklch(40.5% 0.101 131.063);
    --color-lime-950: oklch(27.4% 0.072 132.109);
    --color-lime-50-100: oklch(98.6% 0.031 120.757 / 1);
    --color-lime-50-90: oklch(98.6% 0.031 120.757 / 0.9);
    --color-lime-50-80: oklch(98.6% 0.031 120.757 / 0.8);
    --color-lime-50-70: oklch(98.6% 0.031 120.757 / 0.7);
    --color-lime-50-60: oklch(98.6% 0.031 120.757 / 0.6);
    --color-lime-50-50: oklch(98.6% 0.031 120.757 / 0.5);
    --color-lime-50-40: oklch(98.6% 0.031 120.757 / 0.4);
    --color-lime-50-30: oklch(98.6% 0.031 120.757 / 0.3);
    --color-lime-50-20: oklch(98.6% 0.031 120.757 / 0.2);
    --color-lime-50-10: oklch(98.6% 0.031 120.757 / 0.1);
    --color-lime-50-5: oklch(98.6% 0.031 120.757 / 0.05);
    --color-lime-100-100: oklch(96.7% 0.067 122.328 / 1);
    --color-lime-100-90: oklch(96.7% 0.067 122.328 / 0.9);
    --color-lime-100-80: oklch(96.7% 0.067 122.328 / 0.8);
    --color-lime-100-70: oklch(96.7% 0.067 122.328 / 0.7);
    --color-lime-100-60: oklch(96.7% 0.067 122.328 / 0.6);
    --color-lime-100-50: oklch(96.7% 0.067 122.328 / 0.5);
    --color-lime-100-40: oklch(96.7% 0.067 122.328 / 0.4);
    --color-lime-100-30: oklch(96.7% 0.067 122.328 / 0.3);
    --color-lime-100-20: oklch(96.7% 0.067 122.328 / 0.2);
    --color-lime-100-10: oklch(96.7% 0.067 122.328 / 0.1);
    --color-lime-100-5: oklch(96.7% 0.067 122.328 / 0.05);
    --color-lime-200-100: oklch(93.8% 0.127 124.321 / 1);
    --color-lime-200-90: oklch(93.8% 0.127 124.321 / 0.9);
    --color-lime-200-80: oklch(93.8% 0.127 124.321 / 0.8);
    --color-lime-200-70: oklch(93.8% 0.127 124.321 / 0.7);
    --color-lime-200-60: oklch(93.8% 0.127 124.321 / 0.6);
    --color-lime-200-50: oklch(93.8% 0.127 124.321 / 0.5);
    --color-lime-200-40: oklch(93.8% 0.127 124.321 / 0.4);
    --color-lime-200-30: oklch(93.8% 0.127 124.321 / 0.3);
    --color-lime-200-20: oklch(93.8% 0.127 124.321 / 0.2);
    --color-lime-200-10: oklch(93.8% 0.127 124.321 / 0.1);
    --color-lime-200-5: oklch(93.8% 0.127 124.321 / 0.05);
    --color-lime-300-100: oklch(89.7% 0.196 126.665 / 1);
    --color-lime-300-90: oklch(89.7% 0.196 126.665 / 0.9);
    --color-lime-300-80: oklch(89.7% 0.196 126.665 / 0.8);
    --color-lime-300-70: oklch(89.7% 0.196 126.665 / 0.7);
    --color-lime-300-60: oklch(89.7% 0.196 126.665 / 0.6);
    --color-lime-300-50: oklch(89.7% 0.196 126.665 / 0.5);
    --color-lime-300-40: oklch(89.7% 0.196 126.665 / 0.4);
    --color-lime-300-30: oklch(89.7% 0.196 126.665 / 0.3);
    --color-lime-300-20: oklch(89.7% 0.196 126.665 / 0.2);
    --color-lime-300-10: oklch(89.7% 0.196 126.665 / 0.1);
    --color-lime-300-5: oklch(89.7% 0.196 126.665 / 0.05);
    --color-lime-400-100: oklch(84.1% 0.238 128.85 / 1);
    --color-lime-400-90: oklch(84.1% 0.238 128.85 / 0.9);
    --color-lime-400-80: oklch(84.1% 0.238 128.85 / 0.8);
    --color-lime-400-70: oklch(84.1% 0.238 128.85 / 0.7);
    --color-lime-400-60: oklch(84.1% 0.238 128.85 / 0.6);
    --color-lime-400-50: oklch(84.1% 0.238 128.85 / 0.5);
    --color-lime-400-40: oklch(84.1% 0.238 128.85 / 0.4);
    --color-lime-400-30: oklch(84.1% 0.238 128.85 / 0.3);
    --color-lime-400-20: oklch(84.1% 0.238 128.85 / 0.2);
    --color-lime-400-10: oklch(84.1% 0.238 128.85 / 0.1);
    --color-lime-400-5: oklch(84.1% 0.238 128.85 / 0.05);
    --color-lime-500-100: oklch(76.8% 0.233 130.85 / 1);
    --color-lime-500-90: oklch(76.8% 0.233 130.85 / 0.9);
    --color-lime-500-80: oklch(76.8% 0.233 130.85 / 0.8);
    --color-lime-500-70: oklch(76.8% 0.233 130.85 / 0.7);
    --color-lime-500-60: oklch(76.8% 0.233 130.85 / 0.6);
    --color-lime-500-50: oklch(76.8% 0.233 130.85 / 0.5);
    --color-lime-500-40: oklch(76.8% 0.233 130.85 / 0.4);
    --color-lime-500-30: oklch(76.8% 0.233 130.85 / 0.3);
    --color-lime-500-20: oklch(76.8% 0.233 130.85 / 0.2);
    --color-lime-500-10: oklch(76.8% 0.233 130.85 / 0.1);
    --color-lime-500-5: oklch(76.8% 0.233 130.85 / 0.05);
    --color-lime-600-100: oklch(64.8% 0.2 131.684 / 1);
    --color-lime-600-90: oklch(64.8% 0.2 131.684 / 0.9);
    --color-lime-600-80: oklch(64.8% 0.2 131.684 / 0.8);
    --color-lime-600-70: oklch(64.8% 0.2 131.684 / 0.7);
    --color-lime-600-60: oklch(64.8% 0.2 131.684 / 0.6);
    --color-lime-600-50: oklch(64.8% 0.2 131.684 / 0.5);
    --color-lime-600-40: oklch(64.8% 0.2 131.684 / 0.4);
    --color-lime-600-30: oklch(64.8% 0.2 131.684 / 0.3);
    --color-lime-600-20: oklch(64.8% 0.2 131.684 / 0.2);
    --color-lime-600-10: oklch(64.8% 0.2 131.684 / 0.1);
    --color-lime-600-5: oklch(64.8% 0.2 131.684 / 0.05);
    --color-lime-700-100: oklch(53.2% 0.157 131.589 / 1);
    --color-lime-700-90: oklch(53.2% 0.157 131.589 / 0.9);
    --color-lime-700-80: oklch(53.2% 0.157 131.589 / 0.8);
    --color-lime-700-70: oklch(53.2% 0.157 131.589 / 0.7);
    --color-lime-700-60: oklch(53.2% 0.157 131.589 / 0.6);
    --color-lime-700-50: oklch(53.2% 0.157 131.589 / 0.5);
    --color-lime-700-40: oklch(53.2% 0.157 131.589 / 0.4);
    --color-lime-700-30: oklch(53.2% 0.157 131.589 / 0.3);
    --color-lime-700-20: oklch(53.2% 0.157 131.589 / 0.2);
    --color-lime-700-10: oklch(53.2% 0.157 131.589 / 0.1);
    --color-lime-700-5: oklch(53.2% 0.157 131.589 / 0.05);
    --color-lime-800-100: oklch(45.3% 0.124 130.933 / 1);
    --color-lime-800-90: oklch(45.3% 0.124 130.933 / 0.9);
    --color-lime-800-80: oklch(45.3% 0.124 130.933 / 0.8);
    --color-lime-800-70: oklch(45.3% 0.124 130.933 / 0.7);
    --color-lime-800-60: oklch(45.3% 0.124 130.933 / 0.6);
    --color-lime-800-50: oklch(45.3% 0.124 130.933 / 0.5);
    --color-lime-800-40: oklch(45.3% 0.124 130.933 / 0.4);
    --color-lime-800-30: oklch(45.3% 0.124 130.933 / 0.3);
    --color-lime-800-20: oklch(45.3% 0.124 130.933 / 0.2);
    --color-lime-800-10: oklch(45.3% 0.124 130.933 / 0.1);
    --color-lime-800-5: oklch(45.3% 0.124 130.933 / 0.05);
    --color-lime-900-100: oklch(40.5% 0.101 131.063 / 1);
    --color-lime-900-90: oklch(40.5% 0.101 131.063 / 0.9);
    --color-lime-900-80: oklch(40.5% 0.101 131.063 / 0.8);
    --color-lime-900-70: oklch(40.5% 0.101 131.063 / 0.7);
    --color-lime-900-60: oklch(40.5% 0.101 131.063 / 0.6);
    --color-lime-900-50: oklch(40.5% 0.101 131.063 / 0.5);
    --color-lime-900-40: oklch(40.5% 0.101 131.063 / 0.4);
    --color-lime-900-30: oklch(40.5% 0.101 131.063 / 0.3);
    --color-lime-900-20: oklch(40.5% 0.101 131.063 / 0.2);
    --color-lime-900-10: oklch(40.5% 0.101 131.063 / 0.1);
    --color-lime-900-5: oklch(40.5% 0.101 131.063 / 0.05);
    --color-lime-950-100: oklch(27.4% 0.072 132.109 / 1);
    --color-lime-950-90: oklch(27.4% 0.072 132.109 / 0.9);
    --color-lime-950-80: oklch(27.4% 0.072 132.109 / 0.8);
    --color-lime-950-70: oklch(27.4% 0.072 132.109 / 0.7);
    --color-lime-950-60: oklch(27.4% 0.072 132.109 / 0.6);
    --color-lime-950-50: oklch(27.4% 0.072 132.109 / 0.5);
    --color-lime-950-40: oklch(27.4% 0.072 132.109 / 0.4);
    --color-lime-950-30: oklch(27.4% 0.072 132.109 / 0.3);
    --color-lime-950-20: oklch(27.4% 0.072 132.109 / 0.2);
    --color-lime-950-10: oklch(27.4% 0.072 132.109 / 0.1);
    --color-lime-950-5: oklch(27.4% 0.072 132.109 / 0.05);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-green-950: oklch(26.6% 0.065 152.934);
    --color-green-50-100: oklch(98.2% 0.018 155.826 / 1);
    --color-green-50-90: oklch(98.2% 0.018 155.826 / 0.9);
    --color-green-50-80: oklch(98.2% 0.018 155.826 / 0.8);
    --color-green-50-70: oklch(98.2% 0.018 155.826 / 0.7);
    --color-green-50-60: oklch(98.2% 0.018 155.826 / 0.6);
    --color-green-50-50: oklch(98.2% 0.018 155.826 / 0.5);
    --color-green-50-40: oklch(98.2% 0.018 155.826 / 0.4);
    --color-green-50-30: oklch(98.2% 0.018 155.826 / 0.3);
    --color-green-50-20: oklch(98.2% 0.018 155.826 / 0.2);
    --color-green-50-10: oklch(98.2% 0.018 155.826 / 0.1);
    --color-green-50-5: oklch(98.2% 0.018 155.826 / 0.05);
    --color-green-100-100: oklch(96.2% 0.044 156.743 / 1);
    --color-green-100-90: oklch(96.2% 0.044 156.743 / 0.9);
    --color-green-100-80: oklch(96.2% 0.044 156.743 / 0.8);
    --color-green-100-70: oklch(96.2% 0.044 156.743 / 0.7);
    --color-green-100-60: oklch(96.2% 0.044 156.743 / 0.6);
    --color-green-100-50: oklch(96.2% 0.044 156.743 / 0.5);
    --color-green-100-40: oklch(96.2% 0.044 156.743 / 0.4);
    --color-green-100-30: oklch(96.2% 0.044 156.743 / 0.3);
    --color-green-100-20: oklch(96.2% 0.044 156.743 / 0.2);
    --color-green-100-10: oklch(96.2% 0.044 156.743 / 0.1);
    --color-green-100-5: oklch(96.2% 0.044 156.743 / 0.05);
    --color-green-200-100: oklch(92.5% 0.084 155.995 / 1);
    --color-green-200-90: oklch(92.5% 0.084 155.995 / 0.9);
    --color-green-200-80: oklch(92.5% 0.084 155.995 / 0.8);
    --color-green-200-70: oklch(92.5% 0.084 155.995 / 0.7);
    --color-green-200-60: oklch(92.5% 0.084 155.995 / 0.6);
    --color-green-200-50: oklch(92.5% 0.084 155.995 / 0.5);
    --color-green-200-40: oklch(92.5% 0.084 155.995 / 0.4);
    --color-green-200-30: oklch(92.5% 0.084 155.995 / 0.3);
    --color-green-200-20: oklch(92.5% 0.084 155.995 / 0.2);
    --color-green-200-10: oklch(92.5% 0.084 155.995 / 0.1);
    --color-green-200-5: oklch(92.5% 0.084 155.995 / 0.05);
    --color-green-300-100: oklch(87.1% 0.15 154.449 / 1);
    --color-green-300-90: oklch(87.1% 0.15 154.449 / 0.9);
    --color-green-300-80: oklch(87.1% 0.15 154.449 / 0.8);
    --color-green-300-70: oklch(87.1% 0.15 154.449 / 0.7);
    --color-green-300-60: oklch(87.1% 0.15 154.449 / 0.6);
    --color-green-300-50: oklch(87.1% 0.15 154.449 / 0.5);
    --color-green-300-40: oklch(87.1% 0.15 154.449 / 0.4);
    --color-green-300-30: oklch(87.1% 0.15 154.449 / 0.3);
    --color-green-300-20: oklch(87.1% 0.15 154.449 / 0.2);
    --color-green-300-10: oklch(87.1% 0.15 154.449 / 0.1);
    --color-green-300-5: oklch(87.1% 0.15 154.449 / 0.05);
    --color-green-400-100: oklch(79.2% 0.209 151.711 / 1);
    --color-green-400-90: oklch(79.2% 0.209 151.711 / 0.9);
    --color-green-400-80: oklch(79.2% 0.209 151.711 / 0.8);
    --color-green-400-70: oklch(79.2% 0.209 151.711 / 0.7);
    --color-green-400-60: oklch(79.2% 0.209 151.711 / 0.6);
    --color-green-400-50: oklch(79.2% 0.209 151.711 / 0.5);
    --color-green-400-40: oklch(79.2% 0.209 151.711 / 0.4);
    --color-green-400-30: oklch(79.2% 0.209 151.711 / 0.3);
    --color-green-400-20: oklch(79.2% 0.209 151.711 / 0.2);
    --color-green-400-10: oklch(79.2% 0.209 151.711 / 0.1);
    --color-green-400-5: oklch(79.2% 0.209 151.711 / 0.05);
    --color-green-500-100: oklch(72.3% 0.219 149.579 / 1);
    --color-green-500-90: oklch(72.3% 0.219 149.579 / 0.9);
    --color-green-500-80: oklch(72.3% 0.219 149.579 / 0.8);
    --color-green-500-70: oklch(72.3% 0.219 149.579 / 0.7);
    --color-green-500-60: oklch(72.3% 0.219 149.579 / 0.6);
    --color-green-500-50: oklch(72.3% 0.219 149.579 / 0.5);
    --color-green-500-40: oklch(72.3% 0.219 149.579 / 0.4);
    --color-green-500-30: oklch(72.3% 0.219 149.579 / 0.3);
    --color-green-500-20: oklch(72.3% 0.219 149.579 / 0.2);
    --color-green-500-10: oklch(72.3% 0.219 149.579 / 0.1);
    --color-green-500-5: oklch(72.3% 0.219 149.579 / 0.05);
    --color-green-600-100: oklch(62.7% 0.194 149.214 / 1);
    --color-green-600-90: oklch(62.7% 0.194 149.214 / 0.9);
    --color-green-600-80: oklch(62.7% 0.194 149.214 / 0.8);
    --color-green-600-70: oklch(62.7% 0.194 149.214 / 0.7);
    --color-green-600-60: oklch(62.7% 0.194 149.214 / 0.6);
    --color-green-600-50: oklch(62.7% 0.194 149.214 / 0.5);
    --color-green-600-40: oklch(62.7% 0.194 149.214 / 0.4);
    --color-green-600-30: oklch(62.7% 0.194 149.214 / 0.3);
    --color-green-600-20: oklch(62.7% 0.194 149.214 / 0.2);
    --color-green-600-10: oklch(62.7% 0.194 149.214 / 0.1);
    --color-green-600-5: oklch(62.7% 0.194 149.214 / 0.05);
    --color-green-700-100: oklch(52.7% 0.154 150.069 / 1);
    --color-green-700-90: oklch(52.7% 0.154 150.069 / 0.9);
    --color-green-700-80: oklch(52.7% 0.154 150.069 / 0.8);
    --color-green-700-70: oklch(52.7% 0.154 150.069 / 0.7);
    --color-green-700-60: oklch(52.7% 0.154 150.069 / 0.6);
    --color-green-700-50: oklch(52.7% 0.154 150.069 / 0.5);
    --color-green-700-40: oklch(52.7% 0.154 150.069 / 0.4);
    --color-green-700-30: oklch(52.7% 0.154 150.069 / 0.3);
    --color-green-700-20: oklch(52.7% 0.154 150.069 / 0.2);
    --color-green-700-10: oklch(52.7% 0.154 150.069 / 0.1);
    --color-green-700-5: oklch(52.7% 0.154 150.069 / 0.05);
    --color-green-800-100: oklch(44.8% 0.119 151.328 / 1);
    --color-green-800-90: oklch(44.8% 0.119 151.328 / 0.9);
    --color-green-800-80: oklch(44.8% 0.119 151.328 / 0.8);
    --color-green-800-70: oklch(44.8% 0.119 151.328 / 0.7);
    --color-green-800-60: oklch(44.8% 0.119 151.328 / 0.6);
    --color-green-800-50: oklch(44.8% 0.119 151.328 / 0.5);
    --color-green-800-40: oklch(44.8% 0.119 151.328 / 0.4);
    --color-green-800-30: oklch(44.8% 0.119 151.328 / 0.3);
    --color-green-800-20: oklch(44.8% 0.119 151.328 / 0.2);
    --color-green-800-10: oklch(44.8% 0.119 151.328 / 0.1);
    --color-green-800-5: oklch(44.8% 0.119 151.328 / 0.05);
    --color-green-900-100: oklch(39.3% 0.095 152.535 / 1);
    --color-green-900-90: oklch(39.3% 0.095 152.535 / 0.9);
    --color-green-900-80: oklch(39.3% 0.095 152.535 / 0.8);
    --color-green-900-70: oklch(39.3% 0.095 152.535 / 0.7);
    --color-green-900-60: oklch(39.3% 0.095 152.535 / 0.6);
    --color-green-900-50: oklch(39.3% 0.095 152.535 / 0.5);
    --color-green-900-40: oklch(39.3% 0.095 152.535 / 0.4);
    --color-green-900-30: oklch(39.3% 0.095 152.535 / 0.3);
    --color-green-900-20: oklch(39.3% 0.095 152.535 / 0.2);
    --color-green-900-10: oklch(39.3% 0.095 152.535 / 0.1);
    --color-green-900-5: oklch(39.3% 0.095 152.535 / 0.05);
    --color-green-950-100: oklch(26.6% 0.065 152.934 / 1);
    --color-green-950-90: oklch(26.6% 0.065 152.934 / 0.9);
    --color-green-950-80: oklch(26.6% 0.065 152.934 / 0.8);
    --color-green-950-70: oklch(26.6% 0.065 152.934 / 0.7);
    --color-green-950-60: oklch(26.6% 0.065 152.934 / 0.6);
    --color-green-950-50: oklch(26.6% 0.065 152.934 / 0.5);
    --color-green-950-40: oklch(26.6% 0.065 152.934 / 0.4);
    --color-green-950-30: oklch(26.6% 0.065 152.934 / 0.3);
    --color-green-950-20: oklch(26.6% 0.065 152.934 / 0.2);
    --color-green-950-10: oklch(26.6% 0.065 152.934 / 0.1);
    --color-green-950-5: oklch(26.6% 0.065 152.934 / 0.05);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-emerald-950: oklch(26.2% 0.051 172.552);
    --color-emerald-50-100: oklch(97.9% 0.021 166.113 / 1);
    --color-emerald-50-90: oklch(97.9% 0.021 166.113 / 0.9);
    --color-emerald-50-80: oklch(97.9% 0.021 166.113 / 0.8);
    --color-emerald-50-70: oklch(97.9% 0.021 166.113 / 0.7);
    --color-emerald-50-60: oklch(97.9% 0.021 166.113 / 0.6);
    --color-emerald-50-50: oklch(97.9% 0.021 166.113 / 0.5);
    --color-emerald-50-40: oklch(97.9% 0.021 166.113 / 0.4);
    --color-emerald-50-30: oklch(97.9% 0.021 166.113 / 0.3);
    --color-emerald-50-20: oklch(97.9% 0.021 166.113 / 0.2);
    --color-emerald-50-10: oklch(97.9% 0.021 166.113 / 0.1);
    --color-emerald-50-5: oklch(97.9% 0.021 166.113 / 0.05);
    --color-emerald-100-100: oklch(95% 0.052 163.051 / 1);
    --color-emerald-100-90: oklch(95% 0.052 163.051 / 0.9);
    --color-emerald-100-80: oklch(95% 0.052 163.051 / 0.8);
    --color-emerald-100-70: oklch(95% 0.052 163.051 / 0.7);
    --color-emerald-100-60: oklch(95% 0.052 163.051 / 0.6);
    --color-emerald-100-50: oklch(95% 0.052 163.051 / 0.5);
    --color-emerald-100-40: oklch(95% 0.052 163.051 / 0.4);
    --color-emerald-100-30: oklch(95% 0.052 163.051 / 0.3);
    --color-emerald-100-20: oklch(95% 0.052 163.051 / 0.2);
    --color-emerald-100-10: oklch(95% 0.052 163.051 / 0.1);
    --color-emerald-100-5: oklch(95% 0.052 163.051 / 0.05);
    --color-emerald-200-100: oklch(90.5% 0.093 164.15 / 1);
    --color-emerald-200-90: oklch(90.5% 0.093 164.15 / 0.9);
    --color-emerald-200-80: oklch(90.5% 0.093 164.15 / 0.8);
    --color-emerald-200-70: oklch(90.5% 0.093 164.15 / 0.7);
    --color-emerald-200-60: oklch(90.5% 0.093 164.15 / 0.6);
    --color-emerald-200-50: oklch(90.5% 0.093 164.15 / 0.5);
    --color-emerald-200-40: oklch(90.5% 0.093 164.15 / 0.4);
    --color-emerald-200-30: oklch(90.5% 0.093 164.15 / 0.3);
    --color-emerald-200-20: oklch(90.5% 0.093 164.15 / 0.2);
    --color-emerald-200-10: oklch(90.5% 0.093 164.15 / 0.1);
    --color-emerald-200-5: oklch(90.5% 0.093 164.15 / 0.05);
    --color-emerald-300-100: oklch(84.5% 0.143 164.978 / 1);
    --color-emerald-300-90: oklch(84.5% 0.143 164.978 / 0.9);
    --color-emerald-300-80: oklch(84.5% 0.143 164.978 / 0.8);
    --color-emerald-300-70: oklch(84.5% 0.143 164.978 / 0.7);
    --color-emerald-300-60: oklch(84.5% 0.143 164.978 / 0.6);
    --color-emerald-300-50: oklch(84.5% 0.143 164.978 / 0.5);
    --color-emerald-300-40: oklch(84.5% 0.143 164.978 / 0.4);
    --color-emerald-300-30: oklch(84.5% 0.143 164.978 / 0.3);
    --color-emerald-300-20: oklch(84.5% 0.143 164.978 / 0.2);
    --color-emerald-300-10: oklch(84.5% 0.143 164.978 / 0.1);
    --color-emerald-300-5: oklch(84.5% 0.143 164.978 / 0.05);
    --color-emerald-400-100: oklch(76.5% 0.177 163.223 / 1);
    --color-emerald-400-90: oklch(76.5% 0.177 163.223 / 0.9);
    --color-emerald-400-80: oklch(76.5% 0.177 163.223 / 0.8);
    --color-emerald-400-70: oklch(76.5% 0.177 163.223 / 0.7);
    --color-emerald-400-60: oklch(76.5% 0.177 163.223 / 0.6);
    --color-emerald-400-50: oklch(76.5% 0.177 163.223 / 0.5);
    --color-emerald-400-40: oklch(76.5% 0.177 163.223 / 0.4);
    --color-emerald-400-30: oklch(76.5% 0.177 163.223 / 0.3);
    --color-emerald-400-20: oklch(76.5% 0.177 163.223 / 0.2);
    --color-emerald-400-10: oklch(76.5% 0.177 163.223 / 0.1);
    --color-emerald-400-5: oklch(76.5% 0.177 163.223 / 0.05);
    --color-emerald-500-100: oklch(69.6% 0.17 162.48 / 1);
    --color-emerald-500-90: oklch(69.6% 0.17 162.48 / 0.9);
    --color-emerald-500-80: oklch(69.6% 0.17 162.48 / 0.8);
    --color-emerald-500-70: oklch(69.6% 0.17 162.48 / 0.7);
    --color-emerald-500-60: oklch(69.6% 0.17 162.48 / 0.6);
    --color-emerald-500-50: oklch(69.6% 0.17 162.48 / 0.5);
    --color-emerald-500-40: oklch(69.6% 0.17 162.48 / 0.4);
    --color-emerald-500-30: oklch(69.6% 0.17 162.48 / 0.3);
    --color-emerald-500-20: oklch(69.6% 0.17 162.48 / 0.2);
    --color-emerald-500-10: oklch(69.6% 0.17 162.48 / 0.1);
    --color-emerald-500-5: oklch(69.6% 0.17 162.48 / 0.05);
    --color-emerald-600-100: oklch(59.6% 0.145 163.225 / 1);
    --color-emerald-600-90: oklch(59.6% 0.145 163.225 / 0.9);
    --color-emerald-600-80: oklch(59.6% 0.145 163.225 / 0.8);
    --color-emerald-600-70: oklch(59.6% 0.145 163.225 / 0.7);
    --color-emerald-600-60: oklch(59.6% 0.145 163.225 / 0.6);
    --color-emerald-600-50: oklch(59.6% 0.145 163.225 / 0.5);
    --color-emerald-600-40: oklch(59.6% 0.145 163.225 / 0.4);
    --color-emerald-600-30: oklch(59.6% 0.145 163.225 / 0.3);
    --color-emerald-600-20: oklch(59.6% 0.145 163.225 / 0.2);
    --color-emerald-600-10: oklch(59.6% 0.145 163.225 / 0.1);
    --color-emerald-600-5: oklch(59.6% 0.145 163.225 / 0.05);
    --color-emerald-700-100: oklch(50.8% 0.118 165.612 / 1);
    --color-emerald-700-90: oklch(50.8% 0.118 165.612 / 0.9);
    --color-emerald-700-80: oklch(50.8% 0.118 165.612 / 0.8);
    --color-emerald-700-70: oklch(50.8% 0.118 165.612 / 0.7);
    --color-emerald-700-60: oklch(50.8% 0.118 165.612 / 0.6);
    --color-emerald-700-50: oklch(50.8% 0.118 165.612 / 0.5);
    --color-emerald-700-40: oklch(50.8% 0.118 165.612 / 0.4);
    --color-emerald-700-30: oklch(50.8% 0.118 165.612 / 0.3);
    --color-emerald-700-20: oklch(50.8% 0.118 165.612 / 0.2);
    --color-emerald-700-10: oklch(50.8% 0.118 165.612 / 0.1);
    --color-emerald-700-5: oklch(50.8% 0.118 165.612 / 0.05);
    --color-emerald-800-100: oklch(43.2% 0.095 166.913 / 1);
    --color-emerald-800-90: oklch(43.2% 0.095 166.913 / 0.9);
    --color-emerald-800-80: oklch(43.2% 0.095 166.913 / 0.8);
    --color-emerald-800-70: oklch(43.2% 0.095 166.913 / 0.7);
    --color-emerald-800-60: oklch(43.2% 0.095 166.913 / 0.6);
    --color-emerald-800-50: oklch(43.2% 0.095 166.913 / 0.5);
    --color-emerald-800-40: oklch(43.2% 0.095 166.913 / 0.4);
    --color-emerald-800-30: oklch(43.2% 0.095 166.913 / 0.3);
    --color-emerald-800-20: oklch(43.2% 0.095 166.913 / 0.2);
    --color-emerald-800-10: oklch(43.2% 0.095 166.913 / 0.1);
    --color-emerald-800-5: oklch(43.2% 0.095 166.913 / 0.05);
    --color-emerald-900-100: oklch(37.8% 0.077 168.94 / 1);
    --color-emerald-900-90: oklch(37.8% 0.077 168.94 / 0.9);
    --color-emerald-900-80: oklch(37.8% 0.077 168.94 / 0.8);
    --color-emerald-900-70: oklch(37.8% 0.077 168.94 / 0.7);
    --color-emerald-900-60: oklch(37.8% 0.077 168.94 / 0.6);
    --color-emerald-900-50: oklch(37.8% 0.077 168.94 / 0.5);
    --color-emerald-900-40: oklch(37.8% 0.077 168.94 / 0.4);
    --color-emerald-900-30: oklch(37.8% 0.077 168.94 / 0.3);
    --color-emerald-900-20: oklch(37.8% 0.077 168.94 / 0.2);
    --color-emerald-900-10: oklch(37.8% 0.077 168.94 / 0.1);
    --color-emerald-900-5: oklch(37.8% 0.077 168.94 / 0.05);
    --color-emerald-950-100: oklch(26.2% 0.051 172.552 / 1);
    --color-emerald-950-90: oklch(26.2% 0.051 172.552 / 0.9);
    --color-emerald-950-80: oklch(26.2% 0.051 172.552 / 0.8);
    --color-emerald-950-70: oklch(26.2% 0.051 172.552 / 0.7);
    --color-emerald-950-60: oklch(26.2% 0.051 172.552 / 0.6);
    --color-emerald-950-50: oklch(26.2% 0.051 172.552 / 0.5);
    --color-emerald-950-40: oklch(26.2% 0.051 172.552 / 0.4);
    --color-emerald-950-30: oklch(26.2% 0.051 172.552 / 0.3);
    --color-emerald-950-20: oklch(26.2% 0.051 172.552 / 0.2);
    --color-emerald-950-10: oklch(26.2% 0.051 172.552 / 0.1);
    --color-emerald-950-5: oklch(26.2% 0.051 172.552 / 0.05);
    --color-teal-50: oklch(98.4% 0.014 180.72);
    --color-teal-100: oklch(95.3% 0.051 180.801);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-300: oklch(85.5% 0.138 181.071);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-teal-500: oklch(70.4% 0.14 182.503);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-teal-800: oklch(43.7% 0.078 188.216);
    --color-teal-900: oklch(38.6% 0.063 188.416);
    --color-teal-950: oklch(27.7% 0.046 192.524);
    --color-teal-50-100: oklch(98.4% 0.014 180.72 / 1);
    --color-teal-50-90: oklch(98.4% 0.014 180.72 / 0.9);
    --color-teal-50-80: oklch(98.4% 0.014 180.72 / 0.8);
    --color-teal-50-70: oklch(98.4% 0.014 180.72 / 0.7);
    --color-teal-50-60: oklch(98.4% 0.014 180.72 / 0.6);
    --color-teal-50-50: oklch(98.4% 0.014 180.72 / 0.5);
    --color-teal-50-40: oklch(98.4% 0.014 180.72 / 0.4);
    --color-teal-50-30: oklch(98.4% 0.014 180.72 / 0.3);
    --color-teal-50-20: oklch(98.4% 0.014 180.72 / 0.2);
    --color-teal-50-10: oklch(98.4% 0.014 180.72 / 0.1);
    --color-teal-50-5: oklch(98.4% 0.014 180.72 / 0.05);
    --color-teal-100-100: oklch(95.3% 0.051 180.801 / 1);
    --color-teal-100-90: oklch(95.3% 0.051 180.801 / 0.9);
    --color-teal-100-80: oklch(95.3% 0.051 180.801 / 0.8);
    --color-teal-100-70: oklch(95.3% 0.051 180.801 / 0.7);
    --color-teal-100-60: oklch(95.3% 0.051 180.801 / 0.6);
    --color-teal-100-50: oklch(95.3% 0.051 180.801 / 0.5);
    --color-teal-100-40: oklch(95.3% 0.051 180.801 / 0.4);
    --color-teal-100-30: oklch(95.3% 0.051 180.801 / 0.3);
    --color-teal-100-20: oklch(95.3% 0.051 180.801 / 0.2);
    --color-teal-100-10: oklch(95.3% 0.051 180.801 / 0.1);
    --color-teal-100-5: oklch(95.3% 0.051 180.801 / 0.05);
    --color-teal-200-100: oklch(91% 0.096 180.426 / 1);
    --color-teal-200-90: oklch(91% 0.096 180.426 / 0.9);
    --color-teal-200-80: oklch(91% 0.096 180.426 / 0.8);
    --color-teal-200-70: oklch(91% 0.096 180.426 / 0.7);
    --color-teal-200-60: oklch(91% 0.096 180.426 / 0.6);
    --color-teal-200-50: oklch(91% 0.096 180.426 / 0.5);
    --color-teal-200-40: oklch(91% 0.096 180.426 / 0.4);
    --color-teal-200-30: oklch(91% 0.096 180.426 / 0.3);
    --color-teal-200-20: oklch(91% 0.096 180.426 / 0.2);
    --color-teal-200-10: oklch(91% 0.096 180.426 / 0.1);
    --color-teal-200-5: oklch(91% 0.096 180.426 / 0.05);
    --color-teal-300-100: oklch(85.5% 0.138 181.071 / 1);
    --color-teal-300-90: oklch(85.5% 0.138 181.071 / 0.9);
    --color-teal-300-80: oklch(85.5% 0.138 181.071 / 0.8);
    --color-teal-300-70: oklch(85.5% 0.138 181.071 / 0.7);
    --color-teal-300-60: oklch(85.5% 0.138 181.071 / 0.6);
    --color-teal-300-50: oklch(85.5% 0.138 181.071 / 0.5);
    --color-teal-300-40: oklch(85.5% 0.138 181.071 / 0.4);
    --color-teal-300-30: oklch(85.5% 0.138 181.071 / 0.3);
    --color-teal-300-20: oklch(85.5% 0.138 181.071 / 0.2);
    --color-teal-300-10: oklch(85.5% 0.138 181.071 / 0.1);
    --color-teal-300-5: oklch(85.5% 0.138 181.071 / 0.05);
    --color-teal-400-100: oklch(77.7% 0.152 181.912 / 1);
    --color-teal-400-90: oklch(77.7% 0.152 181.912 / 0.9);
    --color-teal-400-80: oklch(77.7% 0.152 181.912 / 0.8);
    --color-teal-400-70: oklch(77.7% 0.152 181.912 / 0.7);
    --color-teal-400-60: oklch(77.7% 0.152 181.912 / 0.6);
    --color-teal-400-50: oklch(77.7% 0.152 181.912 / 0.5);
    --color-teal-400-40: oklch(77.7% 0.152 181.912 / 0.4);
    --color-teal-400-30: oklch(77.7% 0.152 181.912 / 0.3);
    --color-teal-400-20: oklch(77.7% 0.152 181.912 / 0.2);
    --color-teal-400-10: oklch(77.7% 0.152 181.912 / 0.1);
    --color-teal-400-5: oklch(77.7% 0.152 181.912 / 0.05);
    --color-teal-500-100: oklch(70.4% 0.14 182.503 / 1);
    --color-teal-500-90: oklch(70.4% 0.14 182.503 / 0.9);
    --color-teal-500-80: oklch(70.4% 0.14 182.503 / 0.8);
    --color-teal-500-70: oklch(70.4% 0.14 182.503 / 0.7);
    --color-teal-500-60: oklch(70.4% 0.14 182.503 / 0.6);
    --color-teal-500-50: oklch(70.4% 0.14 182.503 / 0.5);
    --color-teal-500-40: oklch(70.4% 0.14 182.503 / 0.4);
    --color-teal-500-30: oklch(70.4% 0.14 182.503 / 0.3);
    --color-teal-500-20: oklch(70.4% 0.14 182.503 / 0.2);
    --color-teal-500-10: oklch(70.4% 0.14 182.503 / 0.1);
    --color-teal-500-5: oklch(70.4% 0.14 182.503 / 0.05);
    --color-teal-600-100: oklch(60% 0.118 184.704 / 1);
    --color-teal-600-90: oklch(60% 0.118 184.704 / 0.9);
    --color-teal-600-80: oklch(60% 0.118 184.704 / 0.8);
    --color-teal-600-70: oklch(60% 0.118 184.704 / 0.7);
    --color-teal-600-60: oklch(60% 0.118 184.704 / 0.6);
    --color-teal-600-50: oklch(60% 0.118 184.704 / 0.5);
    --color-teal-600-40: oklch(60% 0.118 184.704 / 0.4);
    --color-teal-600-30: oklch(60% 0.118 184.704 / 0.3);
    --color-teal-600-20: oklch(60% 0.118 184.704 / 0.2);
    --color-teal-600-10: oklch(60% 0.118 184.704 / 0.1);
    --color-teal-600-5: oklch(60% 0.118 184.704 / 0.05);
    --color-teal-700-100: oklch(51.1% 0.096 186.391 / 1);
    --color-teal-700-90: oklch(51.1% 0.096 186.391 / 0.9);
    --color-teal-700-80: oklch(51.1% 0.096 186.391 / 0.8);
    --color-teal-700-70: oklch(51.1% 0.096 186.391 / 0.7);
    --color-teal-700-60: oklch(51.1% 0.096 186.391 / 0.6);
    --color-teal-700-50: oklch(51.1% 0.096 186.391 / 0.5);
    --color-teal-700-40: oklch(51.1% 0.096 186.391 / 0.4);
    --color-teal-700-30: oklch(51.1% 0.096 186.391 / 0.3);
    --color-teal-700-20: oklch(51.1% 0.096 186.391 / 0.2);
    --color-teal-700-10: oklch(51.1% 0.096 186.391 / 0.1);
    --color-teal-700-5: oklch(51.1% 0.096 186.391 / 0.05);
    --color-teal-800-100: oklch(43.7% 0.078 188.216 / 1);
    --color-teal-800-90: oklch(43.7% 0.078 188.216 / 0.9);
    --color-teal-800-80: oklch(43.7% 0.078 188.216 / 0.8);
    --color-teal-800-70: oklch(43.7% 0.078 188.216 / 0.7);
    --color-teal-800-60: oklch(43.7% 0.078 188.216 / 0.6);
    --color-teal-800-50: oklch(43.7% 0.078 188.216 / 0.5);
    --color-teal-800-40: oklch(43.7% 0.078 188.216 / 0.4);
    --color-teal-800-30: oklch(43.7% 0.078 188.216 / 0.3);
    --color-teal-800-20: oklch(43.7% 0.078 188.216 / 0.2);
    --color-teal-800-10: oklch(43.7% 0.078 188.216 / 0.1);
    --color-teal-800-5: oklch(43.7% 0.078 188.216 / 0.05);
    --color-teal-900-100: oklch(38.6% 0.063 188.416 / 1);
    --color-teal-900-90: oklch(38.6% 0.063 188.416 / 0.9);
    --color-teal-900-80: oklch(38.6% 0.063 188.416 / 0.8);
    --color-teal-900-70: oklch(38.6% 0.063 188.416 / 0.7);
    --color-teal-900-60: oklch(38.6% 0.063 188.416 / 0.6);
    --color-teal-900-50: oklch(38.6% 0.063 188.416 / 0.5);
    --color-teal-900-40: oklch(38.6% 0.063 188.416 / 0.4);
    --color-teal-900-30: oklch(38.6% 0.063 188.416 / 0.3);
    --color-teal-900-20: oklch(38.6% 0.063 188.416 / 0.2);
    --color-teal-900-10: oklch(38.6% 0.063 188.416 / 0.1);
    --color-teal-900-5: oklch(38.6% 0.063 188.416 / 0.05);
    --color-teal-950-100: oklch(27.7% 0.046 192.524 / 1);
    --color-teal-950-90: oklch(27.7% 0.046 192.524 / 0.9);
    --color-teal-950-80: oklch(27.7% 0.046 192.524 / 0.8);
    --color-teal-950-70: oklch(27.7% 0.046 192.524 / 0.7);
    --color-teal-950-60: oklch(27.7% 0.046 192.524 / 0.6);
    --color-teal-950-50: oklch(27.7% 0.046 192.524 / 0.5);
    --color-teal-950-40: oklch(27.7% 0.046 192.524 / 0.4);
    --color-teal-950-30: oklch(27.7% 0.046 192.524 / 0.3);
    --color-teal-950-20: oklch(27.7% 0.046 192.524 / 0.2);
    --color-teal-950-10: oklch(27.7% 0.046 192.524 / 0.1);
    --color-teal-950-5: oklch(27.7% 0.046 192.524 / 0.05);
    --color-cyan-50: oklch(98.4% 0.019 200.873);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-cyan-300: oklch(86.5% 0.127 207.078);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-cyan-800: oklch(45% 0.085 224.283);
    --color-cyan-900: oklch(39.8% 0.07 227.392);
    --color-cyan-950: oklch(30.2% 0.056 229.695);
    --color-cyan-50-100: oklch(98.4% 0.019 200.873 / 1);
    --color-cyan-50-90: oklch(98.4% 0.019 200.873 / 0.9);
    --color-cyan-50-80: oklch(98.4% 0.019 200.873 / 0.8);
    --color-cyan-50-70: oklch(98.4% 0.019 200.873 / 0.7);
    --color-cyan-50-60: oklch(98.4% 0.019 200.873 / 0.6);
    --color-cyan-50-50: oklch(98.4% 0.019 200.873 / 0.5);
    --color-cyan-50-40: oklch(98.4% 0.019 200.873 / 0.4);
    --color-cyan-50-30: oklch(98.4% 0.019 200.873 / 0.3);
    --color-cyan-50-20: oklch(98.4% 0.019 200.873 / 0.2);
    --color-cyan-50-10: oklch(98.4% 0.019 200.873 / 0.1);
    --color-cyan-50-5: oklch(98.4% 0.019 200.873 / 0.05);
    --color-cyan-100-100: oklch(95.6% 0.045 203.388 / 1);
    --color-cyan-100-90: oklch(95.6% 0.045 203.388 / 0.9);
    --color-cyan-100-80: oklch(95.6% 0.045 203.388 / 0.8);
    --color-cyan-100-70: oklch(95.6% 0.045 203.388 / 0.7);
    --color-cyan-100-60: oklch(95.6% 0.045 203.388 / 0.6);
    --color-cyan-100-50: oklch(95.6% 0.045 203.388 / 0.5);
    --color-cyan-100-40: oklch(95.6% 0.045 203.388 / 0.4);
    --color-cyan-100-30: oklch(95.6% 0.045 203.388 / 0.3);
    --color-cyan-100-20: oklch(95.6% 0.045 203.388 / 0.2);
    --color-cyan-100-10: oklch(95.6% 0.045 203.388 / 0.1);
    --color-cyan-100-5: oklch(95.6% 0.045 203.388 / 0.05);
    --color-cyan-200-100: oklch(91.7% 0.08 205.041 / 1);
    --color-cyan-200-90: oklch(91.7% 0.08 205.041 / 0.9);
    --color-cyan-200-80: oklch(91.7% 0.08 205.041 / 0.8);
    --color-cyan-200-70: oklch(91.7% 0.08 205.041 / 0.7);
    --color-cyan-200-60: oklch(91.7% 0.08 205.041 / 0.6);
    --color-cyan-200-50: oklch(91.7% 0.08 205.041 / 0.5);
    --color-cyan-200-40: oklch(91.7% 0.08 205.041 / 0.4);
    --color-cyan-200-30: oklch(91.7% 0.08 205.041 / 0.3);
    --color-cyan-200-20: oklch(91.7% 0.08 205.041 / 0.2);
    --color-cyan-200-10: oklch(91.7% 0.08 205.041 / 0.1);
    --color-cyan-200-5: oklch(91.7% 0.08 205.041 / 0.05);
    --color-cyan-300-100: oklch(86.5% 0.127 207.078 / 1);
    --color-cyan-300-90: oklch(86.5% 0.127 207.078 / 0.9);
    --color-cyan-300-80: oklch(86.5% 0.127 207.078 / 0.8);
    --color-cyan-300-70: oklch(86.5% 0.127 207.078 / 0.7);
    --color-cyan-300-60: oklch(86.5% 0.127 207.078 / 0.6);
    --color-cyan-300-50: oklch(86.5% 0.127 207.078 / 0.5);
    --color-cyan-300-40: oklch(86.5% 0.127 207.078 / 0.4);
    --color-cyan-300-30: oklch(86.5% 0.127 207.078 / 0.3);
    --color-cyan-300-20: oklch(86.5% 0.127 207.078 / 0.2);
    --color-cyan-300-10: oklch(86.5% 0.127 207.078 / 0.1);
    --color-cyan-300-5: oklch(86.5% 0.127 207.078 / 0.05);
    --color-cyan-400-100: oklch(78.9% 0.154 211.53 / 1);
    --color-cyan-400-90: oklch(78.9% 0.154 211.53 / 0.9);
    --color-cyan-400-80: oklch(78.9% 0.154 211.53 / 0.8);
    --color-cyan-400-70: oklch(78.9% 0.154 211.53 / 0.7);
    --color-cyan-400-60: oklch(78.9% 0.154 211.53 / 0.6);
    --color-cyan-400-50: oklch(78.9% 0.154 211.53 / 0.5);
    --color-cyan-400-40: oklch(78.9% 0.154 211.53 / 0.4);
    --color-cyan-400-30: oklch(78.9% 0.154 211.53 / 0.3);
    --color-cyan-400-20: oklch(78.9% 0.154 211.53 / 0.2);
    --color-cyan-400-10: oklch(78.9% 0.154 211.53 / 0.1);
    --color-cyan-400-5: oklch(78.9% 0.154 211.53 / 0.05);
    --color-cyan-500-100: oklch(71.5% 0.143 215.221 / 1);
    --color-cyan-500-90: oklch(71.5% 0.143 215.221 / 0.9);
    --color-cyan-500-80: oklch(71.5% 0.143 215.221 / 0.8);
    --color-cyan-500-70: oklch(71.5% 0.143 215.221 / 0.7);
    --color-cyan-500-60: oklch(71.5% 0.143 215.221 / 0.6);
    --color-cyan-500-50: oklch(71.5% 0.143 215.221 / 0.5);
    --color-cyan-500-40: oklch(71.5% 0.143 215.221 / 0.4);
    --color-cyan-500-30: oklch(71.5% 0.143 215.221 / 0.3);
    --color-cyan-500-20: oklch(71.5% 0.143 215.221 / 0.2);
    --color-cyan-500-10: oklch(71.5% 0.143 215.221 / 0.1);
    --color-cyan-500-5: oklch(71.5% 0.143 215.221 / 0.05);
    --color-cyan-600-100: oklch(60.9% 0.126 221.723 / 1);
    --color-cyan-600-90: oklch(60.9% 0.126 221.723 / 0.9);
    --color-cyan-600-80: oklch(60.9% 0.126 221.723 / 0.8);
    --color-cyan-600-70: oklch(60.9% 0.126 221.723 / 0.7);
    --color-cyan-600-60: oklch(60.9% 0.126 221.723 / 0.6);
    --color-cyan-600-50: oklch(60.9% 0.126 221.723 / 0.5);
    --color-cyan-600-40: oklch(60.9% 0.126 221.723 / 0.4);
    --color-cyan-600-30: oklch(60.9% 0.126 221.723 / 0.3);
    --color-cyan-600-20: oklch(60.9% 0.126 221.723 / 0.2);
    --color-cyan-600-10: oklch(60.9% 0.126 221.723 / 0.1);
    --color-cyan-600-5: oklch(60.9% 0.126 221.723 / 0.05);
    --color-cyan-700-100: oklch(52% 0.105 223.128 / 1);
    --color-cyan-700-90: oklch(52% 0.105 223.128 / 0.9);
    --color-cyan-700-80: oklch(52% 0.105 223.128 / 0.8);
    --color-cyan-700-70: oklch(52% 0.105 223.128 / 0.7);
    --color-cyan-700-60: oklch(52% 0.105 223.128 / 0.6);
    --color-cyan-700-50: oklch(52% 0.105 223.128 / 0.5);
    --color-cyan-700-40: oklch(52% 0.105 223.128 / 0.4);
    --color-cyan-700-30: oklch(52% 0.105 223.128 / 0.3);
    --color-cyan-700-20: oklch(52% 0.105 223.128 / 0.2);
    --color-cyan-700-10: oklch(52% 0.105 223.128 / 0.1);
    --color-cyan-700-5: oklch(52% 0.105 223.128 / 0.05);
    --color-cyan-800-100: oklch(45% 0.085 224.283 / 1);
    --color-cyan-800-90: oklch(45% 0.085 224.283 / 0.9);
    --color-cyan-800-80: oklch(45% 0.085 224.283 / 0.8);
    --color-cyan-800-70: oklch(45% 0.085 224.283 / 0.7);
    --color-cyan-800-60: oklch(45% 0.085 224.283 / 0.6);
    --color-cyan-800-50: oklch(45% 0.085 224.283 / 0.5);
    --color-cyan-800-40: oklch(45% 0.085 224.283 / 0.4);
    --color-cyan-800-30: oklch(45% 0.085 224.283 / 0.3);
    --color-cyan-800-20: oklch(45% 0.085 224.283 / 0.2);
    --color-cyan-800-10: oklch(45% 0.085 224.283 / 0.1);
    --color-cyan-800-5: oklch(45% 0.085 224.283 / 0.05);
    --color-cyan-900-100: oklch(39.8% 0.07 227.392 / 1);
    --color-cyan-900-90: oklch(39.8% 0.07 227.392 / 0.9);
    --color-cyan-900-80: oklch(39.8% 0.07 227.392 / 0.8);
    --color-cyan-900-70: oklch(39.8% 0.07 227.392 / 0.7);
    --color-cyan-900-60: oklch(39.8% 0.07 227.392 / 0.6);
    --color-cyan-900-50: oklch(39.8% 0.07 227.392 / 0.5);
    --color-cyan-900-40: oklch(39.8% 0.07 227.392 / 0.4);
    --color-cyan-900-30: oklch(39.8% 0.07 227.392 / 0.3);
    --color-cyan-900-20: oklch(39.8% 0.07 227.392 / 0.2);
    --color-cyan-900-10: oklch(39.8% 0.07 227.392 / 0.1);
    --color-cyan-900-5: oklch(39.8% 0.07 227.392 / 0.05);
    --color-cyan-950-100: oklch(30.2% 0.056 229.695 / 1);
    --color-cyan-950-90: oklch(30.2% 0.056 229.695 / 0.9);
    --color-cyan-950-80: oklch(30.2% 0.056 229.695 / 0.8);
    --color-cyan-950-70: oklch(30.2% 0.056 229.695 / 0.7);
    --color-cyan-950-60: oklch(30.2% 0.056 229.695 / 0.6);
    --color-cyan-950-50: oklch(30.2% 0.056 229.695 / 0.5);
    --color-cyan-950-40: oklch(30.2% 0.056 229.695 / 0.4);
    --color-cyan-950-30: oklch(30.2% 0.056 229.695 / 0.3);
    --color-cyan-950-20: oklch(30.2% 0.056 229.695 / 0.2);
    --color-cyan-950-10: oklch(30.2% 0.056 229.695 / 0.1);
    --color-cyan-950-5: oklch(30.2% 0.056 229.695 / 0.05);
    --color-mint-50: oklch(0.9809 0.0262 179.09);
    --color-mint-100: oklch(0.9568 0.0614 175.87);
    --color-mint-200: oklch(0.9275 0.1075 177.27);
    --color-mint-300: oklch(0.9035 0.1487 177.93);
    --color-mint-400: oklch(0.8862 0.17 173.1);
    --color-mint-500: oklch(0.8293 0.16085 171.9667);
    --color-mint-600: oklch(0.7146 0.136979 173.1815);
    --color-mint-700: oklch(0.6076 0.112781 176.8914);
    --color-mint-800: oklch(0.5125 0.0941 178.27);
    --color-mint-900: oklch(0.4447 0.0803 180.66);
    --color-mint-950: oklch(0.306 0.0544 183.34);
    --color-mint-50-100: oklch(0.9809 0.0262 179.09 / 1.0);
    --color-mint-50-90: oklch(0.9809 0.0262 179.09 / 0.9);
    --color-mint-50-80: oklch(0.9809 0.0262 179.09 / 0.8);
    --color-mint-50-70: oklch(0.9809 0.0262 179.09 / 0.7);
    --color-mint-50-60: oklch(0.9809 0.0262 179.09 / 0.6);
    --color-mint-50-50: oklch(0.9809 0.0262 179.09 / 0.5);
    --color-mint-50-40: oklch(0.9809 0.0262 179.09 / 0.4);
    --color-mint-50-30: oklch(0.9809 0.0262 179.09 / 0.3);
    --color-mint-50-20: oklch(0.9809 0.0262 179.09 / 0.2);
    --color-mint-50-10: oklch(0.9809 0.0262 179.09 / 0.1);
    --color-mint-50-5: oklch(0.9809 0.0262 179.09 / 0.05);
    --color-mint-100-100: oklch(0.9568 0.0614 175.87 / 1.0);
    --color-mint-100-90: oklch(0.9568 0.0614 175.87 / 0.9);
    --color-mint-100-80: oklch(0.9568 0.0614 175.87 / 0.8);
    --color-mint-100-70: oklch(0.9568 0.0614 175.87 / 0.7);
    --color-mint-100-60: oklch(0.9568 0.0614 175.87 / 0.6);
    --color-mint-100-50: oklch(0.9568 0.0614 175.87 / 0.5);
    --color-mint-100-40: oklch(0.9568 0.0614 175.87 / 0.4);
    --color-mint-100-30: oklch(0.9568 0.0614 175.87 / 0.3);
    --color-mint-100-20: oklch(0.9568 0.0614 175.87 / 0.2);
    --color-mint-100-10: oklch(0.9568 0.0614 175.87 / 0.1);
    --color-mint-100-5: oklch(0.9568 0.0614 175.87 / 0.05);
    --color-mint-200-100: oklch(0.9275 0.1075 177.27 / 1.0);
    --color-mint-200-90: oklch(0.9275 0.1075 177.27 / 0.9);
    --color-mint-200-80: oklch(0.9275 0.1075 177.27 / 0.8);
    --color-mint-200-70: oklch(0.9275 0.1075 177.27 / 0.7);
    --color-mint-200-60: oklch(0.9275 0.1075 177.27 / 0.6);
    --color-mint-200-50: oklch(0.9275 0.1075 177.27 / 0.5);
    --color-mint-200-40: oklch(0.9275 0.1075 177.27 / 0.4);
    --color-mint-200-30: oklch(0.9275 0.1075 177.27 / 0.3);
    --color-mint-200-20: oklch(0.9275 0.1075 177.27 / 0.2);
    --color-mint-200-10: oklch(0.9275 0.1075 177.27 / 0.1);
    --color-mint-200-5: oklch(0.9275 0.1075 177.27 / 0.05);
    --color-mint-300-100: oklch(0.9035 0.1487 177.93 / 1.0);
    --color-mint-300-90: oklch(0.9035 0.1487 177.93 / 0.9);
    --color-mint-300-80: oklch(0.9035 0.1487 177.93 / 0.8);
    --color-mint-300-70: oklch(0.9035 0.1487 177.93 / 0.7);
    --color-mint-300-60: oklch(0.9035 0.1487 177.93 / 0.6);
    --color-mint-300-50: oklch(0.9035 0.1487 177.93 / 0.5);
    --color-mint-300-40: oklch(0.9035 0.1487 177.93 / 0.4);
    --color-mint-300-30: oklch(0.9035 0.1487 177.93 / 0.3);
    --color-mint-300-20: oklch(0.9035 0.1487 177.93 / 0.2);
    --color-mint-300-10: oklch(0.9035 0.1487 177.93 / 0.1);
    --color-mint-300-5: oklch(0.9035 0.1487 177.93 / 0.05);
    --color-mint-400-100: oklch(0.8862 0.17 173.1 / 1.0);
    --color-mint-400-90: oklch(0.8862 0.17 173.1 / 0.9);
    --color-mint-400-80: oklch(0.8862 0.17 173.1 / 0.8);
    --color-mint-400-70: oklch(0.8862 0.17 173.1 / 0.7);
    --color-mint-400-60: oklch(0.8862 0.17 173.1 / 0.6);
    --color-mint-400-50: oklch(0.8862 0.17 173.1 / 0.5);
    --color-mint-400-40: oklch(0.8862 0.17 173.1 / 0.4);
    --color-mint-400-30: oklch(0.8862 0.17 173.1 / 0.3);
    --color-mint-400-20: oklch(0.8862 0.17 173.1 / 0.2);
    --color-mint-400-10: oklch(0.8862 0.17 173.1 / 0.1);
    --color-mint-400-5: oklch(0.8862 0.17 173.1 / 0.05);
    --color-mint-500-100: oklch(0.8293 0.16085 171.9667 / 1.0);
    --color-mint-500-90: oklch(0.8293 0.16085 171.9667 / 0.9);
    --color-mint-500-80: oklch(0.8293 0.16085 171.9667 / 0.8);
    --color-mint-500-70: oklch(0.8293 0.16085 171.9667 / 0.7);
    --color-mint-500-60: oklch(0.8293 0.16085 171.9667 / 0.6);
    --color-mint-500-50: oklch(0.8293 0.16085 171.9667 / 0.5);
    --color-mint-500-40: oklch(0.8293 0.16085 171.9667 / 0.4);
    --color-mint-500-30: oklch(0.8293 0.16085 171.9667 / 0.3);
    --color-mint-500-20: oklch(0.8293 0.16085 171.9667 / 0.2);
    --color-mint-500-10: oklch(0.8293 0.16085 171.9667 / 0.1);
    --color-mint-500-5: oklch(0.8293 0.16085 171.9667 / 0.05);
    --color-mint-600-100: oklch(0.7146 0.136979 173.1815 / 1.0);
    --color-mint-600-90: oklch(0.7146 0.136979 173.1815 / 0.9);
    --color-mint-600-80: oklch(0.7146 0.136979 173.1815 / 0.8);
    --color-mint-600-70: oklch(0.7146 0.136979 173.1815 / 0.7);
    --color-mint-600-60: oklch(0.7146 0.136979 173.1815 / 0.6);
    --color-mint-600-50: oklch(0.7146 0.136979 173.1815 / 0.5);
    --color-mint-600-40: oklch(0.7146 0.136979 173.1815 / 0.4);
    --color-mint-600-30: oklch(0.7146 0.136979 173.1815 / 0.3);
    --color-mint-600-20: oklch(0.7146 0.136979 173.1815 / 0.2);
    --color-mint-600-10: oklch(0.7146 0.136979 173.1815 / 0.1);
    --color-mint-600-5: oklch(0.7146 0.136979 173.1815 / 0.05);
    --color-mint-700-100: oklch(0.6076 0.112781 176.8914 / 1.0);
    --color-mint-700-90: oklch(0.6076 0.112781 176.8914 / 0.9);
    --color-mint-700-80: oklch(0.6076 0.112781 176.8914 / 0.8);
    --color-mint-700-70: oklch(0.6076 0.112781 176.8914 / 0.7);
    --color-mint-700-60: oklch(0.6076 0.112781 176.8914 / 0.6);
    --color-mint-700-50: oklch(0.6076 0.112781 176.8914 / 0.5);
    --color-mint-700-40: oklch(0.6076 0.112781 176.8914 / 0.4);
    --color-mint-700-30: oklch(0.6076 0.112781 176.8914 / 0.3);
    --color-mint-700-20: oklch(0.6076 0.112781 176.8914 / 0.2);
    --color-mint-700-10: oklch(0.6076 0.112781 176.8914 / 0.1);
    --color-mint-700-5: oklch(0.6076 0.112781 176.8914 / 0.05);
    --color-mint-800-100: oklch(0.5125 0.0941 178.27 / 1.0);
    --color-mint-800-90: oklch(0.5125 0.0941 178.27 / 0.9);
    --color-mint-800-80: oklch(0.5125 0.0941 178.27 / 0.8);
    --color-mint-800-70: oklch(0.5125 0.0941 178.27 / 0.7);
    --color-mint-800-60: oklch(0.5125 0.0941 178.27 / 0.6);
    --color-mint-800-50: oklch(0.5125 0.0941 178.27 / 0.5);
    --color-mint-800-40: oklch(0.5125 0.0941 178.27 / 0.4);
    --color-mint-800-30: oklch(0.5125 0.0941 178.27 / 0.3);
    --color-mint-800-20: oklch(0.5125 0.0941 178.27 / 0.2);
    --color-mint-800-10: oklch(0.5125 0.0941 178.27 / 0.1);
    --color-mint-800-5: oklch(0.5125 0.0941 178.27 / 0.05);
    --color-mint-900-100: oklch(0.4447 0.0803 180.66 / 1.0);
    --color-mint-900-90: oklch(0.4447 0.0803 180.66 / 0.9);
    --color-mint-900-80: oklch(0.4447 0.0803 180.66 / 0.8);
    --color-mint-900-70: oklch(0.4447 0.0803 180.66 / 0.7);
    --color-mint-900-60: oklch(0.4447 0.0803 180.66 / 0.6);
    --color-mint-900-50: oklch(0.4447 0.0803 180.66 / 0.5);
    --color-mint-900-40: oklch(0.4447 0.0803 180.66 / 0.4);
    --color-mint-900-30: oklch(0.4447 0.0803 180.66 / 0.3);
    --color-mint-900-20: oklch(0.4447 0.0803 180.66 / 0.2);
    --color-mint-900-10: oklch(0.4447 0.0803 180.66 / 0.1);
    --color-mint-900-5: oklch(0.4447 0.0803 180.66 / 0.05);
    --color-mint-950-100: oklch(0.306 0.0544 183.34 / 1.0);
    --color-mint-950-90: oklch(0.306 0.0544 183.34 / 0.9);
    --color-mint-950-80: oklch(0.306 0.0544 183.34 / 0.8);
    --color-mint-950-70: oklch(0.306 0.0544 183.34 / 0.7);
    --color-mint-950-60: oklch(0.306 0.0544 183.34 / 0.6);
    --color-mint-950-50: oklch(0.306 0.0544 183.34 / 0.5);
    --color-mint-950-40: oklch(0.306 0.0544 183.34 / 0.4);
    --color-mint-950-30: oklch(0.306 0.0544 183.34 / 0.3);
    --color-mint-950-20: oklch(0.306 0.0544 183.34 / 0.2);
    --color-mint-950-10: oklch(0.306 0.0544 183.34 / 0.1);
    --color-mint-950-5: oklch(0.306 0.0544 183.34 / 0.05);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-sky-900: oklch(39.1% 0.09 240.876);
    --color-sky-950: oklch(29.3% 0.066 243.157);
    --color-sky-50-100: oklch(97.7% 0.013 236.62 / 1);
    --color-sky-50-90: oklch(97.7% 0.013 236.62 / 0.9);
    --color-sky-50-80: oklch(97.7% 0.013 236.62 / 0.8);
    --color-sky-50-70: oklch(97.7% 0.013 236.62 / 0.7);
    --color-sky-50-60: oklch(97.7% 0.013 236.62 / 0.6);
    --color-sky-50-50: oklch(97.7% 0.013 236.62 / 0.5);
    --color-sky-50-40: oklch(97.7% 0.013 236.62 / 0.4);
    --color-sky-50-30: oklch(97.7% 0.013 236.62 / 0.3);
    --color-sky-50-20: oklch(97.7% 0.013 236.62 / 0.2);
    --color-sky-50-10: oklch(97.7% 0.013 236.62 / 0.1);
    --color-sky-50-5: oklch(97.7% 0.013 236.62 / 0.05);
    --color-sky-100-100: oklch(95.1% 0.026 236.824 / 1);
    --color-sky-100-90: oklch(95.1% 0.026 236.824 / 0.9);
    --color-sky-100-80: oklch(95.1% 0.026 236.824 / 0.8);
    --color-sky-100-70: oklch(95.1% 0.026 236.824 / 0.7);
    --color-sky-100-60: oklch(95.1% 0.026 236.824 / 0.6);
    --color-sky-100-50: oklch(95.1% 0.026 236.824 / 0.5);
    --color-sky-100-40: oklch(95.1% 0.026 236.824 / 0.4);
    --color-sky-100-30: oklch(95.1% 0.026 236.824 / 0.3);
    --color-sky-100-20: oklch(95.1% 0.026 236.824 / 0.2);
    --color-sky-100-10: oklch(95.1% 0.026 236.824 / 0.1);
    --color-sky-100-5: oklch(95.1% 0.026 236.824 / 0.05);
    --color-sky-200-100: oklch(90.1% 0.058 230.902 / 1);
    --color-sky-200-90: oklch(90.1% 0.058 230.902 / 0.9);
    --color-sky-200-80: oklch(90.1% 0.058 230.902 / 0.8);
    --color-sky-200-70: oklch(90.1% 0.058 230.902 / 0.7);
    --color-sky-200-60: oklch(90.1% 0.058 230.902 / 0.6);
    --color-sky-200-50: oklch(90.1% 0.058 230.902 / 0.5);
    --color-sky-200-40: oklch(90.1% 0.058 230.902 / 0.4);
    --color-sky-200-30: oklch(90.1% 0.058 230.902 / 0.3);
    --color-sky-200-20: oklch(90.1% 0.058 230.902 / 0.2);
    --color-sky-200-10: oklch(90.1% 0.058 230.902 / 0.1);
    --color-sky-200-5: oklch(90.1% 0.058 230.902 / 0.05);
    --color-sky-300-100: oklch(82.8% 0.111 230.318 / 1);
    --color-sky-300-90: oklch(82.8% 0.111 230.318 / 0.9);
    --color-sky-300-80: oklch(82.8% 0.111 230.318 / 0.8);
    --color-sky-300-70: oklch(82.8% 0.111 230.318 / 0.7);
    --color-sky-300-60: oklch(82.8% 0.111 230.318 / 0.6);
    --color-sky-300-50: oklch(82.8% 0.111 230.318 / 0.5);
    --color-sky-300-40: oklch(82.8% 0.111 230.318 / 0.4);
    --color-sky-300-30: oklch(82.8% 0.111 230.318 / 0.3);
    --color-sky-300-20: oklch(82.8% 0.111 230.318 / 0.2);
    --color-sky-300-10: oklch(82.8% 0.111 230.318 / 0.1);
    --color-sky-300-5: oklch(82.8% 0.111 230.318 / 0.05);
    --color-sky-400-100: oklch(74.6% 0.16 232.661 / 1);
    --color-sky-400-90: oklch(74.6% 0.16 232.661 / 0.9);
    --color-sky-400-80: oklch(74.6% 0.16 232.661 / 0.8);
    --color-sky-400-70: oklch(74.6% 0.16 232.661 / 0.7);
    --color-sky-400-60: oklch(74.6% 0.16 232.661 / 0.6);
    --color-sky-400-50: oklch(74.6% 0.16 232.661 / 0.5);
    --color-sky-400-40: oklch(74.6% 0.16 232.661 / 0.4);
    --color-sky-400-30: oklch(74.6% 0.16 232.661 / 0.3);
    --color-sky-400-20: oklch(74.6% 0.16 232.661 / 0.2);
    --color-sky-400-10: oklch(74.6% 0.16 232.661 / 0.1);
    --color-sky-400-5: oklch(74.6% 0.16 232.661 / 0.05);
    --color-sky-500-100: oklch(68.5% 0.169 237.323 / 1);
    --color-sky-500-90: oklch(68.5% 0.169 237.323 / 0.9);
    --color-sky-500-80: oklch(68.5% 0.169 237.323 / 0.8);
    --color-sky-500-70: oklch(68.5% 0.169 237.323 / 0.7);
    --color-sky-500-60: oklch(68.5% 0.169 237.323 / 0.6);
    --color-sky-500-50: oklch(68.5% 0.169 237.323 / 0.5);
    --color-sky-500-40: oklch(68.5% 0.169 237.323 / 0.4);
    --color-sky-500-30: oklch(68.5% 0.169 237.323 / 0.3);
    --color-sky-500-20: oklch(68.5% 0.169 237.323 / 0.2);
    --color-sky-500-10: oklch(68.5% 0.169 237.323 / 0.1);
    --color-sky-500-5: oklch(68.5% 0.169 237.323 / 0.05);
    --color-sky-600-100: oklch(58.8% 0.158 241.966 / 1);
    --color-sky-600-90: oklch(58.8% 0.158 241.966 / 0.9);
    --color-sky-600-80: oklch(58.8% 0.158 241.966 / 0.8);
    --color-sky-600-70: oklch(58.8% 0.158 241.966 / 0.7);
    --color-sky-600-60: oklch(58.8% 0.158 241.966 / 0.6);
    --color-sky-600-50: oklch(58.8% 0.158 241.966 / 0.5);
    --color-sky-600-40: oklch(58.8% 0.158 241.966 / 0.4);
    --color-sky-600-30: oklch(58.8% 0.158 241.966 / 0.3);
    --color-sky-600-20: oklch(58.8% 0.158 241.966 / 0.2);
    --color-sky-600-10: oklch(58.8% 0.158 241.966 / 0.1);
    --color-sky-600-5: oklch(58.8% 0.158 241.966 / 0.05);
    --color-sky-700-100: oklch(50% 0.134 242.749 / 1);
    --color-sky-700-90: oklch(50% 0.134 242.749 / 0.9);
    --color-sky-700-80: oklch(50% 0.134 242.749 / 0.8);
    --color-sky-700-70: oklch(50% 0.134 242.749 / 0.7);
    --color-sky-700-60: oklch(50% 0.134 242.749 / 0.6);
    --color-sky-700-50: oklch(50% 0.134 242.749 / 0.5);
    --color-sky-700-40: oklch(50% 0.134 242.749 / 0.4);
    --color-sky-700-30: oklch(50% 0.134 242.749 / 0.3);
    --color-sky-700-20: oklch(50% 0.134 242.749 / 0.2);
    --color-sky-700-10: oklch(50% 0.134 242.749 / 0.1);
    --color-sky-700-5: oklch(50% 0.134 242.749 / 0.05);
    --color-sky-800-100: oklch(44.3% 0.11 240.79 / 1);
    --color-sky-800-90: oklch(44.3% 0.11 240.79 / 0.9);
    --color-sky-800-80: oklch(44.3% 0.11 240.79 / 0.8);
    --color-sky-800-70: oklch(44.3% 0.11 240.79 / 0.7);
    --color-sky-800-60: oklch(44.3% 0.11 240.79 / 0.6);
    --color-sky-800-50: oklch(44.3% 0.11 240.79 / 0.5);
    --color-sky-800-40: oklch(44.3% 0.11 240.79 / 0.4);
    --color-sky-800-30: oklch(44.3% 0.11 240.79 / 0.3);
    --color-sky-800-20: oklch(44.3% 0.11 240.79 / 0.2);
    --color-sky-800-10: oklch(44.3% 0.11 240.79 / 0.1);
    --color-sky-800-5: oklch(44.3% 0.11 240.79 / 0.05);
    --color-sky-900-100: oklch(39.1% 0.09 240.876 / 1);
    --color-sky-900-90: oklch(39.1% 0.09 240.876 / 0.9);
    --color-sky-900-80: oklch(39.1% 0.09 240.876 / 0.8);
    --color-sky-900-70: oklch(39.1% 0.09 240.876 / 0.7);
    --color-sky-900-60: oklch(39.1% 0.09 240.876 / 0.6);
    --color-sky-900-50: oklch(39.1% 0.09 240.876 / 0.5);
    --color-sky-900-40: oklch(39.1% 0.09 240.876 / 0.4);
    --color-sky-900-30: oklch(39.1% 0.09 240.876 / 0.3);
    --color-sky-900-20: oklch(39.1% 0.09 240.876 / 0.2);
    --color-sky-900-10: oklch(39.1% 0.09 240.876 / 0.1);
    --color-sky-900-5: oklch(39.1% 0.09 240.876 / 0.05);
    --color-sky-950-100: oklch(29.3% 0.066 243.157 / 1);
    --color-sky-950-90: oklch(29.3% 0.066 243.157 / 0.9);
    --color-sky-950-80: oklch(29.3% 0.066 243.157 / 0.8);
    --color-sky-950-70: oklch(29.3% 0.066 243.157 / 0.7);
    --color-sky-950-60: oklch(29.3% 0.066 243.157 / 0.6);
    --color-sky-950-50: oklch(29.3% 0.066 243.157 / 0.5);
    --color-sky-950-40: oklch(29.3% 0.066 243.157 / 0.4);
    --color-sky-950-30: oklch(29.3% 0.066 243.157 / 0.3);
    --color-sky-950-20: oklch(29.3% 0.066 243.157 / 0.2);
    --color-sky-950-10: oklch(29.3% 0.066 243.157 / 0.1);
    --color-sky-950-5: oklch(29.3% 0.066 243.157 / 0.05);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(37.9% 0.146 265.522);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-blue-50-100: oklch(97% 0.014 254.604 / 1);
    --color-blue-50-90: oklch(97% 0.014 254.604 / 0.9);
    --color-blue-50-80: oklch(97% 0.014 254.604 / 0.8);
    --color-blue-50-70: oklch(97% 0.014 254.604 / 0.7);
    --color-blue-50-60: oklch(97% 0.014 254.604 / 0.6);
    --color-blue-50-50: oklch(97% 0.014 254.604 / 0.5);
    --color-blue-50-40: oklch(97% 0.014 254.604 / 0.4);
    --color-blue-50-30: oklch(97% 0.014 254.604 / 0.3);
    --color-blue-50-20: oklch(97% 0.014 254.604 / 0.2);
    --color-blue-50-10: oklch(97% 0.014 254.604 / 0.1);
    --color-blue-50-5: oklch(97% 0.014 254.604 / 0.05);
    --color-blue-100-100: oklch(93.2% 0.032 255.585 / 1);
    --color-blue-100-90: oklch(93.2% 0.032 255.585 / 0.9);
    --color-blue-100-80: oklch(93.2% 0.032 255.585 / 0.8);
    --color-blue-100-70: oklch(93.2% 0.032 255.585 / 0.7);
    --color-blue-100-60: oklch(93.2% 0.032 255.585 / 0.6);
    --color-blue-100-50: oklch(93.2% 0.032 255.585 / 0.5);
    --color-blue-100-40: oklch(93.2% 0.032 255.585 / 0.4);
    --color-blue-100-30: oklch(93.2% 0.032 255.585 / 0.3);
    --color-blue-100-20: oklch(93.2% 0.032 255.585 / 0.2);
    --color-blue-100-10: oklch(93.2% 0.032 255.585 / 0.1);
    --color-blue-100-5: oklch(93.2% 0.032 255.585 / 0.05);
    --color-blue-200-100: oklch(88.2% 0.059 254.128 / 1);
    --color-blue-200-90: oklch(88.2% 0.059 254.128 / 0.9);
    --color-blue-200-80: oklch(88.2% 0.059 254.128 / 0.8);
    --color-blue-200-70: oklch(88.2% 0.059 254.128 / 0.7);
    --color-blue-200-60: oklch(88.2% 0.059 254.128 / 0.6);
    --color-blue-200-50: oklch(88.2% 0.059 254.128 / 0.5);
    --color-blue-200-40: oklch(88.2% 0.059 254.128 / 0.4);
    --color-blue-200-30: oklch(88.2% 0.059 254.128 / 0.3);
    --color-blue-200-20: oklch(88.2% 0.059 254.128 / 0.2);
    --color-blue-200-10: oklch(88.2% 0.059 254.128 / 0.1);
    --color-blue-200-5: oklch(88.2% 0.059 254.128 / 0.05);
    --color-blue-300-100: oklch(80.9% 0.105 251.813 / 1);
    --color-blue-300-90: oklch(80.9% 0.105 251.813 / 0.9);
    --color-blue-300-80: oklch(80.9% 0.105 251.813 / 0.8);
    --color-blue-300-70: oklch(80.9% 0.105 251.813 / 0.7);
    --color-blue-300-60: oklch(80.9% 0.105 251.813 / 0.6);
    --color-blue-300-50: oklch(80.9% 0.105 251.813 / 0.5);
    --color-blue-300-40: oklch(80.9% 0.105 251.813 / 0.4);
    --color-blue-300-30: oklch(80.9% 0.105 251.813 / 0.3);
    --color-blue-300-20: oklch(80.9% 0.105 251.813 / 0.2);
    --color-blue-300-10: oklch(80.9% 0.105 251.813 / 0.1);
    --color-blue-300-5: oklch(80.9% 0.105 251.813 / 0.05);
    --color-blue-400-100: oklch(70.7% 0.165 254.624 / 1);
    --color-blue-400-90: oklch(70.7% 0.165 254.624 / 0.9);
    --color-blue-400-80: oklch(70.7% 0.165 254.624 / 0.8);
    --color-blue-400-70: oklch(70.7% 0.165 254.624 / 0.7);
    --color-blue-400-60: oklch(70.7% 0.165 254.624 / 0.6);
    --color-blue-400-50: oklch(70.7% 0.165 254.624 / 0.5);
    --color-blue-400-40: oklch(70.7% 0.165 254.624 / 0.4);
    --color-blue-400-30: oklch(70.7% 0.165 254.624 / 0.3);
    --color-blue-400-20: oklch(70.7% 0.165 254.624 / 0.2);
    --color-blue-400-10: oklch(70.7% 0.165 254.624 / 0.1);
    --color-blue-400-5: oklch(70.7% 0.165 254.624 / 0.05);
    --color-blue-500-100: oklch(62.3% 0.214 259.815 / 1);
    --color-blue-500-90: oklch(62.3% 0.214 259.815 / 0.9);
    --color-blue-500-80: oklch(62.3% 0.214 259.815 / 0.8);
    --color-blue-500-70: oklch(62.3% 0.214 259.815 / 0.7);
    --color-blue-500-60: oklch(62.3% 0.214 259.815 / 0.6);
    --color-blue-500-50: oklch(62.3% 0.214 259.815 / 0.5);
    --color-blue-500-40: oklch(62.3% 0.214 259.815 / 0.4);
    --color-blue-500-30: oklch(62.3% 0.214 259.815 / 0.3);
    --color-blue-500-20: oklch(62.3% 0.214 259.815 / 0.2);
    --color-blue-500-10: oklch(62.3% 0.214 259.815 / 0.1);
    --color-blue-500-5: oklch(62.3% 0.214 259.815 / 0.05);
    --color-blue-600-100: oklch(54.6% 0.245 262.881 / 1);
    --color-blue-600-90: oklch(54.6% 0.245 262.881 / 0.9);
    --color-blue-600-80: oklch(54.6% 0.245 262.881 / 0.8);
    --color-blue-600-70: oklch(54.6% 0.245 262.881 / 0.7);
    --color-blue-600-60: oklch(54.6% 0.245 262.881 / 0.6);
    --color-blue-600-50: oklch(54.6% 0.245 262.881 / 0.5);
    --color-blue-600-40: oklch(54.6% 0.245 262.881 / 0.4);
    --color-blue-600-30: oklch(54.6% 0.245 262.881 / 0.3);
    --color-blue-600-20: oklch(54.6% 0.245 262.881 / 0.2);
    --color-blue-600-10: oklch(54.6% 0.245 262.881 / 0.1);
    --color-blue-600-5: oklch(54.6% 0.245 262.881 / 0.05);
    --color-blue-700-100: oklch(48.8% 0.243 264.376 / 1);
    --color-blue-700-90: oklch(48.8% 0.243 264.376 / 0.9);
    --color-blue-700-80: oklch(48.8% 0.243 264.376 / 0.8);
    --color-blue-700-70: oklch(48.8% 0.243 264.376 / 0.7);
    --color-blue-700-60: oklch(48.8% 0.243 264.376 / 0.6);
    --color-blue-700-50: oklch(48.8% 0.243 264.376 / 0.5);
    --color-blue-700-40: oklch(48.8% 0.243 264.376 / 0.4);
    --color-blue-700-30: oklch(48.8% 0.243 264.376 / 0.3);
    --color-blue-700-20: oklch(48.8% 0.243 264.376 / 0.2);
    --color-blue-700-10: oklch(48.8% 0.243 264.376 / 0.1);
    --color-blue-700-5: oklch(48.8% 0.243 264.376 / 0.05);
    --color-blue-800-100: oklch(42.4% 0.199 265.638 / 1);
    --color-blue-800-90: oklch(42.4% 0.199 265.638 / 0.9);
    --color-blue-800-80: oklch(42.4% 0.199 265.638 / 0.8);
    --color-blue-800-70: oklch(42.4% 0.199 265.638 / 0.7);
    --color-blue-800-60: oklch(42.4% 0.199 265.638 / 0.6);
    --color-blue-800-50: oklch(42.4% 0.199 265.638 / 0.5);
    --color-blue-800-40: oklch(42.4% 0.199 265.638 / 0.4);
    --color-blue-800-30: oklch(42.4% 0.199 265.638 / 0.3);
    --color-blue-800-20: oklch(42.4% 0.199 265.638 / 0.2);
    --color-blue-800-10: oklch(42.4% 0.199 265.638 / 0.1);
    --color-blue-800-5: oklch(42.4% 0.199 265.638 / 0.05);
    --color-blue-900-100: oklch(37.9% 0.146 265.522 / 1);
    --color-blue-900-90: oklch(37.9% 0.146 265.522 / 0.9);
    --color-blue-900-80: oklch(37.9% 0.146 265.522 / 0.8);
    --color-blue-900-70: oklch(37.9% 0.146 265.522 / 0.7);
    --color-blue-900-60: oklch(37.9% 0.146 265.522 / 0.6);
    --color-blue-900-50: oklch(37.9% 0.146 265.522 / 0.5);
    --color-blue-900-40: oklch(37.9% 0.146 265.522 / 0.4);
    --color-blue-900-30: oklch(37.9% 0.146 265.522 / 0.3);
    --color-blue-900-20: oklch(37.9% 0.146 265.522 / 0.2);
    --color-blue-900-10: oklch(37.9% 0.146 265.522 / 0.1);
    --color-blue-900-5: oklch(37.9% 0.146 265.522 / 0.05);
    --color-blue-950-100: oklch(28.2% 0.091 267.935 / 1);
    --color-blue-950-90: oklch(28.2% 0.091 267.935 / 0.9);
    --color-blue-950-80: oklch(28.2% 0.091 267.935 / 0.8);
    --color-blue-950-70: oklch(28.2% 0.091 267.935 / 0.7);
    --color-blue-950-60: oklch(28.2% 0.091 267.935 / 0.6);
    --color-blue-950-50: oklch(28.2% 0.091 267.935 / 0.5);
    --color-blue-950-40: oklch(28.2% 0.091 267.935 / 0.4);
    --color-blue-950-30: oklch(28.2% 0.091 267.935 / 0.3);
    --color-blue-950-20: oklch(28.2% 0.091 267.935 / 0.2);
    --color-blue-950-10: oklch(28.2% 0.091 267.935 / 0.1);
    --color-blue-950-5: oklch(28.2% 0.091 267.935 / 0.05);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(78.5% 0.115 274.713);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-800: oklch(39.8% 0.195 277.366);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-indigo-950: oklch(25.7% 0.09 281.288);
    --color-indigo-50-100: oklch(96.2% 0.018 272.314 / 1);
    --color-indigo-50-90: oklch(96.2% 0.018 272.314 / 0.9);
    --color-indigo-50-80: oklch(96.2% 0.018 272.314 / 0.8);
    --color-indigo-50-70: oklch(96.2% 0.018 272.314 / 0.7);
    --color-indigo-50-60: oklch(96.2% 0.018 272.314 / 0.6);
    --color-indigo-50-50: oklch(96.2% 0.018 272.314 / 0.5);
    --color-indigo-50-40: oklch(96.2% 0.018 272.314 / 0.4);
    --color-indigo-50-30: oklch(96.2% 0.018 272.314 / 0.3);
    --color-indigo-50-20: oklch(96.2% 0.018 272.314 / 0.2);
    --color-indigo-50-10: oklch(96.2% 0.018 272.314 / 0.1);
    --color-indigo-50-5: oklch(96.2% 0.018 272.314 / 0.05);
    --color-indigo-100-100: oklch(93% 0.034 272.788 / 1);
    --color-indigo-100-90: oklch(93% 0.034 272.788 / 0.9);
    --color-indigo-100-80: oklch(93% 0.034 272.788 / 0.8);
    --color-indigo-100-70: oklch(93% 0.034 272.788 / 0.7);
    --color-indigo-100-60: oklch(93% 0.034 272.788 / 0.6);
    --color-indigo-100-50: oklch(93% 0.034 272.788 / 0.5);
    --color-indigo-100-40: oklch(93% 0.034 272.788 / 0.4);
    --color-indigo-100-30: oklch(93% 0.034 272.788 / 0.3);
    --color-indigo-100-20: oklch(93% 0.034 272.788 / 0.2);
    --color-indigo-100-10: oklch(93% 0.034 272.788 / 0.1);
    --color-indigo-100-5: oklch(93% 0.034 272.788 / 0.05);
    --color-indigo-200-100: oklch(78.5% 0.115 274.713 / 1);
    --color-indigo-200-90: oklch(78.5% 0.115 274.713 / 0.9);
    --color-indigo-200-80: oklch(78.5% 0.115 274.713 / 0.8);
    --color-indigo-200-70: oklch(78.5% 0.115 274.713 / 0.7);
    --color-indigo-200-60: oklch(78.5% 0.115 274.713 / 0.6);
    --color-indigo-200-50: oklch(78.5% 0.115 274.713 / 0.5);
    --color-indigo-200-40: oklch(78.5% 0.115 274.713 / 0.4);
    --color-indigo-200-30: oklch(78.5% 0.115 274.713 / 0.3);
    --color-indigo-200-20: oklch(78.5% 0.115 274.713 / 0.2);
    --color-indigo-200-10: oklch(78.5% 0.115 274.713 / 0.1);
    --color-indigo-200-5: oklch(78.5% 0.115 274.713 / 0.05);
    --color-indigo-300-100: oklch(78.5% 0.115 274.713 / 1);
    --color-indigo-300-90: oklch(78.5% 0.115 274.713 / 0.9);
    --color-indigo-300-80: oklch(78.5% 0.115 274.713 / 0.8);
    --color-indigo-300-70: oklch(78.5% 0.115 274.713 / 0.7);
    --color-indigo-300-60: oklch(78.5% 0.115 274.713 / 0.6);
    --color-indigo-300-50: oklch(78.5% 0.115 274.713 / 0.5);
    --color-indigo-300-40: oklch(78.5% 0.115 274.713 / 0.4);
    --color-indigo-300-30: oklch(78.5% 0.115 274.713 / 0.3);
    --color-indigo-300-20: oklch(78.5% 0.115 274.713 / 0.2);
    --color-indigo-300-10: oklch(78.5% 0.115 274.713 / 0.1);
    --color-indigo-300-5: oklch(78.5% 0.115 274.713 / 0.05);
    --color-indigo-400-100: oklch(67.3% 0.182 276.935 / 1);
    --color-indigo-400-90: oklch(67.3% 0.182 276.935 / 0.9);
    --color-indigo-400-80: oklch(67.3% 0.182 276.935 / 0.8);
    --color-indigo-400-70: oklch(67.3% 0.182 276.935 / 0.7);
    --color-indigo-400-60: oklch(67.3% 0.182 276.935 / 0.6);
    --color-indigo-400-50: oklch(67.3% 0.182 276.935 / 0.5);
    --color-indigo-400-40: oklch(67.3% 0.182 276.935 / 0.4);
    --color-indigo-400-30: oklch(67.3% 0.182 276.935 / 0.3);
    --color-indigo-400-20: oklch(67.3% 0.182 276.935 / 0.2);
    --color-indigo-400-10: oklch(67.3% 0.182 276.935 / 0.1);
    --color-indigo-400-5: oklch(67.3% 0.182 276.935 / 0.05);
    --color-indigo-500-100: oklch(58.5% 0.233 277.117 / 1);
    --color-indigo-500-90: oklch(58.5% 0.233 277.117 / 0.9);
    --color-indigo-500-80: oklch(58.5% 0.233 277.117 / 0.8);
    --color-indigo-500-70: oklch(58.5% 0.233 277.117 / 0.7);
    --color-indigo-500-60: oklch(58.5% 0.233 277.117 / 0.6);
    --color-indigo-500-50: oklch(58.5% 0.233 277.117 / 0.5);
    --color-indigo-500-40: oklch(58.5% 0.233 277.117 / 0.4);
    --color-indigo-500-30: oklch(58.5% 0.233 277.117 / 0.3);
    --color-indigo-500-20: oklch(58.5% 0.233 277.117 / 0.2);
    --color-indigo-500-10: oklch(58.5% 0.233 277.117 / 0.1);
    --color-indigo-500-5: oklch(58.5% 0.233 277.117 / 0.05);
    --color-indigo-600-100: oklch(51.1% 0.262 276.966 / 1);
    --color-indigo-600-90: oklch(51.1% 0.262 276.966 / 0.9);
    --color-indigo-600-80: oklch(51.1% 0.262 276.966 / 0.8);
    --color-indigo-600-70: oklch(51.1% 0.262 276.966 / 0.7);
    --color-indigo-600-60: oklch(51.1% 0.262 276.966 / 0.6);
    --color-indigo-600-50: oklch(51.1% 0.262 276.966 / 0.5);
    --color-indigo-600-40: oklch(51.1% 0.262 276.966 / 0.4);
    --color-indigo-600-30: oklch(51.1% 0.262 276.966 / 0.3);
    --color-indigo-600-20: oklch(51.1% 0.262 276.966 / 0.2);
    --color-indigo-600-10: oklch(51.1% 0.262 276.966 / 0.1);
    --color-indigo-600-5: oklch(51.1% 0.262 276.966 / 0.05);
    --color-indigo-700-100: oklch(45.7% 0.24 277.023 / 1);
    --color-indigo-700-90: oklch(45.7% 0.24 277.023 / 0.9);
    --color-indigo-700-80: oklch(45.7% 0.24 277.023 / 0.8);
    --color-indigo-700-70: oklch(45.7% 0.24 277.023 / 0.7);
    --color-indigo-700-60: oklch(45.7% 0.24 277.023 / 0.6);
    --color-indigo-700-50: oklch(45.7% 0.24 277.023 / 0.5);
    --color-indigo-700-40: oklch(45.7% 0.24 277.023 / 0.4);
    --color-indigo-700-30: oklch(45.7% 0.24 277.023 / 0.3);
    --color-indigo-700-20: oklch(45.7% 0.24 277.023 / 0.2);
    --color-indigo-700-10: oklch(45.7% 0.24 277.023 / 0.1);
    --color-indigo-700-5: oklch(45.7% 0.24 277.023 / 0.05);
    --color-indigo-800-100: oklch(39.8% 0.195 277.366 / 1);
    --color-indigo-800-90: oklch(39.8% 0.195 277.366 / 0.9);
    --color-indigo-800-80: oklch(39.8% 0.195 277.366 / 0.8);
    --color-indigo-800-70: oklch(39.8% 0.195 277.366 / 0.7);
    --color-indigo-800-60: oklch(39.8% 0.195 277.366 / 0.6);
    --color-indigo-800-50: oklch(39.8% 0.195 277.366 / 0.5);
    --color-indigo-800-40: oklch(39.8% 0.195 277.366 / 0.4);
    --color-indigo-800-30: oklch(39.8% 0.195 277.366 / 0.3);
    --color-indigo-800-20: oklch(39.8% 0.195 277.366 / 0.2);
    --color-indigo-800-10: oklch(39.8% 0.195 277.366 / 0.1);
    --color-indigo-800-5: oklch(39.8% 0.195 277.366 / 0.05);
    --color-indigo-900-100: oklch(35.9% 0.144 278.697 / 1);
    --color-indigo-900-90: oklch(35.9% 0.144 278.697 / 0.9);
    --color-indigo-900-80: oklch(35.9% 0.144 278.697 / 0.8);
    --color-indigo-900-70: oklch(35.9% 0.144 278.697 / 0.7);
    --color-indigo-900-60: oklch(35.9% 0.144 278.697 / 0.6);
    --color-indigo-900-50: oklch(35.9% 0.144 278.697 / 0.5);
    --color-indigo-900-40: oklch(35.9% 0.144 278.697 / 0.4);
    --color-indigo-900-30: oklch(35.9% 0.144 278.697 / 0.3);
    --color-indigo-900-20: oklch(35.9% 0.144 278.697 / 0.2);
    --color-indigo-900-10: oklch(35.9% 0.144 278.697 / 0.1);
    --color-indigo-900-5: oklch(35.9% 0.144 278.697 / 0.05);
    --color-indigo-950-100: oklch(25.7% 0.09 281.288 / 1);
    --color-indigo-950-90: oklch(25.7% 0.09 281.288 / 0.9);
    --color-indigo-950-80: oklch(25.7% 0.09 281.288 / 0.8);
    --color-indigo-950-70: oklch(25.7% 0.09 281.288 / 0.7);
    --color-indigo-950-60: oklch(25.7% 0.09 281.288 / 0.6);
    --color-indigo-950-50: oklch(25.7% 0.09 281.288 / 0.5);
    --color-indigo-950-40: oklch(25.7% 0.09 281.288 / 0.4);
    --color-indigo-950-30: oklch(25.7% 0.09 281.288 / 0.3);
    --color-indigo-950-20: oklch(25.7% 0.09 281.288 / 0.2);
    --color-indigo-950-10: oklch(25.7% 0.09 281.288 / 0.1);
    --color-indigo-950-5: oklch(25.7% 0.09 281.288 / 0.05);
    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-200: oklch(89.4% 0.057 293.283);
    --color-violet-300: oklch(81.1% 0.111 293.571);
    --color-violet-400: oklch(70.2% 0.183 293.541);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-violet-800: oklch(43.2% 0.232 292.759);
    --color-violet-900: oklch(38% 0.189 293.745);
    --color-violet-950: oklch(28.3% 0.141 291.089);
    --color-violet-50-100: oklch(96.9% 0.016 293.756 / 1);
    --color-violet-50-90: oklch(96.9% 0.016 293.756 / 0.9);
    --color-violet-50-80: oklch(96.9% 0.016 293.756 / 0.8);
    --color-violet-50-70: oklch(96.9% 0.016 293.756 / 0.7);
    --color-violet-50-60: oklch(96.9% 0.016 293.756 / 0.6);
    --color-violet-50-50: oklch(96.9% 0.016 293.756 / 0.5);
    --color-violet-50-40: oklch(96.9% 0.016 293.756 / 0.4);
    --color-violet-50-30: oklch(96.9% 0.016 293.756 / 0.3);
    --color-violet-50-20: oklch(96.9% 0.016 293.756 / 0.2);
    --color-violet-50-10: oklch(96.9% 0.016 293.756 / 0.1);
    --color-violet-50-5: oklch(96.9% 0.016 293.756 / 0.05);
    --color-violet-100-100: oklch(94.3% 0.029 294.588 / 1);
    --color-violet-100-90: oklch(94.3% 0.029 294.588 / 0.9);
    --color-violet-100-80: oklch(94.3% 0.029 294.588 / 0.8);
    --color-violet-100-70: oklch(94.3% 0.029 294.588 / 0.7);
    --color-violet-100-60: oklch(94.3% 0.029 294.588 / 0.6);
    --color-violet-100-50: oklch(94.3% 0.029 294.588 / 0.5);
    --color-violet-100-40: oklch(94.3% 0.029 294.588 / 0.4);
    --color-violet-100-30: oklch(94.3% 0.029 294.588 / 0.3);
    --color-violet-100-20: oklch(94.3% 0.029 294.588 / 0.2);
    --color-violet-100-10: oklch(94.3% 0.029 294.588 / 0.1);
    --color-violet-100-5: oklch(94.3% 0.029 294.588 / 0.05);
    --color-violet-200-100: oklch(89.4% 0.057 293.283 / 1);
    --color-violet-200-90: oklch(89.4% 0.057 293.283 / 0.9);
    --color-violet-200-80: oklch(89.4% 0.057 293.283 / 0.8);
    --color-violet-200-70: oklch(89.4% 0.057 293.283 / 0.7);
    --color-violet-200-60: oklch(89.4% 0.057 293.283 / 0.6);
    --color-violet-200-50: oklch(89.4% 0.057 293.283 / 0.5);
    --color-violet-200-40: oklch(89.4% 0.057 293.283 / 0.4);
    --color-violet-200-30: oklch(89.4% 0.057 293.283 / 0.3);
    --color-violet-200-20: oklch(89.4% 0.057 293.283 / 0.2);
    --color-violet-200-10: oklch(89.4% 0.057 293.283 / 0.1);
    --color-violet-200-5: oklch(89.4% 0.057 293.283 / 0.05);
    --color-violet-300-100: oklch(81.1% 0.111 293.571 / 1);
    --color-violet-300-90: oklch(81.1% 0.111 293.571 / 0.9);
    --color-violet-300-80: oklch(81.1% 0.111 293.571 / 0.8);
    --color-violet-300-70: oklch(81.1% 0.111 293.571 / 0.7);
    --color-violet-300-60: oklch(81.1% 0.111 293.571 / 0.6);
    --color-violet-300-50: oklch(81.1% 0.111 293.571 / 0.5);
    --color-violet-300-40: oklch(81.1% 0.111 293.571 / 0.4);
    --color-violet-300-30: oklch(81.1% 0.111 293.571 / 0.3);
    --color-violet-300-20: oklch(81.1% 0.111 293.571 / 0.2);
    --color-violet-300-10: oklch(81.1% 0.111 293.571 / 0.1);
    --color-violet-300-5: oklch(81.1% 0.111 293.571 / 0.05);
    --color-violet-400-100: oklch(70.2% 0.183 293.541 / 1);
    --color-violet-400-90: oklch(70.2% 0.183 293.541 / 0.9);
    --color-violet-400-80: oklch(70.2% 0.183 293.541 / 0.8);
    --color-violet-400-70: oklch(70.2% 0.183 293.541 / 0.7);
    --color-violet-400-60: oklch(70.2% 0.183 293.541 / 0.6);
    --color-violet-400-50: oklch(70.2% 0.183 293.541 / 0.5);
    --color-violet-400-40: oklch(70.2% 0.183 293.541 / 0.4);
    --color-violet-400-30: oklch(70.2% 0.183 293.541 / 0.3);
    --color-violet-400-20: oklch(70.2% 0.183 293.541 / 0.2);
    --color-violet-400-10: oklch(70.2% 0.183 293.541 / 0.1);
    --color-violet-400-5: oklch(70.2% 0.183 293.541 / 0.05);
    --color-violet-500-100: oklch(60.6% 0.25 292.717 / 1);
    --color-violet-500-90: oklch(60.6% 0.25 292.717 / 0.9);
    --color-violet-500-80: oklch(60.6% 0.25 292.717 / 0.8);
    --color-violet-500-70: oklch(60.6% 0.25 292.717 / 0.7);
    --color-violet-500-60: oklch(60.6% 0.25 292.717 / 0.6);
    --color-violet-500-50: oklch(60.6% 0.25 292.717 / 0.5);
    --color-violet-500-40: oklch(60.6% 0.25 292.717 / 0.4);
    --color-violet-500-30: oklch(60.6% 0.25 292.717 / 0.3);
    --color-violet-500-20: oklch(60.6% 0.25 292.717 / 0.2);
    --color-violet-500-10: oklch(60.6% 0.25 292.717 / 0.1);
    --color-violet-500-5: oklch(60.6% 0.25 292.717 / 0.05);
    --color-violet-600-100: oklch(54.1% 0.281 293.009 / 1);
    --color-violet-600-90: oklch(54.1% 0.281 293.009 / 0.9);
    --color-violet-600-80: oklch(54.1% 0.281 293.009 / 0.8);
    --color-violet-600-70: oklch(54.1% 0.281 293.009 / 0.7);
    --color-violet-600-60: oklch(54.1% 0.281 293.009 / 0.6);
    --color-violet-600-50: oklch(54.1% 0.281 293.009 / 0.5);
    --color-violet-600-40: oklch(54.1% 0.281 293.009 / 0.4);
    --color-violet-600-30: oklch(54.1% 0.281 293.009 / 0.3);
    --color-violet-600-20: oklch(54.1% 0.281 293.009 / 0.2);
    --color-violet-600-10: oklch(54.1% 0.281 293.009 / 0.1);
    --color-violet-600-5: oklch(54.1% 0.281 293.009 / 0.05);
    --color-violet-700-100: oklch(49.1% 0.27 292.581 / 1);
    --color-violet-700-90: oklch(49.1% 0.27 292.581 / 0.9);
    --color-violet-700-80: oklch(49.1% 0.27 292.581 / 0.8);
    --color-violet-700-70: oklch(49.1% 0.27 292.581 / 0.7);
    --color-violet-700-60: oklch(49.1% 0.27 292.581 / 0.6);
    --color-violet-700-50: oklch(49.1% 0.27 292.581 / 0.5);
    --color-violet-700-40: oklch(49.1% 0.27 292.581 / 0.4);
    --color-violet-700-30: oklch(49.1% 0.27 292.581 / 0.3);
    --color-violet-700-20: oklch(49.1% 0.27 292.581 / 0.2);
    --color-violet-700-10: oklch(49.1% 0.27 292.581 / 0.1);
    --color-violet-700-5: oklch(49.1% 0.27 292.581 / 0.05);
    --color-violet-800-100: oklch(43.2% 0.232 292.759 / 1);
    --color-violet-800-90: oklch(43.2% 0.232 292.759 / 0.9);
    --color-violet-800-80: oklch(43.2% 0.232 292.759 / 0.8);
    --color-violet-800-70: oklch(43.2% 0.232 292.759 / 0.7);
    --color-violet-800-60: oklch(43.2% 0.232 292.759 / 0.6);
    --color-violet-800-50: oklch(43.2% 0.232 292.759 / 0.5);
    --color-violet-800-40: oklch(43.2% 0.232 292.759 / 0.4);
    --color-violet-800-30: oklch(43.2% 0.232 292.759 / 0.3);
    --color-violet-800-20: oklch(43.2% 0.232 292.759 / 0.2);
    --color-violet-800-10: oklch(43.2% 0.232 292.759 / 0.1);
    --color-violet-800-5: oklch(43.2% 0.232 292.759 / 0.05);
    --color-violet-900-100: oklch(38% 0.189 293.745 / 1);
    --color-violet-900-90: oklch(38% 0.189 293.745 / 0.9);
    --color-violet-900-80: oklch(38% 0.189 293.745 / 0.8);
    --color-violet-900-70: oklch(38% 0.189 293.745 / 0.7);
    --color-violet-900-60: oklch(38% 0.189 293.745 / 0.6);
    --color-violet-900-50: oklch(38% 0.189 293.745 / 0.5);
    --color-violet-900-40: oklch(38% 0.189 293.745 / 0.4);
    --color-violet-900-30: oklch(38% 0.189 293.745 / 0.3);
    --color-violet-900-20: oklch(38% 0.189 293.745 / 0.2);
    --color-violet-900-10: oklch(38% 0.189 293.745 / 0.1);
    --color-violet-900-5: oklch(38% 0.189 293.745 / 0.05);
    --color-violet-950-100: oklch(28.3% 0.141 291.089 / 1);
    --color-violet-950-90: oklch(28.3% 0.141 291.089 / 0.9);
    --color-violet-950-80: oklch(28.3% 0.141 291.089 / 0.8);
    --color-violet-950-70: oklch(28.3% 0.141 291.089 / 0.7);
    --color-violet-950-60: oklch(28.3% 0.141 291.089 / 0.6);
    --color-violet-950-50: oklch(28.3% 0.141 291.089 / 0.5);
    --color-violet-950-40: oklch(28.3% 0.141 291.089 / 0.4);
    --color-violet-950-30: oklch(28.3% 0.141 291.089 / 0.3);
    --color-violet-950-20: oklch(28.3% 0.141 291.089 / 0.2);
    --color-violet-950-10: oklch(28.3% 0.141 291.089 / 0.1);
    --color-violet-950-5: oklch(28.3% 0.141 291.089 / 0.05);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-purple-950: oklch(29.1% 0.149 302.717);
    --color-purple-50-100: oklch(97.7% 0.014 308.299 / 1);
    --color-purple-50-90: oklch(97.7% 0.014 308.299 / 0.9);
    --color-purple-50-80: oklch(97.7% 0.014 308.299 / 0.8);
    --color-purple-50-70: oklch(97.7% 0.014 308.299 / 0.7);
    --color-purple-50-60: oklch(97.7% 0.014 308.299 / 0.6);
    --color-purple-50-50: oklch(97.7% 0.014 308.299 / 0.5);
    --color-purple-50-40: oklch(97.7% 0.014 308.299 / 0.4);
    --color-purple-50-30: oklch(97.7% 0.014 308.299 / 0.3);
    --color-purple-50-20: oklch(97.7% 0.014 308.299 / 0.2);
    --color-purple-50-10: oklch(97.7% 0.014 308.299 / 0.1);
    --color-purple-50-5: oklch(97.7% 0.014 308.299 / 0.05);
    --color-purple-100-100: oklch(94.6% 0.033 307.174 / 1);
    --color-purple-100-90: oklch(94.6% 0.033 307.174 / 0.9);
    --color-purple-100-80: oklch(94.6% 0.033 307.174 / 0.8);
    --color-purple-100-70: oklch(94.6% 0.033 307.174 / 0.7);
    --color-purple-100-60: oklch(94.6% 0.033 307.174 / 0.6);
    --color-purple-100-50: oklch(94.6% 0.033 307.174 / 0.5);
    --color-purple-100-40: oklch(94.6% 0.033 307.174 / 0.4);
    --color-purple-100-30: oklch(94.6% 0.033 307.174 / 0.3);
    --color-purple-100-20: oklch(94.6% 0.033 307.174 / 0.2);
    --color-purple-100-10: oklch(94.6% 0.033 307.174 / 0.1);
    --color-purple-100-5: oklch(94.6% 0.033 307.174 / 0.05);
    --color-purple-200-100: oklch(90.2% 0.063 306.703 / 1);
    --color-purple-200-90: oklch(90.2% 0.063 306.703 / 0.9);
    --color-purple-200-80: oklch(90.2% 0.063 306.703 / 0.8);
    --color-purple-200-70: oklch(90.2% 0.063 306.703 / 0.7);
    --color-purple-200-60: oklch(90.2% 0.063 306.703 / 0.6);
    --color-purple-200-50: oklch(90.2% 0.063 306.703 / 0.5);
    --color-purple-200-40: oklch(90.2% 0.063 306.703 / 0.4);
    --color-purple-200-30: oklch(90.2% 0.063 306.703 / 0.3);
    --color-purple-200-20: oklch(90.2% 0.063 306.703 / 0.2);
    --color-purple-200-10: oklch(90.2% 0.063 306.703 / 0.1);
    --color-purple-200-5: oklch(90.2% 0.063 306.703 / 0.05);
    --color-purple-300-100: oklch(82.7% 0.119 306.383 / 1);
    --color-purple-300-90: oklch(82.7% 0.119 306.383 / 0.9);
    --color-purple-300-80: oklch(82.7% 0.119 306.383 / 0.8);
    --color-purple-300-70: oklch(82.7% 0.119 306.383 / 0.7);
    --color-purple-300-60: oklch(82.7% 0.119 306.383 / 0.6);
    --color-purple-300-50: oklch(82.7% 0.119 306.383 / 0.5);
    --color-purple-300-40: oklch(82.7% 0.119 306.383 / 0.4);
    --color-purple-300-30: oklch(82.7% 0.119 306.383 / 0.3);
    --color-purple-300-20: oklch(82.7% 0.119 306.383 / 0.2);
    --color-purple-300-10: oklch(82.7% 0.119 306.383 / 0.1);
    --color-purple-300-5: oklch(82.7% 0.119 306.383 / 0.05);
    --color-purple-400-100: oklch(71.4% 0.203 305.504 / 1);
    --color-purple-400-90: oklch(71.4% 0.203 305.504 / 0.9);
    --color-purple-400-80: oklch(71.4% 0.203 305.504 / 0.8);
    --color-purple-400-70: oklch(71.4% 0.203 305.504 / 0.7);
    --color-purple-400-60: oklch(71.4% 0.203 305.504 / 0.6);
    --color-purple-400-50: oklch(71.4% 0.203 305.504 / 0.5);
    --color-purple-400-40: oklch(71.4% 0.203 305.504 / 0.4);
    --color-purple-400-30: oklch(71.4% 0.203 305.504 / 0.3);
    --color-purple-400-20: oklch(71.4% 0.203 305.504 / 0.2);
    --color-purple-400-10: oklch(71.4% 0.203 305.504 / 0.1);
    --color-purple-400-5: oklch(71.4% 0.203 305.504 / 0.05);
    --color-purple-500-100: oklch(62.7% 0.265 303.9 / 1);
    --color-purple-500-90: oklch(62.7% 0.265 303.9 / 0.9);
    --color-purple-500-80: oklch(62.7% 0.265 303.9 / 0.8);
    --color-purple-500-70: oklch(62.7% 0.265 303.9 / 0.7);
    --color-purple-500-60: oklch(62.7% 0.265 303.9 / 0.6);
    --color-purple-500-50: oklch(62.7% 0.265 303.9 / 0.5);
    --color-purple-500-40: oklch(62.7% 0.265 303.9 / 0.4);
    --color-purple-500-30: oklch(62.7% 0.265 303.9 / 0.3);
    --color-purple-500-20: oklch(62.7% 0.265 303.9 / 0.2);
    --color-purple-500-10: oklch(62.7% 0.265 303.9 / 0.1);
    --color-purple-500-5: oklch(62.7% 0.265 303.9 / 0.05);
    --color-purple-600-100: oklch(55.8% 0.288 302.321 / 1);
    --color-purple-600-90: oklch(55.8% 0.288 302.321 / 0.9);
    --color-purple-600-80: oklch(55.8% 0.288 302.321 / 0.8);
    --color-purple-600-70: oklch(55.8% 0.288 302.321 / 0.7);
    --color-purple-600-60: oklch(55.8% 0.288 302.321 / 0.6);
    --color-purple-600-50: oklch(55.8% 0.288 302.321 / 0.5);
    --color-purple-600-40: oklch(55.8% 0.288 302.321 / 0.4);
    --color-purple-600-30: oklch(55.8% 0.288 302.321 / 0.3);
    --color-purple-600-20: oklch(55.8% 0.288 302.321 / 0.2);
    --color-purple-600-10: oklch(55.8% 0.288 302.321 / 0.1);
    --color-purple-600-5: oklch(55.8% 0.288 302.321 / 0.05);
    --color-purple-700-100: oklch(49.6% 0.265 301.924 / 1);
    --color-purple-700-90: oklch(49.6% 0.265 301.924 / 0.9);
    --color-purple-700-80: oklch(49.6% 0.265 301.924 / 0.8);
    --color-purple-700-70: oklch(49.6% 0.265 301.924 / 0.7);
    --color-purple-700-60: oklch(49.6% 0.265 301.924 / 0.6);
    --color-purple-700-50: oklch(49.6% 0.265 301.924 / 0.5);
    --color-purple-700-40: oklch(49.6% 0.265 301.924 / 0.4);
    --color-purple-700-30: oklch(49.6% 0.265 301.924 / 0.3);
    --color-purple-700-20: oklch(49.6% 0.265 301.924 / 0.2);
    --color-purple-700-10: oklch(49.6% 0.265 301.924 / 0.1);
    --color-purple-700-5: oklch(49.6% 0.265 301.924 / 0.05);
    --color-purple-800-100: oklch(43.8% 0.218 303.724 / 1);
    --color-purple-800-90: oklch(43.8% 0.218 303.724 / 0.9);
    --color-purple-800-80: oklch(43.8% 0.218 303.724 / 0.8);
    --color-purple-800-70: oklch(43.8% 0.218 303.724 / 0.7);
    --color-purple-800-60: oklch(43.8% 0.218 303.724 / 0.6);
    --color-purple-800-50: oklch(43.8% 0.218 303.724 / 0.5);
    --color-purple-800-40: oklch(43.8% 0.218 303.724 / 0.4);
    --color-purple-800-30: oklch(43.8% 0.218 303.724 / 0.3);
    --color-purple-800-20: oklch(43.8% 0.218 303.724 / 0.2);
    --color-purple-800-10: oklch(43.8% 0.218 303.724 / 0.1);
    --color-purple-800-5: oklch(43.8% 0.218 303.724 / 0.05);
    --color-purple-900-100: oklch(38.1% 0.176 304.987 / 1);
    --color-purple-900-90: oklch(38.1% 0.176 304.987 / 0.9);
    --color-purple-900-80: oklch(38.1% 0.176 304.987 / 0.8);
    --color-purple-900-70: oklch(38.1% 0.176 304.987 / 0.7);
    --color-purple-900-60: oklch(38.1% 0.176 304.987 / 0.6);
    --color-purple-900-50: oklch(38.1% 0.176 304.987 / 0.5);
    --color-purple-900-40: oklch(38.1% 0.176 304.987 / 0.4);
    --color-purple-900-30: oklch(38.1% 0.176 304.987 / 0.3);
    --color-purple-900-20: oklch(38.1% 0.176 304.987 / 0.2);
    --color-purple-900-10: oklch(38.1% 0.176 304.987 / 0.1);
    --color-purple-900-5: oklch(38.1% 0.176 304.987 / 0.05);
    --color-purple-950-100: oklch(29.1% 0.149 302.717 / 1);
    --color-purple-950-90: oklch(29.1% 0.149 302.717 / 0.9);
    --color-purple-950-80: oklch(29.1% 0.149 302.717 / 0.8);
    --color-purple-950-70: oklch(29.1% 0.149 302.717 / 0.7);
    --color-purple-950-60: oklch(29.1% 0.149 302.717 / 0.6);
    --color-purple-950-50: oklch(29.1% 0.149 302.717 / 0.5);
    --color-purple-950-40: oklch(29.1% 0.149 302.717 / 0.4);
    --color-purple-950-30: oklch(29.1% 0.149 302.717 / 0.3);
    --color-purple-950-20: oklch(29.1% 0.149 302.717 / 0.2);
    --color-purple-950-10: oklch(29.1% 0.149 302.717 / 0.1);
    --color-purple-950-5: oklch(29.1% 0.149 302.717 / 0.05);
    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
    --color-fuchsia-100: oklch(95.2% 0.037 318.852);
    --color-fuchsia-200: oklch(90.3% 0.076 319.62);
    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
    --color-fuchsia-400: oklch(74% 0.238 322.16);
    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
    --color-fuchsia-700: oklch(51.8% 0.253 323.949);
    --color-fuchsia-800: oklch(45.2% 0.211 324.591);
    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
    --color-fuchsia-950: oklch(29.3% 0.136 325.661);
    --color-fuchsia-50-100: oklch(97.7% 0.017 320.058 / 1);
    --color-fuchsia-50-90: oklch(97.7% 0.017 320.058 / 0.9);
    --color-fuchsia-50-80: oklch(97.7% 0.017 320.058 / 0.8);
    --color-fuchsia-50-70: oklch(97.7% 0.017 320.058 / 0.7);
    --color-fuchsia-50-60: oklch(97.7% 0.017 320.058 / 0.6);
    --color-fuchsia-50-50: oklch(97.7% 0.017 320.058 / 0.5);
    --color-fuchsia-50-40: oklch(97.7% 0.017 320.058 / 0.4);
    --color-fuchsia-50-30: oklch(97.7% 0.017 320.058 / 0.3);
    --color-fuchsia-50-20: oklch(97.7% 0.017 320.058 / 0.2);
    --color-fuchsia-50-10: oklch(97.7% 0.017 320.058 / 0.1);
    --color-fuchsia-50-5: oklch(97.7% 0.017 320.058 / 0.05);
    --color-fuchsia-100-100: oklch(95.2% 0.037 318.852 / 1);
    --color-fuchsia-100-90: oklch(95.2% 0.037 318.852 / 0.9);
    --color-fuchsia-100-80: oklch(95.2% 0.037 318.852 / 0.8);
    --color-fuchsia-100-70: oklch(95.2% 0.037 318.852 / 0.7);
    --color-fuchsia-100-60: oklch(95.2% 0.037 318.852 / 0.6);
    --color-fuchsia-100-50: oklch(95.2% 0.037 318.852 / 0.5);
    --color-fuchsia-100-40: oklch(95.2% 0.037 318.852 / 0.4);
    --color-fuchsia-100-30: oklch(95.2% 0.037 318.852 / 0.3);
    --color-fuchsia-100-20: oklch(95.2% 0.037 318.852 / 0.2);
    --color-fuchsia-100-10: oklch(95.2% 0.037 318.852 / 0.1);
    --color-fuchsia-100-5: oklch(95.2% 0.037 318.852 / 0.05);
    --color-fuchsia-200-100: oklch(90.3% 0.076 319.62 / 1);
    --color-fuchsia-200-90: oklch(90.3% 0.076 319.62 / 0.9);
    --color-fuchsia-200-80: oklch(90.3% 0.076 319.62 / 0.8);
    --color-fuchsia-200-70: oklch(90.3% 0.076 319.62 / 0.7);
    --color-fuchsia-200-60: oklch(90.3% 0.076 319.62 / 0.6);
    --color-fuchsia-200-50: oklch(90.3% 0.076 319.62 / 0.5);
    --color-fuchsia-200-40: oklch(90.3% 0.076 319.62 / 0.4);
    --color-fuchsia-200-30: oklch(90.3% 0.076 319.62 / 0.3);
    --color-fuchsia-200-20: oklch(90.3% 0.076 319.62 / 0.2);
    --color-fuchsia-200-10: oklch(90.3% 0.076 319.62 / 0.1);
    --color-fuchsia-200-5: oklch(90.3% 0.076 319.62 / 0.05);
    --color-fuchsia-300-100: oklch(83.3% 0.145 321.434 / 1);
    --color-fuchsia-300-90: oklch(83.3% 0.145 321.434 / 0.9);
    --color-fuchsia-300-80: oklch(83.3% 0.145 321.434 / 0.8);
    --color-fuchsia-300-70: oklch(83.3% 0.145 321.434 / 0.7);
    --color-fuchsia-300-60: oklch(83.3% 0.145 321.434 / 0.6);
    --color-fuchsia-300-50: oklch(83.3% 0.145 321.434 / 0.5);
    --color-fuchsia-300-40: oklch(83.3% 0.145 321.434 / 0.4);
    --color-fuchsia-300-30: oklch(83.3% 0.145 321.434 / 0.3);
    --color-fuchsia-300-20: oklch(83.3% 0.145 321.434 / 0.2);
    --color-fuchsia-300-10: oklch(83.3% 0.145 321.434 / 0.1);
    --color-fuchsia-300-5: oklch(83.3% 0.145 321.434 / 0.05);
    --color-fuchsia-400-100: oklch(74% 0.238 322.16 / 1);
    --color-fuchsia-400-90: oklch(74% 0.238 322.16 / 0.9);
    --color-fuchsia-400-80: oklch(74% 0.238 322.16 / 0.8);
    --color-fuchsia-400-70: oklch(74% 0.238 322.16 / 0.7);
    --color-fuchsia-400-60: oklch(74% 0.238 322.16 / 0.6);
    --color-fuchsia-400-50: oklch(74% 0.238 322.16 / 0.5);
    --color-fuchsia-400-40: oklch(74% 0.238 322.16 / 0.4);
    --color-fuchsia-400-30: oklch(74% 0.238 322.16 / 0.3);
    --color-fuchsia-400-20: oklch(74% 0.238 322.16 / 0.2);
    --color-fuchsia-400-10: oklch(74% 0.238 322.16 / 0.1);
    --color-fuchsia-400-5: oklch(74% 0.238 322.16 / 0.05);
    --color-fuchsia-500-100: oklch(66.7% 0.295 322.15 / 1);
    --color-fuchsia-500-90: oklch(66.7% 0.295 322.15 / 0.9);
    --color-fuchsia-500-80: oklch(66.7% 0.295 322.15 / 0.8);
    --color-fuchsia-500-70: oklch(66.7% 0.295 322.15 / 0.7);
    --color-fuchsia-500-60: oklch(66.7% 0.295 322.15 / 0.6);
    --color-fuchsia-500-50: oklch(66.7% 0.295 322.15 / 0.5);
    --color-fuchsia-500-40: oklch(66.7% 0.295 322.15 / 0.4);
    --color-fuchsia-500-30: oklch(66.7% 0.295 322.15 / 0.3);
    --color-fuchsia-500-20: oklch(66.7% 0.295 322.15 / 0.2);
    --color-fuchsia-500-10: oklch(66.7% 0.295 322.15 / 0.1);
    --color-fuchsia-500-5: oklch(66.7% 0.295 322.15 / 0.05);
    --color-fuchsia-600-100: oklch(59.1% 0.293 322.896 / 1);
    --color-fuchsia-600-90: oklch(59.1% 0.293 322.896 / 0.9);
    --color-fuchsia-600-80: oklch(59.1% 0.293 322.896 / 0.8);
    --color-fuchsia-600-70: oklch(59.1% 0.293 322.896 / 0.7);
    --color-fuchsia-600-60: oklch(59.1% 0.293 322.896 / 0.6);
    --color-fuchsia-600-50: oklch(59.1% 0.293 322.896 / 0.5);
    --color-fuchsia-600-40: oklch(59.1% 0.293 322.896 / 0.4);
    --color-fuchsia-600-30: oklch(59.1% 0.293 322.896 / 0.3);
    --color-fuchsia-600-20: oklch(59.1% 0.293 322.896 / 0.2);
    --color-fuchsia-600-10: oklch(59.1% 0.293 322.896 / 0.1);
    --color-fuchsia-600-5: oklch(59.1% 0.293 322.896 / 0.05);
    --color-fuchsia-700-100: oklch(51.8% 0.253 323.949 / 1);
    --color-fuchsia-700-90: oklch(51.8% 0.253 323.949 / 0.9);
    --color-fuchsia-700-80: oklch(51.8% 0.253 323.949 / 0.8);
    --color-fuchsia-700-70: oklch(51.8% 0.253 323.949 / 0.7);
    --color-fuchsia-700-60: oklch(51.8% 0.253 323.949 / 0.6);
    --color-fuchsia-700-50: oklch(51.8% 0.253 323.949 / 0.5);
    --color-fuchsia-700-40: oklch(51.8% 0.253 323.949 / 0.4);
    --color-fuchsia-700-30: oklch(51.8% 0.253 323.949 / 0.3);
    --color-fuchsia-700-20: oklch(51.8% 0.253 323.949 / 0.2);
    --color-fuchsia-700-10: oklch(51.8% 0.253 323.949 / 0.1);
    --color-fuchsia-700-5: oklch(51.8% 0.253 323.949 / 0.05);
    --color-fuchsia-800-100: oklch(45.2% 0.211 324.591 / 1);
    --color-fuchsia-800-90: oklch(45.2% 0.211 324.591 / 0.9);
    --color-fuchsia-800-80: oklch(45.2% 0.211 324.591 / 0.8);
    --color-fuchsia-800-70: oklch(45.2% 0.211 324.591 / 0.7);
    --color-fuchsia-800-60: oklch(45.2% 0.211 324.591 / 0.6);
    --color-fuchsia-800-50: oklch(45.2% 0.211 324.591 / 0.5);
    --color-fuchsia-800-40: oklch(45.2% 0.211 324.591 / 0.4);
    --color-fuchsia-800-30: oklch(45.2% 0.211 324.591 / 0.3);
    --color-fuchsia-800-20: oklch(45.2% 0.211 324.591 / 0.2);
    --color-fuchsia-800-10: oklch(45.2% 0.211 324.591 / 0.1);
    --color-fuchsia-800-5: oklch(45.2% 0.211 324.591 / 0.05);
    --color-fuchsia-900-100: oklch(40.1% 0.17 325.612 / 1);
    --color-fuchsia-900-90: oklch(40.1% 0.17 325.612 / 0.9);
    --color-fuchsia-900-80: oklch(40.1% 0.17 325.612 / 0.8);
    --color-fuchsia-900-70: oklch(40.1% 0.17 325.612 / 0.7);
    --color-fuchsia-900-60: oklch(40.1% 0.17 325.612 / 0.6);
    --color-fuchsia-900-50: oklch(40.1% 0.17 325.612 / 0.5);
    --color-fuchsia-900-40: oklch(40.1% 0.17 325.612 / 0.4);
    --color-fuchsia-900-30: oklch(40.1% 0.17 325.612 / 0.3);
    --color-fuchsia-900-20: oklch(40.1% 0.17 325.612 / 0.2);
    --color-fuchsia-900-10: oklch(40.1% 0.17 325.612 / 0.1);
    --color-fuchsia-900-5: oklch(40.1% 0.17 325.612 / 0.05);
    --color-fuchsia-950-100: oklch(29.3% 0.136 325.661 / 1);
    --color-fuchsia-950-90: oklch(29.3% 0.136 325.661 / 0.9);
    --color-fuchsia-950-80: oklch(29.3% 0.136 325.661 / 0.8);
    --color-fuchsia-950-70: oklch(29.3% 0.136 325.661 / 0.7);
    --color-fuchsia-950-60: oklch(29.3% 0.136 325.661 / 0.6);
    --color-fuchsia-950-50: oklch(29.3% 0.136 325.661 / 0.5);
    --color-fuchsia-950-40: oklch(29.3% 0.136 325.661 / 0.4);
    --color-fuchsia-950-30: oklch(29.3% 0.136 325.661 / 0.3);
    --color-fuchsia-950-20: oklch(29.3% 0.136 325.661 / 0.2);
    --color-fuchsia-950-10: oklch(29.3% 0.136 325.661 / 0.1);
    --color-fuchsia-950-5: oklch(29.3% 0.136 325.661 / 0.05);
    --color-pink-50: oklch(97.1% 0.014 343.198);
    --color-pink-100: oklch(94.8% 0.028 342.258);
    --color-pink-200: oklch(89.9% 0.061 343.231);
    --color-pink-300: oklch(82.3% 0.12 346.018);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-pink-600: oklch(59.2% 0.249 0.584);
    --color-pink-700: oklch(52.5% 0.223 3.958);
    --color-pink-800: oklch(45.9% 0.187 3.815);
    --color-pink-900: oklch(40.8% 0.153 2.432);
    --color-pink-950: oklch(28.4% 0.109 3.907);
    --color-pink-50-100: oklch(97.1% 0.014 343.198 / 1);
    --color-pink-50-90: oklch(97.1% 0.014 343.198 / 0.9);
    --color-pink-50-80: oklch(97.1% 0.014 343.198 / 0.8);
    --color-pink-50-70: oklch(97.1% 0.014 343.198 / 0.7);
    --color-pink-50-60: oklch(97.1% 0.014 343.198 / 0.6);
    --color-pink-50-50: oklch(97.1% 0.014 343.198 / 0.5);
    --color-pink-50-40: oklch(97.1% 0.014 343.198 / 0.4);
    --color-pink-50-30: oklch(97.1% 0.014 343.198 / 0.3);
    --color-pink-50-20: oklch(97.1% 0.014 343.198 / 0.2);
    --color-pink-50-10: oklch(97.1% 0.014 343.198 / 0.1);
    --color-pink-50-5: oklch(97.1% 0.014 343.198 / 0.05);
    --color-pink-100-100: oklch(94.8% 0.028 342.258 / 1);
    --color-pink-100-90: oklch(94.8% 0.028 342.258 / 0.9);
    --color-pink-100-80: oklch(94.8% 0.028 342.258 / 0.8);
    --color-pink-100-70: oklch(94.8% 0.028 342.258 / 0.7);
    --color-pink-100-60: oklch(94.8% 0.028 342.258 / 0.6);
    --color-pink-100-50: oklch(94.8% 0.028 342.258 / 0.5);
    --color-pink-100-40: oklch(94.8% 0.028 342.258 / 0.4);
    --color-pink-100-30: oklch(94.8% 0.028 342.258 / 0.3);
    --color-pink-100-20: oklch(94.8% 0.028 342.258 / 0.2);
    --color-pink-100-10: oklch(94.8% 0.028 342.258 / 0.1);
    --color-pink-100-5: oklch(94.8% 0.028 342.258 / 0.05);
    --color-pink-200-100: oklch(89.9% 0.061 343.231 / 1);
    --color-pink-200-90: oklch(89.9% 0.061 343.231 / 0.9);
    --color-pink-200-80: oklch(89.9% 0.061 343.231 / 0.8);
    --color-pink-200-70: oklch(89.9% 0.061 343.231 / 0.7);
    --color-pink-200-60: oklch(89.9% 0.061 343.231 / 0.6);
    --color-pink-200-50: oklch(89.9% 0.061 343.231 / 0.5);
    --color-pink-200-40: oklch(89.9% 0.061 343.231 / 0.4);
    --color-pink-200-30: oklch(89.9% 0.061 343.231 / 0.3);
    --color-pink-200-20: oklch(89.9% 0.061 343.231 / 0.2);
    --color-pink-200-10: oklch(89.9% 0.061 343.231 / 0.1);
    --color-pink-200-5: oklch(89.9% 0.061 343.231 / 0.05);
    --color-pink-300-100: oklch(82.3% 0.12 346.018 / 1);
    --color-pink-300-90: oklch(82.3% 0.12 346.018 / 0.9);
    --color-pink-300-80: oklch(82.3% 0.12 346.018 / 0.8);
    --color-pink-300-70: oklch(82.3% 0.12 346.018 / 0.7);
    --color-pink-300-60: oklch(82.3% 0.12 346.018 / 0.6);
    --color-pink-300-50: oklch(82.3% 0.12 346.018 / 0.5);
    --color-pink-300-40: oklch(82.3% 0.12 346.018 / 0.4);
    --color-pink-300-30: oklch(82.3% 0.12 346.018 / 0.3);
    --color-pink-300-20: oklch(82.3% 0.12 346.018 / 0.2);
    --color-pink-300-10: oklch(82.3% 0.12 346.018 / 0.1);
    --color-pink-300-5: oklch(82.3% 0.12 346.018 / 0.05);
    --color-pink-400-100: oklch(71.8% 0.202 349.761 / 1);
    --color-pink-400-90: oklch(71.8% 0.202 349.761 / 0.9);
    --color-pink-400-80: oklch(71.8% 0.202 349.761 / 0.8);
    --color-pink-400-70: oklch(71.8% 0.202 349.761 / 0.7);
    --color-pink-400-60: oklch(71.8% 0.202 349.761 / 0.6);
    --color-pink-400-50: oklch(71.8% 0.202 349.761 / 0.5);
    --color-pink-400-40: oklch(71.8% 0.202 349.761 / 0.4);
    --color-pink-400-30: oklch(71.8% 0.202 349.761 / 0.3);
    --color-pink-400-20: oklch(71.8% 0.202 349.761 / 0.2);
    --color-pink-400-10: oklch(71.8% 0.202 349.761 / 0.1);
    --color-pink-400-5: oklch(71.8% 0.202 349.761 / 0.05);
    --color-pink-500-100: oklch(65.6% 0.241 354.308 / 1);
    --color-pink-500-90: oklch(65.6% 0.241 354.308 / 0.9);
    --color-pink-500-80: oklch(65.6% 0.241 354.308 / 0.8);
    --color-pink-500-70: oklch(65.6% 0.241 354.308 / 0.7);
    --color-pink-500-60: oklch(65.6% 0.241 354.308 / 0.6);
    --color-pink-500-50: oklch(65.6% 0.241 354.308 / 0.5);
    --color-pink-500-40: oklch(65.6% 0.241 354.308 / 0.4);
    --color-pink-500-30: oklch(65.6% 0.241 354.308 / 0.3);
    --color-pink-500-20: oklch(65.6% 0.241 354.308 / 0.2);
    --color-pink-500-10: oklch(65.6% 0.241 354.308 / 0.1);
    --color-pink-500-5: oklch(65.6% 0.241 354.308 / 0.05);
    --color-pink-600-100: oklch(59.2% 0.249 0.584 / 1);
    --color-pink-600-90: oklch(59.2% 0.249 0.584 / 0.9);
    --color-pink-600-80: oklch(59.2% 0.249 0.584 / 0.8);
    --color-pink-600-70: oklch(59.2% 0.249 0.584 / 0.7);
    --color-pink-600-60: oklch(59.2% 0.249 0.584 / 0.6);
    --color-pink-600-50: oklch(59.2% 0.249 0.584 / 0.5);
    --color-pink-600-40: oklch(59.2% 0.249 0.584 / 0.4);
    --color-pink-600-30: oklch(59.2% 0.249 0.584 / 0.3);
    --color-pink-600-20: oklch(59.2% 0.249 0.584 / 0.2);
    --color-pink-600-10: oklch(59.2% 0.249 0.584 / 0.1);
    --color-pink-600-5: oklch(59.2% 0.249 0.584 / 0.05);
    --color-pink-700-100: oklch(52.5% 0.223 3.958 / 1);
    --color-pink-700-90: oklch(52.5% 0.223 3.958 / 0.9);
    --color-pink-700-80: oklch(52.5% 0.223 3.958 / 0.8);
    --color-pink-700-70: oklch(52.5% 0.223 3.958 / 0.7);
    --color-pink-700-60: oklch(52.5% 0.223 3.958 / 0.6);
    --color-pink-700-50: oklch(52.5% 0.223 3.958 / 0.5);
    --color-pink-700-40: oklch(52.5% 0.223 3.958 / 0.4);
    --color-pink-700-30: oklch(52.5% 0.223 3.958 / 0.3);
    --color-pink-700-20: oklch(52.5% 0.223 3.958 / 0.2);
    --color-pink-700-10: oklch(52.5% 0.223 3.958 / 0.1);
    --color-pink-700-5: oklch(52.5% 0.223 3.958 / 0.05);
    --color-pink-800-100: oklch(45.9% 0.187 3.815 / 1);
    --color-pink-800-90: oklch(45.9% 0.187 3.815 / 0.9);
    --color-pink-800-80: oklch(45.9% 0.187 3.815 / 0.8);
    --color-pink-800-70: oklch(45.9% 0.187 3.815 / 0.7);
    --color-pink-800-60: oklch(45.9% 0.187 3.815 / 0.6);
    --color-pink-800-50: oklch(45.9% 0.187 3.815 / 0.5);
    --color-pink-800-40: oklch(45.9% 0.187 3.815 / 0.4);
    --color-pink-800-30: oklch(45.9% 0.187 3.815 / 0.3);
    --color-pink-800-20: oklch(45.9% 0.187 3.815 / 0.2);
    --color-pink-800-10: oklch(45.9% 0.187 3.815 / 0.1);
    --color-pink-800-5: oklch(45.9% 0.187 3.815 / 0.05);
    --color-pink-900-100: oklch(40.8% 0.153 2.432 / 1);
    --color-pink-900-90: oklch(40.8% 0.153 2.432 / 0.9);
    --color-pink-900-80: oklch(40.8% 0.153 2.432 / 0.8);
    --color-pink-900-70: oklch(40.8% 0.153 2.432 / 0.7);
    --color-pink-900-60: oklch(40.8% 0.153 2.432 / 0.6);
    --color-pink-900-50: oklch(40.8% 0.153 2.432 / 0.5);
    --color-pink-900-40: oklch(40.8% 0.153 2.432 / 0.4);
    --color-pink-900-30: oklch(40.8% 0.153 2.432 / 0.3);
    --color-pink-900-20: oklch(40.8% 0.153 2.432 / 0.2);
    --color-pink-900-10: oklch(40.8% 0.153 2.432 / 0.1);
    --color-pink-900-5: oklch(40.8% 0.153 2.432 / 0.05);
    --color-pink-950-100: oklch(28.4% 0.109 3.907 / 1);
    --color-pink-950-90: oklch(28.4% 0.109 3.907 / 0.9);
    --color-pink-950-80: oklch(28.4% 0.109 3.907 / 0.8);
    --color-pink-950-70: oklch(28.4% 0.109 3.907 / 0.7);
    --color-pink-950-60: oklch(28.4% 0.109 3.907 / 0.6);
    --color-pink-950-50: oklch(28.4% 0.109 3.907 / 0.5);
    --color-pink-950-40: oklch(28.4% 0.109 3.907 / 0.4);
    --color-pink-950-30: oklch(28.4% 0.109 3.907 / 0.3);
    --color-pink-950-20: oklch(28.4% 0.109 3.907 / 0.2);
    --color-pink-950-10: oklch(28.4% 0.109 3.907 / 0.1);
    --color-pink-950-5: oklch(28.4% 0.109 3.907 / 0.05);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-rose-800: oklch(45.5% 0.188 13.697);
    --color-rose-900: oklch(41% 0.159 10.272);
    --color-rose-950: oklch(27.1% 0.105 12.094);
    --color-rose-50-100: oklch(96.9% 0.015 12.422 / 1);
    --color-rose-50-90: oklch(96.9% 0.015 12.422 / 0.9);
    --color-rose-50-80: oklch(96.9% 0.015 12.422 / 0.8);
    --color-rose-50-70: oklch(96.9% 0.015 12.422 / 0.7);
    --color-rose-50-60: oklch(96.9% 0.015 12.422 / 0.6);
    --color-rose-50-50: oklch(96.9% 0.015 12.422 / 0.5);
    --color-rose-50-40: oklch(96.9% 0.015 12.422 / 0.4);
    --color-rose-50-30: oklch(96.9% 0.015 12.422 / 0.3);
    --color-rose-50-20: oklch(96.9% 0.015 12.422 / 0.2);
    --color-rose-50-10: oklch(96.9% 0.015 12.422 / 0.1);
    --color-rose-50-5: oklch(96.9% 0.015 12.422 / 0.05);
    --color-rose-100-100: oklch(94.1% 0.03 12.58 / 1);
    --color-rose-100-90: oklch(94.1% 0.03 12.58 / 0.9);
    --color-rose-100-80: oklch(94.1% 0.03 12.58 / 0.8);
    --color-rose-100-70: oklch(94.1% 0.03 12.58 / 0.7);
    --color-rose-100-60: oklch(94.1% 0.03 12.58 / 0.6);
    --color-rose-100-50: oklch(94.1% 0.03 12.58 / 0.5);
    --color-rose-100-40: oklch(94.1% 0.03 12.58 / 0.4);
    --color-rose-100-30: oklch(94.1% 0.03 12.58 / 0.3);
    --color-rose-100-20: oklch(94.1% 0.03 12.58 / 0.2);
    --color-rose-100-10: oklch(94.1% 0.03 12.58 / 0.1);
    --color-rose-100-5: oklch(94.1% 0.03 12.58 / 0.05);
    --color-rose-200-100: oklch(89.2% 0.058 10.001 / 1);
    --color-rose-200-90: oklch(89.2% 0.058 10.001 / 0.9);
    --color-rose-200-80: oklch(89.2% 0.058 10.001 / 0.8);
    --color-rose-200-70: oklch(89.2% 0.058 10.001 / 0.7);
    --color-rose-200-60: oklch(89.2% 0.058 10.001 / 0.6);
    --color-rose-200-50: oklch(89.2% 0.058 10.001 / 0.5);
    --color-rose-200-40: oklch(89.2% 0.058 10.001 / 0.4);
    --color-rose-200-30: oklch(89.2% 0.058 10.001 / 0.3);
    --color-rose-200-20: oklch(89.2% 0.058 10.001 / 0.2);
    --color-rose-200-10: oklch(89.2% 0.058 10.001 / 0.1);
    --color-rose-200-5: oklch(89.2% 0.058 10.001 / 0.05);
    --color-rose-300-100: oklch(81% 0.117 11.638 / 1);
    --color-rose-300-90: oklch(81% 0.117 11.638 / 0.9);
    --color-rose-300-80: oklch(81% 0.117 11.638 / 0.8);
    --color-rose-300-70: oklch(81% 0.117 11.638 / 0.7);
    --color-rose-300-60: oklch(81% 0.117 11.638 / 0.6);
    --color-rose-300-50: oklch(81% 0.117 11.638 / 0.5);
    --color-rose-300-40: oklch(81% 0.117 11.638 / 0.4);
    --color-rose-300-30: oklch(81% 0.117 11.638 / 0.3);
    --color-rose-300-20: oklch(81% 0.117 11.638 / 0.2);
    --color-rose-300-10: oklch(81% 0.117 11.638 / 0.1);
    --color-rose-300-5: oklch(81% 0.117 11.638 / 0.05);
    --color-rose-400-100: oklch(71.2% 0.194 13.428 / 1);
    --color-rose-400-90: oklch(71.2% 0.194 13.428 / 0.9);
    --color-rose-400-80: oklch(71.2% 0.194 13.428 / 0.8);
    --color-rose-400-70: oklch(71.2% 0.194 13.428 / 0.7);
    --color-rose-400-60: oklch(71.2% 0.194 13.428 / 0.6);
    --color-rose-400-50: oklch(71.2% 0.194 13.428 / 0.5);
    --color-rose-400-40: oklch(71.2% 0.194 13.428 / 0.4);
    --color-rose-400-30: oklch(71.2% 0.194 13.428 / 0.3);
    --color-rose-400-20: oklch(71.2% 0.194 13.428 / 0.2);
    --color-rose-400-10: oklch(71.2% 0.194 13.428 / 0.1);
    --color-rose-400-5: oklch(71.2% 0.194 13.428 / 0.05);
    --color-rose-500-100: oklch(64.5% 0.246 16.439 / 1);
    --color-rose-500-90: oklch(64.5% 0.246 16.439 / 0.9);
    --color-rose-500-80: oklch(64.5% 0.246 16.439 / 0.8);
    --color-rose-500-70: oklch(64.5% 0.246 16.439 / 0.7);
    --color-rose-500-60: oklch(64.5% 0.246 16.439 / 0.6);
    --color-rose-500-50: oklch(64.5% 0.246 16.439 / 0.5);
    --color-rose-500-40: oklch(64.5% 0.246 16.439 / 0.4);
    --color-rose-500-30: oklch(64.5% 0.246 16.439 / 0.3);
    --color-rose-500-20: oklch(64.5% 0.246 16.439 / 0.2);
    --color-rose-500-10: oklch(64.5% 0.246 16.439 / 0.1);
    --color-rose-500-5: oklch(64.5% 0.246 16.439 / 0.05);
    --color-rose-600-100: oklch(58.6% 0.253 17.585 / 1);
    --color-rose-600-90: oklch(58.6% 0.253 17.585 / 0.9);
    --color-rose-600-80: oklch(58.6% 0.253 17.585 / 0.8);
    --color-rose-600-70: oklch(58.6% 0.253 17.585 / 0.7);
    --color-rose-600-60: oklch(58.6% 0.253 17.585 / 0.6);
    --color-rose-600-50: oklch(58.6% 0.253 17.585 / 0.5);
    --color-rose-600-40: oklch(58.6% 0.253 17.585 / 0.4);
    --color-rose-600-30: oklch(58.6% 0.253 17.585 / 0.3);
    --color-rose-600-20: oklch(58.6% 0.253 17.585 / 0.2);
    --color-rose-600-10: oklch(58.6% 0.253 17.585 / 0.1);
    --color-rose-600-5: oklch(58.6% 0.253 17.585 / 0.05);
    --color-rose-700-100: oklch(51.4% 0.222 16.935 / 1);
    --color-rose-700-90: oklch(51.4% 0.222 16.935 / 0.9);
    --color-rose-700-80: oklch(51.4% 0.222 16.935 / 0.8);
    --color-rose-700-70: oklch(51.4% 0.222 16.935 / 0.7);
    --color-rose-700-60: oklch(51.4% 0.222 16.935 / 0.6);
    --color-rose-700-50: oklch(51.4% 0.222 16.935 / 0.5);
    --color-rose-700-40: oklch(51.4% 0.222 16.935 / 0.4);
    --color-rose-700-30: oklch(51.4% 0.222 16.935 / 0.3);
    --color-rose-700-20: oklch(51.4% 0.222 16.935 / 0.2);
    --color-rose-700-10: oklch(51.4% 0.222 16.935 / 0.1);
    --color-rose-700-5: oklch(51.4% 0.222 16.935 / 0.05);
    --color-rose-800-100: oklch(45.5% 0.188 13.697 / 1);
    --color-rose-800-90: oklch(45.5% 0.188 13.697 / 0.9);
    --color-rose-800-80: oklch(45.5% 0.188 13.697 / 0.8);
    --color-rose-800-70: oklch(45.5% 0.188 13.697 / 0.7);
    --color-rose-800-60: oklch(45.5% 0.188 13.697 / 0.6);
    --color-rose-800-50: oklch(45.5% 0.188 13.697 / 0.5);
    --color-rose-800-40: oklch(45.5% 0.188 13.697 / 0.4);
    --color-rose-800-30: oklch(45.5% 0.188 13.697 / 0.3);
    --color-rose-800-20: oklch(45.5% 0.188 13.697 / 0.2);
    --color-rose-800-10: oklch(45.5% 0.188 13.697 / 0.1);
    --color-rose-800-5: oklch(45.5% 0.188 13.697 / 0.05);
    --color-rose-900-100: oklch(41% 0.159 10.272 / 1);
    --color-rose-900-90: oklch(41% 0.159 10.272 / 0.9);
    --color-rose-900-80: oklch(41% 0.159 10.272 / 0.8);
    --color-rose-900-70: oklch(41% 0.159 10.272 / 0.7);
    --color-rose-900-60: oklch(41% 0.159 10.272 / 0.6);
    --color-rose-900-50: oklch(41% 0.159 10.272 / 0.5);
    --color-rose-900-40: oklch(41% 0.159 10.272 / 0.4);
    --color-rose-900-30: oklch(41% 0.159 10.272 / 0.3);
    --color-rose-900-20: oklch(41% 0.159 10.272 / 0.2);
    --color-rose-900-10: oklch(41% 0.159 10.272 / 0.1);
    --color-rose-900-5: oklch(41% 0.159 10.272 / 0.05);
    --color-rose-950-100: oklch(27.1% 0.105 12.094 / 1);
    --color-rose-950-90: oklch(27.1% 0.105 12.094 / 0.9);
    --color-rose-950-80: oklch(27.1% 0.105 12.094 / 0.8);
    --color-rose-950-70: oklch(27.1% 0.105 12.094 / 0.7);
    --color-rose-950-60: oklch(27.1% 0.105 12.094 / 0.6);
    --color-rose-950-50: oklch(27.1% 0.105 12.094 / 0.5);
    --color-rose-950-40: oklch(27.1% 0.105 12.094 / 0.4);
    --color-rose-950-30: oklch(27.1% 0.105 12.094 / 0.3);
    --color-rose-950-20: oklch(27.1% 0.105 12.094 / 0.2);
    --color-rose-950-10: oklch(27.1% 0.105 12.094 / 0.1);
    --color-rose-950-5: oklch(27.1% 0.105 12.094 / 0.05);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-slate-50-100: oklch(98.4% 0.003 247.858 / 1);
    --color-slate-50-90: oklch(98.4% 0.003 247.858 / 0.9);
    --color-slate-50-80: oklch(98.4% 0.003 247.858 / 0.8);
    --color-slate-50-70: oklch(98.4% 0.003 247.858 / 0.7);
    --color-slate-50-60: oklch(98.4% 0.003 247.858 / 0.6);
    --color-slate-50-50: oklch(98.4% 0.003 247.858 / 0.5);
    --color-slate-50-40: oklch(98.4% 0.003 247.858 / 0.4);
    --color-slate-50-30: oklch(98.4% 0.003 247.858 / 0.3);
    --color-slate-50-20: oklch(98.4% 0.003 247.858 / 0.2);
    --color-slate-50-10: oklch(98.4% 0.003 247.858 / 0.1);
    --color-slate-50-5: oklch(98.4% 0.003 247.858 / 0.05);
    --color-slate-100-100: oklch(96.8% 0.007 247.896 / 1);
    --color-slate-100-90: oklch(96.8% 0.007 247.896 / 0.9);
    --color-slate-100-80: oklch(96.8% 0.007 247.896 / 0.8);
    --color-slate-100-70: oklch(96.8% 0.007 247.896 / 0.7);
    --color-slate-100-60: oklch(96.8% 0.007 247.896 / 0.6);
    --color-slate-100-50: oklch(96.8% 0.007 247.896 / 0.5);
    --color-slate-100-40: oklch(96.8% 0.007 247.896 / 0.4);
    --color-slate-100-30: oklch(96.8% 0.007 247.896 / 0.3);
    --color-slate-100-20: oklch(96.8% 0.007 247.896 / 0.2);
    --color-slate-100-10: oklch(96.8% 0.007 247.896 / 0.1);
    --color-slate-100-5: oklch(96.8% 0.007 247.896 / 0.05);
    --color-slate-200-100: oklch(92.9% 0.013 255.508 / 1);
    --color-slate-200-90: oklch(92.9% 0.013 255.508 / 0.9);
    --color-slate-200-80: oklch(92.9% 0.013 255.508 / 0.8);
    --color-slate-200-70: oklch(92.9% 0.013 255.508 / 0.7);
    --color-slate-200-60: oklch(92.9% 0.013 255.508 / 0.6);
    --color-slate-200-50: oklch(92.9% 0.013 255.508 / 0.5);
    --color-slate-200-40: oklch(92.9% 0.013 255.508 / 0.4);
    --color-slate-200-30: oklch(92.9% 0.013 255.508 / 0.3);
    --color-slate-200-20: oklch(92.9% 0.013 255.508 / 0.2);
    --color-slate-200-10: oklch(92.9% 0.013 255.508 / 0.1);
    --color-slate-200-5: oklch(92.9% 0.013 255.508 / 0.05);
    --color-slate-300-100: oklch(86.9% 0.022 252.894 / 1);
    --color-slate-300-90: oklch(86.9% 0.022 252.894 / 0.9);
    --color-slate-300-80: oklch(86.9% 0.022 252.894 / 0.8);
    --color-slate-300-70: oklch(86.9% 0.022 252.894 / 0.7);
    --color-slate-300-60: oklch(86.9% 0.022 252.894 / 0.6);
    --color-slate-300-50: oklch(86.9% 0.022 252.894 / 0.5);
    --color-slate-300-40: oklch(86.9% 0.022 252.894 / 0.4);
    --color-slate-300-30: oklch(86.9% 0.022 252.894 / 0.3);
    --color-slate-300-20: oklch(86.9% 0.022 252.894 / 0.2);
    --color-slate-300-10: oklch(86.9% 0.022 252.894 / 0.1);
    --color-slate-300-5: oklch(86.9% 0.022 252.894 / 0.05);
    --color-slate-400-100: oklch(70.4% 0.04 256.788 / 1);
    --color-slate-400-90: oklch(70.4% 0.04 256.788 / 0.9);
    --color-slate-400-80: oklch(70.4% 0.04 256.788 / 0.8);
    --color-slate-400-70: oklch(70.4% 0.04 256.788 / 0.7);
    --color-slate-400-60: oklch(70.4% 0.04 256.788 / 0.6);
    --color-slate-400-50: oklch(70.4% 0.04 256.788 / 0.5);
    --color-slate-400-40: oklch(70.4% 0.04 256.788 / 0.4);
    --color-slate-400-30: oklch(70.4% 0.04 256.788 / 0.3);
    --color-slate-400-20: oklch(70.4% 0.04 256.788 / 0.2);
    --color-slate-400-10: oklch(70.4% 0.04 256.788 / 0.1);
    --color-slate-400-5: oklch(70.4% 0.04 256.788 / 0.05);
    --color-slate-500-100: oklch(55.4% 0.046 257.417 / 1);
    --color-slate-500-90: oklch(55.4% 0.046 257.417 / 0.9);
    --color-slate-500-80: oklch(55.4% 0.046 257.417 / 0.8);
    --color-slate-500-70: oklch(55.4% 0.046 257.417 / 0.7);
    --color-slate-500-60: oklch(55.4% 0.046 257.417 / 0.6);
    --color-slate-500-50: oklch(55.4% 0.046 257.417 / 0.5);
    --color-slate-500-40: oklch(55.4% 0.046 257.417 / 0.4);
    --color-slate-500-30: oklch(55.4% 0.046 257.417 / 0.3);
    --color-slate-500-20: oklch(55.4% 0.046 257.417 / 0.2);
    --color-slate-500-10: oklch(55.4% 0.046 257.417 / 0.1);
    --color-slate-500-5: oklch(55.4% 0.046 257.417 / 0.05);
    --color-slate-600-100: oklch(44.6% 0.043 257.281 / 1);
    --color-slate-600-90: oklch(44.6% 0.043 257.281 / 0.9);
    --color-slate-600-80: oklch(44.6% 0.043 257.281 / 0.8);
    --color-slate-600-70: oklch(44.6% 0.043 257.281 / 0.7);
    --color-slate-600-60: oklch(44.6% 0.043 257.281 / 0.6);
    --color-slate-600-50: oklch(44.6% 0.043 257.281 / 0.5);
    --color-slate-600-40: oklch(44.6% 0.043 257.281 / 0.4);
    --color-slate-600-30: oklch(44.6% 0.043 257.281 / 0.3);
    --color-slate-600-20: oklch(44.6% 0.043 257.281 / 0.2);
    --color-slate-600-10: oklch(44.6% 0.043 257.281 / 0.1);
    --color-slate-600-5: oklch(44.6% 0.043 257.281 / 0.05);
    --color-slate-700-100: oklch(37.2% 0.044 257.287 / 1);
    --color-slate-700-90: oklch(37.2% 0.044 257.287 / 0.9);
    --color-slate-700-80: oklch(37.2% 0.044 257.287 / 0.8);
    --color-slate-700-70: oklch(37.2% 0.044 257.287 / 0.7);
    --color-slate-700-60: oklch(37.2% 0.044 257.287 / 0.6);
    --color-slate-700-50: oklch(37.2% 0.044 257.287 / 0.5);
    --color-slate-700-40: oklch(37.2% 0.044 257.287 / 0.4);
    --color-slate-700-30: oklch(37.2% 0.044 257.287 / 0.3);
    --color-slate-700-20: oklch(37.2% 0.044 257.287 / 0.2);
    --color-slate-700-10: oklch(37.2% 0.044 257.287 / 0.1);
    --color-slate-700-5: oklch(37.2% 0.044 257.287 / 0.05);
    --color-slate-800-100: oklch(27.9% 0.041 260.031 / 1);
    --color-slate-800-90: oklch(27.9% 0.041 260.031 / 0.9);
    --color-slate-800-80: oklch(27.9% 0.041 260.031 / 0.8);
    --color-slate-800-70: oklch(27.9% 0.041 260.031 / 0.7);
    --color-slate-800-60: oklch(27.9% 0.041 260.031 / 0.6);
    --color-slate-800-50: oklch(27.9% 0.041 260.031 / 0.5);
    --color-slate-800-40: oklch(27.9% 0.041 260.031 / 0.4);
    --color-slate-800-30: oklch(27.9% 0.041 260.031 / 0.3);
    --color-slate-800-20: oklch(27.9% 0.041 260.031 / 0.2);
    --color-slate-800-10: oklch(27.9% 0.041 260.031 / 0.1);
    --color-slate-800-5: oklch(27.9% 0.041 260.031 / 0.05);
    --color-slate-900-100: oklch(20.8% 0.042 265.755 / 1);
    --color-slate-900-90: oklch(20.8% 0.042 265.755 / 0.9);
    --color-slate-900-80: oklch(20.8% 0.042 265.755 / 0.8);
    --color-slate-900-70: oklch(20.8% 0.042 265.755 / 0.7);
    --color-slate-900-60: oklch(20.8% 0.042 265.755 / 0.6);
    --color-slate-900-50: oklch(20.8% 0.042 265.755 / 0.5);
    --color-slate-900-40: oklch(20.8% 0.042 265.755 / 0.4);
    --color-slate-900-30: oklch(20.8% 0.042 265.755 / 0.3);
    --color-slate-900-20: oklch(20.8% 0.042 265.755 / 0.2);
    --color-slate-900-10: oklch(20.8% 0.042 265.755 / 0.1);
    --color-slate-900-5: oklch(20.8% 0.042 265.755 / 0.05);
    --color-slate-950-100: oklch(12.9% 0.042 264.695 / 1);
    --color-slate-950-90: oklch(12.9% 0.042 264.695 / 0.9);
    --color-slate-950-80: oklch(12.9% 0.042 264.695 / 0.8);
    --color-slate-950-70: oklch(12.9% 0.042 264.695 / 0.7);
    --color-slate-950-60: oklch(12.9% 0.042 264.695 / 0.6);
    --color-slate-950-50: oklch(12.9% 0.042 264.695 / 0.5);
    --color-slate-950-40: oklch(12.9% 0.042 264.695 / 0.4);
    --color-slate-950-30: oklch(12.9% 0.042 264.695 / 0.3);
    --color-slate-950-20: oklch(12.9% 0.042 264.695 / 0.2);
    --color-slate-950-10: oklch(12.9% 0.042 264.695 / 0.1);
    --color-slate-950-5: oklch(12.9% 0.042 264.695 / 0.05);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-gray-950: oklch(13% 0.028 261.692);
    --color-gray-50-100: oklch(98.5% 0.002 247.839 / 1);
    --color-gray-50-90: oklch(98.5% 0.002 247.839 / 0.9);
    --color-gray-50-80: oklch(98.5% 0.002 247.839 / 0.8);
    --color-gray-50-70: oklch(98.5% 0.002 247.839 / 0.7);
    --color-gray-50-60: oklch(98.5% 0.002 247.839 / 0.6);
    --color-gray-50-50: oklch(98.5% 0.002 247.839 / 0.5);
    --color-gray-50-40: oklch(98.5% 0.002 247.839 / 0.4);
    --color-gray-50-30: oklch(98.5% 0.002 247.839 / 0.3);
    --color-gray-50-20: oklch(98.5% 0.002 247.839 / 0.2);
    --color-gray-50-10: oklch(98.5% 0.002 247.839 / 0.1);
    --color-gray-50-5: oklch(98.5% 0.002 247.839 / 0.05);
    --color-gray-100-100: oklch(96.7% 0.003 264.542 / 1);
    --color-gray-100-90: oklch(96.7% 0.003 264.542 / 0.9);
    --color-gray-100-80: oklch(96.7% 0.003 264.542 / 0.8);
    --color-gray-100-70: oklch(96.7% 0.003 264.542 / 0.7);
    --color-gray-100-60: oklch(96.7% 0.003 264.542 / 0.6);
    --color-gray-100-50: oklch(96.7% 0.003 264.542 / 0.5);
    --color-gray-100-40: oklch(96.7% 0.003 264.542 / 0.4);
    --color-gray-100-30: oklch(96.7% 0.003 264.542 / 0.3);
    --color-gray-100-20: oklch(96.7% 0.003 264.542 / 0.2);
    --color-gray-100-10: oklch(96.7% 0.003 264.542 / 0.1);
    --color-gray-100-5: oklch(96.7% 0.003 264.542 / 0.05);
    --color-gray-200-100: oklch(92.8% 0.006 264.531 / 1);
    --color-gray-200-90: oklch(92.8% 0.006 264.531 / 0.9);
    --color-gray-200-80: oklch(92.8% 0.006 264.531 / 0.8);
    --color-gray-200-70: oklch(92.8% 0.006 264.531 / 0.7);
    --color-gray-200-60: oklch(92.8% 0.006 264.531 / 0.6);
    --color-gray-200-50: oklch(92.8% 0.006 264.531 / 0.5);
    --color-gray-200-40: oklch(92.8% 0.006 264.531 / 0.4);
    --color-gray-200-30: oklch(92.8% 0.006 264.531 / 0.3);
    --color-gray-200-20: oklch(92.8% 0.006 264.531 / 0.2);
    --color-gray-200-10: oklch(92.8% 0.006 264.531 / 0.1);
    --color-gray-200-5: oklch(92.8% 0.006 264.531 / 0.05);
    --color-gray-300-100: oklch(87.2% 0.01 258.338 / 1);
    --color-gray-300-90: oklch(87.2% 0.01 258.338 / 0.9);
    --color-gray-300-80: oklch(87.2% 0.01 258.338 / 0.8);
    --color-gray-300-70: oklch(87.2% 0.01 258.338 / 0.7);
    --color-gray-300-60: oklch(87.2% 0.01 258.338 / 0.6);
    --color-gray-300-50: oklch(87.2% 0.01 258.338 / 0.5);
    --color-gray-300-40: oklch(87.2% 0.01 258.338 / 0.4);
    --color-gray-300-30: oklch(87.2% 0.01 258.338 / 0.3);
    --color-gray-300-20: oklch(87.2% 0.01 258.338 / 0.2);
    --color-gray-300-10: oklch(87.2% 0.01 258.338 / 0.1);
    --color-gray-300-5: oklch(87.2% 0.01 258.338 / 0.05);
    --color-gray-400-100: oklch(70.7% 0.022 261.325 / 1);
    --color-gray-400-90: oklch(70.7% 0.022 261.325 / 0.9);
    --color-gray-400-80: oklch(70.7% 0.022 261.325 / 0.8);
    --color-gray-400-70: oklch(70.7% 0.022 261.325 / 0.7);
    --color-gray-400-60: oklch(70.7% 0.022 261.325 / 0.6);
    --color-gray-400-50: oklch(70.7% 0.022 261.325 / 0.5);
    --color-gray-400-40: oklch(70.7% 0.022 261.325 / 0.4);
    --color-gray-400-30: oklch(70.7% 0.022 261.325 / 0.3);
    --color-gray-400-20: oklch(70.7% 0.022 261.325 / 0.2);
    --color-gray-400-10: oklch(70.7% 0.022 261.325 / 0.1);
    --color-gray-400-5: oklch(70.7% 0.022 261.325 / 0.05);
    --color-gray-500-100: oklch(55.1% 0.027 264.364 / 1);
    --color-gray-500-90: oklch(55.1% 0.027 264.364 / 0.9);
    --color-gray-500-80: oklch(55.1% 0.027 264.364 / 0.8);
    --color-gray-500-70: oklch(55.1% 0.027 264.364 / 0.7);
    --color-gray-500-60: oklch(55.1% 0.027 264.364 / 0.6);
    --color-gray-500-50: oklch(55.1% 0.027 264.364 / 0.5);
    --color-gray-500-40: oklch(55.1% 0.027 264.364 / 0.4);
    --color-gray-500-30: oklch(55.1% 0.027 264.364 / 0.3);
    --color-gray-500-20: oklch(55.1% 0.027 264.364 / 0.2);
    --color-gray-500-10: oklch(55.1% 0.027 264.364 / 0.1);
    --color-gray-500-5: oklch(55.1% 0.027 264.364 / 0.05);
    --color-gray-600-100: oklch(44.6% 0.03 256.802 / 1);
    --color-gray-600-90: oklch(44.6% 0.03 256.802 / 0.9);
    --color-gray-600-80: oklch(44.6% 0.03 256.802 / 0.8);
    --color-gray-600-70: oklch(44.6% 0.03 256.802 / 0.7);
    --color-gray-600-60: oklch(44.6% 0.03 256.802 / 0.6);
    --color-gray-600-50: oklch(44.6% 0.03 256.802 / 0.5);
    --color-gray-600-40: oklch(44.6% 0.03 256.802 / 0.4);
    --color-gray-600-30: oklch(44.6% 0.03 256.802 / 0.3);
    --color-gray-600-20: oklch(44.6% 0.03 256.802 / 0.2);
    --color-gray-600-10: oklch(44.6% 0.03 256.802 / 0.1);
    --color-gray-600-5: oklch(44.6% 0.03 256.802 / 0.05);
    --color-gray-700-100: oklch(37.3% 0.034 259.733 / 1);
    --color-gray-700-90: oklch(37.3% 0.034 259.733 / 0.9);
    --color-gray-700-80: oklch(37.3% 0.034 259.733 / 0.8);
    --color-gray-700-70: oklch(37.3% 0.034 259.733 / 0.7);
    --color-gray-700-60: oklch(37.3% 0.034 259.733 / 0.6);
    --color-gray-700-50: oklch(37.3% 0.034 259.733 / 0.5);
    --color-gray-700-40: oklch(37.3% 0.034 259.733 / 0.4);
    --color-gray-700-30: oklch(37.3% 0.034 259.733 / 0.3);
    --color-gray-700-20: oklch(37.3% 0.034 259.733 / 0.2);
    --color-gray-700-10: oklch(37.3% 0.034 259.733 / 0.1);
    --color-gray-700-5: oklch(37.3% 0.034 259.733 / 0.05);
    --color-gray-800-100: oklch(27.8% 0.033 256.848 / 1);
    --color-gray-800-90: oklch(27.8% 0.033 256.848 / 0.9);
    --color-gray-800-80: oklch(27.8% 0.033 256.848 / 0.8);
    --color-gray-800-70: oklch(27.8% 0.033 256.848 / 0.7);
    --color-gray-800-60: oklch(27.8% 0.033 256.848 / 0.6);
    --color-gray-800-50: oklch(27.8% 0.033 256.848 / 0.5);
    --color-gray-800-40: oklch(27.8% 0.033 256.848 / 0.4);
    --color-gray-800-30: oklch(27.8% 0.033 256.848 / 0.3);
    --color-gray-800-20: oklch(27.8% 0.033 256.848 / 0.2);
    --color-gray-800-10: oklch(27.8% 0.033 256.848 / 0.1);
    --color-gray-800-5: oklch(27.8% 0.033 256.848 / 0.05);
    --color-gray-900-100: oklch(21% 0.034 264.665 / 1);
    --color-gray-900-90: oklch(21% 0.034 264.665 / 0.9);
    --color-gray-900-80: oklch(21% 0.034 264.665 / 0.8);
    --color-gray-900-70: oklch(21% 0.034 264.665 / 0.7);
    --color-gray-900-60: oklch(21% 0.034 264.665 / 0.6);
    --color-gray-900-50: oklch(21% 0.034 264.665 / 0.5);
    --color-gray-900-40: oklch(21% 0.034 264.665 / 0.4);
    --color-gray-900-30: oklch(21% 0.034 264.665 / 0.3);
    --color-gray-900-20: oklch(21% 0.034 264.665 / 0.2);
    --color-gray-900-10: oklch(21% 0.034 264.665 / 0.1);
    --color-gray-900-5: oklch(21% 0.034 264.665 / 0.05);
    --color-gray-950-100: oklch(13% 0.028 261.692 / 1);
    --color-gray-950-90: oklch(13% 0.028 261.692 / 0.9);
    --color-gray-950-80: oklch(13% 0.028 261.692 / 0.8);
    --color-gray-950-70: oklch(13% 0.028 261.692 / 0.7);
    --color-gray-950-60: oklch(13% 0.028 261.692 / 0.6);
    --color-gray-950-50: oklch(13% 0.028 261.692 / 0.5);
    --color-gray-950-40: oklch(13% 0.028 261.692 / 0.4);
    --color-gray-950-30: oklch(13% 0.028 261.692 / 0.3);
    --color-gray-950-20: oklch(13% 0.028 261.692 / 0.2);
    --color-gray-950-10: oklch(13% 0.028 261.692 / 0.1);
    --color-gray-950-5: oklch(13% 0.028 261.692 / 0.05);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-zinc-950: oklch(14.1% 0.005 285.823);
    --color-zinc-50-100: oklch(98.5% 0 0 / 1);
    --color-zinc-50-90: oklch(98.5% 0 0 / 0.9);
    --color-zinc-50-80: oklch(98.5% 0 0 / 0.8);
    --color-zinc-50-70: oklch(98.5% 0 0 / 0.7);
    --color-zinc-50-60: oklch(98.5% 0 0 / 0.6);
    --color-zinc-50-50: oklch(98.5% 0 0 / 0.5);
    --color-zinc-50-40: oklch(98.5% 0 0 / 0.4);
    --color-zinc-50-30: oklch(98.5% 0 0 / 0.3);
    --color-zinc-50-20: oklch(98.5% 0 0 / 0.2);
    --color-zinc-50-10: oklch(98.5% 0 0 / 0.1);
    --color-zinc-50-5: oklch(98.5% 0 0 / 0.05);
    --color-zinc-100-100: oklch(96.7% 0.001 286.375 / 1);
    --color-zinc-100-90: oklch(96.7% 0.001 286.375 / 0.9);
    --color-zinc-100-80: oklch(96.7% 0.001 286.375 / 0.8);
    --color-zinc-100-70: oklch(96.7% 0.001 286.375 / 0.7);
    --color-zinc-100-60: oklch(96.7% 0.001 286.375 / 0.6);
    --color-zinc-100-50: oklch(96.7% 0.001 286.375 / 0.5);
    --color-zinc-100-40: oklch(96.7% 0.001 286.375 / 0.4);
    --color-zinc-100-30: oklch(96.7% 0.001 286.375 / 0.3);
    --color-zinc-100-20: oklch(96.7% 0.001 286.375 / 0.2);
    --color-zinc-100-10: oklch(96.7% 0.001 286.375 / 0.1);
    --color-zinc-100-5: oklch(96.7% 0.001 286.375 / 0.05);
    --color-zinc-200-100: oklch(92% 0.004 286.32 / 1);
    --color-zinc-200-90: oklch(92% 0.004 286.32 / 0.9);
    --color-zinc-200-80: oklch(92% 0.004 286.32 / 0.8);
    --color-zinc-200-70: oklch(92% 0.004 286.32 / 0.7);
    --color-zinc-200-60: oklch(92% 0.004 286.32 / 0.6);
    --color-zinc-200-50: oklch(92% 0.004 286.32 / 0.5);
    --color-zinc-200-40: oklch(92% 0.004 286.32 / 0.4);
    --color-zinc-200-30: oklch(92% 0.004 286.32 / 0.3);
    --color-zinc-200-20: oklch(92% 0.004 286.32 / 0.2);
    --color-zinc-200-10: oklch(92% 0.004 286.32 / 0.1);
    --color-zinc-200-5: oklch(92% 0.004 286.32 / 0.05);
    --color-zinc-300-100: oklch(87.1% 0.006 286.286 / 1);
    --color-zinc-300-90: oklch(87.1% 0.006 286.286 / 0.9);
    --color-zinc-300-80: oklch(87.1% 0.006 286.286 / 0.8);
    --color-zinc-300-70: oklch(87.1% 0.006 286.286 / 0.7);
    --color-zinc-300-60: oklch(87.1% 0.006 286.286 / 0.6);
    --color-zinc-300-50: oklch(87.1% 0.006 286.286 / 0.5);
    --color-zinc-300-40: oklch(87.1% 0.006 286.286 / 0.4);
    --color-zinc-300-30: oklch(87.1% 0.006 286.286 / 0.3);
    --color-zinc-300-20: oklch(87.1% 0.006 286.286 / 0.2);
    --color-zinc-300-10: oklch(87.1% 0.006 286.286 / 0.1);
    --color-zinc-300-5: oklch(87.1% 0.006 286.286 / 0.05);
    --color-zinc-400-100: oklch(70.5% 0.015 286.067 / 1);
    --color-zinc-400-90: oklch(70.5% 0.015 286.067 / 0.9);
    --color-zinc-400-80: oklch(70.5% 0.015 286.067 / 0.8);
    --color-zinc-400-70: oklch(70.5% 0.015 286.067 / 0.7);
    --color-zinc-400-60: oklch(70.5% 0.015 286.067 / 0.6);
    --color-zinc-400-50: oklch(70.5% 0.015 286.067 / 0.5);
    --color-zinc-400-40: oklch(70.5% 0.015 286.067 / 0.4);
    --color-zinc-400-30: oklch(70.5% 0.015 286.067 / 0.3);
    --color-zinc-400-20: oklch(70.5% 0.015 286.067 / 0.2);
    --color-zinc-400-10: oklch(70.5% 0.015 286.067 / 0.1);
    --color-zinc-400-5: oklch(70.5% 0.015 286.067 / 0.05);
    --color-zinc-500-100: oklch(55.2% 0.016 285.938 / 1);
    --color-zinc-500-90: oklch(55.2% 0.016 285.938 / 0.9);
    --color-zinc-500-80: oklch(55.2% 0.016 285.938 / 0.8);
    --color-zinc-500-70: oklch(55.2% 0.016 285.938 / 0.7);
    --color-zinc-500-60: oklch(55.2% 0.016 285.938 / 0.6);
    --color-zinc-500-50: oklch(55.2% 0.016 285.938 / 0.5);
    --color-zinc-500-40: oklch(55.2% 0.016 285.938 / 0.4);
    --color-zinc-500-30: oklch(55.2% 0.016 285.938 / 0.3);
    --color-zinc-500-20: oklch(55.2% 0.016 285.938 / 0.2);
    --color-zinc-500-10: oklch(55.2% 0.016 285.938 / 0.1);
    --color-zinc-500-5: oklch(55.2% 0.016 285.938 / 0.05);
    --color-zinc-600-100: oklch(44.2% 0.017 285.786 / 1);
    --color-zinc-600-90: oklch(44.2% 0.017 285.786 / 0.9);
    --color-zinc-600-80: oklch(44.2% 0.017 285.786 / 0.8);
    --color-zinc-600-70: oklch(44.2% 0.017 285.786 / 0.7);
    --color-zinc-600-60: oklch(44.2% 0.017 285.786 / 0.6);
    --color-zinc-600-50: oklch(44.2% 0.017 285.786 / 0.5);
    --color-zinc-600-40: oklch(44.2% 0.017 285.786 / 0.4);
    --color-zinc-600-30: oklch(44.2% 0.017 285.786 / 0.3);
    --color-zinc-600-20: oklch(44.2% 0.017 285.786 / 0.2);
    --color-zinc-600-10: oklch(44.2% 0.017 285.786 / 0.1);
    --color-zinc-600-5: oklch(44.2% 0.017 285.786 / 0.05);
    --color-zinc-700-100: oklch(37% 0.013 285.805 / 1);
    --color-zinc-700-90: oklch(37% 0.013 285.805 / 0.9);
    --color-zinc-700-80: oklch(37% 0.013 285.805 / 0.8);
    --color-zinc-700-70: oklch(37% 0.013 285.805 / 0.7);
    --color-zinc-700-60: oklch(37% 0.013 285.805 / 0.6);
    --color-zinc-700-50: oklch(37% 0.013 285.805 / 0.5);
    --color-zinc-700-40: oklch(37% 0.013 285.805 / 0.4);
    --color-zinc-700-30: oklch(37% 0.013 285.805 / 0.3);
    --color-zinc-700-20: oklch(37% 0.013 285.805 / 0.2);
    --color-zinc-700-10: oklch(37% 0.013 285.805 / 0.1);
    --color-zinc-700-5: oklch(37% 0.013 285.805 / 0.05);
    --color-zinc-800-100: oklch(27.4% 0.006 286.033 / 1);
    --color-zinc-800-90: oklch(27.4% 0.006 286.033 / 0.9);
    --color-zinc-800-80: oklch(27.4% 0.006 286.033 / 0.8);
    --color-zinc-800-70: oklch(27.4% 0.006 286.033 / 0.7);
    --color-zinc-800-60: oklch(27.4% 0.006 286.033 / 0.6);
    --color-zinc-800-50: oklch(27.4% 0.006 286.033 / 0.5);
    --color-zinc-800-40: oklch(27.4% 0.006 286.033 / 0.4);
    --color-zinc-800-30: oklch(27.4% 0.006 286.033 / 0.3);
    --color-zinc-800-20: oklch(27.4% 0.006 286.033 / 0.2);
    --color-zinc-800-10: oklch(27.4% 0.006 286.033 / 0.1);
    --color-zinc-800-5: oklch(27.4% 0.006 286.033 / 0.05);
    --color-zinc-900-100: oklch(21% 0.006 285.885 / 1);
    --color-zinc-900-90: oklch(21% 0.006 285.885 / 0.9);
    --color-zinc-900-80: oklch(21% 0.006 285.885 / 0.8);
    --color-zinc-900-70: oklch(21% 0.006 285.885 / 0.7);
    --color-zinc-900-60: oklch(21% 0.006 285.885 / 0.6);
    --color-zinc-900-50: oklch(21% 0.006 285.885 / 0.5);
    --color-zinc-900-40: oklch(21% 0.006 285.885 / 0.4);
    --color-zinc-900-30: oklch(21% 0.006 285.885 / 0.3);
    --color-zinc-900-20: oklch(21% 0.006 285.885 / 0.2);
    --color-zinc-900-10: oklch(21% 0.006 285.885 / 0.1);
    --color-zinc-900-5: oklch(21% 0.006 285.885 / 0.05);
    --color-zinc-950-100: oklch(14.1% 0.005 285.823 / 1);
    --color-zinc-950-90: oklch(14.1% 0.005 285.823 / 0.9);
    --color-zinc-950-80: oklch(14.1% 0.005 285.823 / 0.8);
    --color-zinc-950-70: oklch(14.1% 0.005 285.823 / 0.7);
    --color-zinc-950-60: oklch(14.1% 0.005 285.823 / 0.6);
    --color-zinc-950-50: oklch(14.1% 0.005 285.823 / 0.5);
    --color-zinc-950-40: oklch(14.1% 0.005 285.823 / 0.4);
    --color-zinc-950-30: oklch(14.1% 0.005 285.823 / 0.3);
    --color-zinc-950-20: oklch(14.1% 0.005 285.823 / 0.2);
    --color-zinc-950-10: oklch(14.1% 0.005 285.823 / 0.1);
    --color-zinc-950-5: oklch(14.1% 0.005 285.823 / 0.05);
    --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-750: oklch(29% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-850: oklch(23.5% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-neutral-50-100: oklch(98.5% 0 0 / 1);
    --color-neutral-50-90: oklch(98.5% 0 0 / 0.9);
    --color-neutral-50-80: oklch(98.5% 0 0 / 0.8);
    --color-neutral-50-70: oklch(98.5% 0 0 / 0.7);
    --color-neutral-50-60: oklch(98.5% 0 0 / 0.6);
    --color-neutral-50-50: oklch(98.5% 0 0 / 0.5);
    --color-neutral-50-40: oklch(98.5% 0 0 / 0.4);
    --color-neutral-50-30: oklch(98.5% 0 0 / 0.3);
    --color-neutral-50-20: oklch(98.5% 0 0 / 0.2);
    --color-neutral-50-10: oklch(98.5% 0 0 / 0.1);
    --color-neutral-50-5: oklch(98.5% 0 0 / 0.05);
    --color-neutral-100-100: oklch(97% 0 0 / 1);
    --color-neutral-100-90: oklch(97% 0 0 / 0.9);
    --color-neutral-100-80: oklch(97% 0 0 / 0.8);
    --color-neutral-100-70: oklch(97% 0 0 / 0.7);
    --color-neutral-100-60: oklch(97% 0 0 / 0.6);
    --color-neutral-100-50: oklch(97% 0 0 / 0.5);
    --color-neutral-100-40: oklch(97% 0 0 / 0.4);
    --color-neutral-100-30: oklch(97% 0 0 / 0.3);
    --color-neutral-100-20: oklch(97% 0 0 / 0.2);
    --color-neutral-100-10: oklch(97% 0 0 / 0.1);
    --color-neutral-100-5: oklch(97% 0 0 / 0.05);
    --color-neutral-200-100: oklch(92.2% 0 0 / 1);
    --color-neutral-200-90: oklch(92.2% 0 0 / 0.9);
    --color-neutral-200-80: oklch(92.2% 0 0 / 0.8);
    --color-neutral-200-70: oklch(92.2% 0 0 / 0.7);
    --color-neutral-200-60: oklch(92.2% 0 0 / 0.6);
    --color-neutral-200-50: oklch(92.2% 0 0 / 0.5);
    --color-neutral-200-40: oklch(92.2% 0 0 / 0.4);
    --color-neutral-200-30: oklch(92.2% 0 0 / 0.3);
    --color-neutral-200-20: oklch(92.2% 0 0 / 0.2);
    --color-neutral-200-10: oklch(92.2% 0 0 / 0.1);
    --color-neutral-200-5: oklch(92.2% 0 0 / 0.05);
    --color-neutral-300-100: oklch(87% 0 0 / 1);
    --color-neutral-300-90: oklch(87% 0 0 / 0.9);
    --color-neutral-300-80: oklch(87% 0 0 / 0.8);
    --color-neutral-300-70: oklch(87% 0 0 / 0.7);
    --color-neutral-300-60: oklch(87% 0 0 / 0.6);
    --color-neutral-300-50: oklch(87% 0 0 / 0.5);
    --color-neutral-300-40: oklch(87% 0 0 / 0.4);
    --color-neutral-300-30: oklch(87% 0 0 / 0.3);
    --color-neutral-300-20: oklch(87% 0 0 / 0.2);
    --color-neutral-300-10: oklch(87% 0 0 / 0.1);
    --color-neutral-300-5: oklch(87% 0 0 / 0.05);
    --color-neutral-400-100: oklch(70.8% 0 0 / 1);
    --color-neutral-400-90: oklch(70.8% 0 0 / 0.9);
    --color-neutral-400-80: oklch(70.8% 0 0 / 0.8);
    --color-neutral-400-70: oklch(70.8% 0 0 / 0.7);
    --color-neutral-400-60: oklch(70.8% 0 0 / 0.6);
    --color-neutral-400-50: oklch(70.8% 0 0 / 0.5);
    --color-neutral-400-40: oklch(70.8% 0 0 / 0.4);
    --color-neutral-400-30: oklch(70.8% 0 0 / 0.3);
    --color-neutral-400-20: oklch(70.8% 0 0 / 0.2);
    --color-neutral-400-10: oklch(70.8% 0 0 / 0.1);
    --color-neutral-400-5: oklch(70.8% 0 0 / 0.05);
    --color-neutral-500-100: oklch(55.6% 0 0 / 1);
    --color-neutral-500-90: oklch(55.6% 0 0 / 0.9);
    --color-neutral-500-80: oklch(55.6% 0 0 / 0.8);
    --color-neutral-500-70: oklch(55.6% 0 0 / 0.7);
    --color-neutral-500-60: oklch(55.6% 0 0 / 0.6);
    --color-neutral-500-50: oklch(55.6% 0 0 / 0.5);
    --color-neutral-500-40: oklch(55.6% 0 0 / 0.4);
    --color-neutral-500-30: oklch(55.6% 0 0 / 0.3);
    --color-neutral-500-20: oklch(55.6% 0 0 / 0.2);
    --color-neutral-500-10: oklch(55.6% 0 0 / 0.1);
    --color-neutral-500-5: oklch(55.6% 0 0 / 0.05);
    --color-neutral-600-100: oklch(43.9% 0 0 / 1);
    --color-neutral-600-90: oklch(43.9% 0 0 / 0.9);
    --color-neutral-600-80: oklch(43.9% 0 0 / 0.8);
    --color-neutral-600-70: oklch(43.9% 0 0 / 0.7);
    --color-neutral-600-60: oklch(43.9% 0 0 / 0.6);
    --color-neutral-600-50: oklch(43.9% 0 0 / 0.5);
    --color-neutral-600-40: oklch(43.9% 0 0 / 0.4);
    --color-neutral-600-30: oklch(43.9% 0 0 / 0.3);
    --color-neutral-600-20: oklch(43.9% 0 0 / 0.2);
    --color-neutral-600-10: oklch(43.9% 0 0 / 0.1);
    --color-neutral-600-5: oklch(43.9% 0 0 / 0.05);
    --color-neutral-700-100: oklch(37.1% 0 0 / 1);
    --color-neutral-700-90: oklch(37.1% 0 0 / 0.9);
    --color-neutral-700-80: oklch(37.1% 0 0 / 0.8);
    --color-neutral-700-70: oklch(37.1% 0 0 / 0.7);
    --color-neutral-700-60: oklch(37.1% 0 0 / 0.6);
    --color-neutral-700-50: oklch(37.1% 0 0 / 0.5);
    --color-neutral-700-40: oklch(37.1% 0 0 / 0.4);
    --color-neutral-700-30: oklch(37.1% 0 0 / 0.3);
    --color-neutral-700-20: oklch(37.1% 0 0 / 0.2);
    --color-neutral-700-10: oklch(37.1% 0 0 / 0.1);
    --color-neutral-700-5: oklch(37.1% 0 0 / 0.05);
    --color-neutral-750-100: oklch(32% 0 0 / 1);
    --color-neutral-750-90: oklch(32% 0 0 / 0.9);
    --color-neutral-750-80: oklch(32% 0 0 / 0.8);
    --color-neutral-750-70: oklch(32% 0 0 / 0.7);
    --color-neutral-750-60: oklch(32% 0 0 / 0.6);
    --color-neutral-750-50: oklch(32% 0 0 / 0.5);
    --color-neutral-750-40: oklch(32% 0 0 / 0.4);
    --color-neutral-750-30: oklch(32% 0 0 / 0.3);
    --color-neutral-750-20: oklch(32% 0 0 / 0.2);
    --color-neutral-750-10: oklch(32% 0 0 / 0.1);
    --color-neutral-750-5: oklch(32% 0 0 / 0.05);
    --color-neutral-800-100: oklch(26.9% 0 0 / 1);
    --color-neutral-800-90: oklch(26.9% 0 0 / 0.9);
    --color-neutral-800-80: oklch(26.9% 0 0 / 0.8);
    --color-neutral-800-70: oklch(26.9% 0 0 / 0.7);
    --color-neutral-800-60: oklch(26.9% 0 0 / 0.6);
    --color-neutral-800-50: oklch(26.9% 0 0 / 0.5);
    --color-neutral-800-40: oklch(26.9% 0 0 / 0.4);
    --color-neutral-800-30: oklch(26.9% 0 0 / 0.3);
    --color-neutral-800-20: oklch(26.9% 0 0 / 0.2);
    --color-neutral-800-10: oklch(26.9% 0 0 / 0.1);
    --color-neutral-800-5: oklch(26.9% 0 0 / 0.05);
    --color-neutral-800-100: oklch(23.5% 0 0 / 1);
    --color-neutral-800-90: oklch(23.5% 0 0 / 0.9);
    --color-neutral-800-80: oklch(23.5% 0 0 / 0.8);
    --color-neutral-800-70: oklch(23.5% 0 0 / 0.7);
    --color-neutral-800-60: oklch(23.5% 0 0 / 0.6);
    --color-neutral-800-50: oklch(23.5% 0 0 / 0.5);
    --color-neutral-800-40: oklch(23.5% 0 0 / 0.4);
    --color-neutral-800-30: oklch(23.5% 0 0 / 0.3);
    --color-neutral-800-20: oklch(23.5% 0 0 / 0.2);
    --color-neutral-800-10: oklch(23.5% 0 0 / 0.1);
    --color-neutral-800-5: oklch(23.5% 0 0 / 0.05);
    --color-neutral-900-100: oklch(20.5% 0 0 / 1);
    --color-neutral-900-90: oklch(20.5% 0 0 / 0.9);
    --color-neutral-900-80: oklch(20.5% 0 0 / 0.8);
    --color-neutral-900-70: oklch(20.5% 0 0 / 0.7);
    --color-neutral-900-60: oklch(20.5% 0 0 / 0.6);
    --color-neutral-900-50: oklch(20.5% 0 0 / 0.5);
    --color-neutral-900-40: oklch(20.5% 0 0 / 0.4);
    --color-neutral-900-30: oklch(20.5% 0 0 / 0.3);
    --color-neutral-900-20: oklch(20.5% 0 0 / 0.2);
    --color-neutral-900-10: oklch(20.5% 0 0 / 0.1);
    --color-neutral-900-5: oklch(20.5% 0 0 / 0.05);
    --color-neutral-950-100: oklch(14.5% 0 0 / 1);
    --color-neutral-950-90: oklch(14.5% 0 0 / 0.9);
    --color-neutral-950-80: oklch(14.5% 0 0 / 0.8);
    --color-neutral-950-70: oklch(14.5% 0 0 / 0.7);
    --color-neutral-950-60: oklch(14.5% 0 0 / 0.6);
    --color-neutral-950-50: oklch(14.5% 0 0 / 0.5);
    --color-neutral-950-40: oklch(14.5% 0 0 / 0.4);
    --color-neutral-950-30: oklch(14.5% 0 0 / 0.3);
    --color-neutral-950-20: oklch(14.5% 0 0 / 0.2);
    --color-neutral-950-10: oklch(14.5% 0 0 / 0.1);
    --color-neutral-950-5: oklch(14.5% 0 0 / 0.05);
    --color-stone-50: oklch(98.5% 0.001 106.423);
    --color-stone-100: oklch(97% 0.001 106.424);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-stone-300: oklch(86.9% 0.005 56.366);
    --color-stone-400: oklch(70.9% 0.01 56.259);
    --color-stone-500: oklch(55.3% 0.013 58.071);
    --color-stone-600: oklch(44.4% 0.011 73.639);
    --color-stone-700: oklch(37.4% 0.01 67.558);
    --color-stone-800: oklch(26.8% 0.007 34.298);
    --color-stone-900: oklch(21.6% 0.006 56.043);
    --color-stone-950: oklch(14.7% 0.004 49.25);
    --color-stone-50-100: oklch(98.5% 0.001 106.423 / 1);
    --color-stone-50-90: oklch(98.5% 0.001 106.423 / 0.9);
    --color-stone-50-80: oklch(98.5% 0.001 106.423 / 0.8);
    --color-stone-50-70: oklch(98.5% 0.001 106.423 / 0.7);
    --color-stone-50-60: oklch(98.5% 0.001 106.423 / 0.6);
    --color-stone-50-50: oklch(98.5% 0.001 106.423 / 0.5);
    --color-stone-50-40: oklch(98.5% 0.001 106.423 / 0.4);
    --color-stone-50-30: oklch(98.5% 0.001 106.423 / 0.3);
    --color-stone-50-20: oklch(98.5% 0.001 106.423 / 0.2);
    --color-stone-50-10: oklch(98.5% 0.001 106.423 / 0.1);
    --color-stone-50-5: oklch(98.5% 0.001 106.423 / 0.05);
    --color-stone-100-100: oklch(97% 0.001 106.424 / 1);
    --color-stone-100-90: oklch(97% 0.001 106.424 / 0.9);
    --color-stone-100-80: oklch(97% 0.001 106.424 / 0.8);
    --color-stone-100-70: oklch(97% 0.001 106.424 / 0.7);
    --color-stone-100-60: oklch(97% 0.001 106.424 / 0.6);
    --color-stone-100-50: oklch(97% 0.001 106.424 / 0.5);
    --color-stone-100-40: oklch(97% 0.001 106.424 / 0.4);
    --color-stone-100-30: oklch(97% 0.001 106.424 / 0.3);
    --color-stone-100-20: oklch(97% 0.001 106.424 / 0.2);
    --color-stone-100-10: oklch(97% 0.001 106.424 / 0.1);
    --color-stone-100-5: oklch(97% 0.001 106.424 / 0.05);
    --color-stone-200-100: oklch(92.3% 0.003 48.717 / 1);
    --color-stone-200-90: oklch(92.3% 0.003 48.717 / 0.9);
    --color-stone-200-80: oklch(92.3% 0.003 48.717 / 0.8);
    --color-stone-200-70: oklch(92.3% 0.003 48.717 / 0.7);
    --color-stone-200-60: oklch(92.3% 0.003 48.717 / 0.6);
    --color-stone-200-50: oklch(92.3% 0.003 48.717 / 0.5);
    --color-stone-200-40: oklch(92.3% 0.003 48.717 / 0.4);
    --color-stone-200-30: oklch(92.3% 0.003 48.717 / 0.3);
    --color-stone-200-20: oklch(92.3% 0.003 48.717 / 0.2);
    --color-stone-200-10: oklch(92.3% 0.003 48.717 / 0.1);
    --color-stone-200-5: oklch(92.3% 0.003 48.717 / 0.05);
    --color-stone-300-100: oklch(86.9% 0.005 56.366 / 1);
    --color-stone-300-90: oklch(86.9% 0.005 56.366 / 0.9);
    --color-stone-300-80: oklch(86.9% 0.005 56.366 / 0.8);
    --color-stone-300-70: oklch(86.9% 0.005 56.366 / 0.7);
    --color-stone-300-60: oklch(86.9% 0.005 56.366 / 0.6);
    --color-stone-300-50: oklch(86.9% 0.005 56.366 / 0.5);
    --color-stone-300-40: oklch(86.9% 0.005 56.366 / 0.4);
    --color-stone-300-30: oklch(86.9% 0.005 56.366 / 0.3);
    --color-stone-300-20: oklch(86.9% 0.005 56.366 / 0.2);
    --color-stone-300-10: oklch(86.9% 0.005 56.366 / 0.1);
    --color-stone-300-5: oklch(86.9% 0.005 56.366 / 0.05);
    --color-stone-400-100: oklch(70.9% 0.01 56.259 / 1);
    --color-stone-400-90: oklch(70.9% 0.01 56.259 / 0.9);
    --color-stone-400-80: oklch(70.9% 0.01 56.259 / 0.8);
    --color-stone-400-70: oklch(70.9% 0.01 56.259 / 0.7);
    --color-stone-400-60: oklch(70.9% 0.01 56.259 / 0.6);
    --color-stone-400-50: oklch(70.9% 0.01 56.259 / 0.5);
    --color-stone-400-40: oklch(70.9% 0.01 56.259 / 0.4);
    --color-stone-400-30: oklch(70.9% 0.01 56.259 / 0.3);
    --color-stone-400-20: oklch(70.9% 0.01 56.259 / 0.2);
    --color-stone-400-10: oklch(70.9% 0.01 56.259 / 0.1);
    --color-stone-400-5: oklch(70.9% 0.01 56.259 / 0.05);
    --color-stone-500-100: oklch(55.3% 0.013 58.071 / 1);
    --color-stone-500-90: oklch(55.3% 0.013 58.071 / 0.9);
    --color-stone-500-80: oklch(55.3% 0.013 58.071 / 0.8);
    --color-stone-500-70: oklch(55.3% 0.013 58.071 / 0.7);
    --color-stone-500-60: oklch(55.3% 0.013 58.071 / 0.6);
    --color-stone-500-50: oklch(55.3% 0.013 58.071 / 0.5);
    --color-stone-500-40: oklch(55.3% 0.013 58.071 / 0.4);
    --color-stone-500-30: oklch(55.3% 0.013 58.071 / 0.3);
    --color-stone-500-20: oklch(55.3% 0.013 58.071 / 0.2);
    --color-stone-500-10: oklch(55.3% 0.013 58.071 / 0.1);
    --color-stone-500-5: oklch(55.3% 0.013 58.071 / 0.05);
    --color-stone-600-100: oklch(44.4% 0.011 73.639 / 1);
    --color-stone-600-90: oklch(44.4% 0.011 73.639 / 0.9);
    --color-stone-600-80: oklch(44.4% 0.011 73.639 / 0.8);
    --color-stone-600-70: oklch(44.4% 0.011 73.639 / 0.7);
    --color-stone-600-60: oklch(44.4% 0.011 73.639 / 0.6);
    --color-stone-600-50: oklch(44.4% 0.011 73.639 / 0.5);
    --color-stone-600-40: oklch(44.4% 0.011 73.639 / 0.4);
    --color-stone-600-30: oklch(44.4% 0.011 73.639 / 0.3);
    --color-stone-600-20: oklch(44.4% 0.011 73.639 / 0.2);
    --color-stone-600-10: oklch(44.4% 0.011 73.639 / 0.1);
    --color-stone-600-5: oklch(44.4% 0.011 73.639 / 0.05);
    --color-stone-700-100: oklch(37.4% 0.01 67.558 / 1);
    --color-stone-700-90: oklch(37.4% 0.01 67.558 / 0.9);
    --color-stone-700-80: oklch(37.4% 0.01 67.558 / 0.8);
    --color-stone-700-70: oklch(37.4% 0.01 67.558 / 0.7);
    --color-stone-700-60: oklch(37.4% 0.01 67.558 / 0.6);
    --color-stone-700-50: oklch(37.4% 0.01 67.558 / 0.5);
    --color-stone-700-40: oklch(37.4% 0.01 67.558 / 0.4);
    --color-stone-700-30: oklch(37.4% 0.01 67.558 / 0.3);
    --color-stone-700-20: oklch(37.4% 0.01 67.558 / 0.2);
    --color-stone-700-10: oklch(37.4% 0.01 67.558 / 0.1);
    --color-stone-700-5: oklch(37.4% 0.01 67.558 / 0.05);
    --color-stone-800-100: oklch(26.8% 0.007 34.298 / 1);
    --color-stone-800-90: oklch(26.8% 0.007 34.298 / 0.9);
    --color-stone-800-80: oklch(26.8% 0.007 34.298 / 0.8);
    --color-stone-800-70: oklch(26.8% 0.007 34.298 / 0.7);
    --color-stone-800-60: oklch(26.8% 0.007 34.298 / 0.6);
    --color-stone-800-50: oklch(26.8% 0.007 34.298 / 0.5);
    --color-stone-800-40: oklch(26.8% 0.007 34.298 / 0.4);
    --color-stone-800-30: oklch(26.8% 0.007 34.298 / 0.3);
    --color-stone-800-20: oklch(26.8% 0.007 34.298 / 0.2);
    --color-stone-800-10: oklch(26.8% 0.007 34.298 / 0.1);
    --color-stone-800-5: oklch(26.8% 0.007 34.298 / 0.05);
    --color-stone-900-100: oklch(21.6% 0.006 56.043 / 1);
    --color-stone-900-90: oklch(21.6% 0.006 56.043 / 0.9);
    --color-stone-900-80: oklch(21.6% 0.006 56.043 / 0.8);
    --color-stone-900-70: oklch(21.6% 0.006 56.043 / 0.7);
    --color-stone-900-60: oklch(21.6% 0.006 56.043 / 0.6);
    --color-stone-900-50: oklch(21.6% 0.006 56.043 / 0.5);
    --color-stone-900-40: oklch(21.6% 0.006 56.043 / 0.4);
    --color-stone-900-30: oklch(21.6% 0.006 56.043 / 0.3);
    --color-stone-900-20: oklch(21.6% 0.006 56.043 / 0.2);
    --color-stone-900-10: oklch(21.6% 0.006 56.043 / 0.1);
    --color-stone-900-5: oklch(21.6% 0.006 56.043 / 0.05);
    --color-stone-950-100: oklch(14.7% 0.004 49.25 / 1);
    --color-stone-950-90: oklch(14.7% 0.004 49.25 / 0.9);
    --color-stone-950-80: oklch(14.7% 0.004 49.25 / 0.8);
    --color-stone-950-70: oklch(14.7% 0.004 49.25 / 0.7);
    --color-stone-950-60: oklch(14.7% 0.004 49.25 / 0.6);
    --color-stone-950-50: oklch(14.7% 0.004 49.25 / 0.5);
    --color-stone-950-40: oklch(14.7% 0.004 49.25 / 0.4);
    --color-stone-950-30: oklch(14.7% 0.004 49.25 / 0.3);
    --color-stone-950-20: oklch(14.7% 0.004 49.25 / 0.2);
    --color-stone-950-10: oklch(14.7% 0.004 49.25 / 0.1);
    --color-stone-950-5: oklch(14.7% 0.004 49.25 / 0.05);
    --alpha-0: oklch(100% 0 0 / 0);
    --unset-0: oklch(100% 0 0 / 0);
    --alpha-white-10: oklch(100% 0 0 / 0.1);
    --alpha-white-20: oklch(100% 0 0 / 0.2);
    --alpha-white-30: oklch(100% 0 0 / 0.3);
    --alpha-white-40: oklch(100% 0 0 / 0.4);
    --alpha-white-50: oklch(100% 0 0 / 0.5);
    --alpha-white-60: oklch(100% 0 0 / 0.6);
    --alpha-white-70: oklch(100% 0 0 / 0.7);
    --alpha-white-80: oklch(100% 0 0 / 0.8);
    --alpha-white-90: oklch(100% 0 0 / 0.9);
    --alpha-white-100: oklch(100% 0 0);
    --alpha-black-10: oklch(0% 0 0 / 0.1);
    --alpha-black-20: oklch(0% 0 0 / 0.2);
    --alpha-black-30: oklch(0% 0 0 / 0.3);
    --alpha-black-40: oklch(0% 0 0 / 0.4);
    --alpha-black-50: oklch(0% 0 0 / 0.5);
    --alpha-black-60: oklch(0% 0 0 / 0.6);
    --alpha-black-70: oklch(0% 0 0 / 0.7);
    --alpha-black-80: oklch(0% 0 0 / 0.8);
    --alpha-black-90: oklch(0% 0 0 / 0.9);
    --alpha-black-100: oklch(0% 0 0);
    --utility-red-50: var(--color-red-50);
    --utility-red-100: var(--color-red-100);
    --utility-red-200: var(--color-red-200);
    --utility-red-300: var(--color-red-300);
    --utility-red-400: var(--color-red-400);
    --utility-red-500: var(--color-red-500);
    --utility-red-600: var(--color-red-600);
    --utility-red-700: var(--color-red-700);
    --utility-red-800: var(--color-red-800);
    --utility-red-900: var(--color-red-900);
    --utility-red-950: var(--color-red-950);
    --alpha-red-50-100: var(--color-red-50-100);
    --alpha-red-50-90: var(--color-red-50-90);
    --alpha-red-50-80: var(--color-red-50-80);
    --alpha-red-50-70: var(--color-red-50-70);
    --alpha-red-50-60: var(--color-red-50-60);
    --alpha-red-50-50: var(--color-red-50-50);
    --alpha-red-50-40: var(--color-red-50-40);
    --alpha-red-50-30: var(--color-red-50-30);
    --alpha-red-50-20: var(--color-red-50-20);
    --alpha-red-50-10: var(--color-red-50-10);
    --alpha-red-50-5: var(--color-red-50-5);
    --alpha-red-100-100: var(--color-red-100-100);
    --alpha-red-100-90: var(--color-red-100-90);
    --alpha-red-100-80: var(--color-red-100-80);
    --alpha-red-100-70: var(--color-red-100-70);
    --alpha-red-100-60: var(--color-red-100-60);
    --alpha-red-100-50: var(--color-red-100-50);
    --alpha-red-100-40: var(--color-red-100-40);
    --alpha-red-100-30: var(--color-red-100-30);
    --alpha-red-100-20: var(--color-red-100-20);
    --alpha-red-100-10: var(--color-red-100-10);
    --alpha-red-100-5: var(--color-red-100-5);
    --alpha-red-200-100: var(--color-red-200-100);
    --alpha-red-200-90: var(--color-red-200-90);
    --alpha-red-200-80: var(--color-red-200-80);
    --alpha-red-200-70: var(--color-red-200-70);
    --alpha-red-200-60: var(--color-red-200-60);
    --alpha-red-200-50: var(--color-red-200-50);
    --alpha-red-200-40: var(--color-red-200-40);
    --alpha-red-200-30: var(--color-red-200-30);
    --alpha-red-200-20: var(--color-red-200-20);
    --alpha-red-200-10: var(--color-red-200-10);
    --alpha-red-200-5: var(--color-red-200-5);
    --alpha-red-300-100: var(--color-red-300-100);
    --alpha-red-300-90: var(--color-red-300-90);
    --alpha-red-300-80: var(--color-red-300-80);
    --alpha-red-300-70: var(--color-red-300-70);
    --alpha-red-300-60: var(--color-red-300-60);
    --alpha-red-300-50: var(--color-red-300-50);
    --alpha-red-300-40: var(--color-red-300-40);
    --alpha-red-300-30: var(--color-red-300-30);
    --alpha-red-300-20: var(--color-red-300-20);
    --alpha-red-300-10: var(--color-red-300-10);
    --alpha-red-300-5: var(--color-red-300-5);
    --alpha-red-400-100: var(--color-red-400-100);
    --alpha-red-400-90: var(--color-red-400-90);
    --alpha-red-400-80: var(--color-red-400-80);
    --alpha-red-400-70: var(--color-red-400-70);
    --alpha-red-400-60: var(--color-red-400-60);
    --alpha-red-400-50: var(--color-red-400-50);
    --alpha-red-400-40: var(--color-red-400-40);
    --alpha-red-400-30: var(--color-red-400-30);
    --alpha-red-400-20: var(--color-red-400-20);
    --alpha-red-400-10: var(--color-red-400-10);
    --alpha-red-400-5: var(--color-red-400-5);
    --alpha-red-500-100: var(--color-red-500-100);
    --alpha-red-500-90: var(--color-red-500-90);
    --alpha-red-500-80: var(--color-red-500-80);
    --alpha-red-500-70: var(--color-red-500-70);
    --alpha-red-500-60: var(--color-red-500-60);
    --alpha-red-500-50: var(--color-red-500-50);
    --alpha-red-500-40: var(--color-red-500-40);
    --alpha-red-500-30: var(--color-red-500-30);
    --alpha-red-500-20: var(--color-red-500-20);
    --alpha-red-500-10: var(--color-red-500-10);
    --alpha-red-500-5: var(--color-red-500-5);
    --alpha-red-600-100: var(--color-red-600-100);
    --alpha-red-600-90: var(--color-red-600-90);
    --alpha-red-600-80: var(--color-red-600-80);
    --alpha-red-600-70: var(--color-red-600-70);
    --alpha-red-600-60: var(--color-red-600-60);
    --alpha-red-600-50: var(--color-red-600-50);
    --alpha-red-600-40: var(--color-red-600-40);
    --alpha-red-600-30: var(--color-red-600-30);
    --alpha-red-600-20: var(--color-red-600-20);
    --alpha-red-600-10: var(--color-red-600-10);
    --alpha-red-600-5: var(--color-red-600-5);
    --alpha-red-700-100: var(--color-red-700-100);
    --alpha-red-700-90: var(--color-red-700-90);
    --alpha-red-700-80: var(--color-red-700-80);
    --alpha-red-700-70: var(--color-red-700-70);
    --alpha-red-700-60: var(--color-red-700-60);
    --alpha-red-700-50: var(--color-red-700-50);
    --alpha-red-700-40: var(--color-red-700-40);
    --alpha-red-700-30: var(--color-red-700-30);
    --alpha-red-700-20: var(--color-red-700-20);
    --alpha-red-700-10: var(--color-red-700-10);
    --alpha-red-700-5: var(--color-red-700-5);
    --alpha-red-800-100: var(--color-red-800-100);
    --alpha-red-800-90: var(--color-red-800-90);
    --alpha-red-800-80: var(--color-red-800-80);
    --alpha-red-800-70: var(--color-red-800-70);
    --alpha-red-800-60: var(--color-red-800-60);
    --alpha-red-800-50: var(--color-red-800-50);
    --alpha-red-800-40: var(--color-red-800-40);
    --alpha-red-800-30: var(--color-red-800-30);
    --alpha-red-800-20: var(--color-red-800-20);
    --alpha-red-800-10: var(--color-red-800-10);
    --alpha-red-800-5: var(--color-red-800-5);
    --alpha-red-900-100: var(--color-red-900-100);
    --alpha-red-900-90: var(--color-red-900-90);
    --alpha-red-900-80: var(--color-red-900-80);
    --alpha-red-900-70: var(--color-red-900-70);
    --alpha-red-900-60: var(--color-red-900-60);
    --alpha-red-900-50: var(--color-red-900-50);
    --alpha-red-900-40: var(--color-red-900-40);
    --alpha-red-900-30: var(--color-red-900-30);
    --alpha-red-900-20: var(--color-red-900-20);
    --alpha-red-900-10: var(--color-red-900-10);
    --alpha-red-900-5: var(--color-red-900-5);
    --alpha-red-950-100: var(--color-red-950-100);
    --alpha-red-950-90: var(--color-red-950-90);
    --alpha-red-950-80: var(--color-red-950-80);
    --alpha-red-950-70: var(--color-red-950-70);
    --alpha-red-950-60: var(--color-red-950-60);
    --alpha-red-950-50: var(--color-red-950-50);
    --alpha-red-950-40: var(--color-red-950-40);
    --alpha-red-950-30: var(--color-red-950-30);
    --alpha-red-950-20: var(--color-red-950-20);
    --alpha-red-950-10: var(--color-red-950-10);
    --alpha-red-950-5: var(--color-red-950-5);
    --utility-orange-50: var(--color-orange-50);
    --utility-orange-100: var(--color-orange-100);
    --utility-orange-200: var(--color-orange-200);
    --utility-orange-300: var(--color-orange-300);
    --utility-orange-400: var(--color-orange-400);
    --utility-orange-500: var(--color-orange-500);
    --utility-orange-600: var(--color-orange-600);
    --utility-orange-700: var(--color-orange-700);
    --utility-orange-800: var(--color-orange-800);
    --utility-orange-900: var(--color-orange-900);
    --utility-orange-950: var(--color-orange-950);
    --alpha-orange-50-100: var(--color-orange-50-100);
    --alpha-orange-50-90: var(--color-orange-50-90);
    --alpha-orange-50-80: var(--color-orange-50-80);
    --alpha-orange-50-70: var(--color-orange-50-70);
    --alpha-orange-50-60: var(--color-orange-50-60);
    --alpha-orange-50-50: var(--color-orange-50-50);
    --alpha-orange-50-40: var(--color-orange-50-40);
    --alpha-orange-50-30: var(--color-orange-50-30);
    --alpha-orange-50-20: var(--color-orange-50-20);
    --alpha-orange-50-10: var(--color-orange-50-10);
    --alpha-orange-50-5: var(--color-orange-50-5);
    --alpha-orange-100-100: var(--color-orange-100-100);
    --alpha-orange-100-90: var(--color-orange-100-90);
    --alpha-orange-100-80: var(--color-orange-100-80);
    --alpha-orange-100-70: var(--color-orange-100-70);
    --alpha-orange-100-60: var(--color-orange-100-60);
    --alpha-orange-100-50: var(--color-orange-100-50);
    --alpha-orange-100-40: var(--color-orange-100-40);
    --alpha-orange-100-30: var(--color-orange-100-30);
    --alpha-orange-100-20: var(--color-orange-100-20);
    --alpha-orange-100-10: var(--color-orange-100-10);
    --alpha-orange-100-5: var(--color-orange-100-5);
    --alpha-orange-200-100: var(--color-orange-200-100);
    --alpha-orange-200-90: var(--color-orange-200-90);
    --alpha-orange-200-80: var(--color-orange-200-80);
    --alpha-orange-200-70: var(--color-orange-200-70);
    --alpha-orange-200-60: var(--color-orange-200-60);
    --alpha-orange-200-50: var(--color-orange-200-50);
    --alpha-orange-200-40: var(--color-orange-200-40);
    --alpha-orange-200-30: var(--color-orange-200-30);
    --alpha-orange-200-20: var(--color-orange-200-20);
    --alpha-orange-200-10: var(--color-orange-200-10);
    --alpha-orange-200-5: var(--color-orange-200-5);
    --alpha-orange-300-100: var(--color-orange-300-100);
    --alpha-orange-300-90: var(--color-orange-300-90);
    --alpha-orange-300-80: var(--color-orange-300-80);
    --alpha-orange-300-70: var(--color-orange-300-70);
    --alpha-orange-300-60: var(--color-orange-300-60);
    --alpha-orange-300-50: var(--color-orange-300-50);
    --alpha-orange-300-40: var(--color-orange-300-40);
    --alpha-orange-300-30: var(--color-orange-300-30);
    --alpha-orange-300-20: var(--color-orange-300-20);
    --alpha-orange-300-10: var(--color-orange-300-10);
    --alpha-orange-300-5: var(--color-orange-300-5);
    --alpha-orange-400-100: var(--color-orange-400-100);
    --alpha-orange-400-90: var(--color-orange-400-90);
    --alpha-orange-400-80: var(--color-orange-400-80);
    --alpha-orange-400-70: var(--color-orange-400-70);
    --alpha-orange-400-60: var(--color-orange-400-60);
    --alpha-orange-400-50: var(--color-orange-400-50);
    --alpha-orange-400-40: var(--color-orange-400-40);
    --alpha-orange-400-30: var(--color-orange-400-30);
    --alpha-orange-400-20: var(--color-orange-400-20);
    --alpha-orange-400-10: var(--color-orange-400-10);
    --alpha-orange-400-5: var(--color-orange-400-5);
    --alpha-orange-500-100: var(--color-orange-500-100);
    --alpha-orange-500-90: var(--color-orange-500-90);
    --alpha-orange-500-80: var(--color-orange-500-80);
    --alpha-orange-500-70: var(--color-orange-500-70);
    --alpha-orange-500-60: var(--color-orange-500-60);
    --alpha-orange-500-50: var(--color-orange-500-50);
    --alpha-orange-500-40: var(--color-orange-500-40);
    --alpha-orange-500-30: var(--color-orange-500-30);
    --alpha-orange-500-20: var(--color-orange-500-20);
    --alpha-orange-500-10: var(--color-orange-500-10);
    --alpha-orange-500-5: var(--color-orange-500-5);
    --alpha-orange-600-100: var(--color-orange-600-100);
    --alpha-orange-600-90: var(--color-orange-600-90);
    --alpha-orange-600-80: var(--color-orange-600-80);
    --alpha-orange-600-70: var(--color-orange-600-70);
    --alpha-orange-600-60: var(--color-orange-600-60);
    --alpha-orange-600-50: var(--color-orange-600-50);
    --alpha-orange-600-40: var(--color-orange-600-40);
    --alpha-orange-600-30: var(--color-orange-600-30);
    --alpha-orange-600-20: var(--color-orange-600-20);
    --alpha-orange-600-10: var(--color-orange-600-10);
    --alpha-orange-600-5: var(--color-orange-600-5);
    --alpha-orange-700-100: var(--color-orange-700-100);
    --alpha-orange-700-90: var(--color-orange-700-90);
    --alpha-orange-700-80: var(--color-orange-700-80);
    --alpha-orange-700-70: var(--color-orange-700-70);
    --alpha-orange-700-60: var(--color-orange-700-60);
    --alpha-orange-700-50: var(--color-orange-700-50);
    --alpha-orange-700-40: var(--color-orange-700-40);
    --alpha-orange-700-30: var(--color-orange-700-30);
    --alpha-orange-700-20: var(--color-orange-700-20);
    --alpha-orange-700-10: var(--color-orange-700-10);
    --alpha-orange-700-5: var(--color-orange-700-5);
    --alpha-orange-800-100: var(--color-orange-800-100);
    --alpha-orange-800-90: var(--color-orange-800-90);
    --alpha-orange-800-80: var(--color-orange-800-80);
    --alpha-orange-800-70: var(--color-orange-800-70);
    --alpha-orange-800-60: var(--color-orange-800-60);
    --alpha-orange-800-50: var(--color-orange-800-50);
    --alpha-orange-800-40: var(--color-orange-800-40);
    --alpha-orange-800-30: var(--color-orange-800-30);
    --alpha-orange-800-20: var(--color-orange-800-20);
    --alpha-orange-800-10: var(--color-orange-800-10);
    --alpha-orange-800-5: var(--color-orange-800-5);
    --alpha-orange-900-100: var(--color-orange-900-100);
    --alpha-orange-900-90: var(--color-orange-900-90);
    --alpha-orange-900-80: var(--color-orange-900-80);
    --alpha-orange-900-70: var(--color-orange-900-70);
    --alpha-orange-900-60: var(--color-orange-900-60);
    --alpha-orange-900-50: var(--color-orange-900-50);
    --alpha-orange-900-40: var(--color-orange-900-40);
    --alpha-orange-900-30: var(--color-orange-900-30);
    --alpha-orange-900-20: var(--color-orange-900-20);
    --alpha-orange-900-10: var(--color-orange-900-10);
    --alpha-orange-900-5: var(--color-orange-900-5);
    --alpha-orange-950-100: var(--color-orange-950-100);
    --alpha-orange-950-90: var(--color-orange-950-90);
    --alpha-orange-950-80: var(--color-orange-950-80);
    --alpha-orange-950-70: var(--color-orange-950-70);
    --alpha-orange-950-60: var(--color-orange-950-60);
    --alpha-orange-950-50: var(--color-orange-950-50);
    --alpha-orange-950-40: var(--color-orange-950-40);
    --alpha-orange-950-30: var(--color-orange-950-30);
    --alpha-orange-950-20: var(--color-orange-950-20);
    --alpha-orange-950-10: var(--color-orange-950-10);
    --alpha-orange-950-5: var(--color-orange-950-5);
    --utility-amber-50: var(--color-amber-50);
    --utility-amber-100: var(--color-amber-100);
    --utility-amber-200: var(--color-amber-200);
    --utility-amber-300: var(--color-amber-300);
    --utility-amber-400: var(--color-amber-400);
    --utility-amber-500: var(--color-amber-500);
    --utility-amber-600: var(--color-amber-600);
    --utility-amber-700: var(--color-amber-700);
    --utility-amber-800: var(--color-amber-800);
    --utility-amber-900: var(--color-amber-900);
    --utility-amber-950: var(--color-amber-950);
    --alpha-amber-50-100: var(--color-amber-50-100);
    --alpha-amber-50-90: var(--color-amber-50-90);
    --alpha-amber-50-80: var(--color-amber-50-80);
    --alpha-amber-50-70: var(--color-amber-50-70);
    --alpha-amber-50-60: var(--color-amber-50-60);
    --alpha-amber-50-50: var(--color-amber-50-50);
    --alpha-amber-50-40: var(--color-amber-50-40);
    --alpha-amber-50-30: var(--color-amber-50-30);
    --alpha-amber-50-20: var(--color-amber-50-20);
    --alpha-amber-50-10: var(--color-amber-50-10);
    --alpha-amber-50-5: var(--color-amber-50-5);
    --alpha-amber-100-100: var(--color-amber-100-100);
    --alpha-amber-100-90: var(--color-amber-100-90);
    --alpha-amber-100-80: var(--color-amber-100-80);
    --alpha-amber-100-70: var(--color-amber-100-70);
    --alpha-amber-100-60: var(--color-amber-100-60);
    --alpha-amber-100-50: var(--color-amber-100-50);
    --alpha-amber-100-40: var(--color-amber-100-40);
    --alpha-amber-100-30: var(--color-amber-100-30);
    --alpha-amber-100-20: var(--color-amber-100-20);
    --alpha-amber-100-10: var(--color-amber-100-10);
    --alpha-amber-100-5: var(--color-amber-100-5);
    --alpha-amber-200-100: var(--color-amber-200-100);
    --alpha-amber-200-90: var(--color-amber-200-90);
    --alpha-amber-200-80: var(--color-amber-200-80);
    --alpha-amber-200-70: var(--color-amber-200-70);
    --alpha-amber-200-60: var(--color-amber-200-60);
    --alpha-amber-200-50: var(--color-amber-200-50);
    --alpha-amber-200-40: var(--color-amber-200-40);
    --alpha-amber-200-30: var(--color-amber-200-30);
    --alpha-amber-200-20: var(--color-amber-200-20);
    --alpha-amber-200-10: var(--color-amber-200-10);
    --alpha-amber-200-5: var(--color-amber-200-5);
    --alpha-amber-300-100: var(--color-amber-300-100);
    --alpha-amber-300-90: var(--color-amber-300-90);
    --alpha-amber-300-80: var(--color-amber-300-80);
    --alpha-amber-300-70: var(--color-amber-300-70);
    --alpha-amber-300-60: var(--color-amber-300-60);
    --alpha-amber-300-50: var(--color-amber-300-50);
    --alpha-amber-300-40: var(--color-amber-300-40);
    --alpha-amber-300-30: var(--color-amber-300-30);
    --alpha-amber-300-20: var(--color-amber-300-20);
    --alpha-amber-300-10: var(--color-amber-300-10);
    --alpha-amber-300-5: var(--color-amber-300-5);
    --alpha-amber-400-100: var(--color-amber-400-100);
    --alpha-amber-400-90: var(--color-amber-400-90);
    --alpha-amber-400-80: var(--color-amber-400-80);
    --alpha-amber-400-70: var(--color-amber-400-70);
    --alpha-amber-400-60: var(--color-amber-400-60);
    --alpha-amber-400-50: var(--color-amber-400-50);
    --alpha-amber-400-40: var(--color-amber-400-40);
    --alpha-amber-400-30: var(--color-amber-400-30);
    --alpha-amber-400-20: var(--color-amber-400-20);
    --alpha-amber-400-10: var(--color-amber-400-10);
    --alpha-amber-400-5: var(--color-amber-400-5);
    --alpha-amber-500-100: var(--color-amber-500-100);
    --alpha-amber-500-90: var(--color-amber-500-90);
    --alpha-amber-500-80: var(--color-amber-500-80);
    --alpha-amber-500-70: var(--color-amber-500-70);
    --alpha-amber-500-60: var(--color-amber-500-60);
    --alpha-amber-500-50: var(--color-amber-500-50);
    --alpha-amber-500-40: var(--color-amber-500-40);
    --alpha-amber-500-30: var(--color-amber-500-30);
    --alpha-amber-500-20: var(--color-amber-500-20);
    --alpha-amber-500-10: var(--color-amber-500-10);
    --alpha-amber-500-5: var(--color-amber-500-5);
    --alpha-amber-600-100: var(--color-amber-600-100);
    --alpha-amber-600-90: var(--color-amber-600-90);
    --alpha-amber-600-80: var(--color-amber-600-80);
    --alpha-amber-600-70: var(--color-amber-600-70);
    --alpha-amber-600-60: var(--color-amber-600-60);
    --alpha-amber-600-50: var(--color-amber-600-50);
    --alpha-amber-600-40: var(--color-amber-600-40);
    --alpha-amber-600-30: var(--color-amber-600-30);
    --alpha-amber-600-20: var(--color-amber-600-20);
    --alpha-amber-600-10: var(--color-amber-600-10);
    --alpha-amber-600-5: var(--color-amber-600-5);
    --alpha-amber-700-100: var(--color-amber-700-100);
    --alpha-amber-700-90: var(--color-amber-700-90);
    --alpha-amber-700-80: var(--color-amber-700-80);
    --alpha-amber-700-70: var(--color-amber-700-70);
    --alpha-amber-700-60: var(--color-amber-700-60);
    --alpha-amber-700-50: var(--color-amber-700-50);
    --alpha-amber-700-40: var(--color-amber-700-40);
    --alpha-amber-700-30: var(--color-amber-700-30);
    --alpha-amber-700-20: var(--color-amber-700-20);
    --alpha-amber-700-10: var(--color-amber-700-10);
    --alpha-amber-700-5: var(--color-amber-700-5);
    --alpha-amber-800-100: var(--color-amber-800-100);
    --alpha-amber-800-90: var(--color-amber-800-90);
    --alpha-amber-800-80: var(--color-amber-800-80);
    --alpha-amber-800-70: var(--color-amber-800-70);
    --alpha-amber-800-60: var(--color-amber-800-60);
    --alpha-amber-800-50: var(--color-amber-800-50);
    --alpha-amber-800-40: var(--color-amber-800-40);
    --alpha-amber-800-30: var(--color-amber-800-30);
    --alpha-amber-800-20: var(--color-amber-800-20);
    --alpha-amber-800-10: var(--color-amber-800-10);
    --alpha-amber-800-5: var(--color-amber-800-5);
    --alpha-amber-900-100: var(--color-amber-900-100);
    --alpha-amber-900-90: var(--color-amber-900-90);
    --alpha-amber-900-80: var(--color-amber-900-80);
    --alpha-amber-900-70: var(--color-amber-900-70);
    --alpha-amber-900-60: var(--color-amber-900-60);
    --alpha-amber-900-50: var(--color-amber-900-50);
    --alpha-amber-900-40: var(--color-amber-900-40);
    --alpha-amber-900-30: var(--color-amber-900-30);
    --alpha-amber-900-20: var(--color-amber-900-20);
    --alpha-amber-900-10: var(--color-amber-900-10);
    --alpha-amber-900-5: var(--color-amber-900-5);
    --alpha-amber-950-100: var(--color-amber-950-100);
    --alpha-amber-950-90: var(--color-amber-950-90);
    --alpha-amber-950-80: var(--color-amber-950-80);
    --alpha-amber-950-70: var(--color-amber-950-70);
    --alpha-amber-950-60: var(--color-amber-950-60);
    --alpha-amber-950-50: var(--color-amber-950-50);
    --alpha-amber-950-40: var(--color-amber-950-40);
    --alpha-amber-950-30: var(--color-amber-950-30);
    --alpha-amber-950-20: var(--color-amber-950-20);
    --alpha-amber-950-10: var(--color-amber-950-10);
    --alpha-amber-950-5: var(--color-amber-950-5);
    --utility-yellow-50: var(--color-yellow-50);
    --utility-yellow-100: var(--color-yellow-100);
    --utility-yellow-200: var(--color-yellow-200);
    --utility-yellow-300: var(--color-yellow-300);
    --utility-yellow-400: var(--color-yellow-400);
    --utility-yellow-500: var(--color-yellow-500);
    --utility-yellow-600: var(--color-yellow-600);
    --utility-yellow-700: var(--color-yellow-700);
    --utility-yellow-800: var(--color-yellow-800);
    --utility-yellow-900: var(--color-yellow-900);
    --utility-yellow-950: var(--color-yellow-950);
    --alpha-yellow-50-100: var(--color-yellow-50-100);
    --alpha-yellow-50-90: var(--color-yellow-50-90);
    --alpha-yellow-50-80: var(--color-yellow-50-80);
    --alpha-yellow-50-70: var(--color-yellow-50-70);
    --alpha-yellow-50-60: var(--color-yellow-50-60);
    --alpha-yellow-50-50: var(--color-yellow-50-50);
    --alpha-yellow-50-40: var(--color-yellow-50-40);
    --alpha-yellow-50-30: var(--color-yellow-50-30);
    --alpha-yellow-50-20: var(--color-yellow-50-20);
    --alpha-yellow-50-10: var(--color-yellow-50-10);
    --alpha-yellow-50-5: var(--color-yellow-50-5);
    --alpha-yellow-100-100: var(--color-yellow-100-100);
    --alpha-yellow-100-90: var(--color-yellow-100-90);
    --alpha-yellow-100-80: var(--color-yellow-100-80);
    --alpha-yellow-100-70: var(--color-yellow-100-70);
    --alpha-yellow-100-60: var(--color-yellow-100-60);
    --alpha-yellow-100-50: var(--color-yellow-100-50);
    --alpha-yellow-100-40: var(--color-yellow-100-40);
    --alpha-yellow-100-30: var(--color-yellow-100-30);
    --alpha-yellow-100-20: var(--color-yellow-100-20);
    --alpha-yellow-100-10: var(--color-yellow-100-10);
    --alpha-yellow-100-5: var(--color-yellow-100-5);
    --alpha-yellow-200-100: var(--color-yellow-200-100);
    --alpha-yellow-200-90: var(--color-yellow-200-90);
    --alpha-yellow-200-80: var(--color-yellow-200-80);
    --alpha-yellow-200-70: var(--color-yellow-200-70);
    --alpha-yellow-200-60: var(--color-yellow-200-60);
    --alpha-yellow-200-50: var(--color-yellow-200-50);
    --alpha-yellow-200-40: var(--color-yellow-200-40);
    --alpha-yellow-200-30: var(--color-yellow-200-30);
    --alpha-yellow-200-20: var(--color-yellow-200-20);
    --alpha-yellow-200-10: var(--color-yellow-200-10);
    --alpha-yellow-200-5: var(--color-yellow-200-5);
    --alpha-yellow-300-100: var(--color-yellow-300-100);
    --alpha-yellow-300-90: var(--color-yellow-300-90);
    --alpha-yellow-300-80: var(--color-yellow-300-80);
    --alpha-yellow-300-70: var(--color-yellow-300-70);
    --alpha-yellow-300-60: var(--color-yellow-300-60);
    --alpha-yellow-300-50: var(--color-yellow-300-50);
    --alpha-yellow-300-40: var(--color-yellow-300-40);
    --alpha-yellow-300-30: var(--color-yellow-300-30);
    --alpha-yellow-300-20: var(--color-yellow-300-20);
    --alpha-yellow-300-10: var(--color-yellow-300-10);
    --alpha-yellow-300-5: var(--color-yellow-300-5);
    --alpha-yellow-400-100: var(--color-yellow-400-100);
    --alpha-yellow-400-90: var(--color-yellow-400-90);
    --alpha-yellow-400-80: var(--color-yellow-400-80);
    --alpha-yellow-400-70: var(--color-yellow-400-70);
    --alpha-yellow-400-60: var(--color-yellow-400-60);
    --alpha-yellow-400-50: var(--color-yellow-400-50);
    --alpha-yellow-400-40: var(--color-yellow-400-40);
    --alpha-yellow-400-30: var(--color-yellow-400-30);
    --alpha-yellow-400-20: var(--color-yellow-400-20);
    --alpha-yellow-400-10: var(--color-yellow-400-10);
    --alpha-yellow-400-5: var(--color-yellow-400-5);
    --alpha-yellow-500-100: var(--color-yellow-500-100);
    --alpha-yellow-500-90: var(--color-yellow-500-90);
    --alpha-yellow-500-80: var(--color-yellow-500-80);
    --alpha-yellow-500-70: var(--color-yellow-500-70);
    --alpha-yellow-500-60: var(--color-yellow-500-60);
    --alpha-yellow-500-50: var(--color-yellow-500-50);
    --alpha-yellow-500-40: var(--color-yellow-500-40);
    --alpha-yellow-500-30: var(--color-yellow-500-30);
    --alpha-yellow-500-20: var(--color-yellow-500-20);
    --alpha-yellow-500-10: var(--color-yellow-500-10);
    --alpha-yellow-500-5: var(--color-yellow-500-5);
    --alpha-yellow-600-100: var(--color-yellow-600-100);
    --alpha-yellow-600-90: var(--color-yellow-600-90);
    --alpha-yellow-600-80: var(--color-yellow-600-80);
    --alpha-yellow-600-70: var(--color-yellow-600-70);
    --alpha-yellow-600-60: var(--color-yellow-600-60);
    --alpha-yellow-600-50: var(--color-yellow-600-50);
    --alpha-yellow-600-40: var(--color-yellow-600-40);
    --alpha-yellow-600-30: var(--color-yellow-600-30);
    --alpha-yellow-600-20: var(--color-yellow-600-20);
    --alpha-yellow-600-10: var(--color-yellow-600-10);
    --alpha-yellow-600-5: var(--color-yellow-600-5);
    --alpha-yellow-700-100: var(--color-yellow-700-100);
    --alpha-yellow-700-90: var(--color-yellow-700-90);
    --alpha-yellow-700-80: var(--color-yellow-700-80);
    --alpha-yellow-700-70: var(--color-yellow-700-70);
    --alpha-yellow-700-60: var(--color-yellow-700-60);
    --alpha-yellow-700-50: var(--color-yellow-700-50);
    --alpha-yellow-700-40: var(--color-yellow-700-40);
    --alpha-yellow-700-30: var(--color-yellow-700-30);
    --alpha-yellow-700-20: var(--color-yellow-700-20);
    --alpha-yellow-700-10: var(--color-yellow-700-10);
    --alpha-yellow-700-5: var(--color-yellow-700-5);
    --alpha-yellow-800-100: var(--color-yellow-800-100);
    --alpha-yellow-800-90: var(--color-yellow-800-90);
    --alpha-yellow-800-80: var(--color-yellow-800-80);
    --alpha-yellow-800-70: var(--color-yellow-800-70);
    --alpha-yellow-800-60: var(--color-yellow-800-60);
    --alpha-yellow-800-50: var(--color-yellow-800-50);
    --alpha-yellow-800-40: var(--color-yellow-800-40);
    --alpha-yellow-800-30: var(--color-yellow-800-30);
    --alpha-yellow-800-20: var(--color-yellow-800-20);
    --alpha-yellow-800-10: var(--color-yellow-800-10);
    --alpha-yellow-800-5: var(--color-yellow-800-5);
    --alpha-yellow-900-100: var(--color-yellow-900-100);
    --alpha-yellow-900-90: var(--color-yellow-900-90);
    --alpha-yellow-900-80: var(--color-yellow-900-80);
    --alpha-yellow-900-70: var(--color-yellow-900-70);
    --alpha-yellow-900-60: var(--color-yellow-900-60);
    --alpha-yellow-900-50: var(--color-yellow-900-50);
    --alpha-yellow-900-40: var(--color-yellow-900-40);
    --alpha-yellow-900-30: var(--color-yellow-900-30);
    --alpha-yellow-900-20: var(--color-yellow-900-20);
    --alpha-yellow-900-10: var(--color-yellow-900-10);
    --alpha-yellow-900-5: var(--color-yellow-900-5);
    --alpha-yellow-950-100: var(--color-yellow-950-100);
    --alpha-yellow-950-90: var(--color-yellow-950-90);
    --alpha-yellow-950-80: var(--color-yellow-950-80);
    --alpha-yellow-950-70: var(--color-yellow-950-70);
    --alpha-yellow-950-60: var(--color-yellow-950-60);
    --alpha-yellow-950-50: var(--color-yellow-950-50);
    --alpha-yellow-950-40: var(--color-yellow-950-40);
    --alpha-yellow-950-30: var(--color-yellow-950-30);
    --alpha-yellow-950-20: var(--color-yellow-950-20);
    --alpha-yellow-950-10: var(--color-yellow-950-10);
    --alpha-yellow-950-5: var(--color-yellow-950-5);
    --utility-lime-50: var(--color-lime-50);
    --utility-lime-100: var(--color-lime-100);
    --utility-lime-200: var(--color-lime-200);
    --utility-lime-300: var(--color-lime-300);
    --utility-lime-400: var(--color-lime-400);
    --utility-lime-500: var(--color-lime-500);
    --utility-lime-600: var(--color-lime-600);
    --utility-lime-700: var(--color-lime-700);
    --utility-lime-800: var(--color-lime-800);
    --utility-lime-900: var(--color-lime-900);
    --utility-lime-950: var(--color-lime-950);
    --alpha-lime-50-100: var(--color-lime-50-100);
    --alpha-lime-50-90: var(--color-lime-50-90);
    --alpha-lime-50-80: var(--color-lime-50-80);
    --alpha-lime-50-70: var(--color-lime-50-70);
    --alpha-lime-50-60: var(--color-lime-50-60);
    --alpha-lime-50-50: var(--color-lime-50-50);
    --alpha-lime-50-40: var(--color-lime-50-40);
    --alpha-lime-50-30: var(--color-lime-50-30);
    --alpha-lime-50-20: var(--color-lime-50-20);
    --alpha-lime-50-10: var(--color-lime-50-10);
    --alpha-lime-50-5: var(--color-lime-50-5);
    --alpha-lime-100-100: var(--color-lime-100-100);
    --alpha-lime-100-90: var(--color-lime-100-90);
    --alpha-lime-100-80: var(--color-lime-100-80);
    --alpha-lime-100-70: var(--color-lime-100-70);
    --alpha-lime-100-60: var(--color-lime-100-60);
    --alpha-lime-100-50: var(--color-lime-100-50);
    --alpha-lime-100-40: var(--color-lime-100-40);
    --alpha-lime-100-30: var(--color-lime-100-30);
    --alpha-lime-100-20: var(--color-lime-100-20);
    --alpha-lime-100-10: var(--color-lime-100-10);
    --alpha-lime-100-5: var(--color-lime-100-5);
    --alpha-lime-200-100: var(--color-lime-200-100);
    --alpha-lime-200-90: var(--color-lime-200-90);
    --alpha-lime-200-80: var(--color-lime-200-80);
    --alpha-lime-200-70: var(--color-lime-200-70);
    --alpha-lime-200-60: var(--color-lime-200-60);
    --alpha-lime-200-50: var(--color-lime-200-50);
    --alpha-lime-200-40: var(--color-lime-200-40);
    --alpha-lime-200-30: var(--color-lime-200-30);
    --alpha-lime-200-20: var(--color-lime-200-20);
    --alpha-lime-200-10: var(--color-lime-200-10);
    --alpha-lime-200-5: var(--color-lime-200-5);
    --alpha-lime-300-100: var(--color-lime-300-100);
    --alpha-lime-300-90: var(--color-lime-300-90);
    --alpha-lime-300-80: var(--color-lime-300-80);
    --alpha-lime-300-70: var(--color-lime-300-70);
    --alpha-lime-300-60: var(--color-lime-300-60);
    --alpha-lime-300-50: var(--color-lime-300-50);
    --alpha-lime-300-40: var(--color-lime-300-40);
    --alpha-lime-300-30: var(--color-lime-300-30);
    --alpha-lime-300-20: var(--color-lime-300-20);
    --alpha-lime-300-10: var(--color-lime-300-10);
    --alpha-lime-300-5: var(--color-lime-300-5);
    --alpha-lime-400-100: var(--color-lime-400-100);
    --alpha-lime-400-90: var(--color-lime-400-90);
    --alpha-lime-400-80: var(--color-lime-400-80);
    --alpha-lime-400-70: var(--color-lime-400-70);
    --alpha-lime-400-60: var(--color-lime-400-60);
    --alpha-lime-400-50: var(--color-lime-400-50);
    --alpha-lime-400-40: var(--color-lime-400-40);
    --alpha-lime-400-30: var(--color-lime-400-30);
    --alpha-lime-400-20: var(--color-lime-400-20);
    --alpha-lime-400-10: var(--color-lime-400-10);
    --alpha-lime-400-5: var(--color-lime-400-5);
    --alpha-lime-500-100: var(--color-lime-500-100);
    --alpha-lime-500-90: var(--color-lime-500-90);
    --alpha-lime-500-80: var(--color-lime-500-80);
    --alpha-lime-500-70: var(--color-lime-500-70);
    --alpha-lime-500-60: var(--color-lime-500-60);
    --alpha-lime-500-50: var(--color-lime-500-50);
    --alpha-lime-500-40: var(--color-lime-500-40);
    --alpha-lime-500-30: var(--color-lime-500-30);
    --alpha-lime-500-20: var(--color-lime-500-20);
    --alpha-lime-500-10: var(--color-lime-500-10);
    --alpha-lime-500-5: var(--color-lime-500-5);
    --alpha-lime-600-100: var(--color-lime-600-100);
    --alpha-lime-600-90: var(--color-lime-600-90);
    --alpha-lime-600-80: var(--color-lime-600-80);
    --alpha-lime-600-70: var(--color-lime-600-70);
    --alpha-lime-600-60: var(--color-lime-600-60);
    --alpha-lime-600-50: var(--color-lime-600-50);
    --alpha-lime-600-40: var(--color-lime-600-40);
    --alpha-lime-600-30: var(--color-lime-600-30);
    --alpha-lime-600-20: var(--color-lime-600-20);
    --alpha-lime-600-10: var(--color-lime-600-10);
    --alpha-lime-600-5: var(--color-lime-600-5);
    --alpha-lime-700-100: var(--color-lime-700-100);
    --alpha-lime-700-90: var(--color-lime-700-90);
    --alpha-lime-700-80: var(--color-lime-700-80);
    --alpha-lime-700-70: var(--color-lime-700-70);
    --alpha-lime-700-60: var(--color-lime-700-60);
    --alpha-lime-700-50: var(--color-lime-700-50);
    --alpha-lime-700-40: var(--color-lime-700-40);
    --alpha-lime-700-30: var(--color-lime-700-30);
    --alpha-lime-700-20: var(--color-lime-700-20);
    --alpha-lime-700-10: var(--color-lime-700-10);
    --alpha-lime-700-5: var(--color-lime-700-5);
    --alpha-lime-800-100: var(--color-lime-800-100);
    --alpha-lime-800-90: var(--color-lime-800-90);
    --alpha-lime-800-80: var(--color-lime-800-80);
    --alpha-lime-800-70: var(--color-lime-800-70);
    --alpha-lime-800-60: var(--color-lime-800-60);
    --alpha-lime-800-50: var(--color-lime-800-50);
    --alpha-lime-800-40: var(--color-lime-800-40);
    --alpha-lime-800-30: var(--color-lime-800-30);
    --alpha-lime-800-20: var(--color-lime-800-20);
    --alpha-lime-800-10: var(--color-lime-800-10);
    --alpha-lime-800-5: var(--color-lime-800-5);
    --alpha-lime-900-100: var(--color-lime-900-100);
    --alpha-lime-900-90: var(--color-lime-900-90);
    --alpha-lime-900-80: var(--color-lime-900-80);
    --alpha-lime-900-70: var(--color-lime-900-70);
    --alpha-lime-900-60: var(--color-lime-900-60);
    --alpha-lime-900-50: var(--color-lime-900-50);
    --alpha-lime-900-40: var(--color-lime-900-40);
    --alpha-lime-900-30: var(--color-lime-900-30);
    --alpha-lime-900-20: var(--color-lime-900-20);
    --alpha-lime-900-10: var(--color-lime-900-10);
    --alpha-lime-900-5: var(--color-lime-900-5);
    --alpha-lime-950-100: var(--color-lime-950-100);
    --alpha-lime-950-90: var(--color-lime-950-90);
    --alpha-lime-950-80: var(--color-lime-950-80);
    --alpha-lime-950-70: var(--color-lime-950-70);
    --alpha-lime-950-60: var(--color-lime-950-60);
    --alpha-lime-950-50: var(--color-lime-950-50);
    --alpha-lime-950-40: var(--color-lime-950-40);
    --alpha-lime-950-30: var(--color-lime-950-30);
    --alpha-lime-950-20: var(--color-lime-950-20);
    --alpha-lime-950-10: var(--color-lime-950-10);
    --alpha-lime-950-5: var(--color-lime-950-5);
    --utility-green-50: var(--color-green-50);
    --utility-green-100: var(--color-green-100);
    --utility-green-200: var(--color-green-200);
    --utility-green-300: var(--color-green-300);
    --utility-green-400: var(--color-green-400);
    --utility-green-500: var(--color-green-500);
    --utility-green-600: var(--color-green-600);
    --utility-green-700: var(--color-green-700);
    --utility-green-800: var(--color-green-800);
    --utility-green-900: var(--color-green-900);
    --utility-green-950: var(--color-green-950);
    --alpha-green-50-100: var(--color-green-50-100);
    --alpha-green-50-90: var(--color-green-50-90);
    --alpha-green-50-80: var(--color-green-50-80);
    --alpha-green-50-70: var(--color-green-50-70);
    --alpha-green-50-60: var(--color-green-50-60);
    --alpha-green-50-50: var(--color-green-50-50);
    --alpha-green-50-40: var(--color-green-50-40);
    --alpha-green-50-30: var(--color-green-50-30);
    --alpha-green-50-20: var(--color-green-50-20);
    --alpha-green-50-10: var(--color-green-50-10);
    --alpha-green-50-5: var(--color-green-50-5);
    --alpha-green-100-100: var(--color-green-100-100);
    --alpha-green-100-90: var(--color-green-100-90);
    --alpha-green-100-80: var(--color-green-100-80);
    --alpha-green-100-70: var(--color-green-100-70);
    --alpha-green-100-60: var(--color-green-100-60);
    --alpha-green-100-50: var(--color-green-100-50);
    --alpha-green-100-40: var(--color-green-100-40);
    --alpha-green-100-30: var(--color-green-100-30);
    --alpha-green-100-20: var(--color-green-100-20);
    --alpha-green-100-10: var(--color-green-100-10);
    --alpha-green-100-5: var(--color-green-100-5);
    --alpha-green-200-100: var(--color-green-200-100);
    --alpha-green-200-90: var(--color-green-200-90);
    --alpha-green-200-80: var(--color-green-200-80);
    --alpha-green-200-70: var(--color-green-200-70);
    --alpha-green-200-60: var(--color-green-200-60);
    --alpha-green-200-50: var(--color-green-200-50);
    --alpha-green-200-40: var(--color-green-200-40);
    --alpha-green-200-30: var(--color-green-200-30);
    --alpha-green-200-20: var(--color-green-200-20);
    --alpha-green-200-10: var(--color-green-200-10);
    --alpha-green-200-5: var(--color-green-200-5);
    --alpha-green-300-100: var(--color-green-300-100);
    --alpha-green-300-90: var(--color-green-300-90);
    --alpha-green-300-80: var(--color-green-300-80);
    --alpha-green-300-70: var(--color-green-300-70);
    --alpha-green-300-60: var(--color-green-300-60);
    --alpha-green-300-50: var(--color-green-300-50);
    --alpha-green-300-40: var(--color-green-300-40);
    --alpha-green-300-30: var(--color-green-300-30);
    --alpha-green-300-20: var(--color-green-300-20);
    --alpha-green-300-10: var(--color-green-300-10);
    --alpha-green-300-5: var(--color-green-300-5);
    --alpha-green-400-100: var(--color-green-400-100);
    --alpha-green-400-90: var(--color-green-400-90);
    --alpha-green-400-80: var(--color-green-400-80);
    --alpha-green-400-70: var(--color-green-400-70);
    --alpha-green-400-60: var(--color-green-400-60);
    --alpha-green-400-50: var(--color-green-400-50);
    --alpha-green-400-40: var(--color-green-400-40);
    --alpha-green-400-30: var(--color-green-400-30);
    --alpha-green-400-20: var(--color-green-400-20);
    --alpha-green-400-10: var(--color-green-400-10);
    --alpha-green-400-5: var(--color-green-400-5);
    --alpha-green-500-100: var(--color-green-500-100);
    --alpha-green-500-90: var(--color-green-500-90);
    --alpha-green-500-80: var(--color-green-500-80);
    --alpha-green-500-70: var(--color-green-500-70);
    --alpha-green-500-60: var(--color-green-500-60);
    --alpha-green-500-50: var(--color-green-500-50);
    --alpha-green-500-40: var(--color-green-500-40);
    --alpha-green-500-30: var(--color-green-500-30);
    --alpha-green-500-20: var(--color-green-500-20);
    --alpha-green-500-10: var(--color-green-500-10);
    --alpha-green-500-5: var(--color-green-500-5);
    --alpha-green-600-100: var(--color-green-600-100);
    --alpha-green-600-90: var(--color-green-600-90);
    --alpha-green-600-80: var(--color-green-600-80);
    --alpha-green-600-70: var(--color-green-600-70);
    --alpha-green-600-60: var(--color-green-600-60);
    --alpha-green-600-50: var(--color-green-600-50);
    --alpha-green-600-40: var(--color-green-600-40);
    --alpha-green-600-30: var(--color-green-600-30);
    --alpha-green-600-20: var(--color-green-600-20);
    --alpha-green-600-10: var(--color-green-600-10);
    --alpha-green-600-5: var(--color-green-600-5);
    --alpha-green-700-100: var(--color-green-700-100);
    --alpha-green-700-90: var(--color-green-700-90);
    --alpha-green-700-80: var(--color-green-700-80);
    --alpha-green-700-70: var(--color-green-700-70);
    --alpha-green-700-60: var(--color-green-700-60);
    --alpha-green-700-50: var(--color-green-700-50);
    --alpha-green-700-40: var(--color-green-700-40);
    --alpha-green-700-30: var(--color-green-700-30);
    --alpha-green-700-20: var(--color-green-700-20);
    --alpha-green-700-10: var(--color-green-700-10);
    --alpha-green-700-5: var(--color-green-700-5);
    --alpha-green-800-100: var(--color-green-800-100);
    --alpha-green-800-90: var(--color-green-800-90);
    --alpha-green-800-80: var(--color-green-800-80);
    --alpha-green-800-70: var(--color-green-800-70);
    --alpha-green-800-60: var(--color-green-800-60);
    --alpha-green-800-50: var(--color-green-800-50);
    --alpha-green-800-40: var(--color-green-800-40);
    --alpha-green-800-30: var(--color-green-800-30);
    --alpha-green-800-20: var(--color-green-800-20);
    --alpha-green-800-10: var(--color-green-800-10);
    --alpha-green-800-5: var(--color-green-800-5);
    --alpha-green-900-100: var(--color-green-900-100);
    --alpha-green-900-90: var(--color-green-900-90);
    --alpha-green-900-80: var(--color-green-900-80);
    --alpha-green-900-70: var(--color-green-900-70);
    --alpha-green-900-60: var(--color-green-900-60);
    --alpha-green-900-50: var(--color-green-900-50);
    --alpha-green-900-40: var(--color-green-900-40);
    --alpha-green-900-30: var(--color-green-900-30);
    --alpha-green-900-20: var(--color-green-900-20);
    --alpha-green-900-10: var(--color-green-900-10);
    --alpha-green-900-5: var(--color-green-900-5);
    --alpha-green-950-100: var(--color-green-950-100);
    --alpha-green-950-90: var(--color-green-950-90);
    --alpha-green-950-80: var(--color-green-950-80);
    --alpha-green-950-70: var(--color-green-950-70);
    --alpha-green-950-60: var(--color-green-950-60);
    --alpha-green-950-50: var(--color-green-950-50);
    --alpha-green-950-40: var(--color-green-950-40);
    --alpha-green-950-30: var(--color-green-950-30);
    --alpha-green-950-20: var(--color-green-950-20);
    --alpha-green-950-10: var(--color-green-950-10);
    --alpha-green-950-5: var(--color-green-950-5);
    --utility-emerald-50: var(--color-emerald-50);
    --utility-emerald-100: var(--color-emerald-100);
    --utility-emerald-200: var(--color-emerald-200);
    --utility-emerald-300: var(--color-emerald-300);
    --utility-emerald-400: var(--color-emerald-400);
    --utility-emerald-500: var(--color-emerald-500);
    --utility-emerald-600: var(--color-emerald-600);
    --utility-emerald-700: var(--color-emerald-700);
    --utility-emerald-800: var(--color-emerald-800);
    --utility-emerald-900: var(--color-emerald-900);
    --utility-emerald-950: var(--color-emerald-950);
    --alpha-emerald-50-100: var(--color-emerald-50-100);
    --alpha-emerald-50-90: var(--color-emerald-50-90);
    --alpha-emerald-50-80: var(--color-emerald-50-80);
    --alpha-emerald-50-70: var(--color-emerald-50-70);
    --alpha-emerald-50-60: var(--color-emerald-50-60);
    --alpha-emerald-50-50: var(--color-emerald-50-50);
    --alpha-emerald-50-40: var(--color-emerald-50-40);
    --alpha-emerald-50-30: var(--color-emerald-50-30);
    --alpha-emerald-50-20: var(--color-emerald-50-20);
    --alpha-emerald-50-10: var(--color-emerald-50-10);
    --alpha-emerald-50-5: var(--color-emerald-50-5);
    --alpha-emerald-100-100: var(--color-emerald-100-100);
    --alpha-emerald-100-90: var(--color-emerald-100-90);
    --alpha-emerald-100-80: var(--color-emerald-100-80);
    --alpha-emerald-100-70: var(--color-emerald-100-70);
    --alpha-emerald-100-60: var(--color-emerald-100-60);
    --alpha-emerald-100-50: var(--color-emerald-100-50);
    --alpha-emerald-100-40: var(--color-emerald-100-40);
    --alpha-emerald-100-30: var(--color-emerald-100-30);
    --alpha-emerald-100-20: var(--color-emerald-100-20);
    --alpha-emerald-100-10: var(--color-emerald-100-10);
    --alpha-emerald-100-5: var(--color-emerald-100-5);
    --alpha-emerald-200-100: var(--color-emerald-200-100);
    --alpha-emerald-200-90: var(--color-emerald-200-90);
    --alpha-emerald-200-80: var(--color-emerald-200-80);
    --alpha-emerald-200-70: var(--color-emerald-200-70);
    --alpha-emerald-200-60: var(--color-emerald-200-60);
    --alpha-emerald-200-50: var(--color-emerald-200-50);
    --alpha-emerald-200-40: var(--color-emerald-200-40);
    --alpha-emerald-200-30: var(--color-emerald-200-30);
    --alpha-emerald-200-20: var(--color-emerald-200-20);
    --alpha-emerald-200-10: var(--color-emerald-200-10);
    --alpha-emerald-200-5: var(--color-emerald-200-5);
    --alpha-emerald-300-100: var(--color-emerald-300-100);
    --alpha-emerald-300-90: var(--color-emerald-300-90);
    --alpha-emerald-300-80: var(--color-emerald-300-80);
    --alpha-emerald-300-70: var(--color-emerald-300-70);
    --alpha-emerald-300-60: var(--color-emerald-300-60);
    --alpha-emerald-300-50: var(--color-emerald-300-50);
    --alpha-emerald-300-40: var(--color-emerald-300-40);
    --alpha-emerald-300-30: var(--color-emerald-300-30);
    --alpha-emerald-300-20: var(--color-emerald-300-20);
    --alpha-emerald-300-10: var(--color-emerald-300-10);
    --alpha-emerald-300-5: var(--color-emerald-300-5);
    --alpha-emerald-400-100: var(--color-emerald-400-100);
    --alpha-emerald-400-90: var(--color-emerald-400-90);
    --alpha-emerald-400-80: var(--color-emerald-400-80);
    --alpha-emerald-400-70: var(--color-emerald-400-70);
    --alpha-emerald-400-60: var(--color-emerald-400-60);
    --alpha-emerald-400-50: var(--color-emerald-400-50);
    --alpha-emerald-400-40: var(--color-emerald-400-40);
    --alpha-emerald-400-30: var(--color-emerald-400-30);
    --alpha-emerald-400-20: var(--color-emerald-400-20);
    --alpha-emerald-400-10: var(--color-emerald-400-10);
    --alpha-emerald-400-5: var(--color-emerald-400-5);
    --alpha-emerald-500-100: var(--color-emerald-500-100);
    --alpha-emerald-500-90: var(--color-emerald-500-90);
    --alpha-emerald-500-80: var(--color-emerald-500-80);
    --alpha-emerald-500-70: var(--color-emerald-500-70);
    --alpha-emerald-500-60: var(--color-emerald-500-60);
    --alpha-emerald-500-50: var(--color-emerald-500-50);
    --alpha-emerald-500-40: var(--color-emerald-500-40);
    --alpha-emerald-500-30: var(--color-emerald-500-30);
    --alpha-emerald-500-20: var(--color-emerald-500-20);
    --alpha-emerald-500-10: var(--color-emerald-500-10);
    --alpha-emerald-500-5: var(--color-emerald-500-5);
    --alpha-emerald-600-100: var(--color-emerald-600-100);
    --alpha-emerald-600-90: var(--color-emerald-600-90);
    --alpha-emerald-600-80: var(--color-emerald-600-80);
    --alpha-emerald-600-70: var(--color-emerald-600-70);
    --alpha-emerald-600-60: var(--color-emerald-600-60);
    --alpha-emerald-600-50: var(--color-emerald-600-50);
    --alpha-emerald-600-40: var(--color-emerald-600-40);
    --alpha-emerald-600-30: var(--color-emerald-600-30);
    --alpha-emerald-600-20: var(--color-emerald-600-20);
    --alpha-emerald-600-10: var(--color-emerald-600-10);
    --alpha-emerald-600-5: var(--color-emerald-600-5);
    --alpha-emerald-700-100: var(--color-emerald-700-100);
    --alpha-emerald-700-90: var(--color-emerald-700-90);
    --alpha-emerald-700-80: var(--color-emerald-700-80);
    --alpha-emerald-700-70: var(--color-emerald-700-70);
    --alpha-emerald-700-60: var(--color-emerald-700-60);
    --alpha-emerald-700-50: var(--color-emerald-700-50);
    --alpha-emerald-700-40: var(--color-emerald-700-40);
    --alpha-emerald-700-30: var(--color-emerald-700-30);
    --alpha-emerald-700-20: var(--color-emerald-700-20);
    --alpha-emerald-700-10: var(--color-emerald-700-10);
    --alpha-emerald-700-5: var(--color-emerald-700-5);
    --alpha-emerald-800-100: var(--color-emerald-800-100);
    --alpha-emerald-800-90: var(--color-emerald-800-90);
    --alpha-emerald-800-80: var(--color-emerald-800-80);
    --alpha-emerald-800-70: var(--color-emerald-800-70);
    --alpha-emerald-800-60: var(--color-emerald-800-60);
    --alpha-emerald-800-50: var(--color-emerald-800-50);
    --alpha-emerald-800-40: var(--color-emerald-800-40);
    --alpha-emerald-800-30: var(--color-emerald-800-30);
    --alpha-emerald-800-20: var(--color-emerald-800-20);
    --alpha-emerald-800-10: var(--color-emerald-800-10);
    --alpha-emerald-800-5: var(--color-emerald-800-5);
    --alpha-emerald-900-100: var(--color-emerald-900-100);
    --alpha-emerald-900-90: var(--color-emerald-900-90);
    --alpha-emerald-900-80: var(--color-emerald-900-80);
    --alpha-emerald-900-70: var(--color-emerald-900-70);
    --alpha-emerald-900-60: var(--color-emerald-900-60);
    --alpha-emerald-900-50: var(--color-emerald-900-50);
    --alpha-emerald-900-40: var(--color-emerald-900-40);
    --alpha-emerald-900-30: var(--color-emerald-900-30);
    --alpha-emerald-900-20: var(--color-emerald-900-20);
    --alpha-emerald-900-10: var(--color-emerald-900-10);
    --alpha-emerald-900-5: var(--color-emerald-900-5);
    --alpha-emerald-950-100: var(--color-emerald-950-100);
    --alpha-emerald-950-90: var(--color-emerald-950-90);
    --alpha-emerald-950-80: var(--color-emerald-950-80);
    --alpha-emerald-950-70: var(--color-emerald-950-70);
    --alpha-emerald-950-60: var(--color-emerald-950-60);
    --alpha-emerald-950-50: var(--color-emerald-950-50);
    --alpha-emerald-950-40: var(--color-emerald-950-40);
    --alpha-emerald-950-30: var(--color-emerald-950-30);
    --alpha-emerald-950-20: var(--color-emerald-950-20);
    --alpha-emerald-950-10: var(--color-emerald-950-10);
    --alpha-emerald-950-5: var(--color-emerald-950-5);
    --utility-teal-50: var(--color-teal-50);
    --utility-teal-100: var(--color-teal-100);
    --utility-teal-200: var(--color-teal-200);
    --utility-teal-300: var(--color-teal-300);
    --utility-teal-400: var(--color-teal-400);
    --utility-teal-500: var(--color-teal-500);
    --utility-teal-600: var(--color-teal-600);
    --utility-teal-700: var(--color-teal-700);
    --utility-teal-800: var(--color-teal-800);
    --utility-teal-900: var(--color-teal-900);
    --utility-teal-950: var(--color-teal-950);
    --alpha-teal-50-100: var(--color-teal-50-100);
    --alpha-teal-50-90: var(--color-teal-50-90);
    --alpha-teal-50-80: var(--color-teal-50-80);
    --alpha-teal-50-70: var(--color-teal-50-70);
    --alpha-teal-50-60: var(--color-teal-50-60);
    --alpha-teal-50-50: var(--color-teal-50-50);
    --alpha-teal-50-40: var(--color-teal-50-40);
    --alpha-teal-50-30: var(--color-teal-50-30);
    --alpha-teal-50-20: var(--color-teal-50-20);
    --alpha-teal-50-10: var(--color-teal-50-10);
    --alpha-teal-50-5: var(--color-teal-50-5);
    --alpha-teal-100-100: var(--color-teal-100-100);
    --alpha-teal-100-90: var(--color-teal-100-90);
    --alpha-teal-100-80: var(--color-teal-100-80);
    --alpha-teal-100-70: var(--color-teal-100-70);
    --alpha-teal-100-60: var(--color-teal-100-60);
    --alpha-teal-100-50: var(--color-teal-100-50);
    --alpha-teal-100-40: var(--color-teal-100-40);
    --alpha-teal-100-30: var(--color-teal-100-30);
    --alpha-teal-100-20: var(--color-teal-100-20);
    --alpha-teal-100-10: var(--color-teal-100-10);
    --alpha-teal-100-5: var(--color-teal-100-5);
    --alpha-teal-200-100: var(--color-teal-200-100);
    --alpha-teal-200-90: var(--color-teal-200-90);
    --alpha-teal-200-80: var(--color-teal-200-80);
    --alpha-teal-200-70: var(--color-teal-200-70);
    --alpha-teal-200-60: var(--color-teal-200-60);
    --alpha-teal-200-50: var(--color-teal-200-50);
    --alpha-teal-200-40: var(--color-teal-200-40);
    --alpha-teal-200-30: var(--color-teal-200-30);
    --alpha-teal-200-20: var(--color-teal-200-20);
    --alpha-teal-200-10: var(--color-teal-200-10);
    --alpha-teal-200-5: var(--color-teal-200-5);
    --alpha-teal-300-100: var(--color-teal-300-100);
    --alpha-teal-300-90: var(--color-teal-300-90);
    --alpha-teal-300-80: var(--color-teal-300-80);
    --alpha-teal-300-70: var(--color-teal-300-70);
    --alpha-teal-300-60: var(--color-teal-300-60);
    --alpha-teal-300-50: var(--color-teal-300-50);
    --alpha-teal-300-40: var(--color-teal-300-40);
    --alpha-teal-300-30: var(--color-teal-300-30);
    --alpha-teal-300-20: var(--color-teal-300-20);
    --alpha-teal-300-10: var(--color-teal-300-10);
    --alpha-teal-300-5: var(--color-teal-300-5);
    --alpha-teal-400-100: var(--color-teal-400-100);
    --alpha-teal-400-90: var(--color-teal-400-90);
    --alpha-teal-400-80: var(--color-teal-400-80);
    --alpha-teal-400-70: var(--color-teal-400-70);
    --alpha-teal-400-60: var(--color-teal-400-60);
    --alpha-teal-400-50: var(--color-teal-400-50);
    --alpha-teal-400-40: var(--color-teal-400-40);
    --alpha-teal-400-30: var(--color-teal-400-30);
    --alpha-teal-400-20: var(--color-teal-400-20);
    --alpha-teal-400-10: var(--color-teal-400-10);
    --alpha-teal-400-5: var(--color-teal-400-5);
    --alpha-teal-500-100: var(--color-teal-500-100);
    --alpha-teal-500-90: var(--color-teal-500-90);
    --alpha-teal-500-80: var(--color-teal-500-80);
    --alpha-teal-500-70: var(--color-teal-500-70);
    --alpha-teal-500-60: var(--color-teal-500-60);
    --alpha-teal-500-50: var(--color-teal-500-50);
    --alpha-teal-500-40: var(--color-teal-500-40);
    --alpha-teal-500-30: var(--color-teal-500-30);
    --alpha-teal-500-20: var(--color-teal-500-20);
    --alpha-teal-500-10: var(--color-teal-500-10);
    --alpha-teal-500-5: var(--color-teal-500-5);
    --alpha-teal-600-100: var(--color-teal-600-100);
    --alpha-teal-600-90: var(--color-teal-600-90);
    --alpha-teal-600-80: var(--color-teal-600-80);
    --alpha-teal-600-70: var(--color-teal-600-70);
    --alpha-teal-600-60: var(--color-teal-600-60);
    --alpha-teal-600-50: var(--color-teal-600-50);
    --alpha-teal-600-40: var(--color-teal-600-40);
    --alpha-teal-600-30: var(--color-teal-600-30);
    --alpha-teal-600-20: var(--color-teal-600-20);
    --alpha-teal-600-10: var(--color-teal-600-10);
    --alpha-teal-600-5: var(--color-teal-600-5);
    --alpha-teal-700-100: var(--color-teal-700-100);
    --alpha-teal-700-90: var(--color-teal-700-90);
    --alpha-teal-700-80: var(--color-teal-700-80);
    --alpha-teal-700-70: var(--color-teal-700-70);
    --alpha-teal-700-60: var(--color-teal-700-60);
    --alpha-teal-700-50: var(--color-teal-700-50);
    --alpha-teal-700-40: var(--color-teal-700-40);
    --alpha-teal-700-30: var(--color-teal-700-30);
    --alpha-teal-700-20: var(--color-teal-700-20);
    --alpha-teal-700-10: var(--color-teal-700-10);
    --alpha-teal-700-5: var(--color-teal-700-5);
    --alpha-teal-800-100: var(--color-teal-800-100);
    --alpha-teal-800-90: var(--color-teal-800-90);
    --alpha-teal-800-80: var(--color-teal-800-80);
    --alpha-teal-800-70: var(--color-teal-800-70);
    --alpha-teal-800-60: var(--color-teal-800-60);
    --alpha-teal-800-50: var(--color-teal-800-50);
    --alpha-teal-800-40: var(--color-teal-800-40);
    --alpha-teal-800-30: var(--color-teal-800-30);
    --alpha-teal-800-20: var(--color-teal-800-20);
    --alpha-teal-800-10: var(--color-teal-800-10);
    --alpha-teal-800-5: var(--color-teal-800-5);
    --alpha-teal-900-100: var(--color-teal-900-100);
    --alpha-teal-900-90: var(--color-teal-900-90);
    --alpha-teal-900-80: var(--color-teal-900-80);
    --alpha-teal-900-70: var(--color-teal-900-70);
    --alpha-teal-900-60: var(--color-teal-900-60);
    --alpha-teal-900-50: var(--color-teal-900-50);
    --alpha-teal-900-40: var(--color-teal-900-40);
    --alpha-teal-900-30: var(--color-teal-900-30);
    --alpha-teal-900-20: var(--color-teal-900-20);
    --alpha-teal-900-10: var(--color-teal-900-10);
    --alpha-teal-900-5: var(--color-teal-900-5);
    --alpha-teal-950-100: var(--color-teal-950-100);
    --alpha-teal-950-90: var(--color-teal-950-90);
    --alpha-teal-950-80: var(--color-teal-950-80);
    --alpha-teal-950-70: var(--color-teal-950-70);
    --alpha-teal-950-60: var(--color-teal-950-60);
    --alpha-teal-950-50: var(--color-teal-950-50);
    --alpha-teal-950-40: var(--color-teal-950-40);
    --alpha-teal-950-30: var(--color-teal-950-30);
    --alpha-teal-950-20: var(--color-teal-950-20);
    --alpha-teal-950-10: var(--color-teal-950-10);
    --alpha-teal-950-5: var(--color-teal-950-5);
    --utility-cyan-50: var(--color-cyan-50);
    --utility-cyan-100: var(--color-cyan-100);
    --utility-cyan-200: var(--color-cyan-200);
    --utility-cyan-300: var(--color-cyan-300);
    --utility-cyan-400: var(--color-cyan-400);
    --utility-cyan-500: var(--color-cyan-500);
    --utility-cyan-600: var(--color-cyan-600);
    --utility-cyan-700: var(--color-cyan-700);
    --utility-cyan-800: var(--color-cyan-800);
    --utility-cyan-900: var(--color-cyan-900);
    --utility-cyan-950: var(--color-cyan-950);
    --alpha-cyan-50-100: var(--color-cyan-50-100);
    --alpha-cyan-50-90: var(--color-cyan-50-90);
    --alpha-cyan-50-80: var(--color-cyan-50-80);
    --alpha-cyan-50-70: var(--color-cyan-50-70);
    --alpha-cyan-50-60: var(--color-cyan-50-60);
    --alpha-cyan-50-50: var(--color-cyan-50-50);
    --alpha-cyan-50-40: var(--color-cyan-50-40);
    --alpha-cyan-50-30: var(--color-cyan-50-30);
    --alpha-cyan-50-20: var(--color-cyan-50-20);
    --alpha-cyan-50-10: var(--color-cyan-50-10);
    --alpha-cyan-50-5: var(--color-cyan-50-5);
    --alpha-cyan-100-100: var(--color-cyan-100-100);
    --alpha-cyan-100-90: var(--color-cyan-100-90);
    --alpha-cyan-100-80: var(--color-cyan-100-80);
    --alpha-cyan-100-70: var(--color-cyan-100-70);
    --alpha-cyan-100-60: var(--color-cyan-100-60);
    --alpha-cyan-100-50: var(--color-cyan-100-50);
    --alpha-cyan-100-40: var(--color-cyan-100-40);
    --alpha-cyan-100-30: var(--color-cyan-100-30);
    --alpha-cyan-100-20: var(--color-cyan-100-20);
    --alpha-cyan-100-10: var(--color-cyan-100-10);
    --alpha-cyan-100-5: var(--color-cyan-100-5);
    --alpha-cyan-200-100: var(--color-cyan-200-100);
    --alpha-cyan-200-90: var(--color-cyan-200-90);
    --alpha-cyan-200-80: var(--color-cyan-200-80);
    --alpha-cyan-200-70: var(--color-cyan-200-70);
    --alpha-cyan-200-60: var(--color-cyan-200-60);
    --alpha-cyan-200-50: var(--color-cyan-200-50);
    --alpha-cyan-200-40: var(--color-cyan-200-40);
    --alpha-cyan-200-30: var(--color-cyan-200-30);
    --alpha-cyan-200-20: var(--color-cyan-200-20);
    --alpha-cyan-200-10: var(--color-cyan-200-10);
    --alpha-cyan-200-5: var(--color-cyan-200-5);
    --alpha-cyan-300-100: var(--color-cyan-300-100);
    --alpha-cyan-300-90: var(--color-cyan-300-90);
    --alpha-cyan-300-80: var(--color-cyan-300-80);
    --alpha-cyan-300-70: var(--color-cyan-300-70);
    --alpha-cyan-300-60: var(--color-cyan-300-60);
    --alpha-cyan-300-50: var(--color-cyan-300-50);
    --alpha-cyan-300-40: var(--color-cyan-300-40);
    --alpha-cyan-300-30: var(--color-cyan-300-30);
    --alpha-cyan-300-20: var(--color-cyan-300-20);
    --alpha-cyan-300-10: var(--color-cyan-300-10);
    --alpha-cyan-300-5: var(--color-cyan-300-5);
    --alpha-cyan-400-100: var(--color-cyan-400-100);
    --alpha-cyan-400-90: var(--color-cyan-400-90);
    --alpha-cyan-400-80: var(--color-cyan-400-80);
    --alpha-cyan-400-70: var(--color-cyan-400-70);
    --alpha-cyan-400-60: var(--color-cyan-400-60);
    --alpha-cyan-400-50: var(--color-cyan-400-50);
    --alpha-cyan-400-40: var(--color-cyan-400-40);
    --alpha-cyan-400-30: var(--color-cyan-400-30);
    --alpha-cyan-400-20: var(--color-cyan-400-20);
    --alpha-cyan-400-10: var(--color-cyan-400-10);
    --alpha-cyan-400-5: var(--color-cyan-400-5);
    --alpha-cyan-500-100: var(--color-cyan-500-100);
    --alpha-cyan-500-90: var(--color-cyan-500-90);
    --alpha-cyan-500-80: var(--color-cyan-500-80);
    --alpha-cyan-500-70: var(--color-cyan-500-70);
    --alpha-cyan-500-60: var(--color-cyan-500-60);
    --alpha-cyan-500-50: var(--color-cyan-500-50);
    --alpha-cyan-500-40: var(--color-cyan-500-40);
    --alpha-cyan-500-30: var(--color-cyan-500-30);
    --alpha-cyan-500-20: var(--color-cyan-500-20);
    --alpha-cyan-500-10: var(--color-cyan-500-10);
    --alpha-cyan-500-5: var(--color-cyan-500-5);
    --alpha-cyan-600-100: var(--color-cyan-600-100);
    --alpha-cyan-600-90: var(--color-cyan-600-90);
    --alpha-cyan-600-80: var(--color-cyan-600-80);
    --alpha-cyan-600-70: var(--color-cyan-600-70);
    --alpha-cyan-600-60: var(--color-cyan-600-60);
    --alpha-cyan-600-50: var(--color-cyan-600-50);
    --alpha-cyan-600-40: var(--color-cyan-600-40);
    --alpha-cyan-600-30: var(--color-cyan-600-30);
    --alpha-cyan-600-20: var(--color-cyan-600-20);
    --alpha-cyan-600-10: var(--color-cyan-600-10);
    --alpha-cyan-600-5: var(--color-cyan-600-5);
    --alpha-cyan-700-100: var(--color-cyan-700-100);
    --alpha-cyan-700-90: var(--color-cyan-700-90);
    --alpha-cyan-700-80: var(--color-cyan-700-80);
    --alpha-cyan-700-70: var(--color-cyan-700-70);
    --alpha-cyan-700-60: var(--color-cyan-700-60);
    --alpha-cyan-700-50: var(--color-cyan-700-50);
    --alpha-cyan-700-40: var(--color-cyan-700-40);
    --alpha-cyan-700-30: var(--color-cyan-700-30);
    --alpha-cyan-700-20: var(--color-cyan-700-20);
    --alpha-cyan-700-10: var(--color-cyan-700-10);
    --alpha-cyan-700-5: var(--color-cyan-700-5);
    --alpha-cyan-800-100: var(--color-cyan-800-100);
    --alpha-cyan-800-90: var(--color-cyan-800-90);
    --alpha-cyan-800-80: var(--color-cyan-800-80);
    --alpha-cyan-800-70: var(--color-cyan-800-70);
    --alpha-cyan-800-60: var(--color-cyan-800-60);
    --alpha-cyan-800-50: var(--color-cyan-800-50);
    --alpha-cyan-800-40: var(--color-cyan-800-40);
    --alpha-cyan-800-30: var(--color-cyan-800-30);
    --alpha-cyan-800-20: var(--color-cyan-800-20);
    --alpha-cyan-800-10: var(--color-cyan-800-10);
    --alpha-cyan-800-5: var(--color-cyan-800-5);
    --alpha-cyan-900-100: var(--color-cyan-900-100);
    --alpha-cyan-900-90: var(--color-cyan-900-90);
    --alpha-cyan-900-80: var(--color-cyan-900-80);
    --alpha-cyan-900-70: var(--color-cyan-900-70);
    --alpha-cyan-900-60: var(--color-cyan-900-60);
    --alpha-cyan-900-50: var(--color-cyan-900-50);
    --alpha-cyan-900-40: var(--color-cyan-900-40);
    --alpha-cyan-900-30: var(--color-cyan-900-30);
    --alpha-cyan-900-20: var(--color-cyan-900-20);
    --alpha-cyan-900-10: var(--color-cyan-900-10);
    --alpha-cyan-900-5: var(--color-cyan-900-5);
    --alpha-cyan-950-100: var(--color-cyan-950-100);
    --alpha-cyan-950-90: var(--color-cyan-950-90);
    --alpha-cyan-950-80: var(--color-cyan-950-80);
    --alpha-cyan-950-70: var(--color-cyan-950-70);
    --alpha-cyan-950-60: var(--color-cyan-950-60);
    --alpha-cyan-950-50: var(--color-cyan-950-50);
    --alpha-cyan-950-40: var(--color-cyan-950-40);
    --alpha-cyan-950-30: var(--color-cyan-950-30);
    --alpha-cyan-950-20: var(--color-cyan-950-20);
    --alpha-cyan-950-10: var(--color-cyan-950-10);
    --alpha-cyan-950-5: var(--color-cyan-950-5);
    --utility-mint-50: var(--color-mint-50);
    --utility-mint-100: var(--color-mint-100);
    --utility-mint-200: var(--color-mint-200);
    --utility-mint-300: var(--color-mint-300);
    --utility-mint-400: var(--color-mint-400);
    --utility-mint-500: var(--color-mint-500);
    --utility-mint-600: var(--color-mint-600);
    --utility-mint-700: var(--color-mint-700);
    --utility-mint-800: var(--color-mint-800);
    --utility-mint-900: var(--color-mint-900);
    --utility-mint-950: var(--color-mint-950);
    --alpha-mint-50-100: var(--color-mint-50-100);
    --alpha-mint-50-90: var(--color-mint-50-90);
    --alpha-mint-50-80: var(--color-mint-50-80);
    --alpha-mint-50-70: var(--color-mint-50-70);
    --alpha-mint-50-60: var(--color-mint-50-60);
    --alpha-mint-50-50: var(--color-mint-50-50);
    --alpha-mint-50-40: var(--color-mint-50-40);
    --alpha-mint-50-30: var(--color-mint-50-30);
    --alpha-mint-50-20: var(--color-mint-50-20);
    --alpha-mint-50-10: var(--color-mint-50-10);
    --alpha-mint-50-5: var(--color-mint-50-5);
    --alpha-mint-100-100: var(--color-mint-100-100);
    --alpha-mint-100-90: var(--color-mint-100-90);
    --alpha-mint-100-80: var(--color-mint-100-80);
    --alpha-mint-100-70: var(--color-mint-100-70);
    --alpha-mint-100-60: var(--color-mint-100-60);
    --alpha-mint-100-50: var(--color-mint-100-50);
    --alpha-mint-100-40: var(--color-mint-100-40);
    --alpha-mint-100-30: var(--color-mint-100-30);
    --alpha-mint-100-20: var(--color-mint-100-20);
    --alpha-mint-100-10: var(--color-mint-100-10);
    --alpha-mint-100-5: var(--color-mint-100-5);
    --alpha-mint-200-100: var(--color-mint-200-100);
    --alpha-mint-200-90: var(--color-mint-200-90);
    --alpha-mint-200-80: var(--color-mint-200-80);
    --alpha-mint-200-70: var(--color-mint-200-70);
    --alpha-mint-200-60: var(--color-mint-200-60);
    --alpha-mint-200-50: var(--color-mint-200-50);
    --alpha-mint-200-40: var(--color-mint-200-40);
    --alpha-mint-200-30: var(--color-mint-200-30);
    --alpha-mint-200-20: var(--color-mint-200-20);
    --alpha-mint-200-10: var(--color-mint-200-10);
    --alpha-mint-200-5: var(--color-mint-200-5);
    --alpha-mint-300-100: var(--color-mint-300-100);
    --alpha-mint-300-90: var(--color-mint-300-90);
    --alpha-mint-300-80: var(--color-mint-300-80);
    --alpha-mint-300-70: var(--color-mint-300-70);
    --alpha-mint-300-60: var(--color-mint-300-60);
    --alpha-mint-300-50: var(--color-mint-300-50);
    --alpha-mint-300-40: var(--color-mint-300-40);
    --alpha-mint-300-30: var(--color-mint-300-30);
    --alpha-mint-300-20: var(--color-mint-300-20);
    --alpha-mint-300-10: var(--color-mint-300-10);
    --alpha-mint-300-5: var(--color-mint-300-5);
    --alpha-mint-400-100: var(--color-mint-400-100);
    --alpha-mint-400-90: var(--color-mint-400-90);
    --alpha-mint-400-80: var(--color-mint-400-80);
    --alpha-mint-400-70: var(--color-mint-400-70);
    --alpha-mint-400-60: var(--color-mint-400-60);
    --alpha-mint-400-50: var(--color-mint-400-50);
    --alpha-mint-400-40: var(--color-mint-400-40);
    --alpha-mint-400-30: var(--color-mint-400-30);
    --alpha-mint-400-20: var(--color-mint-400-20);
    --alpha-mint-400-10: var(--color-mint-400-10);
    --alpha-mint-400-5: var(--color-mint-400-5);
    --alpha-mint-500-100: var(--color-mint-500-100);
    --alpha-mint-500-90: var(--color-mint-500-90);
    --alpha-mint-500-80: var(--color-mint-500-80);
    --alpha-mint-500-70: var(--color-mint-500-70);
    --alpha-mint-500-60: var(--color-mint-500-60);
    --alpha-mint-500-50: var(--color-mint-500-50);
    --alpha-mint-500-40: var(--color-mint-500-40);
    --alpha-mint-500-30: var(--color-mint-500-30);
    --alpha-mint-500-20: var(--color-mint-500-20);
    --alpha-mint-500-10: var(--color-mint-500-10);
    --alpha-mint-500-5: var(--color-mint-500-5);
    --alpha-mint-600-100: var(--color-mint-600-100);
    --alpha-mint-600-90: var(--color-mint-600-90);
    --alpha-mint-600-80: var(--color-mint-600-80);
    --alpha-mint-600-70: var(--color-mint-600-70);
    --alpha-mint-600-60: var(--color-mint-600-60);
    --alpha-mint-600-50: var(--color-mint-600-50);
    --alpha-mint-600-40: var(--color-mint-600-40);
    --alpha-mint-600-30: var(--color-mint-600-30);
    --alpha-mint-600-20: var(--color-mint-600-20);
    --alpha-mint-600-10: var(--color-mint-600-10);
    --alpha-mint-600-5: var(--color-mint-600-5);
    --alpha-mint-700-100: var(--color-mint-700-100);
    --alpha-mint-700-90: var(--color-mint-700-90);
    --alpha-mint-700-80: var(--color-mint-700-80);
    --alpha-mint-700-70: var(--color-mint-700-70);
    --alpha-mint-700-60: var(--color-mint-700-60);
    --alpha-mint-700-50: var(--color-mint-700-50);
    --alpha-mint-700-40: var(--color-mint-700-40);
    --alpha-mint-700-30: var(--color-mint-700-30);
    --alpha-mint-700-20: var(--color-mint-700-20);
    --alpha-mint-700-10: var(--color-mint-700-10);
    --alpha-mint-700-5: var(--color-mint-700-5);
    --alpha-mint-800-100: var(--color-mint-800-100);
    --alpha-mint-800-90: var(--color-mint-800-90);
    --alpha-mint-800-80: var(--color-mint-800-80);
    --alpha-mint-800-70: var(--color-mint-800-70);
    --alpha-mint-800-60: var(--color-mint-800-60);
    --alpha-mint-800-50: var(--color-mint-800-50);
    --alpha-mint-800-40: var(--color-mint-800-40);
    --alpha-mint-800-30: var(--color-mint-800-30);
    --alpha-mint-800-20: var(--color-mint-800-20);
    --alpha-mint-800-10: var(--color-mint-800-10);
    --alpha-mint-800-5: var(--color-mint-800-5);
    --alpha-mint-900-100: var(--color-mint-900-100);
    --alpha-mint-900-90: var(--color-mint-900-90);
    --alpha-mint-900-80: var(--color-mint-900-80);
    --alpha-mint-900-70: var(--color-mint-900-70);
    --alpha-mint-900-60: var(--color-mint-900-60);
    --alpha-mint-900-50: var(--color-mint-900-50);
    --alpha-mint-900-40: var(--color-mint-900-40);
    --alpha-mint-900-30: var(--color-mint-900-30);
    --alpha-mint-900-20: var(--color-mint-900-20);
    --alpha-mint-900-10: var(--color-mint-900-10);
    --alpha-mint-900-5: var(--color-mint-900-5);
    --alpha-mint-950-100: var(--color-mint-950-100);
    --alpha-mint-950-90: var(--color-mint-950-90);
    --alpha-mint-950-80: var(--color-mint-950-80);
    --alpha-mint-950-70: var(--color-mint-950-70);
    --alpha-mint-950-60: var(--color-mint-950-60);
    --alpha-mint-950-50: var(--color-mint-950-50);
    --alpha-mint-950-40: var(--color-mint-950-40);
    --alpha-mint-950-30: var(--color-mint-950-30);
    --alpha-mint-950-20: var(--color-mint-950-20);
    --alpha-mint-950-10: var(--color-mint-950-10);
    --alpha-mint-950-5: var(--color-mint-950-5);
    --utility-sky-50: var(--color-sky-50);
    --utility-sky-100: var(--color-sky-100);
    --utility-sky-200: var(--color-sky-200);
    --utility-sky-300: var(--color-sky-300);
    --utility-sky-400: var(--color-sky-400);
    --utility-sky-500: var(--color-sky-500);
    --utility-sky-600: var(--color-sky-600);
    --utility-sky-700: var(--color-sky-700);
    --utility-sky-800: var(--color-sky-800);
    --utility-sky-900: var(--color-sky-900);
    --utility-sky-950: var(--color-sky-950);
    --alpha-sky-50-100: var(--color-sky-50-100);
    --alpha-sky-50-90: var(--color-sky-50-90);
    --alpha-sky-50-80: var(--color-sky-50-80);
    --alpha-sky-50-70: var(--color-sky-50-70);
    --alpha-sky-50-60: var(--color-sky-50-60);
    --alpha-sky-50-50: var(--color-sky-50-50);
    --alpha-sky-50-40: var(--color-sky-50-40);
    --alpha-sky-50-30: var(--color-sky-50-30);
    --alpha-sky-50-20: var(--color-sky-50-20);
    --alpha-sky-50-10: var(--color-sky-50-10);
    --alpha-sky-50-5: var(--color-sky-50-5);
    --alpha-sky-100-100: var(--color-sky-100-100);
    --alpha-sky-100-90: var(--color-sky-100-90);
    --alpha-sky-100-80: var(--color-sky-100-80);
    --alpha-sky-100-70: var(--color-sky-100-70);
    --alpha-sky-100-60: var(--color-sky-100-60);
    --alpha-sky-100-50: var(--color-sky-100-50);
    --alpha-sky-100-40: var(--color-sky-100-40);
    --alpha-sky-100-30: var(--color-sky-100-30);
    --alpha-sky-100-20: var(--color-sky-100-20);
    --alpha-sky-100-10: var(--color-sky-100-10);
    --alpha-sky-100-5: var(--color-sky-100-5);
    --alpha-sky-200-100: var(--color-sky-200-100);
    --alpha-sky-200-90: var(--color-sky-200-90);
    --alpha-sky-200-80: var(--color-sky-200-80);
    --alpha-sky-200-70: var(--color-sky-200-70);
    --alpha-sky-200-60: var(--color-sky-200-60);
    --alpha-sky-200-50: var(--color-sky-200-50);
    --alpha-sky-200-40: var(--color-sky-200-40);
    --alpha-sky-200-30: var(--color-sky-200-30);
    --alpha-sky-200-20: var(--color-sky-200-20);
    --alpha-sky-200-10: var(--color-sky-200-10);
    --alpha-sky-200-5: var(--color-sky-200-5);
    --alpha-sky-300-100: var(--color-sky-300-100);
    --alpha-sky-300-90: var(--color-sky-300-90);
    --alpha-sky-300-80: var(--color-sky-300-80);
    --alpha-sky-300-70: var(--color-sky-300-70);
    --alpha-sky-300-60: var(--color-sky-300-60);
    --alpha-sky-300-50: var(--color-sky-300-50);
    --alpha-sky-300-40: var(--color-sky-300-40);
    --alpha-sky-300-30: var(--color-sky-300-30);
    --alpha-sky-300-20: var(--color-sky-300-20);
    --alpha-sky-300-10: var(--color-sky-300-10);
    --alpha-sky-300-5: var(--color-sky-300-5);
    --alpha-sky-400-100: var(--color-sky-400-100);
    --alpha-sky-400-90: var(--color-sky-400-90);
    --alpha-sky-400-80: var(--color-sky-400-80);
    --alpha-sky-400-70: var(--color-sky-400-70);
    --alpha-sky-400-60: var(--color-sky-400-60);
    --alpha-sky-400-50: var(--color-sky-400-50);
    --alpha-sky-400-40: var(--color-sky-400-40);
    --alpha-sky-400-30: var(--color-sky-400-30);
    --alpha-sky-400-20: var(--color-sky-400-20);
    --alpha-sky-400-10: var(--color-sky-400-10);
    --alpha-sky-400-5: var(--color-sky-400-5);
    --alpha-sky-500-100: var(--color-sky-500-100);
    --alpha-sky-500-90: var(--color-sky-500-90);
    --alpha-sky-500-80: var(--color-sky-500-80);
    --alpha-sky-500-70: var(--color-sky-500-70);
    --alpha-sky-500-60: var(--color-sky-500-60);
    --alpha-sky-500-50: var(--color-sky-500-50);
    --alpha-sky-500-40: var(--color-sky-500-40);
    --alpha-sky-500-30: var(--color-sky-500-30);
    --alpha-sky-500-20: var(--color-sky-500-20);
    --alpha-sky-500-10: var(--color-sky-500-10);
    --alpha-sky-500-5: var(--color-sky-500-5);
    --alpha-sky-600-100: var(--color-sky-600-100);
    --alpha-sky-600-90: var(--color-sky-600-90);
    --alpha-sky-600-80: var(--color-sky-600-80);
    --alpha-sky-600-70: var(--color-sky-600-70);
    --alpha-sky-600-60: var(--color-sky-600-60);
    --alpha-sky-600-50: var(--color-sky-600-50);
    --alpha-sky-600-40: var(--color-sky-600-40);
    --alpha-sky-600-30: var(--color-sky-600-30);
    --alpha-sky-600-20: var(--color-sky-600-20);
    --alpha-sky-600-10: var(--color-sky-600-10);
    --alpha-sky-600-5: var(--color-sky-600-5);
    --alpha-sky-700-100: var(--color-sky-700-100);
    --alpha-sky-700-90: var(--color-sky-700-90);
    --alpha-sky-700-80: var(--color-sky-700-80);
    --alpha-sky-700-70: var(--color-sky-700-70);
    --alpha-sky-700-60: var(--color-sky-700-60);
    --alpha-sky-700-50: var(--color-sky-700-50);
    --alpha-sky-700-40: var(--color-sky-700-40);
    --alpha-sky-700-30: var(--color-sky-700-30);
    --alpha-sky-700-20: var(--color-sky-700-20);
    --alpha-sky-700-10: var(--color-sky-700-10);
    --alpha-sky-700-5: var(--color-sky-700-5);
    --alpha-sky-800-100: var(--color-sky-800-100);
    --alpha-sky-800-90: var(--color-sky-800-90);
    --alpha-sky-800-80: var(--color-sky-800-80);
    --alpha-sky-800-70: var(--color-sky-800-70);
    --alpha-sky-800-60: var(--color-sky-800-60);
    --alpha-sky-800-50: var(--color-sky-800-50);
    --alpha-sky-800-40: var(--color-sky-800-40);
    --alpha-sky-800-30: var(--color-sky-800-30);
    --alpha-sky-800-20: var(--color-sky-800-20);
    --alpha-sky-800-10: var(--color-sky-800-10);
    --alpha-sky-800-5: var(--color-sky-800-5);
    --alpha-sky-900-100: var(--color-sky-900-100);
    --alpha-sky-900-90: var(--color-sky-900-90);
    --alpha-sky-900-80: var(--color-sky-900-80);
    --alpha-sky-900-70: var(--color-sky-900-70);
    --alpha-sky-900-60: var(--color-sky-900-60);
    --alpha-sky-900-50: var(--color-sky-900-50);
    --alpha-sky-900-40: var(--color-sky-900-40);
    --alpha-sky-900-30: var(--color-sky-900-30);
    --alpha-sky-900-20: var(--color-sky-900-20);
    --alpha-sky-900-10: var(--color-sky-900-10);
    --alpha-sky-900-5: var(--color-sky-900-5);
    --alpha-sky-950-100: var(--color-sky-950-100);
    --alpha-sky-950-90: var(--color-sky-950-90);
    --alpha-sky-950-80: var(--color-sky-950-80);
    --alpha-sky-950-70: var(--color-sky-950-70);
    --alpha-sky-950-60: var(--color-sky-950-60);
    --alpha-sky-950-50: var(--color-sky-950-50);
    --alpha-sky-950-40: var(--color-sky-950-40);
    --alpha-sky-950-30: var(--color-sky-950-30);
    --alpha-sky-950-20: var(--color-sky-950-20);
    --alpha-sky-950-10: var(--color-sky-950-10);
    --alpha-sky-950-5: var(--color-sky-950-5);
    --utility-blue-50: var(--color-blue-50);
    --utility-blue-100: var(--color-blue-100);
    --utility-blue-200: var(--color-blue-200);
    --utility-blue-300: var(--color-blue-300);
    --utility-blue-400: var(--color-blue-400);
    --utility-blue-500: var(--color-blue-500);
    --utility-blue-600: var(--color-blue-600);
    --utility-blue-700: var(--color-blue-700);
    --utility-blue-800: var(--color-blue-800);
    --utility-blue-900: var(--color-blue-900);
    --utility-blue-950: var(--color-blue-950);
    --alpha-blue-50-100: var(--color-blue-50-100);
    --alpha-blue-50-90: var(--color-blue-50-90);
    --alpha-blue-50-80: var(--color-blue-50-80);
    --alpha-blue-50-70: var(--color-blue-50-70);
    --alpha-blue-50-60: var(--color-blue-50-60);
    --alpha-blue-50-50: var(--color-blue-50-50);
    --alpha-blue-50-40: var(--color-blue-50-40);
    --alpha-blue-50-30: var(--color-blue-50-30);
    --alpha-blue-50-20: var(--color-blue-50-20);
    --alpha-blue-50-10: var(--color-blue-50-10);
    --alpha-blue-50-5: var(--color-blue-50-5);
    --alpha-blue-100-100: var(--color-blue-100-100);
    --alpha-blue-100-90: var(--color-blue-100-90);
    --alpha-blue-100-80: var(--color-blue-100-80);
    --alpha-blue-100-70: var(--color-blue-100-70);
    --alpha-blue-100-60: var(--color-blue-100-60);
    --alpha-blue-100-50: var(--color-blue-100-50);
    --alpha-blue-100-40: var(--color-blue-100-40);
    --alpha-blue-100-30: var(--color-blue-100-30);
    --alpha-blue-100-20: var(--color-blue-100-20);
    --alpha-blue-100-10: var(--color-blue-100-10);
    --alpha-blue-100-5: var(--color-blue-100-5);
    --alpha-blue-200-100: var(--color-blue-200-100);
    --alpha-blue-200-90: var(--color-blue-200-90);
    --alpha-blue-200-80: var(--color-blue-200-80);
    --alpha-blue-200-70: var(--color-blue-200-70);
    --alpha-blue-200-60: var(--color-blue-200-60);
    --alpha-blue-200-50: var(--color-blue-200-50);
    --alpha-blue-200-40: var(--color-blue-200-40);
    --alpha-blue-200-30: var(--color-blue-200-30);
    --alpha-blue-200-20: var(--color-blue-200-20);
    --alpha-blue-200-10: var(--color-blue-200-10);
    --alpha-blue-200-5: var(--color-blue-200-5);
    --alpha-blue-300-100: var(--color-blue-300-100);
    --alpha-blue-300-90: var(--color-blue-300-90);
    --alpha-blue-300-80: var(--color-blue-300-80);
    --alpha-blue-300-70: var(--color-blue-300-70);
    --alpha-blue-300-60: var(--color-blue-300-60);
    --alpha-blue-300-50: var(--color-blue-300-50);
    --alpha-blue-300-40: var(--color-blue-300-40);
    --alpha-blue-300-30: var(--color-blue-300-30);
    --alpha-blue-300-20: var(--color-blue-300-20);
    --alpha-blue-300-10: var(--color-blue-300-10);
    --alpha-blue-300-5: var(--color-blue-300-5);
    --alpha-blue-400-100: var(--color-blue-400-100);
    --alpha-blue-400-90: var(--color-blue-400-90);
    --alpha-blue-400-80: var(--color-blue-400-80);
    --alpha-blue-400-70: var(--color-blue-400-70);
    --alpha-blue-400-60: var(--color-blue-400-60);
    --alpha-blue-400-50: var(--color-blue-400-50);
    --alpha-blue-400-40: var(--color-blue-400-40);
    --alpha-blue-400-30: var(--color-blue-400-30);
    --alpha-blue-400-20: var(--color-blue-400-20);
    --alpha-blue-400-10: var(--color-blue-400-10);
    --alpha-blue-400-5: var(--color-blue-400-5);
    --alpha-blue-500-100: var(--color-blue-500-100);
    --alpha-blue-500-90: var(--color-blue-500-90);
    --alpha-blue-500-80: var(--color-blue-500-80);
    --alpha-blue-500-70: var(--color-blue-500-70);
    --alpha-blue-500-60: var(--color-blue-500-60);
    --alpha-blue-500-50: var(--color-blue-500-50);
    --alpha-blue-500-40: var(--color-blue-500-40);
    --alpha-blue-500-30: var(--color-blue-500-30);
    --alpha-blue-500-20: var(--color-blue-500-20);
    --alpha-blue-500-10: var(--color-blue-500-10);
    --alpha-blue-500-5: var(--color-blue-500-5);
    --alpha-blue-600-100: var(--color-blue-600-100);
    --alpha-blue-600-90: var(--color-blue-600-90);
    --alpha-blue-600-80: var(--color-blue-600-80);
    --alpha-blue-600-70: var(--color-blue-600-70);
    --alpha-blue-600-60: var(--color-blue-600-60);
    --alpha-blue-600-50: var(--color-blue-600-50);
    --alpha-blue-600-40: var(--color-blue-600-40);
    --alpha-blue-600-30: var(--color-blue-600-30);
    --alpha-blue-600-20: var(--color-blue-600-20);
    --alpha-blue-600-10: var(--color-blue-600-10);
    --alpha-blue-600-5: var(--color-blue-600-5);
    --alpha-blue-700-100: var(--color-blue-700-100);
    --alpha-blue-700-90: var(--color-blue-700-90);
    --alpha-blue-700-80: var(--color-blue-700-80);
    --alpha-blue-700-70: var(--color-blue-700-70);
    --alpha-blue-700-60: var(--color-blue-700-60);
    --alpha-blue-700-50: var(--color-blue-700-50);
    --alpha-blue-700-40: var(--color-blue-700-40);
    --alpha-blue-700-30: var(--color-blue-700-30);
    --alpha-blue-700-20: var(--color-blue-700-20);
    --alpha-blue-700-10: var(--color-blue-700-10);
    --alpha-blue-700-5: var(--color-blue-700-5);
    --alpha-blue-800-100: var(--color-blue-800-100);
    --alpha-blue-800-90: var(--color-blue-800-90);
    --alpha-blue-800-80: var(--color-blue-800-80);
    --alpha-blue-800-70: var(--color-blue-800-70);
    --alpha-blue-800-60: var(--color-blue-800-60);
    --alpha-blue-800-50: var(--color-blue-800-50);
    --alpha-blue-800-40: var(--color-blue-800-40);
    --alpha-blue-800-30: var(--color-blue-800-30);
    --alpha-blue-800-20: var(--color-blue-800-20);
    --alpha-blue-800-10: var(--color-blue-800-10);
    --alpha-blue-800-5: var(--color-blue-800-5);
    --alpha-blue-900-100: var(--color-blue-900-100);
    --alpha-blue-900-90: var(--color-blue-900-90);
    --alpha-blue-900-80: var(--color-blue-900-80);
    --alpha-blue-900-70: var(--color-blue-900-70);
    --alpha-blue-900-60: var(--color-blue-900-60);
    --alpha-blue-900-50: var(--color-blue-900-50);
    --alpha-blue-900-40: var(--color-blue-900-40);
    --alpha-blue-900-30: var(--color-blue-900-30);
    --alpha-blue-900-20: var(--color-blue-900-20);
    --alpha-blue-900-10: var(--color-blue-900-10);
    --alpha-blue-900-5: var(--color-blue-900-5);
    --alpha-blue-950-100: var(--color-blue-950-100);
    --alpha-blue-950-90: var(--color-blue-950-90);
    --alpha-blue-950-80: var(--color-blue-950-80);
    --alpha-blue-950-70: var(--color-blue-950-70);
    --alpha-blue-950-60: var(--color-blue-950-60);
    --alpha-blue-950-50: var(--color-blue-950-50);
    --alpha-blue-950-40: var(--color-blue-950-40);
    --alpha-blue-950-30: var(--color-blue-950-30);
    --alpha-blue-950-20: var(--color-blue-950-20);
    --alpha-blue-950-10: var(--color-blue-950-10);
    --alpha-blue-950-5: var(--color-blue-950-5);
    --utility-indigo-50: var(--color-indigo-50);
    --utility-indigo-100: var(--color-indigo-100);
    --utility-indigo-200: var(--color-indigo-200);
    --utility-indigo-300: var(--color-indigo-300);
    --utility-indigo-400: var(--color-indigo-400);
    --utility-indigo-500: var(--color-indigo-500);
    --utility-indigo-600: var(--color-indigo-600);
    --utility-indigo-700: var(--color-indigo-700);
    --utility-indigo-800: var(--color-indigo-800);
    --utility-indigo-900: var(--color-indigo-900);
    --utility-indigo-950: var(--color-indigo-950);
    --alpha-indigo-50-100: var(--color-indigo-50-100);
    --alpha-indigo-50-90: var(--color-indigo-50-90);
    --alpha-indigo-50-80: var(--color-indigo-50-80);
    --alpha-indigo-50-70: var(--color-indigo-50-70);
    --alpha-indigo-50-60: var(--color-indigo-50-60);
    --alpha-indigo-50-50: var(--color-indigo-50-50);
    --alpha-indigo-50-40: var(--color-indigo-50-40);
    --alpha-indigo-50-30: var(--color-indigo-50-30);
    --alpha-indigo-50-20: var(--color-indigo-50-20);
    --alpha-indigo-50-10: var(--color-indigo-50-10);
    --alpha-indigo-50-5: var(--color-indigo-50-5);
    --alpha-indigo-100-100: var(--color-indigo-100-100);
    --alpha-indigo-100-90: var(--color-indigo-100-90);
    --alpha-indigo-100-80: var(--color-indigo-100-80);
    --alpha-indigo-100-70: var(--color-indigo-100-70);
    --alpha-indigo-100-60: var(--color-indigo-100-60);
    --alpha-indigo-100-50: var(--color-indigo-100-50);
    --alpha-indigo-100-40: var(--color-indigo-100-40);
    --alpha-indigo-100-30: var(--color-indigo-100-30);
    --alpha-indigo-100-20: var(--color-indigo-100-20);
    --alpha-indigo-100-10: var(--color-indigo-100-10);
    --alpha-indigo-100-5: var(--color-indigo-100-5);
    --alpha-indigo-200-100: var(--color-indigo-200-100);
    --alpha-indigo-200-90: var(--color-indigo-200-90);
    --alpha-indigo-200-80: var(--color-indigo-200-80);
    --alpha-indigo-200-70: var(--color-indigo-200-70);
    --alpha-indigo-200-60: var(--color-indigo-200-60);
    --alpha-indigo-200-50: var(--color-indigo-200-50);
    --alpha-indigo-200-40: var(--color-indigo-200-40);
    --alpha-indigo-200-30: var(--color-indigo-200-30);
    --alpha-indigo-200-20: var(--color-indigo-200-20);
    --alpha-indigo-200-10: var(--color-indigo-200-10);
    --alpha-indigo-200-5: var(--color-indigo-200-5);
    --alpha-indigo-300-100: var(--color-indigo-300-100);
    --alpha-indigo-300-90: var(--color-indigo-300-90);
    --alpha-indigo-300-80: var(--color-indigo-300-80);
    --alpha-indigo-300-70: var(--color-indigo-300-70);
    --alpha-indigo-300-60: var(--color-indigo-300-60);
    --alpha-indigo-300-50: var(--color-indigo-300-50);
    --alpha-indigo-300-40: var(--color-indigo-300-40);
    --alpha-indigo-300-30: var(--color-indigo-300-30);
    --alpha-indigo-300-20: var(--color-indigo-300-20);
    --alpha-indigo-300-10: var(--color-indigo-300-10);
    --alpha-indigo-300-5: var(--color-indigo-300-5);
    --alpha-indigo-400-100: var(--color-indigo-400-100);
    --alpha-indigo-400-90: var(--color-indigo-400-90);
    --alpha-indigo-400-80: var(--color-indigo-400-80);
    --alpha-indigo-400-70: var(--color-indigo-400-70);
    --alpha-indigo-400-60: var(--color-indigo-400-60);
    --alpha-indigo-400-50: var(--color-indigo-400-50);
    --alpha-indigo-400-40: var(--color-indigo-400-40);
    --alpha-indigo-400-30: var(--color-indigo-400-30);
    --alpha-indigo-400-20: var(--color-indigo-400-20);
    --alpha-indigo-400-10: var(--color-indigo-400-10);
    --alpha-indigo-400-5: var(--color-indigo-400-5);
    --alpha-indigo-500-100: var(--color-indigo-500-100);
    --alpha-indigo-500-90: var(--color-indigo-500-90);
    --alpha-indigo-500-80: var(--color-indigo-500-80);
    --alpha-indigo-500-70: var(--color-indigo-500-70);
    --alpha-indigo-500-60: var(--color-indigo-500-60);
    --alpha-indigo-500-50: var(--color-indigo-500-50);
    --alpha-indigo-500-40: var(--color-indigo-500-40);
    --alpha-indigo-500-30: var(--color-indigo-500-30);
    --alpha-indigo-500-20: var(--color-indigo-500-20);
    --alpha-indigo-500-10: var(--color-indigo-500-10);
    --alpha-indigo-500-5: var(--color-indigo-500-5);
    --alpha-indigo-600-100: var(--color-indigo-600-100);
    --alpha-indigo-600-90: var(--color-indigo-600-90);
    --alpha-indigo-600-80: var(--color-indigo-600-80);
    --alpha-indigo-600-70: var(--color-indigo-600-70);
    --alpha-indigo-600-60: var(--color-indigo-600-60);
    --alpha-indigo-600-50: var(--color-indigo-600-50);
    --alpha-indigo-600-40: var(--color-indigo-600-40);
    --alpha-indigo-600-30: var(--color-indigo-600-30);
    --alpha-indigo-600-20: var(--color-indigo-600-20);
    --alpha-indigo-600-10: var(--color-indigo-600-10);
    --alpha-indigo-600-5: var(--color-indigo-600-5);
    --alpha-indigo-700-100: var(--color-indigo-700-100);
    --alpha-indigo-700-90: var(--color-indigo-700-90);
    --alpha-indigo-700-80: var(--color-indigo-700-80);
    --alpha-indigo-700-70: var(--color-indigo-700-70);
    --alpha-indigo-700-60: var(--color-indigo-700-60);
    --alpha-indigo-700-50: var(--color-indigo-700-50);
    --alpha-indigo-700-40: var(--color-indigo-700-40);
    --alpha-indigo-700-30: var(--color-indigo-700-30);
    --alpha-indigo-700-20: var(--color-indigo-700-20);
    --alpha-indigo-700-10: var(--color-indigo-700-10);
    --alpha-indigo-700-5: var(--color-indigo-700-5);
    --alpha-indigo-800-100: var(--color-indigo-800-100);
    --alpha-indigo-800-90: var(--color-indigo-800-90);
    --alpha-indigo-800-80: var(--color-indigo-800-80);
    --alpha-indigo-800-70: var(--color-indigo-800-70);
    --alpha-indigo-800-60: var(--color-indigo-800-60);
    --alpha-indigo-800-50: var(--color-indigo-800-50);
    --alpha-indigo-800-40: var(--color-indigo-800-40);
    --alpha-indigo-800-30: var(--color-indigo-800-30);
    --alpha-indigo-800-20: var(--color-indigo-800-20);
    --alpha-indigo-800-10: var(--color-indigo-800-10);
    --alpha-indigo-800-5: var(--color-indigo-800-5);
    --alpha-indigo-900-100: var(--color-indigo-900-100);
    --alpha-indigo-900-90: var(--color-indigo-900-90);
    --alpha-indigo-900-80: var(--color-indigo-900-80);
    --alpha-indigo-900-70: var(--color-indigo-900-70);
    --alpha-indigo-900-60: var(--color-indigo-900-60);
    --alpha-indigo-900-50: var(--color-indigo-900-50);
    --alpha-indigo-900-40: var(--color-indigo-900-40);
    --alpha-indigo-900-30: var(--color-indigo-900-30);
    --alpha-indigo-900-20: var(--color-indigo-900-20);
    --alpha-indigo-900-10: var(--color-indigo-900-10);
    --alpha-indigo-900-5: var(--color-indigo-900-5);
    --alpha-indigo-950-100: var(--color-indigo-950-100);
    --alpha-indigo-950-90: var(--color-indigo-950-90);
    --alpha-indigo-950-80: var(--color-indigo-950-80);
    --alpha-indigo-950-70: var(--color-indigo-950-70);
    --alpha-indigo-950-60: var(--color-indigo-950-60);
    --alpha-indigo-950-50: var(--color-indigo-950-50);
    --alpha-indigo-950-40: var(--color-indigo-950-40);
    --alpha-indigo-950-30: var(--color-indigo-950-30);
    --alpha-indigo-950-20: var(--color-indigo-950-20);
    --alpha-indigo-950-10: var(--color-indigo-950-10);
    --alpha-indigo-950-5: var(--color-indigo-950-5);
    --utility-violet-50: var(--color-violet-50);
    --utility-violet-100: var(--color-violet-100);
    --utility-violet-200: var(--color-violet-200);
    --utility-violet-300: var(--color-violet-300);
    --utility-violet-400: var(--color-violet-400);
    --utility-violet-500: var(--color-violet-500);
    --utility-violet-600: var(--color-violet-600);
    --utility-violet-700: var(--color-violet-700);
    --utility-violet-800: var(--color-violet-800);
    --utility-violet-900: var(--color-violet-900);
    --utility-violet-950: var(--color-violet-950);
    --alpha-violet-50-100: var(--color-violet-50-100);
    --alpha-violet-50-90: var(--color-violet-50-90);
    --alpha-violet-50-80: var(--color-violet-50-80);
    --alpha-violet-50-70: var(--color-violet-50-70);
    --alpha-violet-50-60: var(--color-violet-50-60);
    --alpha-violet-50-50: var(--color-violet-50-50);
    --alpha-violet-50-40: var(--color-violet-50-40);
    --alpha-violet-50-30: var(--color-violet-50-30);
    --alpha-violet-50-20: var(--color-violet-50-20);
    --alpha-violet-50-10: var(--color-violet-50-10);
    --alpha-violet-50-5: var(--color-violet-50-5);
    --alpha-violet-100-100: var(--color-violet-100-100);
    --alpha-violet-100-90: var(--color-violet-100-90);
    --alpha-violet-100-80: var(--color-violet-100-80);
    --alpha-violet-100-70: var(--color-violet-100-70);
    --alpha-violet-100-60: var(--color-violet-100-60);
    --alpha-violet-100-50: var(--color-violet-100-50);
    --alpha-violet-100-40: var(--color-violet-100-40);
    --alpha-violet-100-30: var(--color-violet-100-30);
    --alpha-violet-100-20: var(--color-violet-100-20);
    --alpha-violet-100-10: var(--color-violet-100-10);
    --alpha-violet-100-5: var(--color-violet-100-5);
    --alpha-violet-200-100: var(--color-violet-200-100);
    --alpha-violet-200-90: var(--color-violet-200-90);
    --alpha-violet-200-80: var(--color-violet-200-80);
    --alpha-violet-200-70: var(--color-violet-200-70);
    --alpha-violet-200-60: var(--color-violet-200-60);
    --alpha-violet-200-50: var(--color-violet-200-50);
    --alpha-violet-200-40: var(--color-violet-200-40);
    --alpha-violet-200-30: var(--color-violet-200-30);
    --alpha-violet-200-20: var(--color-violet-200-20);
    --alpha-violet-200-10: var(--color-violet-200-10);
    --alpha-violet-200-5: var(--color-violet-200-5);
    --alpha-violet-300-100: var(--color-violet-300-100);
    --alpha-violet-300-90: var(--color-violet-300-90);
    --alpha-violet-300-80: var(--color-violet-300-80);
    --alpha-violet-300-70: var(--color-violet-300-70);
    --alpha-violet-300-60: var(--color-violet-300-60);
    --alpha-violet-300-50: var(--color-violet-300-50);
    --alpha-violet-300-40: var(--color-violet-300-40);
    --alpha-violet-300-30: var(--color-violet-300-30);
    --alpha-violet-300-20: var(--color-violet-300-20);
    --alpha-violet-300-10: var(--color-violet-300-10);
    --alpha-violet-300-5: var(--color-violet-300-5);
    --alpha-violet-400-100: var(--color-violet-400-100);
    --alpha-violet-400-90: var(--color-violet-400-90);
    --alpha-violet-400-80: var(--color-violet-400-80);
    --alpha-violet-400-70: var(--color-violet-400-70);
    --alpha-violet-400-60: var(--color-violet-400-60);
    --alpha-violet-400-50: var(--color-violet-400-50);
    --alpha-violet-400-40: var(--color-violet-400-40);
    --alpha-violet-400-30: var(--color-violet-400-30);
    --alpha-violet-400-20: var(--color-violet-400-20);
    --alpha-violet-400-10: var(--color-violet-400-10);
    --alpha-violet-400-5: var(--color-violet-400-5);
    --alpha-violet-500-100: var(--color-violet-500-100);
    --alpha-violet-500-90: var(--color-violet-500-90);
    --alpha-violet-500-80: var(--color-violet-500-80);
    --alpha-violet-500-70: var(--color-violet-500-70);
    --alpha-violet-500-60: var(--color-violet-500-60);
    --alpha-violet-500-50: var(--color-violet-500-50);
    --alpha-violet-500-40: var(--color-violet-500-40);
    --alpha-violet-500-30: var(--color-violet-500-30);
    --alpha-violet-500-20: var(--color-violet-500-20);
    --alpha-violet-500-10: var(--color-violet-500-10);
    --alpha-violet-500-5: var(--color-violet-500-5);
    --alpha-violet-600-100: var(--color-violet-600-100);
    --alpha-violet-600-90: var(--color-violet-600-90);
    --alpha-violet-600-80: var(--color-violet-600-80);
    --alpha-violet-600-70: var(--color-violet-600-70);
    --alpha-violet-600-60: var(--color-violet-600-60);
    --alpha-violet-600-50: var(--color-violet-600-50);
    --alpha-violet-600-40: var(--color-violet-600-40);
    --alpha-violet-600-30: var(--color-violet-600-30);
    --alpha-violet-600-20: var(--color-violet-600-20);
    --alpha-violet-600-10: var(--color-violet-600-10);
    --alpha-violet-600-5: var(--color-violet-600-5);
    --alpha-violet-700-100: var(--color-violet-700-100);
    --alpha-violet-700-90: var(--color-violet-700-90);
    --alpha-violet-700-80: var(--color-violet-700-80);
    --alpha-violet-700-70: var(--color-violet-700-70);
    --alpha-violet-700-60: var(--color-violet-700-60);
    --alpha-violet-700-50: var(--color-violet-700-50);
    --alpha-violet-700-40: var(--color-violet-700-40);
    --alpha-violet-700-30: var(--color-violet-700-30);
    --alpha-violet-700-20: var(--color-violet-700-20);
    --alpha-violet-700-10: var(--color-violet-700-10);
    --alpha-violet-700-5: var(--color-violet-700-5);
    --alpha-violet-800-100: var(--color-violet-800-100);
    --alpha-violet-800-90: var(--color-violet-800-90);
    --alpha-violet-800-80: var(--color-violet-800-80);
    --alpha-violet-800-70: var(--color-violet-800-70);
    --alpha-violet-800-60: var(--color-violet-800-60);
    --alpha-violet-800-50: var(--color-violet-800-50);
    --alpha-violet-800-40: var(--color-violet-800-40);
    --alpha-violet-800-30: var(--color-violet-800-30);
    --alpha-violet-800-20: var(--color-violet-800-20);
    --alpha-violet-800-10: var(--color-violet-800-10);
    --alpha-violet-800-5: var(--color-violet-800-5);
    --alpha-violet-900-100: var(--color-violet-900-100);
    --alpha-violet-900-90: var(--color-violet-900-90);
    --alpha-violet-900-80: var(--color-violet-900-80);
    --alpha-violet-900-70: var(--color-violet-900-70);
    --alpha-violet-900-60: var(--color-violet-900-60);
    --alpha-violet-900-50: var(--color-violet-900-50);
    --alpha-violet-900-40: var(--color-violet-900-40);
    --alpha-violet-900-30: var(--color-violet-900-30);
    --alpha-violet-900-20: var(--color-violet-900-20);
    --alpha-violet-900-10: var(--color-violet-900-10);
    --alpha-violet-900-5: var(--color-violet-900-5);
    --alpha-violet-950-100: var(--color-violet-950-100);
    --alpha-violet-950-90: var(--color-violet-950-90);
    --alpha-violet-950-80: var(--color-violet-950-80);
    --alpha-violet-950-70: var(--color-violet-950-70);
    --alpha-violet-950-60: var(--color-violet-950-60);
    --alpha-violet-950-50: var(--color-violet-950-50);
    --alpha-violet-950-40: var(--color-violet-950-40);
    --alpha-violet-950-30: var(--color-violet-950-30);
    --alpha-violet-950-20: var(--color-violet-950-20);
    --alpha-violet-950-10: var(--color-violet-950-10);
    --alpha-violet-950-5: var(--color-violet-950-5);
    --utility-purple-50: var(--color-purple-50);
    --utility-purple-100: var(--color-purple-100);
    --utility-purple-200: var(--color-purple-200);
    --utility-purple-300: var(--color-purple-300);
    --utility-purple-400: var(--color-purple-400);
    --utility-purple-500: var(--color-purple-500);
    --utility-purple-600: var(--color-purple-600);
    --utility-purple-700: var(--color-purple-700);
    --utility-purple-800: var(--color-purple-800);
    --utility-purple-900: var(--color-purple-900);
    --utility-purple-950: var(--color-purple-950);
    --alpha-purple-50-100: var(--color-purple-50-100);
    --alpha-purple-50-90: var(--color-purple-50-90);
    --alpha-purple-50-80: var(--color-purple-50-80);
    --alpha-purple-50-70: var(--color-purple-50-70);
    --alpha-purple-50-60: var(--color-purple-50-60);
    --alpha-purple-50-50: var(--color-purple-50-50);
    --alpha-purple-50-40: var(--color-purple-50-40);
    --alpha-purple-50-30: var(--color-purple-50-30);
    --alpha-purple-50-20: var(--color-purple-50-20);
    --alpha-purple-50-10: var(--color-purple-50-10);
    --alpha-purple-50-5: var(--color-purple-50-5);
    --alpha-purple-100-100: var(--color-purple-100-100);
    --alpha-purple-100-90: var(--color-purple-100-90);
    --alpha-purple-100-80: var(--color-purple-100-80);
    --alpha-purple-100-70: var(--color-purple-100-70);
    --alpha-purple-100-60: var(--color-purple-100-60);
    --alpha-purple-100-50: var(--color-purple-100-50);
    --alpha-purple-100-40: var(--color-purple-100-40);
    --alpha-purple-100-30: var(--color-purple-100-30);
    --alpha-purple-100-20: var(--color-purple-100-20);
    --alpha-purple-100-10: var(--color-purple-100-10);
    --alpha-purple-100-5: var(--color-purple-100-5);
    --alpha-purple-200-100: var(--color-purple-200-100);
    --alpha-purple-200-90: var(--color-purple-200-90);
    --alpha-purple-200-80: var(--color-purple-200-80);
    --alpha-purple-200-70: var(--color-purple-200-70);
    --alpha-purple-200-60: var(--color-purple-200-60);
    --alpha-purple-200-50: var(--color-purple-200-50);
    --alpha-purple-200-40: var(--color-purple-200-40);
    --alpha-purple-200-30: var(--color-purple-200-30);
    --alpha-purple-200-20: var(--color-purple-200-20);
    --alpha-purple-200-10: var(--color-purple-200-10);
    --alpha-purple-200-5: var(--color-purple-200-5);
    --alpha-purple-300-100: var(--color-purple-300-100);
    --alpha-purple-300-90: var(--color-purple-300-90);
    --alpha-purple-300-80: var(--color-purple-300-80);
    --alpha-purple-300-70: var(--color-purple-300-70);
    --alpha-purple-300-60: var(--color-purple-300-60);
    --alpha-purple-300-50: var(--color-purple-300-50);
    --alpha-purple-300-40: var(--color-purple-300-40);
    --alpha-purple-300-30: var(--color-purple-300-30);
    --alpha-purple-300-20: var(--color-purple-300-20);
    --alpha-purple-300-10: var(--color-purple-300-10);
    --alpha-purple-300-5: var(--color-purple-300-5);
    --alpha-purple-400-100: var(--color-purple-400-100);
    --alpha-purple-400-90: var(--color-purple-400-90);
    --alpha-purple-400-80: var(--color-purple-400-80);
    --alpha-purple-400-70: var(--color-purple-400-70);
    --alpha-purple-400-60: var(--color-purple-400-60);
    --alpha-purple-400-50: var(--color-purple-400-50);
    --alpha-purple-400-40: var(--color-purple-400-40);
    --alpha-purple-400-30: var(--color-purple-400-30);
    --alpha-purple-400-20: var(--color-purple-400-20);
    --alpha-purple-400-10: var(--color-purple-400-10);
    --alpha-purple-400-5: var(--color-purple-400-5);
    --alpha-purple-500-100: var(--color-purple-500-100);
    --alpha-purple-500-90: var(--color-purple-500-90);
    --alpha-purple-500-80: var(--color-purple-500-80);
    --alpha-purple-500-70: var(--color-purple-500-70);
    --alpha-purple-500-60: var(--color-purple-500-60);
    --alpha-purple-500-50: var(--color-purple-500-50);
    --alpha-purple-500-40: var(--color-purple-500-40);
    --alpha-purple-500-30: var(--color-purple-500-30);
    --alpha-purple-500-20: var(--color-purple-500-20);
    --alpha-purple-500-10: var(--color-purple-500-10);
    --alpha-purple-500-5: var(--color-purple-500-5);
    --alpha-purple-600-100: var(--color-purple-600-100);
    --alpha-purple-600-90: var(--color-purple-600-90);
    --alpha-purple-600-80: var(--color-purple-600-80);
    --alpha-purple-600-70: var(--color-purple-600-70);
    --alpha-purple-600-60: var(--color-purple-600-60);
    --alpha-purple-600-50: var(--color-purple-600-50);
    --alpha-purple-600-40: var(--color-purple-600-40);
    --alpha-purple-600-30: var(--color-purple-600-30);
    --alpha-purple-600-20: var(--color-purple-600-20);
    --alpha-purple-600-10: var(--color-purple-600-10);
    --alpha-purple-600-5: var(--color-purple-600-5);
    --alpha-purple-700-100: var(--color-purple-700-100);
    --alpha-purple-700-90: var(--color-purple-700-90);
    --alpha-purple-700-80: var(--color-purple-700-80);
    --alpha-purple-700-70: var(--color-purple-700-70);
    --alpha-purple-700-60: var(--color-purple-700-60);
    --alpha-purple-700-50: var(--color-purple-700-50);
    --alpha-purple-700-40: var(--color-purple-700-40);
    --alpha-purple-700-30: var(--color-purple-700-30);
    --alpha-purple-700-20: var(--color-purple-700-20);
    --alpha-purple-700-10: var(--color-purple-700-10);
    --alpha-purple-700-5: var(--color-purple-700-5);
    --alpha-purple-800-100: var(--color-purple-800-100);
    --alpha-purple-800-90: var(--color-purple-800-90);
    --alpha-purple-800-80: var(--color-purple-800-80);
    --alpha-purple-800-70: var(--color-purple-800-70);
    --alpha-purple-800-60: var(--color-purple-800-60);
    --alpha-purple-800-50: var(--color-purple-800-50);
    --alpha-purple-800-40: var(--color-purple-800-40);
    --alpha-purple-800-30: var(--color-purple-800-30);
    --alpha-purple-800-20: var(--color-purple-800-20);
    --alpha-purple-800-10: var(--color-purple-800-10);
    --alpha-purple-800-5: var(--color-purple-800-5);
    --alpha-purple-900-100: var(--color-purple-900-100);
    --alpha-purple-900-90: var(--color-purple-900-90);
    --alpha-purple-900-80: var(--color-purple-900-80);
    --alpha-purple-900-70: var(--color-purple-900-70);
    --alpha-purple-900-60: var(--color-purple-900-60);
    --alpha-purple-900-50: var(--color-purple-900-50);
    --alpha-purple-900-40: var(--color-purple-900-40);
    --alpha-purple-900-30: var(--color-purple-900-30);
    --alpha-purple-900-20: var(--color-purple-900-20);
    --alpha-purple-900-10: var(--color-purple-900-10);
    --alpha-purple-900-5: var(--color-purple-900-5);
    --alpha-purple-950-100: var(--color-purple-950-100);
    --alpha-purple-950-90: var(--color-purple-950-90);
    --alpha-purple-950-80: var(--color-purple-950-80);
    --alpha-purple-950-70: var(--color-purple-950-70);
    --alpha-purple-950-60: var(--color-purple-950-60);
    --alpha-purple-950-50: var(--color-purple-950-50);
    --alpha-purple-950-40: var(--color-purple-950-40);
    --alpha-purple-950-30: var(--color-purple-950-30);
    --alpha-purple-950-20: var(--color-purple-950-20);
    --alpha-purple-950-10: var(--color-purple-950-10);
    --alpha-purple-950-5: var(--color-purple-950-5);
    --utility-fuchsia-50: var(--color-fuchsia-50);
    --utility-fuchsia-100: var(--color-fuchsia-100);
    --utility-fuchsia-200: var(--color-fuchsia-200);
    --utility-fuchsia-300: var(--color-fuchsia-300);
    --utility-fuchsia-400: var(--color-fuchsia-400);
    --utility-fuchsia-500: var(--color-fuchsia-500);
    --utility-fuchsia-600: var(--color-fuchsia-600);
    --utility-fuchsia-700: var(--color-fuchsia-700);
    --utility-fuchsia-800: var(--color-fuchsia-800);
    --utility-fuchsia-900: var(--color-fuchsia-900);
    --utility-fuchsia-950: var(--color-fuchsia-950);
    --alpha-fuchsia-50-100: var(--color-fuchsia-50-100);
    --alpha-fuchsia-50-90: var(--color-fuchsia-50-90);
    --alpha-fuchsia-50-80: var(--color-fuchsia-50-80);
    --alpha-fuchsia-50-70: var(--color-fuchsia-50-70);
    --alpha-fuchsia-50-60: var(--color-fuchsia-50-60);
    --alpha-fuchsia-50-50: var(--color-fuchsia-50-50);
    --alpha-fuchsia-50-40: var(--color-fuchsia-50-40);
    --alpha-fuchsia-50-30: var(--color-fuchsia-50-30);
    --alpha-fuchsia-50-20: var(--color-fuchsia-50-20);
    --alpha-fuchsia-50-10: var(--color-fuchsia-50-10);
    --alpha-fuchsia-50-5: var(--color-fuchsia-50-5);
    --alpha-fuchsia-100-100: var(--color-fuchsia-100-100);
    --alpha-fuchsia-100-90: var(--color-fuchsia-100-90);
    --alpha-fuchsia-100-80: var(--color-fuchsia-100-80);
    --alpha-fuchsia-100-70: var(--color-fuchsia-100-70);
    --alpha-fuchsia-100-60: var(--color-fuchsia-100-60);
    --alpha-fuchsia-100-50: var(--color-fuchsia-100-50);
    --alpha-fuchsia-100-40: var(--color-fuchsia-100-40);
    --alpha-fuchsia-100-30: var(--color-fuchsia-100-30);
    --alpha-fuchsia-100-20: var(--color-fuchsia-100-20);
    --alpha-fuchsia-100-10: var(--color-fuchsia-100-10);
    --alpha-fuchsia-100-5: var(--color-fuchsia-100-5);
    --alpha-fuchsia-200-100: var(--color-fuchsia-200-100);
    --alpha-fuchsia-200-90: var(--color-fuchsia-200-90);
    --alpha-fuchsia-200-80: var(--color-fuchsia-200-80);
    --alpha-fuchsia-200-70: var(--color-fuchsia-200-70);
    --alpha-fuchsia-200-60: var(--color-fuchsia-200-60);
    --alpha-fuchsia-200-50: var(--color-fuchsia-200-50);
    --alpha-fuchsia-200-40: var(--color-fuchsia-200-40);
    --alpha-fuchsia-200-30: var(--color-fuchsia-200-30);
    --alpha-fuchsia-200-20: var(--color-fuchsia-200-20);
    --alpha-fuchsia-200-10: var(--color-fuchsia-200-10);
    --alpha-fuchsia-200-5: var(--color-fuchsia-200-5);
    --alpha-fuchsia-300-100: var(--color-fuchsia-300-100);
    --alpha-fuchsia-300-90: var(--color-fuchsia-300-90);
    --alpha-fuchsia-300-80: var(--color-fuchsia-300-80);
    --alpha-fuchsia-300-70: var(--color-fuchsia-300-70);
    --alpha-fuchsia-300-60: var(--color-fuchsia-300-60);
    --alpha-fuchsia-300-50: var(--color-fuchsia-300-50);
    --alpha-fuchsia-300-40: var(--color-fuchsia-300-40);
    --alpha-fuchsia-300-30: var(--color-fuchsia-300-30);
    --alpha-fuchsia-300-20: var(--color-fuchsia-300-20);
    --alpha-fuchsia-300-10: var(--color-fuchsia-300-10);
    --alpha-fuchsia-300-5: var(--color-fuchsia-300-5);
    --alpha-fuchsia-400-100: var(--color-fuchsia-400-100);
    --alpha-fuchsia-400-90: var(--color-fuchsia-400-90);
    --alpha-fuchsia-400-80: var(--color-fuchsia-400-80);
    --alpha-fuchsia-400-70: var(--color-fuchsia-400-70);
    --alpha-fuchsia-400-60: var(--color-fuchsia-400-60);
    --alpha-fuchsia-400-50: var(--color-fuchsia-400-50);
    --alpha-fuchsia-400-40: var(--color-fuchsia-400-40);
    --alpha-fuchsia-400-30: var(--color-fuchsia-400-30);
    --alpha-fuchsia-400-20: var(--color-fuchsia-400-20);
    --alpha-fuchsia-400-10: var(--color-fuchsia-400-10);
    --alpha-fuchsia-400-5: var(--color-fuchsia-400-5);
    --alpha-fuchsia-500-100: var(--color-fuchsia-500-100);
    --alpha-fuchsia-500-90: var(--color-fuchsia-500-90);
    --alpha-fuchsia-500-80: var(--color-fuchsia-500-80);
    --alpha-fuchsia-500-70: var(--color-fuchsia-500-70);
    --alpha-fuchsia-500-60: var(--color-fuchsia-500-60);
    --alpha-fuchsia-500-50: var(--color-fuchsia-500-50);
    --alpha-fuchsia-500-40: var(--color-fuchsia-500-40);
    --alpha-fuchsia-500-30: var(--color-fuchsia-500-30);
    --alpha-fuchsia-500-20: var(--color-fuchsia-500-20);
    --alpha-fuchsia-500-10: var(--color-fuchsia-500-10);
    --alpha-fuchsia-500-5: var(--color-fuchsia-500-5);
    --alpha-fuchsia-600-100: var(--color-fuchsia-600-100);
    --alpha-fuchsia-600-90: var(--color-fuchsia-600-90);
    --alpha-fuchsia-600-80: var(--color-fuchsia-600-80);
    --alpha-fuchsia-600-70: var(--color-fuchsia-600-70);
    --alpha-fuchsia-600-60: var(--color-fuchsia-600-60);
    --alpha-fuchsia-600-50: var(--color-fuchsia-600-50);
    --alpha-fuchsia-600-40: var(--color-fuchsia-600-40);
    --alpha-fuchsia-600-30: var(--color-fuchsia-600-30);
    --alpha-fuchsia-600-20: var(--color-fuchsia-600-20);
    --alpha-fuchsia-600-10: var(--color-fuchsia-600-10);
    --alpha-fuchsia-600-5: var(--color-fuchsia-600-5);
    --alpha-fuchsia-700-100: var(--color-fuchsia-700-100);
    --alpha-fuchsia-700-90: var(--color-fuchsia-700-90);
    --alpha-fuchsia-700-80: var(--color-fuchsia-700-80);
    --alpha-fuchsia-700-70: var(--color-fuchsia-700-70);
    --alpha-fuchsia-700-60: var(--color-fuchsia-700-60);
    --alpha-fuchsia-700-50: var(--color-fuchsia-700-50);
    --alpha-fuchsia-700-40: var(--color-fuchsia-700-40);
    --alpha-fuchsia-700-30: var(--color-fuchsia-700-30);
    --alpha-fuchsia-700-20: var(--color-fuchsia-700-20);
    --alpha-fuchsia-700-10: var(--color-fuchsia-700-10);
    --alpha-fuchsia-700-5: var(--color-fuchsia-700-5);
    --alpha-fuchsia-800-100: var(--color-fuchsia-800-100);
    --alpha-fuchsia-800-90: var(--color-fuchsia-800-90);
    --alpha-fuchsia-800-80: var(--color-fuchsia-800-80);
    --alpha-fuchsia-800-70: var(--color-fuchsia-800-70);
    --alpha-fuchsia-800-60: var(--color-fuchsia-800-60);
    --alpha-fuchsia-800-50: var(--color-fuchsia-800-50);
    --alpha-fuchsia-800-40: var(--color-fuchsia-800-40);
    --alpha-fuchsia-800-30: var(--color-fuchsia-800-30);
    --alpha-fuchsia-800-20: var(--color-fuchsia-800-20);
    --alpha-fuchsia-800-10: var(--color-fuchsia-800-10);
    --alpha-fuchsia-800-5: var(--color-fuchsia-800-5);
    --alpha-fuchsia-900-100: var(--color-fuchsia-900-100);
    --alpha-fuchsia-900-90: var(--color-fuchsia-900-90);
    --alpha-fuchsia-900-80: var(--color-fuchsia-900-80);
    --alpha-fuchsia-900-70: var(--color-fuchsia-900-70);
    --alpha-fuchsia-900-60: var(--color-fuchsia-900-60);
    --alpha-fuchsia-900-50: var(--color-fuchsia-900-50);
    --alpha-fuchsia-900-40: var(--color-fuchsia-900-40);
    --alpha-fuchsia-900-30: var(--color-fuchsia-900-30);
    --alpha-fuchsia-900-20: var(--color-fuchsia-900-20);
    --alpha-fuchsia-900-10: var(--color-fuchsia-900-10);
    --alpha-fuchsia-900-5: var(--color-fuchsia-900-5);
    --alpha-fuchsia-950-100: var(--color-fuchsia-950-100);
    --alpha-fuchsia-950-90: var(--color-fuchsia-950-90);
    --alpha-fuchsia-950-80: var(--color-fuchsia-950-80);
    --alpha-fuchsia-950-70: var(--color-fuchsia-950-70);
    --alpha-fuchsia-950-60: var(--color-fuchsia-950-60);
    --alpha-fuchsia-950-50: var(--color-fuchsia-950-50);
    --alpha-fuchsia-950-40: var(--color-fuchsia-950-40);
    --alpha-fuchsia-950-30: var(--color-fuchsia-950-30);
    --alpha-fuchsia-950-20: var(--color-fuchsia-950-20);
    --alpha-fuchsia-950-10: var(--color-fuchsia-950-10);
    --alpha-fuchsia-950-5: var(--color-fuchsia-950-5);
    --utility-pink-50: var(--color-pink-50);
    --utility-pink-100: var(--color-pink-100);
    --utility-pink-200: var(--color-pink-200);
    --utility-pink-300: var(--color-pink-300);
    --utility-pink-400: var(--color-pink-400);
    --utility-pink-500: var(--color-pink-500);
    --utility-pink-600: var(--color-pink-600);
    --utility-pink-700: var(--color-pink-700);
    --utility-pink-800: var(--color-pink-800);
    --utility-pink-900: var(--color-pink-900);
    --utility-pink-950: var(--color-pink-950);
    --alpha-pink-50-100: var(--color-pink-50-100);
    --alpha-pink-50-90: var(--color-pink-50-90);
    --alpha-pink-50-80: var(--color-pink-50-80);
    --alpha-pink-50-70: var(--color-pink-50-70);
    --alpha-pink-50-60: var(--color-pink-50-60);
    --alpha-pink-50-50: var(--color-pink-50-50);
    --alpha-pink-50-40: var(--color-pink-50-40);
    --alpha-pink-50-30: var(--color-pink-50-30);
    --alpha-pink-50-20: var(--color-pink-50-20);
    --alpha-pink-50-10: var(--color-pink-50-10);
    --alpha-pink-50-5: var(--color-pink-50-5);
    --alpha-pink-100-100: var(--color-pink-100-100);
    --alpha-pink-100-90: var(--color-pink-100-90);
    --alpha-pink-100-80: var(--color-pink-100-80);
    --alpha-pink-100-70: var(--color-pink-100-70);
    --alpha-pink-100-60: var(--color-pink-100-60);
    --alpha-pink-100-50: var(--color-pink-100-50);
    --alpha-pink-100-40: var(--color-pink-100-40);
    --alpha-pink-100-30: var(--color-pink-100-30);
    --alpha-pink-100-20: var(--color-pink-100-20);
    --alpha-pink-100-10: var(--color-pink-100-10);
    --alpha-pink-100-5: var(--color-pink-100-5);
    --alpha-pink-200-100: var(--color-pink-200-100);
    --alpha-pink-200-90: var(--color-pink-200-90);
    --alpha-pink-200-80: var(--color-pink-200-80);
    --alpha-pink-200-70: var(--color-pink-200-70);
    --alpha-pink-200-60: var(--color-pink-200-60);
    --alpha-pink-200-50: var(--color-pink-200-50);
    --alpha-pink-200-40: var(--color-pink-200-40);
    --alpha-pink-200-30: var(--color-pink-200-30);
    --alpha-pink-200-20: var(--color-pink-200-20);
    --alpha-pink-200-10: var(--color-pink-200-10);
    --alpha-pink-200-5: var(--color-pink-200-5);
    --alpha-pink-300-100: var(--color-pink-300-100);
    --alpha-pink-300-90: var(--color-pink-300-90);
    --alpha-pink-300-80: var(--color-pink-300-80);
    --alpha-pink-300-70: var(--color-pink-300-70);
    --alpha-pink-300-60: var(--color-pink-300-60);
    --alpha-pink-300-50: var(--color-pink-300-50);
    --alpha-pink-300-40: var(--color-pink-300-40);
    --alpha-pink-300-30: var(--color-pink-300-30);
    --alpha-pink-300-20: var(--color-pink-300-20);
    --alpha-pink-300-10: var(--color-pink-300-10);
    --alpha-pink-300-5: var(--color-pink-300-5);
    --alpha-pink-400-100: var(--color-pink-400-100);
    --alpha-pink-400-90: var(--color-pink-400-90);
    --alpha-pink-400-80: var(--color-pink-400-80);
    --alpha-pink-400-70: var(--color-pink-400-70);
    --alpha-pink-400-60: var(--color-pink-400-60);
    --alpha-pink-400-50: var(--color-pink-400-50);
    --alpha-pink-400-40: var(--color-pink-400-40);
    --alpha-pink-400-30: var(--color-pink-400-30);
    --alpha-pink-400-20: var(--color-pink-400-20);
    --alpha-pink-400-10: var(--color-pink-400-10);
    --alpha-pink-400-5: var(--color-pink-400-5);
    --alpha-pink-500-100: var(--color-pink-500-100);
    --alpha-pink-500-90: var(--color-pink-500-90);
    --alpha-pink-500-80: var(--color-pink-500-80);
    --alpha-pink-500-70: var(--color-pink-500-70);
    --alpha-pink-500-60: var(--color-pink-500-60);
    --alpha-pink-500-50: var(--color-pink-500-50);
    --alpha-pink-500-40: var(--color-pink-500-40);
    --alpha-pink-500-30: var(--color-pink-500-30);
    --alpha-pink-500-20: var(--color-pink-500-20);
    --alpha-pink-500-10: var(--color-pink-500-10);
    --alpha-pink-500-5: var(--color-pink-500-5);
    --alpha-pink-600-100: var(--color-pink-600-100);
    --alpha-pink-600-90: var(--color-pink-600-90);
    --alpha-pink-600-80: var(--color-pink-600-80);
    --alpha-pink-600-70: var(--color-pink-600-70);
    --alpha-pink-600-60: var(--color-pink-600-60);
    --alpha-pink-600-50: var(--color-pink-600-50);
    --alpha-pink-600-40: var(--color-pink-600-40);
    --alpha-pink-600-30: var(--color-pink-600-30);
    --alpha-pink-600-20: var(--color-pink-600-20);
    --alpha-pink-600-10: var(--color-pink-600-10);
    --alpha-pink-600-5: var(--color-pink-600-5);
    --alpha-pink-700-100: var(--color-pink-700-100);
    --alpha-pink-700-90: var(--color-pink-700-90);
    --alpha-pink-700-80: var(--color-pink-700-80);
    --alpha-pink-700-70: var(--color-pink-700-70);
    --alpha-pink-700-60: var(--color-pink-700-60);
    --alpha-pink-700-50: var(--color-pink-700-50);
    --alpha-pink-700-40: var(--color-pink-700-40);
    --alpha-pink-700-30: var(--color-pink-700-30);
    --alpha-pink-700-20: var(--color-pink-700-20);
    --alpha-pink-700-10: var(--color-pink-700-10);
    --alpha-pink-700-5: var(--color-pink-700-5);
    --alpha-pink-800-100: var(--color-pink-800-100);
    --alpha-pink-800-90: var(--color-pink-800-90);
    --alpha-pink-800-80: var(--color-pink-800-80);
    --alpha-pink-800-70: var(--color-pink-800-70);
    --alpha-pink-800-60: var(--color-pink-800-60);
    --alpha-pink-800-50: var(--color-pink-800-50);
    --alpha-pink-800-40: var(--color-pink-800-40);
    --alpha-pink-800-30: var(--color-pink-800-30);
    --alpha-pink-800-20: var(--color-pink-800-20);
    --alpha-pink-800-10: var(--color-pink-800-10);
    --alpha-pink-800-5: var(--color-pink-800-5);
    --alpha-pink-900-100: var(--color-pink-900-100);
    --alpha-pink-900-90: var(--color-pink-900-90);
    --alpha-pink-900-80: var(--color-pink-900-80);
    --alpha-pink-900-70: var(--color-pink-900-70);
    --alpha-pink-900-60: var(--color-pink-900-60);
    --alpha-pink-900-50: var(--color-pink-900-50);
    --alpha-pink-900-40: var(--color-pink-900-40);
    --alpha-pink-900-30: var(--color-pink-900-30);
    --alpha-pink-900-20: var(--color-pink-900-20);
    --alpha-pink-900-10: var(--color-pink-900-10);
    --alpha-pink-900-5: var(--color-pink-900-5);
    --alpha-pink-950-100: var(--color-pink-950-100);
    --alpha-pink-950-90: var(--color-pink-950-90);
    --alpha-pink-950-80: var(--color-pink-950-80);
    --alpha-pink-950-70: var(--color-pink-950-70);
    --alpha-pink-950-60: var(--color-pink-950-60);
    --alpha-pink-950-50: var(--color-pink-950-50);
    --alpha-pink-950-40: var(--color-pink-950-40);
    --alpha-pink-950-30: var(--color-pink-950-30);
    --alpha-pink-950-20: var(--color-pink-950-20);
    --alpha-pink-950-10: var(--color-pink-950-10);
    --alpha-pink-950-5: var(--color-pink-950-5);
    --utility-rose-50: var(--color-rose-50);
    --utility-rose-100: var(--color-rose-100);
    --utility-rose-200: var(--color-rose-200);
    --utility-rose-300: var(--color-rose-300);
    --utility-rose-400: var(--color-rose-400);
    --utility-rose-500: var(--color-rose-500);
    --utility-rose-600: var(--color-rose-600);
    --utility-rose-700: var(--color-rose-700);
    --utility-rose-800: var(--color-rose-800);
    --utility-rose-900: var(--color-rose-900);
    --utility-rose-950: var(--color-rose-950);
    --alpha-rose-50-100: var(--color-rose-50-100);
    --alpha-rose-50-90: var(--color-rose-50-90);
    --alpha-rose-50-80: var(--color-rose-50-80);
    --alpha-rose-50-70: var(--color-rose-50-70);
    --alpha-rose-50-60: var(--color-rose-50-60);
    --alpha-rose-50-50: var(--color-rose-50-50);
    --alpha-rose-50-40: var(--color-rose-50-40);
    --alpha-rose-50-30: var(--color-rose-50-30);
    --alpha-rose-50-20: var(--color-rose-50-20);
    --alpha-rose-50-10: var(--color-rose-50-10);
    --alpha-rose-50-5: var(--color-rose-50-5);
    --alpha-rose-100-100: var(--color-rose-100-100);
    --alpha-rose-100-90: var(--color-rose-100-90);
    --alpha-rose-100-80: var(--color-rose-100-80);
    --alpha-rose-100-70: var(--color-rose-100-70);
    --alpha-rose-100-60: var(--color-rose-100-60);
    --alpha-rose-100-50: var(--color-rose-100-50);
    --alpha-rose-100-40: var(--color-rose-100-40);
    --alpha-rose-100-30: var(--color-rose-100-30);
    --alpha-rose-100-20: var(--color-rose-100-20);
    --alpha-rose-100-10: var(--color-rose-100-10);
    --alpha-rose-100-5: var(--color-rose-100-5);
    --alpha-rose-200-100: var(--color-rose-200-100);
    --alpha-rose-200-90: var(--color-rose-200-90);
    --alpha-rose-200-80: var(--color-rose-200-80);
    --alpha-rose-200-70: var(--color-rose-200-70);
    --alpha-rose-200-60: var(--color-rose-200-60);
    --alpha-rose-200-50: var(--color-rose-200-50);
    --alpha-rose-200-40: var(--color-rose-200-40);
    --alpha-rose-200-30: var(--color-rose-200-30);
    --alpha-rose-200-20: var(--color-rose-200-20);
    --alpha-rose-200-10: var(--color-rose-200-10);
    --alpha-rose-200-5: var(--color-rose-200-5);
    --alpha-rose-300-100: var(--color-rose-300-100);
    --alpha-rose-300-90: var(--color-rose-300-90);
    --alpha-rose-300-80: var(--color-rose-300-80);
    --alpha-rose-300-70: var(--color-rose-300-70);
    --alpha-rose-300-60: var(--color-rose-300-60);
    --alpha-rose-300-50: var(--color-rose-300-50);
    --alpha-rose-300-40: var(--color-rose-300-40);
    --alpha-rose-300-30: var(--color-rose-300-30);
    --alpha-rose-300-20: var(--color-rose-300-20);
    --alpha-rose-300-10: var(--color-rose-300-10);
    --alpha-rose-300-5: var(--color-rose-300-5);
    --alpha-rose-400-100: var(--color-rose-400-100);
    --alpha-rose-400-90: var(--color-rose-400-90);
    --alpha-rose-400-80: var(--color-rose-400-80);
    --alpha-rose-400-70: var(--color-rose-400-70);
    --alpha-rose-400-60: var(--color-rose-400-60);
    --alpha-rose-400-50: var(--color-rose-400-50);
    --alpha-rose-400-40: var(--color-rose-400-40);
    --alpha-rose-400-30: var(--color-rose-400-30);
    --alpha-rose-400-20: var(--color-rose-400-20);
    --alpha-rose-400-10: var(--color-rose-400-10);
    --alpha-rose-400-5: var(--color-rose-400-5);
    --alpha-rose-500-100: var(--color-rose-500-100);
    --alpha-rose-500-90: var(--color-rose-500-90);
    --alpha-rose-500-80: var(--color-rose-500-80);
    --alpha-rose-500-70: var(--color-rose-500-70);
    --alpha-rose-500-60: var(--color-rose-500-60);
    --alpha-rose-500-50: var(--color-rose-500-50);
    --alpha-rose-500-40: var(--color-rose-500-40);
    --alpha-rose-500-30: var(--color-rose-500-30);
    --alpha-rose-500-20: var(--color-rose-500-20);
    --alpha-rose-500-10: var(--color-rose-500-10);
    --alpha-rose-500-5: var(--color-rose-500-5);
    --alpha-rose-600-100: var(--color-rose-600-100);
    --alpha-rose-600-90: var(--color-rose-600-90);
    --alpha-rose-600-80: var(--color-rose-600-80);
    --alpha-rose-600-70: var(--color-rose-600-70);
    --alpha-rose-600-60: var(--color-rose-600-60);
    --alpha-rose-600-50: var(--color-rose-600-50);
    --alpha-rose-600-40: var(--color-rose-600-40);
    --alpha-rose-600-30: var(--color-rose-600-30);
    --alpha-rose-600-20: var(--color-rose-600-20);
    --alpha-rose-600-10: var(--color-rose-600-10);
    --alpha-rose-600-5: var(--color-rose-600-5);
    --alpha-rose-700-100: var(--color-rose-700-100);
    --alpha-rose-700-90: var(--color-rose-700-90);
    --alpha-rose-700-80: var(--color-rose-700-80);
    --alpha-rose-700-70: var(--color-rose-700-70);
    --alpha-rose-700-60: var(--color-rose-700-60);
    --alpha-rose-700-50: var(--color-rose-700-50);
    --alpha-rose-700-40: var(--color-rose-700-40);
    --alpha-rose-700-30: var(--color-rose-700-30);
    --alpha-rose-700-20: var(--color-rose-700-20);
    --alpha-rose-700-10: var(--color-rose-700-10);
    --alpha-rose-700-5: var(--color-rose-700-5);
    --alpha-rose-800-100: var(--color-rose-800-100);
    --alpha-rose-800-90: var(--color-rose-800-90);
    --alpha-rose-800-80: var(--color-rose-800-80);
    --alpha-rose-800-70: var(--color-rose-800-70);
    --alpha-rose-800-60: var(--color-rose-800-60);
    --alpha-rose-800-50: var(--color-rose-800-50);
    --alpha-rose-800-40: var(--color-rose-800-40);
    --alpha-rose-800-30: var(--color-rose-800-30);
    --alpha-rose-800-20: var(--color-rose-800-20);
    --alpha-rose-800-10: var(--color-rose-800-10);
    --alpha-rose-800-5: var(--color-rose-800-5);
    --alpha-rose-900-100: var(--color-rose-900-100);
    --alpha-rose-900-90: var(--color-rose-900-90);
    --alpha-rose-900-80: var(--color-rose-900-80);
    --alpha-rose-900-70: var(--color-rose-900-70);
    --alpha-rose-900-60: var(--color-rose-900-60);
    --alpha-rose-900-50: var(--color-rose-900-50);
    --alpha-rose-900-40: var(--color-rose-900-40);
    --alpha-rose-900-30: var(--color-rose-900-30);
    --alpha-rose-900-20: var(--color-rose-900-20);
    --alpha-rose-900-10: var(--color-rose-900-10);
    --alpha-rose-900-5: var(--color-rose-900-5);
    --alpha-rose-950-100: var(--color-rose-950-100);
    --alpha-rose-950-90: var(--color-rose-950-90);
    --alpha-rose-950-80: var(--color-rose-950-80);
    --alpha-rose-950-70: var(--color-rose-950-70);
    --alpha-rose-950-60: var(--color-rose-950-60);
    --alpha-rose-950-50: var(--color-rose-950-50);
    --alpha-rose-950-40: var(--color-rose-950-40);
    --alpha-rose-950-30: var(--color-rose-950-30);
    --alpha-rose-950-20: var(--color-rose-950-20);
    --alpha-rose-950-10: var(--color-rose-950-10);
    --alpha-rose-950-5: var(--color-rose-950-5);
    --utility-slate-50: var(--color-slate-50);
    --utility-slate-100: var(--color-slate-100);
    --utility-slate-200: var(--color-slate-200);
    --utility-slate-300: var(--color-slate-300);
    --utility-slate-400: var(--color-slate-400);
    --utility-slate-500: var(--color-slate-500);
    --utility-slate-600: var(--color-slate-600);
    --utility-slate-700: var(--color-slate-700);
    --utility-slate-800: var(--color-slate-800);
    --utility-slate-900: var(--color-slate-900);
    --utility-slate-950: var(--color-slate-950);
    --alpha-slate-50-100: var(--color-slate-50-100);
    --alpha-slate-50-90: var(--color-slate-50-90);
    --alpha-slate-50-80: var(--color-slate-50-80);
    --alpha-slate-50-70: var(--color-slate-50-70);
    --alpha-slate-50-60: var(--color-slate-50-60);
    --alpha-slate-50-50: var(--color-slate-50-50);
    --alpha-slate-50-40: var(--color-slate-50-40);
    --alpha-slate-50-30: var(--color-slate-50-30);
    --alpha-slate-50-20: var(--color-slate-50-20);
    --alpha-slate-50-10: var(--color-slate-50-10);
    --alpha-slate-50-5: var(--color-slate-50-5);
    --alpha-slate-100-100: var(--color-slate-100-100);
    --alpha-slate-100-90: var(--color-slate-100-90);
    --alpha-slate-100-80: var(--color-slate-100-80);
    --alpha-slate-100-70: var(--color-slate-100-70);
    --alpha-slate-100-60: var(--color-slate-100-60);
    --alpha-slate-100-50: var(--color-slate-100-50);
    --alpha-slate-100-40: var(--color-slate-100-40);
    --alpha-slate-100-30: var(--color-slate-100-30);
    --alpha-slate-100-20: var(--color-slate-100-20);
    --alpha-slate-100-10: var(--color-slate-100-10);
    --alpha-slate-100-5: var(--color-slate-100-5);
    --alpha-slate-200-100: var(--color-slate-200-100);
    --alpha-slate-200-90: var(--color-slate-200-90);
    --alpha-slate-200-80: var(--color-slate-200-80);
    --alpha-slate-200-70: var(--color-slate-200-70);
    --alpha-slate-200-60: var(--color-slate-200-60);
    --alpha-slate-200-50: var(--color-slate-200-50);
    --alpha-slate-200-40: var(--color-slate-200-40);
    --alpha-slate-200-30: var(--color-slate-200-30);
    --alpha-slate-200-20: var(--color-slate-200-20);
    --alpha-slate-200-10: var(--color-slate-200-10);
    --alpha-slate-200-5: var(--color-slate-200-5);
    --alpha-slate-300-100: var(--color-slate-300-100);
    --alpha-slate-300-90: var(--color-slate-300-90);
    --alpha-slate-300-80: var(--color-slate-300-80);
    --alpha-slate-300-70: var(--color-slate-300-70);
    --alpha-slate-300-60: var(--color-slate-300-60);
    --alpha-slate-300-50: var(--color-slate-300-50);
    --alpha-slate-300-40: var(--color-slate-300-40);
    --alpha-slate-300-30: var(--color-slate-300-30);
    --alpha-slate-300-20: var(--color-slate-300-20);
    --alpha-slate-300-10: var(--color-slate-300-10);
    --alpha-slate-300-5: var(--color-slate-300-5);
    --alpha-slate-400-100: var(--color-slate-400-100);
    --alpha-slate-400-90: var(--color-slate-400-90);
    --alpha-slate-400-80: var(--color-slate-400-80);
    --alpha-slate-400-70: var(--color-slate-400-70);
    --alpha-slate-400-60: var(--color-slate-400-60);
    --alpha-slate-400-50: var(--color-slate-400-50);
    --alpha-slate-400-40: var(--color-slate-400-40);
    --alpha-slate-400-30: var(--color-slate-400-30);
    --alpha-slate-400-20: var(--color-slate-400-20);
    --alpha-slate-400-10: var(--color-slate-400-10);
    --alpha-slate-400-5: var(--color-slate-400-5);
    --alpha-slate-500-100: var(--color-slate-500-100);
    --alpha-slate-500-90: var(--color-slate-500-90);
    --alpha-slate-500-80: var(--color-slate-500-80);
    --alpha-slate-500-70: var(--color-slate-500-70);
    --alpha-slate-500-60: var(--color-slate-500-60);
    --alpha-slate-500-50: var(--color-slate-500-50);
    --alpha-slate-500-40: var(--color-slate-500-40);
    --alpha-slate-500-30: var(--color-slate-500-30);
    --alpha-slate-500-20: var(--color-slate-500-20);
    --alpha-slate-500-10: var(--color-slate-500-10);
    --alpha-slate-500-5: var(--color-slate-500-5);
    --alpha-slate-600-100: var(--color-slate-600-100);
    --alpha-slate-600-90: var(--color-slate-600-90);
    --alpha-slate-600-80: var(--color-slate-600-80);
    --alpha-slate-600-70: var(--color-slate-600-70);
    --alpha-slate-600-60: var(--color-slate-600-60);
    --alpha-slate-600-50: var(--color-slate-600-50);
    --alpha-slate-600-40: var(--color-slate-600-40);
    --alpha-slate-600-30: var(--color-slate-600-30);
    --alpha-slate-600-20: var(--color-slate-600-20);
    --alpha-slate-600-10: var(--color-slate-600-10);
    --alpha-slate-600-5: var(--color-slate-600-5);
    --alpha-slate-700-100: var(--color-slate-700-100);
    --alpha-slate-700-90: var(--color-slate-700-90);
    --alpha-slate-700-80: var(--color-slate-700-80);
    --alpha-slate-700-70: var(--color-slate-700-70);
    --alpha-slate-700-60: var(--color-slate-700-60);
    --alpha-slate-700-50: var(--color-slate-700-50);
    --alpha-slate-700-40: var(--color-slate-700-40);
    --alpha-slate-700-30: var(--color-slate-700-30);
    --alpha-slate-700-20: var(--color-slate-700-20);
    --alpha-slate-700-10: var(--color-slate-700-10);
    --alpha-slate-700-5: var(--color-slate-700-5);
    --alpha-slate-800-100: var(--color-slate-800-100);
    --alpha-slate-800-90: var(--color-slate-800-90);
    --alpha-slate-800-80: var(--color-slate-800-80);
    --alpha-slate-800-70: var(--color-slate-800-70);
    --alpha-slate-800-60: var(--color-slate-800-60);
    --alpha-slate-800-50: var(--color-slate-800-50);
    --alpha-slate-800-40: var(--color-slate-800-40);
    --alpha-slate-800-30: var(--color-slate-800-30);
    --alpha-slate-800-20: var(--color-slate-800-20);
    --alpha-slate-800-10: var(--color-slate-800-10);
    --alpha-slate-800-5: var(--color-slate-800-5);
    --alpha-slate-900-100: var(--color-slate-900-100);
    --alpha-slate-900-90: var(--color-slate-900-90);
    --alpha-slate-900-80: var(--color-slate-900-80);
    --alpha-slate-900-70: var(--color-slate-900-70);
    --alpha-slate-900-60: var(--color-slate-900-60);
    --alpha-slate-900-50: var(--color-slate-900-50);
    --alpha-slate-900-40: var(--color-slate-900-40);
    --alpha-slate-900-30: var(--color-slate-900-30);
    --alpha-slate-900-20: var(--color-slate-900-20);
    --alpha-slate-900-10: var(--color-slate-900-10);
    --alpha-slate-900-5: var(--color-slate-900-5);
    --alpha-slate-950-100: var(--color-slate-950-100);
    --alpha-slate-950-90: var(--color-slate-950-90);
    --alpha-slate-950-80: var(--color-slate-950-80);
    --alpha-slate-950-70: var(--color-slate-950-70);
    --alpha-slate-950-60: var(--color-slate-950-60);
    --alpha-slate-950-50: var(--color-slate-950-50);
    --alpha-slate-950-40: var(--color-slate-950-40);
    --alpha-slate-950-30: var(--color-slate-950-30);
    --alpha-slate-950-20: var(--color-slate-950-20);
    --alpha-slate-950-10: var(--color-slate-950-10);
    --alpha-slate-950-5: var(--color-slate-950-5);
    --utility-gray-50: var(--color-gray-50);
    --utility-gray-100: var(--color-gray-100);
    --utility-gray-200: var(--color-gray-200);
    --utility-gray-300: var(--color-gray-300);
    --utility-gray-400: var(--color-gray-400);
    --utility-gray-500: var(--color-gray-500);
    --utility-gray-600: var(--color-gray-600);
    --utility-gray-700: var(--color-gray-700);
    --utility-gray-800: var(--color-gray-800);
    --utility-gray-900: var(--color-gray-900);
    --utility-gray-950: var(--color-gray-950);
    --alpha-gray-50-100: var(--color-gray-50-100);
    --alpha-gray-50-90: var(--color-gray-50-90);
    --alpha-gray-50-80: var(--color-gray-50-80);
    --alpha-gray-50-70: var(--color-gray-50-70);
    --alpha-gray-50-60: var(--color-gray-50-60);
    --alpha-gray-50-50: var(--color-gray-50-50);
    --alpha-gray-50-40: var(--color-gray-50-40);
    --alpha-gray-50-30: var(--color-gray-50-30);
    --alpha-gray-50-20: var(--color-gray-50-20);
    --alpha-gray-50-10: var(--color-gray-50-10);
    --alpha-gray-50-5: var(--color-gray-50-5);
    --alpha-gray-100-100: var(--color-gray-100-100);
    --alpha-gray-100-90: var(--color-gray-100-90);
    --alpha-gray-100-80: var(--color-gray-100-80);
    --alpha-gray-100-70: var(--color-gray-100-70);
    --alpha-gray-100-60: var(--color-gray-100-60);
    --alpha-gray-100-50: var(--color-gray-100-50);
    --alpha-gray-100-40: var(--color-gray-100-40);
    --alpha-gray-100-30: var(--color-gray-100-30);
    --alpha-gray-100-20: var(--color-gray-100-20);
    --alpha-gray-100-10: var(--color-gray-100-10);
    --alpha-gray-100-5: var(--color-gray-100-5);
    --alpha-gray-200-100: var(--color-gray-200-100);
    --alpha-gray-200-90: var(--color-gray-200-90);
    --alpha-gray-200-80: var(--color-gray-200-80);
    --alpha-gray-200-70: var(--color-gray-200-70);
    --alpha-gray-200-60: var(--color-gray-200-60);
    --alpha-gray-200-50: var(--color-gray-200-50);
    --alpha-gray-200-40: var(--color-gray-200-40);
    --alpha-gray-200-30: var(--color-gray-200-30);
    --alpha-gray-200-20: var(--color-gray-200-20);
    --alpha-gray-200-10: var(--color-gray-200-10);
    --alpha-gray-200-5: var(--color-gray-200-5);
    --alpha-gray-300-100: var(--color-gray-300-100);
    --alpha-gray-300-90: var(--color-gray-300-90);
    --alpha-gray-300-80: var(--color-gray-300-80);
    --alpha-gray-300-70: var(--color-gray-300-70);
    --alpha-gray-300-60: var(--color-gray-300-60);
    --alpha-gray-300-50: var(--color-gray-300-50);
    --alpha-gray-300-40: var(--color-gray-300-40);
    --alpha-gray-300-30: var(--color-gray-300-30);
    --alpha-gray-300-20: var(--color-gray-300-20);
    --alpha-gray-300-10: var(--color-gray-300-10);
    --alpha-gray-300-5: var(--color-gray-300-5);
    --alpha-gray-400-100: var(--color-gray-400-100);
    --alpha-gray-400-90: var(--color-gray-400-90);
    --alpha-gray-400-80: var(--color-gray-400-80);
    --alpha-gray-400-70: var(--color-gray-400-70);
    --alpha-gray-400-60: var(--color-gray-400-60);
    --alpha-gray-400-50: var(--color-gray-400-50);
    --alpha-gray-400-40: var(--color-gray-400-40);
    --alpha-gray-400-30: var(--color-gray-400-30);
    --alpha-gray-400-20: var(--color-gray-400-20);
    --alpha-gray-400-10: var(--color-gray-400-10);
    --alpha-gray-400-5: var(--color-gray-400-5);
    --alpha-gray-500-100: var(--color-gray-500-100);
    --alpha-gray-500-90: var(--color-gray-500-90);
    --alpha-gray-500-80: var(--color-gray-500-80);
    --alpha-gray-500-70: var(--color-gray-500-70);
    --alpha-gray-500-60: var(--color-gray-500-60);
    --alpha-gray-500-50: var(--color-gray-500-50);
    --alpha-gray-500-40: var(--color-gray-500-40);
    --alpha-gray-500-30: var(--color-gray-500-30);
    --alpha-gray-500-20: var(--color-gray-500-20);
    --alpha-gray-500-10: var(--color-gray-500-10);
    --alpha-gray-500-5: var(--color-gray-500-5);
    --alpha-gray-600-100: var(--color-gray-600-100);
    --alpha-gray-600-90: var(--color-gray-600-90);
    --alpha-gray-600-80: var(--color-gray-600-80);
    --alpha-gray-600-70: var(--color-gray-600-70);
    --alpha-gray-600-60: var(--color-gray-600-60);
    --alpha-gray-600-50: var(--color-gray-600-50);
    --alpha-gray-600-40: var(--color-gray-600-40);
    --alpha-gray-600-30: var(--color-gray-600-30);
    --alpha-gray-600-20: var(--color-gray-600-20);
    --alpha-gray-600-10: var(--color-gray-600-10);
    --alpha-gray-600-5: var(--color-gray-600-5);
    --alpha-gray-700-100: var(--color-gray-700-100);
    --alpha-gray-700-90: var(--color-gray-700-90);
    --alpha-gray-700-80: var(--color-gray-700-80);
    --alpha-gray-700-70: var(--color-gray-700-70);
    --alpha-gray-700-60: var(--color-gray-700-60);
    --alpha-gray-700-50: var(--color-gray-700-50);
    --alpha-gray-700-40: var(--color-gray-700-40);
    --alpha-gray-700-30: var(--color-gray-700-30);
    --alpha-gray-700-20: var(--color-gray-700-20);
    --alpha-gray-700-10: var(--color-gray-700-10);
    --alpha-gray-700-5: var(--color-gray-700-5);
    --alpha-gray-800-100: var(--color-gray-800-100);
    --alpha-gray-800-90: var(--color-gray-800-90);
    --alpha-gray-800-80: var(--color-gray-800-80);
    --alpha-gray-800-70: var(--color-gray-800-70);
    --alpha-gray-800-60: var(--color-gray-800-60);
    --alpha-gray-800-50: var(--color-gray-800-50);
    --alpha-gray-800-40: var(--color-gray-800-40);
    --alpha-gray-800-30: var(--color-gray-800-30);
    --alpha-gray-800-20: var(--color-gray-800-20);
    --alpha-gray-800-10: var(--color-gray-800-10);
    --alpha-gray-800-5: var(--color-gray-800-5);
    --alpha-gray-900-100: var(--color-gray-900-100);
    --alpha-gray-900-90: var(--color-gray-900-90);
    --alpha-gray-900-80: var(--color-gray-900-80);
    --alpha-gray-900-70: var(--color-gray-900-70);
    --alpha-gray-900-60: var(--color-gray-900-60);
    --alpha-gray-900-50: var(--color-gray-900-50);
    --alpha-gray-900-40: var(--color-gray-900-40);
    --alpha-gray-900-30: var(--color-gray-900-30);
    --alpha-gray-900-20: var(--color-gray-900-20);
    --alpha-gray-900-10: var(--color-gray-900-10);
    --alpha-gray-900-5: var(--color-gray-900-5);
    --alpha-gray-950-100: var(--color-gray-950-100);
    --alpha-gray-950-90: var(--color-gray-950-90);
    --alpha-gray-950-80: var(--color-gray-950-80);
    --alpha-gray-950-70: var(--color-gray-950-70);
    --alpha-gray-950-60: var(--color-gray-950-60);
    --alpha-gray-950-50: var(--color-gray-950-50);
    --alpha-gray-950-40: var(--color-gray-950-40);
    --alpha-gray-950-30: var(--color-gray-950-30);
    --alpha-gray-950-20: var(--color-gray-950-20);
    --alpha-gray-950-10: var(--color-gray-950-10);
    --alpha-gray-950-5: var(--color-gray-950-5);
    --utility-zinc-50: var(--color-zinc-50);
    --utility-zinc-100: var(--color-zinc-100);
    --utility-zinc-200: var(--color-zinc-200);
    --utility-zinc-300: var(--color-zinc-300);
    --utility-zinc-400: var(--color-zinc-400);
    --utility-zinc-500: var(--color-zinc-500);
    --utility-zinc-600: var(--color-zinc-600);
    --utility-zinc-700: var(--color-zinc-700);
    --utility-zinc-800: var(--color-zinc-800);
    --utility-zinc-900: var(--color-zinc-900);
    --utility-zinc-950: var(--color-zinc-950);
    --alpha-zinc-50-100: var(--color-zinc-50-100);
    --alpha-zinc-50-90: var(--color-zinc-50-90);
    --alpha-zinc-50-80: var(--color-zinc-50-80);
    --alpha-zinc-50-70: var(--color-zinc-50-70);
    --alpha-zinc-50-60: var(--color-zinc-50-60);
    --alpha-zinc-50-50: var(--color-zinc-50-50);
    --alpha-zinc-50-40: var(--color-zinc-50-40);
    --alpha-zinc-50-30: var(--color-zinc-50-30);
    --alpha-zinc-50-20: var(--color-zinc-50-20);
    --alpha-zinc-50-10: var(--color-zinc-50-10);
    --alpha-zinc-50-5: var(--color-zinc-50-5);
    --alpha-zinc-100-100: var(--color-zinc-100-100);
    --alpha-zinc-100-90: var(--color-zinc-100-90);
    --alpha-zinc-100-80: var(--color-zinc-100-80);
    --alpha-zinc-100-70: var(--color-zinc-100-70);
    --alpha-zinc-100-60: var(--color-zinc-100-60);
    --alpha-zinc-100-50: var(--color-zinc-100-50);
    --alpha-zinc-100-40: var(--color-zinc-100-40);
    --alpha-zinc-100-30: var(--color-zinc-100-30);
    --alpha-zinc-100-20: var(--color-zinc-100-20);
    --alpha-zinc-100-10: var(--color-zinc-100-10);
    --alpha-zinc-100-5: var(--color-zinc-100-5);
    --alpha-zinc-200-100: var(--color-zinc-200-100);
    --alpha-zinc-200-90: var(--color-zinc-200-90);
    --alpha-zinc-200-80: var(--color-zinc-200-80);
    --alpha-zinc-200-70: var(--color-zinc-200-70);
    --alpha-zinc-200-60: var(--color-zinc-200-60);
    --alpha-zinc-200-50: var(--color-zinc-200-50);
    --alpha-zinc-200-40: var(--color-zinc-200-40);
    --alpha-zinc-200-30: var(--color-zinc-200-30);
    --alpha-zinc-200-20: var(--color-zinc-200-20);
    --alpha-zinc-200-10: var(--color-zinc-200-10);
    --alpha-zinc-200-5: var(--color-zinc-200-5);
    --alpha-zinc-300-100: var(--color-zinc-300-100);
    --alpha-zinc-300-90: var(--color-zinc-300-90);
    --alpha-zinc-300-80: var(--color-zinc-300-80);
    --alpha-zinc-300-70: var(--color-zinc-300-70);
    --alpha-zinc-300-60: var(--color-zinc-300-60);
    --alpha-zinc-300-50: var(--color-zinc-300-50);
    --alpha-zinc-300-40: var(--color-zinc-300-40);
    --alpha-zinc-300-30: var(--color-zinc-300-30);
    --alpha-zinc-300-20: var(--color-zinc-300-20);
    --alpha-zinc-300-10: var(--color-zinc-300-10);
    --alpha-zinc-300-5: var(--color-zinc-300-5);
    --alpha-zinc-400-100: var(--color-zinc-400-100);
    --alpha-zinc-400-90: var(--color-zinc-400-90);
    --alpha-zinc-400-80: var(--color-zinc-400-80);
    --alpha-zinc-400-70: var(--color-zinc-400-70);
    --alpha-zinc-400-60: var(--color-zinc-400-60);
    --alpha-zinc-400-50: var(--color-zinc-400-50);
    --alpha-zinc-400-40: var(--color-zinc-400-40);
    --alpha-zinc-400-30: var(--color-zinc-400-30);
    --alpha-zinc-400-20: var(--color-zinc-400-20);
    --alpha-zinc-400-10: var(--color-zinc-400-10);
    --alpha-zinc-400-5: var(--color-zinc-400-5);
    --alpha-zinc-500-100: var(--color-zinc-500-100);
    --alpha-zinc-500-90: var(--color-zinc-500-90);
    --alpha-zinc-500-80: var(--color-zinc-500-80);
    --alpha-zinc-500-70: var(--color-zinc-500-70);
    --alpha-zinc-500-60: var(--color-zinc-500-60);
    --alpha-zinc-500-50: var(--color-zinc-500-50);
    --alpha-zinc-500-40: var(--color-zinc-500-40);
    --alpha-zinc-500-30: var(--color-zinc-500-30);
    --alpha-zinc-500-20: var(--color-zinc-500-20);
    --alpha-zinc-500-10: var(--color-zinc-500-10);
    --alpha-zinc-500-5: var(--color-zinc-500-5);
    --alpha-zinc-600-100: var(--color-zinc-600-100);
    --alpha-zinc-600-90: var(--color-zinc-600-90);
    --alpha-zinc-600-80: var(--color-zinc-600-80);
    --alpha-zinc-600-70: var(--color-zinc-600-70);
    --alpha-zinc-600-60: var(--color-zinc-600-60);
    --alpha-zinc-600-50: var(--color-zinc-600-50);
    --alpha-zinc-600-40: var(--color-zinc-600-40);
    --alpha-zinc-600-30: var(--color-zinc-600-30);
    --alpha-zinc-600-20: var(--color-zinc-600-20);
    --alpha-zinc-600-10: var(--color-zinc-600-10);
    --alpha-zinc-600-5: var(--color-zinc-600-5);
    --alpha-zinc-700-100: var(--color-zinc-700-100);
    --alpha-zinc-700-90: var(--color-zinc-700-90);
    --alpha-zinc-700-80: var(--color-zinc-700-80);
    --alpha-zinc-700-70: var(--color-zinc-700-70);
    --alpha-zinc-700-60: var(--color-zinc-700-60);
    --alpha-zinc-700-50: var(--color-zinc-700-50);
    --alpha-zinc-700-40: var(--color-zinc-700-40);
    --alpha-zinc-700-30: var(--color-zinc-700-30);
    --alpha-zinc-700-20: var(--color-zinc-700-20);
    --alpha-zinc-700-10: var(--color-zinc-700-10);
    --alpha-zinc-700-5: var(--color-zinc-700-5);
    --alpha-zinc-800-100: var(--color-zinc-800-100);
    --alpha-zinc-800-90: var(--color-zinc-800-90);
    --alpha-zinc-800-80: var(--color-zinc-800-80);
    --alpha-zinc-800-70: var(--color-zinc-800-70);
    --alpha-zinc-800-60: var(--color-zinc-800-60);
    --alpha-zinc-800-50: var(--color-zinc-800-50);
    --alpha-zinc-800-40: var(--color-zinc-800-40);
    --alpha-zinc-800-30: var(--color-zinc-800-30);
    --alpha-zinc-800-20: var(--color-zinc-800-20);
    --alpha-zinc-800-10: var(--color-zinc-800-10);
    --alpha-zinc-800-5: var(--color-zinc-800-5);
    --alpha-zinc-900-100: var(--color-zinc-900-100);
    --alpha-zinc-900-90: var(--color-zinc-900-90);
    --alpha-zinc-900-80: var(--color-zinc-900-80);
    --alpha-zinc-900-70: var(--color-zinc-900-70);
    --alpha-zinc-900-60: var(--color-zinc-900-60);
    --alpha-zinc-900-50: var(--color-zinc-900-50);
    --alpha-zinc-900-40: var(--color-zinc-900-40);
    --alpha-zinc-900-30: var(--color-zinc-900-30);
    --alpha-zinc-900-20: var(--color-zinc-900-20);
    --alpha-zinc-900-10: var(--color-zinc-900-10);
    --alpha-zinc-900-5: var(--color-zinc-900-5);
    --alpha-zinc-950-100: var(--color-zinc-950-100);
    --alpha-zinc-950-90: var(--color-zinc-950-90);
    --alpha-zinc-950-80: var(--color-zinc-950-80);
    --alpha-zinc-950-70: var(--color-zinc-950-70);
    --alpha-zinc-950-60: var(--color-zinc-950-60);
    --alpha-zinc-950-50: var(--color-zinc-950-50);
    --alpha-zinc-950-40: var(--color-zinc-950-40);
    --alpha-zinc-950-30: var(--color-zinc-950-30);
    --alpha-zinc-950-20: var(--color-zinc-950-20);
    --alpha-zinc-950-10: var(--color-zinc-950-10);
    --alpha-zinc-950-5: var(--color-zinc-950-5);
    --utility-neutral-50: var(--color-neutral-50);
    --utility-neutral-100: var(--color-neutral-100);
    --utility-neutral-200: var(--color-neutral-200);
    --utility-neutral-300: var(--color-neutral-300);
    --utility-neutral-400: var(--color-neutral-400);
    --utility-neutral-500: var(--color-neutral-500);
    --utility-neutral-600: var(--color-neutral-600);
    --utility-neutral-700: var(--color-neutral-700);
    --utility-neutral-750: var(--color-neutral-750);
    --utility-neutral-800: var(--color-neutral-800);
    --utility-neutral-850: var(--color-neutral-850);
    --utility-neutral-900: var(--color-neutral-900);
    --utility-neutral-950: var(--color-neutral-950);
    --alpha-neutral-50-100: var(--color-neutral-50-100);
    --alpha-neutral-50-90: var(--color-neutral-50-90);
    --alpha-neutral-50-80: var(--color-neutral-50-80);
    --alpha-neutral-50-70: var(--color-neutral-50-70);
    --alpha-neutral-50-60: var(--color-neutral-50-60);
    --alpha-neutral-50-50: var(--color-neutral-50-50);
    --alpha-neutral-50-40: var(--color-neutral-50-40);
    --alpha-neutral-50-30: var(--color-neutral-50-30);
    --alpha-neutral-50-20: var(--color-neutral-50-20);
    --alpha-neutral-50-10: var(--color-neutral-50-10);
    --alpha-neutral-50-5: var(--color-neutral-50-5);
    --alpha-neutral-100-100: var(--color-neutral-100-100);
    --alpha-neutral-100-90: var(--color-neutral-100-90);
    --alpha-neutral-100-80: var(--color-neutral-100-80);
    --alpha-neutral-100-70: var(--color-neutral-100-70);
    --alpha-neutral-100-60: var(--color-neutral-100-60);
    --alpha-neutral-100-50: var(--color-neutral-100-50);
    --alpha-neutral-100-40: var(--color-neutral-100-40);
    --alpha-neutral-100-30: var(--color-neutral-100-30);
    --alpha-neutral-100-20: var(--color-neutral-100-20);
    --alpha-neutral-100-10: var(--color-neutral-100-10);
    --alpha-neutral-100-5: var(--color-neutral-100-5);
    --alpha-neutral-200-100: var(--color-neutral-200-100);
    --alpha-neutral-200-90: var(--color-neutral-200-90);
    --alpha-neutral-200-80: var(--color-neutral-200-80);
    --alpha-neutral-200-70: var(--color-neutral-200-70);
    --alpha-neutral-200-60: var(--color-neutral-200-60);
    --alpha-neutral-200-50: var(--color-neutral-200-50);
    --alpha-neutral-200-40: var(--color-neutral-200-40);
    --alpha-neutral-200-30: var(--color-neutral-200-30);
    --alpha-neutral-200-20: var(--color-neutral-200-20);
    --alpha-neutral-200-10: var(--color-neutral-200-10);
    --alpha-neutral-200-5: var(--color-neutral-200-5);
    --alpha-neutral-300-100: var(--color-neutral-300-100);
    --alpha-neutral-300-90: var(--color-neutral-300-90);
    --alpha-neutral-300-80: var(--color-neutral-300-80);
    --alpha-neutral-300-70: var(--color-neutral-300-70);
    --alpha-neutral-300-60: var(--color-neutral-300-60);
    --alpha-neutral-300-50: var(--color-neutral-300-50);
    --alpha-neutral-300-40: var(--color-neutral-300-40);
    --alpha-neutral-300-30: var(--color-neutral-300-30);
    --alpha-neutral-300-20: var(--color-neutral-300-20);
    --alpha-neutral-300-10: var(--color-neutral-300-10);
    --alpha-neutral-300-5: var(--color-neutral-300-5);
    --alpha-neutral-400-100: var(--color-neutral-400-100);
    --alpha-neutral-400-90: var(--color-neutral-400-90);
    --alpha-neutral-400-80: var(--color-neutral-400-80);
    --alpha-neutral-400-70: var(--color-neutral-400-70);
    --alpha-neutral-400-60: var(--color-neutral-400-60);
    --alpha-neutral-400-50: var(--color-neutral-400-50);
    --alpha-neutral-400-40: var(--color-neutral-400-40);
    --alpha-neutral-400-30: var(--color-neutral-400-30);
    --alpha-neutral-400-20: var(--color-neutral-400-20);
    --alpha-neutral-400-10: var(--color-neutral-400-10);
    --alpha-neutral-400-5: var(--color-neutral-400-5);
    --alpha-neutral-500-100: var(--color-neutral-500-100);
    --alpha-neutral-500-90: var(--color-neutral-500-90);
    --alpha-neutral-500-80: var(--color-neutral-500-80);
    --alpha-neutral-500-70: var(--color-neutral-500-70);
    --alpha-neutral-500-60: var(--color-neutral-500-60);
    --alpha-neutral-500-50: var(--color-neutral-500-50);
    --alpha-neutral-500-40: var(--color-neutral-500-40);
    --alpha-neutral-500-30: var(--color-neutral-500-30);
    --alpha-neutral-500-20: var(--color-neutral-500-20);
    --alpha-neutral-500-10: var(--color-neutral-500-10);
    --alpha-neutral-500-5: var(--color-neutral-500-5);
    --alpha-neutral-600-100: var(--color-neutral-600-100);
    --alpha-neutral-600-90: var(--color-neutral-600-90);
    --alpha-neutral-600-80: var(--color-neutral-600-80);
    --alpha-neutral-600-70: var(--color-neutral-600-70);
    --alpha-neutral-600-60: var(--color-neutral-600-60);
    --alpha-neutral-600-50: var(--color-neutral-600-50);
    --alpha-neutral-600-40: var(--color-neutral-600-40);
    --alpha-neutral-600-30: var(--color-neutral-600-30);
    --alpha-neutral-600-20: var(--color-neutral-600-20);
    --alpha-neutral-600-10: var(--color-neutral-600-10);
    --alpha-neutral-600-5: var(--color-neutral-600-5);
    --alpha-neutral-700-100: var(--color-neutral-700-100);
    --alpha-neutral-700-90: var(--color-neutral-700-90);
    --alpha-neutral-700-80: var(--color-neutral-700-80);
    --alpha-neutral-700-70: var(--color-neutral-700-70);
    --alpha-neutral-700-60: var(--color-neutral-700-60);
    --alpha-neutral-700-50: var(--color-neutral-700-50);
    --alpha-neutral-700-40: var(--color-neutral-700-40);
    --alpha-neutral-700-30: var(--color-neutral-700-30);
    --alpha-neutral-700-20: var(--color-neutral-700-20);
    --alpha-neutral-700-10: var(--color-neutral-700-10);
    --alpha-neutral-700-5: var(--color-neutral-700-5);
    --alpha-neutral-750-100: var(--color-neutral-750-100);
    --alpha-neutral-750-90: var(--color-neutral-750-90);
    --alpha-neutral-750-80: var(--color-neutral-750-80);
    --alpha-neutral-750-70: var(--color-neutral-750-70);
    --alpha-neutral-750-60: var(--color-neutral-750-60);
    --alpha-neutral-750-50: var(--color-neutral-750-50);
    --alpha-neutral-750-40: var(--color-neutral-750-40);
    --alpha-neutral-750-30: var(--color-neutral-750-30);
    --alpha-neutral-750-20: var(--color-neutral-750-20);
    --alpha-neutral-750-10: var(--color-neutral-750-10);
    --alpha-neutral-750-5: var(--color-neutral-750-5);
    --alpha-neutral-800-100: var(--color-neutral-800-100);
    --alpha-neutral-800-90: var(--color-neutral-800-90);
    --alpha-neutral-800-80: var(--color-neutral-800-80);
    --alpha-neutral-800-70: var(--color-neutral-800-70);
    --alpha-neutral-800-60: var(--color-neutral-800-60);
    --alpha-neutral-800-50: var(--color-neutral-800-50);
    --alpha-neutral-800-40: var(--color-neutral-800-40);
    --alpha-neutral-800-30: var(--color-neutral-800-30);
    --alpha-neutral-800-20: var(--color-neutral-800-20);
    --alpha-neutral-800-10: var(--color-neutral-800-10);
    --alpha-neutral-800-5: var(--color-neutral-800-5);
    --alpha-neutral-850-100: var(--color-neutral-850-100);
    --alpha-neutral-850-90: var(--color-neutral-850-90);
    --alpha-neutral-850-80: var(--color-neutral-850-80);
    --alpha-neutral-850-70: var(--color-neutral-850-70);
    --alpha-neutral-850-60: var(--color-neutral-850-60);
    --alpha-neutral-850-50: var(--color-neutral-850-50);
    --alpha-neutral-850-40: var(--color-neutral-850-40);
    --alpha-neutral-850-30: var(--color-neutral-850-30);
    --alpha-neutral-850-20: var(--color-neutral-850-20);
    --alpha-neutral-850-10: var(--color-neutral-850-10);
    --alpha-neutral-850-5: var(--color-neutral-850-5);
    --alpha-neutral-900-100: var(--color-neutral-900-100);
    --alpha-neutral-900-90: var(--color-neutral-900-90);
    --alpha-neutral-900-80: var(--color-neutral-900-80);
    --alpha-neutral-900-70: var(--color-neutral-900-70);
    --alpha-neutral-900-60: var(--color-neutral-900-60);
    --alpha-neutral-900-50: var(--color-neutral-900-50);
    --alpha-neutral-900-40: var(--color-neutral-900-40);
    --alpha-neutral-900-30: var(--color-neutral-900-30);
    --alpha-neutral-900-20: var(--color-neutral-900-20);
    --alpha-neutral-900-10: var(--color-neutral-900-10);
    --alpha-neutral-900-5: var(--color-neutral-900-5);
    --alpha-neutral-950-100: var(--color-neutral-950-100);
    --alpha-neutral-950-90: var(--color-neutral-950-90);
    --alpha-neutral-950-80: var(--color-neutral-950-80);
    --alpha-neutral-950-70: var(--color-neutral-950-70);
    --alpha-neutral-950-60: var(--color-neutral-950-60);
    --alpha-neutral-950-50: var(--color-neutral-950-50);
    --alpha-neutral-950-40: var(--color-neutral-950-40);
    --alpha-neutral-950-30: var(--color-neutral-950-30);
    --alpha-neutral-950-20: var(--color-neutral-950-20);
    --alpha-neutral-950-10: var(--color-neutral-950-10);
    --alpha-neutral-950-5: var(--color-neutral-950-5);
    --utility-stone-50: var(--color-stone-50);
    --utility-stone-100: var(--color-stone-100);
    --utility-stone-200: var(--color-stone-200);
    --utility-stone-300: var(--color-stone-300);
    --utility-stone-400: var(--color-stone-400);
    --utility-stone-500: var(--color-stone-500);
    --utility-stone-600: var(--color-stone-600);
    --utility-stone-700: var(--color-stone-700);
    --utility-stone-800: var(--color-stone-800);
    --utility-stone-900: var(--color-stone-900);
    --alpha-stone-50-100: var(--color-stone-50-100);
    --alpha-stone-50-90: var(--color-stone-50-90);
    --alpha-stone-50-80: var(--color-stone-50-80);
    --alpha-stone-50-70: var(--color-stone-50-70);
    --alpha-stone-50-60: var(--color-stone-50-60);
    --alpha-stone-50-50: var(--color-stone-50-50);
    --alpha-stone-50-40: var(--color-stone-50-40);
    --alpha-stone-50-30: var(--color-stone-50-30);
    --alpha-stone-50-20: var(--color-stone-50-20);
    --alpha-stone-50-10: var(--color-stone-50-10);
    --alpha-stone-50-5: var(--color-stone-50-5);
    --alpha-stone-100-100: var(--color-stone-100-100);
    --alpha-stone-100-90: var(--color-stone-100-90);
    --alpha-stone-100-80: var(--color-stone-100-80);
    --alpha-stone-100-70: var(--color-stone-100-70);
    --alpha-stone-100-60: var(--color-stone-100-60);
    --alpha-stone-100-50: var(--color-stone-100-50);
    --alpha-stone-100-40: var(--color-stone-100-40);
    --alpha-stone-100-30: var(--color-stone-100-30);
    --alpha-stone-100-20: var(--color-stone-100-20);
    --alpha-stone-100-10: var(--color-stone-100-10);
    --alpha-stone-100-5: var(--color-stone-100-5);
    --alpha-stone-200-100: var(--color-stone-200-100);
    --alpha-stone-200-90: var(--color-stone-200-90);
    --alpha-stone-200-80: var(--color-stone-200-80);
    --alpha-stone-200-70: var(--color-stone-200-70);
    --alpha-stone-200-60: var(--color-stone-200-60);
    --alpha-stone-200-50: var(--color-stone-200-50);
    --alpha-stone-200-40: var(--color-stone-200-40);
    --alpha-stone-200-30: var(--color-stone-200-30);
    --alpha-stone-200-20: var(--color-stone-200-20);
    --alpha-stone-200-10: var(--color-stone-200-10);
    --alpha-stone-200-5: var(--color-stone-200-5);
    --alpha-stone-300-100: var(--color-stone-300-100);
    --alpha-stone-300-90: var(--color-stone-300-90);
    --alpha-stone-300-80: var(--color-stone-300-80);
    --alpha-stone-300-70: var(--color-stone-300-70);
    --alpha-stone-300-60: var(--color-stone-300-60);
    --alpha-stone-300-50: var(--color-stone-300-50);
    --alpha-stone-300-40: var(--color-stone-300-40);
    --alpha-stone-300-30: var(--color-stone-300-30);
    --alpha-stone-300-20: var(--color-stone-300-20);
    --alpha-stone-300-10: var(--color-stone-300-10);
    --alpha-stone-300-5: var(--color-stone-300-5);
    --alpha-stone-400-100: var(--color-stone-400-100);
    --alpha-stone-400-90: var(--color-stone-400-90);
    --alpha-stone-400-80: var(--color-stone-400-80);
    --alpha-stone-400-70: var(--color-stone-400-70);
    --alpha-stone-400-60: var(--color-stone-400-60);
    --alpha-stone-400-50: var(--color-stone-400-50);
    --alpha-stone-400-40: var(--color-stone-400-40);
    --alpha-stone-400-30: var(--color-stone-400-30);
    --alpha-stone-400-20: var(--color-stone-400-20);
    --alpha-stone-400-10: var(--color-stone-400-10);
    --alpha-stone-400-5: var(--color-stone-400-5);
    --alpha-stone-500-100: var(--color-stone-500-100);
    --alpha-stone-500-90: var(--color-stone-500-90);
    --alpha-stone-500-80: var(--color-stone-500-80);
    --alpha-stone-500-70: var(--color-stone-500-70);
    --alpha-stone-500-60: var(--color-stone-500-60);
    --alpha-stone-500-50: var(--color-stone-500-50);
    --alpha-stone-500-40: var(--color-stone-500-40);
    --alpha-stone-500-30: var(--color-stone-500-30);
    --alpha-stone-500-20: var(--color-stone-500-20);
    --alpha-stone-500-10: var(--color-stone-500-10);
    --alpha-stone-500-5: var(--color-stone-500-5);
    --alpha-stone-600-100: var(--color-stone-600-100);
    --alpha-stone-600-90: var(--color-stone-600-90);
    --alpha-stone-600-80: var(--color-stone-600-80);
    --alpha-stone-600-70: var(--color-stone-600-70);
    --alpha-stone-600-60: var(--color-stone-600-60);
    --alpha-stone-600-50: var(--color-stone-600-50);
    --alpha-stone-600-40: var(--color-stone-600-40);
    --alpha-stone-600-30: var(--color-stone-600-30);
    --alpha-stone-600-20: var(--color-stone-600-20);
    --alpha-stone-600-10: var(--color-stone-600-10);
    --alpha-stone-600-5: var(--color-stone-600-5);
    --alpha-stone-700-100: var(--color-stone-700-100);
    --alpha-stone-700-90: var(--color-stone-700-90);
    --alpha-stone-700-80: var(--color-stone-700-80);
    --alpha-stone-700-70: var(--color-stone-700-70);
    --alpha-stone-700-60: var(--color-stone-700-60);
    --alpha-stone-700-50: var(--color-stone-700-50);
    --alpha-stone-700-40: var(--color-stone-700-40);
    --alpha-stone-700-30: var(--color-stone-700-30);
    --alpha-stone-700-20: var(--color-stone-700-20);
    --alpha-stone-700-10: var(--color-stone-700-10);
    --alpha-stone-700-5: var(--color-stone-700-5);
    --alpha-stone-800-100: var(--color-stone-800-100);
    --alpha-stone-800-90: var(--color-stone-800-90);
    --alpha-stone-800-80: var(--color-stone-800-80);
    --alpha-stone-800-70: var(--color-stone-800-70);
    --alpha-stone-800-60: var(--color-stone-800-60);
    --alpha-stone-800-50: var(--color-stone-800-50);
    --alpha-stone-800-40: var(--color-stone-800-40);
    --alpha-stone-800-30: var(--color-stone-800-30);
    --alpha-stone-800-20: var(--color-stone-800-20);
    --alpha-stone-800-10: var(--color-stone-800-10);
    --alpha-stone-800-5: var(--color-stone-800-5);
    --alpha-stone-900-100: var(--color-stone-900-100);
    --alpha-stone-900-90: var(--color-stone-900-90);
    --alpha-stone-900-80: var(--color-stone-900-80);
    --alpha-stone-900-70: var(--color-stone-900-70);
    --alpha-stone-900-60: var(--color-stone-900-60);
    --alpha-stone-900-50: var(--color-stone-900-50);
    --alpha-stone-900-40: var(--color-stone-900-40);
    --alpha-stone-900-30: var(--color-stone-900-30);
    --alpha-stone-900-20: var(--color-stone-900-20);
    --alpha-stone-900-10: var(--color-stone-900-10);
    --alpha-stone-900-5: var(--color-stone-900-5);
    --alpha-stone-950-100: var(--color-stone-950-100);
    --alpha-stone-950-90: var(--color-stone-950-90);
    --alpha-stone-950-80: var(--color-stone-950-80);
    --alpha-stone-950-70: var(--color-stone-950-70);
    --alpha-stone-950-60: var(--color-stone-950-60);
    --alpha-stone-950-50: var(--color-stone-950-50);
    --alpha-stone-950-40: var(--color-stone-950-40);
    --alpha-stone-950-30: var(--color-stone-950-30);
    --alpha-stone-950-20: var(--color-stone-950-20);
    --alpha-stone-950-10: var(--color-stone-950-10);
    --alpha-stone-950-5: var(--color-stone-950-5);
  }
  .border-red-50 {
    border-color: var(--color-red-50);
  }
  .border-red-100 {
    border-color: var(--color-red-100);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-red-300 {
    border-color: var(--color-red-300);
  }
  .border-red-400 {
    border-color: var(--color-red-400);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-red-600 {
    border-color: var(--color-red-600);
  }
  .border-red-700 {
    border-color: var(--color-red-700);
  }
  .border-red-800 {
    border-color: var(--color-red-800);
  }
  .border-red-900 {
    border-color: var(--color-red-900);
  }
  .border-red-950 {
    border-color: var(--color-red-950);
  }
  .border-orange-50 {
    border-color: var(--color-orange-50);
  }
  .border-orange-100 {
    border-color: var(--color-orange-100);
  }
  .border-orange-200 {
    border-color: var(--color-orange-200);
  }
  .border-orange-300 {
    border-color: var(--color-orange-300);
  }
  .border-orange-400 {
    border-color: var(--color-orange-400);
  }
  .border-orange-500 {
    border-color: var(--color-orange-500);
  }
  .border-orange-600 {
    border-color: var(--color-orange-600);
  }
  .border-orange-700 {
    border-color: var(--color-orange-700);
  }
  .border-orange-800 {
    border-color: var(--color-orange-800);
  }
  .border-orange-900 {
    border-color: var(--color-orange-900);
  }
  .border-orange-950 {
    border-color: var(--color-orange-950);
  }
  .border-amber-50 {
    border-color: var(--color-amber-50);
  }
  .border-amber-100 {
    border-color: var(--color-amber-100);
  }
  .border-amber-200 {
    border-color: var(--color-amber-200);
  }
  .border-amber-300 {
    border-color: var(--color-amber-300);
  }
  .border-amber-400 {
    border-color: var(--color-amber-400);
  }
  .border-amber-500 {
    border-color: var(--color-amber-500);
  }
  .border-amber-600 {
    border-color: var(--color-amber-600);
  }
  .border-amber-700 {
    border-color: var(--color-amber-700);
  }
  .border-amber-800 {
    border-color: var(--color-amber-800);
  }
  .border-amber-900 {
    border-color: var(--color-amber-900);
  }
  .border-amber-950 {
    border-color: var(--color-amber-950);
  }
  .border-yellow-50 {
    border-color: var(--color-yellow-50);
  }
  .border-yellow-100 {
    border-color: var(--color-yellow-100);
  }
  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }
  .border-yellow-300 {
    border-color: var(--color-yellow-300);
  }
  .border-yellow-400 {
    border-color: var(--color-yellow-400);
  }
  .border-yellow-500 {
    border-color: var(--color-yellow-500);
  }
  .border-yellow-600 {
    border-color: var(--color-yellow-600);
  }
  .border-yellow-700 {
    border-color: var(--color-yellow-700);
  }
  .border-yellow-800 {
    border-color: var(--color-yellow-800);
  }
  .border-yellow-900 {
    border-color: var(--color-yellow-900);
  }
  .border-yellow-950 {
    border-color: var(--color-yellow-950);
  }
  .border-lime-50 {
    border-color: var(--color-lime-50);
  }
  .border-lime-100 {
    border-color: var(--color-lime-100);
  }
  .border-lime-200 {
    border-color: var(--color-lime-200);
  }
  .border-lime-300 {
    border-color: var(--color-lime-300);
  }
  .border-lime-400 {
    border-color: var(--color-lime-400);
  }
  .border-lime-500 {
    border-color: var(--color-lime-500);
  }
  .border-lime-600 {
    border-color: var(--color-lime-600);
  }
  .border-lime-700 {
    border-color: var(--color-lime-700);
  }
  .border-lime-800 {
    border-color: var(--color-lime-800);
  }
  .border-lime-900 {
    border-color: var(--color-lime-900);
  }
  .border-lime-950 {
    border-color: var(--color-lime-950);
  }
  .border-green-50 {
    border-color: var(--color-green-50);
  }
  .border-green-100 {
    border-color: var(--color-green-100);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .border-green-300 {
    border-color: var(--color-green-300);
  }
  .border-green-400 {
    border-color: var(--color-green-400);
  }
  .border-green-500 {
    border-color: var(--color-green-500);
  }
  .border-green-600 {
    border-color: var(--color-green-600);
  }
  .border-green-700 {
    border-color: var(--color-green-700);
  }
  .border-green-800 {
    border-color: var(--color-green-800);
  }
  .border-green-900 {
    border-color: var(--color-green-900);
  }
  .border-green-950 {
    border-color: var(--color-green-950);
  }
  .border-emerald-50 {
    border-color: var(--color-emerald-50);
  }
  .border-emerald-100 {
    border-color: var(--color-emerald-100);
  }
  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }
  .border-emerald-300 {
    border-color: var(--color-emerald-300);
  }
  .border-emerald-400 {
    border-color: var(--color-emerald-400);
  }
  .border-emerald-500 {
    border-color: var(--color-emerald-500);
  }
  .border-emerald-600 {
    border-color: var(--color-emerald-600);
  }
  .border-emerald-700 {
    border-color: var(--color-emerald-700);
  }
  .border-emerald-800 {
    border-color: var(--color-emerald-800);
  }
  .border-emerald-900 {
    border-color: var(--color-emerald-900);
  }
  .border-emerald-950 {
    border-color: var(--color-emerald-950);
  }
  .border-teal-50 {
    border-color: var(--color-teal-50);
  }
  .border-teal-100 {
    border-color: var(--color-teal-100);
  }
  .border-teal-200 {
    border-color: var(--color-teal-200);
  }
  .border-teal-300 {
    border-color: var(--color-teal-300);
  }
  .border-teal-400 {
    border-color: var(--color-teal-400);
  }
  .border-teal-500 {
    border-color: var(--color-teal-500);
  }
  .border-teal-600 {
    border-color: var(--color-teal-600);
  }
  .border-teal-700 {
    border-color: var(--color-teal-700);
  }
  .border-teal-800 {
    border-color: var(--color-teal-800);
  }
  .border-teal-900 {
    border-color: var(--color-teal-900);
  }
  .border-teal-950 {
    border-color: var(--color-teal-950);
  }
  .border-cyan-50 {
    border-color: var(--color-cyan-50);
  }
  .border-cyan-100 {
    border-color: var(--color-cyan-100);
  }
  .border-cyan-200 {
    border-color: var(--color-cyan-200);
  }
  .border-cyan-300 {
    border-color: var(--color-cyan-300);
  }
  .border-cyan-400 {
    border-color: var(--color-cyan-400);
  }
  .border-cyan-500 {
    border-color: var(--color-cyan-500);
  }
  .border-cyan-600 {
    border-color: var(--color-cyan-600);
  }
  .border-cyan-700 {
    border-color: var(--color-cyan-700);
  }
  .border-cyan-800 {
    border-color: var(--color-cyan-800);
  }
  .border-cyan-900 {
    border-color: var(--color-cyan-900);
  }
  .border-cyan-950 {
    border-color: var(--color-cyan-950);
  }
  .border-sky-50 {
    border-color: var(--color-sky-50);
  }
  .border-sky-100 {
    border-color: var(--color-sky-100);
  }
  .border-sky-200 {
    border-color: var(--color-sky-200);
  }
  .border-sky-300 {
    border-color: var(--color-sky-300);
  }
  .border-sky-400 {
    border-color: var(--color-sky-400);
  }
  .border-sky-500 {
    border-color: var(--color-sky-500);
  }
  .border-sky-600 {
    border-color: var(--color-sky-600);
  }
  .border-sky-700 {
    border-color: var(--color-sky-700);
  }
  .border-sky-800 {
    border-color: var(--color-sky-800);
  }
  .border-sky-900 {
    border-color: var(--color-sky-900);
  }
  .border-sky-950 {
    border-color: var(--color-sky-950);
  }
  .border-blue-50 {
    border-color: var(--color-blue-50);
  }
  .border-blue-100 {
    border-color: var(--color-blue-100);
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .border-blue-300 {
    border-color: var(--color-blue-300);
  }
  .border-blue-400 {
    border-color: var(--color-blue-400);
  }
  .border-blue-500 {
    border-color: var(--color-blue-500);
  }
  .border-blue-600 {
    border-color: var(--color-blue-600);
  }
  .border-blue-700 {
    border-color: var(--color-blue-700);
  }
  .border-blue-800 {
    border-color: var(--color-blue-800);
  }
  .border-blue-900 {
    border-color: var(--color-blue-900);
  }
  .border-blue-950 {
    border-color: var(--color-blue-950);
  }
  .border-indigo-50 {
    border-color: var(--color-indigo-50);
  }
  .border-indigo-100 {
    border-color: var(--color-indigo-100);
  }
  .border-indigo-200 {
    border-color: var(--color-indigo-200);
  }
  .border-indigo-300 {
    border-color: var(--color-indigo-300);
  }
  .border-indigo-400 {
    border-color: var(--color-indigo-400);
  }
  .border-indigo-500 {
    border-color: var(--color-indigo-500);
  }
  .border-indigo-600 {
    border-color: var(--color-indigo-600);
  }
  .border-indigo-700 {
    border-color: var(--color-indigo-700);
  }
  .border-indigo-800 {
    border-color: var(--color-indigo-800);
  }
  .border-indigo-900 {
    border-color: var(--color-indigo-900);
  }
  .border-indigo-950 {
    border-color: var(--color-indigo-950);
  }
  .border-violet-50 {
    border-color: var(--color-violet-50);
  }
  .border-violet-100 {
    border-color: var(--color-violet-100);
  }
  .border-violet-200 {
    border-color: var(--color-violet-200);
  }
  .border-violet-300 {
    border-color: var(--color-violet-300);
  }
  .border-violet-400 {
    border-color: var(--color-violet-400);
  }
  .border-violet-500 {
    border-color: var(--color-violet-500);
  }
  .border-violet-600 {
    border-color: var(--color-violet-600);
  }
  .border-violet-700 {
    border-color: var(--color-violet-700);
  }
  .border-violet-800 {
    border-color: var(--color-violet-800);
  }
  .border-violet-900 {
    border-color: var(--color-violet-900);
  }
  .border-violet-950 {
    border-color: var(--color-violet-950);
  }
  .border-purple-50 {
    border-color: var(--color-purple-50);
  }
  .border-purple-100 {
    border-color: var(--color-purple-100);
  }
  .border-purple-200 {
    border-color: var(--color-purple-200);
  }
  .border-purple-300 {
    border-color: var(--color-purple-300);
  }
  .border-purple-400 {
    border-color: var(--color-purple-400);
  }
  .border-purple-500 {
    border-color: var(--color-purple-500);
  }
  .border-purple-600 {
    border-color: var(--color-purple-600);
  }
  .border-purple-700 {
    border-color: var(--color-purple-700);
  }
  .border-purple-800 {
    border-color: var(--color-purple-800);
  }
  .border-purple-900 {
    border-color: var(--color-purple-900);
  }
  .border-purple-950 {
    border-color: var(--color-purple-950);
  }
  .border-fuchsia-50 {
    border-color: var(--color-fuchsia-50);
  }
  .border-fuchsia-100 {
    border-color: var(--color-fuchsia-100);
  }
  .border-fuchsia-200 {
    border-color: var(--color-fuchsia-200);
  }
  .border-fuchsia-300 {
    border-color: var(--color-fuchsia-300);
  }
  .border-fuchsia-400 {
    border-color: var(--color-fuchsia-400);
  }
  .border-fuchsia-500 {
    border-color: var(--color-fuchsia-500);
  }
  .border-fuchsia-600 {
    border-color: var(--color-fuchsia-600);
  }
  .border-fuchsia-700 {
    border-color: var(--color-fuchsia-700);
  }
  .border-fuchsia-800 {
    border-color: var(--color-fuchsia-800);
  }
  .border-fuchsia-900 {
    border-color: var(--color-fuchsia-900);
  }
  .border-fuchsia-950 {
    border-color: var(--color-fuchsia-950);
  }
  .border-pink-50 {
    border-color: var(--color-pink-50);
  }
  .border-pink-100 {
    border-color: var(--color-pink-100);
  }
  .border-pink-200 {
    border-color: var(--color-pink-200);
  }
  .border-pink-300 {
    border-color: var(--color-pink-300);
  }
  .border-pink-400 {
    border-color: var(--color-pink-400);
  }
  .border-pink-500 {
    border-color: var(--color-pink-500);
  }
  .border-pink-600 {
    border-color: var(--color-pink-600);
  }
  .border-pink-700 {
    border-color: var(--color-pink-700);
  }
  .border-pink-800 {
    border-color: var(--color-pink-800);
  }
  .border-pink-900 {
    border-color: var(--color-pink-900);
  }
  .border-pink-950 {
    border-color: var(--color-pink-950);
  }
  .border-rose-50 {
    border-color: var(--color-rose-50);
  }
  .border-rose-100 {
    border-color: var(--color-rose-100);
  }
  .border-rose-200 {
    border-color: var(--color-rose-200);
  }
  .border-rose-300 {
    border-color: var(--color-rose-300);
  }
  .border-rose-400 {
    border-color: var(--color-rose-400);
  }
  .border-rose-500 {
    border-color: var(--color-rose-500);
  }
  .border-rose-600 {
    border-color: var(--color-rose-600);
  }
  .border-rose-700 {
    border-color: var(--color-rose-700);
  }
  .border-rose-800 {
    border-color: var(--color-rose-800);
  }
  .border-rose-900 {
    border-color: var(--color-rose-900);
  }
  .border-rose-950 {
    border-color: var(--color-rose-950);
  }
  .border-slate-50 {
    border-color: var(--color-slate-50);
  }
  .border-slate-100 {
    border-color: var(--color-slate-100);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-300 {
    border-color: var(--color-slate-300);
  }
  .border-slate-400 {
    border-color: var(--color-slate-400);
  }
  .border-slate-500 {
    border-color: var(--color-slate-500);
  }
  .border-slate-600 {
    border-color: var(--color-slate-600);
  }
  .border-slate-700 {
    border-color: var(--color-slate-700);
  }
  .border-slate-800 {
    border-color: var(--color-slate-800);
  }
  .border-slate-900 {
    border-color: var(--color-slate-900);
  }
  .border-slate-950 {
    border-color: var(--color-slate-950);
  }
  .border-gray-50 {
    border-color: var(--color-gray-50);
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-gray-400 {
    border-color: var(--color-gray-400);
  }
  .border-gray-500 {
    border-color: var(--color-gray-500);
  }
  .border-gray-600 {
    border-color: var(--color-gray-600);
  }
  .border-gray-700 {
    border-color: var(--color-gray-700);
  }
  .border-gray-800 {
    border-color: var(--color-gray-800);
  }
  .border-gray-900 {
    border-color: var(--color-gray-900);
  }
  .border-gray-950 {
    border-color: var(--color-gray-950);
  }
  .border-natural-50 {
    border-color: var(--color-natural-50);
  }
  .border-natural-100 {
    border-color: var(--color-natural-100);
  }
  .border-natural-200 {
    border-color: var(--color-natural-200);
  }
  .border-natural-300 {
    border-color: var(--color-natural-300);
  }
  .border-natural-400 {
    border-color: var(--color-natural-400);
  }
  .border-natural-500 {
    border-color: var(--color-natural-500);
  }
  .border-natural-600 {
    border-color: var(--color-natural-600);
  }
  .border-natural-700 {
    border-color: var(--color-natural-700);
  }
  .border-natural-800 {
    border-color: var(--color-natural-800);
  }
  .border-natural-900 {
    border-color: var(--color-natural-900);
  }
  .border-natural-950 {
    border-color: var(--color-natural-950);
  }
  .border-stone-50 {
    border-color: var(--color-stone-50);
  }
  .border-stone-100 {
    border-color: var(--color-stone-100);
  }
  .border-stone-200 {
    border-color: var(--color-stone-200);
  }
  .border-stone-300 {
    border-color: var(--color-stone-300);
  }
  .border-stone-400 {
    border-color: var(--color-stone-400);
  }
  .border-stone-500 {
    border-color: var(--color-stone-500);
  }
  .border-stone-600 {
    border-color: var(--color-stone-600);
  }
  .border-stone-700 {
    border-color: var(--color-stone-700);
  }
  .border-stone-800 {
    border-color: var(--color-stone-800);
  }
  .border-stone-900 {
    border-color: var(--color-stone-900);
  }
  .border-stone-950 {
    border-color: var(--color-stone-950);
  }
  .text-red-50 {
    color: var(--color-red-50);
  }
  .text-red-100 {
    color: var(--color-red-100);
  }
  .text-red-200 {
    color: var(--color-red-200);
  }
  .text-red-300 {
    color: var(--color-red-300);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-red-900 {
    color: var(--color-red-900);
  }
  .text-red-950 {
    color: var(--color-red-950);
  }
  .text-orange-50 {
    color: var(--color-orange-50);
  }
  .text-orange-100 {
    color: var(--color-orange-100);
  }
  .text-orange-200 {
    color: var(--color-orange-200);
  }
  .text-orange-300 {
    color: var(--color-orange-300);
  }
  .text-orange-400 {
    color: var(--color-orange-400);
  }
  .text-orange-500 {
    color: var(--color-orange-500);
  }
  .text-orange-600 {
    color: var(--color-orange-600);
  }
  .text-orange-700 {
    color: var(--color-orange-700);
  }
  .text-orange-800 {
    color: var(--color-orange-800);
  }
  .text-orange-900 {
    color: var(--color-orange-900);
  }
  .text-orange-950 {
    color: var(--color-orange-950);
  }
  .text-amber-50 {
    color: var(--color-amber-50);
  }
  .text-amber-100 {
    color: var(--color-amber-100);
  }
  .text-amber-200 {
    color: var(--color-amber-200);
  }
  .text-amber-300 {
    color: var(--color-amber-300);
  }
  .text-amber-400 {
    color: var(--color-amber-400);
  }
  .text-amber-500 {
    color: var(--color-amber-500);
  }
  .text-amber-600 {
    color: var(--color-amber-600);
  }
  .text-amber-700 {
    color: var(--color-amber-700);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-amber-900 {
    color: var(--color-amber-900);
  }
  .text-amber-950 {
    color: var(--color-amber-950);
  }
  .text-yellow-50 {
    color: var(--color-yellow-50);
  }
  .text-yellow-100 {
    color: var(--color-yellow-100);
  }
  .text-yellow-200 {
    color: var(--color-yellow-200);
  }
  .text-yellow-300 {
    color: var(--color-yellow-300);
  }
  .text-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-yellow-700 {
    color: var(--color-yellow-700);
  }
  .text-yellow-800 {
    color: var(--color-yellow-800);
  }
  .text-yellow-900 {
    color: var(--color-yellow-900);
  }
  .text-yellow-950 {
    color: var(--color-yellow-950);
  }
  .text-lime-50 {
    color: var(--color-lime-50);
  }
  .text-lime-100 {
    color: var(--color-lime-100);
  }
  .text-lime-200 {
    color: var(--color-lime-200);
  }
  .text-lime-300 {
    color: var(--color-lime-300);
  }
  .text-lime-400 {
    color: var(--color-lime-400);
  }
  .text-lime-500 {
    color: var(--color-lime-500);
  }
  .text-lime-600 {
    color: var(--color-lime-600);
  }
  .text-lime-700 {
    color: var(--color-lime-700);
  }
  .text-lime-800 {
    color: var(--color-lime-800);
  }
  .text-lime-900 {
    color: var(--color-lime-900);
  }
  .text-lime-950 {
    color: var(--color-lime-950);
  }
  .text-green-50 {
    color: var(--color-green-50);
  }
  .text-green-100 {
    color: var(--color-green-100);
  }
  .text-green-200 {
    color: var(--color-green-200);
  }
  .text-green-300 {
    color: var(--color-green-300);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-green-900 {
    color: var(--color-green-900);
  }
  .text-green-950 {
    color: var(--color-green-950);
  }
  .text-emerald-50 {
    color: var(--color-emerald-50);
  }
  .text-emerald-100 {
    color: var(--color-emerald-100);
  }
  .text-emerald-200 {
    color: var(--color-emerald-200);
  }
  .text-emerald-300 {
    color: var(--color-emerald-300);
  }
  .text-emerald-400 {
    color: var(--color-emerald-400);
  }
  .text-emerald-500 {
    color: var(--color-emerald-500);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .text-emerald-700 {
    color: var(--color-emerald-700);
  }
  .text-emerald-800 {
    color: var(--color-emerald-800);
  }
  .text-emerald-900 {
    color: var(--color-emerald-900);
  }
  .text-emerald-950 {
    color: var(--color-emerald-950);
  }
  .text-teal-50 {
    color: var(--color-teal-50);
  }
  .text-teal-100 {
    color: var(--color-teal-100);
  }
  .text-teal-200 {
    color: var(--color-teal-200);
  }
  .text-teal-300 {
    color: var(--color-teal-300);
  }
  .text-teal-400 {
    color: var(--color-teal-400);
  }
  .text-teal-500 {
    color: var(--color-teal-500);
  }
  .text-teal-600 {
    color: var(--color-teal-600);
  }
  .text-teal-700 {
    color: var(--color-teal-700);
  }
  .text-teal-800 {
    color: var(--color-teal-800);
  }
  .text-teal-900 {
    color: var(--color-teal-900);
  }
  .text-teal-950 {
    color: var(--color-teal-950);
  }
  .text-cyan-50 {
    color: var(--color-cyan-50);
  }
  .text-cyan-100 {
    color: var(--color-cyan-100);
  }
  .text-cyan-200 {
    color: var(--color-cyan-200);
  }
  .text-cyan-300 {
    color: var(--color-cyan-300);
  }
  .text-cyan-400 {
    color: var(--color-cyan-400);
  }
  .text-cyan-500 {
    color: var(--color-cyan-500);
  }
  .text-cyan-600 {
    color: var(--color-cyan-600);
  }
  .text-cyan-700 {
    color: var(--color-cyan-700);
  }
  .text-cyan-800 {
    color: var(--color-cyan-800);
  }
  .text-cyan-900 {
    color: var(--color-cyan-900);
  }
  .text-cyan-950 {
    color: var(--color-cyan-950);
  }
  .text-sky-50 {
    color: var(--color-sky-50);
  }
  .text-sky-100 {
    color: var(--color-sky-100);
  }
  .text-sky-200 {
    color: var(--color-sky-200);
  }
  .text-sky-300 {
    color: var(--color-sky-300);
  }
  .text-sky-400 {
    color: var(--color-sky-400);
  }
  .text-sky-500 {
    color: var(--color-sky-500);
  }
  .text-sky-600 {
    color: var(--color-sky-600);
  }
  .text-sky-700 {
    color: var(--color-sky-700);
  }
  .text-sky-800 {
    color: var(--color-sky-800);
  }
  .text-sky-900 {
    color: var(--color-sky-900);
  }
  .text-sky-950 {
    color: var(--color-sky-950);
  }
  .text-blue-50 {
    color: var(--color-blue-50);
  }
  .text-blue-100 {
    color: var(--color-blue-100);
  }
  .text-blue-200 {
    color: var(--color-blue-200);
  }
  .text-blue-300 {
    color: var(--color-blue-300);
  }
  .text-blue-400 {
    color: var(--color-blue-400);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-blue-800 {
    color: var(--color-blue-800);
  }
  .text-blue-900 {
    color: var(--color-blue-900);
  }
  .text-blue-950 {
    color: var(--color-blue-950);
  }
  .text-indigo-50 {
    color: var(--color-indigo-50);
  }
  .text-indigo-100 {
    color: var(--color-indigo-100);
  }
  .text-indigo-200 {
    color: var(--color-indigo-200);
  }
  .text-indigo-300 {
    color: var(--color-indigo-300);
  }
  .text-indigo-400 {
    color: var(--color-indigo-400);
  }
  .text-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-indigo-800 {
    color: var(--color-indigo-800);
  }
  .text-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-indigo-950 {
    color: var(--color-indigo-950);
  }
  .text-violet-50 {
    color: var(--color-violet-50);
  }
  .text-violet-100 {
    color: var(--color-violet-100);
  }
  .text-violet-200 {
    color: var(--color-violet-200);
  }
  .text-violet-300 {
    color: var(--color-violet-300);
  }
  .text-violet-400 {
    color: var(--color-violet-400);
  }
  .text-violet-500 {
    color: var(--color-violet-500);
  }
  .text-violet-600 {
    color: var(--color-violet-600);
  }
  .text-violet-700 {
    color: var(--color-violet-700);
  }
  .text-violet-800 {
    color: var(--color-violet-800);
  }
  .text-violet-900 {
    color: var(--color-violet-900);
  }
  .text-violet-950 {
    color: var(--color-violet-950);
  }
  .text-purple-50 {
    color: var(--color-purple-50);
  }
  .text-purple-100 {
    color: var(--color-purple-100);
  }
  .text-purple-200 {
    color: var(--color-purple-200);
  }
  .text-purple-300 {
    color: var(--color-purple-300);
  }
  .text-purple-400 {
    color: var(--color-purple-400);
  }
  .text-purple-500 {
    color: var(--color-purple-500);
  }
  .text-purple-600 {
    color: var(--color-purple-600);
  }
  .text-purple-700 {
    color: var(--color-purple-700);
  }
  .text-purple-800 {
    color: var(--color-purple-800);
  }
  .text-purple-900 {
    color: var(--color-purple-900);
  }
  .text-purple-950 {
    color: var(--color-purple-950);
  }
  .text-fuchsia-50 {
    color: var(--color-fuchsia-50);
  }
  .text-fuchsia-100 {
    color: var(--color-fuchsia-100);
  }
  .text-fuchsia-200 {
    color: var(--color-fuchsia-200);
  }
  .text-fuchsia-300 {
    color: var(--color-fuchsia-300);
  }
  .text-fuchsia-400 {
    color: var(--color-fuchsia-400);
  }
  .text-fuchsia-500 {
    color: var(--color-fuchsia-500);
  }
  .text-fuchsia-600 {
    color: var(--color-fuchsia-600);
  }
  .text-fuchsia-700 {
    color: var(--color-fuchsia-700);
  }
  .text-fuchsia-800 {
    color: var(--color-fuchsia-800);
  }
  .text-fuchsia-900 {
    color: var(--color-fuchsia-900);
  }
  .text-fuchsia-950 {
    color: var(--color-fuchsia-950);
  }
  .text-pink-50 {
    color: var(--color-pink-50);
  }
  .text-pink-100 {
    color: var(--color-pink-100);
  }
  .text-pink-200 {
    color: var(--color-pink-200);
  }
  .text-pink-300 {
    color: var(--color-pink-300);
  }
  .text-pink-400 {
    color: var(--color-pink-400);
  }
  .text-pink-500 {
    color: var(--color-pink-500);
  }
  .text-pink-600 {
    color: var(--color-pink-600);
  }
  .text-pink-700 {
    color: var(--color-pink-700);
  }
  .text-pink-800 {
    color: var(--color-pink-800);
  }
  .text-pink-900 {
    color: var(--color-pink-900);
  }
  .text-pink-950 {
    color: var(--color-pink-950);
  }
  .text-rose-50 {
    color: var(--color-rose-50);
  }
  .text-rose-100 {
    color: var(--color-rose-100);
  }
  .text-rose-200 {
    color: var(--color-rose-200);
  }
  .text-rose-300 {
    color: var(--color-rose-300);
  }
  .text-rose-400 {
    color: var(--color-rose-400);
  }
  .text-rose-500 {
    color: var(--color-rose-500);
  }
  .text-rose-600 {
    color: var(--color-rose-600);
  }
  .text-rose-700 {
    color: var(--color-rose-700);
  }
  .text-rose-800 {
    color: var(--color-rose-800);
  }
  .text-rose-900 {
    color: var(--color-rose-900);
  }
  .text-rose-950 {
    color: var(--color-rose-950);
  }
  .text-slate-50 {
    color: var(--color-slate-50);
  }
  .text-slate-100 {
    color: var(--color-slate-100);
  }
  .text-slate-200 {
    color: var(--color-slate-200);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-800 {
    color: var(--color-slate-800);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-slate-950 {
    color: var(--color-slate-950);
  }
  .text-gray-50 {
    color: var(--color-gray-50);
  }
  .text-gray-100 {
    color: var(--color-gray-100);
  }
  .text-gray-200 {
    color: var(--color-gray-200);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-gray-950 {
    color: var(--color-gray-950);
  }
  .text-natural-50 {
    color: var(--color-natural-50);
  }
  .text-natural-100 {
    color: var(--color-natural-100);
  }
  .text-natural-200 {
    color: var(--color-natural-200);
  }
  .text-natural-300 {
    color: var(--color-natural-300);
  }
  .text-natural-400 {
    color: var(--color-natural-400);
  }
  .text-natural-500 {
    color: var(--color-natural-500);
  }
  .text-natural-600 {
    color: var(--color-natural-600);
  }
  .text-natural-700 {
    color: var(--color-natural-700);
  }
  .text-natural-800 {
    color: var(--color-natural-800);
  }
  .text-natural-900 {
    color: var(--color-natural-900);
  }
  .text-natural-950 {
    color: var(--color-natural-950);
  }
  .text-stone-50 {
    color: var(--color-stone-50);
  }
  .text-stone-100 {
    color: var(--color-stone-100);
  }
  .text-stone-200 {
    color: var(--color-stone-200);
  }
  .text-stone-300 {
    color: var(--color-stone-300);
  }
  .text-stone-400 {
    color: var(--color-stone-400);
  }
  .text-stone-500 {
    color: var(--color-stone-500);
  }
  .text-stone-600 {
    color: var(--color-stone-600);
  }
  .text-stone-700 {
    color: var(--color-stone-700);
  }
  .text-stone-800 {
    color: var(--color-stone-800);
  }
  .text-stone-900 {
    color: var(--color-stone-900);
  }
  .text-stone-950 {
    color: var(--color-stone-950);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-red-200 {
    background-color: var(--color-red-200);
  }
  .bg-red-300 {
    background-color: var(--color-red-300);
  }
  .bg-red-400 {
    background-color: var(--color-red-400);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-red-700 {
    background-color: var(--color-red-700);
  }
  .bg-red-800 {
    background-color: var(--color-red-800);
  }
  .bg-red-900 {
    background-color: var(--color-red-900);
  }
  .bg-red-950 {
    background-color: var(--color-red-950);
  }
  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }
  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }
  .bg-orange-200 {
    background-color: var(--color-orange-200);
  }
  .bg-orange-300 {
    background-color: var(--color-orange-300);
  }
  .bg-orange-400 {
    background-color: var(--color-orange-400);
  }
  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }
  .bg-orange-600 {
    background-color: var(--color-orange-600);
  }
  .bg-orange-700 {
    background-color: var(--color-orange-700);
  }
  .bg-orange-800 {
    background-color: var(--color-orange-800);
  }
  .bg-orange-900 {
    background-color: var(--color-orange-900);
  }
  .bg-orange-950 {
    background-color: var(--color-orange-950);
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-amber-200 {
    background-color: var(--color-amber-200);
  }
  .bg-amber-300 {
    background-color: var(--color-amber-300);
  }
  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }
  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }
  .bg-amber-600 {
    background-color: var(--color-amber-600);
  }
  .bg-amber-700 {
    background-color: var(--color-amber-700);
  }
  .bg-amber-800 {
    background-color: var(--color-amber-800);
  }
  .bg-amber-900 {
    background-color: var(--color-amber-900);
  }
  .bg-amber-950 {
    background-color: var(--color-amber-950);
  }
  .bg-yellow-50 {
    background-color: var(--color-yellow-50);
  }
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .bg-yellow-200 {
    background-color: var(--color-yellow-200);
  }
  .bg-yellow-300 {
    background-color: var(--color-yellow-300);
  }
  .bg-yellow-400 {
    background-color: var(--color-yellow-400);
  }
  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }
  .bg-yellow-600 {
    background-color: var(--color-yellow-600);
  }
  .bg-yellow-700 {
    background-color: var(--color-yellow-700);
  }
  .bg-yellow-800 {
    background-color: var(--color-yellow-800);
  }
  .bg-yellow-900 {
    background-color: var(--color-yellow-900);
  }
  .bg-yellow-950 {
    background-color: var(--color-yellow-950);
  }
  .bg-lime-50 {
    background-color: var(--color-lime-50);
  }
  .bg-lime-100 {
    background-color: var(--color-lime-100);
  }
  .bg-lime-200 {
    background-color: var(--color-lime-200);
  }
  .bg-lime-300 {
    background-color: var(--color-lime-300);
  }
  .bg-lime-400 {
    background-color: var(--color-lime-400);
  }
  .bg-lime-500 {
    background-color: var(--color-lime-500);
  }
  .bg-lime-600 {
    background-color: var(--color-lime-600);
  }
  .bg-lime-700 {
    background-color: var(--color-lime-700);
  }
  .bg-lime-800 {
    background-color: var(--color-lime-800);
  }
  .bg-lime-900 {
    background-color: var(--color-lime-900);
  }
  .bg-lime-950 {
    background-color: var(--color-lime-950);
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .bg-green-200 {
    background-color: var(--color-green-200);
  }
  .bg-green-300 {
    background-color: var(--color-green-300);
  }
  .bg-green-400 {
    background-color: var(--color-green-400);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-green-600 {
    background-color: var(--color-green-600);
  }
  .bg-green-700 {
    background-color: var(--color-green-700);
  }
  .bg-green-800 {
    background-color: var(--color-green-800);
  }
  .bg-green-900 {
    background-color: var(--color-green-900);
  }
  .bg-green-950 {
    background-color: var(--color-green-950);
  }
  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }
  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }
  .bg-emerald-200 {
    background-color: var(--color-emerald-200);
  }
  .bg-emerald-300 {
    background-color: var(--color-emerald-300);
  }
  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }
  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }
  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }
  .bg-emerald-700 {
    background-color: var(--color-emerald-700);
  }
  .bg-emerald-800 {
    background-color: var(--color-emerald-800);
  }
  .bg-emerald-900 {
    background-color: var(--color-emerald-900);
  }
  .bg-emerald-950 {
    background-color: var(--color-emerald-950);
  }
  .bg-teal-50 {
    background-color: var(--color-teal-50);
  }
  .bg-teal-100 {
    background-color: var(--color-teal-100);
  }
  .bg-teal-200 {
    background-color: var(--color-teal-200);
  }
  .bg-teal-300 {
    background-color: var(--color-teal-300);
  }
  .bg-teal-400 {
    background-color: var(--color-teal-400);
  }
  .bg-teal-500 {
    background-color: var(--color-teal-500);
  }
  .bg-teal-600 {
    background-color: var(--color-teal-600);
  }
  .bg-teal-700 {
    background-color: var(--color-teal-700);
  }
  .bg-teal-800 {
    background-color: var(--color-teal-800);
  }
  .bg-teal-900 {
    background-color: var(--color-teal-900);
  }
  .bg-teal-950 {
    background-color: var(--color-teal-950);
  }
  .bg-cyan-50 {
    background-color: var(--color-cyan-50);
  }
  .bg-cyan-100 {
    background-color: var(--color-cyan-100);
  }
  .bg-cyan-200 {
    background-color: var(--color-cyan-200);
  }
  .bg-cyan-300 {
    background-color: var(--color-cyan-300);
  }
  .bg-cyan-400 {
    background-color: var(--color-cyan-400);
  }
  .bg-cyan-500 {
    background-color: var(--color-cyan-500);
  }
  .bg-cyan-600 {
    background-color: var(--color-cyan-600);
  }
  .bg-cyan-700 {
    background-color: var(--color-cyan-700);
  }
  .bg-cyan-800 {
    background-color: var(--color-cyan-800);
  }
  .bg-cyan-900 {
    background-color: var(--color-cyan-900);
  }
  .bg-cyan-950 {
    background-color: var(--color-cyan-950);
  }
  .bg-sky-50 {
    background-color: var(--color-sky-50);
  }
  .bg-sky-100 {
    background-color: var(--color-sky-100);
  }
  .bg-sky-200 {
    background-color: var(--color-sky-200);
  }
  .bg-sky-300 {
    background-color: var(--color-sky-300);
  }
  .bg-sky-400 {
    background-color: var(--color-sky-400);
  }
  .bg-sky-500 {
    background-color: var(--color-sky-500);
  }
  .bg-sky-600 {
    background-color: var(--color-sky-600);
  }
  .bg-sky-700 {
    background-color: var(--color-sky-700);
  }
  .bg-sky-800 {
    background-color: var(--color-sky-800);
  }
  .bg-sky-900 {
    background-color: var(--color-sky-900);
  }
  .bg-sky-950 {
    background-color: var(--color-sky-950);
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-blue-200 {
    background-color: var(--color-blue-200);
  }
  .bg-blue-300 {
    background-color: var(--color-blue-300);
  }
  .bg-blue-400 {
    background-color: var(--color-blue-400);
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }
  .bg-blue-800 {
    background-color: var(--color-blue-800);
  }
  .bg-blue-900 {
    background-color: var(--color-blue-900);
  }
  .bg-blue-950 {
    background-color: var(--color-blue-950);
  }
  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }
  .bg-indigo-100 {
    background-color: var(--color-indigo-100);
  }
  .bg-indigo-200 {
    background-color: var(--color-indigo-200);
  }
  .bg-indigo-300 {
    background-color: var(--color-indigo-300);
  }
  .bg-indigo-400 {
    background-color: var(--color-indigo-400);
  }
  .bg-indigo-500 {
    background-color: var(--color-indigo-500);
  }
  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }
  .bg-indigo-700 {
    background-color: var(--color-indigo-700);
  }
  .bg-indigo-800 {
    background-color: var(--color-indigo-800);
  }
  .bg-indigo-900 {
    background-color: var(--color-indigo-900);
  }
  .bg-indigo-950 {
    background-color: var(--color-indigo-950);
  }
  .bg-violet-50 {
    background-color: var(--color-violet-50);
  }
  .bg-violet-100 {
    background-color: var(--color-violet-100);
  }
  .bg-violet-200 {
    background-color: var(--color-violet-200);
  }
  .bg-violet-300 {
    background-color: var(--color-violet-300);
  }
  .bg-violet-400 {
    background-color: var(--color-violet-400);
  }
  .bg-violet-500 {
    background-color: var(--color-violet-500);
  }
  .bg-violet-600 {
    background-color: var(--color-violet-600);
  }
  .bg-violet-700 {
    background-color: var(--color-violet-700);
  }
  .bg-violet-800 {
    background-color: var(--color-violet-800);
  }
  .bg-violet-900 {
    background-color: var(--color-violet-900);
  }
  .bg-violet-950 {
    background-color: var(--color-violet-950);
  }
  .bg-purple-50 {
    background-color: var(--color-purple-50);
  }
  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }
  .bg-purple-200 {
    background-color: var(--color-purple-200);
  }
  .bg-purple-300 {
    background-color: var(--color-purple-300);
  }
  .bg-purple-400 {
    background-color: var(--color-purple-400);
  }
  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }
  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }
  .bg-purple-700 {
    background-color: var(--color-purple-700);
  }
  .bg-purple-800 {
    background-color: var(--color-purple-800);
  }
  .bg-purple-900 {
    background-color: var(--color-purple-900);
  }
  .bg-purple-950 {
    background-color: var(--color-purple-950);
  }
  .bg-fuchsia-50 {
    background-color: var(--color-fuchsia-50);
  }
  .bg-fuchsia-100 {
    background-color: var(--color-fuchsia-100);
  }
  .bg-fuchsia-200 {
    background-color: var(--color-fuchsia-200);
  }
  .bg-fuchsia-300 {
    background-color: var(--color-fuchsia-300);
  }
  .bg-fuchsia-400 {
    background-color: var(--color-fuchsia-400);
  }
  .bg-fuchsia-500 {
    background-color: var(--color-fuchsia-500);
  }
  .bg-fuchsia-600 {
    background-color: var(--color-fuchsia-600);
  }
  .bg-fuchsia-700 {
    background-color: var(--color-fuchsia-700);
  }
  .bg-fuchsia-800 {
    background-color: var(--color-fuchsia-800);
  }
  .bg-fuchsia-900 {
    background-color: var(--color-fuchsia-900);
  }
  .bg-fuchsia-950 {
    background-color: var(--color-fuchsia-950);
  }
  .bg-pink-50 {
    background-color: var(--color-pink-50);
  }
  .bg-pink-100 {
    background-color: var(--color-pink-100);
  }
  .bg-pink-200 {
    background-color: var(--color-pink-200);
  }
  .bg-pink-300 {
    background-color: var(--color-pink-300);
  }
  .bg-pink-400 {
    background-color: var(--color-pink-400);
  }
  .bg-pink-500 {
    background-color: var(--color-pink-500);
  }
  .bg-pink-600 {
    background-color: var(--color-pink-600);
  }
  .bg-pink-700 {
    background-color: var(--color-pink-700);
  }
  .bg-pink-800 {
    background-color: var(--color-pink-800);
  }
  .bg-pink-900 {
    background-color: var(--color-pink-900);
  }
  .bg-pink-950 {
    background-color: var(--color-pink-950);
  }
  .bg-rose-50 {
    background-color: var(--color-rose-50);
  }
  .bg-rose-100 {
    background-color: var(--color-rose-100);
  }
  .bg-rose-200 {
    background-color: var(--color-rose-200);
  }
  .bg-rose-300 {
    background-color: var(--color-rose-300);
  }
  .bg-rose-400 {
    background-color: var(--color-rose-400);
  }
  .bg-rose-500 {
    background-color: var(--color-rose-500);
  }
  .bg-rose-600 {
    background-color: var(--color-rose-600);
  }
  .bg-rose-700 {
    background-color: var(--color-rose-700);
  }
  .bg-rose-800 {
    background-color: var(--color-rose-800);
  }
  .bg-rose-900 {
    background-color: var(--color-rose-900);
  }
  .bg-rose-950 {
    background-color: var(--color-rose-950);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }
  .bg-slate-300 {
    background-color: var(--color-slate-300);
  }
  .bg-slate-400 {
    background-color: var(--color-slate-400);
  }
  .bg-slate-500 {
    background-color: var(--color-slate-500);
  }
  .bg-slate-600 {
    background-color: var(--color-slate-600);
  }
  .bg-slate-700 {
    background-color: var(--color-slate-700);
  }
  .bg-slate-800 {
    background-color: var(--color-slate-800);
  }
  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }
  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-gray-400 {
    background-color: var(--color-gray-400);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }
  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }
  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .bg-gray-950 {
    background-color: var(--color-gray-950);
  }
  .bg-natural-50 {
    background-color: var(--color-natural-50);
  }
  .bg-natural-100 {
    background-color: var(--color-natural-100);
  }
  .bg-natural-200 {
    background-color: var(--color-natural-200);
  }
  .bg-natural-300 {
    background-color: var(--color-natural-300);
  }
  .bg-natural-400 {
    background-color: var(--color-natural-400);
  }
  .bg-natural-500 {
    background-color: var(--color-natural-500);
  }
  .bg-natural-600 {
    background-color: var(--color-natural-600);
  }
  .bg-natural-700 {
    background-color: var(--color-natural-700);
  }
  .bg-natural-800 {
    background-color: var(--color-natural-800);
  }
  .bg-natural-900 {
    background-color: var(--color-natural-900);
  }
  .bg-natural-950 {
    background-color: var(--color-natural-950);
  }
  .bg-stone-50 {
    background-color: var(--color-stone-50);
  }
  .bg-stone-100 {
    background-color: var(--color-stone-100);
  }
  .bg-stone-200 {
    background-color: var(--color-stone-200);
  }
  .bg-stone-300 {
    background-color: var(--color-stone-300);
  }
  .bg-stone-400 {
    background-color: var(--color-stone-400);
  }
  .bg-stone-500 {
    background-color: var(--color-stone-500);
  }
  .bg-stone-600 {
    background-color: var(--color-stone-600);
  }
  .bg-stone-700 {
    background-color: var(--color-stone-700);
  }
  .bg-stone-800 {
    background-color: var(--color-stone-800);
  }
  .bg-stone-900 {
    background-color: var(--color-stone-900);
  }
  .bg-stone-950 {
    background-color: var(--color-stone-950);
  }
}
@layer utilities {
  @layer theme {
    :root, :host {
      --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
      --spacing: 0.25rem;
      --breakpoint-sm: 40rem;
      --breakpoint-md: 48rem;
      --breakpoint-xl: 80rem;
      --container-xs: 20rem;
      --container-sm: 24rem;
      --container-md: 28rem;
      --container-lg: 32rem;
      --container-xl: 36rem;
      --container-2xl: 42rem;
      --container-3xl: 48rem;
      --container-4xl: 56rem;
      --container-5xl: 64rem;
      --container-6xl: 72rem;
      --container-7xl: 80rem;
      --font-weight-light: 300;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --font-weight-extrabold: 800;
      --font-weight-black: 900;
      --tracking-tighter: -0.05em;
      --tracking-tight: -0.025em;
      --tracking-normal: 0em;
      --tracking-wide: 0.025em;
      --tracking-wider: 0.05em;
      --tracking-widest: 0.1em;
      --leading-tight: 1.25;
      --leading-snug: 1.375;
      --leading-relaxed: 1.625;
      --radius-xs: 0.125rem;
      --radius-sm: 0.25rem;
      --radius-md: 0.375rem;
      --radius-lg: 0.5rem;
      --radius-xl: 0.75rem;
      --radius-2xl: 1rem;
      --radius-3xl: 1.5rem;
      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
      --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
      --ease-in: cubic-bezier(0.4, 0, 1, 1);
      --ease-out: cubic-bezier(0, 0, 0.2, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
      --animate-spin: spin 1s linear infinite;
      --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
      --animate-bounce: bounce 1s infinite;
      --blur-xs: 4px;
      --blur-sm: 8px;
      --blur-md: 12px;
      --blur-lg: 16px;
      --blur-xl: 24px;
      --blur-3xl: 64px;
      --aspect-video: 16 / 9;
      --default-transition-duration: 150ms;
      --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      --default-font-family: var(--font-sans);
      --default-mono-font-family: var(--font-mono);
      --color-brand-50: oklch(98.5% 0.028 101);
      --color-brand-100: oklch(96.5% 0.058 99);
      --color-brand-200: oklch(93.0% 0.110 98);
      --color-brand-300: oklch(88.2% 0.152 96);
      --color-brand-400: oklch(84.5% 0.165 91);
      --color-brand-500: oklch(81.0% 0.163 87);
      --color-brand-600: oklch(78.0% 0.157 84);
      --color-brand-700: oklch(53.0% 0.118 74);
      --color-brand-800: oklch(45.0% 0.100 66);
      --color-brand-900: oklch(39.0% 0.086 62);
      --color-brand-950: oklch(28.0% 0.062 58);
      --radius-none: 0px;
      --radius-full: 9999px;
      --color-info-500: var(--color-blue-500);
      --control-h-xs: 24px;
      --control-h-sm: 32px;
      --control-h-md: 40px;
      --control-h-lg: 48px;
      --control-h-xl: 56px;
      --control-line-xs: 16px;
      --control-line-sm: 20px;
      --control-line-md: 24px;
      --control-line-lg: 24px;
      --control-line-xl: 24px;
      --control-fs-xs: 0.75rem;
      --control-fs-sm: 0.8125rem;
      --control-fs-md: 1rem;
      --control-fs-lg: 1rem;
      --control-fs-xl: 1rem;
      --control-border: 1px;
      --radius-colored-edge: 0px;
    }
  }
  @layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0 solid;
    }
    html, :host {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      tab-size: 4;
      font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
      font-feature-settings: var(--default-font-feature-settings, normal);
      font-variation-settings: var(--default-font-variation-settings, normal);
      -webkit-tap-highlight-color: transparent;
    }
    hr {
      height: 0;
      color: inherit;
      border-top-width: 1px;
    }
    abbr:where([title]) {
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted;
    }
    h1, h2, h3, h4, h5, h6 {
      font-size: inherit;
      font-weight: inherit;
    }
    a {
      color: inherit;
      -webkit-text-decoration: inherit;
      text-decoration: inherit;
    }
    b, strong {
      font-weight: bolder;
    }
    code, kbd, samp, pre {
      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
      font-feature-settings: var(--default-mono-font-feature-settings, normal);
      font-variation-settings: var(--default-mono-font-variation-settings, normal);
      font-size: 1em;
    }
    small {
      font-size: 80%;
    }
    sub, sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    sub {
      bottom: -0.25em;
    }
    sup {
      top: -0.5em;
    }
    table {
      text-indent: 0;
      border-color: inherit;
      border-collapse: collapse;
    }
    :-moz-focusring {
      outline: auto;
    }
    progress {
      vertical-align: baseline;
    }
    summary {
      display: list-item;
    }
    ol, ul, menu {
      list-style: none;
    }
    img, svg, video, canvas, audio, iframe, embed, object {
      display: block;
      vertical-align: middle;
    }
    img, video {
      max-width: 100%;
      height: auto;
    }
    button, input, select, optgroup, textarea, ::file-selector-button {
      font: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      letter-spacing: inherit;
      color: inherit;
      border-radius: 0;
      background-color: transparent;
      opacity: 1;
    }
    :where(select:is([multiple], [size])) optgroup {
      font-weight: bolder;
    }
    :where(select:is([multiple], [size])) optgroup option {
      padding-inline-start: 20px;
    }
    ::file-selector-button {
      margin-inline-end: 4px;
    }
    ::placeholder {
      opacity: 1;
    }
    @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
      ::placeholder {
        color: currentcolor;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, currentcolor 50%, transparent);
        }
      }
    }
    textarea {
      resize: vertical;
    }
    ::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    ::-webkit-date-and-time-value {
      min-height: 1lh;
      text-align: inherit;
    }
    ::-webkit-datetime-edit {
      display: inline-flex;
    }
    ::-webkit-datetime-edit-fields-wrapper {
      padding: 0;
    }
    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
      padding-block: 0;
    }
    ::-webkit-calendar-picker-indicator {
      line-height: 1;
    }
    :-moz-ui-invalid {
      box-shadow: none;
    }
    button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
      appearance: button;
    }
    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
      height: auto;
    }
    [hidden]:where(:not([hidden='until-found'])) {
      display: none !important;
    }
  }
  @layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button {
      border-color: var(--color-gray-200, currentcolor);
    }
    button:not(:disabled), select:not(:disabled), summary, [role="button"]:not([aria-disabled="true"]), [role="tab"]:not([aria-disabled="true"]), [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="switch"]:not([aria-disabled="true"]) {
      cursor: pointer;
    }
  }
}
@media (pointer: coarse) {
  :root {
    --control-h-xs: 44px;
    --control-h-sm: 44px;
    --control-h-md: 44px;
    --control-h-lg: 48px;
    --control-h-xl: 56px;
  }
  .density-compact {
    --control-h-xs: 24px;
    --control-h-sm: 32px;
    --control-h-md: 40px;
    --control-h-lg: 48px;
    --control-h-xl: 56px;
  }
}
.density-touch {
  --control-h-xs: 44px;
  --control-h-sm: 44px;
  --control-h-md: 44px;
  --control-h-lg: 48px;
  --control-h-xl: 56px;
}
@layer utilities {
  ::selection {
    padding: calc(var(--spacing) * 2);
    background-color: var(--bg-selection);
    color: var(--text-selection);
  }
  a {
    display: block;
  }
  .autoprefixer {
    display: flex;
  }
  #isDark:checked ~ label span.toggle-dot {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}
@layer utilities {
  .ds-swatch {
    background-color: var(--swatch, var(--utility-indigo-500));
  }
  :root {
    --z-behind: -1;
    --z-base: 0;
    --z-sticky: 10;
    --z-filter: 20;
    --z-dropdown: 30;
    --z-sidebar-edge: 40;
    --z-tray: 50;
    --z-sidebar-panel: 60;
    --z-modal: 70;
    --z-modal-overlay: 80;
    --z-modal-dialog: 90;
    --z-modal-content: 100;
    --z-toast: 1080;
    --z-lightbox: 1090;
    --z-command: 9999;
  }
  :root {
    --width-sidebar-default: 240px;
    --width-filter-sidebar: 280px;
    --height-chrome: 51px;
    --split-min-size: 120px;
    --split-divider-width: 1px;
    --split-divider-width-active: 2px;
    --split-mini-rail-width: 36px;
    --transition-layout: 260ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-panel: 200ms ease;
  }
  .app-shell {
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .app-sidebar {
    height: 100%;
  }
  .app-workspace {
    display: grid;
    height: 100%;
    min-height: 0;
    min-width: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .app-chrome {
    min-width: 0;
    min-height: var(--height-chrome);
  }
  .topbar {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    padding-top: 1px;
    padding-right: calc(var(--spacing) * 2);
  }
  .topbar-left {
    grid-column: span 6 / span 6;
    min-width: 0;
  }
  .topbar-right {
    grid-column: span 6 / span 6;
    min-width: 0;
  }
  .topbar-right > * {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    column-gap: var(--spacing);
  }
  .app-frame {
    position: relative;
    display: grid;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-default);
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  @media (min-width: 1025px) {
    .app-frame {
      contain: layout;
    }
  }
  .frame-rail {
    min-height: 0;
    min-width: 0;
  }
  .rail-top {
    grid-column: span 3 / span 3;
    grid-row: 1;
  }
  .rail-left {
    grid-column: 1;
    grid-row: 2;
  }
  .rail-right {
    grid-column: 3;
    grid-row: 2;
  }
  .rail-bottom {
    grid-column: span 3 / span 3;
    grid-row: 3;
  }
  .frame-canvas {
    min-height: 0;
    min-width: 0;
    grid-column: 2;
    grid-row: 2;
  }
  .frame-stage {
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
  }
  .frame-rail:not(:has(*)) {
    display: none;
  }
  .container-page {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .container-wrapper {
    display: grid;
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .container-content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
  }
  .container-panel {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
  }
  .panel-header {
    min-width: 0;
    flex: none;
  }
  .panel-footer {
    min-width: 0;
    flex: none;
  }
  .panel-body {
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .panel-content {
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
  }
  .panel-body--no-scroll {
    overflow: hidden;
  }
  .panel-content--scroll {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .panel-tab-content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
  }
  .panel-pager {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-secondary);
  }
  .scroll-area {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .scroll-area::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scroll-area::-webkit-scrollbar-track {
    background-color: var(--scroll-track);
  }
  .scroll-area::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 10px;
  }
  .scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb);
  }
  .sidebar-edge-hitbox {
    width: 20px;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .sidebar-edge-hitbox:hover {
    width: 20px;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background-color: var(--scroll-track);
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb);
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .page-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-panel);
  }
  .page-detail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-panel);
  }
  .page-form {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-panel);
  }
  .page-dashboard {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-panel);
  }
  .page-filtered {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: row;
    overflow: hidden;
  }
  .page-filtered > :not(.filter-sidebar) {
    min-height: 0;
    min-width: 0;
    flex: 1;
  }
  .app-page {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    width: 100%;
    flex-direction: column;
    background-color: var(--bg-primary);
  }
  .app-page--sidebar {
    @media (width >= 64rem) {
      flex-direction: row;
    }
    --bg-sidebar-panel: var(--bg-sidebar);
  }
  .app-page--sidebar > .sidebar-panel {
    flex: none;
  }
  .app-page__main {
    min-width: 0;
    flex: 1;
    background-color: var(--bg-primary);
  }
  .app-container {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    max-width: 80rem;
    padding-inline: 1rem;
  }
  @media (min-width: 1024px) {
    .app-container {
      padding-inline: 2rem;
    }
  }
  .page-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .page-head--bordered {
    padding-bottom: calc(var(--spacing) * 5);
    border-bottom: 1px solid var(--border-secondary);
  }
  .page-head__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .page-head__titles {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
  }
  .page-head__title {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .page-head__desc {
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    color: var(--text-tertiary);
  }
  .page-head__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  @media (max-width: 639px) {
    .settings-shell {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }
    .settings-shell .panel-body, .settings-shell .panel-content {
      height: auto;
      flex: none;
      overflow: visible;
    }
  }
  .scroll-y {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .scroll-x {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .scroll-both {
    min-height: 0;
    min-width: 0;
    overflow: auto;
  }
  .pin-top {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }
  .pin-bottom {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
  }
  @media (max-width: 639px) {
    .app-shell {
      grid-template-columns: minmax(0, 1fr);
    }
    .app-sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      width: 0;
      z-index: var(--z-sidebar-panel, 60);
    }
    .sidebar-edge-hitbox {
      display: none;
    }
    .frame-rail {
      display: none !important;
    }
    .split-pane--vertical {
      flex-direction: column;
    }
    .split-pane--vertical > .split-pane__divider {
      width: auto;
      height: var(--split-divider-width, 1px);
      cursor: row-resize;
    }
    .split-pane--vertical > .split-pane__divider::after {
      left: 0;
      right: 0;
      top: -3px;
      bottom: -3px;
    }
    .topbar {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  @media (min-width: 640px) and (max-width: 1023px) {
    .app-shell[data-sidebar-state="pinned"] .app-sidebar {
      width: 0;
    }
    .app-shell[data-sidebar-state="pinned"] .sidebar-panel {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
      z-index: var(--z-sidebar-panel, 60);
    }
    .app-shell[data-sidebar-state="pinned"] [data-sidebar-role="toggle"] {
      display: inline-flex;
    }
  }
  @media (max-width: 767px) {
    .topbar {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .topbar-left {
      flex: 1 1 auto;
      min-width: 0;
    }
    .topbar-right {
      flex: 0 0 auto;
    }
    .topbar-left .page-header-wrapper {
      display: none;
    }
    .topbar-left .campaign-switcher-cell {
      min-width: 0;
    }
  }
  :root {
    --topnav-height: 4rem;
    --topnav-max-width: none;
    --topnav-bg: var(--bg-primary);
    --topnav-border: var(--border-secondary);
    --topnav-item-fg: var(--text-secondary);
    --topnav-item-fg-hover: var(--text-secondary-hover);
    --topnav-item-bg-hover: var(--bg-primary-hover);
    --topnav-item-bg-current: var(--bg-secondary);
    --topnav-item-bg-current-hover: var(--bg-secondary-hover);
    --topnav-icon: var(--text-quaternary);
    --topnav-icon-hover: var(--text-quaternary-hover);
    --topnav-focus: var(--border-focus);
    --topnav-badge-bg: var(--bg-danger);
    --topnav-badge-fg: var(--text-on-solid);
  }
  .topnav {
    width: 100%;
    background-color: var(--topnav-bg);
  }
  .topnav__bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: center;
    height: var(--topnav-height);
    background-color: var(--topnav-bg);
    border-bottom: 1px solid var(--topnav-border);
  }
  .topnav--no-border > .topnav__bar, .topnav--no-border > .topnav__secondary {
    border-bottom-color: transparent;
  }
  .topnav__inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    max-width: var(--topnav-max-width);
    margin-inline: auto;
    padding-inline: 1rem 0.75rem;
  }
  @media (min-width: 768px) {
    .topnav__inner, .topnav__secondary-inner {
      padding-inline: 2rem;
    }
  }
  .topnav__brand {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    margin-right: 1rem;
  }
  .topnav__logo {
    display: inline-flex;
    border-radius: var(--radius-sm);
  }
  .topnav__logo :where(img, svg) {
    height: 1.5rem;
    width: auto;
  }
  .topnav__logo:focus-visible {
    outline: 2px solid var(--topnav-focus);
    outline-offset: 2px;
  }
  .topnav__nav {
    min-width: 0;
  }
  .topnav__list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: 0.125rem;
  }
  .topnav__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
  }
  .topnav__action-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: 0.125rem;
  }
  .topnav__action {
    position: relative;
    display: inline-flex;
  }
  .topnav--centered .topnav__inner {
    gap: 2rem;
  }
  .topnav--centered .topnav__brand {
    margin-right: 0;
    flex: 1 1 0%;
  }
  .topnav--centered .topnav__actions {
    flex: 1 1 0%;
    justify-content: flex-end;
    margin-left: 0;
  }
  .topnav--contained {
    --topnav-max-width: 80rem;
  }
  .topnav-item {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    text-decoration-line: none;
    -webkit-user-select: none;
    user-select: none;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    background-color: var(--topnav-bg);
    color: var(--topnav-item-fg);
    transition: background-color 100ms linear, color 100ms linear;
  }
  .topnav-item:hover {
    background-color: var(--topnav-item-bg-hover);
  }
  .topnav-item:focus-visible {
    outline: 2px solid var(--topnav-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .topnav-item__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding-inline: 0.125rem;
  }
  .topnav-item:hover .topnav-item__label {
    color: var(--topnav-item-fg-hover);
  }
  .topnav-item__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--topnav-icon);
    transition: color 100ms linear;
  }
  .topnav-item:hover .topnav-item__icon {
    color: var(--topnav-icon-hover);
  }
  .topnav-item.is-current, .topnav-item[aria-current="page"] {
    background-color: var(--topnav-item-bg-current);
  }
  .topnav-item.is-current:hover, .topnav-item[aria-current="page"]:hover {
    background-color: var(--topnav-item-bg-current-hover);
  }
  .topnav-item.is-current .topnav-item__label, .topnav-item[aria-current="page"] .topnav-item__label {
    color: var(--topnav-item-fg-hover);
  }
  .topnav-item.is-current .topnav-item__icon, .topnav-item[aria-current="page"] .topnav-item__icon {
    color: var(--topnav-icon-hover);
  }
  .topnav-item--icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
  }
  .topnav__badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    top: -0.125rem;
    right: -0.125rem;
    min-width: 0.875rem;
    height: 0.875rem;
    padding-inline: 0.1875rem;
    font-size: 10px;
    line-height: 1;
    background-color: var(--topnav-badge-bg);
    color: var(--topnav-badge-fg);
  }
  .topnav__badge--dot {
    min-width: 0.5rem;
    height: 0.5rem;
    padding: 0;
  }
  .topnav__secondary {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--topnav-bg);
    border-bottom: 1px solid var(--topnav-border);
  }
  .topnav__secondary-inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    height: var(--topnav-height);
    max-width: var(--topnav-max-width);
    margin-inline: auto;
    gap: 2rem;
    padding-inline: 2rem;
    justify-content: space-between;
  }
  .topnav--centered .topnav__secondary-inner {
    justify-content: center;
  }
  .topnav__secondary--tabs .topnav__secondary-inner {
    height: auto;
    padding-top: 0.75rem;
    justify-content: flex-start;
  }
  .topnav__search {
    width: 100%;
    max-width: 17.5rem;
  }
  .topnav__mobile {
    display: none;
    width: 100%;
    background-color: var(--topnav-bg);
    border-bottom: 1px solid var(--topnav-border);
  }
  .topnav__mobile-trigger {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    list-style-type: none;
    align-items: center;
    gap: 0.75rem;
    height: var(--topnav-height);
    padding-inline: 1rem;
  }
  .topnav__mobile-trigger::-webkit-details-marker {
    display: none;
  }
  .topnav__mobile-trigger:focus-visible {
    outline: 2px solid var(--topnav-focus);
    outline-offset: -2px;
  }
  .topnav__mobile-burger {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 2.25rem;
    height: 2.25rem;
    color: var(--topnav-icon);
  }
  .topnav__drawer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
    padding: 0 1rem 1rem;
  }
  .topnav__drawer .topnav-item {
    width: 100%;
    justify-content: flex-start;
  }
  @media (max-width: 1023px) {
    .topnav__bar, .topnav__secondary {
      display: none;
    }
    .topnav__mobile {
      display: block;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .topnav-item, .topnav-item__label, .topnav-item__icon {
      transition: none;
    }
  }
}
@layer utilities {
  @layer components {
    h1 {
      font-size: 1.875rem;
      line-height: var(--tw-leading, 2.25rem);
      letter-spacing: var(--tw-tracking, -0.015em);
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
      --tw-tracking: var(--tracking-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--text-primary);
      line-height: 1.15;
      font-size: 1.5rem;
      line-height: var(--tw-leading, 1.875rem);
      letter-spacing: var(--tw-tracking, -0.01em);
    }
    h2 {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      --tw-tracking: var(--tracking-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--text-primary);
      line-height: 1.25;
      font-size: 1.125rem;
      line-height: var(--tw-leading, 1.6875rem);
    }
    h3 {
      .docs-partial & {
        font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: var(--text-primary) !important;
        margin: 16px 0 4px !important;
        letter-spacing: -0.015em !important;
      }
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      color: var(--text-primary);
      line-height: 1.35;
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
    h4 {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      color: var(--text-primary);
      line-height: 1.35;
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
    h5 {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
      color: var(--text-secondary-alt, var(--text-secondary));
    }
    h6 {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--text-secondary);
      line-height: 1.35;
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
  }
  @media (max-width: 640px) {
    .display-1 {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.625rem);
      letter-spacing: var(--tw-tracking, -0.02em);
      line-height: 1.1;
    }
    .display-2 {
      font-size: 1.875rem;
      line-height: var(--tw-leading, 2.25rem);
      letter-spacing: var(--tw-tracking, -0.015em);
      line-height: 1.15;
    }
    .page-title {
      font-size: 1.5rem;
      line-height: var(--tw-leading, 1.875rem);
      letter-spacing: var(--tw-tracking, -0.01em);
    }
    .panel-title {
      font-size: 1.125rem;
      line-height: var(--tw-leading, 1.6875rem);
    }
    .section-title {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
    .modal-title, .drawer-title, .title {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
    .body, .body-lg {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
      line-height: 1.5;
    }
    .body-strong {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    .body-sm {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
      line-height: 1.45;
    }
    .label, .label-strong, .hint, .caption {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
  }
  html.pwa, body[data-pwa] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html.pwa .display-1, body[data-pwa] .display-1 {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    line-height: 1.1;
  }
  html.pwa .display-2, body[data-pwa] .display-2 {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    line-height: 1.15;
  }
  html.pwa .page-title, body[data-pwa] .page-title {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  html.pwa .panel-title, body[data-pwa] .panel-title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  html.pwa .section-title, body[data-pwa] .section-title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  html.pwa .modal-title, body[data-pwa] .modal-title, html.pwa .drawer-title, body[data-pwa] .drawer-title, html.pwa .title, body[data-pwa] .title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  html.pwa .body, body[data-pwa] .body, html.pwa .body-lg, body[data-pwa] .body-lg {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    line-height: 1.5;
  }
  html.pwa .body-strong, body[data-pwa] .body-strong {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  html.pwa .body-sm, body[data-pwa] .body-sm {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    line-height: 1.45;
  }
  html.pwa .label, body[data-pwa] .label, html.pwa .label-strong, body[data-pwa] .label-strong, html.pwa .hint, body[data-pwa] .hint, html.pwa .caption, body[data-pwa] .caption {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  @media (max-width: 640px) {
    input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select {
      font-size: 16px !important;
    }
  }
  html.pwa input[type="text"], html.pwa input[type="search"], html.pwa input[type="email"], html.pwa input[type="password"], html.pwa input[type="tel"], html.pwa input[type="url"], html.pwa input[type="number"], html.pwa textarea, html.pwa select {
    font-size: 16px !important;
  }
}
@layer utilities {
  :root {
    --bleed: 3px;
    --eno-blur: 3px;
    --eno-odometer-gap: 0.02em;
    --eno-slot-gap: 0.03em;
    --eno-slot-width: 1ch;
    --eno-slot-radius: 2px;
    --eno-slot-bg: transparent;
    --eno-ticker-persp: 700px;
  }
  [data-anim] {
    visibility: hidden;
    will-change: transform, opacity, filter, clip-path;
  }
  .wd {
    white-space: nowrap;
  }
  .ch {
    display: inline-block;
  }
  .mask-wrap .mask, .filter-bleed {
    padding: var(--bleed) .06em;
    margin: calc(var(--bleed) * -1) -.06em;
    will-change: clip-path, opacity, transform, filter;
  }
  .eno-fixednums {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .eno-odometer {
    display: inline-flex;
    align-items: center;
    gap: var(--eno-odometer-gap);
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .eno-odometer .eno-reel {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    height: 1em;
    line-height: 1;
    min-width: 0.6em;
    justify-content: center;
    align-items: center;
    contain: strict;
  }
  .eno-odometer .eno-reel-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
    transform: translateY(0);
  }
  .eno-odometer .eno-glyph {
    display: block;
    height: 1em;
    line-height: 1;
    text-align: center;
  }
  .eno-odometer .eno-sep {
    display: inline-block;
    line-height: 1;
    padding: 0 .02em;
    opacity: .85;
  }
  .eno-odometer .eno-affix {
    display: inline-block;
    line-height: 1;
  }
  .eno-ticker {
    display: inline-flex;
    align-items: center;
    gap: var(--eno-slot-gap);
    perspective: var(--eno-ticker-persp);
    transform-style: preserve-3d;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .eno-ticker .eno-slot {
    position: relative;
    display: inline-flex;
    width: var(--eno-slot-width);
    height: 1em;
    overflow: hidden;
    border-radius: var(--eno-slot-radius);
    background: var(--eno-slot-bg);
    justify-content: center;
    align-items: center;
    contain: strict;
  }
  .eno-ticker .eno-slot-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: translateZ(0);
    will-change: transform, opacity;
  }
  .eno-ticker .eno-char {
    display: inline-block;
    line-height: 1;
  }
  .eno-ticker .eno-sep {
    display: inline-block;
    opacity: .8;
    line-height: 1;
    padding: 0 .02em;
  }
  .eno-ticker .eno-slot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
    pointer-events: none;
  }
  .eno-scramble {
    display: inline-flex;
    align-items: center;
    gap: var(--eno-slot-gap);
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .eno-scramble .eno-slot {
    display: inline-flex;
    width: var(--eno-slot-width);
    height: 1em;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }
  .eno-scramble .eno-slot-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    will-change: contents, transform;
  }
  .eno-scramble .eno-sep {
    display: inline-block;
    opacity: .8;
    line-height: 1;
    padding: 0 .02em;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-anim], .mask-wrap .mask, .filter-bleed, .eno-odometer .eno-reel-track, .eno-ticker .eno-slot-inner, .eno-scramble .eno-slot-inner {
      visibility: visible !important;
      animation: none !important;
      transition: none !important;
      transform: none !important;
      filter: none !important;
    }
  }
  .eno-odometer, .eno-ticker, .eno-scramble {
    display: inline-flex;
    align-items: center;
  }
  .eno-odometer .eno-reel {
    position: relative;
    display: inline-block;
    height: 1em;
    min-width: 0.6em;
    overflow: hidden;
  }
  .eno-odometer .eno-reel-track {
    display: block;
    line-height: 1;
    will-change: transform;
  }
  .eno-slot {
    display: inline-block;
    perspective: 600px;
  }
  .eno-slot-inner {
    display: inline-block;
    transform-origin: center;
    will-change: transform,opacity;
  }
}
@layer components {
  @keyframes media-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}
@layer utilities {
  .split-pane {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .split-pane--vertical {
    flex-direction: row;
  }
  .split-pane--horizontal {
    flex-direction: column;
  }
  .split-pane__panel {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    flex: var(--split-flex, 1 1 0%);
  }
  .split-pane__panel--fixed {
    flex: none;
    width: var(--split-size, 280px);
  }
  .split-pane--horizontal > .split-pane__panel--fixed {
    width: auto;
    height: var(--split-size, 280px);
  }
  .split-pane__divider {
    position: relative;
    flex: none;
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--border-split, var(--border-secondary));
    z-index: var(--z-sticky, 10);
    transition: background-color 100ms ease;
  }
  .split-pane--vertical > .split-pane__divider {
    cursor: col-resize;
    width: var(--split-divider-width, 1px);
  }
  .split-pane--horizontal > .split-pane__divider {
    cursor: row-resize;
    height: var(--split-divider-width, 1px);
  }
  .split-pane__divider::after {
    content: "";
    position: absolute;
  }
  .split-pane--vertical > .split-pane__divider::after {
    top: 0;
    bottom: 0;
    left: -2px;
    right: -2px;
  }
  .split-pane--horizontal > .split-pane__divider::after {
    right: 0;
    left: 0;
    top: -2px;
    bottom: -2px;
  }
  .split-pane__divider:hover:not(.is-acting), .split-pane__divider:focus-visible {
    background-color: var(--border-split-hover, var(--color-brand-500));
  }
  .split-pane__divider.is-dragging {
    background-color: var(--border-split-active, var(--color-brand-600));
  }
  .split-pane--vertical > .split-pane__divider:hover:not(.is-acting), .split-pane--vertical > .split-pane__divider:focus-visible, .split-pane--vertical > .split-pane__divider.is-dragging {
    width: var(--split-divider-width-active, 2px);
    margin-left: -0.5px;
    margin-right: -0.5px;
  }
  .split-pane--horizontal > .split-pane__divider:hover:not(.is-acting), .split-pane--horizontal > .split-pane__divider:focus-visible, .split-pane--horizontal > .split-pane__divider.is-dragging {
    height: var(--split-divider-width-active, 2px);
    margin-top: -0.5px;
    margin-bottom: -0.5px;
  }
  .split-pane__divider:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
    z-index: calc(var(--z-sticky, 10) + 1);
  }
  .split-pane__panel.is-collapsed {
    flex: none !important;
    overflow: hidden !important;
  }
  .split-pane--vertical > .split-pane__panel.is-collapsed {
    width: 0 !important;
    min-width: 0 !important;
  }
  .split-pane--horizontal > .split-pane__panel.is-collapsed {
    height: 0 !important;
    min-height: 0 !important;
  }
  .split-pane__panel.is-collapsed + .split-pane__divider:not(:has(.split-pane__actions)), .split-pane__divider:not(:has(.split-pane__actions)):has(+ .split-pane__panel.is-collapsed) {
    display: none;
  }
  .split-pane__divider.is-rail {
    background-color: transparent;
    cursor: default;
  }
  .split-pane--vertical > .split-pane__divider.is-rail {
    width: 28px;
    background-image: linear-gradient( to right, transparent calc(50% - 0.5px), var(--border-split, var(--border-secondary)) calc(50% - 0.5px), var(--border-split, var(--border-secondary)) calc(50% + 0.5px), transparent calc(50% + 0.5px) );
  }
  .split-pane--horizontal > .split-pane__divider.is-rail {
    height: 28px;
    background-image: linear-gradient( to bottom, transparent calc(50% - 0.5px), var(--border-split, var(--border-secondary)) calc(50% - 0.5px), var(--border-split, var(--border-secondary)) calc(50% + 0.5px), transparent calc(50% + 0.5px) );
  }
  .split-pane--vertical > .split-pane__divider.is-rail:hover, .split-pane--vertical > .split-pane__divider.is-rail:focus-visible, .split-pane--vertical > .split-pane__divider.is-rail.is-dragging {
    width: 28px;
    margin-left: 0;
    margin-right: 0;
    background-color: transparent;
  }
  .split-pane--horizontal > .split-pane__divider.is-rail:hover, .split-pane--horizontal > .split-pane__divider.is-rail:focus-visible, .split-pane--horizontal > .split-pane__divider.is-rail.is-dragging {
    height: 28px;
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;
  }
  .split-pane__divider.is-rail::after {
    display: none;
  }
  .split-pane__divider.is-rail .split-pane__actions {
    opacity: 1;
    pointer-events: auto;
  }
  .split-pane__divider.is-acting {
    transition: none !important;
  }
  .split-pane__divider.is-acting .split-pane__actions {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
  }
  .split-pane__mini-rail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--split-mini-rail-width, 36px);
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 1px solid var(--border-secondary);
  }
  .split-pane--horizontal > .split-pane__mini-rail {
    width: auto;
    height: var(--split-mini-rail-width, 36px);
  }
  .split-pane.is-resizing, .split-pane.is-resizing * {
    user-select: none !important;
    cursor: col-resize !important;
  }
  .split-pane--horizontal.is-resizing, .split-pane--horizontal.is-resizing * {
    cursor: row-resize !important;
  }
  .split-pane__actions {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    z-index: calc(var(--z-sticky, 10) + 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease 100ms;
  }
  .split-pane__divider.is-nearby .split-pane__actions, .split-pane__actions:focus-within {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 150ms ease;
  }
  .split-pane.is-resizing > .split-pane__divider .split-pane__actions {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .split-pane--vertical > .split-pane__divider > .split-pane__actions {
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .split-pane--horizontal > .split-pane__divider > .split-pane__actions {
    flex-direction: row;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .split-pane__action {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 20px;
    height: 20px;
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
    font-size: 10px;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .split-pane__action:hover {
    background-color: var(--bg-primary-subtle);
    border-color: var(--border-brand);
    color: var(--text-primary);
  }
  .split-pane__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .split-pane__action.is-disabled, .split-pane__action:disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }
  .split-pane__panel.is-transitioning {
    transition: flex-basis 200ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .split-pane__panel.is-transitioning {
      transition: none;
    }
  }
  .split-pane__divider-action {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 20px;
    height: 20px;
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
    font-size: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease 75ms;
    cursor: pointer;
    z-index: calc(var(--z-sticky, 10) + 1);
  }
  .split-pane__divider.is-nearby .split-pane__divider-action, .split-pane__divider-action:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0ms;
  }
  .split-pane__divider-action:hover {
    background-color: var(--bg-primary-subtle);
    border-color: var(--border-brand);
    color: var(--text-primary);
  }
  .split-pane__divider-action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .split-pane--vertical > .split-pane__divider > .split-pane__divider-action {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .split-pane--horizontal > .split-pane__divider > .split-pane__divider-action {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .split-panel-w-xs {
    min-width: 120px;
    max-width: 240px;
  }
  .split-panel-w-sm {
    min-width: 180px;
    max-width: 320px;
  }
  .split-panel-w-md {
    min-width: 240px;
    max-width: 480px;
  }
  .split-panel-w-lg {
    min-width: 320px;
    max-width: 640px;
  }
  .split-panel-w-xl {
    min-width: 400px;
    max-width: 800px;
  }
  .split-panel-w-2xl {
    min-width: 480px;
    max-width: 1024px;
  }
  .split-panel-w-3xl {
    min-width: 560px;
    max-width: 1280px;
  }
  .split-panel-h-xs {
    min-height: 80px;
    max-height: 160px;
  }
  .split-panel-h-sm {
    min-height: 120px;
    max-height: 240px;
  }
  .split-panel-h-md {
    min-height: 160px;
    max-height: 360px;
  }
  .split-panel-h-lg {
    min-height: 200px;
    max-height: 480px;
  }
  .split-panel-h-xl {
    min-height: 280px;
    max-height: 640px;
  }
  .split-panel-h-2xl {
    min-height: 360px;
    max-height: 800px;
  }
  .split-panel-h-3xl {
    min-height: 440px;
    max-height: 1024px;
  }
  .split-panel-min-w-xs {
    min-width: 120px;
  }
  .split-panel-min-w-sm {
    min-width: 180px;
  }
  .split-panel-min-w-md {
    min-width: 240px;
  }
  .split-panel-min-w-lg {
    min-width: 320px;
  }
  .split-panel-min-w-xl {
    min-width: 400px;
  }
  .split-panel-min-h-xs {
    min-height: 80px;
  }
  .split-panel-min-h-sm {
    min-height: 120px;
  }
  .split-panel-min-h-md {
    min-height: 160px;
  }
  .split-panel-min-h-lg {
    min-height: 200px;
  }
  .split-panel-min-h-xl {
    min-height: 280px;
  }
  .split-panel-max-w-xs {
    max-width: 240px;
  }
  .split-panel-max-w-sm {
    max-width: 320px;
  }
  .split-panel-max-w-md {
    max-width: 480px;
  }
  .split-panel-max-w-lg {
    max-width: 640px;
  }
  .split-panel-max-w-xl {
    max-width: 800px;
  }
  .split-panel-max-h-xs {
    max-height: 160px;
  }
  .split-panel-max-h-sm {
    max-height: 240px;
  }
  .split-panel-max-h-md {
    max-height: 360px;
  }
  .split-panel-max-h-lg {
    max-height: 480px;
  }
  .split-panel-max-h-xl {
    max-height: 640px;
  }
  @media (prefers-reduced-motion: reduce) {
    .split-pane__divider {
      transition: none;
    }
  }
}
@layer utilities {
  :root {
    --radius-shell: var(--radius-lg);
    --height-filter-bar: 200px;
    --duration-filter-bar: var(--duration-normal, 200ms);
  }
  .ps-frame {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-panel);
  }
  .ps-toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .ps-toolbar__left {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .ps-toolbar__center {
    display: inline-flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .ps-toolbar__right {
    margin-left: auto;
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .ps-toolbar:has(> .nav-tabs) {
    padding-bottom: 0;
    border-bottom: 1px solid var(--border-default);
  }
  .ps-toolbar > .nav-tabs {
    margin-bottom: 0;
    border-bottom: none;
    background-color: transparent;
  }
  .ps-toolbar--dense {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .ps-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-top: 1px solid var(--border-default);
  }
  .ps-filter-bar {
    flex: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--duration-filter-bar) var(--ease-out, ease), border-color var(--duration-filter-bar) var(--ease-out, ease);
    border-bottom: 1px solid transparent;
  }
  .ps-filter-bar.is-open {
    max-height: var(--height-filter-bar);
    border-bottom-color: var(--border-default);
  }
  .ps-filter-bar__content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
  }
  .ps-status-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-default);
  }
  .ps--modal {
    background-color: transparent;
  }
  .ps--tray .ps-toolbar {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .ps--tray .ps-footer {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .ps--popover .ps-toolbar {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .ps--popover .ps-footer {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
  }
  .ps--nested {
    background-color: transparent;
    border: none;
  }
  .ps--surface {
    background-color: var(--bg-panel);
  }
  .ps--raised {
    background-color: var(--bg-panel-raised, var(--bg-panel));
    box-shadow: var(--shadow-xs);
  }
  .ps--sunken {
    background-color: var(--bg-panel-sunken, var(--canvas-primary));
  }
  .ps--bordered {
    border: 1px solid var(--border-panel, var(--border-primary));
  }
  .ps--card {
    background-color: var(--bg-panel, var(--bg-card));
    border: 1px solid var(--border-panel, var(--border-card));
    border-radius: var(--radius-shell);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  .ps--ghost {
    background-color: transparent;
    border: 1px solid var(--border-panel, var(--border-primary));
  }
  .ps-rail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border-default);
  }
  .ps-rail--right {
    border-right: none;
    border-left: 1px solid var(--border-default);
  }
  .ps-rail--xs {
    width: 200px;
    min-width: 200px;
  }
  .ps-rail--sm {
    width: 260px;
    min-width: 260px;
  }
  .ps-rail--md {
    width: 320px;
    min-width: 320px;
  }
  .ps-rail--lg {
    width: 400px;
    min-width: 400px;
  }
  .ps-rail .ps-toolbar {
    padding-inline: calc(var(--spacing) * 3);
  }
  .ps-rail .ps-footer {
    padding-inline: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .ps-search {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .ps-search .form-control {
    padding-right: calc(var(--spacing) * 16);
  }
  .ps-search__shortcut {
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * 2);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    -webkit-user-select: none;
    user-select: none;
    transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .ps-search__clear {
    position: absolute;
    right: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    display: none;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    transition: color var(--duration-fast, 100ms) var(--ease-out, ease), background-color var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .ps-search__clear:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-subtle);
  }
  .ps-search.has-value .ps-search__clear {
    display: inline-flex;
  }
  .ps-search.has-value .ps-search__shortcut {
    display: none;
  }
  .ps-search:focus-within .ps-search__shortcut {
    opacity: 0;
  }
  .ps-search__spinner {
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * 8);
    display: none;
    color: var(--text-tertiary);
  }
  .ps-search.is-searching .ps-search__spinner {
    display: inline-flex;
  }
  .ps-search.is-searching .ps-search__shortcut {
    display: none;
  }
  .ps-search:has(.ps-search__clear) .form-control {
    padding-right: calc(var(--spacing) * 8);
  }
  .ps-search__clear:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  @media (prefers-reduced-motion: reduce) {
    .ps-filter-bar, .ps-search__shortcut, .ps-search__clear {
      transition: none;
    }
  }
  @media (max-width: 639px) {
    .ps-filter-bar {
      display: none;
    }
    .ps-toolbar {
      flex-wrap: wrap;
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
    }
  }
  @media (pointer: coarse) {
    .ps-search__clear::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
  }
}
@layer utilities {
  .auth-page {
    display: flex;
    flex: 1 1 auto;
    min-height: 100%;
    overflow: hidden;
    padding-block: 3rem;
    padding-inline: 1rem;
    background-color: var(--bg-primary);
  }
  .auth-page--viewport {
    min-height: 100dvh;
  }
  @media (min-width: 768px) {
    .auth-page {
      padding-top: 6rem;
      padding-inline: 2rem;
    }
  }
  .auth-page__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 22.5rem;
    margin-inline: auto;
  }
  .auth-page__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  .auth-page__heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  @media (min-width: 768px) {
    .auth-page__heading {
      gap: 0.75rem;
    }
  }
  .auth-page__title {
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .auth-page__title {
      font-size: 1.5rem;
      line-height: 2rem;
      letter-spacing: -0.02em;
    }
  }
  .auth-page__subtitle {
    color: var(--text-tertiary);
    font-size: 1rem;
    line-height: 1.5rem;
    text-wrap: pretty;
  }
  .auth-page__email, .auth-page__subtitle strong, .auth-page__subtitle b {
    font-weight: 500;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }
  .auth-page__body {
    display: flex;
    flex-direction: column;
  }
  .auth-page__body--center {
    align-items: center;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .auth-page__body--center {
      gap: 2rem;
    }
  }
  .auth-page__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
  }
  .auth-page__resend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: no-preference) {
    .auth-page__inner {
      animation: auth-page-enter var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
    }
  }
  @keyframes auth-page-enter {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@layer utilities {
  .onboarding {
    display: flex;
    flex: 1 1 auto;
    min-height: 100%;
    padding-block: 3rem;
    padding-inline: 1rem;
    background-color: var(--bg-primary);
  }
  .onboarding--viewport {
    min-height: 100dvh;
  }
  @media (min-width: 768px) {
    .onboarding {
      padding-top: 5rem;
      padding-inline: 2rem;
    }
  }
  .onboarding__shell {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
  }
  .onboarding__shell--wide {
    max-width: 48rem;
  }
  .onboarding__progress {
    width: 100%;
  }
  .onboarding__panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .onboarding__header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .onboarding__header--center {
    align-items: center;
    text-align: center;
  }
  .onboarding__heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .onboarding__title {
    color: var(--text-primary);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .onboarding__subtitle {
    color: var(--text-tertiary);
    font-size: 1rem;
    line-height: 1.5rem;
    text-wrap: pretty;
  }
  .onboarding__subtitle strong, .onboarding__subtitle b {
    font-weight: 500;
    color: var(--text-secondary);
  }
  .onboarding__eyebrow {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--color-brand-700));
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .onboarding__eyebrow {
    color: var(--color-brand-300);
  }
  .onboarding__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .onboarding__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .onboarding__grid--2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .onboarding__grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .onboarding__invite-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
  }
  .onboarding__invite-row > .form-control {
    flex: 1 1 12rem;
  }
  .onboarding__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
  }
  .onboarding__footer--split {
    justify-content: space-between;
  }
  .onboarding__footer--end {
    justify-content: flex-end;
  }
  .onboarding__footer--stacked {
    flex-direction: column;
    align-items: stretch;
  }
  .onboarding__footer--stacked > * {
    width: 100%;
  }
  .onboarding__skip {
    align-self: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-tertiary);
  }
  .onboarding__welcome, .onboarding__complete {
    align-items: center;
    text-align: center;
  }
  @media (prefers-reduced-motion: no-preference) {
    .onboarding__shell {
      animation: onboarding-enter var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
    }
  }
  @keyframes onboarding-enter {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@layer utilities {
  .legal-page {
    display: block;
    background-color: var(--bg-primary);
  }
  .legal-page__header {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
  }
  .legal-page__updated {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--color-brand-700));
  }
  @media (min-width: 768px) {
    .legal-page__updated {
      font-size: 1rem;
    }
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .legal-page__updated {
    color: var(--color-brand-300);
  }
  .legal-page__title {
    margin-top: 0.75rem;
    color: var(--text-primary);
    font-size: 2.25rem;
    line-height: 2.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .legal-page__title {
      font-size: 3rem;
      line-height: 3.75rem;
    }
  }
  .legal-page__intro {
    margin-top: 1rem;
    color: var(--text-tertiary);
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  @media (min-width: 768px) {
    .legal-page__intro {
      margin-top: 1.5rem;
      font-size: 1.25rem;
      line-height: 1.875rem;
    }
  }
  .legal-page__body {
    display: block;
  }
  .legal-page__body--toc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  @media (min-width: 1024px) {
    .legal-page__body--toc {
      grid-template-columns: 16rem 1fr;
      gap: 4rem;
      align-items: start;
    }
  }
  .legal-page__body > .mkt-content__prose {
    margin-inline: auto;
  }
  .legal-page__body--toc > .mkt-content__prose {
    margin-inline: 0;
  }
  .legal-page__toc {
    position: relative;
  }
  @media (min-width: 1024px) {
    .legal-page__toc {
      position: sticky;
      top: 5rem;
      align-self: start;
    }
  }
  .legal-page__toc-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
  }
  .legal-page__toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-left: 1px solid var(--border-secondary);
  }
  .legal-page__toc-link {
    display: block;
    padding: 0.375rem 0 0.375rem 1rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-tertiary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease), border-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .legal-page__toc-link:hover {
    color: var(--text-secondary);
  }
  .legal-page__toc-link[aria-current="true"], .legal-page__toc-link.is-active {
    color: var(--text-brand-secondary, var(--color-brand-700));
    border-left-color: var(--color-brand-600);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .legal-page__toc-link[aria-current="true"], :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .legal-page__toc-link.is-active {
    color: var(--color-brand-300);
  }
  .legal-page__toc-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 0.25rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .legal-page__toc-link {
      transition: none;
    }
  }
}
@layer utilities {
  .landing-page {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
  }
  .landing-page > section {
    width: 100%;
  }
  .landing-page__divider {
    width: 100%;
  }
  .landing-page__divider::before {
    content: "";
    display: block;
    width: 100%;
    max-width: var(--container-max, 80rem);
    margin-inline: auto;
    height: 1px;
    background-color: var(--border-secondary);
  }
  .landing-page__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
    color: var(--text-quaternary);
    font-size: 2rem;
  }
  .landing-page__features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  @media (min-width: 768px) {
    .landing-page__features {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .landing-page__feature {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .landing-page__feature-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .landing-page__feature-text {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  :root {
    --settings-max-width: 80rem;
    --settings-form-max-width: 40rem;
    --settings-label-col: minmax(11.25rem, 17.5rem);
    --settings-control-col: minmax(0, 32rem);
    --settings-gap: 2rem;
    --settings-nav-bg: transparent;
    --settings-nav-title: var(--text-quaternary);
    --settings-nav-item-fg: var(--text-secondary);
    --settings-nav-item-fg-hover: var(--text-secondary-hover);
    --settings-nav-item-bg-hover: var(--bg-primary-hover);
    --settings-nav-item-fg-current: var(--text-primary);
    --settings-nav-item-bg-current: var(--bg-primary-subtle);
    --settings-nav-focus: var(--border-focus);
    --settings-divider: var(--border-secondary);
    --settings-banner-ring: var(--bg-primary);
  }
  .settings-page {
    width: 100%;
    margin-inline: auto;
    max-width: var(--settings-max-width);
    padding-inline: 1rem;
  }
  @media (min-width: 1024px) {
    .settings-page {
      padding-inline: 2rem;
    }
  }
  .settings-page__narrow {
    width: 100%;
    margin-inline: auto;
    max-width: var(--settings-form-max-width);
  }
  .settings-nav {
    background-color: var(--settings-nav-bg);
  }
  .settings-nav__group + .settings-nav__group {
    margin-top: 0.25rem;
  }
  .settings-nav__title {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--settings-nav-title);
    padding: 1rem 0.75rem 0.375rem;
  }
  .settings-nav__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    text-decoration-line: none;
    padding: 0.5rem 0.75rem;
    color: var(--settings-nav-item-fg);
    transition: background-color 100ms linear, color 100ms linear;
  }
  .settings-nav__item > i {
    width: 1rem;
    text-align: center;
    opacity: 0.6;
  }
  .settings-nav__item:hover {
    background-color: var(--settings-nav-item-bg-hover);
    color: var(--settings-nav-item-fg-hover);
  }
  .settings-nav__item:focus-visible {
    outline: 2px solid var(--settings-nav-focus);
    outline-offset: -2px;
  }
  .settings-nav__item.is-current, .settings-nav__item[aria-current="page"] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--settings-nav-item-bg-current);
    color: var(--settings-nav-item-fg-current);
  }
  .settings-nav__item.is-current > i, .settings-nav__item[aria-current="page"] > i {
    opacity: 1;
  }
  .settings-nav__item-end {
    margin-left: auto;
    opacity: 0.5;
  }
  .settings-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  @media (min-width: 1024px) {
    .settings-section {
      grid-template-columns: var(--settings-label-col) var(--settings-control-col);
      gap: var(--settings-gap);
    }
    .settings-section--wide {
      grid-template-columns: var(--settings-label-col) minmax(0, 1fr);
    }
  }
  .settings-section__label {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .settings-section__label-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
  }
  .settings-section__label-help {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .settings-divider {
    height: 1px;
    width: 100%;
    border: 0;
    background-color: var(--settings-divider);
  }
  .settings-profile-banner {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .settings-profile-banner__media {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }
  @media (min-width: 1024px) {
    .settings-profile-banner__media {
      height: 15rem;
    }
  }
  .settings-profile-banner__avatar {
    margin-top: -3rem;
    border: 4px solid var(--settings-banner-ring);
    border-radius: var(--radius-full);
    width: max-content;
  }
  @media (min-width: 1024px) {
    .settings-profile-banner__avatar {
      margin-top: -2.5rem;
    }
  }
  .settings-integration {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
  }
  .settings-integration + .settings-integration {
    border-top: 1px solid var(--settings-divider);
  }
  .settings-integration__logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--bg-primary-subtle);
    color: var(--text-secondary);
  }
  .settings-integration__body {
    min-width: 0;
    flex: 1 1 auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .settings-nav__item {
      transition: none;
    }
  }
}
@layer utilities {
  :root {
    --notif-matrix-breakpoint: 40rem;
    --notif-matrix-label-col: minmax(11rem, 1.6fr);
    --notif-matrix-channel-col: minmax(4.5rem, 1fr);
  }
  .notif-matrix {
    display: grid;
    grid-template-columns: var(--notif-matrix-label-col) repeat(var(--notif-matrix-cols, 4), var(--notif-matrix-channel-col));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: var(--bg-primary);
  }
  .notif-matrix__row {
    display: contents;
  }
  .notif-matrix__head-cell {
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.75rem 0.75rem;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default);
  }
  .notif-matrix__head-cell--event {
    text-align: left;
  }
  .notif-matrix__event-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-divider);
  }
  .notif-matrix__event-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .notif-matrix__event-help {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .notif-matrix__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid var(--border-divider);
    border-left: 1px solid var(--border-divider);
    transition: background-color var(--duration-fast, 100ms) var(--ease-linear, linear);
  }
  .notif-matrix__row:last-child > .notif-matrix__event-cell, .notif-matrix__row:last-child > .notif-matrix__cell {
    border-bottom: 0;
  }
  .notif-matrix__row:hover > .notif-matrix__event-cell, .notif-matrix__row:hover > .notif-matrix__cell {
    background-color: var(--bg-secondary);
  }
  .notif-matrix__cell-label {
    display: none;
  }
  @media (max-width: 40rem) {
    .notif-matrix {
      display: block;
      background-color: transparent;
      border: 0;
      border-radius: 0;
      overflow: visible;
    }
    .notif-matrix__row {
      display: block;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      background-color: var(--bg-primary);
      padding: 0.875rem 1rem;
    }
    .notif-matrix__row:hover > .notif-matrix__event-cell, .notif-matrix__row:hover > .notif-matrix__cell {
      background-color: transparent;
    }
    .notif-matrix__row + .notif-matrix__row {
      margin-top: 0.75rem;
    }
    .notif-matrix__row:first-child {
      display: none;
    }
    .notif-matrix__event-cell {
      padding: 0 0 0.75rem;
      margin-bottom: 0.75rem;
      border-bottom: 1px solid var(--border-divider);
    }
    .notif-matrix__cell {
      justify-content: space-between;
      padding: 0.5rem 0;
      border-bottom: 0;
      border-left: 0;
    }
    .notif-matrix__cell + .notif-matrix__cell {
      border-top: 1px solid var(--border-divider);
    }
    .notif-matrix__cell .toggle {
      flex-direction: row-reverse;
    }
    .notif-matrix__cell-label {
      display: inline;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .notif-matrix__cell {
      transition: none;
    }
  }
}
@layer utilities {
  .bg-pattern {
    --_bp-pitch: 3rem;
    --_bp-fade: 70%;
    --_bp-cell: var(--border-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      --_bp-cell: color-mix(in oklch, var(--border-secondary) 55%, transparent);
    }
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    color: var(--border-secondary);
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent var(--_bp-fade));
    mask-image: radial-gradient(circle at center, #000 0%, transparent var(--_bp-fade));
  }
  .bg-pattern--sm {
    --_bp-pitch: 1.5rem;
  }
  .bg-pattern--md {
    --_bp-pitch: 2rem;
  }
  .bg-pattern--lg {
    --_bp-pitch: 3rem;
  }
  .bg-pattern--layer {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    pointer-events: none;
    z-index: 0;
  }
  .bg-pattern--grid {
    background-image: linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: var(--_bp-pitch) var(--_bp-pitch);
  }
  .bg-pattern--grid-check {
    background-image: linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px), repeating-conic-gradient(var(--_bp-cell) 0% 25%, transparent 0% 50%);
    background-size: var(--_bp-pitch) var(--_bp-pitch), var(--_bp-pitch) var(--_bp-pitch), calc(var(--_bp-pitch) * 2) calc(var(--_bp-pitch) * 2);
  }
  .bg-pattern--dots {
    background-image: radial-gradient(currentColor 1px, transparent 1.5px);
    background-size: var(--_bp-pitch) var(--_bp-pitch);
  }
  .bg-pattern--lines {
    background-image: repeating-linear-gradient( 45deg, currentColor 0 1px, transparent 1px calc(var(--_bp-pitch) / 2) );
  }
  .bg-pattern--crosshatch {
    background-image: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px calc(var(--_bp-pitch) / 2)), repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px calc(var(--_bp-pitch) / 2));
  }
  .bg-pattern--checks {
    background-image: repeating-conic-gradient(var(--_bp-cell) 0% 25%, transparent 0% 50%);
    background-size: calc(var(--_bp-pitch) * 2) calc(var(--_bp-pitch) * 2);
  }
  .bg-pattern--iso-grid {
    background-image: repeating-linear-gradient(30deg, currentColor 0 1px, transparent 1px var(--_bp-pitch)), repeating-linear-gradient(150deg, currentColor 0 1px, transparent 1px var(--_bp-pitch)), repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px var(--_bp-pitch));
  }
  .bg-pattern--gradient-mesh {
    background-image: radial-gradient(circle at 15% 20%, var(--_bp-cell), transparent 45%), radial-gradient(circle at 85% 25%, var(--_bp-cell), transparent 45%), radial-gradient(circle at 30% 80%, var(--_bp-cell), transparent 45%), radial-gradient(circle at 80% 75%, var(--_bp-cell), transparent 45%);
  }
  .bg-pattern--circle {
    background-image: repeating-radial-gradient( circle at center, currentColor 0 1px, transparent 1px var(--_bp-pitch) );
  }
  .bg-pattern--square > svg, .bg-pattern__svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}
@layer utilities {
  .stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--stack-gap, 1rem);
  }
  .stack-3xs {
    --stack-gap: 0.125rem;
  }
  .stack-2xs {
    --stack-gap: 0.25rem;
  }
  .stack-xs {
    --stack-gap: 0.5rem;
  }
  .stack-sm {
    --stack-gap: 0.75rem;
  }
  .stack-md {
    --stack-gap: 1rem;
  }
  .stack-lg {
    --stack-gap: 1.5rem;
  }
  .stack-xl {
    --stack-gap: 2rem;
  }
  .stack-2xl {
    --stack-gap: 3rem;
  }
  .stack-start {
    align-items: flex-start;
  }
  .stack-center {
    align-items: center;
  }
  .stack-end {
    align-items: flex-end;
  }
  .stack-stretch {
    align-items: stretch;
  }
  .stack-fill {
    min-block-size: 100%;
  }
  .stack > .stack-push {
    margin-block-start: auto;
  }
  .stack-dividers > * + * {
    border-block-start: 1px solid var(--border-divider);
  }
}
@layer utilities {
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, 0.75rem);
  }
  .cluster-3xs {
    --cluster-gap: 0.125rem;
  }
  .cluster-2xs {
    --cluster-gap: 0.25rem;
  }
  .cluster-xs {
    --cluster-gap: 0.5rem;
  }
  .cluster-sm {
    --cluster-gap: 0.625rem;
  }
  .cluster-md {
    --cluster-gap: 0.75rem;
  }
  .cluster-lg {
    --cluster-gap: 1rem;
  }
  .cluster-xl {
    --cluster-gap: 1.5rem;
  }
  .cluster-2xl {
    --cluster-gap: 2rem;
  }
  .cluster-start {
    justify-content: flex-start;
  }
  .cluster-center {
    justify-content: center;
  }
  .cluster-end {
    justify-content: flex-end;
  }
  .cluster-between {
    justify-content: space-between;
  }
  .cluster-around {
    justify-content: space-around;
  }
  .cluster-top {
    align-items: flex-start;
  }
  .cluster-middle {
    align-items: center;
  }
  .cluster-bottom {
    align-items: flex-end;
  }
  .cluster-stretch {
    align-items: stretch;
  }
  .cluster-baseline {
    align-items: baseline;
  }
  .cluster-nowrap {
    flex-wrap: nowrap;
  }
  .cluster > .cluster-push {
    margin-inline-start: auto;
  }
}
@layer utilities {
  .center-box {
    box-sizing: content-box;
    max-inline-size: var(--center-box-max, 40rem);
    margin-inline: auto;
  }
  .center-box-narrow {
    --center-box-max: 24rem;
  }
  .center-box-prose {
    --center-box-max: 36rem;
  }
  .center-box-wide {
    --center-box-max: 56rem;
  }
  .center-box-gutters {
    padding-inline: var(--center-box-gutter, 1rem);
  }
  .center-box-gutters-sm {
    --center-box-gutter: 0.5rem;
  }
  .center-box-gutters-lg {
    --center-box-gutter: 2rem;
  }
  .center-box-text {
    text-align: center;
  }
  .center-box-both {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 100%;
  }
}
@layer utilities {
  .spacer {
    flex: 0 0 auto;
    display: block;
    block-size: var(--spacer-size, 1rem);
  }
  .spacer-x {
    display: inline-block;
    block-size: auto;
    inline-size: var(--spacer-size, 1rem);
  }
  .spacer-2xs {
    --spacer-size: 0.25rem;
  }
  .spacer-xs {
    --spacer-size: 0.5rem;
  }
  .spacer-sm {
    --spacer-size: 0.75rem;
  }
  .spacer-md {
    --spacer-size: 1rem;
  }
  .spacer-lg {
    --spacer-size: 1.5rem;
  }
  .spacer-xl {
    --spacer-size: 2rem;
  }
  .spacer-2xl {
    --spacer-size: 3rem;
  }
  .spacer-grow {
    flex: 1 1 0%;
    block-size: auto;
    inline-size: auto;
  }
}
@layer utilities {
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, 1rem);
  }
  .switcher > * {
    flex: 1 1 var(--switcher-basis, calc((var(--switcher-threshold, 30rem) - 100%) * 999));
    min-inline-size: 0;
  }
  .switcher-sm {
    --switcher-threshold: 20rem;
  }
  .switcher-md {
    --switcher-threshold: 30rem;
  }
  .switcher-lg {
    --switcher-threshold: 40rem;
  }
  .switcher-gap-xs {
    --switcher-gap: 0.5rem;
  }
  .switcher-gap-sm {
    --switcher-gap: 0.75rem;
  }
  .switcher-gap-md {
    --switcher-gap: 1rem;
  }
  .switcher-gap-lg {
    --switcher-gap: 1.5rem;
  }
  .switcher-gap-xl {
    --switcher-gap: 2rem;
  }
  .switcher-limit-2 > :nth-last-child(n+3), .switcher-limit-2 > :nth-last-child(n+3) ~ * {
    flex-basis: 100%;
  }
  .switcher-limit-3 > :nth-last-child(n+4), .switcher-limit-3 > :nth-last-child(n+4) ~ * {
    flex-basis: 100%;
  }
  .switcher-limit-4 > :nth-last-child(n+5), .switcher-limit-4 > :nth-last-child(n+5) ~ * {
    flex-basis: 100%;
  }
}
@layer utilities {
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-auto-min, 16rem), 100%), 1fr));
    gap: var(--grid-auto-gap, 1rem);
  }
  .grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-auto-min, 16rem), 100%), 1fr));
  }
  .grid-auto-sm {
    --grid-auto-min: 12rem;
  }
  .grid-auto-md {
    --grid-auto-min: 16rem;
  }
  .grid-auto-lg {
    --grid-auto-min: 20rem;
  }
  .grid-auto-gap-sm {
    --grid-auto-gap: 0.75rem;
  }
  .grid-auto-gap-md {
    --grid-auto-gap: 1rem;
  }
  .grid-auto-gap-lg {
    --grid-auto-gap: 1.5rem;
  }
  .grid-auto-dense {
    grid-auto-flow: dense;
  }
  .grid-span-2 {
    grid-column: span 2;
  }
  .grid-span-3 {
    grid-column: span 3;
  }
  .grid-span-full {
    grid-column: 1 / -1;
  }
}
@layer utilities {
  .columns {
    column-count: var(--columns-count, 2);
    column-gap: var(--columns-gap, 2rem);
  }
  .columns-2 {
    --columns-count: 2;
  }
  .columns-3 {
    --columns-count: 3;
  }
  .columns-4 {
    --columns-count: 4;
  }
  .columns-auto {
    column-count: auto;
    column-width: var(--columns-width, 18rem);
  }
  .columns-gap-sm {
    --columns-gap: 1rem;
  }
  .columns-gap-lg {
    --columns-gap: 3rem;
  }
  .columns-rule {
    column-rule: 1px solid var(--border-divider);
  }
  .columns-item {
    break-inside: avoid;
  }
}
@layer utilities {
  .aspect {
    display: block;
    aspect-ratio: var(--aspect-ratio, 1 / 1);
  }
  .aspect-square {
    --aspect-ratio: 1 / 1;
  }
  .aspect-video {
    --aspect-ratio: 16 / 9;
  }
  .aspect-4-3 {
    --aspect-ratio: 4 / 3;
  }
  .aspect-3-2 {
    --aspect-ratio: 3 / 2;
  }
  .aspect-21-9 {
    --aspect-ratio: 21 / 9;
  }
  .aspect-golden {
    --aspect-ratio: 1.618 / 1;
  }
  .aspect-portrait {
    --aspect-ratio: 3 / 4;
  }
  .aspect > img, .aspect > video, .aspect > iframe {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .aspect-contain > img, .aspect-contain > video, .aspect-contain > iframe {
    object-fit: contain;
  }
  .aspect-rounded {
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
}
@layer utilities {
  .reel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--reel-gap, 1rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--reel-scroll-padding, 0);
  }
  .reel-item {
    flex: 0 0 auto;
    inline-size: var(--reel-item-size, auto);
    scroll-snap-align: start;
  }
  .reel-gap-xs {
    --reel-gap: 0.5rem;
  }
  .reel-gap-sm {
    --reel-gap: 0.75rem;
  }
  .reel-gap-md {
    --reel-gap: 1rem;
  }
  .reel-gap-lg {
    --reel-gap: 1.5rem;
  }
  .reel-item-sm {
    --reel-item-size: 12rem;
  }
  .reel-item-md {
    --reel-item-size: 16rem;
  }
  .reel-item-lg {
    --reel-item-size: 22rem;
  }
  .reel-snap-start > .reel-item {
    scroll-snap-align: start;
  }
  .reel-snap-center > .reel-item {
    scroll-snap-align: center;
  }
  .reel-peek {
    --reel-scroll-padding: 1rem;
  }
  .reel-peek > .reel-item {
    inline-size: var(--reel-peek-size, 85%);
  }
  .reel-no-bar {
    scrollbar-width: none;
  }
  .reel-no-bar::-webkit-scrollbar {
    display: none;
  }
}
@layer utilities {
  .cover {
    display: flex;
    flex-direction: column;
    min-block-size: var(--cover-min, 100svh);
    gap: var(--cover-gap, 1rem);
    padding: var(--cover-pad, 1rem);
  }
  .cover-center {
    margin-block: auto;
  }
  .cover-top {
    margin-block-start: 0;
  }
  .cover-bottom {
    margin-block-end: 0;
  }
  .cover-screen {
    --cover-min: 100svh;
  }
  .cover-half {
    --cover-min: 50svh;
  }
}
@layer utilities {
  .sidebar-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-layout-gap, 1rem);
  }
  .sidebar-layout__aside {
    flex-grow: 1;
    flex-basis: var(--sidebar-width, 18rem);
  }
  .sidebar-layout__main {
    flex-grow: 999;
    flex-basis: 0;
    min-inline-size: var(--sidebar-content-min, 60%);
  }
  .sidebar-layout-right > .sidebar-layout__aside {
    order: 1;
  }
  .sidebar-narrow {
    --sidebar-width: 14rem;
  }
  .sidebar-wide {
    --sidebar-width: 24rem;
  }
  .sidebar-layout-gap-sm {
    --sidebar-layout-gap: 0.75rem;
  }
  .sidebar-layout-gap-lg {
    --sidebar-layout-gap: 1.5rem;
  }
}
@layer utilities {
  .full-bleed {
    --full-bleed-vw: 100vw;
    inline-size: var(--full-bleed-vw);
    margin-inline: calc(50% - var(--full-bleed-vw) / 2);
  }
  .full-bleed-contained {
    padding-inline: var(--full-bleed-pad, 1rem);
  }
  .full-bleed-fixed {
    --full-bleed-vw: 100dvw;
  }
}
@layer utilities {
  .well {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--well-pad, 1rem);
  }
  .well-subtle {
    background-color: var(--bg-tertiary);
  }
  .well-flush {
    border: 0;
  }
  .well-sm {
    --well-pad: 0.75rem;
  }
  .well-md {
    --well-pad: 1rem;
  }
  .well-lg {
    --well-pad: 1.5rem;
  }
  .well-inset {
    box-shadow: inset 0 1px 2px 0 var(--border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 2px 0 color-mix(in oklch, var(--border-primary) 55%, transparent);
    }
  }
}
@layer utilities {
  .layer {
    display: grid;
  }
  .layer > * {
    grid-area: 1 / 1;
    min-inline-size: 0;
    min-block-size: 0;
  }
  .layer-top-left {
    place-self: start start;
  }
  .layer-top {
    place-self: start center;
  }
  .layer-top-right {
    place-self: start end;
  }
  .layer-left {
    place-self: center start;
  }
  .layer-center {
    place-self: center;
  }
  .layer-right {
    place-self: center end;
  }
  .layer-bottom-left {
    place-self: end start;
  }
  .layer-bottom {
    place-self: end center;
  }
  .layer-bottom-right {
    place-self: end end;
  }
  .layer-top-left, .layer-top, .layer-top-right, .layer-left, .layer-center, .layer-right, .layer-bottom-left, .layer-bottom, .layer-bottom-right {
    margin: var(--layer-pad, 0);
  }
  .layer-back {
    z-index: 0;
  }
  .layer-front {
    z-index: 1;
  }
  .layer-scrim {
    background: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-primary) var(--layer-scrim, 40%), transparent);
    }
  }
  .layer-scrim-soft {
    --layer-scrim: 25%;
  }
  .layer-scrim-strong {
    --layer-scrim: 60%;
  }
}
@layer utilities {
  .section {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap, 1rem);
  }
  .section-sm {
    --section-gap: 0.75rem;
  }
  .section-lg {
    --section-gap: 1.5rem;
  }
  .section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
  .section__titles {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
  }
  .section__title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
  }
  .section__desc {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .section__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
  }
  .section__body {
    min-inline-size: 0;
  }
  .section-bordered {
    border-block-start: 1px solid var(--border-divider);
    padding-block-start: 1.5rem;
  }
  .section-inset {
    padding-inline: 1rem;
  }
}
@layer utilities {
  .sticky-top {
    position: sticky;
    inset-block-start: var(--sticky-offset, 0);
    z-index: var(--z-sticky);
  }
  .sticky-bottom {
    position: sticky;
    inset-block-end: var(--sticky-offset, 0);
    z-index: var(--z-sticky);
  }
  .sticky-offset-sm {
    --sticky-offset: 2.5rem;
  }
  .sticky-offset-md {
    --sticky-offset: 3.5rem;
  }
  .sticky-offset-lg {
    --sticky-offset: 4.5rem;
  }
  .sticky-top.sticky-1 {
    inset-block-start: var(--sticky-offset, 0rem);
  }
  .sticky-top.sticky-2 {
    inset-block-start: calc(var(--sticky-offset, 0rem) + var(--sticky-step, 2.5rem));
  }
  .sticky-top.sticky-3 {
    inset-block-start: calc(var(--sticky-offset, 0rem) + var(--sticky-step, 2.5rem) * 2);
  }
  .sticky-aside {
    position: sticky;
    align-self: start;
    inset-block-start: var(--sticky-offset, 0);
  }
}
@layer utilities {
  .container-x {
    margin-inline: auto;
    padding-inline: var(--container-gutter, 1rem);
    inline-size: 100%;
    max-inline-size: var(--container-max, 48rem);
  }
  .container-prose {
    --container-max: 45rem;
  }
  .container-narrow {
    --container-max: 30rem;
  }
  .container-default {
    --container-max: 48rem;
  }
  .container-wide {
    --container-max: 72rem;
  }
  .container-fluid {
    --container-max: none;
  }
  .container-gutter-sm {
    --container-gutter: 0.5rem;
  }
  .container-gutter-lg {
    --container-gutter: 2rem;
  }
  .container-flush {
    --container-gutter: 0;
  }
}
@layer utilities {
  .master-detail {
    display: flex;
    flex-direction: row;
    gap: var(--master-detail-gap, 0);
    min-block-size: var(--master-detail-min-block, 20rem);
  }
  .master-detail__list {
    flex: 0 0 var(--master-width, 20rem);
    min-block-size: 0;
    overflow: auto;
    border-inline-end: 1px solid var(--border-secondary);
  }
  .master-detail__detail {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 0;
    overflow: auto;
  }
  .master-narrow {
    --master-width: 16rem;
  }
  .master-wide {
    --master-width: 26rem;
  }
  .master-detail__row {
    position: relative;
    display: block;
    padding: var(--master-detail-row-pad, 0.5rem 0.75rem);
    cursor: pointer;
  }
  .master-detail__row:hover {
    background-color: var(--bg-primary-hover);
  }
  .master-detail__row.is-active {
    background-color: var(--bg-primary-hover);
  }
  .master-detail__row.is-active::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--master-detail-marker, 3px);
    background-color: var(--bg-brand-solid);
  }
  .master-detail__back {
    display: none;
  }
  @media (max-width: 48rem) {
    .master-detail-responsive {
      flex-direction: column;
    }
    .master-detail-responsive > .master-detail__list {
      flex: 1 1 auto;
      border-inline-end: 0;
      border-block-end: 1px solid var(--border-secondary);
    }
    .master-detail-responsive[data-md-view="list"] > .master-detail__detail {
      display: none;
    }
    .master-detail-responsive[data-md-view="list"] > .master-detail__list {
      border-block-end: 0;
    }
    .master-detail-responsive[data-md-view="detail"] > .master-detail__list {
      display: none;
    }
    .master-detail-responsive[data-md-view="detail"] .master-detail__back {
      display: inline-flex;
    }
  }
}
@layer utilities {
  .gutters {
    padding-inline: var(--gutters, 1rem);
  }
  @media (min-width: 640px) {
    .gutters {
      --gutters: 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .gutters {
      --gutters: 2rem;
    }
  }
  .gutters-sm {
    padding-inline: 0.75rem;
  }
  .gutters-lg {
    padding-inline: 2.5rem;
  }
  .gutters-flush {
    padding-inline: 0;
  }
}
@layer utilities {
  .show-sm, .show-md, .show-lg, .show-xl {
    display: none;
  }
  @media (min-width: 640px) {
    .show-sm {
      display: revert;
    }
  }
  @media (min-width: 768px) {
    .show-md {
      display: revert;
    }
  }
  @media (min-width: 1024px) {
    .show-lg {
      display: revert;
    }
  }
  @media (min-width: 1280px) {
    .show-xl {
      display: revert;
    }
  }
  @media (min-width: 640px) {
    .hide-sm {
      display: none;
    }
  }
  @media (min-width: 768px) {
    .hide-md {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    .hide-lg {
      display: none;
    }
  }
  @media (min-width: 1280px) {
    .hide-xl {
      display: none;
    }
  }
  @media (min-width: 640px) {
    .show-only-mobile {
      display: none;
    }
  }
  .hide-mobile {
    display: none;
  }
  @media (min-width: 640px) {
    .hide-mobile {
      display: revert;
    }
  }
  .cq {
    container-type: inline-size;
  }
  .cq-show-md {
    display: none;
  }
  @container (min-width: 768px) {
    .cq-show-md {
      display: revert;
    }
    .cq-hide-md {
      display: none;
    }
  }
}
@layer utilities {
  [data-theme="theme-light"], [data-theme="theme-mica-light"] {
    --scroll-thumb: rgba(0, 0, 0, 0.18);
    --scroll-track: var(--utility-neutral-300);
    --canvas-primary: var(--alpha-neutral-50-50);
    --canvas-secondary: var(--alpha-white-100);
    --bg-alpha-0: var(--alpha-0);
    --bg-sidebar-edge-hitbox-hover: var(--utility-neutral-100);
    --text-primary: var(--utility-neutral-900);
    --text-primary-alt: var(--utility-neutral-850);
    --text-primary-hover: var(--utility-neutral-950);
    --text-primary-subtle: var(--utility-neutral-800);
    --text-primary-solid: var(--utility-blue-500);
    --text-secondary: var(--utility-neutral-700);
    --text-secondary-alt: var(--utility-neutral-800);
    --text-secondary-hover: var(--utility-neutral-800);
    --text-secondary-subtle: var(--utility-neutral-600);
    --text-secondary-solid: var(--utility-neutral-800);
    --text-tertiary: var(--utility-neutral-600);
    --text-tertiary-alt: var(--utility-neutral-700);
    --text-tertiary-hover: var(--utility-neutral-700);
    --text-tertiary-subtle: var(--utility-neutral-500);
    --text-tertiary-solid: var(--utility-neutral-700);
    --text-quaternary: var(--utility-neutral-500);
    --text-quaternary-alt: var(--utility-neutral-600);
    --text-quaternary-hover: var(--utility-neutral-600);
    --text-quaternary-subtle: var(--utility-neutral-400);
    --text-quaternary-solid: var(--utility-neutral-600);
    --text-disabled: var(--utility-neutral-500);
    --text-placeholder: var(--utility-neutral-500);
    --text-detail-section-title: var(--text-primary);
    --text-danger: var(--utility-red-600);
    --text-danger-strong: var(--utility-red-700);
    --text-danger-alt: var(--utility-red-500);
    --text-danger-hover: var(--utility-red-700);
    --text-danger-subtle: var(--utility-red-400);
    --text-danger-solid: var(--utility-red-800);
    --text-warning: var(--utility-amber-700);
    --text-warning-strong: var(--utility-orange-800);
    --text-warning-alt: var(--utility-yellow-500);
    --text-warning-hover: var(--utility-yellow-700);
    --text-warning-subtle: var(--utility-yellow-400);
    --text-warning-solid: var(--utility-yellow-800);
    --text-success: var(--utility-green-700);
    --text-success-strong: var(--utility-green-800);
    --text-success-alt: var(--utility-green-500);
    --text-success-hover: var(--utility-green-700);
    --text-success-subtle: var(--utility-green-400);
    --text-success-solid: var(--utility-green-800);
    --text-info: var(--utility-blue-600);
    --text-tag-info: var(--utility-blue-700);
    --text-info-alt: var(--utility-blue-500);
    --text-info-hover: var(--utility-blue-700);
    --text-info-subtle: var(--utility-blue-400);
    --text-info-solid: var(--utility-blue-800);
    --text-purple: var(--utility-purple-600);
    --text-purple-alt: var(--utility-purple-500);
    --text-purple-hover: var(--utility-purple-700);
    --text-purple-subtle: var(--utility-purple-400);
    --text-purple-solid: var(--utility-purple-800);
    --text-indigo: var(--utility-indigo-600);
    --text-indigo-alt: var(--utility-indigo-500);
    --text-indigo-hover: var(--utility-indigo-700);
    --text-indigo-subtle: var(--utility-indigo-400);
    --text-indigo-solid: var(--utility-indigo-800);
    --text-teal: var(--utility-teal-700);
    --text-teal-alt: var(--utility-teal-500);
    --text-teal-hover: var(--utility-teal-700);
    --text-teal-subtle: var(--utility-teal-400);
    --text-teal-solid: var(--utility-teal-800);
    --text-pink: var(--utility-pink-600);
    --text-pink-alt: var(--utility-pink-500);
    --text-pink-hover: var(--utility-pink-700);
    --text-pink-subtle: var(--utility-pink-400);
    --text-pink-solid: var(--utility-pink-800);
    --text-mint: var(--utility-mint-600);
    --text-mint-alt: var(--utility-mint-500);
    --text-mint-hover: var(--utility-mint-700);
    --text-mint-subtle: var(--utility-mint-400);
    --text-mint-solid: var(--utility-mint-800);
    --text-icon: var(--text-secondary);
    --text-icon-primary: var(--text-primary);
    --text-icon-secondary: var(--text-secondary);
    --text-icon-tertiary: var(--text-tertiary);
    --text-icon-quaternary: var(--text-quaternary);
    --text-icon-light: var(--text-tertiary);
    --text-icon-dark: var(--text-primary);
    --text-icon-disabled: var(--text-disabled);
    --text-icon-brand: var(--color-brand-700);
    --text-icon-success: var(--text-success);
    --text-icon-warning: var(--text-warning);
    --text-icon-danger: var(--text-danger);
    --text-icon-info: var(--text-info);
    --text-icon-purple: var(--text-purple);
    --text-icon-indigo: var(--text-indigo);
    --text-icon-pink: var(--text-pink);
    --text-icon-teal: var(--text-teal);
    --text-icon-mint: var(--text-mint);
    --border-primary: var(--utility-neutral-300);
    --border-primary-alt: var(--utility-neutral-300);
    --border-primary-hover: var(--utility-neutral-300);
    --border-primary-subtle: var(--utility-neutral-100);
    --border-primary-solid: var(--utility-neutral-400);
    --border-secondary: var(--utility-neutral-200);
    --border-secondary-alt: var(--utility-neutral-300);
    --border-secondary-hover: var(--utility-neutral-300);
    --border-secondary-subtle: var(--utility-neutral-100);
    --border-secondary-solid: var(--utility-neutral-400);
    --border-tertiary: var(--utility-neutral-400);
    --border-tertiary-alt: var(--utility-neutral-400);
    --border-tertiary-hover: var(--utility-neutral-400);
    --border-tertiary-subtle: var(--utility-neutral-300);
    --border-tertiary-solid: var(--utility-neutral-600);
    --border-quaternary: var(--utility-neutral-500);
    --border-quaternary-alt: var(--utility-neutral-600);
    --border-quaternary-hover: var(--utility-neutral-600);
    --border-quaternary-subtle: var(--utility-neutral-400);
    --border-quaternary-solid: var(--utility-neutral-700);
    --border-danger: var(--utility-red-400);
    --border-danger-alt: var(--utility-red-500);
    --border-danger-hover: var(--utility-red-500);
    --border-danger-subtle: var(--utility-red-200);
    --border-danger-solid: var(--utility-red-800);
    --border-warning: var(--utility-yellow-400);
    --border-warning-alt: var(--utility-yellow-500);
    --border-warning-hover: var(--utility-yellow-500);
    --border-warning-subtle: var(--utility-yellow-200);
    --border-warning-solid: var(--utility-yellow-800);
    --border-success: var(--utility-green-400);
    --border-success-alt: var(--utility-green-500);
    --border-success-hover: var(--utility-green-500);
    --border-success-subtle: var(--utility-green-200);
    --border-success-solid: var(--utility-green-800);
    --border-info: var(--utility-blue-400);
    --border-info-alt: var(--utility-blue-500);
    --border-info-hover: var(--utility-blue-500);
    --border-info-subtle: var(--utility-blue-200);
    --border-info-solid: var(--utility-blue-800);
    --border-purple: var(--utility-purple-400);
    --border-purple-alt: var(--utility-purple-500);
    --border-purple-hover: var(--utility-purple-500);
    --border-purple-subtle: var(--utility-purple-200);
    --border-purple-solid: var(--utility-purple-800);
    --border-indigo: var(--utility-indigo-400);
    --border-indigo-alt: var(--utility-indigo-500);
    --border-indigo-hover: var(--utility-indigo-500);
    --border-indigo-subtle: var(--utility-indigo-200);
    --border-indigo-solid: var(--utility-indigo-800);
    --border-teal: var(--utility-teal-400);
    --border-teal-alt: var(--utility-teal-500);
    --border-teal-hover: var(--utility-teal-500);
    --border-teal-subtle: var(--utility-teal-200);
    --border-teal-solid: var(--utility-teal-800);
    --border-pink: var(--utility-pink-400);
    --border-pink-alt: var(--utility-pink-500);
    --border-pink-hover: var(--utility-pink-500);
    --border-pink-subtle: var(--utility-pink-200);
    --border-pink-solid: var(--utility-pink-800);
    --border-mint: var(--utility-mint-400);
    --bg-black: var(--utility-neutral-900);
    --bg-black-hover: var(--utility-neutral-950);
    --bg-primary: var(--alpha-white-100);
    --bg-primary-alt: var(--alpha-white-100);
    --bg-primary-hover: var(--utility-neutral-100);
    --bg-primary-subtle: var(--utility-neutral-50);
    --bg-primary-solid: var(--utility-blue-500);
    --bg-secondary: var(--utility-neutral-50);
    --bg-secondary-alt: var(--utility-neutral-50);
    --bg-secondary-hover: var(--utility-neutral-100);
    --bg-secondary-subtle: var(--utility-neutral-100);
    --bg-secondary-solid: var(--utility-neutral-800);
    --bg-tertiary: var(--utility-neutral-100);
    --bg-tertiary-alt: var(--utility-neutral-200);
    --bg-tertiary-hover: var(--utility-neutral-200);
    --bg-tertiary-subtle: var(--utility-neutral-200);
    --bg-tertiary-solid: var(--utility-neutral-700);
    --bg-quaternary: var(--utility-neutral-200);
    --bg-quaternary-alt: var(--utility-neutral-300);
    --bg-quaternary-hover: var(--utility-neutral-300);
    --bg-quaternary-subtle: var(--utility-neutral-300);
    --bg-quaternary-solid: var(--utility-neutral-600);
    --bg-overlay: var(--utility-neutral-950);
    --bg-map-scrim: var(--bg-overlay);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-map-scrim: color-mix(in srgb, var(--bg-overlay) 78%, transparent);
    }
    --text-on-map-scrim: var(--utility-neutral-50);
    --bg-gray: var(--utility-neutral-500);
    --bg-gray-alt: var(--utility-neutral-600);
    --bg-gray-hover: var(--utility-neutral-600);
    --bg-gray-subtle: var(--utility-neutral-100);
    --bg-gray-solid: var(--utility-neutral-800);
    --bg-danger: var(--utility-red-500);
    --bg-danger-alt: var(--utility-red-600);
    --bg-danger-hover: var(--utility-red-600);
    --bg-danger-subtle: var(--utility-red-100);
    --bg-danger-solid: var(--utility-red-800);
    --bg-warning: var(--utility-yellow-400);
    --bg-warning-alt: var(--utility-yellow-500);
    --bg-warning-hover: var(--utility-yellow-500);
    --bg-warning-subtle: var(--utility-yellow-100);
    --bg-warning-solid: var(--utility-yellow-800);
    --bg-success: var(--utility-green-400);
    --bg-success-alt: var(--utility-green-500);
    --bg-success-hover: var(--utility-green-500);
    --bg-success-subtle: var(--utility-green-100);
    --bg-success-solid: var(--utility-green-800);
    --bg-info: var(--utility-blue-400);
    --bg-info-alt: var(--utility-blue-500);
    --bg-info-hover: var(--utility-blue-500);
    --bg-info-subtle: var(--utility-blue-100);
    --bg-info-solid: var(--utility-blue-800);
    --bg-purple: var(--utility-purple-400);
    --bg-purple-alt: var(--utility-purple-500);
    --bg-purple-hover: var(--utility-purple-500);
    --bg-purple-subtle: var(--utility-purple-100);
    --bg-purple-solid: var(--utility-purple-800);
    --bg-indigo: var(--utility-indigo-400);
    --bg-indigo-alt: var(--utility-indigo-500);
    --bg-indigo-hover: var(--utility-indigo-500);
    --bg-indigo-subtle: var(--utility-indigo-100);
    --bg-indigo-solid: var(--utility-indigo-800);
    --bg-teal: var(--utility-teal-400);
    --bg-teal-alt: var(--utility-teal-500);
    --bg-teal-hover: var(--utility-teal-500);
    --bg-teal-subtle: var(--utility-teal-100);
    --bg-teal-solid: var(--utility-teal-800);
    --bg-pink: var(--utility-pink-400);
    --bg-pink-alt: var(--utility-pink-500);
    --bg-pink-hover: var(--utility-pink-500);
    --bg-pink-subtle: var(--utility-pink-100);
    --bg-pink-solid: var(--utility-pink-800);
    --star-filled: var(--utility-yellow-400);
    --star-empty: var(--bg-tertiary);
    --star-filled-hover: var(--utility-yellow-500);
    --text-theme-label: var(--text-tertiary);
    --theme-light-base-swatch: var(--utility-neutral-900);
    --theme-light-primary-swatch: var(--utility-blue-500);
    --theme-light-secondary-swatch: var(--utility-pink-400);
    --theme-light-accent-swatch: var(--utility-teal-400);
    --bg-theme-light-swatch: var(--alpha-white-100);
    --border-theme-light-swatch: var(--utility-neutral-200);
    --theme-dark-base-swatch: var(--utility-neutral-100);
    --theme-dark-primary-swatch: var(--utility-indigo-300);
    --theme-dark-secondary-swatch: var(--utility-pink-300);
    --theme-dark-accent-swatch: var(--utility-teal-300);
    --bg-theme-dark-swatch: var(--utility-neutral-900);
    --border-theme-dark-swatch: var(--utility-neutral-700);
    --width-sidebar-expanded: 240px;
    --bg-sidebar: var(--utility-neutral-50);
    --bg-sidebar-hover: var(--alpha-white-100);
    --bg-sidebar-header: var(--alpha-0);
    --bg-sidebar-avatar: var(--alpha-white-100);
    --border-sidebar: var(--border-primary);
    --border-sidebar-divider: var(--utility-neutral-100);
    --bg-sidebar-item-hover: var(--utility-neutral-100);
    --bg-sidebar-item-active: var(--utility-neutral-200);
    --bg-sidebar-item-active-hover: var(--utility-neutral-300);
    --text-sidebar: var(--text-primary);
    --text-sidebar-muted: var(--text-secondary);
    --text-sidebar-subtle: var(--text-quaternary);
    --bg-sidebar-dot-muted: var(--utility-neutral-300);
    --bg-sidebar-dot-active: var(--utility-neutral-900);
    --border-split: var(--border-secondary);
    --border-split-hover: var(--color-brand-500);
    --border-split-active: var(--color-brand-600);
    --width-menu-expanded: 224px;
    --width-menu-collapsed: 54px;
    --menu-indent: 12px;
    --bg-menu: var(--alpha-0);
    --bg-menu-hover: var(--utility-neutral-100);
    --bg-menu-active: var(--utility-neutral-100);
    --bg-menu-open: var(--utility-neutral-100);
    --bg-menu-dot: var(--utility-neutral-400);
    --bg-menu-dot-muted: var(--utility-neutral-400);
    --bg-menu-dot-active: var(--utility-neutral-950);
    --bg-menu-badge: var(--utility-neutral-900);
    --text-menu-badge: var(--utility-neutral-50);
    --bg-menu-badge-muted: var(--utility-neutral-200);
    --text-menu-badge-muted: var(--utility-neutral-700);
    --text-menu: var(--utility-neutral-800);
    --text-menu-strong: var(--utility-neutral-900);
    --text-menu-hover: var(--utility-neutral-950);
    --text-menu-active: var(--utility-neutral-950);
    --text-menu-muted: var(--utility-neutral-600);
    --border-menu: var(--alpha-0);
    --border-menu-muted: var(--alpha-0);
    --icon-menu: var(--utility-neutral-800);
    --icon-menu-muted: var(--utility-neutral-600);
    --focus-menu: var(--border-info);
    --text-page-header: var(--text-primary);
    --text-page-title: var(--text-primary);
    --text-breadcrumb: var(--text-tertiary);
    --text-breadcrumb-separator: var(--text-tertiary);
    --bg-page-header: var(--alpha-0);
    --bg-page-header-hover: var(--bg-secondary);
    --bg-breadcrumb: var(--alpha-0);
    --bg-breadcrumb-hover: var(--bg-secondary-subtle);
    --border-breadcrumb: var(--border-primary-subtle);
    --text-breadcrumb-item: var(--text-quaternary);
    --text-breadcrumb-item-hover: var(--text-tertiary);
    --text-breadcrumb-current: var(--text-link);
    --text-breadcrumb-strong: var(--text-primary);
    --fg-breadcrumb-icon: var(--text-quaternary);
    --fg-breadcrumb-icon-current: var(--text-link);
    --fg-breadcrumb-divider: var(--utility-neutral-300);
    --bg-breadcrumb-item-hover: var(--bg-primary-hover);
    --border-breadcrumb-line: var(--border-secondary);
    --border-breadcrumb-avatar: var(--border-secondary);
    --bg-tab: var(--alpha-0);
    --bg-tab-hover: var(--alpha-0);
    --text-tab: var(--utility-neutral-500);
    --text-tab-hover: var(--utility-neutral-950);
    --text-tab-active: var(--utility-neutral-950);
    --border-tab: var(--alpha-0);
    --border-tab-hover: var(--utility-neutral-900);
    --border-tab-active: var(--utility-neutral-900);
    --text-tab-badge: var(--text-primary);
    --bg-tab-ribbon: var(--utility-neutral-50);
    --bg-tab-ribbon-hover: var(--utility-neutral-100);
    --bg-tab-ribbon-item: var(--alpha-0);
    --bg-tab-ribbon-active: var(--alpha-white-100);
    --text-tab-ribbon: var(--utility-neutral-800);
    --text-tab-ribbon-active: var(--utility-neutral-950);
    --border-tab-ribbon: var(--utility-neutral-200);
    --bg-tab-menu-hover: var(--utility-neutral-100);
    --bg-tab-menu-active: var(--utility-neutral-100);
    --text-tab-menu: var(--utility-neutral-700);
    --text-tab-menu-hover: var(--utility-neutral-950);
    --text-tab-menu-active: var(--utility-neutral-950);
    --bg-tab-browser: var(--utility-neutral-50);
    --border-tab-browser: var(--utility-neutral-200);
    --bg-tab-browser-item: var(--alpha-0);
    --bg-tab-browser-hover: var(--utility-neutral-100);
    --bg-tab-browser-active: var(--alpha-white-100);
    --text-tab-browser: var(--utility-neutral-800);
    --text-tab-browser-hover: var(--utility-neutral-800);
    --text-tab-browser-active: var(--utility-neutral-950);
    --border-tab-browser-hover: var(--alpha-0);
    --bg-tab-browser-divider: var(--utility-neutral-200);
    --text-tab-rest: var(--text-tab);
    --text-tab-rest-hover: var(--text-secondary);
    --text-tab-accent: var(--color-brand-700);
    --border-tab-accent: var(--color-brand-600);
    --bg-tab-accent-active: var(--color-brand-50);
    --text-tab-neutral-active: var(--text-secondary);
    --bg-tab-neutral-active: var(--bg-primary-hover);
    --bg-tab-track: var(--bg-tab-ribbon);
    --border-tab-track: var(--border-tab-ribbon);
    --bg-tab-raised-active: var(--bg-tab-ribbon-active);
    --border-tab-hairline: var(--border-secondary);
    --ring-tab-focus: var(--border-focus);
    --bg-toolbar: var(--alpha-0);
    --border-toolbar: var(--border-primary-subtle);
    --text-toolbar: var(--text-secondary);
    --text-toolbar-strong: var(--text-primary);
    --text-toolbar-muted: var(--text-tertiary);
    --bg-toolbar-group: var(--alpha-0);
    --border-toolbar-group: var(--alpha-0);
    --border-toolbar-divider: var(--border-primary-subtle);
    --bg-toolbar-btn: var(--alpha-0);
    --bg-toolbar-btn-hover: var(--utility-neutral-200);
    --bg-toolbar-btn-active: var(--utility-neutral-200);
    --bg-toolbar-btn-selected: var(--utility-neutral-200);
    --border-toolbar-btn: var(--alpha-0);
    --border-toolbar-btn-hover: var(--border-primary);
    --border-toolbar-btn-selected: var(--border-primary);
    --text-toolbar-hover: var(--text-primary);
    --icon-toolbar: var(--text-secondary);
    --icon-toolbar-hover: var(--text-primary);
    --bg-toolbar-badge: var(--utility-neutral-900);
    --text-toolbar-badge: var(--utility-neutral-50);
    --bg-toolbar-input: var(--alpha-0);
    --border-toolbar-input: var(--border-primary-subtle);
    --focus-toolbar: var(--border-focus);
    --bg-tray: var(--alpha-white-100);
    --bg-tray-body: var(--utility-neutral-50);
    --bg-tray-header: var(--alpha-0);
    --bg-tray-footer: var(--alpha-0);
    --bg-tray-overlay: var(--alpha-neutral-950-20);
    --border-tray: var(--border-primary-subtle);
    --border-tray-divider: var(--border-primary-subtle);
    --text-tray: var(--text-primary);
    --text-tray-muted: var(--text-tertiary);
    --text-tray-heading: var(--text-primary);
    --icon-tray: var(--text-secondary);
    --icon-tray-close: var(--text-secondary);
    --bg-tray-close-hover: var(--utility-neutral-100);
    --icon-tray-pin: var(--text-tertiary);
    --bg-tray-pin-hover: var(--utility-neutral-100);
    --icon-tray-pin-active: var(--color-info);
    --bg-tray-pin-active: var(--bg-info-subtle);
    --border-tray-pin-active: transparent;
    --text-button-primary: var(--alpha-white-100);
    --bg-button-primary: var(--utility-gray-950);
    --bg-button-primary-hover: var(--utility-gray-800);
    --bg-button-primary-active: var(--utility-gray-900);
    --border-button-primary: var(--alpha-0);
    --text-button-secondary: var(--text-primary);
    --bg-button-secondary: var(--alpha-0);
    --bg-button-secondary-hover: var(--bg-primary);
    --bg-button-secondary-active: var(--utility-neutral-50);
    --bg-button-secondary-active-state: var(--utility-neutral-100);
    --border-button-secondary: var(--alpha-0);
    --text-button-soft: var(--text-primary);
    --bg-button-soft: var(--utility-neutral-50);
    --bg-button-soft-hover: var(--utility-neutral-100);
    --bg-button-soft-active: var(--utility-neutral-50);
    --border-button-soft: var(--alpha-0);
    --text-button-ghost: var(--text-primary);
    --bg-button-ghost: var(--alpha-0);
    --bg-button-ghost-hover: var(--utility-neutral-100);
    --bg-button-ghost-active: var(--utility-neutral-50);
    --border-button-ghost: var(--alpha-0);
    --text-button-link: var(--text-primary);
    --text-button-link-hover: var(--text-primary);
    --text-button-light: var(--text-primary);
    --bg-button-light: var(--utility-neutral-50);
    --bg-button-light-hover: var(--utility-neutral-100);
    --bg-button-light-active: var(--utility-neutral-200);
    --border-button-light: var(--border-primary);
    --text-button-input: var(--utility-neutral-950);
    --bg-button-input: var(--utility-neutral-50);
    --bg-button-input-hover: var(--utility-neutral-100);
    --bg-button-input-active: var(--utility-neutral-50);
    --border-button-input: var(--alpha-0);
    --text-button-topbar: var(--utility-neutral-900);
    --bg-button-topbar: var(--alpha-0);
    --bg-button-topbar-hover: var(--utility-neutral-200);
    --bg-button-topbar-active: var(--utility-neutral-100);
    --border-button-topbar: var(--alpha-0);
    --border-button-topbar-hover: var(--alpha-0);
    --text-button-danger: var(--alpha-white-100);
    --bg-button-danger: var(--utility-red-600);
    --bg-button-danger-hover: var(--utility-red-700);
    --bg-button-danger-active: var(--utility-red-800);
    --border-button-danger: var(--alpha-0);
    --text-button-danger-outline: var(--utility-red-700);
    --bg-button-danger-outline: var(--alpha-0);
    --bg-button-danger-outline-hover: var(--utility-red-100);
    --bg-button-danger-outline-active: var(--utility-red-50);
    --border-button-danger-outline: var(--alpha-0);
    --text-button-glass: var(--alpha-white-100);
    --bg-button-glass: var(--alpha-white-20);
    --border-button-glass: var(--alpha-white-30);
    --text-button-glass-hover: var(--alpha-white-100);
    --bg-button-glass-hover: var(--alpha-white-30);
    --border-button-glass-hover: var(--alpha-white-30);
    --text-button-glass-active: var(--alpha-white-100);
    --bg-button-glass-active: var(--alpha-white-20);
    --border-button-glass-active: var(--alpha-white-30);
    --opacity-button-grain: 0.2;
    --border-button-focus: var(--border-primary);
    --ring-button-focus-offset: var(--bg-body);
    --text-input: var(--utility-neutral-900);
    --text-input-primary: var(--utility-neutral-950);
    --text-input-placeholder: var(--utility-neutral-400);
    --text-input-disabled: var(--utility-neutral-500);
    --text-input-tertiary: var(--utility-neutral-500);
    --text-input-readonly: var(--text-input);
    --bg-input: var(--utility-neutral-100);
    --bg-input-select: var(--utility-neutral-50);
    --bg-input-disabled: var(--utility-neutral-200);
    --bg-input-soft: var(--utility-neutral-100);
    --bg-input-soft-hover: var(--utility-neutral-100);
    --bg-input-soft-active: var(--utility-neutral-200);
    --bg-input-borderless: var(--utility-neutral-100);
    --bg-input-borderless-hover: var(--utility-neutral-100);
    --bg-input-borderless-active: var(--utility-neutral-100);
    --bg-input-ghost-hover: var(--utility-neutral-100);
    --bg-input-ghost-active: var(--utility-neutral-50);
    --bg-input-readonly: var(--utility-neutral-100);
    --bg-input-addon: var(--utility-neutral-100);
    --bg-input-group-hover: var(--utility-neutral-100);
    --bg-input-group-focus: var(--utility-neutral-100);
    --border-control: var(--utility-neutral-200);
    --border-control-hover: var(--utility-neutral-400);
    --border-control-focus: var(--utility-blue-500);
    --border-input: var(--border-control);
    --border-input-hover: var(--border-control-hover);
    --border-input-active: var(--border-control-focus);
    --border-input-disabled: var(--utility-neutral-300);
    --border-input-transparent: var(--alpha-0);
    --border-input-addon: var(--border-input);
    --border-input-stack: var(--border-input);
    --border-input-stack-hover: var(--border-input-hover);
    --border-input-stack-active: var(--border-control-focus);
    --border-input-stack-divider: var(--border-input);
    --border-input-group-error: var(--border-input-error);
    --border-input-group-error-focus: var(--border-input-error-focus);
    --border-input-error: var(--border-danger);
    --border-input-error-focus: var(--border-danger);
    --border-input-success: var(--border-success);
    --border-input-success-focus: var(--border-success);
    --border-input-warning: var(--border-warning);
    --border-input-warning-focus: var(--border-warning);
    --border-input-info: var(--border-info);
    --border-input-info-focus: var(--border-info);
    --border-input-focus: var(--border-input-active);
    --ring-input-focus-offset: var(--bg-body);
    --text-form-label: var(--utility-neutral-700);
    --text-form-label-strong: var(--utility-neutral-800);
    --text-form-label-muted: var(--utility-neutral-500);
    --text-form-label-required: var(--utility-red-500);
    --text-form-hint: var(--utility-neutral-600);
    --text-form-hint-muted: var(--utility-neutral-500);
    --text-form-error: var(--text-danger);
    --text-form-success: var(--text-success);
    --text-form-warning: var(--text-warning);
    --text-form-info: var(--text-info);
    --text-form-info-btn: var(--utility-neutral-500);
    --bg-form-info-btn-hover: var(--utility-neutral-100);
    --border-form-info-btn: var(--alpha-0);
    --border-form-error: var(--border-danger);
    --border-form-success: var(--border-success);
    --border-form-warning: var(--border-warning);
    --border-form-info: var(--border-info);
    --border-form-divider: var(--utility-neutral-100);
    --text-check-label: var(--text-primary);
    --text-check-label-muted: var(--utility-neutral-500);
    --text-checkbox: var(--utility-neutral-900);
    --text-checkbox-checked: var(--alpha-white-100);
    --text-checkbox-disabled: var(--utility-neutral-500);
    --bg-checkbox: var(--alpha-0);
    --bg-checkbox-active: var(--utility-neutral-100);
    --bg-checkbox-checked: var(--color-brand-600);
    --bg-checkbox-disabled: var(--utility-neutral-100);
    --bg-checkbox-disabled-checked: var(--utility-neutral-400);
    --border-checkbox: var(--utility-neutral-200);
    --border-checkbox-hover: var(--utility-neutral-500);
    --border-checkbox-active: var(--utility-neutral-900);
    --border-checkbox-checked: var(--utility-neutral-900);
    --border-checkbox-disabled: var(--utility-neutral-300);
    --border-checkbox-disabled-checked: var(--utility-neutral-400);
    --border-checkbox-error: var(--border-danger);
    --border-checkbox-success: var(--border-success);
    --bg-toggle-track: var(--utility-neutral-200);
    --bg-toggle-track-hover: var(--utility-neutral-300);
    --bg-toggle-track-checked: var(--utility-blue-500);
    --bg-toggle-track-disabled: var(--utility-neutral-300);
    --bg-toggle-thumb: var(--alpha-white-100);
    --shadow-toggle-thumb: var(--shadow-sm);
    --border-toggle-track: var(--alpha-0);
    --bg-toggle-track-success: var(--utility-green-500);
    --bg-toggle-track-warning: var(--utility-amber-500);
    --bg-toggle-track-danger: var(--utility-red-500);
    --bg-toggle-track-info: var(--utility-blue-500);
    --text-toggle-thumb-icon: var(--utility-neutral-500);
    --text-toggle-thumb-icon-checked: var(--utility-blue-600);
    --border-color-swatch: var(--alpha-black-20);
    --border-color-swatch-light: var(--utility-neutral-300);
    --bg-color-swatch-ring-hover: var(--utility-neutral-300);
    --bg-color-swatch-ring-focus: var(--border-focus);
    --bg-color-swatch-ring-active: var(--border-focus);
    --text-color-swatch-check: var(--alpha-white-100);
    --text-color-swatch-slash: var(--utility-neutral-300);
    --bg-color-picker-preview: var(--utility-neutral-100);
    --bg-color-picker-dialog: var(--bg-primary);
    --border-color-picker-dialog: var(--border-secondary);
    --shadow-color-picker-dialog: var(--shadow-xl);
    --border-color-picker-hairline: var(--alpha-black-10);
    --bg-color-picker-thumb-border: var(--color-white);
    --shadow-color-picker-thumb: var(--shadow-md);
    --bg-color-picker-checker-a: var(--utility-neutral-300);
    --bg-color-picker-checker-b: var(--color-white);
    --bg-color-picker-cell: var(--bg-primary);
    --border-color-picker-cell: var(--border-primary);
    --border-color-picker-cell-focus: var(--border-focus);
    --text-color-picker-cell: var(--text-primary);
    --text-color-picker-saved-label: var(--text-secondary);
    --text-radio: var(--utility-neutral-900);
    --bg-radio: var(--alpha-0);
    --bg-radio-active: var(--utility-neutral-100);
    --bg-radio-disabled: var(--utility-neutral-100);
    --bg-radio-dot: var(--alpha-0);
    --bg-radio-dot-checked: var(--utility-neutral-900);
    --bg-radio-dot-disabled: var(--utility-neutral-400);
    --border-radio: var(--utility-neutral-300);
    --border-radio-hover: var(--utility-neutral-500);
    --border-radio-active: var(--utility-neutral-500);
    --border-radio-checked: var(--utility-neutral-900);
    --border-radio-disabled: var(--utility-neutral-300);
    --border-radio-soft: var(--utility-neutral-200);
    --border-radio-ghost: var(--utility-neutral-200);
    --border-radio-error: var(--border-danger);
    --border-radio-success: var(--border-success);
    --bg-radio-dot-error: var(--utility-red-600);
    --bg-radio-dot-success: var(--utility-green-600);
    --text-step-indicator: var(--utility-neutral-700);
    --bg-step-indicator: var(--utility-neutral-50);
    --border-step-indicator: var(--utility-neutral-200);
    --shadow-step-indicator: var(--shadow-sm);
    --text-step-title: var(--text-primary);
    --text-step-subtitle: var(--utility-neutral-500);
    --bg-step-connector: var(--utility-neutral-200);
    --bg-step-connector-fill: var(--utility-neutral-900);
    --bg-step-hover: var(--utility-neutral-200);
    --bg-step-active: var(--utility-neutral-300);
    --bg-step-current-hover: var(--utility-neutral-700);
    --bg-step-current-active: var(--utility-neutral-900);
    --bg-step-completed-hover: var(--utility-neutral-700);
    --bg-step-completed-active: var(--utility-neutral-900);
    --text-step-current: var(--alpha-white-100);
    --bg-step-current: var(--utility-neutral-900);
    --border-step-current: var(--alpha-0);
    --text-step-title-current: var(--text-primary);
    --text-step-completed: var(--alpha-white-100);
    --bg-step-completed: var(--utility-neutral-900);
    --border-step-completed: var(--alpha-0);
    --text-step-disabled: var(--utility-neutral-400);
    --bg-step-disabled: var(--utility-neutral-100);
    --border-step-disabled: var(--utility-neutral-200);
    --text-step-error: var(--alpha-white-100);
    --bg-step-error: var(--utility-red-600);
    --border-step-error: var(--alpha-0);
    --text-step-title-error: var(--utility-red-700);
    --text-step-success: var(--alpha-white-100);
    --bg-step-success: var(--utility-green-600);
    --border-step-success: var(--alpha-0);
    --text-step-warning: var(--alpha-white-100);
    --bg-step-warning: var(--utility-amber-500);
    --border-step-warning: var(--alpha-0);
    --text-step-title-warning: var(--utility-amber-700);
    --text-step-skipped: var(--utility-neutral-500);
    --bg-step-skipped: var(--utility-neutral-100);
    --border-step-skipped: var(--utility-neutral-200);
    --halo-step-in-progress: oklch(60% 0.13 250 / 0.18);
    --bg-step-badge-optional: var(--utility-neutral-100);
    --text-step-badge-optional: var(--utility-neutral-600);
    --bg-step-badge-locked: var(--utility-neutral-100);
    --text-step-badge-locked: var(--utility-neutral-600);
    --bg-step-badge-ai: var(--utility-blue-50);
    --text-step-badge-ai: var(--utility-blue-700);
    --bg-step-pill: var(--utility-neutral-50);
    --text-step-pill: var(--utility-neutral-700);
    --border-step-pill: var(--utility-neutral-200);
    --bg-step-pill-current: var(--utility-blue-600);
    --text-step-pill-current: var(--alpha-white-100);
    --bg-step-pill-completed: var(--utility-green-600);
    --text-step-pill-completed: var(--alpha-white-100);
    --bg-step-card: var(--utility-white, oklch(100% 0 0));
    --border-step-card: var(--utility-neutral-200);
    --shadow-step-card: 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-step-card-current: 0 0 0 2px var(--utility-blue-500), 0 6px 14px oklch(0% 0 0 / 0.08);
    --bg-step-chevron: var(--utility-neutral-50);
    --bg-step-chevron-current: var(--utility-blue-50);
    --bg-step-chevron-completed: var(--utility-green-50);
    --bg-step-chevron-error: var(--utility-red-50);
    --text-step-chevron: var(--utility-neutral-700);
    --text-step-chevron-current: var(--utility-blue-700);
    --text-step-chevron-completed: var(--utility-green-700);
    --text-step-chevron-error: var(--utility-red-700);
    --bg-wizard: var(--bg-primary, var(--alpha-0));
    --border-wizard: var(--border-default, var(--utility-neutral-200));
    --border-wizard-divider: var(--border-default, var(--utility-neutral-200));
    --text-wizard-title: var(--text-primary);
    --text-wizard-subtitle: var(--utility-neutral-500);
    --bg-wizard-rail: var(--utility-neutral-50);
    --bg-wizard-content: var(--utility-white, oklch(100% 0 0));
    --shadow-wizard-floating: 0 1px 2px oklch(0% 0 0 / 0.04);
    --bg-dropdown: var(--alpha-white-100);
    --border-dropdown: var(--border-primary);
    --shadow-dropdown: var(--shadow-lg);
    --blur-dropdown-backdrop: none;
    --opacity-dropdown-grain: 0;
    --text-dropdown: var(--text-primary);
    --text-dropdown-item: var(--text-primary);
    --text-dropdown-icon: var(--utility-neutral-500);
    --text-dropdown-end: var(--utility-neutral-500);
    --text-dropdown-title: var(--utility-neutral-500);
    --text-dropdown-hint: var(--utility-neutral-400);
    --bg-dropdown-hover: var(--utility-neutral-100);
    --bg-dropdown-active: var(--utility-neutral-200);
    --border-dropdown-divider: var(--utility-neutral-100);
    --bg-dropdown-selected: var(--utility-neutral-100);
    --text-dropdown-selected: var(--text-primary);
    --text-dropdown-danger: var(--text-danger);
    --bg-dropdown-danger-hover: var(--utility-red-50);
    --bg-dropdown-glass: var(--alpha-white-80);
    --border-dropdown-glass: var(--alpha-neutral-900-10);
    --shadow-dropdown-glass: var(--shadow-lg);
    --blur-dropdown-glass: blur(20px);
    --opacity-dropdown-glass-grain: 0.1;
    --text-dropdown-glass: var(--utility-neutral-950);
    --text-dropdown-item-glass: var(--utility-neutral-950);
    --text-dropdown-icon-glass: var(--utility-neutral-700);
    --text-dropdown-end-glass: var(--utility-neutral-700);
    --bg-dropdown-glass-hover: var(--alpha-white-60);
    --bg-dropdown-glass-active: var(--alpha-white-50);
    --bg-dropdown-selected-glass: var(--alpha-white-60);
    --text-dropdown-selected-glass: var(--utility-neutral-950);
    --text-dropdown-danger-glass: var(--text-danger);
    --bg-dropdown-danger-hover-glass: var(--alpha-red-500-10, rgba(239,68,68,0.10));
    --bg-table: var(--alpha-white-100);
    --bg-table-surface: var(--bg-primary-subtle);
    --border-table-container: var(--border-primary);
    --radius-table: var(--radius-lg, 0.625rem);
    --shadow-table: var(--shadow-sm);
    --bg-table-header: var(--bg-primary);
    --bg-table-header-hover: var(--bg-primary-hover);
    --bg-table-header-active: var(--bg-secondary);
    --text-table-header-active: var(--text-primary);
    --shadow-table-header-active: var(--shadow-table-header-pressed);
    --bg-table-header-pressed: var(--bg-tertiary);
    --shadow-table-header-pressed: inset 0 1px 0 rgba(0,0,0,.06);
    --bg-table-header-sticky: var(--bg-table-header);
    --text-table-header: var(--text-secondary);
    --icon-table-header: var(--text-tertiary);
    --border-table-header: var(--border-primary);
    --text-table: var(--text-primary);
    --text-table-active: var(--text-primary);
    --text-table-footer: var(--text-secondary-alt);
    --text-table-disabled: var(--text-disabled);
    --bg-table-row-hover: var(--bg-primary-subtle);
    --bg-table-row-zebra: var(--bg-primary-subtle);
    --bg-table-row-selected: var(--bg-info-subtle);
    --bg-table-row-active: var(--bg-primary);
    --bg-table-row-focus: var(--bg-info-subtle);
    --ring-table-row-focus: 0 0 0 2px var(--border-info-subtle);
    --bg-table-row-disabled: var(--bg-primary-subtle);
    --bg-table-row-success: var(--bg-success-subtle);
    --bg-table-row-warning: var(--bg-warning-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-table-row-warning: color-mix(in oklch, var(--bg-warning-subtle) 55%, var(--bg-primary));
    }
    --bg-table-row-danger: var(--bg-danger-subtle);
    --text-table-row-success: var(--text-success-solid);
    --text-table-row-warning: var(--text-warning);
    --text-table-row-danger: var(--text-danger-solid);
    --bg-row-sweep-success: rgba(22, 163, 74, 0.10);
    --bg-row-sweep-info: rgba(37, 99, 235, 0.10);
    --bg-row-sweep-warning: rgba(217, 119, 6, 0.10);
    --bg-row-sweep-danger: rgba(220, 38, 38, 0.10);
    --duration-row-sweep: 800ms;
    --duration-row-sweep-fade: 600ms;
    --ease-row-sweep: cubic-bezier(0.25, 0.1, 0.25, 1);
    --bg-table-cell-hover: var(--bg-primary-subtle);
    --bg-table-cell-focus: var(--bg-info-subtle);
    --ring-table-cell-focus: 0 0 0 2px var(--border-info-subtle);
    --bg-table-cell-no-hover: var(--bg-table);
    --bg-table-footer: var(--bg-primary-subtle);
    --bg-table-footer-sticky: var(--bg-table-footer);
    --border-table: var(--border-primary-subtle);
    --border-table-grid: var(--border-primary);
    --border-table-grid-strong: var(--border-primary-alt);
    --border-table-sticky-divider: var(--border-primary-solid);
    --bg-table-sticky: var(--bg-table);
    --bg-table-sticky-hover: var(--bg-table-row-hover);
    --bg-table-sticky-selected: var(--bg-table-row-selected);
    --bg-table-sticky-active: var(--bg-table-row-active);
    --bg-table-sticky-focus: var(--bg-table-row-focus);
    --shadow-table-sticky-header: inset 0 -1px 0 var(--border-table-header);
    --shadow-table-sticky-footer: inset 0 1px 0 var(--border-table);
    --shadow-table-sticky-col: inset -1px 0 0 var(--border-table-sticky-divider);
    --shadow-table-sticky-col-right: inset 1px 0 0 var(--border-table-sticky-divider);
    --bg-table-col-hover: var(--bg-info-subtle);
    --bg-table-control: var(--alpha-0);
    --bg-table-control-focus: var(--bg-input-select);
    --border-table-control: var(--border-table);
    --bg-panel: var(--alpha-white-100);
    --bg-panel-raised: var(--alpha-white-100);
    --bg-panel-sunken: var(--alpha-neutral-50-50);
    --border-panel: var(--border-primary);
    --bg-card: var(--alpha-white-100);
    --bg-card-alt: var(--alpha-white-100);
    --bg-surface: var(--bg-card);
    --bg-body: var(--canvas-primary);
    --text-on-solid: var(--alpha-white-100);
    --party-dem: var(--text-info);
    --party-rep: var(--text-danger);
    --text-lean-dem: var(--utility-blue-700);
    --text-lean-rep: var(--utility-red-700);
    --text-lean-neutral: var(--text-tertiary);
    --party-ind: var(--text-success);
    --party-oth: var(--text-purple);
    --bg-card-hover: var(--bg-primary-subtle);
    --bg-card-pressed: var(--bg-primary-hover);
    --text-card: var(--text-primary);
    --border-card: var(--border-primary);
    --border-card-active: var(--border-secondary);
    --shadow-card: var(--shadow-sm);
    --shadow-card-active: var(--shadow-sm);
    --shadow-card-pressed: inset 0 1px 0 rgba(0,0,0,.06);
    --blur-card-backdrop: none;
    --opacity-card-grain: 0;
    --border-card-divider: var(--border-primary-subtle);
    --border-card-focus: var(--alpha-0);
    --ring-card-focus: 0 0 0 1px var(--alpha-0);
    --opacity-card-disabled: 0.65;
    --filter-card-disabled: none;
    --radius-card-sm: var(--radius-lg, 0.5rem);
    --radius-card-md: var(--radius-xl, 0.75rem);
    --radius-card-lg: var(--radius-2xl, 1rem);
    --bg-card-flat: var(--alpha-white-100);
    --border-card-flat: var(--border-primary);
    --opacity-card-flat-grain: 0;
    --bg-card-light: var(--utility-neutral-100);
    --border-card-light: var(--border-primary);
    --opacity-card-light-grain: 0;
    --bg-card-soft: var(--bg-primary-subtle);
    --border-card-soft: var(--alpha-0);
    --bg-card-ghost: var(--alpha-0);
    --border-card-ghost: var(--border-primary);
    --shadow-card-ghost: none;
    --border-card-strong: var(--border-primary-solid);
    --bg-card-mini: var(--bg-card);
    --border-card-mini: var(--border-card);
    --text-card-mini: var(--text-card);
    --opacity-card-mini-grain: 0;
    --bg-glass-card: var(--alpha-white-20);
    --border-glass-card: var(--alpha-white-20);
    --text-glass-card: var(--text-primary);
    --blur-glass-card: blur(20px);
    --shadow-glass-card: var(--shadow-md);
    --opacity-glass-card-grain: 0.15;
    --opacity-glass-grain-sm: 0.15;
    --opacity-glass-grain-md: 0.2;
    --opacity-glass-grain-lg: 0.25;
    --opacity-glass-grain-xl: 0.3;
    --blur-glass-card-sm: blur(10px);
    --blur-glass-card-md: blur(16px);
    --blur-glass-card-lg: blur(22px);
    --blur-glass-card-xl: blur(28px);
    --bg-list: var(--alpha-white-100);
    --border-list: var(--border-primary);
    --radius-list: var(--radius-md, 0.375rem);
    --text-list-header: var(--text-secondary);
    --border-list-header: var(--border-primary-subtle);
    --bg-list-header: var(--bg-primary-subtle);
    --bg-list-item: var(--bg-list);
    --bg-list-item-hover: var(--bg-primary-subtle);
    --bg-list-item-active: var(--bg-secondary-subtle);
    --bg-list-item-selected: var(--color-brand-50);
    --bg-list-item-focus: var(--color-brand-50);
    --text-list-item: var(--text-primary);
    --text-list-item-title: var(--text-primary);
    --text-list-item-subtitle: var(--text-tertiary);
    --text-list-item-leading: var(--text-tertiary);
    --text-list-item-trailing: var(--text-tertiary);
    --border-list-divider: var(--utility-neutral-100);
    --space-list-inset: 3rem;
    --size-list-indicator: 3px;
    --bg-list-indicator: var(--border-focus);
    --ring-list-item-focus: 0 0 0 2px var(--border-focus);
    --space-list-item-x: 1rem;
    --space-list-item-y: 0.5rem;
    --space-list-item-y-compact: 0.375rem;
    --space-list-item-y-relaxed: 0.75rem;
    --opacity-list-item-disabled: 0.6;
    --bg-list-item-disabled: var(--bg-primary-subtle);
    --text-list-item-disabled: var(--text-disabled);
    --bg-list-item-success: var(--bg-success-subtle);
    --bg-list-item-warning: var(--bg-warning-subtle);
    --bg-list-item-danger: var(--bg-danger-subtle);
    --bg-list-item-info: var(--bg-info-subtle);
    --bg-list-indicator-success: var(--utility-green-500);
    --bg-list-indicator-warning: var(--utility-amber-500);
    --bg-list-indicator-danger: var(--utility-red-500);
    --bg-list-indicator-info: var(--utility-blue-500);
    --bg-list-item-new-flash: var(--utility-amber-50);
    --bg-list-item-skeleton: var(--utility-neutral-100);
    --bg-list-item-skeleton-shimmer: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / 0.45) 50%, transparent 70%);
    --text-list-item-description: var(--utility-neutral-600);
    --text-list-item-meta: var(--utility-neutral-500);
    --text-list-item-kbd: var(--utility-neutral-700);
    --bg-list-item-kbd: var(--utility-neutral-100);
    --border-list-item-kbd: var(--utility-neutral-200);
    --bg-list-card: oklch(100% 0 0);
    --border-list-card: var(--utility-neutral-200);
    --shadow-list-card: 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-list-card-hover: 0 4px 12px oklch(0% 0 0 / 0.08);
    --shadow-list-card-active: 0 0 0 2px var(--border-focus);
    --bg-list-section-header: var(--utility-neutral-50);
    --text-list-section-header: var(--utility-neutral-700);
    --text-list-handle: var(--utility-neutral-400);
    --text-list-handle-hover: var(--utility-neutral-700);
    --space-list-item-y-xs: 0.25rem;
    --space-list-item-y-sm: 0.375rem;
    --space-list-item-y-md: 0.5rem;
    --space-list-item-y-lg: 0.75rem;
    --space-list-item-y-xl: 1rem;
    --bg-select-option: var(--alpha-white-100);
    --bg-select-option-hover: var(--utility-neutral-50);
    --bg-select-option-selected: var(--color-brand-600);
    --bg-select-option-selected-hover: var(--color-brand-700);
    --border-select-option: var(--utility-neutral-200);
    --border-select-option-hover: var(--utility-neutral-300);
    --border-select-option-selected: var(--color-brand-600);
    --text-select-option: var(--text-primary);
    --text-select-option-subtitle: var(--text-tertiary);
    --text-select-option-trailing: var(--text-secondary);
    --text-select-option-selected: var(--alpha-white-100);
    --text-select-option-selected-subtitle: var(--alpha-white-70);
    --text-select-option-selected-trailing: var(--alpha-white-80);
    --text-select-option-disabled: var(--text-disabled);
    --shadow-select-option: none;
    --shadow-select-option-hover: var(--shadow-xs);
    --text-select-option-header: var(--text-tertiary);
    --border-select-option-divider: var(--border-secondary);
    --border-select-option-accent: var(--color-brand-600);
    --bg-select-option-accent: var(--color-brand-600);
    --border-select-option-success: var(--utility-green-500);
    --bg-select-option-success: var(--utility-green-500);
    --border-select-option-warning: var(--utility-amber-500);
    --bg-select-option-warning: var(--utility-amber-500);
    --border-select-option-danger: var(--utility-red-500);
    --bg-select-option-danger: var(--utility-red-500);
    --bg-select-option-tinted: var(--color-brand-50);
    --bg-select-option-tinted-accent: var(--color-brand-50);
    --bg-select-option-tinted-success: var(--utility-green-50);
    --bg-select-option-tinted-warning: var(--utility-amber-50);
    --bg-select-option-tinted-danger: var(--utility-red-50);
    --bg-tree-surface: var(--alpha-0);
    --text-tree: var(--text-primary);
    --bg-tree-row: var(--alpha-0);
    --bg-tree-row-hover: var(--bg-primary-subtle);
    --bg-tree-row-active: var(--utility-neutral-100);
    --text-tree-row-active: var(--text-primary);
    --bg-tree-row-selected: var(--utility-neutral-100);
    --text-tree-row-selected: var(--text-primary);
    --bg-tree-row-disabled: var(--bg-primary-subtle);
    --text-tree-row-disabled: var(--text-disabled);
    --opacity-tree-disabled: 0.6;
    --bg-tree-line: var(--border-primary);
    --opacity-tree-line: 0.9;
    --bg-tree-toggle: var(--bg-primary);
    --border-tree-toggle: var(--border-primary);
    --text-tree-toggle: var(--text-tertiary);
    --text-tree-icon: var(--text-tertiary);
    --text-tree-label: var(--text-primary);
    --text-tree-meta: var(--text-tertiary);
    --text-tree-actions: var(--text-tertiary);
    --ring-tree-row: var(--alpha-0);
    --radius-tree-row: var(--radius-md, 0.5rem);
    --text-badge: var(--text-primary);
    --bg-badge: var(--bg-primary-subtle);
    --bg-badge-hover: var(--bg-primary-hover);
    --bg-badge-pressed: var(--bg-primary);
    --bg-badge-alt: var(--alpha-white-100);
    --shadow-badge-pressed: inset 0 1px 0 rgba(0,0,0,.06);
    --text-badge-close: var(--text-tertiary);
    --text-badge-close-hover: var(--text-primary);
    --bg-badge-close-hover: var(--bg-badge-hover);
    --bg-badge-close-pressed: var(--bg-badge);
    --text-badge-solid: var(--alpha-white-100);
    --bg-badge-solid: var(--bg-primary-solid);
    --bg-badge-solid-hover: var(--bg-primary-solid);
    --bg-badge-solid-pressed: var(--bg-primary-solid);
    --bg-badge-outline: var(--alpha-0);
    --border-badge-outline: var(--border-primary);
    --text-badge-outline: var(--text-primary);
    --bg-badge-outline-hover: var(--bg-primary-subtle);
    --bg-badge-outline-pressed: var(--bg-primary-hover);
    --text-badge-ghost: var(--text-secondary);
    --bg-badge-ghost-hover: var(--bg-primary-subtle);
    --bg-badge-ghost-pressed: var(--bg-primary-hover);
    --text-badge-danger: var(--utility-red-700);
    --bg-badge-danger: var(--bg-danger-subtle);
    --bg-badge-danger-hover: var(--bg-danger-subtle);
    --bg-badge-danger-pressed: var(--bg-danger-subtle);
    --text-badge-warning: var(--utility-amber-700);
    --bg-badge-warning: var(--bg-warning-subtle);
    --bg-badge-warning-hover: var(--bg-warning-subtle);
    --bg-badge-warning-pressed: var(--bg-warning-subtle);
    --text-badge-success: var(--utility-green-800);
    --bg-badge-success: var(--bg-success-subtle);
    --bg-badge-success-hover: var(--bg-success-subtle);
    --bg-badge-success-pressed: var(--bg-success-subtle);
    --text-badge-info: var(--utility-blue-700);
    --bg-badge-info: var(--bg-info-subtle);
    --bg-badge-info-hover: var(--bg-info-subtle);
    --bg-badge-info-pressed: var(--bg-info-subtle);
    --text-badge-indigo: var(--utility-indigo-700);
    --bg-badge-indigo: var(--bg-indigo-subtle);
    --bg-badge-indigo-hover: var(--bg-indigo-subtle);
    --bg-badge-indigo-pressed: var(--bg-indigo-subtle);
    --text-badge-purple: var(--utility-purple-700);
    --bg-badge-purple: var(--bg-purple-subtle);
    --bg-badge-purple-hover: var(--bg-purple-subtle);
    --bg-badge-purple-pressed: var(--bg-purple-subtle);
    --text-badge-pink: var(--utility-pink-700);
    --bg-badge-pink: var(--bg-pink-subtle);
    --bg-badge-pink-hover: var(--bg-pink-subtle);
    --bg-badge-pink-pressed: var(--bg-pink-subtle);
    --text-badge-teal: var(--utility-teal-700);
    --bg-badge-teal: var(--bg-teal-subtle);
    --bg-badge-teal-hover: var(--bg-teal-subtle);
    --bg-badge-teal-pressed: var(--bg-teal-subtle);
    --text-badge-mint: var(--utility-mint-700);
    --bg-badge-mint: var(--bg-mint-subtle, var(--bg-teal-subtle));
    --bg-badge-mint-hover: var(--bg-mint-subtle, var(--bg-teal-subtle));
    --bg-badge-mint-pressed: var(--bg-mint-subtle, var(--bg-teal-subtle));
    --text-badge-notification: var(--alpha-white-100);
    --bg-badge-notification: var(--bg-danger);
    --text-badge-status: var(--text-primary);
    --text-badge-dot: var(--text-primary);
    --bg-badge-dot: var(--bg-primary);
    --dot-light: var(--bg-secondary-alt);
    --dot-danger: var(--bg-danger);
    --dot-warning: var(--bg-warning);
    --dot-success: var(--bg-success);
    --dot-info: var(--bg-info);
    --dot-indigo: var(--bg-indigo);
    --dot-purple: var(--bg-purple);
    --dot-pink: var(--bg-pink);
    --dot-teal: var(--bg-teal);
    --dot-mint: var(--bg-mint, var(--bg-teal));
    --text-avatar: var(--text-primary);
    --bg-avatar: var(--bg-secondary-subtle);
    --ring-avatar: var(--border-primary);
    --bg-avatar-soft: var(--bg-secondary-subtle);
    --text-avatar-soft: var(--text-primary);
    --bg-avatar-solid: var(--bg-primary-solid);
    --text-avatar-solid: var(--alpha-white-100);
    --text-avatar-outline: var(--text-primary);
    --border-avatar-outline: var(--border-primary);
    --text-avatar-ghost: var(--text-primary);
    --bg-avatar-badge-ring: var(--bg-avatar);
    --border-avatar-badge: var(--border-primary);
    --bg-avatar-online: var(--bg-success-alt);
    --bg-avatar-away: var(--bg-warning-alt);
    --bg-avatar-busy: var(--bg-danger-alt);
    --bg-avatar-ooo: var(--utility-fuchsia-400);
    --bg-avatar-offline: var(--utility-neutral-400);
    --ring-avatar-stack: var(--bg-panel);
    --bg-avatar-more: var(--bg-primary-subtle);
    --text-avatar-more: var(--text-secondary);
    --ring-avatar-more: var(--border-primary);
    --bg-avatar-info: var(--bg-info-subtle);
    --text-avatar-info: var(--text-info-solid);
    --ring-avatar-info: var(--border-info-subtle);
    --bg-avatar-success: var(--bg-success-subtle);
    --text-avatar-success: var(--text-success-solid);
    --ring-avatar-success: var(--border-success-subtle);
    --bg-avatar-warning: var(--bg-warning-subtle);
    --text-avatar-warning: var(--text-warning-solid);
    --ring-avatar-warning: var(--border-warning-subtle);
    --bg-avatar-danger: var(--bg-danger-subtle);
    --text-avatar-danger: var(--text-danger-solid);
    --ring-avatar-danger: var(--border-danger-subtle);
    --bg-avatar-indigo: var(--bg-indigo-subtle);
    --text-avatar-indigo: var(--text-indigo-solid);
    --bg-avatar-purple: var(--bg-purple-subtle);
    --text-avatar-purple: var(--text-purple-solid);
    --bg-avatar-pink: var(--bg-pink-subtle);
    --text-avatar-pink: var(--text-pink-solid);
    --bg-avatar-teal: var(--bg-teal-subtle);
    --text-avatar-teal: var(--text-teal-solid);
    --bg-avatar-mint: var(--bg-mint-subtle);
    --text-avatar-mint: var(--text-mint-solid);
    --bg-persona: var(--alpha-white-100);
    --border-persona: var(--border-primary);
    --text-persona: var(--text-primary);
    --text-persona-title: var(--text-primary);
    --text-persona-subtitle: var(--text-tertiary);
    --text-persona-meta: var(--text-quaternary);
    --bg-persona-tag: var(--bg-primary-subtle);
    --text-persona-tag: var(--text-secondary);
    --border-persona-tag: var(--border-primary-subtle);
    --bg-persona-soft: var(--bg-primary-subtle);
    --border-persona-soft: var(--alpha-0);
    --bg-persona-ghost: var(--alpha-0);
    --border-persona-ghost: var(--border-primary-subtle);
    --border-persona-strong: var(--border-primary-solid);
    --shadow-persona: var(--shadow-sm);
    --bg-persona-hover: var(--bg-primary-subtle);
    --border-persona-hover: var(--border-primary);
    --bg-persona-pressed: var(--bg-primary-hover);
    --border-persona-pressed: var(--border-primary-alt);
    --shadow-persona-pressed: inset 0 1px 0 rgba(0,0,0,.06);
    --bg-persona-selected: var(--bg-info-subtle);
    --border-persona-selected: var(--border-info-subtle);
    --ring-persona-focus: 0 0 0 2px var(--border-info-subtle);
    --opacity-persona-disabled: 0.65;
    --filter-persona-disabled: none;
    --bg-persona-status: var(--bg-primary-subtle);
    --border-persona-status: var(--border-primary-subtle);
    --text-persona-status: var(--text-secondary);
    --bg-persona-status-dot: var(--bg-secondary-solid);
    --bg-persona-dot-success: var(--bg-success-alt);
    --bg-persona-dot-warning: var(--bg-warning-alt);
    --bg-persona-dot-danger: var(--bg-danger-alt);
    --bg-persona-dot-info: var(--bg-info-alt);
    --border-divider: var(--utility-neutral-100);
    --border-default: var(--border-divider);
    --border-divider-subtle: var(--utility-neutral-50);
    --border-divider-strong: var(--utility-neutral-100);
    --border-divider-ghost: var(--alpha-neutral-100-80);
    --text-divider: var(--text-tertiary);
    --bg-divider: var(--bg-primary);
    --height-progress-track: 4px;
    --bg-progress: var(--utility-neutral-200);
    --bg-progress-bar: var(--utility-blue-500);
    --text-progress: var(--alpha-white-100);
    --bg-progress-bar-success: var(--bg-success);
    --bg-progress-bar-warning: var(--bg-warning);
    --bg-progress-bar-danger: var(--bg-danger);
    --bg-progress-bar-info: var(--bg-info);
    --bg-progress-bar-neutral: var(--utility-neutral-500);
    --bg-progress-radial-inner: var(--alpha-white-100);
    --text-progress-radial: var(--text-primary);
    --bg-progress-radial-track: var(--bg-progress);
    --size-progress-cap: 10px;
    --shadow-progress-cap: 0 0 0 2px var(--bg-progress-radial-inner);
    --shadow-progress-cap-glow: 0 0 8px var(--bg-progress-bar), 0 0 0 2px var(--bg-progress-radial-inner);
    --duration-progress-indeterminate: 1.2s;
    --easing-progress-indeterminate: ease-in-out;
    --gap-progress-stack: 2px;
    --size-progress-radial-xs: 28px;
    --size-progress-radial-sm: 36px;
    --size-progress-radial-md: 48px;
    --size-progress-radial-lg: 64px;
    --size-progress-radial-xl: 84px;
    --thickness-progress-radial-xs: 4px;
    --thickness-progress-radial-sm: 5px;
    --thickness-progress-radial-md: 6px;
    --thickness-progress-radial-lg: 8px;
    --thickness-progress-radial-xl: 10px;
    --text-progress-success: var(--alpha-white-100);
    --text-progress-warning: var(--text-primary);
    --text-progress-danger: var(--alpha-white-100);
    --text-progress-info: var(--alpha-white-100);
    --text-progress-neutral: var(--alpha-white-100);
    --size-spinner-sm: 16px;
    --size-spinner-md: 20px;
    --size-spinner-lg: 24px;
    --size-spinner-xl: 32px;
    --size-spinner: var(--size-spinner-lg);
    --stroke-spinner-sm: 2;
    --stroke-spinner-md: 2.5;
    --stroke-spinner-lg: 3;
    --stroke-spinner-xl: 4;
    --stroke-spinner: 2px;
    --text-spinner: var(--utility-blue-500);
    --opacity-spinner-track: 0.14;
    --bg-spinner-overlay: var(--alpha-white-80);
    --blur-spinner-overlay: 4px;
    --duration-spinner-rotate: 1.2s;
    --duration-spinner-dash: 1.5s;
    --ease-spinner-dash: cubic-bezier(.4, 0, .2, 1);
    --duration-spinner-overlay: 180ms;
    --ease-spinner-overlay: cubic-bezier(.2, 0, .2, 1);
    --duration-spinner-pop: 160ms;
    --ease-spinner-pop: cubic-bezier(.2, 0, .2, 1);
    --text-link: var(--color-brand-700);
    --text-link-hover: var(--color-brand-800);
    --text-link-secondary: var(--utility-neutral-700);
    --text-link-secondary-hover: var(--alpha-black-100);
    --text-link-muted: var(--utility-neutral-500);
    --text-link-muted-hover: var(--utility-neutral-700);
    --text-link-danger: var(--utility-red-600);
    --text-link-danger-hover: var(--utility-red-700);
    --border-link-focus: var(--border-focus);
    --text-form-section-title: var(--text-secondary);
    --text-form-section-description: var(--text-tertiary);
    --border-form-section: var(--border-primary-subtle);
    --bg-form-section-card: var(--bg-surface);
    --shadow-form-section-card: var(--shadow-xs);
    --bg-form-section-filled: var(--bg-secondary);
    --bg-form-section-icon: var(--bg-secondary);
    --text-form-section-icon: var(--text-secondary);
    --bg-form-section-badge: var(--text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-form-section-badge: color-mix(in oklch, var(--text-secondary) 12%, transparent);
    }
    --text-form-section-badge: var(--text-secondary);
    --duration-tag: 140ms;
    --ease-tag: cubic-bezier(.2, 0, .2, 1);
    --radius-tag: 999px;
    --padding-tag-y: 4px;
    --padding-tag-x: 10px;
    --size-tag-icon: 14px;
    --text-tag-icon: 12px;
    --opacity-tag-icon: 0.9;
    --size-tag-dismiss: 18px;
    --opacity-tag-disabled: 0.55;
    --text-tag-sm: 11px;
    --text-tag-md: 12px;
    --text-tag-lg: 13px;
    --padding-tag-sm-y: 3px;
    --padding-tag-sm-x: 8px;
    --radius-tag-sm: 999px;
    --padding-tag-md-y: 4px;
    --padding-tag-md-x: 10px;
    --radius-tag-md: 999px;
    --padding-tag-lg-y: 6px;
    --padding-tag-lg-x: 12px;
    --radius-tag-lg: 999px;
    --bg-tag-neutral: var(--alpha-neutral-950-6);
    --bg-tag-neutral-hover: var(--alpha-neutral-950-10);
    --text-tag-neutral: var(--text-muted);
    --text-tag-neutral-hover: var(--text-primary);
    --border-tag-neutral: var(--alpha-neutral-950-10);
    --border-tag-neutral-hover: var(--alpha-neutral-950-16);
    --border-tag-neutral-focus: var(--utility-blue-300);
    --bg-tag-neutral-dismiss-hover: var(--alpha-neutral-950-10);
    --bg-tag-primary: var(--alpha-blue-500-12);
    --bg-tag-primary-hover: var(--alpha-blue-500-16);
    --text-tag-primary: var(--utility-blue-600);
    --text-tag-primary-hover: var(--utility-blue-700);
    --border-tag-primary: var(--alpha-blue-500-18);
    --border-tag-primary-hover: var(--alpha-blue-500-24);
    --border-tag-primary-focus: var(--utility-blue-300);
    --bg-tag-primary-dismiss-hover: var(--alpha-blue-500-12);
    --bg-tag-success: var(--alpha-green-500-12);
    --bg-tag-success-hover: var(--alpha-green-500-16);
    --text-tag-success: var(--utility-green-600);
    --text-tag-success-hover: var(--utility-green-700);
    --border-tag-success: var(--alpha-green-500-18);
    --border-tag-success-hover: var(--alpha-green-500-24);
    --border-tag-success-focus: var(--utility-green-300);
    --bg-tag-success-dismiss-hover: var(--alpha-green-500-12);
    --bg-tag-warning: var(--alpha-amber-500-14);
    --bg-tag-warning-hover: var(--alpha-amber-500-18);
    --text-tag-warning: var(--utility-amber-700);
    --text-tag-warning-hover: var(--utility-amber-800);
    --border-tag-warning: var(--alpha-amber-500-22);
    --border-tag-warning-hover: var(--alpha-amber-500-28);
    --border-tag-warning-focus: var(--utility-amber-300);
    --bg-tag-warning-dismiss-hover: var(--alpha-amber-500-14);
    --bg-tag-danger: var(--alpha-red-500-12);
    --bg-tag-danger-hover: var(--alpha-red-500-16);
    --text-tag-danger: var(--utility-red-600);
    --text-tag-danger-hover: var(--utility-red-700);
    --border-tag-danger: var(--alpha-red-500-18);
    --border-tag-danger-hover: var(--alpha-red-500-24);
    --border-tag-danger-focus: var(--utility-red-300);
    --bg-tag-danger-dismiss-hover: var(--alpha-red-500-12);
    --bg-tag-soft: var(--alpha-neutral-950-6);
    --border-tag-soft: var(--alpha-neutral-950-10);
    --border-tag-outline: var(--alpha-neutral-950-16);
    --bg-tag-selected: var(--alpha-blue-500-16);
    --border-tag-selected: var(--alpha-blue-500-24);
    --text-tag-selected: var(--utility-blue-700);
    --text-tag-dismiss: var(--text-muted);
    --text-tag-dismiss-hover: var(--text-primary);
    --bg-tag-dismiss-hover: var(--alpha-neutral-950-10);
    --text-filter: var(--text-primary);
    --text-filter-hover: var(--text-primary-hover);
    --text-filter-disabled: var(--text-disabled);
    --bg-filter: var(--alpha-white-100);
    --bg-filter-hover: var(--utility-neutral-100);
    --bg-filter-active: var(--utility-neutral-100);
    --bg-filter-selected: var(--bg-info-subtle);
    --bg-filter-pressed: var(--utility-neutral-200);
    --opacity-filter-disabled: 0.65;
    --bg-filter-section: var(--bg-filter);
    --bg-filter-section-open: var(--bg-filter-hover);
    --bg-filter-section-pressed: var(--bg-filter-pressed);
    --text-filter-chevron: var(--text-tertiary);
    --bg-filter-collapse: var(--bg-filter);
    --bg-filter-collapse-inner: var(--alpha-0);
    --border-filter: var(--border-primary);
    --border-filter-collapse: var(--border-filter);
    --border-filter-focus: var(--border-info-subtle);
    --ring-filter-focus: 0 0 0 2px var(--border-info-subtle);
    --bg-filter-nested: var(--alpha-0);
    --bg-filter-nested-hover: var(--bg-filter-hover);
    --text-filter-menu: var(--text-secondary);
    --bg-filter-menu: var(--alpha-0);
    --text-filter-label: var(--text-tertiary);
    --bg-filter-success: var(--bg-success-subtle);
    --bg-filter-warning: var(--bg-warning-subtle);
    --bg-filter-danger: var(--bg-danger-subtle);
    --bg-filter-info: var(--bg-info-subtle);
    --space-filter-item-x: 1rem;
    --space-filter-item-y: 0.5rem;
    --space-filter-item-y-compact: 0.375rem;
    --space-filter-item-y-relaxed: 0.75rem;
    --text-photo-viewer: var(--text-primary);
    --bg-photo-viewer-main: var(--alpha-white-100);
    --border-photo-viewer-main: var(--border-primary);
    --shadow-photo-viewer-main: var(--shadow-sm);
    --bg-photo-viewer-image: var(--utility-neutral-100);
    --bg-photo-viewer-bar: var(--alpha-0);
    --border-photo-viewer-bar: var(--border-primary-subtle);
    --text-photo-viewer-bar: var(--text-secondary);
    --text-photo-viewer-title: var(--text-primary);
    --text-photo-viewer-meta: var(--text-tertiary);
    --bg-photo-viewer-action: var(--alpha-0);
    --bg-photo-viewer-action-hover: var(--bg-primary-subtle);
    --bg-photo-viewer-action-active: var(--bg-primary-hover);
    --border-photo-viewer-action: var(--border-primary-subtle);
    --border-photo-viewer-action-hover: var(--border-primary);
    --text-photo-viewer-action: var(--text-secondary);
    --text-photo-viewer-action-hover: var(--text-primary);
    --bg-photo-viewer-content: var(--alpha-0);
    --border-photo-viewer-content: var(--border-primary-subtle);
    --text-photo-viewer-content: var(--text-secondary);
    --text-photo-viewer-content-meta: var(--text-tertiary);
    --text-photo-viewer-content-body: var(--text-primary);
    --bg-photo-viewer-strip: var(--alpha-0);
    --border-photo-viewer-strip: var(--border-primary-subtle);
    --bg-photo-viewer-thumb: var(--alpha-0);
    --bg-photo-viewer-thumb-hover: var(--bg-primary-subtle);
    --bg-photo-viewer-thumb-active: var(--bg-primary-hover);
    --border-photo-viewer-thumb: var(--border-primary-subtle);
    --border-photo-viewer-thumb-hover: var(--border-primary);
    --border-photo-viewer-thumb-active: var(--border-primary);
    --border-photo-viewer-thumb-selected: var(--border-info);
    --ring-photo-viewer-thumb-selected: inset 0 0 0 2px oklch(100% 0 0), inset 0 0 0 3.5px oklch(0% 0 0);
    --shadow-photo-viewer-thumb: none;
    --ring-photo-viewer-thumb-focus: 0 0 0 2px var(--border-info-subtle);
    --opacity-photo-viewer-thumb: 0.92;
    --opacity-photo-viewer-thumb-disabled: 0.6;
    --filter-photo-viewer-thumb-disabled: none;
    --bg-photo-viewer-nav: oklch(0% 0 0 / 0.45);
    --bg-photo-viewer-nav-hover: oklch(0% 0 0 / 0.62);
    --bg-photo-viewer-nav-active: oklch(0% 0 0 / 0.78);
    --text-photo-viewer-nav: oklch(100% 0 0);
    --border-photo-viewer-nav: oklch(100% 0 0 / 0.12);
    --bg-photo-viewer-counter: oklch(0% 0 0 / 0.5);
    --text-photo-viewer-counter: oklch(100% 0 0 / 0.85);
    --bg-photo-viewer-caption-overlay: linear-gradient(180deg, transparent 0%, oklch(0% 0 0 / 0.7) 100%);
    --text-photo-viewer-caption-overlay: oklch(100% 0 0);
    --bg-photo-viewer-toolbar: oklch(0% 0 0 / 0.55);
    --text-photo-viewer-toolbar: oklch(100% 0 0);
    --border-photo-viewer-toolbar: oklch(100% 0 0 / 0.10);
    --bg-photo-viewer-zoom-btn: oklch(100% 0 0 / 0.10);
    --bg-photo-viewer-zoom-btn-hover: oklch(100% 0 0 / 0.20);
    --bg-photo-viewer-zoom-btn-active: oklch(100% 0 0 / 0.30);
    --text-photo-viewer-zoom-btn: oklch(100% 0 0);
    --text-photo-viewer-zoom-level: oklch(100% 0 0 / 0.85);
    --bg-photo-viewer-status: oklch(0% 0 0 / 0.55);
    --text-photo-viewer-status: oklch(100% 0 0);
    --bg-photo-viewer-info: var(--bg-card, oklch(100% 0 0));
    --border-photo-viewer-info: var(--border-primary-subtle);
    --text-photo-viewer-info: var(--text-primary);
    --text-photo-viewer-info-muted: var(--text-tertiary);
    --bg-photo-viewer-info-header: var(--utility-neutral-50);
    --bg-photo-viewer-fullscreen: oklch(0% 0 0 / 0.94);
    --backdrop-photo-viewer-fullscreen: blur(8px);
    --bg-photo-viewer-fullscreen-toolbar: oklch(100% 0 0 / 0.06);
    --line-photo-viewer-compare: oklch(100% 0 0);
    --bg-photo-viewer-compare-handle: oklch(100% 0 0);
    --shadow-photo-viewer-compare-handle: 0 2px 8px oklch(0% 0 0 / 0.35);
    --bg-photo-viewer-annotation: var(--utility-amber-500);
    --bg-photo-viewer-annotation-active: var(--utility-blue-500);
    --text-photo-viewer-annotation: oklch(100% 0 0);
    --ring-photo-viewer-annotation: 0 0 0 3px oklch(100% 0 0 / 0.4);
    --bg-photo-viewer-video-controls: oklch(0% 0 0 / 0.55);
    --bg-photo-viewer-video-progress: oklch(100% 0 0 / 0.18);
    --bg-photo-viewer-video-progress-fill: var(--utility-blue-400);
    --ring-photo-viewer-focus: 0 0 0 2px var(--border-info);
    --stroke-spark-width: 2;
    --stroke-spark: var(--utility-blue-500);
    --fill-spark-area: var(--alpha-0);
    --border-spark-grid: var(--utility-neutral-700);
    --marker-spark: var(--stroke-spark);
    --size-spark-marker: 0;
    --size-spark-marker-hover: 3;
    --border-spark-setpoint: var(--utility-neutral-200);
    --border-spark-deadband: var(--utility-neutral-100);
    --border-spark-warn: var(--utility-yellow-500);
    --bg-spark-tooltip: var(--alpha-white-100);
    --text-spark-tooltip: var(--utility-neutral-900);
    --border-spark-tooltip: var(--utility-neutral-300);
    --apex-text: var(--utility-neutral-900);
    --apex-text-muted: var(--utility-neutral-900);
    --apex-border: var(--utility-neutral-200);
    --apex-border-accent: var(--utility-neutral-300);
    --apex-bg-surface: transparent;
    --apex-bg-subtle: var(--utility-neutral-100);
    --apex-bg-popover: var(--alpha-white-100);
    --apex-legend-text: var(--utility-neutral-900);
    --apex-tooltip-text: var(--utility-neutral-900);
    --apex-tooltip-bg: var(--alpha-white-100);
    --apex-tooltip-border: var(--utility-neutral-200);
    --apex-tooltip-shadow: var(--shadow-xl);
    --apex-tooltip-marker-border: transparent;
    --apex-crosshair-opacity: 0.35;
    --apex-selection-fill-opacity: 0.08;
    --apex-selection-stroke-opacity: 0.35;
    --apex-datalabel-text: var(--utility-neutral-900);
    --apex-nodata-text: var(--utility-neutral-900);
    --apex-loading-text: var(--utility-neutral-900);
    --apex-toolbar-ink: var(--utility-neutral-900);
    --apex-pie-label-text: var(--utility-neutral-900);
    --apex-radial-value-text: var(--utility-neutral-900);
    --apex-radial-track: var(--utility-neutral-200);
    --apex-heatmap-stroke: var(--utility-neutral-100);
    --apex-annotation-text: var(--utility-neutral-900);
    --apex-annotation-bg: var(--alpha-white-100);
    --apex-annotation-border: var(--utility-neutral-200);
    --apex-series-1: var(--utility-blue-400);
    --apex-series-2: var(--utility-green-400);
    --apex-series-3: var(--utility-yellow-400);
    --apex-series-4: var(--utility-teal-400);
    --apex-series-5: var(--utility-indigo-400);
    --apex-series-6: var(--utility-pink-400);
    --apex-series-7: var(--utility-amber-400);
    --apex-series-8: var(--utility-red-400);
    --apex-series-9: var(--utility-purple-400);
    --apex-series-10: var(--utility-neutral-400);
    --apex-series-11: var(--utility-orange-400);
    --apex-series-12: var(--utility-lime-400);
    --apex-series-line-1: var(--utility-red-400);
    --apex-series-line-2: var(--utility-yellow-400);
    --apex-series-line-3: var(--utility-yellow-400);
    --apex-series-line-4: var(--utility-teal-400);
    --apex-series-line-5: var(--utility-indigo-400);
    --apex-series-line-6: var(--utility-pink-400);
    --apex-series-line-7: var(--utility-amber-400);
    --apex-series-line-8: var(--utility-red-400);
    --apex-series-line-9: var(--utility-purple-400);
    --apex-series-line-10: var(--utility-neutral-400);
    --apex-series-line-11: var(--utility-orange-400);
    --apex-series-line-12: var(--utility-lime-400);
    --apex-series-pie-1: var(--utility-blue-400);
    --apex-series-pie-2: var(--utility-green-400);
    --apex-series-pie-3: var(--utility-yellow-400);
    --apex-series-pie-4: var(--utility-teal-400);
    --apex-series-pie-5: var(--utility-indigo-400);
    --apex-series-pie-6: var(--utility-pink-400);
    --apex-series-pie-7: var(--utility-amber-400);
    --apex-series-pie-8: var(--utility-red-400);
    --apex-series-pie-9: var(--utility-purple-400);
    --apex-series-pie-10: var(--utility-neutral-400);
    --apex-series-pie-11: var(--utility-orange-400);
    --apex-series-pie-12: var(--utility-lime-400);
    --apex-series-bar-1: var(--utility-blue-400);
    --apex-series-bar-2: var(--utility-green-400);
    --apex-series-bar-3: var(--utility-yellow-400);
    --apex-series-bar-4: var(--utility-teal-400);
    --apex-series-bar-5: var(--utility-indigo-400);
    --apex-series-bar-6: var(--utility-pink-400);
    --apex-series-bar-7: var(--utility-amber-400);
    --apex-series-bar-8: var(--utility-red-400);
    --apex-series-bar-9: var(--utility-purple-400);
    --apex-series-bar-10: var(--utility-neutral-400);
    --apex-series-bar-11: var(--utility-orange-400);
    --apex-series-bar-12: var(--utility-lime-400);
    --apex-series-radial-1: var(--utility-blue-400);
    --apex-series-radial-2: var(--utility-green-400);
    --apex-series-radial-3: var(--utility-yellow-400);
    --apex-series-radial-4: var(--utility-teal-400);
    --apex-series-radial-5: var(--utility-indigo-400);
    --apex-series-radial-6: var(--utility-pink-400);
    --apex-series-radial-7: var(--utility-amber-400);
    --apex-series-radial-8: var(--utility-red-400);
    --apex-series-radial-9: var(--utility-purple-400);
    --apex-series-radial-10: var(--utility-neutral-400);
    --apex-series-radial-11: var(--utility-orange-400);
    --apex-series-radial-12: var(--utility-lime-400);
    --apex-series-heatmap-1: var(--utility-blue-400);
    --apex-series-heatmap-2: var(--utility-green-400);
    --apex-series-heatmap-3: var(--utility-yellow-400);
    --apex-series-heatmap-4: var(--utility-teal-400);
    --apex-series-heatmap-5: var(--utility-indigo-400);
    --apex-series-heatmap-6: var(--utility-pink-400);
    --apex-series-heatmap-7: var(--utility-amber-400);
    --apex-series-heatmap-8: var(--utility-red-400);
    --apex-series-heatmap-9: var(--utility-purple-400);
    --apex-series-heatmap-10: var(--utility-neutral-400);
    --apex-series-heatmap-11: var(--utility-orange-400);
    --apex-series-heatmap-12: var(--utility-lime-400);
    --apex-fill-opacity-from: 0.35;
    --apex-fill-opacity-to: 0.05;
    --apex-marker-size: 2;
    --apex-marker-stroke: 1;
    --apex-marker-hover-offset: 2;
    --apex-line-stroke: 1;
    --apex-donut-value-size: 12;
    --apex-donut-name-size: 11;
    --apex-donut-total-size: 12;
    --apex-bar-column-width: 40%;
    --apex-bar-radius: 0px;
    --apex-bar-ending-shape: flat;
    --apex-bar-datalabels: off;
    --apex-candle-up: var(--utility-green-500);
    --apex-candle-down: var(--utility-red-500);
    --apex-candle-up-bg: var(--utility-green-50);
    --apex-candle-down-bg: var(--utility-red-50);
    --apex-boxplot-fill: var(--utility-blue-100);
    --apex-boxplot-stroke: var(--utility-blue-600);
    --apex-boxplot-whisker: var(--utility-neutral-400);
    --apex-boxplot-median: var(--utility-blue-700);
    --apex-brush-fill: oklch(60% 0.13 250 / 0.10);
    --apex-brush-stroke: var(--utility-blue-500);
    --apex-annotation-accent: var(--utility-red-500);
    --apex-annotation-success: var(--utility-green-500);
    --bg-chart-card: oklch(100% 0 0);
    --bg-chart-card-header: transparent;
    --border-chart-card: var(--utility-neutral-200);
    --shadow-chart-card: 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-chart-card-hover: 0 4px 12px oklch(0% 0 0 / 0.08);
    --text-chart-card-title: var(--utility-neutral-900);
    --text-chart-card-sub: var(--utility-neutral-500);
    --text-chart-card-meta: var(--utility-neutral-500);
    --bg-chart-card-glass: oklch(100% 0 0 / 0.7);
    --border-chart-card-glass: oklch(100% 0 0 / 0.3);
    --bg-chart-kpi: var(--bg-chart-card);
    --border-chart-kpi: var(--border-chart-card);
    --text-chart-kpi-value: var(--utility-neutral-900);
    --text-chart-kpi-label: var(--utility-neutral-500);
    --text-chart-kpi-delta-up: var(--utility-green-600);
    --text-chart-kpi-delta-dn: var(--utility-red-600);
    --bg-chart-kpi-delta-up: var(--utility-green-50);
    --bg-chart-kpi-delta-dn: var(--utility-red-50);
    --bg-chart-skeleton: var(--utility-neutral-100);
    --bg-chart-skeleton-sweep: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / 0.5) 50%, transparent 70%);
    --bg-chart-no-data: var(--utility-neutral-50);
    --text-chart-no-data: var(--utility-neutral-500);
    --text-autocomplete: var(--utility-neutral-950);
    --bg-autocomplete: var(--alpha-white-100);
    --border-autocomplete: var(--border-primary);
    --text-autocomplete-item: var(--utility-neutral-950);
    --text-autocomplete-active: var(--alpha-white-100);
    --bg-autocomplete-active: var(--utility-blue-500);
    --bg-activity-log-header: var(--alpha-white-100);
    --bg-activity-log-panel: var(--alpha-white-100);
    --bg-activity-log-footer: var(--alpha-white-100);
    --text-post-owner: var(--utility-neutral-950);
    --text-post-public: var(--utility-neutral-950);
    --text-post-system: var(--utility-neutral-600);
    --text-post-date: var(--utility-neutral-700);
    --bg-post-owner: var(--utility-indigo-100);
    --bg-post-public: var(--utility-neutral-100);
    --bg-post-actions: var(--alpha-white-100);
    --border-post-actions: var(--utility-neutral-100);
    --text-colorpicker: var(--alpha-0);
    --border-colorpicker: var(--alpha-0);
    --bg-colorpicker: var(--alpha-0);
    --bg-thumbnail: var(--alpha-0);
    --border-thumbnail: var(--alpha-0);
    --bg-thumbnail-img: var(--alpha-0);
    --bg-thumbnail-remove: var(--alpha-neutral-950-60);
    --bg-thumbnail-remove-hover: var(--utility-neutral-600);
    --text-thumbnail-remove: var(--alpha-white-100);
    --border-thumbnail-remove: var(--alpha-0);
    --bg-kanban: var(--utility-neutral-50);
    --bg-kanban-header: var(--utility-neutral-50);
    --bg-kanban-list: var(--utility-neutral-50);
    --bg-kanban-card: var(--alpha-white-100);
    --bg-kanban-card-hover: var(--utility-neutral-50);
    --bg-kanban-card-active: var(--utility-neutral-100);
    --border-kanban: var(--utility-neutral-200);
    --border-kanban-card: var(--utility-neutral-200);
    --icon-kanban-muted: var(--text-tertiary);
    --text-kanban: var(--text-primary);
    --text-kanban-header: var(--text-secondary);
    --dot-planned: var(--utility-neutral-200);
    --dot-progress: var(--text-warning);
    --dot-done: var(--text-success);
    --radius-kanban: var(--radius-lg);
    --radius-kanban-card: var(--radius-lg);
    --gap-kanban: var(--space-2);
    --pad-kanban: var(--space-4);
    --pad-kanban-header: var(--space-4);
    --pad-kanban-card: var(--space-3) var(--space-4);
    --shadow-kanban-card: var(--shadow-sm);
    --shadow-kanban-card-hover: var(--shadow-md);
    --shadow-kanban-card-drag: var(--shadow-xl);
    --bg-kanban-col: var(--utility-neutral-50);
    --w-kanban-col: 300px;
    --bg-kanban-drop-target: var(--utility-neutral-50);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-kanban-drop-target: color-mix(in oklab, var(--utility-neutral-50), var(--text-info) 6%);
    }
    --border-drop-target: var(--border-info);
    --bg-kanban-drop-invalid: var(--utility-neutral-50);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-kanban-drop-invalid: color-mix(in oklab, var(--utility-neutral-50), var(--text-danger) 6%);
    }
    --border-drop-invalid: var(--border-danger);
    --bg-kanban-wip-full: var(--bg-danger-subtle);
    --text-kanban-wip-full: var(--text-danger);
    --text-kanban-wip: var(--text-tertiary);
    --bg-kanban-wip: transparent;
    --border-kanban-selected: var(--text-info);
    --bg-kanban-card-media: var(--utility-neutral-100);
    --text-kanban-accent: var(--border-focus);
    --bg-mob-chassis: #3f3f46;
    --bg-mob-chassis-edge: rgba(255, 255, 255, 0.12);
    --height-mobile-header: 56px;
    --height-mobile-bottom-nav: 64px;
    --height-mobile-fab: 56px;
    --bg-mobile-shell: var(--bg-primary);
    --bg-mobile-header: var(--bg-card);
    --bg-mobile-bottom-nav: var(--bg-card);
    --bg-mobile-panel: var(--bg-card);
    --bg-mobile-sheet: var(--bg-card);
    --bg-mobile-floating-menu: var(--bg-card);
    --bg-mobile-card: var(--bg-card);
    --bg-mobile-row-active: var(--bg-secondary-subtle, rgba(0, 0, 0, 0.04));
    --text-mobile-primary: var(--text-primary);
    --text-mobile-muted: var(--text-tertiary);
    --text-mobile-onAccent: #ffffff;
    --border-mobile-panel: var(--border-card);
    --border-mobile-divider: var(--border-divider);
    --shadow-mobile-floating: 0 6px 20px rgba(0, 0, 0, 0.18);
    --shadow-mobile-sheet: 0 -8px 28px rgba(0, 0, 0, 0.16);
    --shadow-mobile-header: 0 1px 0 rgba(0, 0, 0, 0.04);
    --radius-mobile-sheet: 20px;
    --radius-mobile-card: 12px;
    --radius-mobile-chip: 999px;
    --z-mobile-overlay: 45;
    --z-mobile-sheet: 50;
    --z-mobile-drawer: 55;
    --z-mobile-header: 30;
    --z-mobile-bottom-nav: 30;
    --z-mobile-fab: 40;
    --bg-mapbox-popup: var(--bg-card);
    --bg-mapbox-popup-tip: var(--bg-card);
    --border-mapbox-popup: var(--border-card);
    --shadow-mapbox-popup: var(--shadow-md);
    --bg-mapbox-control: var(--bg-card);
    --text-mapbox-control: var(--text-primary);
    --border-mapbox-control: var(--border-card);
    --bg-mapbox-attrib: var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-mapbox-attrib: color-mix(in oklch, var(--bg-card) 85%, transparent);
    }
    --text-mapbox-attrib: var(--text-tertiary);
    --bg-mapbox-cluster: var(--bg-brand-solid);
    --text-mapbox-cluster: var(--text-on-brand);
    --bg-mapbox-cluster-ring: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-mapbox-cluster-ring: color-mix(in oklch, var(--bg-brand-solid) 30%, transparent);
    }
    --text-mapbox: var(--text-primary);
    --border-mapbox-origin-marker: var(--alpha-neutral-900-30);
    --border-mapbox-destination-marker: var(--alpha-neutral-900-30);
    --border-mapbox-origin-marker-disc: var(--alpha-neutral-950-30);
    --border-mapbox-destination-marker-disc: var(--alpha-neutral-900-30);
    --border-mapbox-stop-marker: var(--alpha-neutral-900-30);
    --border-mapbox-stop-marker-disc: var(--alpha-neutral-900-30);
    --bg-mapbox-origin-marker: var(--utility-neutral-950);
    --bg-mapbox-destination-marker: var(--utility-neutral-950);
    --bg-mapbox-stop-marker: var(--utility-neutral-950);
    --bg-mapbox-origin-marker-disc: var(--alpha-neutral-400-30);
    --bg-mapbox-destination-marker-disc: var(--alpha-neutral-400-30);
    --bg-mapbox-stop-marker-disc: var(--alpha-neutral-400-30);
    --bg-origin-marker: var(--utility-neutral-900);
    --bg-destination-marker: var(--utility-neutral-900);
    --bg-stop-marker: var(--utility-neutral-900);
    --bg-route-connector: var(--utility-neutral-400);
    --bg-mapbox-route-primary: var(--utility-blue-500);
    --bg-mapbox-route-secondary: var(--utility-orange-500);
    --bg-mapbox-route-success: var(--utility-green-500);
    --bg-mapbox-route-danger: var(--utility-red-500);
    --bg-mapbox-route-casing: var(--alpha-white-100);
    --bg-modal: var(--alpha-white-100);
    --text-modal: var(--text-primary);
    --border-modal: var(--alpha-0);
    --border-modal-header: var(--border-primary);
    --blur-modal-backdrop: 0;
    --opacity-modal-grain: 0;
    --bg-modal-overlay: var(--alpha-neutral-950-20);
    --bg-lightbox: oklch(8% 0.005 250 / 0.92);
    --bg-lightbox-overlay: oklch(0% 0 0 / 0.40);
    --opacity-lightbox-overlay: 0.40;
    --bg-lightbox-surface: oklch(100% 0 0 / 0.06);
    --bg-lightbox-control: oklch(100% 0 0 / 0.10);
    --bg-lightbox-control-hover: oklch(100% 0 0 / 0.18);
    --bg-lightbox-control-active: oklch(100% 0 0 / 0.24);
    --bg-lightbox-thumbnail: oklch(100% 0 0 / 0.06);
    --bg-lightbox-thumbnail-active: oklch(100% 0 0 / 0.18);
    --text-lightbox: oklch(100% 0 0 / 0.92);
    --text-lightbox-muted: oklch(100% 0 0 / 0.62);
    --border-lightbox: oklch(100% 0 0 / 0.10);
    --border-lightbox-thumbnail: oklch(100% 0 0 / 0.14);
    --border-lightbox-thumbnail-active: oklch(100% 0 0 / 0.70);
    --ring-lightbox-focus: oklch(70% 0.15 240 / 0.90);
    --shadow-lightbox: 0 12px 32px -8px oklch(0% 0 0 / 0.5);
    --bg-cam: #000;
    --bg-cam-controls: rgba(0, 0, 0, 0.85);
    --bg-cam-btn: rgba(255, 255, 255, 0.12);
    --bg-cam-btn-hover: rgba(255, 255, 255, 0.2);
    --bg-cam-btn-active: rgba(255, 255, 255, 0.08);
    --text-cam: #fff;
    --text-cam-muted: rgba(255, 255, 255, 0.6);
    --border-cam-btn: rgba(255, 255, 255, 0.15);
    --bg-cam-shutter: #fff;
    --bg-cam-shutter-hover: rgba(255, 255, 255, 0.85);
    --bg-cam-shutter-ring: rgba(255, 255, 255, 0.3);
    --bg-cam-shutter-recording: #ef4444;
    --bg-cam-torch-active: rgba(255, 220, 50, 0.25);
    --border-cam-torch-active: rgba(255, 220, 50, 0.6);
    --text-cam-torch-active: #ffdc32;
    --bg-cam-scan-frame: transparent;
    --border-cam-scan-frame: rgba(255, 255, 255, 0.7);
    --bg-cam-scan-overlay: rgba(0, 0, 0, 0.55);
    --bg-cam-badge: rgba(0, 0, 0, 0.6);
    --bg-cam-badge-success: #22c55e;
    --bg-cam-badge-danger: #ef4444;
    --bg-notification-header: var(--alpha-white-100);
    --bg-notification-card: var(--alpha-white-100);
    --bg-notification-card-hover: var(--utility-neutral-100);
    --text-section: var(--utility-gray-900);
    --border-section: var(--utility-gray-200);
    --bg-section: var(--utility-neutral-100);
    --bg-selection: var(--utility-blue-500);
    --text-selection: var(--alpha-white-100);
    --bg-input-selection: var(--utility-blue-200);
    --text-input-selection: var(--text-primary);
    --bg-carousel: var(--utility-neutral-950);
    --bg-carousel-surface: var(--utility-neutral-900);
    --bg-carousel-overlay: oklch(0% 0 0 / 0.55);
    --bg-carousel-overlay-soft: linear-gradient(180deg, transparent 0%, oklch(0% 0 0 / 0.55) 100%);
    --bg-carousel-overlay-top: linear-gradient(180deg, oklch(0% 0 0 / 0.45) 0%, transparent 60%);
    --bg-carousel-control: oklch(0% 0 0 / 0.45);
    --bg-carousel-control-hover: oklch(0% 0 0 / 0.62);
    --bg-carousel-control-active: oklch(0% 0 0 / 0.78);
    --text-carousel-control: oklch(100% 0 0);
    --border-carousel-control: oklch(100% 0 0 / 0.18);
    --bg-carousel-indicator: oklch(100% 0 0 / 0.45);
    --bg-carousel-indicator-hover: oklch(100% 0 0 / 0.75);
    --bg-carousel-indicator-active: oklch(100% 0 0);
    --bg-carousel-thumbnail: var(--utility-neutral-100);
    --bg-carousel-thumbnail-hover: var(--utility-neutral-200);
    --bg-carousel-thumbnail-active: oklch(100% 0 0);
    --border-carousel-thumbnail: var(--utility-neutral-200);
    --border-carousel-thumbnail-active: var(--utility-blue-500);
    --bg-carousel-thumb-rail: var(--utility-neutral-50);
    --text-carousel: oklch(100% 0 0);
    --text-carousel-muted: oklch(100% 0 0 / 0.72);
    --text-carousel-meta: oklch(100% 0 0 / 0.6);
    --text-carousel-on-light: var(--utility-neutral-900);
    --text-carousel-on-light-muted: var(--utility-neutral-500);
    --border-carousel: var(--utility-neutral-200);
    --radius-carousel: 0.75rem;
    --shadow-carousel: 0 1px 2px oklch(0% 0 0 / 0.04), 0 6px 18px oklch(0% 0 0 / 0.06);
    --ring-carousel-focus: 0 0 0 2px oklch(60% 0.13 250 / 0.45);
    --bg-carousel-counter: oklch(0% 0 0 / 0.55);
    --text-carousel-counter: oklch(100% 0 0);
    --bg-carousel-status: oklch(0% 0 0 / 0.55);
    --bg-carousel-progress-track: oklch(100% 0 0 / 0.15);
    --bg-carousel-progress-fill: oklch(100% 0 0);
    --bg-carousel-empty: var(--utility-neutral-50);
    --bg-carousel-error: var(--utility-red-50);
    --text-carousel-error: var(--utility-red-700);
    --bg-carousel-skeleton: var(--utility-neutral-100);
    --bg-carousel-skeleton-sweep: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / 0.45) 50%, transparent 70%);
    --bg-mail-app: var(--bg-surface);
    --bg-mail-toolbar: var(--bg-surface);
    --bg-mail-search: var(--bg-input);
    --border-mail-search: var(--border-input);
    --bg-mail-sidebar: var(--utility-neutral-50);
    --border-mail-sidebar: var(--border-primary-subtle);
    --bg-mail-folder-hover: var(--utility-neutral-100);
    --bg-mail-folder-active: var(--color-brand-50);
    --text-mail-folder: var(--text-secondary);
    --text-mail-folder-active: var(--text-link);
    --text-mail-folder-count: var(--text-tertiary);
    --bg-mail-folder-count-active: var(--bg-brand-solid);
    --text-mail-folder-count-active: var(--text-on-brand);
    --text-mail-sidebar-section: var(--text-tertiary);
    --bg-mail-list: oklch(100% 0 0);
    --border-mail-list: var(--border-primary-subtle);
    --bg-mail-item: transparent;
    --bg-mail-item-hover: var(--utility-neutral-50);
    --bg-mail-item-active: var(--color-brand-50);
    --bg-mail-item-selected: var(--color-brand-50);
    --bg-mail-item-unread: oklch(100% 0 0);
    --border-mail-item-divider: var(--utility-neutral-100);
    --border-mail-item-active: var(--border-focus);
    --bg-mail-item-new-flash: var(--utility-amber-50);
    --bg-mail-unread-dot: var(--bg-brand-solid);
    --text-mail-item: var(--text-primary);
    --text-mail-sender: var(--text-primary);
    --text-mail-subject: var(--text-primary);
    --text-mail-preview: var(--text-tertiary);
    --text-mail-time: var(--text-tertiary);
    --text-mail-star: var(--utility-neutral-400);
    --text-mail-star-active: var(--utility-amber-500);
    --text-mail-pin: var(--utility-amber-600);
    --text-mail-snoozed: var(--utility-blue-500);
    --text-mail-flagged: var(--utility-red-500);
    --text-mail-replied: var(--utility-green-600);
    --text-mail-forwarded: var(--utility-blue-600);
    --text-mail-important: var(--utility-amber-600);
    --text-mail-encrypted: var(--utility-purple-600);
    --text-mail-draft: var(--utility-orange-600);
    --bg-mail-priority-high: var(--utility-red-500);
    --bg-mail-priority-normal: transparent;
    --bg-mail-priority-low: var(--utility-neutral-400);
    --bg-mail-label-blue: var(--utility-blue-100);
    --text-mail-label-blue: var(--utility-blue-700);
    --bg-mail-label-green: var(--utility-green-100);
    --text-mail-label-green: var(--utility-green-700);
    --bg-mail-label-amber: var(--utility-amber-100);
    --text-mail-label-amber: var(--utility-amber-700);
    --bg-mail-label-red: var(--utility-red-100);
    --text-mail-label-red: var(--utility-red-700);
    --bg-mail-label-purple: var(--utility-purple-100);
    --text-mail-label-purple: var(--utility-purple-700);
    --bg-mail-label-pink: var(--utility-pink-100);
    --text-mail-label-pink: var(--utility-pink-700);
    --bg-mail-label-teal: var(--utility-teal-100);
    --text-mail-label-teal: var(--utility-teal-700);
    --bg-mail-label-orange: var(--utility-orange-100);
    --text-mail-label-orange: var(--utility-orange-700);
    --bg-mail-label-indigo: var(--utility-indigo-100);
    --text-mail-label-indigo: var(--utility-indigo-700);
    --bg-mail-label-neutral: var(--utility-neutral-100);
    --text-mail-label-neutral: var(--utility-neutral-700);
    --bg-mail-detail: oklch(100% 0 0);
    --border-mail-detail: var(--border-primary-subtle);
    --bg-mail-detail-toolbar: oklch(100% 0 0 / 0.9);
    --bg-mail-quoted: var(--utility-neutral-50);
    --border-mail-quoted: var(--utility-neutral-300);
    --text-mail-quoted-toggle: var(--text-link);
    --bg-mail-compose: oklch(100% 0 0);
    --border-mail-compose: var(--border-primary);
    --shadow-mail-compose: 0 8px 24px oklch(0% 0 0 / 0.12), 0 2px 6px oklch(0% 0 0 / 0.04);
    --bg-mail-compose-toolbar: var(--utility-neutral-50);
    --bg-mail-compose-footer: var(--utility-neutral-50);
    --text-mail-draft-dot: var(--utility-orange-500);
    --bg-mail-recipient: var(--utility-neutral-100);
    --bg-mail-recipient-hover: var(--utility-neutral-200);
    --bg-mail-recipient-internal: var(--utility-blue-50);
    --text-mail-recipient-internal: var(--utility-blue-700);
    --bg-mail-recipient-external: var(--utility-amber-50);
    --text-mail-recipient-external: var(--utility-amber-700);
    --bg-mail-recipient-group: var(--utility-purple-50);
    --text-mail-recipient-group: var(--utility-purple-700);
    --bg-mail-recipient-invalid: var(--utility-red-50);
    --text-mail-recipient-invalid: var(--utility-red-700);
    --bg-mail-banner: var(--utility-blue-50);
    --text-mail-banner: var(--utility-blue-700);
    --border-mail-banner: var(--utility-blue-200);
    --bg-mail-selection-bar: var(--color-brand-50);
    --text-mail-selection-bar: var(--text-link);
    --border-mail-selection-bar: var(--color-brand-200);
    --bg-mail-category-tab: transparent;
    --bg-mail-category-tab-active: var(--utility-neutral-100);
    --text-mail-category-tab: var(--text-tertiary);
    --text-mail-category-tab-active: var(--text-primary);
    --border-mail-category-tab-active: var(--border-focus);
    --bg-mail-filter-chip: var(--utility-neutral-100);
    --bg-mail-filter-chip-active: var(--bg-brand-solid);
    --text-mail-filter-chip: var(--text-secondary);
    --text-mail-filter-chip-active: oklch(100% 0 0);
    --bg-mail-sender-card: oklch(100% 0 0);
    --border-mail-sender-card: var(--border-primary);
    --shadow-mail-sender-card: 0 8px 24px oklch(0% 0 0 / 0.12);
    --ring-mail-focus: inset 0 0 0 2px var(--border-focus);
    --text-tooltip: var(--text-primary);
    --bg-tooltip: var(--alpha-white-100);
    --border-dropzone: var(--utility-neutral-300);
    --text-dropzone: var(--utility-neutral-600);
    --bg-dropzone: var(--utility-neutral-200);
    --bg-flatpickr-calendar: var(--alpha-white-100);
    --border-flatpickr-calendar: var(--utility-neutral-200);
    --text-flatpickr-primary: var(--utility-neutral-800);
    --text-flatpickr-months: var(--utility-neutral-600);
    --text-flatpickr-months-hover: var(--utility-neutral-900);
    --text-flatpickr: var(--utility-neutral-700);
    --text-flatpickr-hover: var(--utility-neutral-900);
    --text-flatpickr-disabled: var(--utility-neutral-300);
    --text-flatpickr-selected: var(--alpha-white-100);
    --text-flatpickr-selected-hover: var(--alpha-white-100);
    --text-flatpickr-time: var(--utility-neutral-500);
    --bg-flatpickr: var(--alpha-0);
    --bg-flatpickr-primary: var(--alpha-neutral-100-20);
    --bg-flatpickr-hover: var(--utility-neutral-200);
    --bg-flatpickr-selected: var(--utility-blue-500);
    --bg-flatpickr-selected-hover: var(--utility-blue-600);
    --bg-flatpickr-time-hover: var(--utility-neutral-100);
    --border-flatpickr-hover: var(--utility-neutral-300);
    --border-flatpickr-selected: var(--utility-blue-500);
    --border-flatpickr-selected-hover: var(--utility-blue-600);
    --border-flatpickr-time: var(--utility-neutral-200);
    --bg-flatpickr-today: var(--bg-secondary);
    --bg-flatpickr-today-hover: var(--bg-secondary-hover);
    --bg-quill-editor: var(--utility-gray-100);
    --text-quill-editor: var(--utility-neutral-900);
    --border-quill-editor: var(--alpha-0);
    --text-quill-placeholder: var(--utility-neutral-500);
    --border-quill-container: var(--alpha-0);
    --bg-quill-content: var(--alpha-0);
    --text-quill-content: var(--utility-neutral-900);
    --text-quill-checkbox: var(--utility-neutral-900);
    --bg-quill-black: var(--utility-neutral-900);
    --bg-quill-red: var(--utility-red-500);
    --bg-quill-orange: var(--utility-orange-500);
    --bg-quill-yellow: var(--utility-yellow-500);
    --bg-quill-green: var(--utility-green-500);
    --bg-quill-blue: var(--utility-blue-500);
    --bg-quill-purple: var(--utility-purple-500);
    --text-quill-white: var(--alpha-white-100);
    --text-quill-red: var(--utility-red-500);
    --text-quill-orange: var(--utility-orange-500);
    --text-quill-yellow: var(--utility-yellow-500);
    --text-quill-green: var(--utility-green-500);
    --text-quill-blue: var(--utility-blue-500);
    --text-quill-purple: var(--utility-purple-500);
    --bg-quill-toolbar: var(--alpha-0);
    --text-quill-toolbar: var(--utility-neutral-900);
    --border-quill-toolbar: var(--alpha-0);
    --text-quill-button: var(--utility-neutral-700);
    --text-quill-button-hover: var(--utility-neutral-900);
    --text-quill-button-touch-hover: var(--utility-neutral-700);
    --fill-quill-touch-hover: var(--utility-neutral-900);
    --stroke-quill-touch-hover: var(--utility-neutral-900);
    --text-quill-picker-hover: var(--utility-neutral-900);
    --bg-quill-tooltip: var(--alpha-0);
    --text-quill-tooltip: var(--utility-neutral-700);
    --border-quill-tooltip: var(--alpha-0);
    --text-quill-link: var(--utility-neutral-700);
    --text-quill-link-hover: var(--utility-neutral-800);
    --text-quill-link-active: var(--utility-neutral-900);
    --bg-quill-input: var(--utility-neutral-100);
    --text-quill-input: var(--utility-neutral-900);
    --border-quill-input: var(--border-input);
    --border-quill-input-hover: var(--border-input-hover);
    --border-quill-input-focus: var(--border-input-focus);
    --stroke-quill-default: var(--utility-neutral-600);
    --stroke-quill-hover: var(--utility-neutral-800);
    --fill-quill-default: var(--utility-neutral-600);
    --fill-quill-hover: var(--utility-neutral-800);
    --bg-quill-code: var(--alpha-0);
    --bg-select2: var(--alpha-white-100);
    --text-select2: var(--text-default);
    --border-select2: var(--border-primary);
    --text-select2-rendered: var(--text-default);
    --text-select2-placeholder: var(--text-muted);
    --text-select2-remove: var(--text-link);
    --text-select2-remove-hover: var(--text-link-hover);
    --bg-select2-multiselect: var(--alpha-white-100);
    --text-select2-multiselect: var(--text-default);
    --border-select2-multiselect: var(--border-primary);
    --bg-select2-choice: var(--bg-info-subtle);
    --text-select2-choice: var(--text-info);
    --border-select2-choice: transparent;
    --bg-select2-dropdown: var(--alpha-white-100);
    --text-select2-dropdown: var(--text-default);
    --border-select2-dropdown: var(--border-primary);
    --bg-select2-mask: var(--bg-surface);
    --bg-select2-search: var(--alpha-white-100);
    --text-select2-search: var(--text-default);
    --border-select2-search: var(--border-primary);
    --bg-select2-option: transparent;
    --text-select2-option: var(--text-muted);
    --bg-select2-option-selected: var(--bg-subtle-hover);
    --text-select2-option-selected: var(--text-default);
    --bg-select2-option-highlighted: var(--bg-info-soft);
    --text-select2-option-highlighted: var(--text-info-strong);
    --bg-calendar-container: var(--alpha-white-100);
    --border-calendar-divider: var(--utility-neutral-200);
    --border-calendar-divider-header: var(--utility-neutral-200);
    --border-calendar-divider-time: var(--utility-neutral-200);
    --text-calendar-time-label: var(--utility-neutral-800);
    --text-calendar-time: var(--utility-neutral-700);
    --text-calendar-day-label: var(--utility-neutral-950);
    --text-calendar-day-date: var(--utility-neutral-700);
    --text-calendar-day-header: var(--utility-neutral-950);
    --text-calendar-closed: var(--text-disabled);
    --bg-calendar-day-header: var(--alpha-white-100);
    --bg-calendar-time-slot: var(--alpha-white-100);
    --bg-calendar-day-slot: var(--utility-neutral-50);
    --bg-calendar-indicator-today: var(--utility-neutral-950);
    --bg-calendar-footer: var(--alpha-white-100);
    --bg-appointment-card: var(--alpha-white-100);
    --bg-appointment-card-hover: var(--utility-neutral-50);
    --border-appointment-card: var(--utility-neutral-200);
    --text-appointment-card: var(--text-primary);
    --text-appointment-number: var(--utility-neutral-950);
    --text-appointment-gap: var(--text-danger);
    --text-appointment-note: var(--text-danger);
    --text-appointment-carrier: var(--utility-neutral-800);
    --text-appointment-comment: var(--utility-neutral-800);
    --text-appointment-origin: var(--utility-neutral-900);
    --text-appointment-refs: var(--utility-neutral-700);
    --text-appointment-equipment-id: var(--utility-neutral-950);
    --text-appointment-toggle-btn: var(--text-button);
    --bg-appointment-category: var(--border-category);
    --bg-appointment-comment: var(--utility-neutral-100);
    --border-appointment-comment: var(--utility-neutral-200);
    --border-appointment-toggle-btn: var(--utility-neutral-100);
    --text-appointment-icon-float: var(--utility-yellow-500);
    --text-appointment-icon-log: var(--utility-orange-400);
    --text-appointment-icon-secondary: var(--utility-neutral-600);
    --text-appointment-icon-audit: var(--utility-blue-500);
    --text-schedule-day-label: var(--utility-neutral-600);
    --text-schedule-day: var(--utility-neutral-950);
    --text-schedule-day-available: var(--utility-neutral-950);
    --text-schedule-day-active: var(--alpha-white-100);
    --bg-schedule-day: var(--alpha-0);
    --bg-schedule-day-hover: var(--utility-neutral-100);
    --bg-schedule-day-available: var(--utility-neutral-50);
    --bg-schedule-day-available-hover: var(--utility-neutral-100);
    --bg-schedule-day-available-active: var(--utility-neutral-100);
    --bg-schedule-day-active: var(--utility-neutral-900);
    --bg-schedule-day-active-hover: var(--utility-neutral-900);
    --bg-schedule-day-active-pressed: var(--utility-neutral-950);
    --bg-schedule-indicator-current: var(--utility-neutral-950);
    --border-schedule-day-available: var(--utility-neutral-100);
    --bg-cal-booking: var(--alpha-white-100);
    --border-cal-booking: var(--utility-neutral-200);
    --text-cal-booking-weekday: var(--utility-neutral-500);
    --text-cal-booking-day: var(--utility-neutral-800);
    --text-cal-booking-day-outside: var(--utility-neutral-300);
    --text-cal-booking-day-disabled: var(--utility-neutral-300);
    --bg-cal-booking-day: var(--alpha-0);
    --bg-cal-booking-day-hover: var(--bg-primary);
    --bg-cal-booking-day-active: var(--utility-neutral-50);
    --border-cal-booking-day: transparent;
    --border-cal-booking-day-hover: transparent;
    --bg-cal-booking-available: var(--utility-neutral-50);
    --bg-cal-booking-available-hover: var(--utility-neutral-100);
    --border-cal-booking-available: var(--utility-neutral-200);
    --text-cal-booking-available: var(--utility-neutral-900);
    --bg-cal-booking-selected: var(--utility-neutral-900);
    --bg-cal-booking-selected-hover: var(--utility-neutral-700);
    --text-cal-booking-selected: var(--alpha-white-100);
    --border-cal-booking-selected: var(--utility-neutral-900);
    --bg-cal-booking-today: var(--alpha-0);
    --border-cal-booking-today: var(--utility-neutral-900);
    --text-cal-booking-today: var(--utility-neutral-900);
    --bg-cal-booking-today-dot: var(--utility-neutral-900);
    --bg-cal-booking-dot-available: var(--utility-green-400);
    --bg-cal-booking-dot-booked: var(--utility-blue-500);
    --bg-cal-booking-dot-busy: var(--utility-orange-400);
    --bg-cal-booking-dot-full: var(--utility-red-400);
    --bg-cal-booking-elevated: var(--alpha-white-100);
    --border-cal-booking-elevated: var(--utility-neutral-150);
    --shadow-cal-booking-elevated: var(--shadow-xs);
    --shadow-cal-booking-elevated-hover: var(--shadow-sm);
    --text-cal-booking-nav: var(--utility-neutral-700);
    --text-cal-booking-nav-hover: var(--utility-neutral-900);
    --text-cal-booking-month: var(--utility-neutral-900);
    --h-calendar-schedule-day-header: 48px;
    --w-calendar-schedule-time-axis: 56px;
    --h-calendar-schedule-hour: 64px;
    --w-calendar-schedule-day: 180px;
    --gap-calendar-schedule: 0px;
    --radius-calendar-schedule: var(--radius-lg, 0.5rem);
    --shadow-calendar-schedule: var(--shadow-sm);
    --bg-calendar-schedule: var(--alpha-white-100);
    --bg-calendar-schedule-surface: var(--alpha-white-100);
    --bg-calendar-schedule-muted: var(--utility-neutral-50);
    --text-calendar-schedule: var(--text-secondary);
    --border-calendar-schedule: var(--utility-neutral-200);
    --border-calendar-schedule-soft: var(--utility-neutral-100);
    --bg-calendar-schedule-today: var(--utility-blue-50);
    --bg-calendar-schedule-hover: var(--utility-blue-100);
    --bg-calendar-schedule-now: var(--bg-info-solid);
    --border-calendar-schedule-now: var(--bg-info-solid);
    --bg-calendar-schedule-event: var(--alpha-white-100);
    --border-calendar-schedule-event: var(--border-primary);
    --text-calendar-schedule-event: var(--text-primary);
    --w-calendar-schedule-day-min: 80px;
    --w-calendar-schedule-day-max: none;
    --bg-calendar-schedule-today-col: var(--utility-blue-50);
    --bg-calendar-schedule-hour-stripe: var(--utility-neutral-50);
    --bg-calendar-schedule-working-hours: transparent;
    --bg-calendar-schedule-nonworking-hours: var(--utility-neutral-50);
    --bg-calendar-schedule-weekend: var(--utility-neutral-50);
    --outline-calendar-schedule-focus: var(--color-info);
    --shadow-calendar-schedule-header: var(--shadow-md);
    --shadow-calendar-event: var(--shadow-sm);
    --shadow-calendar-event-hover: var(--shadow-md);
    --shadow-calendar-event-selected: 0 0 0 2px var(--color-info);
    --bg-calendar-event-primary: var(--alpha-white-100);
    --border-calendar-event-primary: var(--border-primary);
    --bg-calendar-event-warning: var(--utility-yellow-50);
    --border-calendar-event-warning: var(--color-warning);
    --bg-calendar-event-danger: var(--utility-red-50);
    --border-calendar-event-danger: var(--color-danger);
    --bg-calendar-event-success: var(--utility-green-50);
    --border-calendar-event-success: var(--color-success);
    --bg-calendar-event-neutral: var(--utility-neutral-50);
    --border-calendar-event-neutral: var(--utility-neutral-400);
    --bg-calendar-event-hover: var(--utility-neutral-100);
    --bg-calendar-event-primary-hover: var(--utility-neutral-100);
    --bg-calendar-event-success-hover: var(--utility-green-100);
    --bg-calendar-event-warning-hover: var(--utility-yellow-100);
    --bg-calendar-event-danger-hover: var(--utility-red-100);
    --bg-calendar-event-neutral-hover: var(--utility-neutral-200);
    --ring-calendar-event-focus: 0 0 0 4px var(--utility-blue-100);
    --bg-calendar-now-dot: var(--utility-red-500);
    --bg-calendar-now-line: var(--alpha-red-500-30);
    --bg-calendar-today-line: var(--alpha-red-500-10);
    --bg-calendar-now-dot-danger: var(--utility-red-500);
    --bg-calendar-now-line-danger: var(--alpha-red-500-30);
    --bg-calendar-today-line-danger: var(--alpha-red-500-10);
    --bg-calendar-now-dot-primary: var(--utility-neutral-900);
    --bg-calendar-now-line-primary: var(--alpha-neutral-900-20);
    --bg-calendar-today-line-primary: var(--alpha-neutral-900-5);
    --bg-calendar-now-dot-info: var(--utility-blue-500);
    --bg-calendar-now-line-info: var(--alpha-blue-500-30);
    --bg-calendar-today-line-info: var(--alpha-blue-500-10);
    --bg-calendar-now-dot-success: var(--utility-green-500);
    --bg-calendar-now-line-success: var(--alpha-green-500-30);
    --bg-calendar-today-line-success: var(--alpha-green-500-10);
    --bg-calendar-now-dot-warning: var(--utility-yellow-500);
    --bg-calendar-now-line-warning: var(--alpha-yellow-500-30);
    --bg-calendar-today-line-warning: var(--alpha-yellow-500-10);
    --h-calendar-schedule-slot: 64px;
    --h-calendar-slot-max: none;
    --gap-calendar-schedule-slot: 2px;
    --bg-calendar-schedule-cell-alt: var(--utility-neutral-50);
    --bg-calendar-schedule-closed: var(--utility-neutral-200);
    --w-calendar-schedule-frame-right: 240px;
    --h-calendar-schedule-frame-bottom: 48px;
    --bg-calendar-schedule-frame: var(--alpha-white-100);
    --border-calendar-schedule-frame: var(--alpha-neutral-200-60);
    --w-calendar-schedule-day-carousel: 200px;
    --bg-inventory-grid-panel: var(--alpha-white-100);
    --bg-inventory-card: transparent;
    --bg-inventory-card-hover: var(--utility-neutral-100);
    --border-inventory-card: transparent;
    --border-inventory-card-hover: transparent;
    --bg-inventory-image: var(--utility-neutral-100);
    --text-inventory-info: var(--utility-neutral-950);
    --text-inventory-secondary: var(--utility-neutral-600);
    --bg-inventory-popover: var(--alpha-white-100);
    --bg-inventory-popover-hover: var(--utility-neutral-100);
    --text-inventory-tertiary: var(--utility-neutral-500);
    --bg-gallery: var(--alpha-white-100);
    --bg-gallery-card-hover: var(--utility-neutral-100);
    --text-gallery-card: var(--text-primary);
    --text-gallery-header: var(--text-secondary);
    --bg-gallery-item: transparent;
    --bg-gallery-item-hover: var(--utility-neutral-100);
    --bg-gallery-item-selected: var(--bg-info-subtle);
    --bg-gallery-item-image: var(--utility-neutral-50);
    --bg-gallery-item-upload: transparent;
    --text-gallery: var(--text-primary);
    --text-gallery-muted: var(--text-tertiary);
    --border-gallery: transparent;
    --border-gallery-item: transparent;
    --border-gallery-item-hover: var(--border-divider);
    --border-gallery-item-selected: var(--text-info);
    --border-gallery-item-upload: var(--border-divider);
    --shadow-gallery-item: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-gallery-item-hover: 0 4px 12px rgba(0,0,0,0.08);
    --ring-gallery-focus: 0 0 0 3px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-gallery-focus: 0 0 0 3px color-mix(in oklch, var(--text-info) 25%, transparent);
    }
    --bg-navbar: var(--alpha-0);
    --border-navbar: var(--alpha-0);
    --text-navbar: var(--utility-neutral-900);
    --text-navbar-link: var(--utility-neutral-600);
    --text-navbar-link-hover: var(--utility-neutral-950);
    --text-navbar-link-active: var(--utility-neutral-950);
    --bg-navbar-link-hover: var(--alpha-0);
    --bg-navbar-link-active: var(--alpha-0);
    --bg-navbar-dropdown: var(--alpha-white-100);
    --border-navbar-dropdown: var(--utility-neutral-100);
    --bg-navbar-card: var(--alpha-white-100);
    --bg-navbar-card-hover: var(--utility-platinum-300);
    --bg-navbar-card-active: var(--utility-neutral-200);
    --border-navbar-card: var(--border-neutral-200);
    --radius-navbar-card: var(--radius-md);
    --text-navbar-card-title: var(--text-primary);
    --text-navbar-card-caption: var(--text-secondary);
    --bg-bars-menu: var(--utility-neutral-900);
    --bg-navbar-mobile: transparent;
    --text-navbar-mobile-link: var(--text-neutral-800);
    --text-navbar-mobile-link-hover: var(--text-neutral-950);
    --bg-navbar-layer: var(--alpha-white-90);
    --bg-navbar-toggle: var(--bg-neutral-900);
    --bg-navbar-toggle-dark: var(--bg-neutral-300);
    --bg-mobile-nav: var(--alpha-white-100);
    --bg-mobile-nav-overlay: var(--alpha-neutral-950-20);
    --bg-mobile-toggle-bar: var(--utility-neutral-950);
    --bg-mobile-nav-item: var(--alpha-0);
    --bg-mobile-nav-item-hover: var(--utility-neutral-100);
    --bg-mobile-nav-item-active: var(--utility-neutral-100);
    --text-mobile-nav: var(--utility-neutral-900);
    --text-mobile-nav-item: var(--utility-neutral-900);
    --text-mobile-nav-item-hover: var(--utility-neutral-900);
    --text-mobile-nav-item-active: var(--utility-neutral-900);
    --bg-mobile-subnav-item: var(--alpha-0);
    --bg-mobile-subnav-item-hover: var(--alpha-0);
    --bg-mobile-subnav-active: var(--alpha-0);
    --text-mobile-subnav: var(--utility-neutral-800);
    --text-mobile-subnav-hover: var(--utility-neutral-800);
    --text-mobile-subnav-active: var(--utility-neutral-900);
    --border-mobile-nav-divider: var(--utility-neutral-300);
    --border-mobile-menu-items: var(--utility-neutral-200);
    --border-mobile-subnav-hover: var(--utility-neutral-600);
    --border-mobile-subnav-active: var(--utility-neutral-900);
    --text-mobile-nav-muted: var(--utility-neutral-400);
    --text-mobile-nav-label: var(--utility-neutral-400);
    --icon-mobile-nav: var(--utility-neutral-600);
    --text-mobile-avatar: var(--utility-neutral-900);
    --text-mobile-danger: var(--color-danger-600);
    --bg-line-toast-success: var(--utility-green-400);
    --bg-line-toast-error: var(--utility-red-400);
    --bg-line-toast-warning: var(--utility-yellow-400);
    --bg-line-toast-info: var(--utility-blue-400);
    --bg-line-toast-loading: var(--utility-blue-400);
    --bg-signal-pill-solid: var(--alpha-white-100);
    --text-signal-pill-solid: var(--text-primary);
    --text-signal-pill-solid-muted: var(--text-tertiary);
    --border-signal-pill-solid: var(--border-divider);
    --icon-signal-pill-solid: var(--text-secondary);
    --bg-signal-pill-glass: var(--alpha-white-50);
    --text-signal-pill-glass: var(--text-primary);
    --text-signal-pill-glass-muted: var(--text-tertiary);
    --border-signal-pill-glass: var(--alpha-white-60);
    --icon-signal-pill-glass: var(--text-secondary);
    --blur-signal-pill-glass: blur(24px) saturate(140%);
    --shadow-signal-pill: 0 12px 32px -8px oklch(0% 0 0 / 0.22), 0 4px 12px -4px oklch(0% 0 0 / 0.12);
    --shadow-signal-pill-glass: 0 12px 32px -8px oklch(0% 0 0 / 0.16), 0 2px 8px -2px oklch(0% 0 0 / 0.08);
    --radius-signal-pill: var(--radius-full);
    --bg-signal-pill-success: var(--alpha-white-100);
    --text-signal-pill-success: var(--text-primary);
    --icon-signal-pill-success: var(--text-success);
    --bg-signal-pill-danger: var(--alpha-white-100);
    --text-signal-pill-danger: var(--text-primary);
    --icon-signal-pill-danger: var(--text-danger);
    --bg-signal-pill-warning: var(--alpha-white-100);
    --text-signal-pill-warning: var(--text-primary);
    --icon-signal-pill-warning: var(--text-warning);
    --bg-signal-pill-info: var(--alpha-white-100);
    --text-signal-pill-info: var(--text-primary);
    --icon-signal-pill-info: var(--text-info);
    --bg-signal-pill-neutral: var(--alpha-white-100);
    --text-signal-pill-neutral: var(--text-primary);
    --icon-signal-pill-neutral: var(--text-secondary);
    --bg-signal-pill-loading: var(--alpha-white-100);
    --text-signal-pill-loading: var(--text-primary);
    --icon-signal-pill-loading: var(--text-info);
    --bg-signal-pill-action: var(--alpha-white-100);
    --text-signal-pill-action: var(--text-primary);
    --icon-signal-pill-action: var(--text-info);
    --text-signal-pill-action-label: var(--text-link);
    --text-signal-pill-action-label-hover: var(--text-link-hover);
    --bg-shipment-header: var(--bg-panel, var(--alpha-white-100));
    --bg-shipment-header-stuck: var(--alpha-white-90);
    --border-shipment-header: var(--border-divider);
    --shadow-shipment-header-stuck: 0 8px 24px -16px oklch(0% 0 0 / 0.18);
    --text-shipment-title: var(--text-primary);
    --text-shipment-ref-label: var(--text-tertiary);
    --text-shipment-route: var(--text-primary);
    --text-shipment-route-meta: var(--text-tertiary);
    --icon-shipment-route: var(--text-secondary);
    --bg-shipment-route-chip: var(--bg-primary-subtle);
    --border-shipment-route-chip: var(--border-divider);
    --text-shipment-fact-label: var(--text-tertiary);
    --text-shipment-fact-value: var(--text-primary);
    --text-shipment-fact-meta: var(--text-tertiary);
    --border-shipment-fact-divider: var(--border-divider);
    --shadow-xs: 0 1px 1px 0 oklch(0% 0 0 / 0.03);
    --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 oklch(0% 0 0 / 0.05);
    --shadow-none: 0 0 0 0 transparent;
    --radius-none: 0;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    --z-hide: -1;
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-sidebar: 35;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-toast: 70;
    --z-tooltip: 80;
    --z-max: 9999;
    --duration-instant: 0ms;
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;
    --space-48: 12rem;
    --space-64: 16rem;
    --blur-none: 0;
    --blur-xs: 2px;
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 12px;
    --blur-xl: 20px;
    --blur-2xl: 40px;
    --border-focus: var(--utility-blue-500);
    --ring-focus: 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--border-focus);
    --bg-brand-solid: var(--color-brand-600);
    --bg-brand-solid-hover: var(--color-brand-700);
    --bg-brand-solid-active: var(--color-brand-800);
    --text-on-brand: var(--color-white);
    --border-brand: var(--color-brand-600);
    --text-brand: var(--color-brand-700);
    --border-disabled: var(--utility-neutral-200);
    --bg-button-success: var(--utility-green-700);
    --bg-button-success-hover: var(--utility-green-800);
    --bg-button-success-active: var(--utility-green-900);
    --text-button-success: var(--alpha-white-100);
    --border-button-success: var(--alpha-0);
    --bg-empty-state-icon: var(--utility-neutral-100);
    --bg-skeleton: var(--utility-neutral-200);
    --bg-skeleton-highlight: var(--utility-neutral-100);
    --bg-combobox: var(--bg-input);
    --bg-combobox-search: var(--utility-neutral-100);
    --bg-combobox-listbox: var(--alpha-white-100);
    --bg-combobox-option-hover: var(--bg-dropdown-hover);
    --bg-combobox-option-active: var(--bg-dropdown-active);
    --bg-combobox-option-selected: var(--bg-dropdown-selected);
    --text-combobox: var(--text-input);
    --text-combobox-placeholder: var(--text-input-placeholder);
    --text-combobox-option: var(--text-primary);
    --text-combobox-option-selected: var(--text-dropdown-selected);
    --text-combobox-option-meta: var(--text-tertiary);
    --text-combobox-option-check: var(--border-focus);
    --border-combobox: var(--border-input);
    --border-combobox-hover: var(--border-input-hover);
    --border-combobox-focus: var(--border-focus);
    --shadow-combobox-listbox: var(--shadow-dropdown);
    --ring-combobox-focus: var(--ring-input-focus);
    --bg-combobox-header: var(--alpha-white-100);
    --border-combobox-header: var(--border-dropdown-divider);
    --bg-combobox-footer: var(--alpha-white-100);
    --border-combobox-footer: var(--border-dropdown-divider);
    --opacity-combobox-grain: var(--opacity-dropdown-grain, 0);
    --bg-accordion: oklch(100% 0 0);
    --bg-accordion-trigger: transparent;
    --bg-accordion-trigger-hover: var(--utility-neutral-50);
    --bg-accordion-trigger-active: var(--utility-neutral-100);
    --bg-accordion-trigger-open: var(--utility-neutral-50);
    --bg-accordion-body: transparent;
    --bg-accordion-body-filled: var(--utility-neutral-50);
    --bg-accordion-card: oklch(100% 0 0);
    --text-accordion-title: var(--text-primary);
    --text-accordion-title-open: var(--text-primary);
    --text-accordion-description: var(--utility-neutral-500);
    --text-accordion-body: var(--text-secondary);
    --text-accordion-meta: var(--utility-neutral-500);
    --text-accordion-chevron: var(--utility-neutral-400);
    --text-accordion-chevron-hover: var(--utility-neutral-700);
    --border-accordion: var(--utility-neutral-200);
    --border-accordion-divider: var(--utility-neutral-100);
    --border-accordion-open: var(--utility-neutral-300);
    --border-accordion-success: var(--utility-green-500);
    --border-accordion-warning: var(--utility-amber-500);
    --border-accordion-danger: var(--utility-red-500);
    --border-accordion-info: var(--utility-blue-500);
    --ring-accordion-focus: inset 0 0 0 2px var(--border-focus);
    --shadow-accordion-card: 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-accordion-card-open: 0 2px 8px oklch(0% 0 0 / 0.08);
    --radius-accordion: 0.5rem;
    --radius-accordion-item: 0.375rem;
    --bg-collapse-trigger: transparent;
    --bg-collapse-trigger-hover: var(--utility-neutral-50);
    --bg-collapse-trigger-open: var(--utility-neutral-50);
    --bg-collapse-section-header: var(--utility-neutral-50);
    --bg-collapse-section: oklch(100% 0 0);
    --text-collapse-trigger: var(--text-primary);
    --text-collapse-trigger-muted: var(--utility-neutral-500);
    --text-collapse-chevron: var(--utility-neutral-400);
    --text-collapse-chevron-open: var(--utility-neutral-700);
    --text-collapse-meta: var(--utility-neutral-500);
    --border-collapse: var(--utility-neutral-200);
    --border-collapse-divider: var(--utility-neutral-100);
    --border-collapse-intent-success: var(--utility-green-500);
    --border-collapse-intent-warning: var(--utility-amber-500);
    --border-collapse-intent-danger: var(--utility-red-500);
    --border-collapse-intent-info: var(--utility-blue-500);
    --ring-collapse-focus: inset 0 0 0 2px var(--border-focus);
    --duration-collapse: 260ms;
    --duration-collapse-fast: 180ms;
    --duration-collapse-slow: 360ms;
    --ease-collapse: cubic-bezier(0.4, 0, 0.2, 1);
    --bg-popover: var(--bg-surface);
    --bg-popover-modal: #fff;
    --text-popover: var(--text-primary);
    --border-popover: var(--border-primary);
    --shadow-popover: var(--shadow-lg);
    --radius-popover: var(--radius-lg);
    --bg-popover-arrow: var(--bg-surface);
    --border-popover-arrow: var(--border-primary);
    --text-popover-title: var(--utility-neutral-900);
    --text-popover-subtitle: var(--utility-neutral-500);
    --text-popover-muted: var(--utility-neutral-500);
    --border-popover-divider: var(--utility-neutral-100);
    --bg-popover-header: transparent;
    --bg-popover-footer: transparent;
    --bg-popover-menu-hover: var(--utility-neutral-50);
    --bg-popover-menu-active: var(--utility-neutral-100);
    --bg-popover-kbd: var(--utility-neutral-100);
    --text-popover-kbd: var(--utility-neutral-700);
    --border-popover-kbd: var(--utility-neutral-200);
    --bg-popover-soft: oklch(100% 0 0);
    --border-popover-soft: transparent;
    --shadow-popover-soft: 0 4px 16px oklch(0% 0 0 / 0.10), 0 1px 3px oklch(0% 0 0 / 0.05);
    --bg-popover-glass: oklch(100% 0 0 / 0.78);
    --border-popover-glass: oklch(100% 0 0 / 0.32);
    --bg-popover-dark: var(--utility-neutral-900);
    --text-popover-dark: oklch(100% 0 0);
    --border-popover-dark: var(--utility-neutral-800);
    --bg-popover-dark-arrow: var(--utility-neutral-900);
    --bg-popover-card: oklch(100% 0 0);
    --shadow-popover-card: 0 12px 28px oklch(0% 0 0 / 0.14), 0 2px 6px oklch(0% 0 0 / 0.06);
    --border-popover-intent-success: var(--utility-green-500);
    --border-popover-intent-warning: var(--utility-amber-500);
    --border-popover-intent-danger: var(--utility-red-500);
    --border-popover-intent-info: var(--utility-blue-500);
    --text-popover-pin: var(--utility-neutral-400);
    --text-popover-pin-active: var(--utility-blue-600);
    --bg-popover-pin-hover: var(--utility-neutral-100);
    --bg-popover-skeleton: var(--utility-neutral-100);
    --bg-command-palette: var(--bg-surface);
    --bg-command-palette-backdrop: oklch(0% 0 0 / 0.4);
    --bg-command-palette-item-hover: var(--bg-hover);
    --bg-command-palette-item-active: var(--bg-active);
    --text-command-palette: var(--text-primary);
    --text-command-palette-muted: var(--text-tertiary);
    --border-command-palette: var(--border-primary);
    --shadow-command-palette: var(--shadow-xl);
    --radius-command-palette: var(--radius-xl);
    --bg-msg-panel: var(--alpha-white-100);
    --bg-msg-composer-area: var(--alpha-white-100);
    --border-msg-panel: var(--border-secondary);
    --bg-msg-inbound: var(--utility-neutral-100);
    --text-msg-inbound: var(--text-primary);
    --border-msg-inbound: transparent;
    --bg-msg-outbound: var(--utility-indigo-50);
    --text-msg-outbound: var(--text-primary);
    --border-msg-outbound: transparent;
    --bg-msg-system: var(--utility-neutral-100);
    --text-msg-system: var(--text-tertiary);
    --text-msg-sender: var(--text-primary);
    --text-msg-time: var(--text-quaternary);
    --bg-msg-reaction: var(--utility-neutral-100);
    --border-msg-reaction: var(--border-secondary);
    --bg-msg-reaction-active: var(--bg-info-subtle);
    --border-msg-reaction-active: var(--border-info);
    --text-msg-reaction-active: var(--text-info);
    --bg-msg-composer: var(--bg-input);
    --border-msg-composer: var(--border-input);
    --border-msg-composer-focus: var(--border-input-focus);
    --bg-msg-send: var(--bg-primary-solid);
    --text-msg-send: var(--alpha-white-100);
    --bg-msg-actions: var(--alpha-white-100);
    --border-msg-actions: var(--border-secondary);
    --bg-msg-conversation-hover: var(--bg-hover);
    --bg-msg-conversation-active: var(--bg-active);
    --bg-msg-conversation-unread: var(--bg-info-subtle);
    --bg-msg-badge: var(--bg-primary-solid);
    --text-msg-badge: var(--alpha-white-100);
    --bg-bulk-action-bar: var(--alpha-white-100);
    --text-bulk-action-bar: var(--text-primary);
    --border-bulk-action-bar: var(--border-primary);
    --shadow-bulk-action-bar: 0 -4px 24px -4px oklch(0% 0 0 / 0.12), 0 -2px 8px -2px oklch(0% 0 0 / 0.06);
    --bg-kbd: var(--utility-neutral-100);
    --text-kbd: var(--text-secondary);
    --border-kbd: var(--utility-neutral-300);
    --shadow-kbd: 0 1px 0 0 var(--utility-neutral-200);
    --bg-inline-edit: transparent;
    --bg-inline-edit-hover: var(--utility-neutral-50);
    --bg-inline-edit-editing: oklch(100% 0 0);
    --bg-inline-edit-saving: var(--utility-neutral-50);
    --bg-inline-edit-success-flash: var(--utility-green-50);
    --bg-inline-edit-error: var(--utility-red-50);
    --bg-inline-edit-readonly: var(--utility-neutral-50);
    --bg-inline-edit-trigger-hover: var(--utility-neutral-100);
    --text-inline-edit: var(--text-primary);
    --text-inline-edit-muted: var(--text-tertiary);
    --text-inline-edit-trigger: var(--utility-neutral-400);
    --text-inline-edit-trigger-hover: var(--utility-neutral-700);
    --text-inline-edit-placeholder: var(--utility-neutral-400);
    --text-inline-edit-success: var(--utility-green-700);
    --text-inline-edit-error: var(--utility-red-700);
    --text-inline-edit-readonly: var(--utility-neutral-500);
    --text-inline-link-edit: var(--text-link);
    --text-inline-link-edit-hover: var(--text-link-hover);
    --border-inline-edit: transparent;
    --border-inline-edit-hover: var(--utility-neutral-200);
    --border-inline-edit-editing: var(--utility-blue-500);
    --border-inline-edit-success: var(--utility-green-500);
    --border-inline-edit-error: var(--utility-red-500);
    --border-inline-edit-readonly: var(--utility-neutral-200);
    --ring-inline-edit-focus: oklch(60% 0.13 250 / 0.18);
    --ring-inline-edit-error: oklch(60% 0.18 30  / 0.18);
    --ring-inline-edit-success: oklch(60% 0.13 145 / 0.18);
    --shadow-inline-edit-focus: 0 0 0 3px var(--ring-inline-edit-focus);
    --shadow-inline-edit-error: 0 0 0 3px var(--ring-inline-edit-error);
    --shadow-inline-edit-success: 0 0 0 3px var(--ring-inline-edit-success);
    --shadow-inline-edit-popover: 0 8px 28px oklch(0% 0 0 / 0.12), 0 2px 6px oklch(0% 0 0 / 0.06);
    --bg-range-track: var(--utility-neutral-200);
    --bg-range-fill: var(--bg-primary-solid);
    --bg-range-thumb: var(--alpha-white-100);
    --border-range-thumb: var(--bg-primary-solid);
    --shadow-range-thumb: var(--shadow-sm);
    --bg-timeline-marker: var(--bg-primary-solid);
    --bg-timeline-marker-completed: var(--bg-success-solid);
    --bg-timeline-marker-error: var(--bg-danger-solid);
    --border-timeline-connector: var(--utility-neutral-200);
    --text-timeline-time: var(--text-tertiary);
    --bg-activity-feed-item: var(--bg-surface);
    --bg-activity-feed-item-hover: var(--bg-hover);
    --bg-activity-feed-item-unread: var(--bg-info-subtle);
    --text-activity-feed-action: var(--text-secondary);
    --text-activity-feed-target: var(--text-link);
    --text-activity-feed-meta: var(--text-tertiary);
    --border-activity-feed-item: var(--border-secondary);
    --border-activity-feed-connector: var(--border-primary);
    --border-activity-feed-message: var(--border-secondary);
    --bg-activity-feed-message: transparent;
    --text-activity-feed-unseen: var(--text-success);
    --text-activity-feed-user: var(--text-secondary);
    --text-activity-feed-comment: var(--text-tertiary);
    --bg-stat-card: var(--bg-card);
    --text-stat-card-value: var(--text-primary);
    --text-stat-card-label: var(--text-secondary);
    --text-stat-card-trend-up: var(--text-success);
    --text-stat-card-trend-down: var(--text-danger);
    --text-stat-card-trend-neutral: var(--text-tertiary);
    --border-stat-card: var(--border-card);
    --shadow-stat-card: var(--shadow-card);
    --bg-stat-card-trend-up: var(--alpha-green-500-12);
    --bg-stat-card-trend-down: var(--alpha-red-500-12);
    --bg-stat-card-trend-neutral: var(--utility-neutral-100);
    --stroke-stat-card-spark-up: var(--utility-green-500);
    --stroke-stat-card-spark-down: var(--utility-red-500);
    --stroke-stat-card-spark-neutral: var(--utility-neutral-400);
    --fill-stat-card-spark-up: var(--alpha-green-500-12);
    --fill-stat-card-spark-down: var(--alpha-red-500-12);
    --fill-stat-card-spark-neutral: var(--alpha-black-10);
    --bg-stat-card-progress-track: var(--utility-neutral-100);
    --bg-stat-card-progress-fill: var(--utility-blue-500);
    --bg-stat-card-progress-fill-success: var(--utility-green-500);
    --bg-stat-card-progress-fill-warning: var(--utility-amber-500);
    --bg-stat-card-progress-fill-danger: var(--utility-red-500);
    --border-stat-card-divider: var(--border-secondary);
    --text-stat-card-footer: var(--text-primary-solid);
    --bg-table-resize-handle: transparent;
    --bg-table-resize-handle-hover: var(--utility-blue-400);
    --bg-table-resize-handle-active: var(--utility-blue-500);
    --bg-table-row-detail: var(--utility-neutral-50);
    --bg-record-map: var(--utility-neutral-50);
    --bg-record-map-grid-dot: var(--utility-neutral-300);
    --bg-record-map-toolbar: oklch(100% 0 0 / 0.85);
    --bg-record-map-inspector: var(--bg-primary);
    --bg-record-map-minimap: oklch(100% 0 0 / 0.92);
    --bg-record-map-minimap-viewport: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-record-map-minimap-viewport: color-mix(in oklch, var(--border-focus) 12%, transparent);
    }
    --bg-record-map-ai: linear-gradient(135deg, var(--utility-blue-50) 0%, var(--utility-purple-50, var(--utility-blue-50)) 100%);
    --bg-record-map-node: oklch(100% 0 0);
    --bg-record-map-node-hover: var(--utility-neutral-50);
    --bg-record-map-node-active: var(--color-brand-50);
    --bg-record-map-node-faded: oklch(100% 0 0 / 0.45);
    --bg-record-map-node-header: var(--utility-neutral-50);
    --bg-record-map-cluster: oklch(100% 0 0 / 0.55);
    --bg-record-map-cluster-header: var(--utility-neutral-100);
    --text-record-map: var(--utility-neutral-900);
    --text-record-map-muted: var(--utility-neutral-600);
    --text-record-map-subtle: var(--utility-neutral-500);
    --text-record-map-node: var(--utility-neutral-900);
    --text-record-map-node-meta: var(--utility-neutral-500);
    --text-record-map-ai: var(--utility-blue-700);
    --border-record-map: var(--utility-neutral-200);
    --border-record-map-node: var(--utility-neutral-200);
    --border-record-map-node-hover: var(--utility-neutral-300);
    --border-record-map-node-active: var(--border-focus);
    --border-record-map-node-warning: var(--utility-amber-500);
    --border-record-map-node-error: var(--utility-red-500);
    --border-record-map-node-success: var(--utility-green-500);
    --border-record-map-cluster: var(--utility-neutral-200);
    --shadow-record-map-node: var(--shadow-sm);
    --shadow-record-map-node-active: 0 0 0 3px var(--border-focus), var(--shadow-md);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-record-map-node-active: 0 0 0 3px color-mix(in oklch, var(--border-focus) 20%, transparent), var(--shadow-md);
    }
    --shadow-record-map-node-hover: var(--shadow-md);
    --shadow-record-map-floating: var(--shadow-lg);
    --line-record-map-connection: var(--utility-neutral-400);
    --line-record-map-connection-active: var(--border-focus);
    --line-record-map-connection-warning: var(--utility-amber-500);
    --line-record-map-connection-error: var(--utility-red-500);
    --line-record-map-connection-success: var(--utility-green-500);
    --line-record-map-connection-ai: var(--utility-blue-500);
    --line-record-map-connection-faded: oklch(70% 0 0 / 0.25);
    --accent-record-shipment: var(--utility-blue-500);
    --accent-record-shipment-bg: var(--utility-blue-50);
    --accent-record-order: var(--utility-green-600);
    --accent-record-order-bg: var(--utility-green-50);
    --accent-record-customer: var(--utility-cyan-600, var(--utility-blue-600));
    --accent-record-customer-bg: var(--utility-cyan-50,  var(--utility-blue-50));
    --accent-record-carrier: var(--utility-violet-600, var(--utility-purple-600, var(--utility-blue-600)));
    --accent-record-carrier-bg: var(--utility-violet-50,  var(--utility-purple-50,  var(--utility-blue-50)));
    --accent-record-warehouse: var(--utility-amber-700);
    --accent-record-warehouse-bg: var(--utility-amber-50);
    --accent-record-appointment: var(--utility-teal-600, var(--utility-green-600));
    --accent-record-appointment-bg: var(--utility-teal-50,  var(--utility-green-50));
    --accent-record-yard: var(--utility-orange-600);
    --accent-record-yard-bg: var(--utility-orange-50);
    --accent-record-invoice: var(--utility-neutral-700);
    --accent-record-invoice-bg: var(--utility-neutral-100);
    --accent-record-claim: var(--utility-red-600);
    --accent-record-claim-bg: var(--utility-red-50);
    --accent-record-handlingunit: var(--utility-pink-600);
    --accent-record-handlingunit-bg: var(--utility-pink-50);
    --accent-record-transportation: var(--utility-indigo-600, var(--utility-blue-700));
    --accent-record-transportation-bg: var(--utility-indigo-50, var(--utility-blue-50));
    --accent-record-document: var(--utility-neutral-600);
    --accent-record-document-bg: var(--utility-neutral-100);
    --accent-record-photo: var(--utility-fuchsia-600, var(--utility-pink-600));
    --accent-record-photo-bg: var(--utility-fuchsia-50,  var(--utility-pink-50));
    --accent-record-event: var(--utility-neutral-500);
    --accent-record-event-bg: var(--utility-neutral-100);
    --bg-carrier-agreement-panel: var(--bg-surface);
    --bg-rate-matrix-cell: var(--bg-surface);
    --bg-rate-matrix-cell-dirty: var(--utility-amber-50);
    --bg-rate-matrix-cell-empty: var(--utility-neutral-50);
    --border-rate-cell-active: var(--utility-blue-500);
    --text-rate-matrix-muted: var(--utility-neutral-500);
  }
  [data-density="compact"] {
    --density-factor: 0.75;
    --space-list-item-y: 0.375rem;
    --space-list-item-x: 0.75rem;
    --padding-tag-y: 2px;
    --padding-tag-x: 6px;
    --space-table-cell-y: 0.25rem;
    --space-table-cell-x: 0.5rem;
    --space-form-group-y: 0.375rem;
    --space-toolbar-y: 0.25rem;
    --space-toolbar-x: 0.5rem;
    --space-card-y: 0.5rem;
    --space-card-x: 0.75rem;
  }
  [data-density="spacious"] {
    --density-factor: 1.25;
    --space-list-item-y: 0.75rem;
    --space-list-item-x: 1.25rem;
    --padding-tag-y: 6px;
    --padding-tag-x: 14px;
    --space-table-cell-y: 0.625rem;
    --space-table-cell-x: 1rem;
    --space-form-group-y: 1rem;
    --space-toolbar-y: 0.5rem;
    --space-toolbar-x: 1rem;
    --space-card-y: 1.25rem;
    --space-card-x: 1.5rem;
  }
  [data-contrast="high"] {
    --text-primary: oklch(0% 0 0);
    --text-secondary: oklch(15% 0 0);
    --text-tertiary: oklch(25% 0 0);
    --text-quaternary: oklch(35% 0 0);
    --border-primary: oklch(30% 0 0);
    --border-input: oklch(20% 0 0);
    --border-input-hover: oklch(10% 0 0);
    --border-card: oklch(30% 0 0);
    --border-table: oklch(30% 0 0);
  }
  [data-accent="purple"] {
    --bg-primary-solid: var(--utility-purple-600);
    --bg-primary-solid-hover: var(--utility-purple-700);
    --bg-primary-solid-active: var(--utility-purple-800);
    --border-primary-solid: var(--utility-purple-600);
    --text-link: var(--utility-purple-600);
    --text-link-hover: var(--utility-purple-700);
  }
  [data-accent="teal"] {
    --bg-primary-solid: var(--utility-teal-600);
    --bg-primary-solid-hover: var(--utility-teal-700);
    --bg-primary-solid-active: var(--utility-teal-800);
    --border-primary-solid: var(--utility-teal-600);
    --text-link: var(--utility-teal-600);
    --text-link-hover: var(--utility-teal-700);
  }
  [data-accent="green"] {
    --bg-primary-solid: var(--utility-green-600);
    --bg-primary-solid-hover: var(--utility-green-700);
    --bg-primary-solid-active: var(--utility-green-800);
    --border-primary-solid: var(--utility-green-600);
    --text-link: var(--utility-green-600);
    --text-link-hover: var(--utility-green-700);
  }
  [data-accent="orange"] {
    --bg-primary-solid: var(--utility-orange-600);
    --bg-primary-solid-hover: var(--utility-orange-700);
    --bg-primary-solid-active: var(--utility-orange-800);
    --border-primary-solid: var(--utility-orange-600);
    --text-link: var(--utility-orange-600);
    --text-link-hover: var(--utility-orange-700);
  }
  [data-accent="pink"] {
    --bg-primary-solid: var(--utility-pink-600);
    --bg-primary-solid-hover: var(--utility-pink-700);
    --bg-primary-solid-active: var(--utility-pink-800);
    --border-primary-solid: var(--utility-pink-600);
    --text-link: var(--utility-pink-600);
    --text-link-hover: var(--utility-pink-700);
  }
  [data-theme="theme-light"], [data-theme="theme-mica-light"] {
    --text-ai-accent: var(--utility-violet-600);
    --text-ai-accent-strong: var(--utility-violet-700);
    --text-ai-on-accent: var(--alpha-white-100);
    --bg-ai-accent: var(--utility-violet-600);
    --bg-ai-accent-hover: var(--utility-violet-700);
    --bg-ai-surface: var(--bg-card);
    --bg-ai-surface-subtle: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-surface-subtle: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-surface-active: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-surface-active: color-mix(in oklch, var(--text-primary) 8%, var(--bg-card));
    }
    --bg-ai-input: var(--bg-input);
    --bg-ai-panel: var(--bg-card);
    --bg-ai-dock: var(--bg-card);
    --bg-ai-canvas: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-canvas: color-mix(in oklch, var(--text-primary) 3%, var(--bg-surface));
    }
    --bg-ai-generated: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-generated: color-mix(in oklch, var(--text-primary) 3%, var(--bg-card));
    }
    --bg-ai-message: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-message: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-message-user: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-message-user: color-mix(in oklch, var(--text-primary) 8%, var(--bg-card));
    }
    --bg-ai-tool: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-tool: color-mix(in oklch, var(--text-primary) 3%, var(--bg-card));
    }
    --bg-ai-tool-result: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-tool-result: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-context: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-context: color-mix(in oklch, var(--text-primary) 3%, var(--bg-card));
    }
    --bg-ai-memory: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-memory: color-mix(in oklch, var(--text-primary) 3%, var(--bg-card));
    }
    --bg-ai-chip: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-chip: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-chip-hover: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-chip-hover: color-mix(in oklch, var(--text-primary) 9%, var(--bg-card));
    }
    --bg-ai-badge: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-badge: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
    --bg-ai-thinking: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-thinking: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-streaming: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-streaming: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-approval: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-approval: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-success-subtle: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-success-subtle: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-warning-subtle: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-warning-subtle: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-error-subtle: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-error-subtle: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-console: var(--utility-neutral-800);
    --bg-ai-console-header: var(--utility-neutral-750);
    --bg-ai-skeleton: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-skeleton: color-mix(in oklch, var(--text-primary) 7%, var(--bg-surface));
    }
    --bg-ai-skeleton-shine: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-skeleton-shine: color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
    --text-ai-primary: var(--text-primary);
    --text-ai-secondary: var(--text-secondary);
    --text-ai-muted: var(--text-tertiary);
    --text-ai-placeholder: var(--text-input-placeholder);
    --text-ai-thinking: var(--utility-violet-600);
    --text-ai-streaming: var(--utility-blue-600);
    --text-ai-success: var(--text-success);
    --text-ai-warning: var(--text-warning);
    --text-ai-error: var(--text-danger);
    --text-ai-console: var(--utility-neutral-100);
    --text-ai-console-muted: var(--utility-neutral-400);
    --text-ai-console-prompt: var(--utility-teal-400);
    --text-ai-citation: var(--utility-blue-600);
    --text-ai-confidence-high: var(--utility-green-600);
    --text-ai-confidence-med: var(--utility-yellow-600);
    --text-ai-confidence-low: var(--utility-neutral-500);
    --border-ai-surface: var(--border-default);
    --border-ai-subtle: var(--border-divider);
    --border-ai-input: var(--border-input);
    --border-ai-input-hover: var(--border-input-hover);
    --border-ai-panel: var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-panel: color-mix(in oklch, var(--utility-violet-500) 20%, var(--border-default));
    }
    --border-ai-thinking: var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-thinking: color-mix(in oklch, var(--utility-violet-500) 45%, transparent);
    }
    --border-ai-streaming: var(--utility-blue-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-streaming: color-mix(in oklch, var(--utility-blue-500) 40%, transparent);
    }
    --border-ai-approval: var(--utility-yellow-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-approval: color-mix(in oklch, var(--utility-yellow-500) 48%, transparent);
    }
    --border-ai-tool: var(--utility-indigo-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-tool: color-mix(in oklch, var(--utility-indigo-500) 32%, transparent);
    }
    --border-ai-context: var(--utility-blue-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-context: color-mix(in oklch, var(--utility-blue-500) 26%, transparent);
    }
    --border-ai-generated: var(--utility-indigo-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-generated: color-mix(in oklch, var(--utility-indigo-500) 36%, transparent);
    }
    --border-ai-success: var(--utility-green-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-success: color-mix(in oklch, var(--utility-green-500) 40%, transparent);
    }
    --border-ai-warning: var(--utility-yellow-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-warning: color-mix(in oklch, var(--utility-yellow-500) 48%, transparent);
    }
    --border-ai-error: var(--utility-red-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-error: color-mix(in oklch, var(--utility-red-500) 42%, transparent);
    }
    --border-ai-console: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-console: color-mix(in oklch, var(--utility-neutral-100) 14%, transparent);
    }
    --border-ai-focus: var(--border-focus);
    --gradient-ai-accent: linear-gradient(120deg, var(--utility-violet-500), var(--utility-blue-500));
    --gradient-ai-active: linear-gradient(120deg, var(--utility-violet-500), var(--utility-blue-500) 55%, var(--utility-cyan-400));
    --gradient-ai-thinking: linear-gradient(120deg, var(--utility-violet-500), var(--utility-indigo-500) 38%, var(--utility-blue-500) 68%, var(--utility-violet-500));
    --gradient-ai-streaming: linear-gradient(120deg, var(--utility-blue-500), var(--utility-cyan-400) 50%, var(--utility-blue-500));
    --gradient-ai-border: linear-gradient(130deg, var(--utility-violet-500), var(--utility-blue-500));
    @supports (color: color-mix(in lab, red, red)) {
      --gradient-ai-border: linear-gradient(130deg, color-mix(in oklch, var(--utility-violet-500) 70%, transparent), color-mix(in oklch, var(--utility-blue-500) 60%, transparent));
    }
    --gradient-ai-glow: radial-gradient(120% 120% at 50% 0%, var(--utility-violet-500), transparent 70%);
    @supports (color: color-mix(in lab, red, red)) {
      --gradient-ai-glow: radial-gradient(120% 120% at 50% 0%, color-mix(in oklch, var(--utility-violet-500) 18%, transparent), transparent 70%);
    }
    --gradient-ai-generated: linear-gradient(130deg, var(--utility-indigo-500), var(--utility-teal-500));
    @supports (color: color-mix(in lab, red, red)) {
      --gradient-ai-generated: linear-gradient(130deg, color-mix(in oklch, var(--utility-indigo-500) 55%, transparent), color-mix(in oklch, var(--utility-teal-500) 45%, transparent));
    }
    --gradient-ai-success: linear-gradient(120deg, var(--utility-green-500), var(--utility-teal-500));
    --gradient-ai-error: linear-gradient(120deg, var(--utility-red-500), var(--utility-orange-500));
    --gradient-ai-aurora: conic-gradient(from 0deg, var(--utility-violet-500), var(--utility-blue-500), var(--utility-cyan-400), var(--utility-teal-400), var(--utility-fuchsia-500), var(--utility-indigo-500), var(--utility-violet-500));
    --gradient-ai-orb: radial-gradient(circle at 35% 28%, var(--utility-cyan-400), var(--utility-blue-500) 42%, var(--utility-violet-600) 82%);
    --bg-ai-orb-sheen: var(--utility-neutral-50);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-orb-sheen: color-mix(in oklch, var(--utility-neutral-50) 60%, transparent);
    }
    --gradient-ai-skeleton: linear-gradient(90deg, transparent, var(--bg-ai-skeleton-shine), transparent);
    --glow-ai-thinking: var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      --glow-ai-thinking: color-mix(in oklch, var(--utility-violet-500) 38%, transparent);
    }
    --glow-ai-active: var(--utility-blue-500);
    @supports (color: color-mix(in lab, red, red)) {
      --glow-ai-active: color-mix(in oklch, var(--utility-blue-500) 34%, transparent);
    }
    --shadow-ai-panel: 0 10px 30px -16px var(--utility-violet-700);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-panel: 0 10px 30px -16px color-mix(in oklch, var(--utility-violet-700) 40%, transparent);
    }
    --shadow-ai-dock: -8px 0 40px -22px var(--utility-violet-700);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-dock: -8px 0 40px -22px color-mix(in oklch, var(--utility-violet-700) 35%, transparent);
    }
    --shadow-ai-thinking: 0 0 0 1px var(--utility-violet-500), 0 0 26px -4px var(--glow-ai-thinking);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-thinking: 0 0 0 1px color-mix(in oklch, var(--utility-violet-500) 18%, transparent), 0 0 26px -4px var(--glow-ai-thinking);
    }
    --shadow-ai-active: 0 0 0 1px var(--utility-blue-500), 0 0 24px -6px var(--glow-ai-active);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-active: 0 0 0 1px color-mix(in oklch, var(--utility-blue-500) 18%, transparent), 0 0 24px -6px var(--glow-ai-active);
    }
    --shadow-ai-generated: 0 8px 30px -18px var(--utility-indigo-600);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-generated: 0 8px 30px -18px color-mix(in oklch, var(--utility-indigo-600) 45%, transparent);
    }
    --shadow-ai-approval: 0 8px 26px -16px var(--utility-yellow-700);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-approval: 0 8px 26px -16px color-mix(in oklch, var(--utility-yellow-700) 40%, transparent);
    }
    --shadow-ai-console: 0 16px 50px -24px var(--alpha-black-60);
    --ring-ai-focus: inset 0 0 0 2px var(--border-focus);
    --ring-ai-active: 0 0 0 1px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-ai-active: 0 0 0 1px color-mix(in oklch, var(--border-focus) 50%, transparent);
    }
    --ring-ai-prompt: 0 0 0 3px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-ai-prompt: 0 0 0 3px color-mix(in oklch, var(--border-focus) 15%, transparent);
    }
    --bg-ai-diff-add: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-add: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-diff-del: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-del: color-mix(in oklch, var(--text-primary) 6%, var(--bg-card));
    }
    --bg-ai-diff-add-word: var(--utility-green-500);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-add-word: color-mix(in oklch, var(--utility-green-500) 30%, transparent);
    }
    --bg-ai-diff-del-word: var(--utility-red-500);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-del-word: color-mix(in oklch, var(--utility-red-500) 28%, transparent);
    }
    --bg-ai-diff-hunk: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-hunk: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-diff-gutter: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-gutter: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --text-ai-diff-add: var(--utility-green-700);
    --text-ai-diff-del: var(--utility-red-700);
    --text-ai-diff-gutter: var(--text-ai-muted);
    --text-ai-diff-hunk: var(--text-ai-citation);
    --border-ai-diff-add: var(--border-ai-success);
    --border-ai-diff-del: var(--border-ai-error);
    --text-ai-console-warn: var(--utility-amber-400);
    --text-ai-console-info: var(--utility-blue-300);
    --text-ai-console-debug: var(--utility-violet-300);
    --text-ai-console-sys: var(--utility-neutral-500);
    --text-ai-console-cmt: var(--utility-green-400);
    --text-ai-console-tool: var(--utility-cyan-300);
    --bg-ai-console-gutter: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-console-gutter: color-mix(in oklch, var(--utility-neutral-100) 6%, transparent);
    }
    --text-ai-console-gutter: var(--utility-neutral-500);
    --bg-ai-console-footer: var(--utility-neutral-750);
    --bg-ai-console-selection: var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-console-selection: color-mix(in oklch, var(--utility-violet-400) 35%, transparent);
    }
    --bg-ai-console-active: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-console-active: color-mix(in oklch, var(--utility-neutral-100) 4%, transparent);
    }
    --bg-ai-console-light: var(--utility-neutral-50);
    --text-ai-console-light: var(--utility-neutral-800);
    --border-ai-console-light: var(--border-default);
    --bg-ai-progress-track: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-progress-track: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    --gradient-ai-progress: var(--gradient-ai-active);
    --bg-ai-confidence-track: var(--text-ai-muted);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-confidence-track: color-mix(in oklch, var(--text-ai-muted) 22%, transparent);
    }
    --text-ai-ghost: var(--text-ai-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --text-ai-ghost: color-mix(in oklch, var(--text-ai-accent) 55%, var(--text-ai-muted));
    }
    --bg-ai-inline: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-inline: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
    --border-ai-inline: var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-inline: color-mix(in oklch, var(--utility-violet-500) 30%, transparent);
    }
  }
  [data-theme="theme-light"], [data-theme="theme-mica-light"] {
    --bg-a2ui: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-a2ui: color-mix(in oklch, var(--text-primary) 3%, var(--bg-surface));
    }
    --bg-a2ui-panel: var(--bg-card);
    --bg-a2ui-surface: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-a2ui-surface: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-a2ui-hover: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-a2ui-hover: color-mix(in oklch, var(--text-primary) 7%, var(--bg-card));
    }
    --bg-a2ui-active: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-a2ui-active: color-mix(in oklch, var(--text-primary) 10%, var(--bg-card));
    }
    --border-a2ui: var(--border-default);
    --border-a2ui-subtle: var(--border-divider);
    --text-a2ui: var(--text-primary);
    --text-a2ui-muted: var(--text-tertiary);
    --shadow-a2ui: 0 10px 30px -18px var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-a2ui: 0 10px 30px -18px color-mix(in oklch, var(--utility-violet-500) 35%, transparent);
    }
    --shadow-a2ui-hover: 0 14px 38px -16px var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-a2ui-hover: 0 14px 38px -16px color-mix(in oklch, var(--utility-violet-500) 45%, transparent);
    }
    --ring-a2ui: 0 0 0 3px var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-a2ui: 0 0 0 3px color-mix(in oklch, var(--utility-violet-500) 18%, transparent);
    }
  }
  [data-theme="theme-light"], [data-theme="theme-mica-light"] {
    --bg-labs: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-labs: color-mix(in oklch, var(--text-primary) 3%, var(--bg-primary));
    }
    --bg-labs-panel: var(--bg-card);
    --bg-labs-surface: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-labs-surface: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-labs-hover: var(--bg-menu-hover);
    --bg-labs-active: var(--bg-menu-active);
    --bg-labs-canvas: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-labs-canvas: color-mix(in oklch, var(--text-primary) 5%, var(--bg-primary));
    }
    --dot-labs: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --dot-labs: color-mix(in oklch, var(--text-primary) 16%, transparent);
    }
    --bg-labs-frame: var(--bg-card);
    --border-labs: var(--border-primary-subtle);
    --border-labs-subtle: var(--border-divider);
    --text-labs: var(--text-primary);
    --text-labs-muted: var(--text-tertiary);
    --text-labs-accent: var(--text-info);
    --shadow-labs-frame: 0 1px 3px var(--text-primary), 0 8px 24px -12px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-labs-frame: 0 1px 3px color-mix(in oklch, var(--text-primary) 12%, transparent), 0 8px 24px -12px color-mix(in oklch, var(--text-primary) 18%, transparent);
    }
    --ring-labs: 0 0 0 2px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-labs: 0 0 0 2px color-mix(in oklch, var(--text-info) 70%, transparent);
    }
    --ring-labs-soft: 0 0 0 3px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-labs-soft: 0 0 0 3px color-mix(in oklch, var(--text-info) 20%, transparent);
    }
  }
  [data-theme="theme-light"], [data-theme="theme-mica-light"] {
    --border-primary: var(--utility-neutral-300);
    --bg-primary-solid: var(--color-brand-600);
    --theme-light-primary-swatch: var(--color-brand-600);
    --bg-button-primary: var(--color-brand-600);
    --bg-button-primary-hover: color-mix(in srgb, oklch(78.0% 0.157 84), black 10%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-button-primary-hover: color-mix(in oklch, var(--color-brand-600), black 10%);
    }
    --bg-button-primary-active: color-mix(in srgb, oklch(78.0% 0.157 84), black 20%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-button-primary-active: color-mix(in oklch, var(--color-brand-600), black 20%);
    }
    --bg-brand-solid-hover: color-mix(in srgb, oklch(78.0% 0.157 84), black 10%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-brand-solid-hover: color-mix(in oklch, var(--color-brand-600), black 10%);
    }
    --bg-brand-solid-active: color-mix(in srgb, oklch(78.0% 0.157 84), black 20%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-brand-solid-active: color-mix(in oklch, var(--color-brand-600), black 20%);
    }
    --text-on-brand: var(--color-neutral-900);
    --text-button-primary: var(--color-neutral-900);
    --text-on-brand-section: var(--color-white);
    --text-primary-solid: var(--color-brand-700);
    --border-focus: var(--utility-blue-500);
    --border-brand: var(--color-brand-700);
    --border-tab-accent: var(--color-brand-700);
    --bg-primary: var(--alpha-white-100);
    --bg-primary-alt: var(--alpha-white-100);
    --bg-primary-hover: var(--utility-neutral-100);
    --bg-secondary: var(--utility-neutral-50);
    --bg-secondary-alt: var(--utility-neutral-50);
    --bg-secondary-hover: var(--utility-neutral-100);
    --bg-tertiary: var(--utility-neutral-100);
    --bg-tertiary-alt: var(--utility-neutral-200);
    --bg-tertiary-hover: var(--utility-neutral-200);
    --bg-quaternary: var(--utility-neutral-200);
    --bg-quaternary-alt: var(--utility-neutral-300);
    --bg-quaternary-hover: var(--utility-neutral-300);
    --border-input-active: var(--border-focus);
    --bg-studio-canvas: var(--color-white);
    --bg-sidebar-item-accent: var(--utility-yellow-500);
    --text-drawer: var(--text-primary);
    --border-drawer: var(--border-primary);
    --bg-drawer: var(--alpha-white-100);
    --bg-banner: var(--bg-secondary);
    --ring-banner: var(--border-secondary-alt);
    --border-banner-edge: var(--border-primary);
    --text-banner-title: var(--text-secondary);
    --text-banner-body: var(--text-tertiary);
    --decoration-banner-link: var(--utility-neutral-300);
    --icon-banner: var(--text-icon-brand);
    --bg-banner-divider: var(--border-secondary);
    --bg-banner-unit: var(--bg-primary);
    --ring-banner-unit: var(--border-primary);
    --text-banner-unit: var(--text-primary);
    --bg-banner-brand: var(--color-brand-700);
    --border-banner-brand: var(--color-brand-600);
    --text-banner-brand-title: var(--color-white);
    --text-banner-brand-body: var(--color-brand-200);
    --decoration-banner-brand-link: var(--color-brand-500);
    --bg-banner-brand-divider: rgb(255 255 255 / 0.2);
    --ring-banner-brand-unit: var(--color-brand-500);
    --bg-banner-brand-icon: rgb(255 255 255 / 0.1);
    --ring-banner-brand-icon: rgb(255 255 255 / 0.3);
    --text-banner-brand-icon: var(--color-white);
  }
  [data-theme="theme-light"][data-contrast="high"], [data-theme="theme-mica-light"][data-contrast="high"] {
    --border-primary: oklch(30% 0 0);
  }
  [data-theme="theme-mica-light"] {
    --canvas-primary: oklch(97% 0.005 250 / 0.85);
    --canvas-secondary: oklch(100% 0 0 / 0.8);
    --bg-surface: oklch(100% 0 0 / 0.78);
    --bg-body: oklch(98% 0.003 250 / 0.75);
    --bg-card: oklch(100% 0 0 / 0.72);
    --bg-sidebar: oklch(97% 0.005 250 / 0.82);
    --bg-dropdown: oklch(100% 0 0 / 0.88);
    --bg-modal: oklch(100% 0 0 / 0.92);
    --bg-popover: oklch(100% 0 0 / 0.88);
    --bg-command-palette: oklch(100% 0 0 / 0.92);
    --bg-mica-tint: oklch(97% 0.005 250);
  }
}
@layer utilities {
  .floating-appointment {
    border-color: var(--border-warning);
  }
  [data-theme="theme-dark"], [data-theme="theme-mica-dark"] {
    --scroll-thumb: var(--utility-neutral-700);
    --scroll-track: var(--utility-neutral-850);
    --canvas-primary: var(--utility-neutral-900);
    --canvas-secondary: var(--utility-neutral-950);
    --bg-alpha-0: var(--alpha-0);
    --text-primary: var(--utility-neutral-100);
    --text-primary-alt: var(--utility-neutral-200);
    --text-primary-hover: var(--utility-neutral-50);
    --text-primary-subtle: var(--utility-neutral-300);
    --text-primary-solid: var(--utility-blue-400);
    --text-secondary: var(--utility-neutral-300);
    --text-secondary-alt: var(--utility-neutral-200);
    --text-secondary-hover: var(--utility-neutral-200);
    --text-secondary-subtle: var(--utility-neutral-400);
    --text-secondary-solid: var(--utility-neutral-200);
    --text-tertiary: var(--utility-neutral-400);
    --text-tertiary-alt: var(--utility-neutral-300);
    --text-tertiary-hover: var(--utility-neutral-300);
    --text-tertiary-subtle: var(--utility-neutral-500);
    --text-tertiary-solid: var(--utility-neutral-300);
    --text-quaternary: var(--utility-neutral-400);
    --text-quaternary-alt: var(--utility-neutral-400);
    --text-quaternary-hover: var(--utility-neutral-400);
    --text-quaternary-subtle: var(--utility-neutral-600);
    --text-quaternary-solid: var(--utility-neutral-400);
    --text-disabled: var(--utility-neutral-500);
    --text-placeholder: var(--utility-neutral-400);
    --text-detail-section-title: var(--utility-neutral-200);
    --text-danger: var(--utility-red-300);
    --text-danger-strong: var(--text-danger);
    --text-danger-alt: var(--utility-red-400);
    --text-danger-hover: var(--utility-red-200);
    --text-danger-subtle: var(--utility-red-500);
    --text-danger-solid: var(--utility-red-100);
    --text-warning: var(--utility-amber-300);
    --text-warning-strong: var(--text-warning);
    --text-warning-alt: var(--utility-amber-400);
    --text-warning-hover: var(--utility-amber-200);
    --text-warning-subtle: var(--utility-amber-500);
    --text-warning-solid: var(--utility-amber-100);
    --text-success: var(--utility-green-300);
    --text-success-strong: var(--text-success);
    --text-success-alt: var(--utility-green-400);
    --text-success-hover: var(--utility-green-200);
    --text-success-subtle: var(--utility-green-500);
    --text-success-solid: var(--utility-green-100);
    --text-info: var(--utility-blue-300);
    --text-info-alt: var(--utility-blue-400);
    --text-info-hover: var(--utility-blue-200);
    --text-info-subtle: var(--utility-blue-500);
    --text-info-solid: var(--utility-blue-100);
    --text-purple: var(--utility-purple-300);
    --text-purple-alt: var(--utility-purple-400);
    --text-purple-hover: var(--utility-purple-200);
    --text-purple-subtle: var(--utility-purple-500);
    --text-purple-solid: var(--utility-purple-100);
    --text-indigo: var(--utility-indigo-300);
    --text-indigo-alt: var(--utility-indigo-400);
    --text-indigo-hover: var(--utility-indigo-200);
    --text-indigo-subtle: var(--utility-indigo-500);
    --text-indigo-solid: var(--utility-indigo-100);
    --text-teal: var(--utility-teal-300);
    --text-teal-alt: var(--utility-teal-400);
    --text-teal-hover: var(--utility-teal-200);
    --text-teal-subtle: var(--utility-teal-500);
    --text-teal-solid: var(--utility-teal-100);
    --text-pink: var(--utility-pink-300);
    --text-pink-alt: var(--utility-pink-400);
    --text-pink-hover: var(--utility-pink-200);
    --text-pink-subtle: var(--utility-pink-500);
    --text-pink-solid: var(--utility-pink-100);
    --text-mint: var(--utility-mint-300);
    --text-mint-alt: var(--utility-mint-400);
    --text-mint-hover: var(--utility-mint-200);
    --text-mint-subtle: var(--utility-mint-500);
    --text-mint-solid: var(--utility-mint-100);
    --text-icon: var(--text-secondary);
    --text-icon-primary: var(--text-primary);
    --text-icon-secondary: var(--text-secondary);
    --text-icon-tertiary: var(--text-tertiary);
    --text-icon-quaternary: var(--text-quaternary);
    --text-icon-light: var(--text-tertiary);
    --text-icon-dark: var(--text-primary);
    --text-icon-disabled: var(--text-disabled);
    --text-icon-brand: var(--color-brand-300);
    --text-icon-success: var(--text-success);
    --text-icon-warning: var(--text-warning);
    --text-icon-danger: var(--text-danger);
    --text-icon-info: var(--text-info);
    --text-icon-purple: var(--text-purple);
    --text-icon-indigo: var(--text-indigo);
    --text-icon-pink: var(--text-pink);
    --text-icon-teal: var(--text-teal);
    --text-icon-mint: var(--text-mint);
    --border-primary: var(--utility-neutral-700);
    --border-primary-alt: var(--utility-neutral-700);
    --border-primary-hover: var(--utility-neutral-700);
    --border-primary-subtle: var(--utility-neutral-900);
    --border-primary-solid: var(--utility-neutral-600);
    --border-secondary: var(--utility-neutral-800);
    --border-secondary-alt: var(--utility-neutral-700);
    --border-secondary-hover: var(--utility-neutral-600);
    --border-secondary-subtle: var(--utility-neutral-900);
    --border-secondary-solid: var(--utility-neutral-600);
    --border-tertiary: var(--utility-neutral-600);
    --border-tertiary-alt: var(--utility-neutral-600);
    --border-tertiary-hover: var(--utility-neutral-600);
    --border-tertiary-subtle: var(--utility-neutral-700);
    --border-tertiary-solid: var(--utility-neutral-400);
    --border-quaternary: var(--utility-neutral-500);
    --border-quaternary-alt: var(--utility-neutral-400);
    --border-quaternary-hover: var(--utility-neutral-400);
    --border-quaternary-subtle: var(--utility-neutral-600);
    --border-quaternary-solid: var(--utility-neutral-300);
    --border-danger: var(--utility-red-500);
    --border-danger-alt: var(--utility-red-400);
    --border-danger-hover: var(--utility-red-600);
    --border-danger-subtle: var(--utility-red-700);
    --border-danger-solid: var(--utility-red-300);
    --border-warning: var(--utility-yellow-500);
    --border-warning-alt: var(--utility-yellow-400);
    --border-warning-hover: var(--utility-yellow-600);
    --border-warning-subtle: var(--utility-yellow-700);
    --border-warning-solid: var(--utility-yellow-300);
    --border-success: var(--utility-green-500);
    --border-success-alt: var(--utility-green-400);
    --border-success-hover: var(--utility-green-600);
    --border-success-subtle: var(--utility-green-700);
    --border-success-solid: var(--utility-green-300);
    --border-info: var(--utility-blue-500);
    --border-info-alt: var(--utility-blue-400);
    --border-info-hover: var(--utility-blue-600);
    --border-info-subtle: var(--utility-blue-700);
    --border-info-solid: var(--utility-blue-300);
    --border-purple: var(--utility-purple-500);
    --border-purple-alt: var(--utility-purple-400);
    --border-purple-hover: var(--utility-purple-600);
    --border-purple-subtle: var(--utility-purple-700);
    --border-purple-solid: var(--utility-purple-300);
    --border-indigo: var(--utility-indigo-500);
    --border-indigo-alt: var(--utility-indigo-400);
    --border-indigo-hover: var(--utility-indigo-600);
    --border-indigo-subtle: var(--utility-indigo-700);
    --border-indigo-solid: var(--utility-indigo-300);
    --border-teal: var(--utility-teal-500);
    --border-teal-alt: var(--utility-teal-400);
    --border-teal-hover: var(--utility-teal-600);
    --border-teal-subtle: var(--utility-teal-700);
    --border-teal-solid: var(--utility-teal-300);
    --border-pink: var(--utility-pink-500);
    --border-pink-alt: var(--utility-pink-400);
    --border-pink-hover: var(--utility-pink-600);
    --border-pink-subtle: var(--utility-pink-700);
    --border-pink-solid: var(--utility-pink-300);
    --border-mint: var(--utility-mint-500);
    --bg-black: var(--utility-neutral-900);
    --bg-black-hover: var(--utility-neutral-800);
    --bg-primary: var(--utility-neutral-900);
    --bg-primary-alt: var(--utility-neutral-800);
    --bg-primary-hover: var(--utility-neutral-800);
    --bg-primary-subtle: var(--utility-neutral-950);
    --bg-primary-solid: var(--utility-blue-500);
    --bg-secondary: var(--utility-neutral-800);
    --bg-secondary-alt: var(--utility-neutral-700);
    --bg-secondary-hover: var(--utility-neutral-700);
    --bg-secondary-subtle: var(--utility-neutral-900);
    --bg-secondary-solid: var(--utility-neutral-200);
    --bg-tertiary: var(--utility-neutral-700);
    --bg-tertiary-alt: var(--utility-neutral-600);
    --bg-tertiary-hover: var(--utility-neutral-600);
    --bg-tertiary-subtle: var(--utility-neutral-800);
    --bg-tertiary-solid: var(--utility-neutral-300);
    --bg-quaternary: var(--utility-neutral-600);
    --bg-quaternary-alt: var(--utility-neutral-500);
    --bg-quaternary-hover: var(--utility-neutral-500);
    --bg-quaternary-subtle: var(--utility-neutral-700);
    --bg-quaternary-solid: var(--utility-neutral-400);
    --bg-overlay: var(--utility-neutral-950);
    --bg-map-scrim: color-mix(in srgb, var(--bg-overlay) 78%, transparent);
    --text-on-map-scrim: var(--utility-neutral-50);
    --bg-gray: var(--utility-neutral-400);
    --bg-gray-alt: var(--utility-neutral-300);
    --bg-gray-hover: var(--utility-neutral-500);
    --bg-gray-subtle: var(--utility-neutral-900);
    --bg-gray-solid: var(--utility-neutral-200);
    --bg-danger: var(--utility-red-400);
    --bg-danger-alt: var(--utility-red-300);
    --bg-danger-hover: var(--utility-red-500);
    --bg-danger-subtle: var(--utility-red-900);
    --bg-danger-solid: var(--utility-red-200);
    --bg-warning: var(--utility-yellow-400);
    --bg-warning-alt: var(--utility-yellow-300);
    --bg-warning-hover: var(--utility-yellow-500);
    --bg-warning-subtle: var(--utility-yellow-900);
    --bg-warning-solid: var(--utility-yellow-200);
    --bg-success: var(--utility-green-400);
    --bg-success-alt: var(--utility-green-300);
    --bg-success-hover: var(--utility-green-500);
    --bg-success-subtle: var(--utility-green-900);
    --bg-success-solid: var(--utility-green-200);
    --bg-info: var(--utility-blue-400);
    --bg-info-alt: var(--utility-blue-300);
    --bg-info-hover: var(--utility-blue-500);
    --bg-info-subtle: var(--utility-blue-900);
    --bg-info-solid: var(--utility-blue-200);
    --bg-purple: var(--utility-purple-400);
    --bg-purple-alt: var(--utility-purple-300);
    --bg-purple-hover: var(--utility-purple-500);
    --bg-purple-subtle: var(--utility-purple-900);
    --bg-purple-solid: var(--utility-purple-200);
    --bg-indigo: var(--utility-indigo-400);
    --bg-indigo-alt: var(--utility-indigo-300);
    --bg-indigo-hover: var(--utility-indigo-500);
    --bg-indigo-subtle: var(--utility-indigo-900);
    --bg-indigo-solid: var(--utility-indigo-200);
    --bg-teal: var(--utility-teal-400);
    --bg-teal-alt: var(--utility-teal-300);
    --bg-teal-hover: var(--utility-teal-500);
    --bg-teal-subtle: var(--utility-teal-900);
    --bg-teal-solid: var(--utility-teal-200);
    --bg-pink: var(--utility-pink-400);
    --bg-pink-alt: var(--utility-pink-300);
    --bg-pink-hover: var(--utility-pink-500);
    --bg-pink-subtle: var(--utility-pink-900);
    --bg-pink-solid: var(--utility-pink-200);
    --star-filled: var(--utility-yellow-400);
    --star-empty: var(--bg-tertiary);
    --star-filled-hover: var(--utility-yellow-300);
    --text-theme-label: var(--text-tertiary);
    --theme-light-base-swatch: var(--utility-neutral-900);
    --theme-light-primary-swatch: var(--utility-indigo-500);
    --theme-light-secondary-swatch: var(--utility-pink-400);
    --theme-light-accent-swatch: var(--utility-teal-400);
    --bg-theme-light-swatch: var(--alpha-white-100);
    --border-theme-light-swatch: var(--utility-neutral-200);
    --theme-dark-base-swatch: var(--utility-neutral-100);
    --theme-dark-primary-swatch: var(--utility-indigo-300);
    --theme-dark-secondary-swatch: var(--utility-pink-300);
    --theme-dark-accent-swatch: var(--utility-teal-300);
    --bg-theme-dark-swatch: var(--utility-neutral-900);
    --border-theme-dark-swatch: var(--utility-neutral-700);
    --width-sidebar-expanded: 240px;
    --bg-sidebar: var(--utility-neutral-950);
    --bg-sidebar-hover: var(--utility-neutral-850);
    --bg-sidebar-header: var(--alpha-0);
    --bg-sidebar-avatar: var(--utility-neutral-800);
    --border-sidebar: var(--utility-neutral-800);
    --border-sidebar-divider: var(--utility-neutral-900);
    --bg-sidebar-item-hover: var(--utility-neutral-800);
    --bg-sidebar-item-active: var(--utility-neutral-700);
    --bg-sidebar-item-active-hover: var(--utility-neutral-600);
    --text-sidebar: var(--text-primary);
    --text-sidebar-muted: var(--text-secondary);
    --text-sidebar-subtle: var(--text-quaternary);
    --bg-sidebar-dot-muted: var(--utility-neutral-600);
    --bg-sidebar-dot-active: var(--utility-neutral-100);
    --border-split: var(--border-secondary);
    --border-split-hover: var(--color-brand-400);
    --border-split-active: var(--color-brand-500);
    --width-menu-expanded: 224px;
    --width-menu-collapsed: 54px;
    --menu-indent: 12px;
    --bg-menu: var(--alpha-0);
    --bg-menu-hover: var(--utility-neutral-900);
    --bg-menu-active: var(--utility-neutral-800);
    --bg-menu-open: var(--utility-neutral-800);
    --bg-menu-dot: var(--utility-neutral-500);
    --bg-menu-dot-muted: var(--utility-neutral-500);
    --bg-menu-dot-active: var(--utility-neutral-100);
    --bg-menu-badge: var(--utility-neutral-700);
    --text-menu-badge: var(--utility-neutral-50);
    --bg-menu-badge-muted: var(--utility-neutral-800);
    --text-menu-badge-muted: var(--utility-neutral-400);
    --text-menu: var(--alpha-white-100);
    --text-menu-strong: var(--alpha-white-100);
    --text-menu-hover: var(--alpha-white-100);
    --text-menu-active: var(--alpha-white-100);
    --text-menu-muted: var(--utility-neutral-400);
    --border-menu: var(--alpha-0);
    --border-menu-muted: var(--alpha-0);
    --icon-menu: var(--utility-neutral-300);
    --icon-menu-muted: var(--utility-neutral-400);
    --focus-menu: var(--alpha-0);
    --text-page-header: var(--text-primary);
    --text-page-title: var(--text-primary);
    --text-breadcrumb: var(--text-tertiary);
    --text-breadcrumb-separator: var(--text-tertiary-alt);
    --bg-page-header: var(--alpha-0);
    --bg-page-header-hover: var(--bg-secondary-alt);
    --bg-breadcrumb: var(--alpha-0);
    --bg-breadcrumb-hover: var(--bg-secondary);
    --border-breadcrumb: var(--alpha-0);
    --text-breadcrumb-item: var(--text-quaternary);
    --text-breadcrumb-item-hover: var(--text-secondary);
    --text-breadcrumb-current: var(--text-link);
    --text-breadcrumb-strong: var(--text-primary);
    --fg-breadcrumb-icon: var(--text-quaternary);
    --fg-breadcrumb-icon-current: var(--text-link);
    --fg-breadcrumb-divider: var(--utility-neutral-600);
    --bg-breadcrumb-item-hover: var(--bg-primary-hover);
    --border-breadcrumb-line: var(--border-secondary);
    --border-breadcrumb-avatar: var(--border-secondary);
    --bg-tab: var(--alpha-0);
    --bg-tab-hover: var(--alpha-0);
    --text-tab: var(--utility-neutral-400);
    --text-tab-hover: var(--utility-neutral-50);
    --text-tab-active: var(--utility-neutral-50);
    --border-tab: var(--alpha-0);
    --border-tab-hover: var(--utility-neutral-400);
    --border-tab-active: var(--utility-neutral-300);
    --text-tab-badge: var(--utility-neutral-50);
    --bg-tab-ribbon: var(--utility-neutral-900);
    --bg-tab-ribbon-hover: var(--utility-neutral-800);
    --bg-tab-ribbon-item: var(--alpha-0);
    --bg-tab-ribbon-active: var(--utility-neutral-700);
    --text-tab-ribbon: var(--utility-neutral-200);
    --text-tab-ribbon-active: var(--utility-neutral-50);
    --border-tab-ribbon: var(--utility-neutral-700);
    --bg-tab-menu-hover: var(--utility-neutral-800);
    --bg-tab-menu-active: var(--utility-neutral-800);
    --text-tab-menu: var(--utility-neutral-300);
    --text-tab-menu-hover: var(--utility-neutral-50);
    --text-tab-menu-active: var(--utility-neutral-50);
    --bg-tab-browser: var(--alpha-0);
    --border-tab-browser: var(--utility-neutral-700);
    --bg-tab-browser-item: var(--alpha-0);
    --bg-tab-browser-hover: var(--utility-neutral-800);
    --bg-tab-browser-active: var(--utility-neutral-800);
    --text-tab-browser: var(--utility-neutral-300);
    --text-tab-browser-hover: var(--utility-neutral-50);
    --text-tab-browser-active: var(--utility-neutral-50);
    --border-tab-browser-hover: var(--utility-neutral-600);
    --bg-tab-browser-divider: var(--utility-neutral-700);
    --text-tab-rest: var(--text-tab);
    --text-tab-rest-hover: var(--text-secondary);
    --text-tab-accent: var(--color-brand-300);
    --border-tab-accent: var(--color-brand-400);
    --bg-tab-accent-active: var(--color-brand-950);
    --text-tab-neutral-active: var(--text-secondary);
    --bg-tab-neutral-active: var(--bg-primary-hover);
    --bg-tab-track: var(--bg-tab-ribbon);
    --border-tab-track: var(--border-tab-ribbon);
    --bg-tab-raised-active: var(--bg-tab-ribbon-active);
    --border-tab-hairline: var(--border-secondary);
    --ring-tab-focus: var(--border-focus);
    --bg-toolbar: var(--alpha-0);
    --border-toolbar: var(--border-primary-subtle);
    --text-toolbar: var(--text-tertiary);
    --text-toolbar-strong: var(--text-primary);
    --text-toolbar-muted: var(--text-quaternary);
    --bg-toolbar-group: var(--alpha-0);
    --border-toolbar-group: var(--alpha-0);
    --border-toolbar-divider: var(--border-primary-subtle);
    --bg-toolbar-btn: var(--alpha-0);
    --bg-toolbar-btn-hover: var(--bg-secondary-subtle);
    --bg-toolbar-btn-active: var(--bg-secondary-subtle);
    --bg-toolbar-btn-selected: var(--bg-secondary);
    --border-toolbar-btn: var(--alpha-0);
    --border-toolbar-btn-hover: var(--border-primary);
    --border-toolbar-btn-selected: var(--border-primary);
    --text-toolbar-hover: var(--text-primary);
    --icon-toolbar: var(--text-tertiary);
    --icon-toolbar-hover: var(--text-primary);
    --bg-toolbar-badge: var(--utility-neutral-50);
    --text-toolbar-badge: var(--utility-neutral-950);
    --bg-toolbar-input: var(--alpha-0);
    --border-toolbar-input: var(--border-primary-subtle);
    --focus-toolbar: var(--border-focus);
    --bg-tray: var(--utility-neutral-800);
    --bg-tray-body: var(--utility-neutral-850);
    --bg-tray-header: var(--alpha-0);
    --bg-tray-footer: var(--alpha-0);
    --bg-tray-overlay: var(--alpha-neutral-950-20);
    --border-tray: var(--alpha-0);
    --border-tray-divider: var(--alpha-0);
    --text-tray: var(--alpha-white-100);
    --text-tray-muted: var(--utility-neutral-300);
    --text-tray-heading: var(--alpha-white-100);
    --icon-tray: var(--utility-neutral-200);
    --icon-tray-close: var(--utility-neutral-200);
    --bg-tray-close-hover: var(--utility-neutral-700);
    --icon-tray-pin: var(--text-tertiary);
    --bg-tray-pin-hover: var(--utility-neutral-850);
    --icon-tray-pin-active: var(--color-info);
    --bg-tray-pin-active: var(--bg-info-subtle);
    --border-tray-pin-active: transparent;
    --text-button-primary: var(--alpha-white-100);
    --bg-button-primary: var(--utility-neutral-100);
    --bg-button-primary-hover: var(--utility-neutral-300);
    --bg-button-primary-active: var(--utility-neutral-100);
    --border-button-primary: var(--alpha-0);
    --text-button-secondary: var(--text-primary);
    --bg-button-secondary: var(--alpha-0);
    --bg-button-secondary-hover: var(--utility-neutral-800);
    --bg-button-secondary-active: var(--utility-neutral-850);
    --bg-button-secondary-active-state: var(--utility-neutral-700);
    --border-button-secondary: var(--alpha-0);
    --text-button-soft: var(--text-primary);
    --bg-button-soft: var(--utility-neutral-800);
    --bg-button-soft-hover: var(--utility-neutral-700);
    --bg-button-soft-active: var(--utility-neutral-800);
    --border-button-soft: var(--alpha-0);
    --text-button-ghost: var(--text-primary);
    --bg-button-ghost: var(--alpha-0);
    --bg-button-ghost-hover: var(--utility-neutral-800);
    --bg-button-ghost-active: var(--utility-neutral-850);
    --border-button-ghost: var(--alpha-0);
    --text-button-link: var(--text-primary);
    --text-button-link-hover: var(--alpha-white-100);
    --text-button-light: var(--text-primary);
    --bg-button-light: var(--utility-neutral-800);
    --bg-button-light-hover: var(--utility-neutral-700);
    --bg-button-light-active: var(--utility-neutral-600);
    --border-button-light: var(--border-primary);
    --text-button-input: var(--text-primary);
    --bg-button-input: var(--utility-neutral-800);
    --bg-button-input-hover: var(--utility-neutral-700);
    --bg-button-input-active: var(--utility-neutral-800);
    --border-button-input: var(--alpha-0);
    --text-button-topbar: var(--text-primary);
    --bg-button-topbar: var(--alpha-0);
    --bg-button-topbar-hover: var(--utility-neutral-700);
    --bg-button-topbar-active: var(--utility-neutral-600);
    --border-button-topbar: var(--alpha-0);
    --border-button-topbar-hover: var(--alpha-0);
    --text-button-danger: var(--alpha-white-100);
    --bg-button-danger: var(--utility-red-600);
    --bg-button-danger-hover: var(--utility-red-500);
    --bg-button-danger-active: var(--utility-red-700);
    --border-button-danger: var(--alpha-0);
    --text-button-danger-outline: var(--utility-red-400);
    --bg-button-danger-outline: var(--alpha-0);
    --bg-button-danger-outline-hover: var(--alpha-red-900-50);
    --bg-button-danger-outline-active: var(--utility-red-950);
    --border-button-danger-outline: var(--alpha-0);
    --bg-button-warning: var(--utility-amber-600);
    --bg-button-warning-hover: var(--utility-amber-500);
    --bg-button-warning-active: var(--utility-amber-400);
    --text-button-warning: var(--utility-amber-950);
    --border-button-warning: var(--alpha-0);
    --text-button-warning-outline: var(--utility-amber-400);
    --bg-button-warning-outline: var(--alpha-0);
    --bg-button-warning-outline-hover: var(--alpha-amber-900-50);
    --bg-button-warning-outline-active: var(--utility-amber-950);
    --border-button-warning-outline: var(--alpha-0);
    --text-button-success-outline: var(--utility-green-400);
    --bg-button-success-outline: var(--alpha-0);
    --bg-button-success-outline-hover: var(--alpha-green-900-50);
    --bg-button-success-outline-active: var(--utility-green-950);
    --border-button-success-outline: var(--alpha-0);
    --bg-button-info: var(--utility-blue-600);
    --bg-button-info-hover: var(--utility-blue-500);
    --bg-button-info-active: var(--utility-blue-400);
    --text-button-info: var(--alpha-white-100);
    --border-button-info: var(--alpha-0);
    --text-button-info-outline: var(--utility-blue-400);
    --bg-button-info-outline: var(--alpha-0);
    --bg-button-info-outline-hover: var(--alpha-blue-900-50);
    --bg-button-info-outline-active: var(--utility-blue-950);
    --border-button-info-outline: var(--alpha-0);
    --text-button-glass: var(--alpha-white-100);
    --bg-button-glass: var(--alpha-white-10);
    --border-button-glass: var(--alpha-white-20);
    --text-button-glass-hover: var(--alpha-white-100);
    --bg-button-glass-hover: var(--alpha-white-20);
    --border-button-glass-hover: var(--alpha-white-30);
    --text-button-glass-active: var(--alpha-white-100);
    --bg-button-glass-active: var(--alpha-white-15);
    --border-button-glass-active: var(--alpha-white-30);
    --opacity-button-grain: 0.25;
    --border-button-focus: var(--border-primary);
    --ring-button-focus-offset: var(--bg-body);
    --text-input: var(--utility-neutral-50);
    --text-input-primary: var(--utility-neutral-50);
    --text-input-placeholder: var(--utility-neutral-500);
    --text-input-disabled: var(--utility-neutral-500);
    --text-input-tertiary: var(--utility-neutral-500);
    --text-input-readonly: var(--text-input);
    --bg-input: var(--utility-neutral-950);
    --bg-input-select: var(--utility-neutral-800);
    --bg-input-disabled: var(--utility-neutral-800);
    --bg-input-soft: var(--utility-neutral-800);
    --bg-input-soft-hover: var(--utility-neutral-750, var(--utility-neutral-800));
    --bg-input-soft-active: var(--utility-neutral-750, var(--utility-neutral-800));
    --bg-input-borderless: var(--utility-neutral-850);
    --bg-input-borderless-hover: var(--utility-neutral-800);
    --bg-input-borderless-active: var(--utility-neutral-800);
    --bg-input-ghost-hover: var(--utility-neutral-800);
    --bg-input-ghost-active: var(--utility-neutral-800);
    --bg-input-readonly: var(--utility-neutral-800);
    --bg-input-addon: var(--utility-neutral-800);
    --bg-input-group-hover: var(--utility-neutral-750);
    --bg-input-group-focus: var(--utility-neutral-750);
    --border-control: var(--utility-neutral-700);
    --border-control-hover: var(--utility-neutral-600);
    --border-control-focus: var(--utility-blue-400);
    --border-input: var(--border-control);
    --border-input-hover: var(--border-control-hover);
    --border-input-active: var(--border-control-focus);
    --border-input-disabled: var(--utility-neutral-700);
    --border-input-transparent: var(--alpha-0);
    --border-input-addon: var(--border-input);
    --border-input-stack: var(--border-input);
    --border-input-stack-hover: var(--border-input-hover);
    --border-input-stack-active: var(--border-control-focus);
    --border-input-stack-divider: var(--utility-neutral-700);
    --border-input-error: var(--utility-red-500);
    --border-input-error-focus: var(--utility-red-400);
    --border-input-success: var(--utility-green-500);
    --border-input-success-focus: var(--utility-green-400);
    --border-input-warning: var(--utility-yellow-500);
    --border-input-warning-focus: var(--utility-yellow-400);
    --border-input-info: var(--utility-blue-500);
    --border-input-info-focus: var(--utility-blue-400);
    --border-input-group-error: var(--border-input-error);
    --border-input-group-error-focus: var(--border-input-error-focus);
    --border-input-focus: var(--border-input-active);
    --ring-input-focus-offset: var(--bg-body);
    --text-form-label: var(--utility-neutral-300);
    --text-form-label-strong: var(--utility-neutral-200);
    --text-form-label-muted: var(--utility-neutral-400);
    --text-form-label-required: var(--utility-red-400);
    --text-form-hint: var(--utility-neutral-400);
    --text-form-hint-muted: var(--utility-neutral-400);
    --text-form-error: var(--utility-red-400);
    --text-form-success: var(--utility-green-400);
    --text-form-warning: var(--utility-yellow-400);
    --text-form-info: var(--utility-blue-400);
    --text-form-info-btn: var(--utility-neutral-500);
    --bg-form-info-btn-hover: var(--utility-neutral-800);
    --bg-form-info-btn-active: var(--utility-neutral-700);
    --border-form-info-btn: var(--alpha-0);
    --border-form-error: var(--utility-red-500);
    --border-form-success: var(--utility-green-500);
    --border-form-warning: var(--utility-yellow-500);
    --border-form-info: var(--utility-blue-500);
    --border-form-divider: var(--utility-neutral-800);
    --text-check-label: var(--utility-neutral-50);
    --text-check-label-muted: var(--utility-neutral-500);
    --text-checkbox: var(--utility-neutral-50);
    --text-checkbox-checked: var(--utility-neutral-950);
    --text-checkbox-disabled: var(--utility-neutral-600);
    --bg-checkbox: var(--alpha-0);
    --bg-checkbox-active: var(--utility-neutral-800);
    --bg-checkbox-checked: var(--utility-neutral-100);
    --bg-checkbox-disabled: var(--utility-neutral-850);
    --bg-checkbox-disabled-checked: var(--utility-neutral-700);
    --border-checkbox: var(--utility-neutral-600);
    --border-checkbox-hover: var(--utility-neutral-500);
    --border-checkbox-active: var(--utility-neutral-400);
    --border-checkbox-checked: var(--utility-blue-500);
    --border-checkbox-disabled: var(--utility-neutral-700);
    --border-checkbox-disabled-checked: var(--utility-neutral-700);
    --border-checkbox-error: var(--utility-red-500);
    --border-checkbox-success: var(--utility-green-500);
    --bg-toggle-track: var(--utility-neutral-700);
    --bg-toggle-track-hover: var(--utility-neutral-600);
    --bg-toggle-track-checked: var(--utility-blue-500);
    --bg-toggle-track-disabled: var(--utility-neutral-700);
    --bg-toggle-thumb: var(--utility-neutral-50);
    --shadow-toggle-thumb: var(--shadow-sm);
    --border-toggle-track: var(--alpha-0);
    --bg-toggle-track-success: var(--utility-green-500);
    --bg-toggle-track-warning: var(--utility-amber-500);
    --bg-toggle-track-danger: var(--utility-red-500);
    --bg-toggle-track-info: var(--utility-blue-500);
    --text-toggle-thumb-icon: var(--utility-neutral-500);
    --text-toggle-thumb-icon-checked: var(--utility-blue-600);
    --border-color-swatch: var(--alpha-white-20);
    --border-color-swatch-light: var(--utility-neutral-600);
    --bg-color-swatch-ring-hover: var(--utility-neutral-500);
    --bg-color-swatch-ring-focus: var(--border-focus);
    --bg-color-swatch-ring-active: var(--border-focus);
    --text-color-swatch-check: var(--alpha-white-100);
    --text-color-swatch-slash: var(--utility-neutral-600);
    --bg-color-picker-preview: var(--utility-neutral-800);
    --bg-color-picker-dialog: var(--bg-primary);
    --border-color-picker-dialog: var(--border-secondary);
    --shadow-color-picker-dialog: var(--shadow-xl);
    --border-color-picker-hairline: var(--alpha-white-20);
    --bg-color-picker-thumb-border: var(--color-white);
    --shadow-color-picker-thumb: var(--shadow-md);
    --bg-color-picker-checker-a: var(--utility-neutral-600);
    --bg-color-picker-checker-b: var(--utility-neutral-800);
    --bg-color-picker-cell: var(--bg-primary);
    --border-color-picker-cell: var(--border-primary);
    --border-color-picker-cell-focus: var(--border-focus);
    --text-color-picker-cell: var(--text-primary);
    --text-color-picker-saved-label: var(--text-secondary);
    --text-radio: var(--utility-neutral-50);
    --bg-radio: var(--alpha-0);
    --bg-radio-active: var(--utility-neutral-800);
    --bg-radio-disabled: var(--utility-neutral-800);
    --bg-radio-dot: var(--alpha-0);
    --bg-radio-dot-checked: var(--utility-neutral-50);
    --bg-radio-dot-disabled: var(--utility-neutral-600);
    --border-radio: var(--utility-neutral-600);
    --border-radio-hover: var(--utility-neutral-500);
    --border-radio-active: var(--utility-neutral-400);
    --border-radio-checked: var(--utility-neutral-50);
    --border-radio-disabled: var(--utility-neutral-700);
    --border-radio-soft: var(--utility-neutral-700);
    --border-radio-ghost: var(--utility-neutral-700);
    --border-radio-error: var(--utility-red-500);
    --border-radio-success: var(--utility-green-500);
    --bg-radio-dot-error: var(--utility-red-400);
    --bg-radio-dot-success: var(--utility-green-400);
    --text-step-indicator: var(--utility-neutral-200);
    --bg-step-indicator: var(--utility-neutral-900);
    --border-step-indicator: var(--utility-neutral-700);
    --shadow-step-indicator: var(--shadow-sm);
    --text-step-title: var(--utility-neutral-50);
    --text-step-subtitle: var(--utility-neutral-400);
    --bg-step-connector: var(--utility-neutral-700);
    --bg-step-connector-fill: var(--utility-blue-500);
    --bg-step-hover: var(--utility-neutral-800);
    --bg-step-active: var(--utility-neutral-700);
    --bg-step-current-hover: var(--utility-blue-500);
    --bg-step-current-active: var(--utility-blue-700);
    --bg-step-completed-hover: var(--utility-blue-500);
    --bg-step-completed-active: var(--utility-blue-700);
    --text-step-current: var(--alpha-white-100);
    --bg-step-current: var(--utility-blue-600);
    --border-step-current: var(--alpha-0);
    --text-step-title-current: var(--utility-neutral-50);
    --text-step-completed: var(--alpha-white-100);
    --bg-step-completed: var(--utility-blue-600);
    --border-step-completed: var(--alpha-0);
    --text-step-disabled: var(--utility-neutral-600);
    --bg-step-disabled: var(--utility-neutral-900);
    --border-step-disabled: var(--utility-neutral-800);
    --text-step-error: var(--alpha-white-100);
    --bg-step-error: var(--utility-red-500);
    --border-step-error: var(--alpha-0);
    --text-step-title-error: var(--utility-red-400);
    --text-step-success: var(--alpha-white-100);
    --bg-step-success: var(--utility-green-500);
    --border-step-success: var(--alpha-0);
    --text-step-warning: var(--alpha-white-100);
    --bg-step-warning: var(--utility-amber-500);
    --border-step-warning: var(--alpha-0);
    --text-step-title-warning: var(--utility-amber-300);
    --text-step-skipped: var(--utility-neutral-500);
    --bg-step-skipped: var(--utility-neutral-850);
    --border-step-skipped: var(--utility-neutral-800);
    --halo-step-in-progress: oklch(70% 0.13 250 / 0.28);
    --bg-step-badge-optional: var(--utility-neutral-800);
    --text-step-badge-optional: var(--utility-neutral-300);
    --bg-step-badge-locked: var(--utility-neutral-800);
    --text-step-badge-locked: var(--utility-neutral-400);
    --bg-step-badge-ai: oklch(30% 0.10 250 / 0.45);
    --text-step-badge-ai: var(--utility-blue-300);
    --bg-step-pill: var(--utility-neutral-850);
    --text-step-pill: var(--utility-neutral-200);
    --border-step-pill: var(--utility-neutral-800);
    --bg-step-pill-current: var(--utility-blue-500);
    --text-step-pill-current: var(--alpha-white-100);
    --bg-step-pill-completed: var(--utility-green-500);
    --text-step-pill-completed: var(--alpha-white-100);
    --bg-step-card: var(--utility-neutral-900);
    --border-step-card: var(--utility-neutral-800);
    --shadow-step-card: 0 1px 2px oklch(0% 0 0 / 0.35);
    --shadow-step-card-current: 0 0 0 2px var(--utility-blue-400), 0 6px 14px oklch(0% 0 0 / 0.45);
    --bg-step-chevron: var(--utility-neutral-850);
    --bg-step-chevron-current: oklch(28% 0.10 250 / 0.55);
    --bg-step-chevron-completed: oklch(28% 0.10 145 / 0.55);
    --bg-step-chevron-error: oklch(28% 0.13 30  / 0.55);
    --text-step-chevron: var(--utility-neutral-200);
    --text-step-chevron-current: var(--utility-blue-300);
    --text-step-chevron-completed: var(--utility-green-300);
    --text-step-chevron-error: var(--utility-red-300);
    --bg-wizard: var(--utility-neutral-950);
    --border-wizard: var(--utility-neutral-800);
    --border-wizard-divider: var(--utility-neutral-800);
    --text-wizard-title: var(--utility-neutral-50);
    --text-wizard-subtitle: var(--utility-neutral-400);
    --bg-wizard-rail: var(--utility-neutral-900);
    --bg-wizard-content: var(--utility-neutral-950);
    --shadow-wizard-floating: 0 1px 2px oklch(0% 0 0 / 0.35);
    --bg-dropdown: var(--utility-neutral-850);
    --border-dropdown: var(--utility-neutral-700);
    --shadow-dropdown: var(--shadow-lg);
    --blur-dropdown-backdrop: none;
    --opacity-dropdown-grain: 0;
    --text-dropdown: var(--utility-neutral-100);
    --text-dropdown-item: var(--utility-neutral-100);
    --text-dropdown-icon: var(--utility-neutral-400);
    --text-dropdown-end: var(--utility-neutral-400);
    --text-dropdown-title: var(--utility-neutral-400);
    --text-dropdown-hint: var(--utility-neutral-500);
    --bg-dropdown-hover: var(--utility-neutral-700);
    --bg-dropdown-active: var(--utility-neutral-800);
    --border-dropdown-divider: var(--utility-neutral-800);
    --bg-dropdown-selected: var(--utility-neutral-800);
    --text-dropdown-selected: var(--utility-neutral-50);
    --text-dropdown-danger: var(--utility-red-400);
    --bg-dropdown-danger-hover: var(--alpha-red-900-50);
    --bg-dropdown-glass: var(--alpha-neutral-900-70);
    --border-dropdown-glass: var(--alpha-white-10);
    --shadow-dropdown-glass: var(--shadow-lg);
    --blur-dropdown-glass: blur(20px);
    --opacity-dropdown-glass-grain: 0.15;
    --text-dropdown-glass: var(--utility-neutral-50);
    --text-dropdown-item-glass: var(--utility-neutral-50);
    --text-dropdown-icon-glass: var(--utility-neutral-300);
    --text-dropdown-end-glass: var(--utility-neutral-400);
    --bg-dropdown-glass-hover: var(--alpha-neutral-800-60);
    --bg-dropdown-glass-active: var(--alpha-neutral-700-60);
    --bg-dropdown-selected-glass: var(--alpha-neutral-800-60);
    --text-dropdown-selected-glass: var(--utility-neutral-50);
    --text-dropdown-danger-glass: var(--utility-red-400);
    --bg-dropdown-danger-hover-glass: var(--alpha-red-500-20, rgba(239,68,68,0.2));
    --bg-table: var(--utility-neutral-850);
    --bg-table-surface: var(--utility-neutral-850);
    --border-table-container: var(--utility-neutral-800);
    --radius-table: var(--radius-lg, 0.625rem);
    --bg-table-header: var(--utility-neutral-800);
    --bg-table-header-hover: var(--alpha-neutral-700-50);
    --bg-table-header-active: var(--utility-neutral-800);
    --text-table-header-active: var(--text-primary);
    --shadow-table-header-active: var(--shadow-table-header-pressed);
    --bg-table-header-pressed: var(--bg-secondary);
    --shadow-table-header-pressed: inset 0 1px 0 rgba(0,0,0,.35);
    --bg-table-header-sticky: var(--bg-table-header);
    --text-table-header: var(--text-secondary);
    --icon-table-header: var(--text-tertiary);
    --border-table-header: var(--border-primary);
    --text-table: var(--text-primary);
    --text-table-active: var(--text-primary);
    --text-table-footer: var(--text-secondary-alt);
    --text-table-disabled: var(--text-disabled);
    --bg-table-row-hover: var(--alpha-neutral-700-10);
    --bg-table-row-zebra: var(--bg-primary);
    --bg-table-row-selected: var(--bg-info-subtle);
    --bg-table-row-active: var(--bg-secondary);
    --bg-table-row-focus: var(--bg-info-subtle);
    --ring-table-row-focus: 0 0 0 2px var(--border-info-subtle);
    --bg-table-row-disabled: var(--bg-primary);
    --bg-table-row-success: var(--bg-success-subtle);
    --bg-table-row-warning: color-mix(in oklch, var(--bg-warning-subtle) 40%, var(--bg-primary));
    --bg-table-row-danger: var(--bg-danger-subtle);
    --text-table-row-success: var(--text-success-solid);
    --text-table-row-warning: var(--text-warning);
    --text-table-row-danger: var(--text-danger-solid);
    --bg-row-sweep-success: rgba(74, 222, 128, 0.28);
    --bg-row-sweep-info: rgba(96, 165, 250, 0.28);
    --bg-row-sweep-warning: rgba(251, 191, 36, 0.30);
    --bg-row-sweep-danger: rgba(248, 113, 113, 0.28);
    --duration-row-sweep: 800ms;
    --duration-row-sweep-fade: 600ms;
    --ease-row-sweep: cubic-bezier(0.25, 0.1, 0.25, 1);
    --bg-table-cell-hover: var(--bg-primary-hover);
    --bg-table-cell-focus: var(--bg-info-subtle);
    --ring-table-cell-focus: 0 0 0 2px var(--border-info-subtle);
    --bg-table-cell-no-hover: var(--bg-table);
    --bg-table-footer: var(--utility-neutral-850);
    --bg-table-footer-sticky: var(--utility-neutral-850);
    --border-table: var(--border-primary-subtle);
    --border-table-grid: var(--border-primary);
    --border-table-grid-strong: var(--border-primary-alt);
    --border-table-sticky-divider: var(--border-table-grid);
    --bg-table-sticky: var(--bg-table);
    --bg-table-sticky-hover: var(--bg-table-row-hover);
    --bg-table-sticky-selected: var(--bg-table-row-selected);
    --bg-table-sticky-active: var(--bg-table-row-active);
    --bg-table-sticky-focus: var(--bg-table-row-focus);
    --shadow-table-sticky-header: inset 0 -1px 0 var(--border-table-header);
    --shadow-table-sticky-footer: inset 0 1px 0 var(--border-table);
    --shadow-table-sticky-col: inset -1px 0 0 var(--border-table-sticky-divider);
    --shadow-table-sticky-col-right: inset 1px 0 0 var(--border-table-sticky-divider);
    --bg-table-col-hover: var(--bg-info-subtle);
    --bg-table-control: var(--alpha-0);
    --bg-table-control-focus: var(--bg-input-select);
    --border-table-control: var(--border-table);
    --bg-panel: var(--utility-neutral-850);
    --bg-panel-raised: var(--utility-neutral-800);
    --bg-panel-sunken: var(--utility-neutral-900);
    --border-panel: var(--alpha-neutral-700-50);
    --bg-card: var(--utility-neutral-850);
    --bg-card-alt: var(--utility-neutral-900);
    --bg-surface: var(--bg-card);
    --bg-body: var(--canvas-primary);
    --text-on-solid: var(--alpha-white-100);
    --party-dem: var(--text-info);
    --party-rep: var(--text-danger);
    --text-lean-dem: var(--party-dem);
    --text-lean-rep: var(--party-rep);
    --text-lean-neutral: var(--text-tertiary);
    --party-ind: var(--text-success);
    --party-oth: var(--text-purple);
    --bg-card-hover: var(--utility-neutral-800);
    --bg-card-pressed: var(--utility-neutral-750, var(--utility-neutral-800));
    --text-card: var(--text-primary);
    --border-card: var(--alpha-neutral-700-50);
    --border-card-active: var(--border-secondary);
    --shadow-card: var(--shadow-sm);
    --shadow-card-active: var(--shadow-sm);
    --shadow-card-pressed: inset 0 1px 0 rgba(255,255,255,.04);
    --blur-card-backdrop: none;
    --opacity-card-grain: 0;
    --border-card-divider: var(--border-primary-subtle);
    --border-card-focus: var(--alpha-0);
    --ring-card-focus: var(--alpha-0);
    --opacity-card-disabled: 0.55;
    --filter-card-disabled: none;
    --radius-card-sm: var(--radius-lg, 0.5rem);
    --radius-card-md: var(--radius-xl, 0.75rem);
    --radius-card-lg: var(--radius-2xl, 1rem);
    --bg-card-flat: var(--utility-neutral-900);
    --border-card-flat: var(--border-primary-subtle);
    --opacity-card-flat-grain: 0;
    --bg-card-light: var(--utility-neutral-800);
    --border-card-light: var(--border-primary-subtle);
    --opacity-card-light-grain: 0;
    --bg-card-soft: var(--utility-neutral-850, var(--utility-neutral-800));
    --border-card-soft: var(--alpha-0);
    --bg-card-ghost: var(--alpha-0);
    --border-card-ghost: var(--border-primary-subtle);
    --shadow-card-ghost: none;
    --border-card-strong: var(--border-primary-solid);
    --bg-card-mini: var(--bg-card);
    --border-card-mini: var(--border-card);
    --text-card-mini: var(--text-card);
    --opacity-card-mini-grain: 0;
    --bg-glass-card: var(--alpha-white-10);
    --border-glass-card: var(--alpha-white-10);
    --text-glass-card: var(--text-primary);
    --blur-glass-card: blur(20px);
    --shadow-glass-card: var(--shadow-md);
    --opacity-glass-card-grain: 0.12;
    --opacity-glass-grain-sm: 0.12;
    --opacity-glass-grain-md: 0.16;
    --opacity-glass-grain-lg: 0.20;
    --opacity-glass-grain-xl: 0.25;
    --blur-glass-card-sm: blur(10px);
    --blur-glass-card-md: blur(16px);
    --blur-glass-card-lg: blur(22px);
    --blur-glass-card-xl: blur(28px);
    --bg-list: var(--alpha-0);
    --border-list: var(--border-primary-subtle);
    --radius-list: var(--radius-md, 0.375rem);
    --text-list-header: var(--text-secondary);
    --border-list-header: var(--border-primary-subtle);
    --bg-list-header: var(--utility-neutral-850, var(--utility-neutral-800));
    --bg-list-item: var(--bg-list);
    --bg-list-item-hover: var(--utility-neutral-800);
    --bg-list-item-active: var(--utility-neutral-800);
    --bg-list-item-selected: color-mix(in oklch, var(--color-brand-400) 22%, var(--bg-list-item));
    --bg-list-item-focus: color-mix(in oklch, var(--color-brand-400) 22%, var(--bg-list-item));
    --text-list-item: var(--text-primary);
    --text-list-item-title: var(--text-primary);
    --text-list-item-subtitle: var(--text-tertiary);
    --text-list-item-leading: var(--text-tertiary);
    --text-list-item-trailing: var(--text-tertiary);
    --border-list-divider: var(--border-primary-subtle);
    --space-list-inset: 3rem;
    --size-list-indicator: 3px;
    --bg-list-indicator: var(--border-focus);
    --ring-list-item-focus: 0 0 0 2px var(--border-focus);
    --space-list-item-x: 1rem;
    --space-list-item-y: 0.5rem;
    --space-list-item-y-compact: 0.375rem;
    --space-list-item-y-relaxed: 0.75rem;
    --opacity-list-item-disabled: 0.55;
    --bg-list-item-disabled: var(--utility-neutral-850, var(--utility-neutral-800));
    --text-list-item-disabled: var(--text-disabled);
    --bg-list-item-success: var(--bg-success-subtle);
    --bg-list-item-warning: var(--bg-warning-subtle);
    --bg-list-item-danger: var(--bg-danger-subtle);
    --bg-list-item-info: var(--bg-info-subtle);
    --bg-list-indicator-success: var(--utility-green-400);
    --bg-list-indicator-warning: var(--utility-amber-400);
    --bg-list-indicator-danger: var(--utility-red-400);
    --bg-list-indicator-info: var(--utility-blue-400);
    --bg-list-item-new-flash: oklch(35% 0.10 90 / 0.30);
    --bg-list-item-skeleton: var(--utility-neutral-800);
    --bg-list-item-skeleton-shimmer: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / 0.10) 50%, transparent 70%);
    --text-list-item-description: var(--utility-neutral-300);
    --text-list-item-meta: var(--utility-neutral-500);
    --text-list-item-kbd: var(--utility-neutral-200);
    --bg-list-item-kbd: var(--utility-neutral-800);
    --border-list-item-kbd: var(--utility-neutral-700);
    --bg-list-card: var(--utility-neutral-900);
    --border-list-card: var(--utility-neutral-800);
    --shadow-list-card: 0 1px 2px oklch(0% 0 0 / 0.35);
    --shadow-list-card-hover: 0 4px 12px oklch(0% 0 0 / 0.45);
    --shadow-list-card-active: 0 0 0 2px var(--border-focus);
    --bg-list-section-header: var(--utility-neutral-850);
    --text-list-section-header: var(--utility-neutral-300);
    --text-list-handle: var(--utility-neutral-500);
    --text-list-handle-hover: var(--utility-neutral-200);
    --space-list-item-y-xs: 0.25rem;
    --space-list-item-y-sm: 0.375rem;
    --space-list-item-y-md: 0.5rem;
    --space-list-item-y-lg: 0.75rem;
    --space-list-item-y-xl: 1rem;
    --bg-select-option: var(--utility-neutral-800);
    --bg-select-option-hover: var(--utility-neutral-750);
    --bg-select-option-selected: var(--color-brand-600);
    --bg-select-option-selected-hover: var(--color-brand-500);
    --border-select-option: var(--utility-neutral-700);
    --border-select-option-hover: var(--utility-neutral-600);
    --border-select-option-selected: var(--color-brand-400);
    --text-select-option: var(--text-primary);
    --text-select-option-subtitle: var(--text-tertiary);
    --text-select-option-trailing: var(--text-secondary);
    --text-select-option-selected: var(--alpha-white-100);
    --text-select-option-selected-subtitle: var(--alpha-white-70);
    --text-select-option-selected-trailing: var(--alpha-white-80);
    --text-select-option-disabled: var(--text-disabled);
    --shadow-select-option: none;
    --shadow-select-option-hover: var(--shadow-xs);
    --text-select-option-header: var(--text-tertiary);
    --border-select-option-divider: var(--border-secondary);
    --border-select-option-accent: var(--color-brand-400);
    --bg-select-option-accent: var(--color-brand-600);
    --border-select-option-success: var(--utility-green-400);
    --bg-select-option-success: var(--utility-green-500);
    --border-select-option-warning: var(--utility-amber-400);
    --bg-select-option-warning: var(--utility-amber-500);
    --border-select-option-danger: var(--utility-red-400);
    --bg-select-option-danger: var(--utility-red-500);
    --bg-select-option-tinted: color-mix(in oklch, var(--color-brand-500) 16%, transparent);
    --bg-select-option-tinted-accent: color-mix(in oklch, var(--color-brand-500) 16%, transparent);
    --bg-select-option-tinted-success: color-mix(in oklch, var(--utility-green-500) 15%, transparent);
    --bg-select-option-tinted-warning: color-mix(in oklch, var(--utility-amber-500) 15%, transparent);
    --bg-select-option-tinted-danger: color-mix(in oklch, var(--utility-red-500) 15%, transparent);
    --bg-tree-surface: var(--alpha-0);
    --text-tree: var(--text-primary);
    --bg-tree-row: var(--alpha-0);
    --bg-tree-row-hover: var(--utility-neutral-800);
    --bg-tree-row-active: var(--utility-neutral-800);
    --text-tree-row-active: var(--text-primary);
    --bg-tree-row-selected: var(--utility-neutral-800);
    --text-tree-row-selected: var(--text-primary);
    --bg-tree-row-disabled: var(--utility-neutral-850, var(--utility-neutral-800));
    --text-tree-row-disabled: var(--text-disabled);
    --opacity-tree-disabled: 0.55;
    --bg-tree-line: var(--utility-neutral-700);
    --opacity-tree-line: 0.8;
    --bg-tree-toggle: var(--utility-neutral-800);
    --border-tree-toggle: var(--utility-neutral-700);
    --text-tree-toggle: var(--text-tertiary);
    --text-tree-icon: var(--text-tertiary);
    --text-tree-label: var(--text-primary);
    --text-tree-meta: var(--text-tertiary);
    --text-tree-actions: var(--text-tertiary);
    --ring-tree-row: var(--alpha-0);
    --radius-tree-row: var(--radius-md, 0.5rem);
    --text-badge: var(--utility-neutral-200);
    --text-badge-icon: var(--utility-neutral-300);
    --bg-badge: var(--utility-neutral-800);
    --bg-badge-hover: var(--utility-neutral-700);
    --bg-badge-pressed: var(--utility-neutral-750, var(--utility-neutral-700));
    --shadow-badge-pressed: inset 0 1px 0 rgba(0,0,0,.4);
    --bg-badge-alt: var(--utility-neutral-900);
    --text-badge-close: var(--utility-neutral-400);
    --text-badge-close-hover: var(--utility-neutral-100);
    --bg-badge-close-hover: var(--utility-neutral-700);
    --bg-badge-close-pressed: var(--utility-neutral-750, var(--utility-neutral-700));
    --text-badge-solid: var(--alpha-white-100);
    --bg-badge-solid: var(--utility-neutral-600);
    --bg-badge-solid-hover: var(--utility-neutral-500);
    --bg-badge-solid-pressed: var(--utility-neutral-550, var(--utility-neutral-500));
    --bg-badge-outline: var(--alpha-0);
    --border-badge-outline: var(--utility-neutral-600);
    --text-badge-outline: var(--utility-neutral-200);
    --bg-badge-outline-hover: var(--utility-neutral-800);
    --bg-badge-outline-pressed: var(--utility-neutral-750, var(--utility-neutral-700));
    --text-badge-ghost: var(--utility-neutral-300);
    --bg-badge-ghost-hover: var(--utility-neutral-800);
    --bg-badge-ghost-pressed: var(--utility-neutral-750, var(--utility-neutral-700));
    --text-badge-danger: var(--utility-red-300);
    --bg-badge-danger: var(--utility-red-950);
    --bg-badge-danger-hover: var(--utility-red-900);
    --bg-badge-danger-pressed: var(--utility-red-850, var(--utility-red-900));
    --text-badge-warning: var(--utility-yellow-300);
    --bg-badge-warning: var(--utility-yellow-950);
    --bg-badge-warning-hover: var(--utility-yellow-900);
    --bg-badge-warning-pressed: var(--utility-yellow-850, var(--utility-yellow-900));
    --text-badge-success: var(--utility-green-300);
    --bg-badge-success: var(--utility-green-950);
    --bg-badge-success-hover: var(--utility-green-900);
    --bg-badge-success-pressed: var(--utility-green-850, var(--utility-green-900));
    --text-badge-info: var(--utility-blue-300);
    --bg-badge-info: var(--utility-blue-950);
    --bg-badge-info-hover: var(--utility-blue-900);
    --bg-badge-info-pressed: var(--utility-blue-850, var(--utility-blue-900));
    --text-badge-indigo: var(--utility-indigo-300);
    --bg-badge-indigo: var(--utility-indigo-950);
    --bg-badge-indigo-hover: var(--utility-indigo-900);
    --bg-badge-indigo-pressed: var(--utility-indigo-850, var(--utility-indigo-900));
    --text-badge-purple: var(--utility-purple-300);
    --bg-badge-purple: var(--utility-purple-950);
    --bg-badge-purple-hover: var(--utility-purple-900);
    --bg-badge-purple-pressed: var(--utility-purple-850, var(--utility-purple-900));
    --text-badge-pink: var(--utility-pink-300);
    --bg-badge-pink: var(--utility-pink-950);
    --bg-badge-pink-hover: var(--utility-pink-900);
    --bg-badge-pink-pressed: var(--utility-pink-850, var(--utility-pink-900));
    --text-badge-teal: var(--utility-teal-300);
    --bg-badge-teal: var(--utility-teal-950);
    --bg-badge-teal-hover: var(--utility-teal-900);
    --bg-badge-teal-pressed: var(--utility-teal-850, var(--utility-teal-900));
    --text-badge-mint: var(--utility-mint-300);
    --bg-badge-mint: var(--utility-mint-950);
    --bg-badge-mint-hover: var(--utility-mint-900);
    --bg-badge-mint-pressed: var(--utility-mint-850, var(--utility-mint-900));
    --text-badge-notification: var(--alpha-white-100);
    --bg-badge-notification: var(--utility-red-600);
    --text-badge-status: var(--utility-neutral-200);
    --text-badge-dot: var(--utility-neutral-200);
    --bg-badge-dot: var(--utility-neutral-800);
    --dot-light: var(--utility-neutral-400);
    --dot-danger: var(--utility-red-500);
    --dot-warning: var(--utility-yellow-500);
    --dot-success: var(--utility-green-500);
    --dot-info: var(--utility-blue-500);
    --dot-indigo: var(--utility-indigo-500);
    --dot-purple: var(--utility-purple-500);
    --dot-pink: var(--utility-pink-500);
    --dot-teal: var(--utility-teal-500);
    --dot-mint: var(--utility-mint-500);
    --text-avatar: var(--text-primary);
    --bg-avatar: var(--utility-neutral-700);
    --ring-avatar: var(--border-primary);
    --bg-avatar-soft: var(--utility-neutral-800);
    --text-avatar-soft: var(--text-primary);
    --bg-avatar-solid: var(--utility-neutral-950);
    --text-avatar-solid: var(--alpha-white-100);
    --text-avatar-outline: var(--text-primary);
    --border-avatar-outline: var(--border-primary);
    --text-avatar-ghost: var(--text-primary);
    --bg-avatar-badge-ring: var(--bg-avatar);
    --border-avatar-badge: var(--border-primary);
    --bg-avatar-online: var(--bg-success-alt);
    --bg-avatar-away: var(--bg-warning-alt);
    --bg-avatar-busy: var(--bg-danger-alt);
    --bg-avatar-ooo: var(--utility-fuchsia-400);
    --bg-avatar-offline: var(--utility-neutral-500);
    --ring-avatar-stack: var(--alpha-white-50);
    --bg-avatar-more: var(--bg-primary-subtle);
    --text-avatar-more: var(--text-secondary);
    --ring-avatar-more: var(--alpha-white-50);
    --bg-avatar-info: var(--bg-info-subtle);
    --text-avatar-info: var(--text-info-solid);
    --ring-avatar-info: var(--border-info-subtle);
    --bg-avatar-success: var(--bg-success-subtle);
    --text-avatar-success: var(--text-success-solid);
    --ring-avatar-success: var(--border-success-subtle);
    --bg-avatar-warning: var(--bg-warning-subtle);
    --text-avatar-warning: var(--text-warning-solid);
    --ring-avatar-warning: var(--border-warning-subtle);
    --bg-avatar-danger: var(--bg-danger-subtle);
    --text-avatar-danger: var(--text-danger-solid);
    --ring-avatar-danger: var(--border-danger-subtle);
    --bg-avatar-indigo: var(--bg-indigo-subtle);
    --text-avatar-indigo: var(--text-indigo-solid);
    --bg-avatar-purple: var(--bg-purple-subtle);
    --text-avatar-purple: var(--text-purple-solid);
    --bg-avatar-pink: var(--bg-pink-subtle);
    --text-avatar-pink: var(--text-pink-solid);
    --bg-avatar-teal: var(--bg-teal-subtle);
    --text-avatar-teal: var(--text-teal-solid);
    --bg-avatar-mint: var(--bg-mint-subtle);
    --text-avatar-mint: var(--text-mint-solid);
    --bg-persona: var(--bg-primary);
    --border-persona: var(--border-primary);
    --text-persona: var(--text-primary);
    --text-persona-title: var(--text-primary);
    --text-persona-subtitle: var(--text-tertiary);
    --text-persona-meta: var(--text-quaternary);
    --bg-persona-tag: var(--bg-primary-subtle);
    --text-persona-tag: var(--text-secondary);
    --border-persona-tag: var(--border-primary-subtle);
    --bg-persona-soft: var(--bg-primary-subtle);
    --border-persona-soft: var(--alpha-0);
    --bg-persona-ghost: var(--alpha-0);
    --border-persona-ghost: var(--border-primary-subtle);
    --border-persona-strong: var(--border-primary-solid);
    --shadow-persona: var(--shadow-sm);
    --bg-persona-hover: var(--bg-primary-hover);
    --border-persona-hover: var(--border-primary-alt);
    --bg-persona-pressed: var(--bg-secondary);
    --border-persona-pressed: var(--border-primary-solid);
    --shadow-persona-pressed: inset 0 1px 0 rgba(0,0,0,.18);
    --bg-persona-selected: var(--bg-info-subtle);
    --border-persona-selected: var(--border-info-subtle);
    --ring-persona-focus: 0 0 0 2px var(--border-info-subtle);
    --opacity-persona-disabled: 0.6;
    --filter-persona-disabled: none;
    --bg-persona-status: var(--bg-primary-subtle);
    --border-persona-status: var(--border-primary-subtle);
    --text-persona-status: var(--text-secondary);
    --bg-persona-status-dot: var(--bg-secondary-solid);
    --bg-persona-dot-success: var(--bg-success-alt);
    --bg-persona-dot-warning: var(--bg-warning-alt);
    --bg-persona-dot-danger: var(--bg-danger-alt);
    --bg-persona-dot-info: var(--bg-info-alt);
    --border-divider: var(--border-primary);
    --border-default: var(--border-divider);
    --border-divider-subtle: var(--border-primary-subtle);
    --border-divider-strong: var(--border-primary-solid);
    --border-divider-ghost: var(--alpha-neutral-900-60);
    --text-divider: var(--text-tertiary);
    --bg-divider: var(--bg-primary);
    --height-progress-track: 4px;
    --bg-progress: var(--utility-neutral-800);
    --bg-progress-bar: var(--utility-blue-500);
    --text-progress: var(--alpha-white-100);
    --bg-progress-bar-success: var(--bg-success);
    --bg-progress-bar-warning: var(--bg-warning);
    --bg-progress-bar-danger: var(--bg-danger);
    --bg-progress-bar-info: var(--bg-info);
    --bg-progress-bar-neutral: var(--utility-neutral-600);
    --bg-progress-radial-inner: var(--bg-primary);
    --text-progress-radial: var(--text-primary);
    --bg-progress-radial-track: var(--bg-progress);
    --size-progress-cap: 10px;
    --shadow-progress-cap: 0 0 0 2px var(--bg-progress-radial-inner);
    --shadow-progress-cap-glow: 0 0 10px var(--bg-progress-bar), 0 0 0 2px var(--bg-progress-radial-inner);
    --duration-progress-indeterminate: 1.2s;
    --easing-progress-indeterminate: ease-in-out;
    --gap-progress-stack: 2px;
    --size-progress-radial-xs: 28px;
    --size-progress-radial-sm: 36px;
    --size-progress-radial-md: 48px;
    --size-progress-radial-lg: 64px;
    --size-progress-radial-xl: 84px;
    --thickness-progress-radial-xs: 4px;
    --thickness-progress-radial-sm: 5px;
    --thickness-progress-radial-md: 6px;
    --thickness-progress-radial-lg: 8px;
    --thickness-progress-radial-xl: 10px;
    --text-progress-success: var(--alpha-white-100);
    --text-progress-warning: var(--text-primary);
    --text-progress-danger: var(--alpha-white-100);
    --text-progress-info: var(--alpha-white-100);
    --text-progress-neutral: var(--alpha-white-100);
    --size-spinner-sm: 16px;
    --size-spinner-md: 20px;
    --size-spinner-lg: 24px;
    --size-spinner-xl: 32px;
    --size-spinner: var(--size-spinner-lg);
    --stroke-spinner-sm: 2;
    --stroke-spinner-md: 2.5;
    --stroke-spinner-lg: 3;
    --stroke-spinner-xl: 4;
    --stroke-spinner: var(--stroke-spinner-lg);
    --text-spinner: var(--utility-blue-400);
    --opacity-spinner-track: 0.18;
    --bg-spinner-overlay: var(--alpha-neutral-950-60);
    --blur-spinner-overlay: 5px;
    --duration-spinner-rotate: 1.35s;
    --duration-spinner-dash: 1.6s;
    --ease-spinner-dash: cubic-bezier(.4, 0, .2, 1);
    --duration-spinner-overlay: 180ms;
    --ease-spinner-overlay: cubic-bezier(.2, 0, .2, 1);
    --duration-spinner-pop: 160ms;
    --ease-spinner-pop: cubic-bezier(.2, 0, .2, 1);
    --text-link: var(--color-brand-300);
    --text-link-hover: var(--color-brand-200);
    --text-link-secondary: var(--utility-neutral-300);
    --text-link-secondary-hover: var(--utility-neutral-100);
    --text-link-muted: var(--utility-neutral-400);
    --text-link-muted-hover: var(--utility-neutral-200);
    --text-link-danger: var(--utility-red-400);
    --text-link-danger-hover: var(--utility-red-300);
    --border-link-focus: var(--border-focus);
    --text-form-section-title: var(--text-secondary);
    --text-form-section-description: var(--text-tertiary);
    --border-form-section: var(--border-primary-subtle);
    --bg-form-section-card: var(--bg-surface);
    --shadow-form-section-card: var(--shadow-xs);
    --bg-form-section-filled: var(--bg-secondary);
    --bg-form-section-icon: var(--bg-secondary);
    --text-form-section-icon: var(--text-secondary);
    --bg-form-section-badge: color-mix(in oklch, var(--text-secondary) 12%, transparent);
    --text-form-section-badge: var(--text-secondary);
    --bg-tag-neutral: var(--alpha-white-8);
    --bg-tag-neutral-hover: var(--alpha-white-12);
    --text-tag-neutral: var(--utility-neutral-200);
    --text-tag-neutral-hover: var(--alpha-white-100);
    --border-tag-neutral: var(--alpha-white-10);
    --border-tag-neutral-hover: var(--alpha-white-16);
    --border-tag-neutral-focus: var(--utility-blue-200);
    --bg-tag-neutral-dismiss-hover: var(--alpha-white-10);
    --bg-tag-primary: var(--alpha-blue-500-18);
    --bg-tag-primary-hover: var(--alpha-blue-500-24);
    --text-tag-primary: var(--utility-blue-200);
    --text-tag-primary-hover: var(--utility-blue-100);
    --border-tag-primary: var(--alpha-blue-500-26);
    --border-tag-primary-hover: var(--alpha-blue-500-34);
    --border-tag-primary-focus: var(--utility-blue-200);
    --bg-tag-primary-dismiss-hover: var(--alpha-blue-500-18);
    --bg-tag-success: var(--alpha-green-500-18);
    --bg-tag-success-hover: var(--alpha-green-500-24);
    --text-tag-success: var(--utility-green-200);
    --text-tag-success-hover: var(--utility-green-100);
    --border-tag-success: var(--alpha-green-500-26);
    --border-tag-success-hover: var(--alpha-green-500-34);
    --border-tag-success-focus: var(--utility-green-200);
    --bg-tag-success-dismiss-hover: var(--alpha-green-500-18);
    --bg-tag-warning: var(--alpha-amber-500-20);
    --bg-tag-warning-hover: var(--alpha-amber-500-26);
    --text-tag-warning: var(--utility-amber-200);
    --text-tag-warning-hover: var(--utility-amber-100);
    --border-tag-warning: var(--alpha-amber-500-30);
    --border-tag-warning-hover: var(--alpha-amber-500-38);
    --border-tag-warning-focus: var(--utility-amber-200);
    --bg-tag-warning-dismiss-hover: var(--alpha-amber-500-20);
    --bg-tag-danger: var(--alpha-red-500-18);
    --bg-tag-danger-hover: var(--alpha-red-500-24);
    --text-tag-danger: var(--utility-red-200);
    --text-tag-danger-hover: var(--utility-red-100);
    --border-tag-danger: var(--alpha-red-500-26);
    --border-tag-danger-hover: var(--alpha-red-500-34);
    --border-tag-danger-focus: var(--utility-red-200);
    --bg-tag-danger-dismiss-hover: var(--alpha-red-500-18);
    --bg-tag-soft: var(--alpha-white-8);
    --border-tag-soft: var(--alpha-white-10);
    --border-tag-outline: var(--alpha-white-16);
    --bg-tag-selected: var(--alpha-blue-500-26);
    --border-tag-selected: var(--alpha-blue-500-36);
    --text-tag-selected: var(--utility-blue-100);
    --text-tag-dismiss: var(--utility-neutral-200);
    --text-tag-dismiss-hover: var(--alpha-white-100);
    --bg-tag-dismiss-hover: var(--alpha-white-10);
    --text-filter: var(--text-primary);
    --text-filter-hover: var(--text-primary-hover);
    --text-filter-disabled: var(--text-disabled);
    --bg-filter: var(--alpha-0);
    --bg-filter-hover: var(--utility-neutral-800);
    --bg-filter-active: var(--utility-neutral-800);
    --bg-filter-selected: var(--bg-info-subtle);
    --bg-filter-pressed: var(--utility-neutral-850);
    --opacity-filter-disabled: 0.6;
    --bg-filter-section: var(--bg-filter);
    --bg-filter-section-open: var(--bg-filter-hover);
    --bg-filter-section-pressed: var(--bg-filter-pressed);
    --text-filter-chevron: var(--text-tertiary);
    --bg-filter-collapse: var(--bg-primary-subtle);
    --bg-filter-collapse-inner: var(--bg-secondary-subtle);
    --border-filter: var(--border-primary-subtle);
    --border-filter-collapse: var(--border-primary-subtle);
    --border-filter-focus: var(--border-info);
    --ring-filter-focus: 0 0 0 2px var(--border-info);
    --bg-filter-nested: var(--alpha-0);
    --bg-filter-nested-hover: var(--bg-secondary-subtle);
    --text-filter-menu: var(--text-secondary);
    --bg-filter-menu: var(--bg-primary-subtle);
    --text-filter-label: var(--text-tertiary);
    --bg-filter-success: var(--bg-success-subtle);
    --bg-filter-warning: var(--bg-warning-subtle);
    --bg-filter-danger: var(--bg-danger-subtle);
    --bg-filter-info: var(--bg-info-subtle);
    --space-filter-item-x: 1rem;
    --space-filter-item-y: 0.5rem;
    --space-filter-item-y-compact: 0.375rem;
    --space-filter-item-y-relaxed: 0.75rem;
    --text-photo-viewer: var(--text-primary);
    --bg-photo-viewer-main: var(--alpha-0);
    --border-photo-viewer-main: var(--utility-neutral-800);
    --shadow-photo-viewer-main: var(--shadow-sm);
    --bg-photo-viewer-image: var(--utility-neutral-850);
    --bg-photo-viewer-bar: var(--alpha-0);
    --border-photo-viewer-bar: var(--border-primary-subtle);
    --text-photo-viewer-bar: var(--text-secondary);
    --text-photo-viewer-title: var(--text-primary);
    --text-photo-viewer-meta: var(--text-tertiary);
    --bg-photo-viewer-action: var(--alpha-0);
    --bg-photo-viewer-action-hover: var(--bg-primary-hover);
    --bg-photo-viewer-action-active: var(--bg-secondary);
    --border-photo-viewer-action: var(--border-primary-subtle);
    --border-photo-viewer-action-hover: var(--border-primary);
    --text-photo-viewer-action: var(--text-secondary);
    --text-photo-viewer-action-hover: var(--text-primary);
    --bg-photo-viewer-content: var(--alpha-0);
    --border-photo-viewer-content: var(--border-primary-subtle);
    --text-photo-viewer-content: var(--text-secondary);
    --text-photo-viewer-content-meta: var(--text-tertiary);
    --text-photo-viewer-content-body: var(--text-primary);
    --bg-photo-viewer-strip: var(--alpha-0);
    --border-photo-viewer-strip: var(--utility-neutral-800);
    --bg-photo-viewer-thumb: var(--utility-neutral-800);
    --bg-photo-viewer-thumb-hover: var(--bg-primary-hover);
    --bg-photo-viewer-thumb-active: var(--bg-secondary);
    --border-photo-viewer-flat: var(--utility-neutral-700);
    --border-photo-viewer-thumb: var(--border-primary-subtle);
    --border-photo-viewer-thumb-hover: var(--border-primary);
    --border-photo-viewer-thumb-active: var(--border-primary);
    --border-photo-viewer-thumb-selected: var(--border-info);
    --ring-photo-viewer-thumb-selected: inset 0 0 0 2px oklch(100% 0 0), inset 0 0 0 3.5px oklch(0% 0 0);
    --shadow-photo-viewer-thumb: none;
    --ring-photo-viewer-thumb-focus: 0 0 0 2px var(--border-info-subtle);
    --opacity-photo-viewer-thumb: 0.92;
    --opacity-photo-viewer-thumb-disabled: 0.6;
    --filter-photo-viewer-thumb-disabled: none;
    --bg-photo-viewer-nav: oklch(100% 0 0 / 0.10);
    --bg-photo-viewer-nav-hover: oklch(100% 0 0 / 0.20);
    --bg-photo-viewer-nav-active: oklch(100% 0 0 / 0.30);
    --text-photo-viewer-nav: oklch(100% 0 0);
    --border-photo-viewer-nav: oklch(100% 0 0 / 0.10);
    --bg-photo-viewer-counter: oklch(0% 0 0 / 0.5);
    --text-photo-viewer-counter: oklch(100% 0 0 / 0.85);
    --bg-photo-viewer-caption-overlay: linear-gradient(180deg, transparent 0%, oklch(0% 0 0 / 0.7) 100%);
    --text-photo-viewer-caption-overlay: oklch(100% 0 0);
    --bg-photo-viewer-toolbar: oklch(0% 0 0 / 0.55);
    --text-photo-viewer-toolbar: oklch(100% 0 0);
    --border-photo-viewer-toolbar: oklch(100% 0 0 / 0.10);
    --bg-photo-viewer-zoom-btn: oklch(100% 0 0 / 0.10);
    --bg-photo-viewer-zoom-btn-hover: oklch(100% 0 0 / 0.20);
    --bg-photo-viewer-zoom-btn-active: oklch(100% 0 0 / 0.30);
    --text-photo-viewer-zoom-btn: oklch(100% 0 0);
    --text-photo-viewer-zoom-level: oklch(100% 0 0 / 0.85);
    --bg-photo-viewer-status: oklch(0% 0 0 / 0.55);
    --text-photo-viewer-status: oklch(100% 0 0);
    --bg-photo-viewer-info: var(--utility-neutral-900);
    --border-photo-viewer-info: var(--utility-neutral-800);
    --text-photo-viewer-info: var(--text-primary);
    --text-photo-viewer-info-muted: var(--text-tertiary);
    --bg-photo-viewer-info-header: var(--utility-neutral-850);
    --bg-photo-viewer-fullscreen: oklch(0% 0 0 / 0.96);
    --backdrop-photo-viewer-fullscreen: blur(8px);
    --bg-photo-viewer-fullscreen-toolbar: oklch(100% 0 0 / 0.06);
    --line-photo-viewer-compare: oklch(100% 0 0);
    --bg-photo-viewer-compare-handle: oklch(100% 0 0);
    --shadow-photo-viewer-compare-handle: 0 2px 8px oklch(0% 0 0 / 0.55);
    --bg-photo-viewer-annotation: var(--utility-amber-400);
    --bg-photo-viewer-annotation-active: var(--utility-blue-400);
    --text-photo-viewer-annotation: var(--utility-neutral-900);
    --ring-photo-viewer-annotation: 0 0 0 3px oklch(100% 0 0 / 0.4);
    --bg-photo-viewer-video-controls: oklch(0% 0 0 / 0.55);
    --bg-photo-viewer-video-progress: oklch(100% 0 0 / 0.18);
    --bg-photo-viewer-video-progress-fill: var(--utility-blue-300);
    --ring-photo-viewer-focus: 0 0 0 2px var(--border-info);
    --stroke-spark-width: 2;
    --stroke-spark: var(--utility-blue-400);
    --fill-spark-area: var(--alpha-0);
    --border-spark-grid: var(--utility-neutral-700);
    --marker-spark: var(--stroke-spark);
    --size-spark-marker: 0;
    --size-spark-marker-hover: 3;
    --border-spark-setpoint: var(--alpha-neutral-400-40);
    --border-spark-deadband: var(--alpha-neutral-400-40);
    --border-spark-warn: var(--alpha-yellow-300-50);
    --bg-spark-tooltip: var(--utility-neutral-800);
    --text-spark-tooltip: var(--alpha-white-100);
    --border-spark-tooltip: var(--utility-neutral-700);
    --apex-text: var(--utility-neutral-200);
    --apex-text-muted: var(--utility-neutral-400);
    --apex-border: var(--utility-neutral-700);
    --apex-border-accent: var(--utility-neutral-300);
    --apex-bg-surface: transparent;
    --apex-bg-subtle: var(--utility-neutral-800);
    --apex-bg-popover: var(--utility-neutral-800);
    --apex-legend-text: var(--utility-neutral-200);
    --apex-tooltip-text: var(--alpha-white-100);
    --apex-tooltip-bg: var(--utility-neutral-800);
    --apex-tooltip-border: var(--utility-neutral-700);
    --apex-tooltip-shadow: var(--shadow-xl);
    --apex-tooltip-marker-border: transparent;
    --apex-crosshair-opacity: .35;
    --apex-selection-fill-opacity: .08;
    --apex-selection-stroke-opacity: .35;
    --apex-datalabel-text: var(--utility-neutral-200);
    --apex-nodata-text: var(--utility-neutral-400);
    --apex-loading-text: var(--utility-neutral-400);
    --apex-toolbar-ink: var(--utility-neutral-200);
    --apex-pie-label-text: var(--alpha-white-100);
    --apex-radial-value-text: var(--utility-neutral-200);
    --apex-radial-track: var(--utility-neutral-700);
    --apex-heatmap-stroke: var(--utility-neutral-800);
    --apex-annotation-text: var(--utility-neutral-200);
    --apex-annotation-bg: var(--utility-neutral-800);
    --apex-annotation-border: var(--utility-neutral-700);
    --apex-series-1: var(--utility-blue-400);
    --apex-series-2: var(--utility-green-400);
    --apex-series-3: var(--utility-yellow-400);
    --apex-series-4: var(--utility-teal-400);
    --apex-series-5: var(--utility-indigo-400);
    --apex-series-6: var(--utility-pink-400);
    --apex-series-7: var(--utility-amber-400);
    --apex-series-8: var(--utility-red-400);
    --apex-series-9: var(--utility-purple-400);
    --apex-series-10: var(--utility-neutral-400);
    --apex-series-11: var(--utility-orange-400);
    --apex-series-12: var(--utility-lime-400);
    --apex-series-line-1: var(--utility-neutral-200);
    --apex-series-line-2: var(--utility-blue-300);
    --apex-series-line-3: var(--utility-yellow-400);
    --apex-series-line-4: var(--utility-teal-400);
    --apex-series-line-5: var(--utility-indigo-400);
    --apex-series-line-6: var(--utility-pink-400);
    --apex-series-line-7: var(--utility-amber-400);
    --apex-series-line-8: var(--utility-red-400);
    --apex-series-line-9: var(--utility-purple-400);
    --apex-series-line-10: var(--utility-neutral-400);
    --apex-series-line-11: var(--utility-orange-400);
    --apex-series-line-12: var(--utility-lime-400);
    --apex-series-pie-1: var(--utility-blue-400);
    --apex-series-pie-2: var(--utility-green-400);
    --apex-series-pie-3: var(--utility-yellow-400);
    --apex-series-pie-4: var(--utility-teal-400);
    --apex-series-pie-5: var(--utility-indigo-400);
    --apex-series-pie-6: var(--utility-pink-400);
    --apex-series-pie-7: var(--utility-amber-400);
    --apex-series-pie-8: var(--utility-red-400);
    --apex-series-pie-9: var(--utility-purple-400);
    --apex-series-pie-10: var(--utility-neutral-400);
    --apex-series-pie-11: var(--utility-orange-400);
    --apex-series-pie-12: var(--utility-lime-400);
    --apex-series-bar-1: var(--utility-blue-400);
    --apex-series-bar-2: var(--utility-green-400);
    --apex-series-bar-3: var(--utility-yellow-400);
    --apex-series-bar-4: var(--utility-teal-400);
    --apex-series-bar-5: var(--utility-indigo-400);
    --apex-series-bar-6: var(--utility-pink-400);
    --apex-series-bar-7: var(--utility-amber-400);
    --apex-series-bar-8: var(--utility-red-400);
    --apex-series-bar-9: var(--utility-purple-400);
    --apex-series-bar-10: var(--utility-neutral-400);
    --apex-series-bar-11: var(--utility-orange-400);
    --apex-series-bar-12: var(--utility-lime-400);
    --apex-series-radial-1: var(--utility-blue-400);
    --apex-series-radial-2: var(--utility-green-400);
    --apex-series-radial-3: var(--utility-yellow-400);
    --apex-series-radial-4: var(--utility-teal-400);
    --apex-series-radial-5: var(--utility-indigo-400);
    --apex-series-radial-6: var(--utility-pink-400);
    --apex-series-radial-7: var(--utility-amber-400);
    --apex-series-radial-8: var(--utility-red-400);
    --apex-series-radial-9: var(--utility-purple-400);
    --apex-series-radial-10: var(--utility-neutral-400);
    --apex-series-radial-11: var(--utility-orange-400);
    --apex-series-radial-12: var(--utility-lime-400);
    --apex-series-heatmap-1: var(--utility-blue-400);
    --apex-series-heatmap-2: var(--utility-green-400);
    --apex-series-heatmap-3: var(--utility-yellow-400);
    --apex-series-heatmap-4: var(--utility-teal-400);
    --apex-series-heatmap-5: var(--utility-indigo-400);
    --apex-series-heatmap-6: var(--utility-pink-400);
    --apex-series-heatmap-7: var(--utility-amber-400);
    --apex-series-heatmap-8: var(--utility-red-400);
    --apex-series-heatmap-9: var(--utility-purple-400);
    --apex-series-heatmap-10: var(--utility-neutral-400);
    --apex-series-heatmap-11: var(--utility-orange-400);
    --apex-series-heatmap-12: var(--utility-lime-400);
    --apex-fill-opacity-from: 0.35;
    --apex-fill-opacity-to: 0.05;
    --apex-marker-size: 2;
    --apex-marker-stroke: 1;
    --apex-marker-hover-offset: 2;
    --apex-line-stroke: 1;
    --apex-donut-value-size: 12;
    --apex-donut-name-size: 11;
    --apex-donut-total-size: 12;
    --apex-bar-column-width: 55%;
    --apex-bar-radius: 0;
    --apex-bar-ending-shape: flat;
    --apex-bar-datalabels: off;
    --apex-candle-up: var(--utility-green-400);
    --apex-candle-down: var(--utility-red-400);
    --apex-candle-up-bg: oklch(35% 0.12 145 / 0.35);
    --apex-candle-down-bg: oklch(35% 0.13 30  / 0.35);
    --apex-boxplot-fill: oklch(35% 0.13 250 / 0.35);
    --apex-boxplot-stroke: var(--utility-blue-400);
    --apex-boxplot-whisker: var(--utility-neutral-500);
    --apex-boxplot-median: var(--utility-blue-200);
    --apex-brush-fill: oklch(70% 0.13 250 / 0.16);
    --apex-brush-stroke: var(--utility-blue-400);
    --apex-annotation-accent: var(--utility-red-400);
    --apex-annotation-success: var(--utility-green-400);
    --bg-chart-card: var(--utility-neutral-900);
    --bg-chart-card-header: transparent;
    --border-chart-card: var(--utility-neutral-800);
    --shadow-chart-card: 0 1px 2px oklch(0% 0 0 / 0.35);
    --shadow-chart-card-hover: 0 4px 12px oklch(0% 0 0 / 0.45);
    --text-chart-card-title: var(--utility-neutral-50);
    --text-chart-card-sub: var(--utility-neutral-400);
    --text-chart-card-meta: var(--utility-neutral-500);
    --bg-chart-card-glass: oklch(20% 0.005 250 / 0.55);
    --border-chart-card-glass: oklch(100% 0 0 / 0.06);
    --bg-chart-kpi: var(--bg-chart-card);
    --border-chart-kpi: var(--border-chart-card);
    --text-chart-kpi-value: var(--utility-neutral-50);
    --text-chart-kpi-label: var(--utility-neutral-400);
    --text-chart-kpi-delta-up: var(--utility-green-300);
    --text-chart-kpi-delta-dn: var(--utility-red-300);
    --bg-chart-kpi-delta-up: oklch(35% 0.12 145 / 0.35);
    --bg-chart-kpi-delta-dn: oklch(35% 0.13 30 / 0.35);
    --bg-chart-skeleton: var(--utility-neutral-800);
    --bg-chart-skeleton-sweep: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / 0.10) 50%, transparent 70%);
    --bg-chart-no-data: var(--utility-neutral-850);
    --text-chart-no-data: var(--utility-neutral-500);
    --text-autocomplete: var(--utility-neutral-100);
    --bg-autocomplete: var(--utility-neutral-800);
    --border-autocomplete: var(--utility-neutral-800);
    --text-autocomplete-item: var(--alpha-white-100);
    --text-autocomplete-active: var(--alpha-white-100);
    --bg-autocomplete-active: var(--utility-blue-500);
    --bg-activity-log-header: var(--utility-neutral-800);
    --bg-activity-log-panel: var(--utility-neutral-900);
    --bg-activity-log-footer: var(--utility-neutral-800);
    --text-post-owner: var(--alpha-white-100);
    --text-post-public: var(--alpha-white-100);
    --text-post-system: var(--utility-neutral-400);
    --text-post-date: var(--utility-neutral-300);
    --bg-post-owner: var(--alpha-indigo-900-80);
    --bg-post-public: var(--alpha-neutral-700-60);
    --bg-post-actions: var(--utility-neutral-900);
    --border-post-actions: var(--utility-neutral-800);
    --bg-thumbnail: var(--alpha-0);
    --border-thumbnail: var(--alpha-0);
    --bg-thumbnail-img: var(--alpha-0);
    --bg-thumbnail-remove: var(--alpha-neutral-950-60);
    --bg-thumbnail-remove-hover: var(--utility-neutral-600);
    --text-thumbnail-remove: var(--alpha-white-100);
    --border-thumbnail-remove: var(--alpha-0);
    --bg-gallery-header: var(--utility-neutral-900);
    --text-gallery-header: var(--utility-neutral-100);
    --border-gallery-header: var(--alpha-0);
    --bg-gallery-card: var(--utility-neutral-800);
    --border-gallery-card: var(--utility-neutral-700);
    --text-gallery-card: var(--alpha-white-100);
    --bg-gallery-card-hover: var(--utility-neutral-700);
    --bg-gallery-card-active: var(--utility-neutral-800);
    --border-gallery-card-hover: var(--utility-neutral-700);
    --bg-kanban: var(--alpha-neutral-950-20);
    --bg-kanban-header: var(--alpha-neutral-950-20);
    --bg-kanban-list: var(--alpha-neutral-950-20);
    --bg-kanban-card: var(--utility-neutral-800);
    --bg-kanban-card-hover: var(--alpha-neutral-700-60);
    --bg-kanban-card-active: var(--utility-neutral-800);
    --border-kanban: var(--utility-neutral-700);
    --border-kanban-card: var(--utility-neutral-700);
    --icon-kanban-muted: var(--text-tertiary);
    --text-kanban: var(--text-primary);
    --text-kanban-header: var(--text-secondary);
    --radius-kanban: var(--radius-lg);
    --radius-kanban-card: var(--radius-lg);
    --shadow-kanban-card-drag: var(--shadow-xl);
    --bg-kanban-col: var(--alpha-neutral-950-20);
    --bg-kanban-drop-target: color-mix(in oklab, var(--alpha-neutral-950-20), var(--text-info) 8%);
    --border-drop-target: var(--border-info);
    --bg-kanban-drop-invalid: color-mix(in oklab, var(--alpha-neutral-950-20), var(--text-danger) 8%);
    --border-drop-invalid: var(--border-danger);
    --bg-kanban-wip-full: var(--bg-danger-subtle);
    --text-kanban-wip-full: var(--text-danger);
    --text-kanban-wip: var(--text-tertiary);
    --bg-kanban-wip: transparent;
    --border-kanban-selected: var(--text-info);
    --bg-kanban-card-media: var(--utility-neutral-700);
    --text-kanban-accent: var(--border-focus);
    --bg-mob-chassis: #a1a1aa;
    --bg-mob-chassis-edge: rgba(255, 255, 255, 0.18);
    --height-mobile-header: 56px;
    --height-mobile-bottom-nav: 64px;
    --height-mobile-fab: 56px;
    --bg-mobile-shell: var(--bg-primary);
    --bg-mobile-header: var(--bg-card);
    --bg-mobile-bottom-nav: var(--bg-card);
    --bg-mobile-panel: var(--bg-card);
    --bg-mobile-sheet: var(--bg-card);
    --bg-mobile-floating-menu: var(--bg-card);
    --bg-mobile-card: var(--bg-card);
    --bg-mobile-row-active: rgba(255, 255, 255, 0.06);
    --text-mobile-primary: var(--text-primary);
    --text-mobile-muted: var(--text-tertiary);
    --text-mobile-onAccent: #ffffff;
    --border-mobile-panel: var(--border-card);
    --border-mobile-divider: var(--border-divider);
    --shadow-mobile-floating: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-mobile-sheet: 0 -10px 32px rgba(0, 0, 0, 0.55);
    --shadow-mobile-header: 0 1px 0 rgba(255, 255, 255, 0.04);
    --radius-mobile-sheet: 20px;
    --radius-mobile-card: 12px;
    --radius-mobile-chip: 999px;
    --z-mobile-overlay: 45;
    --z-mobile-sheet: 50;
    --z-mobile-drawer: 55;
    --z-mobile-header: 30;
    --z-mobile-bottom-nav: 30;
    --z-mobile-fab: 40;
    --bg-mapbox-popup: var(--bg-card);
    --bg-mapbox-popup-tip: var(--bg-card);
    --border-mapbox-popup: var(--border-card);
    --shadow-mapbox-popup: var(--shadow-lg);
    --bg-mapbox-control: var(--bg-card);
    --text-mapbox-control: var(--text-primary);
    --border-mapbox-control: var(--border-card);
    --bg-mapbox-attrib: color-mix(in oklch, var(--bg-card) 85%, transparent);
    --text-mapbox-attrib: var(--text-tertiary);
    --bg-mapbox-cluster: var(--bg-brand-solid);
    --text-mapbox-cluster: var(--text-on-brand);
    --bg-mapbox-cluster-ring: color-mix(in oklch, var(--bg-brand-solid) 30%, transparent);
    --text-mapbox: var(--text-primary);
    --border-mapbox-origin-marker: var(--alpha-white-30);
    --border-mapbox-destination-marker: var(--alpha-white-30);
    --border-mapbox-origin-marker-disc: var(--alpha-white-40);
    --border-mapbox-destination-marker-disc: var(--alpha-white-40);
    --border-mapbox-stop-marker: var(--alpha-white-40);
    --border-mapbox-stop-marker-disc: var(--alpha-white-30);
    --bg-mapbox-origin-marker: var(--alpha-white-100);
    --bg-mapbox-destination-marker: var(--alpha-white-100);
    --bg-mapbox-stop-marker: var(--alpha-white-100);
    --bg-mapbox-origin-marker-disc: var(--alpha-white-40);
    --bg-mapbox-destination-marker-disc: var(--alpha-white-40);
    --bg-mapbox-stop-marker-disc: var(--alpha-white-30);
    --bg-origin-marker: var(--utility-neutral-300);
    --bg-destination-marker: var(--utility-neutral-300);
    --bg-stop-marker: var(--utility-neutral-300);
    --bg-route-connector: var(--utility-neutral-500);
    --bg-mapbox-route-primary: var(--utility-blue-400);
    --bg-mapbox-route-secondary: var(--utility-orange-400);
    --bg-mapbox-route-success: var(--utility-green-400);
    --bg-mapbox-route-danger: var(--utility-red-400);
    --bg-mapbox-route-casing: var(--utility-neutral-950);
    --bg-modal: var(--utility-neutral-850);
    --text-modal: var(--alpha-white-100);
    --border-modal: var(--alpha-neutral-700-60);
    --border-modal-header: var(--border-primary);
    --border-modal-divider: var(--utility-neutral-800);
    --bg-wizard-content: var(--utility-neutral-900);
    --modal-backdrop-blur: 0;
    --modal-grain-opacity: 0;
    --bg-modal-overlay: var(--alpha-neutral-950-50);
    --bg-lightbox: oklch(6% 0.005 250 / 0.94);
    --bg-lightbox-overlay: oklch(0% 0 0 / 0.50);
    --opacity-lightbox-overlay: 0.50;
    --bg-lightbox-surface: oklch(100% 0 0 / 0.05);
    --bg-lightbox-control: oklch(100% 0 0 / 0.08);
    --bg-lightbox-control-hover: oklch(100% 0 0 / 0.14);
    --bg-lightbox-control-active: oklch(100% 0 0 / 0.20);
    --bg-lightbox-thumbnail: oklch(100% 0 0 / 0.05);
    --bg-lightbox-thumbnail-active: oklch(100% 0 0 / 0.16);
    --text-lightbox: oklch(100% 0 0 / 0.92);
    --text-lightbox-muted: oklch(100% 0 0 / 0.60);
    --border-lightbox: oklch(100% 0 0 / 0.08);
    --border-lightbox-thumbnail: oklch(100% 0 0 / 0.12);
    --border-lightbox-thumbnail-active: oklch(100% 0 0 / 0.70);
    --ring-lightbox-focus: oklch(72% 0.16 240 / 0.95);
    --shadow-lightbox: 0 12px 32px -8px oklch(0% 0 0 / 0.6);
    --bg-cam: #000;
    --bg-cam-controls: rgba(0, 0, 0, 0.9);
    --bg-cam-btn: rgba(255, 255, 255, 0.1);
    --bg-cam-btn-hover: rgba(255, 255, 255, 0.18);
    --bg-cam-btn-active: rgba(255, 255, 255, 0.06);
    --text-cam: #fff;
    --text-cam-muted: rgba(255, 255, 255, 0.5);
    --border-cam-btn: rgba(255, 255, 255, 0.12);
    --bg-cam-shutter: #fff;
    --bg-cam-shutter-hover: rgba(255, 255, 255, 0.85);
    --bg-cam-shutter-ring: rgba(255, 255, 255, 0.25);
    --bg-cam-shutter-recording: #ef4444;
    --bg-cam-torch-active: rgba(255, 220, 50, 0.2);
    --border-cam-torch-active: rgba(255, 220, 50, 0.5);
    --text-cam-torch-active: #ffdc32;
    --bg-cam-scan-frame: transparent;
    --border-cam-scan-frame: rgba(255, 255, 255, 0.6);
    --bg-cam-scan-overlay: rgba(0, 0, 0, 0.6);
    --bg-cam-badge: rgba(0, 0, 0, 0.7);
    --bg-cam-badge-success: #22c55e;
    --bg-cam-badge-danger: #ef4444;
    --bg-notification-header: var(--utility-neutral-800);
    --bg-notification-card: var(--utility-neutral-800);
    --bg-notification-card-hover: var(--alpha-neutral-700-60);
    --bg-selection: var(--utility-blue-500);
    --text-selection: var(--alpha-white-100);
    --bg-input-selection: var(--utility-blue-500);
    --text-input-selection: var(--alpha-white-100);
    --bg-carousel: oklch(8% 0 0);
    --bg-carousel-surface: var(--utility-neutral-900);
    --bg-carousel-overlay: oklch(0% 0 0 / 0.55);
    --bg-carousel-overlay-soft: linear-gradient(180deg, transparent 0%, oklch(0% 0 0 / 0.55) 100%);
    --bg-carousel-overlay-top: linear-gradient(180deg, oklch(0% 0 0 / 0.45) 0%, transparent 60%);
    --bg-carousel-control: oklch(100% 0 0 / 0.10);
    --bg-carousel-control-hover: oklch(100% 0 0 / 0.18);
    --bg-carousel-control-active: oklch(100% 0 0 / 0.28);
    --text-carousel-control: oklch(100% 0 0);
    --border-carousel-control: oklch(100% 0 0 / 0.12);
    --bg-carousel-indicator: oklch(100% 0 0 / 0.35);
    --bg-carousel-indicator-hover: oklch(100% 0 0 / 0.65);
    --bg-carousel-indicator-active: oklch(100% 0 0);
    --bg-carousel-thumbnail: var(--utility-neutral-800);
    --bg-carousel-thumbnail-hover: var(--utility-neutral-700);
    --bg-carousel-thumbnail-active: var(--utility-neutral-700);
    --border-carousel-thumbnail: var(--utility-neutral-800);
    --border-carousel-thumbnail-active: var(--utility-blue-400);
    --bg-carousel-thumb-rail: var(--utility-neutral-900);
    --text-carousel: oklch(100% 0 0);
    --text-carousel-muted: oklch(100% 0 0 / 0.72);
    --text-carousel-meta: oklch(100% 0 0 / 0.6);
    --text-carousel-on-light: var(--utility-neutral-50);
    --text-carousel-on-light-muted: var(--utility-neutral-400);
    --border-carousel: var(--utility-neutral-800);
    --radius-carousel: 0.75rem;
    --shadow-carousel: 0 1px 2px oklch(0% 0 0 / 0.35), 0 6px 18px oklch(0% 0 0 / 0.45);
    --ring-carousel-focus: 0 0 0 2px oklch(70% 0.13 250 / 0.55);
    --bg-carousel-counter: oklch(0% 0 0 / 0.55);
    --text-carousel-counter: oklch(100% 0 0);
    --bg-carousel-status: oklch(0% 0 0 / 0.55);
    --bg-carousel-progress-track: oklch(100% 0 0 / 0.15);
    --bg-carousel-progress-fill: oklch(100% 0 0);
    --bg-carousel-empty: var(--utility-neutral-900);
    --bg-carousel-error: oklch(28% 0.13 30 / 0.5);
    --text-carousel-error: var(--utility-red-300);
    --bg-carousel-skeleton: var(--utility-neutral-800);
    --bg-carousel-skeleton-sweep: linear-gradient(115deg, transparent 30%, oklch(100% 0 0 / 0.10) 50%, transparent 70%);
    --bg-mail-app: var(--bg-surface);
    --bg-mail-toolbar: var(--utility-neutral-900);
    --bg-mail-search: var(--utility-neutral-800);
    --border-mail-search: var(--utility-neutral-700);
    --bg-mail-sidebar: var(--utility-neutral-900);
    --border-mail-sidebar: var(--utility-neutral-800);
    --bg-mail-folder-hover: var(--utility-neutral-850);
    --bg-mail-folder-active: color-mix(in oklch, var(--color-brand-400) 20%, transparent);
    --text-mail-folder: var(--text-secondary);
    --text-mail-folder-active: var(--text-link);
    --text-mail-folder-count: var(--text-tertiary);
    --bg-mail-folder-count-active: var(--bg-brand-solid);
    --text-mail-folder-count-active: var(--text-on-brand);
    --text-mail-sidebar-section: var(--text-tertiary);
    --bg-mail-list: var(--utility-neutral-900);
    --border-mail-list: var(--utility-neutral-800);
    --bg-mail-item: transparent;
    --bg-mail-item-hover: var(--utility-neutral-850);
    --bg-mail-item-active: color-mix(in oklch, var(--color-brand-400) 20%, transparent);
    --bg-mail-item-selected: color-mix(in oklch, var(--color-brand-400) 20%, transparent);
    --bg-mail-item-unread: var(--utility-neutral-900);
    --border-mail-item-divider: var(--utility-neutral-850);
    --border-mail-item-active: var(--border-focus);
    --bg-mail-item-new-flash: oklch(30% 0.10 90 / 0.30);
    --bg-mail-unread-dot: var(--color-brand-400);
    --text-mail-item: var(--text-primary);
    --text-mail-sender: var(--text-primary);
    --text-mail-subject: var(--text-primary);
    --text-mail-preview: var(--text-tertiary);
    --text-mail-time: var(--text-tertiary);
    --text-mail-star: var(--utility-neutral-500);
    --text-mail-star-active: var(--utility-amber-400);
    --text-mail-pin: var(--utility-amber-400);
    --text-mail-snoozed: var(--utility-blue-400);
    --text-mail-flagged: var(--utility-red-400);
    --text-mail-replied: var(--utility-green-400);
    --text-mail-forwarded: var(--utility-blue-400);
    --text-mail-important: var(--utility-amber-400);
    --text-mail-encrypted: var(--utility-purple-400);
    --text-mail-draft: var(--utility-orange-400);
    --bg-mail-priority-high: var(--utility-red-400);
    --bg-mail-priority-normal: transparent;
    --bg-mail-priority-low: var(--utility-neutral-500);
    --bg-mail-label-blue: oklch(28% 0.10 250 / 0.5);
    --text-mail-label-blue: var(--utility-blue-300);
    --bg-mail-label-green: oklch(28% 0.10 145 / 0.5);
    --text-mail-label-green: var(--utility-green-300);
    --bg-mail-label-amber: oklch(28% 0.10 75 / 0.5);
    --text-mail-label-amber: var(--utility-amber-300);
    --bg-mail-label-red: oklch(28% 0.10 30 / 0.5);
    --text-mail-label-red: var(--utility-red-300);
    --bg-mail-label-purple: oklch(28% 0.10 295 / 0.5);
    --text-mail-label-purple: var(--utility-purple-300);
    --bg-mail-label-pink: oklch(28% 0.10 340 / 0.5);
    --text-mail-label-pink: var(--utility-pink-300);
    --bg-mail-label-teal: oklch(28% 0.10 200 / 0.5);
    --text-mail-label-teal: var(--utility-teal-300);
    --bg-mail-label-orange: oklch(28% 0.13 50 / 0.5);
    --text-mail-label-orange: var(--utility-orange-300);
    --bg-mail-label-indigo: oklch(28% 0.10 270 / 0.5);
    --text-mail-label-indigo: var(--utility-indigo-300);
    --bg-mail-label-neutral: var(--utility-neutral-800);
    --text-mail-label-neutral: var(--utility-neutral-300);
    --bg-mail-detail: var(--utility-neutral-900);
    --border-mail-detail: var(--utility-neutral-800);
    --bg-mail-detail-toolbar: oklch(20% 0 0 / 0.9);
    --bg-mail-quoted: var(--utility-neutral-850);
    --border-mail-quoted: var(--utility-neutral-700);
    --text-mail-quoted-toggle: var(--text-link);
    --bg-mail-compose: var(--utility-neutral-900);
    --border-mail-compose: var(--utility-neutral-800);
    --shadow-mail-compose: 0 8px 24px oklch(0% 0 0 / 0.5), 0 2px 6px oklch(0% 0 0 / 0.3);
    --bg-mail-compose-toolbar: var(--utility-neutral-850);
    --bg-mail-compose-footer: var(--utility-neutral-850);
    --text-mail-draft-dot: var(--utility-orange-400);
    --bg-mail-recipient: var(--utility-neutral-800);
    --bg-mail-recipient-hover: var(--utility-neutral-700);
    --bg-mail-recipient-internal: oklch(30% 0.10 250 / 0.5);
    --text-mail-recipient-internal: var(--utility-blue-300);
    --bg-mail-recipient-external: oklch(30% 0.12 75 / 0.5);
    --text-mail-recipient-external: var(--utility-amber-300);
    --bg-mail-recipient-group: oklch(30% 0.10 295 / 0.5);
    --text-mail-recipient-group: var(--utility-purple-300);
    --bg-mail-recipient-invalid: oklch(30% 0.13 30 / 0.5);
    --text-mail-recipient-invalid: var(--utility-red-300);
    --bg-mail-banner: oklch(28% 0.08 250 / 0.5);
    --text-mail-banner: var(--utility-blue-200);
    --border-mail-banner: var(--utility-blue-400);
    --bg-mail-selection-bar: color-mix(in oklch, var(--color-brand-400) 18%, transparent);
    --text-mail-selection-bar: var(--text-link);
    --border-mail-selection-bar: color-mix(in oklch, var(--color-brand-400) 35%, transparent);
    --bg-mail-category-tab: transparent;
    --bg-mail-category-tab-active: var(--utility-neutral-800);
    --text-mail-category-tab: var(--text-tertiary);
    --text-mail-category-tab-active: var(--text-primary);
    --border-mail-category-tab-active: var(--border-focus);
    --bg-mail-filter-chip: var(--utility-neutral-800);
    --bg-mail-filter-chip-active: var(--bg-brand-solid);
    --text-mail-filter-chip: var(--text-secondary);
    --text-mail-filter-chip-active: oklch(100% 0 0);
    --bg-mail-sender-card: var(--utility-neutral-850);
    --border-mail-sender-card: var(--utility-neutral-700);
    --shadow-mail-sender-card: 0 8px 24px oklch(0% 0 0 / 0.55);
    --ring-mail-focus: inset 0 0 0 2px var(--border-focus);
    --text-tooltip: var(--text-primary);
    --bg-tooltip: var(--utility-neutral-800);
    --border-dropzone: var(--utility-neutral-600);
    --text-dropzone: var(--utility-neutral-400);
    --bg-dropzone: var(--utility-neutral-700);
    --bg-flatpickr-calendar: var(--utility-neutral-800);
    --border-flatpickr-calendar: var(--utility-neutral-700);
    --text-flatpickr-primary: var(--utility-neutral-100);
    --text-flatpickr-months: var(--utility-neutral-300);
    --text-flatpickr-months-hover: var(--alpha-white-100);
    --text-flatpickr: var(--utility-neutral-100);
    --text-flatpickr-hover: var(--alpha-white-100);
    --text-flatpickr-disabled: var(--utility-neutral-600);
    --text-flatpickr-selected: var(--alpha-white-100);
    --text-flatpickr-selected-hover: var(--alpha-white-100);
    --text-flatpickr-time: var(--utility-neutral-200);
    --bg-flatpickr: var(--alpha-0);
    --bg-flatpickr-primary: var(--utility-neutral-800);
    --flatpickr-color-scheme: dark;
    --bg-flatpickr-hover: var(--utility-neutral-700);
    --bg-flatpickr-selected: var(--utility-blue-500);
    --bg-flatpickr-selected-hover: var(--utility-blue-400);
    --bg-flatpickr-time-hover: var(--alpha-neutral-700-30);
    --border-flatpickr-hover: var(--utility-neutral-600);
    --border-flatpickr-selected: var(--utility-blue-500);
    --border-flatpickr-selected-hover: var(--utility-blue-400);
    --border-flatpickr-time: var(--utility-neutral-700);
    --bg-flatpickr-today: color-mix(in oklch, var(--color-brand-400) 18%, transparent);
    --bg-flatpickr-today-hover: color-mix(in oklch, var(--color-brand-400) 28%, transparent);
    --bg-quill-editor: var(--alpha-neutral-700-60);
    --text-quill-editor: var(--alpha-white-100);
    --border-quill-editor: var(--alpha-0);
    --text-quill-placeholder: var(--utility-neutral-500);
    --border-quill-container: var(--alpha-0);
    --bg-quill-content: var(--alpha-0);
    --text-quill-content: var(--alpha-white-100);
    --text-quill-checkbox: var(--alpha-white-100);
    --bg-quill-black: var(--utility-neutral-900);
    --bg-quill-red: var(--utility-red-500);
    --bg-quill-orange: var(--utility-orange-500);
    --bg-quill-yellow: var(--utility-yellow-500);
    --bg-quill-green: var(--utility-green-500);
    --bg-quill-blue: var(--utility-blue-500);
    --bg-quill-purple: var(--utility-purple-500);
    --text-quill-white: var(--alpha-white-100);
    --text-quill-red: var(--utility-red-500);
    --text-quill-orange: var(--utility-orange-500);
    --text-quill-yellow: var(--utility-yellow-500);
    --text-quill-green: var(--utility-green-500);
    --text-quill-blue: var(--utility-blue-500);
    --text-quill-purple: var(--utility-purple-500);
    --bg-quill-toolbar: var(--alpha-0);
    --text-quill-toolbar: var(--utility-neutral-100);
    --border-quill-toolbar: var(--alpha-0);
    --text-quill-button: var(--utility-neutral-300);
    --text-quill-button-hover: var(--utility-neutral-100);
    --text-quill-button-touch-hover: var(--utility-neutral-300);
    --fill-quill-touch-hover: var(--utility-neutral-100);
    --stroke-quill-touch-hover: var(--utility-neutral-100);
    --text-quill-picker-hover: var(--utility-neutral-100);
    --bg-quill-tooltip: var(--alpha-0);
    --text-quill-tooltip: var(--utility-neutral-300);
    --border-quill-tooltip: var(--alpha-0);
    --text-quill-link: var(--utility-neutral-300);
    --text-quill-link-hover: var(--utility-neutral-200);
    --text-quill-link-active: var(--utility-neutral-300);
    --bg-quill-input: var(--utility-neutral-100);
    --text-quill-input: var(--utility-neutral-100);
    --border-quill-input: var(--border-input);
    --border-quill-input-hover: var(--border-input-hover);
    --border-quill-input-focus: var(--border-input-active);
    --stroke-quill-default: var(--utility-neutral-400);
    --stroke-quill-hover: var(--utility-neutral-200);
    --fill-quill-default: var(--utility-neutral-400);
    --fill-quill-hover: var(--utility-neutral-200);
    --bg-quill-code: var(--alpha-0);
    --bg-calendar-container: var(--utility-neutral-800);
    --border-calendar-divider: var(--utility-neutral-800);
    --border-calendar-divider-header: var(--alpha-neutral-700-60);
    --border-calendar-divider-time: var(--alpha-neutral-700-60);
    --text-calendar-time-label: var(--alpha-white-100);
    --text-calendar-time: var(--alpha-white-100);
    --text-calendar-day-label: var(--utility-neutral-100);
    --text-calendar-day-date: var(--utility-neutral-300);
    --text-calendar-day-header: var(--alpha-white-100);
    --text-calendar-closed: var(--text-disabled);
    --bg-calendar-day-header: var(--utility-neutral-800);
    --bg-calendar-time-slot: var(--utility-neutral-800);
    --bg-calendar-day-slot: var(--utility-neutral-900);
    --bg-calendar-indicator-today: var(--alpha-white-100);
    --bg-calendar-footer: var(--alpha-0);
    --bg-appointment-card: var(--utility-neutral-800);
    --bg-appointment-card-hover: var(--alpha-neutral-700-60);
    --border-appointment-card: var(--utility-neutral-700);
    --text-appointment-card: var(--alpha-white-100);
    --text-appointment-number: var(--alpha-white-100);
    --text-appointment-gap: var(--text-danger);
    --text-appointment-note: var(--text-danger);
    --text-appointment-carrier: var(--utility-neutral-200);
    --text-appointment-comment: var(--alpha-white-100);
    --text-appointment-origin: var(--utility-neutral-300);
    --text-appointment-refs: var(--utility-neutral-400);
    --text-appointment-equipment-id: var(--alpha-white-100);
    --bg-appointment-comment: var(--alpha-neutral-700-60);
    --border-appointment-comment: var(--utility-neutral-700);
    --border-appointment-toggle-btn: var(--utility-neutral-800);
    --text-appointment-icon-float: var(--utility-yellow-300);
    --text-appointment-icon-log: var(--utility-orange-300);
    --text-appointment-icon-secondary: var(--utility-neutral-300);
    --text-appointment-icon-audit: var(--utility-blue-300);
    --text-schedule-day-label: var(--utility-neutral-400);
    --text-schedule-day: var(--alpha-white-100);
    --text-schedule-day-available: var(--alpha-white-100);
    --text-schedule-day-active: var(--alpha-white-100);
    --bg-schedule-day: var(--alpha-0);
    --bg-schedule-day-hover: var(--utility-neutral-700);
    --bg-schedule-day-available: var(--utility-neutral-700);
    --bg-schedule-day-available-hover: var(--utility-neutral-700);
    --bg-schedule-day-available-active: var(--utility-neutral-700);
    --bg-schedule-day-active: var(--utility-blue-500);
    --bg-schedule-day-active-hover: var(--utility-blue-500);
    --bg-schedule-day-active-pressed: var(--utility-blue-500);
    --bg-schedule-indicator-current: var(--alpha-white-100);
    --border-schedule-day-available: var(--utility-neutral-700);
    --bg-cal-booking: var(--utility-neutral-900);
    --border-cal-booking: var(--utility-neutral-700);
    --text-cal-booking-weekday: var(--utility-neutral-400);
    --text-cal-booking-day: var(--utility-neutral-200);
    --text-cal-booking-day-outside: var(--utility-neutral-600);
    --text-cal-booking-day-disabled: var(--utility-neutral-600);
    --bg-cal-booking-day: var(--alpha-0);
    --bg-cal-booking-day-hover: var(--utility-neutral-800);
    --bg-cal-booking-day-active: var(--utility-neutral-850);
    --border-cal-booking-day: transparent;
    --border-cal-booking-day-hover: transparent;
    --bg-cal-booking-available: var(--utility-neutral-800);
    --bg-cal-booking-available-hover: var(--utility-neutral-700);
    --border-cal-booking-available: var(--utility-neutral-600);
    --text-cal-booking-available: var(--alpha-white-100);
    --bg-cal-booking-selected: var(--utility-blue-500);
    --bg-cal-booking-selected-hover: var(--utility-blue-400);
    --text-cal-booking-selected: var(--alpha-white-100);
    --border-cal-booking-selected: var(--utility-blue-500);
    --bg-cal-booking-today: var(--alpha-0);
    --border-cal-booking-today: var(--alpha-white-100);
    --text-cal-booking-today: var(--alpha-white-100);
    --bg-cal-booking-today-dot: var(--alpha-white-100);
    --bg-cal-booking-dot-available: var(--utility-green-400);
    --bg-cal-booking-dot-booked: var(--utility-blue-400);
    --bg-cal-booking-dot-busy: var(--utility-orange-400);
    --bg-cal-booking-dot-full: var(--utility-red-400);
    --bg-cal-booking-elevated: var(--utility-neutral-800);
    --border-cal-booking-elevated: var(--utility-neutral-700);
    --shadow-cal-booking-elevated: none;
    --shadow-cal-booking-elevated-hover: var(--shadow-sm);
    --text-cal-booking-nav: var(--utility-neutral-400);
    --text-cal-booking-nav-hover: var(--alpha-white-100);
    --text-cal-booking-month: var(--alpha-white-100);
    --h-calendar-schedule-day-header: 48px;
    --w-calendar-schedule-time-axis: 56px;
    --h-calendar-schedule-hour: 64px;
    --w-calendar-schedule-day: 180px;
    --gap-calendar-schedule: 0px;
    --radius-calendar-schedule: var(--radius-lg, 0.5rem);
    --shadow-calendar-schedule: var(--shadow-md);
    --bg-calendar-schedule: var(--utility-neutral-900);
    --bg-calendar-schedule-surface: var(--utility-neutral-850);
    --bg-calendar-schedule-muted: var(--utility-neutral-800);
    --text-calendar-schedule: var(--utility-neutral-300);
    --border-calendar-schedule: var(--utility-neutral-700);
    --border-calendar-schedule-soft: var(--utility-neutral-800);
    --bg-calendar-schedule-today: var(--utility-blue-950);
    --bg-calendar-schedule-hover: var(--utility-blue-900);
    --bg-calendar-schedule-now: var(--bg-info-solid);
    --border-calendar-schedule-now: var(--bg-info-solid);
    --bg-calendar-schedule-event: var(--utility-neutral-800);
    --border-calendar-schedule-event: var(--border-primary);
    --text-calendar-schedule-event: var(--alpha-white-100);
    --w-calendar-schedule-day-min: 80px;
    --w-calendar-schedule-day-max: none;
    --bg-calendar-schedule-today-col: var(--utility-blue-950);
    --bg-calendar-schedule-hour-stripe: var(--utility-neutral-850);
    --bg-calendar-schedule-working-hours: transparent;
    --bg-calendar-schedule-nonworking-hours: rgba(0,0,0,0.12);
    --bg-calendar-schedule-weekend: rgba(255,255,255,0.02);
    --outline-calendar-schedule-focus: var(--color-info);
    --shadow-calendar-schedule-header: var(--shadow-md);
    --shadow-calendar-event: var(--shadow-sm);
    --shadow-calendar-event-hover: var(--shadow-md);
    --shadow-calendar-event-selected: 0 0 0 2px var(--color-info);
    --bg-calendar-event-primary: var(--utility-neutral-800);
    --border-calendar-event-primary: var(--border-primary);
    --bg-calendar-event-warning: var(--utility-yellow-950);
    --border-calendar-event-warning: var(--color-warning);
    --bg-calendar-event-danger: var(--utility-red-950);
    --border-calendar-event-danger: var(--color-danger);
    --bg-calendar-event-success: var(--utility-green-950);
    --border-calendar-event-success: var(--color-success);
    --bg-calendar-event-neutral: var(--utility-neutral-850);
    --border-calendar-event-neutral: var(--utility-neutral-500);
    --bg-calendar-event-hover: var(--utility-neutral-700);
    --bg-calendar-event-primary-hover: var(--utility-neutral-700);
    --bg-calendar-event-success-hover: var(--utility-green-900);
    --bg-calendar-event-warning-hover: var(--utility-yellow-900);
    --bg-calendar-event-danger-hover: var(--utility-red-900);
    --bg-calendar-event-neutral-hover: var(--utility-neutral-700);
    --ring-calendar-event-focus: 0 0 0 4px var(--utility-blue-800);
    --bg-calendar-now-dot: var(--utility-red-400);
    --bg-calendar-now-line: var(--alpha-red-500-30);
    --bg-calendar-today-line: var(--alpha-red-500-10);
    --bg-calendar-now-dot-danger: var(--utility-red-400);
    --bg-calendar-now-line-danger: var(--alpha-red-500-30);
    --bg-calendar-today-line-danger: var(--alpha-red-500-10);
    --bg-calendar-now-dot-primary: var(--utility-neutral-100);
    --bg-calendar-now-line-primary: var(--alpha-neutral-100-20);
    --bg-calendar-today-line-primary: var(--alpha-neutral-100-10);
    --bg-calendar-now-dot-info: var(--utility-blue-400);
    --bg-calendar-now-line-info: var(--alpha-blue-500-30);
    --bg-calendar-today-line-info: var(--alpha-blue-500-10);
    --bg-calendar-now-dot-success: var(--utility-green-400);
    --bg-calendar-now-line-success: var(--alpha-green-500-30);
    --bg-calendar-today-line-success: var(--alpha-green-500-10);
    --bg-calendar-now-dot-warning: var(--utility-yellow-400);
    --bg-calendar-now-line-warning: var(--alpha-yellow-500-30);
    --bg-calendar-today-line-warning: var(--alpha-yellow-500-10);
    --h-calendar-schedule-slot: 64px;
    --h-calendar-slot-max: none;
    --gap-calendar-schedule-slot: 2px;
    --bg-calendar-schedule-cell-alt: rgba(255,255,255,0.02);
    --bg-calendar-schedule-closed: var(--utility-neutral-750, var(--utility-neutral-700));
    --w-calendar-schedule-frame-right: 240px;
    --h-calendar-schedule-frame-bottom: 48px;
    --bg-calendar-schedule-frame: var(--utility-neutral-900);
    --border-calendar-schedule-frame: var(--alpha-neutral-700-60);
    --w-calendar-schedule-day-carousel: 200px;
    --bg-inventory-grid-panel: var(--utility-neutral-900);
    --bg-inventory-card: transparent;
    --bg-inventory-card-hover: var(--utility-neutral-800);
    --border-inventory-card: transparent;
    --border-inventory-card-hover: transparent;
    --bg-inventory-image: var(--utility-neutral-800);
    --text-inventory-info: var(--alpha-white-100);
    --text-inventory-secondary: var(--utility-neutral-400);
    --bg-inventory-popover: var(--utility-neutral-800);
    --bg-inventory-popover-hover: var(--alpha-neutral-700-60);
    --text-inventory-tertiary: var(--utility-neutral-500);
    --bg-gallery: var(--utility-neutral-900);
    --bg-gallery-card-hover: var(--utility-neutral-800);
    --text-gallery-card: var(--text-primary);
    --text-gallery-header: var(--text-secondary);
    --bg-gallery-item: transparent;
    --bg-gallery-item-hover: var(--utility-neutral-800);
    --bg-gallery-item-selected: var(--bg-info-subtle);
    --bg-gallery-item-image: var(--utility-neutral-800);
    --bg-gallery-item-upload: transparent;
    --text-gallery: var(--text-primary);
    --text-gallery-muted: var(--text-tertiary);
    --border-gallery: transparent;
    --border-gallery-item: transparent;
    --border-gallery-item-hover: var(--border-divider);
    --border-gallery-item-selected: var(--text-info);
    --border-gallery-item-upload: var(--border-divider);
    --shadow-gallery-item: 0 1px 2px rgba(0,0,0,0.18);
    --shadow-gallery-item-hover: 0 6px 20px rgba(0,0,0,0.45);
    --ring-gallery-focus: 0 0 0 3px color-mix(in oklch, var(--text-info) 30%, transparent);
    --bg-navbar: var(--alpha-0);
    --border-navbar: var(--alpha-0);
    --text-navbar: var(--alpha-white-100);
    --text-navbar-link: var(--utility-neutral-300);
    --text-navbar-link-hover: var(--alpha-white-100);
    --text-navbar-link-active: var(--alpha-white-100);
    --bg-navbar-link-hover: var(--alpha-0);
    --bg-navbar-link-active: var(--alpha-0);
    --bg-navbar-dropdown: var(--utility-neutral-900);
    --border-navbar-dropdown: var(--utility-neutral-800);
    --bg-navbar-card: var(--utility-neutral-900);
    --bg-navbar-card-hover: var(--utility-neutral-800);
    --bg-navbar-card-active: var(--utility-neutral-800);
    --border-navbar-card: var(--utility-neutral-800);
    --radius-navbar-card: var(--radius-md);
    --text-navbar-card-title: var(--text-primary);
    --text-navbar-card-caption: var(--text-secondary);
    --bg-bars-menu: var(--alpha-white-100);
    --bg-navbar-mobile: transparent;
    --text-navbar-mobile-link: var(--utility-neutral-300);
    --text-navbar-mobile-link-hover: var(--alpha-white-100);
    --bg-navbar-layer: var(--alpha-neutral-950-60);
    --bg-navbar-toggle: var(--utility-neutral-100);
    --bg-navbar-toggle-dark: var(--utility-neutral-300);
    --bg-mobile-nav: var(--utility-neutral-900);
    --bg-mobile-nav-overlay: var(--alpha-neutral-950-20);
    --bg-mobile-toggle-bar: var(--alpha-white-100);
    --bg-mobile-nav-item: var(--alpha-0);
    --bg-mobile-nav-item-hover: var(--utility-neutral-800);
    --bg-mobile-nav-item-active: var(--utility-neutral-800);
    --text-mobile-nav: var(--alpha-white-100);
    --text-mobile-nav-item: var(--alpha-white-100);
    --text-mobile-nav-item-hover: var(--alpha-white-100);
    --text-mobile-nav-item-active: var(--alpha-white-100);
    --bg-mobile-subnav-item: var(--alpha-0);
    --bg-mobile-subnav-item-hover: var(--alpha-0);
    --bg-mobile-subnav-active: var(--alpha-0);
    --text-mobile-subnav: var(--utility-neutral-300);
    --text-mobile-subnav-hover: var(--utility-neutral-300);
    --text-mobile-subnav-active: var(--utility-neutral-300);
    --border-mobile-nav-divider: var(--utility-neutral-500);
    --border-mobile-menu-items: var(--utility-neutral-500);
    --border-mobile-subnav-hover: var(--utility-neutral-500);
    --border-mobile-subnav-active: var(--alpha-white-100);
    --text-mobile-nav-muted: var(--utility-neutral-500);
    --text-mobile-nav-label: var(--utility-neutral-500);
    --icon-mobile-nav: var(--utility-neutral-200);
    --text-mobile-avatar: var(--neutral-0);
    --text-mobile-danger: var(--color-danger-600);
    --shadow-xs: 0 1px 1px 0 oklch(0% 0 0 / 0.15);
    --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.3), 0 1px 2px -1px oklch(0% 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.3), 0 2px 4px -2px oklch(0% 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.3), 0 4px 6px -4px oklch(0% 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.3), 0 8px 10px -6px oklch(0% 0 0 / 0.3);
    --shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.5);
    --shadow-inner: inset 0 2px 4px 0 oklch(0% 0 0 / 0.2);
    --shadow-none: 0 0 0 0 transparent;
    --radius-none: 0;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    --z-hide: -1;
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-sidebar: 35;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-toast: 70;
    --z-tooltip: 80;
    --z-max: 9999;
    --duration-instant: 0ms;
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;
    --space-48: 12rem;
    --space-64: 16rem;
    --blur-none: 0;
    --blur-xs: 2px;
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 12px;
    --blur-xl: 20px;
    --blur-2xl: 40px;
    --border-focus: var(--utility-blue-400);
    --ring-focus: 0 0 0 2px var(--bg-body, #1a1a1a), 0 0 0 4px var(--border-focus);
    --bg-brand-solid: var(--color-brand-400);
    --bg-brand-solid-hover: var(--color-brand-300);
    --bg-brand-solid-active: var(--color-brand-500);
    --text-on-brand: var(--color-neutral-900);
    --border-brand: var(--color-brand-400);
    --text-brand: var(--color-brand-400);
    --border-disabled: var(--utility-neutral-700);
    --bg-button-success: var(--utility-green-500);
    --bg-button-success-hover: var(--utility-green-400);
    --bg-button-success-active: var(--utility-green-300);
    --text-button-success: var(--utility-neutral-950);
    --border-button-success: var(--alpha-0);
    --bg-empty-state-icon: var(--utility-neutral-800);
    --bg-skeleton: var(--utility-neutral-800);
    --bg-skeleton-highlight: var(--utility-neutral-700);
    --bg-combobox: var(--bg-input);
    --bg-combobox-search: var(--utility-neutral-850);
    --bg-combobox-listbox: var(--bg-input);
    --bg-combobox-option-hover: var(--bg-dropdown-hover);
    --bg-combobox-option-active: var(--bg-dropdown-active);
    --bg-combobox-option-selected: var(--bg-dropdown-selected);
    --text-combobox: var(--text-input);
    --text-combobox-placeholder: var(--text-input-placeholder);
    --text-combobox-option: var(--text-primary);
    --text-combobox-option-selected: var(--text-dropdown-selected);
    --text-combobox-option-meta: var(--text-tertiary);
    --text-combobox-option-check: var(--border-focus);
    --border-combobox: var(--border-input);
    --border-combobox-hover: var(--border-input-hover);
    --border-combobox-focus: var(--border-focus);
    --shadow-combobox-listbox: var(--shadow-dropdown);
    --ring-combobox-focus: var(--ring-input-focus);
    --bg-combobox-header: var(--bg-input);
    --border-combobox-header: var(--border-dropdown-divider);
    --bg-combobox-footer: var(--bg-input);
    --border-combobox-footer: var(--border-dropdown-divider);
    --opacity-combobox-grain: var(--opacity-dropdown-grain, 0);
    --bg-accordion: var(--utility-neutral-900);
    --bg-accordion-trigger: transparent;
    --bg-accordion-trigger-hover: var(--utility-neutral-850);
    --bg-accordion-trigger-active: var(--utility-neutral-800);
    --bg-accordion-trigger-open: var(--utility-neutral-850);
    --bg-accordion-body: transparent;
    --bg-accordion-body-filled: var(--utility-neutral-850);
    --bg-accordion-card: var(--utility-neutral-900);
    --text-accordion-title: var(--utility-neutral-100);
    --text-accordion-title-open: var(--utility-neutral-50);
    --text-accordion-description: var(--utility-neutral-400);
    --text-accordion-body: var(--utility-neutral-200);
    --text-accordion-meta: var(--utility-neutral-500);
    --text-accordion-chevron: var(--utility-neutral-500);
    --text-accordion-chevron-hover: var(--utility-neutral-200);
    --border-accordion: var(--utility-neutral-800);
    --border-accordion-divider: var(--utility-neutral-850);
    --border-accordion-open: var(--utility-neutral-700);
    --border-accordion-success: var(--utility-green-400);
    --border-accordion-warning: var(--utility-amber-400);
    --border-accordion-danger: var(--utility-red-400);
    --border-accordion-info: var(--utility-blue-400);
    --ring-accordion-focus: inset 0 0 0 2px var(--border-focus);
    --shadow-accordion-card: 0 1px 2px oklch(0% 0 0 / 0.35);
    --shadow-accordion-card-open: 0 2px 8px oklch(0% 0 0 / 0.50);
    --radius-accordion: 0.5rem;
    --radius-accordion-item: 0.375rem;
    --bg-collapse-trigger: transparent;
    --bg-collapse-trigger-hover: var(--utility-neutral-850);
    --bg-collapse-trigger-open: var(--utility-neutral-850);
    --bg-collapse-section-header: var(--utility-neutral-850);
    --bg-collapse-section: var(--utility-neutral-900);
    --text-collapse-trigger: var(--utility-neutral-100);
    --text-collapse-trigger-muted: var(--utility-neutral-400);
    --text-collapse-chevron: var(--utility-neutral-500);
    --text-collapse-chevron-open: var(--utility-neutral-200);
    --text-collapse-meta: var(--utility-neutral-500);
    --border-collapse: var(--utility-neutral-800);
    --border-collapse-divider: var(--utility-neutral-850);
    --border-collapse-intent-success: var(--utility-green-400);
    --border-collapse-intent-warning: var(--utility-amber-400);
    --border-collapse-intent-danger: var(--utility-red-400);
    --border-collapse-intent-info: var(--utility-blue-400);
    --ring-collapse-focus: inset 0 0 0 2px var(--border-focus);
    --duration-collapse: 260ms;
    --duration-collapse-fast: 180ms;
    --duration-collapse-slow: 360ms;
    --ease-collapse: cubic-bezier(0.4, 0, 0.2, 1);
    --bg-popover: var(--bg-surface);
    --bg-popover-modal: var(--utility-neutral-750);
    --text-popover: var(--text-primary);
    --border-popover: var(--border-primary);
    --shadow-popover: var(--shadow-lg);
    --radius-popover: var(--radius-lg);
    --bg-popover-arrow: var(--bg-surface);
    --border-popover-arrow: var(--border-primary);
    --text-popover-title: var(--utility-neutral-50);
    --text-popover-subtitle: var(--utility-neutral-400);
    --text-popover-muted: var(--utility-neutral-500);
    --border-popover-divider: var(--utility-neutral-800);
    --bg-popover-header: transparent;
    --bg-popover-footer: transparent;
    --bg-popover-menu-hover: var(--utility-neutral-850);
    --bg-popover-menu-active: var(--utility-neutral-800);
    --bg-popover-kbd: var(--utility-neutral-800);
    --text-popover-kbd: var(--utility-neutral-200);
    --border-popover-kbd: var(--utility-neutral-700);
    --bg-popover-soft: var(--utility-neutral-900);
    --border-popover-soft: transparent;
    --shadow-popover-soft: 0 4px 16px oklch(0% 0 0 / 0.5), 0 1px 3px oklch(0% 0 0 / 0.3);
    --bg-popover-glass: oklch(18% 0.005 250 / 0.7);
    --border-popover-glass: oklch(100% 0 0 / 0.08);
    --bg-popover-dark: var(--utility-neutral-800);
    --text-popover-dark: oklch(100% 0 0);
    --border-popover-dark: var(--utility-neutral-700);
    --bg-popover-dark-arrow: var(--utility-neutral-800);
    --bg-popover-card: var(--utility-neutral-900);
    --shadow-popover-card: 0 12px 28px oklch(0% 0 0 / 0.55), 0 2px 6px oklch(0% 0 0 / 0.35);
    --border-popover-intent-success: var(--utility-green-400);
    --border-popover-intent-warning: var(--utility-amber-400);
    --border-popover-intent-danger: var(--utility-red-400);
    --border-popover-intent-info: var(--utility-blue-400);
    --text-popover-pin: var(--utility-neutral-500);
    --text-popover-pin-active: var(--utility-blue-300);
    --bg-popover-pin-hover: var(--utility-neutral-800);
    --bg-popover-skeleton: var(--utility-neutral-800);
    --bg-command-palette: var(--bg-surface);
    --bg-command-palette-backdrop: oklch(0% 0 0 / 0.6);
    --bg-command-palette-item-hover: var(--bg-hover);
    --bg-command-palette-item-active: var(--bg-active);
    --text-command-palette: var(--text-primary);
    --text-command-palette-muted: var(--text-tertiary);
    --border-command-palette: var(--border-primary);
    --shadow-command-palette: var(--shadow-xl);
    --radius-command-palette: var(--radius-xl);
    --bg-msg-panel: var(--utility-neutral-900);
    --bg-msg-composer-area: var(--bg-surface);
    --border-msg-panel: var(--border-secondary);
    --bg-msg-inbound: var(--utility-neutral-800);
    --text-msg-inbound: var(--text-primary);
    --border-msg-inbound: var(--utility-neutral-700);
    --bg-msg-outbound: var(--utility-indigo-900);
    --text-msg-outbound: var(--utility-indigo-100);
    --border-msg-outbound: transparent;
    --bg-msg-system: var(--utility-neutral-800);
    --text-msg-system: var(--text-tertiary);
    --text-msg-sender: var(--text-primary);
    --text-msg-time: var(--text-quaternary);
    --bg-msg-reaction: var(--utility-neutral-800);
    --border-msg-reaction: var(--utility-neutral-700);
    --bg-msg-reaction-active: var(--bg-info-subtle);
    --border-msg-reaction-active: var(--border-info);
    --text-msg-reaction-active: var(--text-info);
    --bg-msg-composer: var(--bg-input);
    --border-msg-composer: var(--border-input);
    --border-msg-composer-focus: var(--border-input-focus);
    --bg-msg-send: var(--bg-primary-solid);
    --text-msg-send: var(--alpha-white-100);
    --bg-msg-actions: var(--utility-neutral-800);
    --border-msg-actions: var(--utility-neutral-700);
    --bg-msg-conversation-hover: var(--bg-hover);
    --bg-msg-conversation-active: var(--bg-active);
    --bg-msg-conversation-unread: var(--bg-info-subtle);
    --bg-msg-badge: var(--bg-primary-solid);
    --text-msg-badge: var(--alpha-white-100);
    --bg-bulk-action-bar: var(--utility-neutral-850);
    --text-bulk-action-bar: var(--text-primary);
    --border-bulk-action-bar: var(--border-primary);
    --shadow-bulk-action-bar: 0 -4px 24px -4px oklch(0% 0 0 / 0.4), 0 -2px 8px -2px oklch(0% 0 0 / 0.2);
    --bg-kbd: var(--utility-neutral-800);
    --text-kbd: var(--utility-neutral-200);
    --border-kbd: var(--utility-neutral-700);
    --shadow-kbd: 0 1px 0 0 var(--utility-neutral-900);
    --bg-inline-edit: transparent;
    --bg-inline-edit-hover: var(--utility-neutral-850);
    --bg-inline-edit-editing: var(--utility-neutral-900);
    --bg-inline-edit-saving: var(--utility-neutral-850);
    --bg-inline-edit-success-flash: oklch(35% 0.12 145 / 0.35);
    --bg-inline-edit-error: oklch(35% 0.13 30  / 0.35);
    --bg-inline-edit-readonly: var(--utility-neutral-850);
    --bg-inline-edit-trigger-hover: var(--utility-neutral-800);
    --text-inline-edit: var(--text-primary);
    --text-inline-edit-muted: var(--text-tertiary);
    --text-inline-edit-trigger: var(--utility-neutral-500);
    --text-inline-edit-trigger-hover: var(--utility-neutral-200);
    --text-inline-edit-placeholder: var(--utility-neutral-500);
    --text-inline-edit-success: var(--utility-green-300);
    --text-inline-edit-error: var(--utility-red-300);
    --text-inline-edit-readonly: var(--utility-neutral-500);
    --text-inline-link-edit: var(--text-link);
    --text-inline-link-edit-hover: var(--text-link-hover);
    --border-inline-edit: transparent;
    --border-inline-edit-hover: var(--utility-neutral-700);
    --border-inline-edit-editing: var(--utility-blue-400);
    --border-inline-edit-success: var(--utility-green-400);
    --border-inline-edit-error: var(--utility-red-400);
    --border-inline-edit-readonly: var(--utility-neutral-800);
    --ring-inline-edit-focus: oklch(70% 0.13 250 / 0.28);
    --ring-inline-edit-error: oklch(70% 0.18 30  / 0.28);
    --ring-inline-edit-success: oklch(70% 0.13 145 / 0.28);
    --shadow-inline-edit-focus: 0 0 0 3px var(--ring-inline-edit-focus);
    --shadow-inline-edit-error: 0 0 0 3px var(--ring-inline-edit-error);
    --shadow-inline-edit-success: 0 0 0 3px var(--ring-inline-edit-success);
    --shadow-inline-edit-popover: 0 8px 28px oklch(0% 0 0 / 0.5), 0 2px 6px oklch(0% 0 0 / 0.3);
    --bg-range-track: var(--utility-neutral-700);
    --bg-range-fill: var(--bg-primary-solid);
    --bg-range-thumb: var(--utility-neutral-200);
    --border-range-thumb: var(--bg-primary-solid);
    --shadow-range-thumb: var(--shadow-sm);
    --bg-line-toast-success: var(--utility-green-400);
    --bg-line-toast-error: var(--utility-red-400);
    --bg-line-toast-warning: var(--utility-yellow-400);
    --bg-line-toast-info: var(--utility-blue-400);
    --bg-line-toast-loading: var(--utility-blue-400);
    --bg-signal-pill-solid: var(--utility-neutral-800);
    --text-signal-pill-solid: var(--alpha-white-100);
    --text-signal-pill-solid-muted: var(--alpha-white-70);
    --border-signal-pill-solid: var(--alpha-white-10);
    --icon-signal-pill-solid: var(--alpha-white-90);
    --bg-signal-pill-glass: var(--alpha-neutral-900-70);
    --text-signal-pill-glass: var(--alpha-white-100);
    --text-signal-pill-glass-muted: var(--alpha-white-70);
    --border-signal-pill-glass: var(--alpha-white-20);
    --icon-signal-pill-glass: var(--alpha-white-80);
    --blur-signal-pill-glass: blur(24px) saturate(160%);
    --shadow-signal-pill: 0 12px 32px -8px oklch(0% 0 0 / 0.55), 0 4px 12px -4px oklch(0% 0 0 / 0.35);
    --shadow-signal-pill-glass: 0 12px 32px -8px oklch(0% 0 0 / 0.45), 0 2px 8px -2px oklch(0% 0 0 / 0.25);
    --radius-signal-pill: var(--radius-full);
    --bg-signal-pill-success: var(--utility-neutral-800);
    --text-signal-pill-success: var(--text-primary);
    --icon-signal-pill-success: var(--utility-green-400);
    --bg-signal-pill-danger: var(--utility-neutral-800);
    --text-signal-pill-danger: var(--text-primary);
    --icon-signal-pill-danger: var(--utility-red-400);
    --bg-signal-pill-warning: var(--utility-neutral-800);
    --text-signal-pill-warning: var(--text-primary);
    --icon-signal-pill-warning: var(--utility-yellow-400);
    --bg-signal-pill-info: var(--utility-neutral-800);
    --text-signal-pill-info: var(--text-primary);
    --icon-signal-pill-info: var(--utility-blue-400);
    --bg-signal-pill-neutral: var(--utility-neutral-800);
    --text-signal-pill-neutral: var(--text-primary);
    --icon-signal-pill-neutral: var(--text-secondary);
    --bg-signal-pill-loading: var(--utility-neutral-800);
    --text-signal-pill-loading: var(--text-primary);
    --icon-signal-pill-loading: var(--utility-blue-400);
    --bg-signal-pill-action: var(--utility-neutral-800);
    --text-signal-pill-action: var(--text-primary);
    --icon-signal-pill-action: var(--utility-blue-400);
    --text-signal-pill-action-label: var(--text-link);
    --text-signal-pill-action-label-hover: var(--text-link-hover);
    --bg-shipment-header: var(--bg-panel, var(--utility-neutral-900));
    --bg-shipment-header-stuck: var(--alpha-neutral-900-80);
    --border-shipment-header: var(--border-divider);
    --shadow-shipment-header-stuck: 0 8px 24px -16px oklch(0% 0 0 / 0.6);
    --text-shipment-title: var(--text-primary);
    --text-shipment-ref-label: var(--text-tertiary);
    --text-shipment-route: var(--text-primary);
    --text-shipment-route-meta: var(--text-tertiary);
    --icon-shipment-route: var(--text-secondary);
    --bg-shipment-route-chip: var(--alpha-white-10);
    --border-shipment-route-chip: var(--alpha-white-10);
    --text-shipment-fact-label: var(--text-tertiary);
    --text-shipment-fact-value: var(--text-primary);
    --text-shipment-fact-meta: var(--text-tertiary);
    --border-shipment-fact-divider: var(--border-divider);
    --bg-timeline-marker: var(--bg-primary-solid);
    --bg-timeline-marker-completed: var(--bg-success-solid);
    --bg-timeline-marker-error: var(--bg-danger-solid);
    --border-timeline-connector: var(--utility-neutral-700);
    --text-timeline-time: var(--text-tertiary);
    --bg-activity-feed-item: var(--bg-surface);
    --bg-activity-feed-item-hover: var(--bg-hover);
    --bg-activity-feed-item-unread: var(--bg-info-subtle);
    --text-activity-feed-action: var(--text-secondary);
    --text-activity-feed-target: var(--text-link);
    --text-activity-feed-meta: var(--text-tertiary);
    --border-activity-feed-item: var(--border-secondary);
    --border-activity-feed-connector: var(--border-primary);
    --border-activity-feed-message: var(--border-secondary);
    --bg-activity-feed-message: transparent;
    --text-activity-feed-unseen: var(--text-success);
    --text-activity-feed-user: var(--text-secondary);
    --text-activity-feed-comment: var(--text-tertiary);
    --bg-stat-card: var(--bg-card);
    --text-stat-card-value: var(--text-primary);
    --text-stat-card-label: var(--text-secondary);
    --text-stat-card-trend-up: var(--text-success);
    --text-stat-card-trend-down: var(--text-danger);
    --text-stat-card-trend-neutral: var(--text-tertiary);
    --border-stat-card: var(--border-card);
    --shadow-stat-card: var(--shadow-card);
    --bg-stat-card-trend-up: var(--alpha-green-500-12);
    --bg-stat-card-trend-down: var(--alpha-red-500-12);
    --bg-stat-card-trend-neutral: var(--utility-neutral-800);
    --stroke-stat-card-spark-up: var(--utility-green-400);
    --stroke-stat-card-spark-down: var(--utility-red-400);
    --stroke-stat-card-spark-neutral: var(--utility-neutral-500);
    --fill-stat-card-spark-up: var(--alpha-green-500-12);
    --fill-stat-card-spark-down: var(--alpha-red-500-12);
    --fill-stat-card-spark-neutral: var(--alpha-white-10);
    --bg-stat-card-progress-track: var(--utility-neutral-800);
    --bg-stat-card-progress-fill: var(--utility-blue-500);
    --bg-stat-card-progress-fill-success: var(--utility-green-500);
    --bg-stat-card-progress-fill-warning: var(--utility-amber-500);
    --bg-stat-card-progress-fill-danger: var(--utility-red-500);
    --border-stat-card-divider: var(--border-secondary);
    --text-stat-card-footer: var(--text-primary-solid);
    --bg-table-resize-handle: transparent;
    --bg-table-resize-handle-hover: var(--utility-blue-400);
    --bg-table-resize-handle-active: var(--utility-blue-500);
    --bg-table-row-detail: var(--utility-neutral-850);
    --bg-record-map: var(--utility-neutral-950);
    --bg-record-map-grid-dot: var(--utility-neutral-700);
    --bg-record-map-toolbar: oklch(20% 0.005 250 / 0.85);
    --bg-record-map-inspector: var(--bg-primary);
    --bg-record-map-minimap: oklch(18% 0.005 250 / 0.92);
    --bg-record-map-minimap-viewport: color-mix(in oklch, var(--border-focus) 18%, transparent);
    --bg-record-map-ai: linear-gradient(135deg, oklch(28% 0.06 250 / 0.4) 0%, oklch(26% 0.08 290 / 0.4) 100%);
    --bg-record-map-node: var(--utility-neutral-900);
    --bg-record-map-node-hover: var(--utility-neutral-850);
    --bg-record-map-node-active: color-mix(in oklch, var(--border-focus) 22%, transparent);
    --bg-record-map-node-faded: oklch(20% 0 0 / 0.45);
    --bg-record-map-node-header: var(--utility-neutral-850);
    --bg-record-map-cluster: oklch(20% 0.005 250 / 0.55);
    --bg-record-map-cluster-header: var(--utility-neutral-850);
    --text-record-map: var(--utility-neutral-100);
    --text-record-map-muted: var(--utility-neutral-400);
    --text-record-map-subtle: var(--utility-neutral-500);
    --text-record-map-node: var(--utility-neutral-100);
    --text-record-map-node-meta: var(--utility-neutral-500);
    --text-record-map-ai: var(--utility-blue-300);
    --border-record-map: var(--utility-neutral-800);
    --border-record-map-node: var(--utility-neutral-800);
    --border-record-map-node-hover: var(--utility-neutral-700);
    --border-record-map-node-active: var(--border-focus);
    --border-record-map-node-warning: var(--utility-amber-400);
    --border-record-map-node-error: var(--utility-red-400);
    --border-record-map-node-success: var(--utility-green-400);
    --border-record-map-cluster: var(--utility-neutral-800);
    --shadow-record-map-node: var(--shadow-sm);
    --shadow-record-map-node-active: 0 0 0 3px color-mix(in oklch, var(--border-focus) 28%, transparent), var(--shadow-md);
    --shadow-record-map-node-hover: var(--shadow-md);
    --shadow-record-map-floating: var(--shadow-lg);
    --line-record-map-connection: var(--utility-neutral-700);
    --line-record-map-connection-active: var(--border-focus);
    --line-record-map-connection-warning: var(--utility-amber-400);
    --line-record-map-connection-error: var(--utility-red-400);
    --line-record-map-connection-success: var(--utility-green-400);
    --line-record-map-connection-ai: var(--utility-blue-400);
    --line-record-map-connection-faded: oklch(50% 0 0 / 0.3);
    --accent-record-shipment: var(--utility-blue-400);
    --accent-record-shipment-bg: oklch(40% 0.13 250 / 0.25);
    --accent-record-order: var(--utility-green-400);
    --accent-record-order-bg: oklch(40% 0.12 145 / 0.25);
    --accent-record-customer: var(--utility-cyan-400, var(--utility-blue-400));
    --accent-record-customer-bg: oklch(40% 0.12 200 / 0.22);
    --accent-record-carrier: var(--utility-violet-400, var(--utility-purple-400, var(--utility-blue-400)));
    --accent-record-carrier-bg: oklch(40% 0.12 290 / 0.22);
    --accent-record-warehouse: var(--utility-amber-400);
    --accent-record-warehouse-bg: oklch(40% 0.12 75 / 0.22);
    --accent-record-appointment: var(--utility-teal-400, var(--utility-green-400));
    --accent-record-appointment-bg: oklch(40% 0.10 180 / 0.22);
    --accent-record-yard: var(--utility-orange-400);
    --accent-record-yard-bg: oklch(40% 0.13 50 / 0.22);
    --accent-record-invoice: var(--utility-neutral-300);
    --accent-record-invoice-bg: oklch(30% 0 0 / 0.5);
    --accent-record-claim: var(--utility-red-400);
    --accent-record-claim-bg: oklch(40% 0.13 30 / 0.22);
    --accent-record-handlingunit: var(--utility-pink-400);
    --accent-record-handlingunit-bg: oklch(40% 0.12 350 / 0.22);
    --accent-record-transportation: var(--utility-indigo-400, var(--utility-blue-400));
    --accent-record-transportation-bg: oklch(40% 0.13 270 / 0.22);
    --accent-record-document: var(--utility-neutral-300);
    --accent-record-document-bg: oklch(30% 0 0 / 0.5);
    --accent-record-photo: var(--utility-fuchsia-400, var(--utility-pink-400));
    --accent-record-photo-bg: oklch(40% 0.13 330 / 0.22);
    --accent-record-event: var(--utility-neutral-400);
    --accent-record-event-bg: oklch(30% 0 0 / 0.45);
    --bg-carrier-agreement-panel: var(--bg-surface);
    --bg-rate-matrix-cell: var(--bg-surface);
    --bg-rate-matrix-cell-dirty: oklch(38% 0.08 70 / 0.45);
    --bg-rate-matrix-cell-empty: oklch(22% 0 0 / 0.4);
    --border-rate-cell-active: var(--utility-blue-400);
    --text-rate-matrix-muted: var(--utility-neutral-400);
  }
  [data-theme="theme-dark"][data-accent="purple"], [data-theme="theme-mica-dark"][data-accent="purple"] {
    --bg-primary-solid: var(--utility-purple-500);
    --bg-primary-solid-hover: var(--utility-purple-400);
    --bg-primary-solid-active: var(--utility-purple-300);
    --border-primary-solid: var(--utility-purple-500);
    --text-link: var(--utility-purple-300);
    --text-link-hover: var(--utility-purple-200);
  }
  [data-theme="theme-dark"][data-accent="teal"], [data-theme="theme-mica-dark"][data-accent="teal"] {
    --bg-primary-solid: var(--utility-teal-500);
    --bg-primary-solid-hover: var(--utility-teal-400);
    --bg-primary-solid-active: var(--utility-teal-300);
    --border-primary-solid: var(--utility-teal-500);
    --text-link: var(--utility-teal-300);
    --text-link-hover: var(--utility-teal-200);
  }
  [data-theme="theme-dark"][data-accent="green"], [data-theme="theme-mica-dark"][data-accent="green"] {
    --bg-primary-solid: var(--utility-green-500);
    --bg-primary-solid-hover: var(--utility-green-400);
    --bg-primary-solid-active: var(--utility-green-300);
    --border-primary-solid: var(--utility-green-500);
    --text-link: var(--utility-green-300);
    --text-link-hover: var(--utility-green-200);
  }
  [data-theme="theme-dark"][data-accent="orange"], [data-theme="theme-mica-dark"][data-accent="orange"] {
    --bg-primary-solid: var(--utility-orange-500);
    --bg-primary-solid-hover: var(--utility-orange-400);
    --bg-primary-solid-active: var(--utility-orange-300);
    --border-primary-solid: var(--utility-orange-500);
    --text-link: var(--utility-orange-300);
    --text-link-hover: var(--utility-orange-200);
  }
  [data-theme="theme-dark"][data-accent="pink"], [data-theme="theme-mica-dark"][data-accent="pink"] {
    --bg-primary-solid: var(--utility-pink-500);
    --bg-primary-solid-hover: var(--utility-pink-400);
    --bg-primary-solid-active: var(--utility-pink-300);
    --border-primary-solid: var(--utility-pink-500);
    --text-link: var(--utility-pink-300);
    --text-link-hover: var(--utility-pink-200);
  }
  [data-theme="theme-dark"][data-contrast="high"], [data-theme="theme-mica-dark"][data-contrast="high"] {
    --text-primary: oklch(100% 0 0);
    --text-secondary: oklch(90% 0 0);
    --text-tertiary: oklch(80% 0 0);
    --text-quaternary: oklch(70% 0 0);
    --border-primary: oklch(60% 0 0);
    --border-input: oklch(65% 0 0);
    --border-input-hover: oklch(75% 0 0);
    --border-card: oklch(55% 0 0);
    --border-table: oklch(55% 0 0);
  }
  [data-theme="theme-dark"] .alert--info-solid, [data-theme="theme-mica-dark"] .alert--info-solid {
    --bg-alert: var(--utility-blue-500);
    --border-alert: var(--utility-blue-500);
    --text-alert: var(--alpha-white-100);
    --icon-alert: var(--alpha-white-100);
    --text-alert-dismiss: rgba(255, 255, 255, 0.8);
    --bg-alert-dismiss-hover: rgba(255, 255, 255, 0.18);
  }
  [data-theme="theme-dark"] .alert--success-solid, [data-theme="theme-mica-dark"] .alert--success-solid {
    --bg-alert: var(--utility-green-500);
    --border-alert: var(--utility-green-500);
    --text-alert: var(--alpha-white-100);
    --icon-alert: var(--alpha-white-100);
    --text-alert-dismiss: rgba(255, 255, 255, 0.8);
    --bg-alert-dismiss-hover: rgba(255, 255, 255, 0.18);
  }
  [data-theme="theme-dark"] .alert--warning-solid, [data-theme="theme-mica-dark"] .alert--warning-solid {
    --bg-alert: var(--utility-amber-500);
    --border-alert: var(--utility-amber-500);
    --text-alert: var(--utility-amber-950, #451a03);
    --icon-alert: var(--utility-amber-950, #451a03);
    --text-alert-dismiss: rgba(0, 0, 0, 0.7);
    --bg-alert-dismiss-hover: rgba(0, 0, 0, 0.12);
  }
  [data-theme="theme-dark"] .alert--danger-solid, [data-theme="theme-mica-dark"] .alert--danger-solid {
    --bg-alert: var(--utility-red-500);
    --border-alert: var(--utility-red-500);
    --text-alert: var(--alpha-white-100);
    --icon-alert: var(--alpha-white-100);
    --text-alert-dismiss: rgba(255, 255, 255, 0.8);
    --bg-alert-dismiss-hover: rgba(255, 255, 255, 0.18);
  }
  [data-theme="theme-dark"], [data-theme="theme-mica-dark"] {
    --text-ai-accent: var(--utility-violet-400);
    --text-ai-accent-strong: var(--utility-violet-300);
    --text-ai-on-accent: var(--alpha-white-100);
    --bg-ai-accent: var(--utility-violet-600);
    --bg-ai-accent-hover: var(--utility-violet-700);
    --bg-ai-surface: var(--bg-card);
    --bg-ai-surface-subtle: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-surface-subtle: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-surface-active: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-surface-active: color-mix(in oklch, var(--text-primary) 10%, var(--bg-card));
    }
    --bg-ai-input: var(--bg-input);
    --bg-ai-panel: var(--bg-card);
    --bg-ai-dock: var(--bg-card);
    --bg-ai-canvas: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-canvas: color-mix(in oklch, var(--text-primary) 4%, var(--bg-surface));
    }
    --bg-ai-generated: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-generated: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-message: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-message: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-message-user: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-message-user: color-mix(in oklch, var(--text-primary) 10%, var(--bg-card));
    }
    --bg-ai-tool: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-tool: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-tool-result: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-tool-result: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-context: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-context: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-memory: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-memory: color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));
    }
    --bg-ai-chip: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-chip: color-mix(in oklch, var(--text-primary) 6%, var(--bg-card));
    }
    --bg-ai-chip-hover: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-chip-hover: color-mix(in oklch, var(--text-primary) 11%, var(--bg-card));
    }
    --bg-ai-badge: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-badge: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    --bg-ai-thinking: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-thinking: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-streaming: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-streaming: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-approval: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-approval: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-success-subtle: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-success-subtle: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-warning-subtle: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-warning-subtle: color-mix(in oklch, var(--text-primary) 6%, var(--bg-card));
    }
    --bg-ai-error-subtle: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-error-subtle: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-console: var(--utility-neutral-950);
    --bg-ai-console-header: var(--utility-neutral-900);
    --bg-ai-skeleton: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-skeleton: color-mix(in oklch, var(--text-primary) 9%, var(--bg-surface));
    }
    --bg-ai-skeleton-shine: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-skeleton-shine: color-mix(in oklch, var(--text-primary) 14%, transparent);
    }
    --text-ai-primary: var(--text-primary);
    --text-ai-secondary: var(--text-secondary);
    --text-ai-muted: var(--text-tertiary);
    --text-ai-placeholder: var(--text-input-placeholder);
    --text-ai-thinking: var(--utility-violet-300);
    --text-ai-streaming: var(--utility-blue-300);
    --text-ai-success: var(--text-success);
    --text-ai-warning: var(--text-warning);
    --text-ai-error: var(--text-danger);
    --text-ai-console: var(--utility-neutral-100);
    --text-ai-console-muted: var(--utility-neutral-500);
    --text-ai-console-prompt: var(--utility-teal-300);
    --text-ai-citation: var(--utility-blue-300);
    --text-ai-confidence-high: var(--utility-green-400);
    --text-ai-confidence-med: var(--utility-amber-400);
    --text-ai-confidence-low: var(--utility-neutral-400);
    --border-ai-surface: var(--border-default);
    --border-ai-subtle: var(--border-divider);
    --border-ai-input: var(--border-input);
    --border-ai-input-hover: var(--border-input-hover);
    --border-ai-panel: var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-panel: color-mix(in oklch, var(--utility-violet-400) 28%, var(--border-default));
    }
    --border-ai-thinking: var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-thinking: color-mix(in oklch, var(--utility-violet-400) 55%, transparent);
    }
    --border-ai-streaming: var(--utility-blue-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-streaming: color-mix(in oklch, var(--utility-blue-400) 50%, transparent);
    }
    --border-ai-approval: var(--utility-amber-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-approval: color-mix(in oklch, var(--utility-amber-500) 55%, transparent);
    }
    --border-ai-tool: var(--utility-indigo-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-tool: color-mix(in oklch, var(--utility-indigo-400) 40%, transparent);
    }
    --border-ai-context: var(--utility-blue-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-context: color-mix(in oklch, var(--utility-blue-400) 34%, transparent);
    }
    --border-ai-generated: var(--utility-indigo-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-generated: color-mix(in oklch, var(--utility-indigo-400) 44%, transparent);
    }
    --border-ai-success: var(--utility-green-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-success: color-mix(in oklch, var(--utility-green-400) 48%, transparent);
    }
    --border-ai-warning: var(--utility-amber-500);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-warning: color-mix(in oklch, var(--utility-amber-500) 55%, transparent);
    }
    --border-ai-error: var(--utility-red-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-error: color-mix(in oklch, var(--utility-red-400) 50%, transparent);
    }
    --border-ai-console: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-console: color-mix(in oklch, var(--utility-neutral-100) 12%, transparent);
    }
    --border-ai-focus: var(--border-focus);
    --gradient-ai-accent: linear-gradient(120deg, var(--utility-violet-400), var(--utility-blue-400));
    --gradient-ai-active: linear-gradient(120deg, var(--utility-violet-400), var(--utility-blue-400) 55%, var(--utility-cyan-300));
    --gradient-ai-thinking: linear-gradient(120deg, var(--utility-violet-400), var(--utility-indigo-400) 38%, var(--utility-blue-400) 68%, var(--utility-violet-400));
    --gradient-ai-streaming: linear-gradient(120deg, var(--utility-blue-400), var(--utility-cyan-300) 50%, var(--utility-blue-400));
    --gradient-ai-border: linear-gradient(130deg, var(--utility-violet-400), var(--utility-blue-400));
    @supports (color: color-mix(in lab, red, red)) {
      --gradient-ai-border: linear-gradient(130deg, color-mix(in oklch, var(--utility-violet-400) 80%, transparent), color-mix(in oklch, var(--utility-blue-400) 70%, transparent));
    }
    --gradient-ai-glow: radial-gradient(120% 120% at 50% 0%, var(--utility-violet-400), transparent 70%);
    @supports (color: color-mix(in lab, red, red)) {
      --gradient-ai-glow: radial-gradient(120% 120% at 50% 0%, color-mix(in oklch, var(--utility-violet-400) 26%, transparent), transparent 70%);
    }
    --gradient-ai-generated: linear-gradient(130deg, var(--utility-indigo-400), var(--utility-teal-400));
    @supports (color: color-mix(in lab, red, red)) {
      --gradient-ai-generated: linear-gradient(130deg, color-mix(in oklch, var(--utility-indigo-400) 65%, transparent), color-mix(in oklch, var(--utility-teal-400) 55%, transparent));
    }
    --gradient-ai-success: linear-gradient(120deg, var(--utility-green-400), var(--utility-teal-400));
    --gradient-ai-error: linear-gradient(120deg, var(--utility-red-400), var(--utility-orange-500));
    --gradient-ai-aurora: conic-gradient(from 0deg, var(--utility-violet-400), var(--utility-blue-400), var(--utility-cyan-300), var(--utility-teal-400), var(--utility-fuchsia-400), var(--utility-indigo-400), var(--utility-violet-400));
    --gradient-ai-orb: radial-gradient(circle at 35% 28%, var(--utility-cyan-300), var(--utility-blue-400) 42%, var(--utility-violet-500) 82%);
    --bg-ai-orb-sheen: var(--utility-neutral-50);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-orb-sheen: color-mix(in oklch, var(--utility-neutral-50) 45%, transparent);
    }
    --gradient-ai-skeleton: linear-gradient(90deg, transparent, var(--bg-ai-skeleton-shine), transparent);
    --glow-ai-thinking: var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --glow-ai-thinking: color-mix(in oklch, var(--utility-violet-400) 50%, transparent);
    }
    --glow-ai-active: var(--utility-blue-400);
    @supports (color: color-mix(in lab, red, red)) {
      --glow-ai-active: color-mix(in oklch, var(--utility-blue-400) 46%, transparent);
    }
    --shadow-ai-panel: 0 12px 36px -16px var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-panel: 0 12px 36px -16px color-mix(in oklch, var(--utility-violet-400) 50%, transparent);
    }
    --shadow-ai-dock: -8px 0 44px -22px var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-dock: -8px 0 44px -22px color-mix(in oklch, var(--utility-violet-400) 45%, transparent);
    }
    --shadow-ai-thinking: 0 0 0 1px var(--utility-violet-400), 0 0 30px -4px var(--glow-ai-thinking);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-thinking: 0 0 0 1px color-mix(in oklch, var(--utility-violet-400) 28%, transparent), 0 0 30px -4px var(--glow-ai-thinking);
    }
    --shadow-ai-active: 0 0 0 1px var(--utility-blue-400), 0 0 28px -6px var(--glow-ai-active);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-active: 0 0 0 1px color-mix(in oklch, var(--utility-blue-400) 28%, transparent), 0 0 28px -6px var(--glow-ai-active);
    }
    --shadow-ai-generated: 0 10px 34px -18px var(--utility-indigo-400);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-generated: 0 10px 34px -18px color-mix(in oklch, var(--utility-indigo-400) 55%, transparent);
    }
    --shadow-ai-approval: 0 10px 30px -16px var(--utility-amber-500);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-ai-approval: 0 10px 30px -16px color-mix(in oklch, var(--utility-amber-500) 45%, transparent);
    }
    --shadow-ai-console: 0 18px 54px -24px var(--alpha-black-80);
    --ring-ai-focus: inset 0 0 0 2px var(--border-focus);
    --ring-ai-active: 0 0 0 1px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-ai-active: 0 0 0 1px color-mix(in oklch, var(--border-focus) 60%, transparent);
    }
    --ring-ai-prompt: 0 0 0 3px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-ai-prompt: 0 0 0 3px color-mix(in oklch, var(--border-focus) 20%, transparent);
    }
    --bg-ai-diff-add: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-add: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-ai-diff-del: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-del: color-mix(in oklch, var(--text-primary) 8%, var(--bg-card));
    }
    --bg-ai-diff-add-word: var(--utility-green-400);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-add-word: color-mix(in oklch, var(--utility-green-400) 34%, transparent);
    }
    --bg-ai-diff-del-word: var(--utility-red-400);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-del-word: color-mix(in oklch, var(--utility-red-400) 32%, transparent);
    }
    --bg-ai-diff-hunk: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-hunk: color-mix(in oklch, var(--text-primary) 6%, var(--bg-card));
    }
    --bg-ai-diff-gutter: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-diff-gutter: color-mix(in oklch, var(--text-primary) 6%, var(--bg-card));
    }
    --text-ai-diff-add: var(--utility-green-300);
    --text-ai-diff-del: var(--utility-red-300);
    --text-ai-diff-gutter: var(--text-ai-muted);
    --text-ai-diff-hunk: var(--text-ai-citation);
    --border-ai-diff-add: var(--border-ai-success);
    --border-ai-diff-del: var(--border-ai-error);
    --text-ai-console-warn: var(--utility-amber-400);
    --text-ai-console-info: var(--utility-blue-300);
    --text-ai-console-debug: var(--utility-violet-300);
    --text-ai-console-sys: var(--utility-neutral-500);
    --text-ai-console-cmt: var(--utility-green-400);
    --text-ai-console-tool: var(--utility-cyan-300);
    --bg-ai-console-gutter: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-console-gutter: color-mix(in oklch, var(--utility-neutral-100) 5%, transparent);
    }
    --text-ai-console-gutter: var(--utility-neutral-500);
    --bg-ai-console-footer: var(--utility-neutral-900);
    --bg-ai-console-selection: var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-console-selection: color-mix(in oklch, var(--utility-violet-400) 40%, transparent);
    }
    --bg-ai-console-active: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-console-active: color-mix(in oklch, var(--utility-neutral-100) 4%, transparent);
    }
    --bg-ai-console-light: var(--utility-neutral-100);
    --text-ai-console-light: var(--utility-neutral-800);
    --border-ai-console-light: var(--border-default);
    --bg-ai-progress-track: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-progress-track: color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
    --gradient-ai-progress: var(--gradient-ai-active);
    --bg-ai-confidence-track: var(--text-ai-muted);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-confidence-track: color-mix(in oklch, var(--text-ai-muted) 26%, transparent);
    }
    --text-ai-ghost: var(--text-ai-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --text-ai-ghost: color-mix(in oklch, var(--text-ai-accent) 60%, var(--text-ai-muted));
    }
    --bg-ai-inline: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-inline: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
    --border-ai-inline: var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --border-ai-inline: color-mix(in oklch, var(--utility-violet-400) 38%, transparent);
    }
  }
  [data-theme="theme-dark"], [data-theme="theme-mica-dark"] {
    --bg-a2ui: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-a2ui: color-mix(in oklch, var(--text-primary) 4%, var(--bg-surface));
    }
    --bg-a2ui-panel: var(--bg-card);
    --bg-a2ui-surface: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-a2ui-surface: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-a2ui-hover: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-a2ui-hover: color-mix(in oklch, var(--text-primary) 9%, var(--bg-card));
    }
    --bg-a2ui-active: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-a2ui-active: color-mix(in oklch, var(--text-primary) 12%, var(--bg-card));
    }
    --border-a2ui: var(--border-default);
    --border-a2ui-subtle: var(--border-divider);
    --text-a2ui: var(--text-primary);
    --text-a2ui-muted: var(--text-tertiary);
    --shadow-a2ui: 0 10px 30px -18px var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-a2ui: 0 10px 30px -18px color-mix(in oklch, var(--utility-violet-400) 40%, transparent);
    }
    --shadow-a2ui-hover: 0 14px 38px -16px var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-a2ui-hover: 0 14px 38px -16px color-mix(in oklch, var(--utility-violet-400) 50%, transparent);
    }
    --ring-a2ui: 0 0 0 3px var(--utility-violet-400);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-a2ui: 0 0 0 3px color-mix(in oklch, var(--utility-violet-400) 22%, transparent);
    }
  }
  [data-theme="theme-dark"], [data-theme="theme-mica-dark"] {
    --bg-labs: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-labs: color-mix(in oklch, var(--text-primary) 4%, var(--bg-primary));
    }
    --bg-labs-panel: var(--bg-card);
    --bg-labs-surface: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-labs-surface: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
    --bg-labs-hover: var(--bg-menu-hover);
    --bg-labs-active: var(--bg-menu-active);
    --bg-labs-canvas: black;
    @supports (color: color-mix(in lab, red, red)) {
      --bg-labs-canvas: color-mix(in oklch, black 22%, var(--bg-primary));
    }
    --dot-labs: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --dot-labs: color-mix(in oklch, var(--text-primary) 14%, transparent);
    }
    --bg-labs-frame: var(--bg-card);
    --border-labs: var(--border-primary-subtle);
    --border-labs-subtle: var(--border-divider);
    --text-labs: var(--text-primary);
    --text-labs-muted: var(--text-tertiary);
    --text-labs-accent: var(--text-info);
    --shadow-labs-frame: 0 1px 3px color-mix(in oklch, black 45%, transparent), 0 10px 28px -12px color-mix(in oklch, black 60%, transparent);
    --ring-labs: 0 0 0 2px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-labs: 0 0 0 2px color-mix(in oklch, var(--text-info) 75%, transparent);
    }
    --ring-labs-soft: 0 0 0 3px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --ring-labs-soft: 0 0 0 3px color-mix(in oklch, var(--text-info) 24%, transparent);
    }
  }
  [data-theme="theme-dark"], [data-theme="theme-mica-dark"] {
    --border-primary: var(--utility-neutral-700);
    --text-primary-solid: var(--color-brand-400);
    --bg-primary-solid: var(--color-brand-600);
    --text-button-primary: var(--color-neutral-900);
    --bg-button-primary: var(--color-brand-600);
    --bg-button-primary-hover: var(--color-brand-500);
    --bg-button-primary-active: color-mix(in srgb, oklch(78.0% 0.157 84), black 18%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-button-primary-active: color-mix(in oklch, var(--color-brand-600), black 18%);
    }
    --text-on-brand-section: var(--color-white);
    --border-button-focus: var(--border-focus);
    --border-input-active: var(--border-focus);
    --bg-checkbox-checked: var(--color-brand-600);
    --border-checkbox-checked: var(--utility-blue-500);
    --bg-studio-canvas: var(--color-black);
    --bg-step-connector-fill: var(--utility-yellow-500);
    --bg-step-current: var(--utility-yellow-500);
    --bg-step-current-hover: var(--utility-yellow-400);
    --bg-step-current-active: var(--utility-yellow-600);
    --bg-step-completed: var(--utility-yellow-500);
    --bg-step-completed-hover: var(--utility-yellow-400);
    --bg-step-completed-active: var(--utility-yellow-600);
    --bg-progress-bar: var(--utility-yellow-400);
    --bg-sidebar-item-accent: var(--utility-yellow-400);
    --text-drawer: var(--utility-neutral-100);
    --border-drawer: var(--utility-neutral-800);
    --bg-drawer: var(--utility-neutral-900);
    --bg-banner: var(--bg-secondary);
    --ring-banner: var(--border-secondary-alt);
    --border-banner-edge: var(--border-primary);
    --text-banner-title: var(--text-secondary);
    --text-banner-body: var(--text-tertiary);
    --decoration-banner-link: var(--utility-neutral-300);
    --icon-banner: var(--text-icon-brand);
    --bg-banner-divider: var(--border-secondary);
    --bg-banner-unit: var(--bg-primary);
    --ring-banner-unit: var(--border-primary);
    --text-banner-unit: var(--text-primary);
    --bg-banner-brand: var(--bg-primary);
    --border-banner-brand: var(--border-secondary-alt);
    --text-banner-brand-title: var(--text-primary);
    --text-banner-brand-body: var(--text-tertiary);
    --decoration-banner-brand-link: var(--utility-neutral-300);
    --bg-banner-brand-divider: rgb(255 255 255 / 0.12);
    --ring-banner-brand-unit: var(--border-primary);
    --bg-banner-brand-icon: rgb(255 255 255 / 0.08);
    --ring-banner-brand-icon: rgb(255 255 255 / 0.2);
    --text-banner-brand-icon: var(--color-white);
  }
  [data-theme="theme-mica-dark"] {
    --canvas-primary: oklch(15% 0.005 250 / 0.85);
    --canvas-secondary: oklch(10% 0 0 / 0.8);
    --bg-surface: oklch(18% 0.005 250 / 0.78);
    --bg-body: oklch(12% 0.003 250 / 0.75);
    --bg-card: oklch(20% 0.005 250 / 0.72);
    --bg-sidebar: oklch(14% 0.005 250 / 0.82);
    --bg-dropdown: oklch(22% 0.005 250 / 0.88);
    --bg-modal: oklch(18% 0.005 250 / 0.92);
    --bg-popover: oklch(22% 0.005 250 / 0.88);
    --bg-command-palette: oklch(18% 0.005 250 / 0.92);
    --bg-mica-tint: oklch(15% 0.005 250);
  }
}
@layer utilities {
  [class^="btn-"]:focus-visible, [class*=" btn-"]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: none;
  }
  .btn-danger:focus-visible, .btn-danger-outline:focus-visible, .btn-tonal-danger:focus-visible {
    outline-color: var(--border-danger, var(--text-danger));
  }
  :is([class^="btn-"], [class*=" btn-"]):not(:disabled):not([aria-disabled="true"]):not(.is-loading) {
    cursor: pointer;
  }
  .btn-primary {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    position: relative;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }
  .btn-primary:hover {
    background-color: var(--bg-brand-solid-hover);
  }
  .btn-primary:active {
    background-color: var(--bg-brand-solid-active);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .btn-primary:hover, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .btn-cta:hover, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .btn-primary:active, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .btn-cta:active {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid), var(--color-white) 6%);
    }
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .btn-primary:hover::before, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .btn-cta:hover::before, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .btn-primary:active::before, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .btn-cta:active::before {
    border-color: var(--alpha-white-100);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--alpha-white-100) 26%, transparent);
    }
  }
  .btn-secondary {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    color: var(--text-button-secondary);
    background-color: var(--bg-button-secondary);
    border-color: var(--border-button-secondary);
    box-shadow: var(--shadow-xs);
  }
  .btn-secondary:hover {
    background-color: var(--bg-button-secondary-hover);
  }
  .btn-secondary:active {
    background-color: var(--bg-button-secondary-active);
  }
  .btn-secondary.is-active, .btn-secondary[aria-pressed="true"] {
    background-color: var(--bg-button-secondary-active-state);
  }
  .btn-soft {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-soft, var(--text-primary));
    background-color: var(--bg-button-soft, var(--utility-neutral-50));
    border-color: var(--border-button-soft, var(--alpha-0));
  }
  .btn-soft:hover {
    background-color: var(--bg-button-soft-hover, var(--utility-neutral-100));
  }
  .btn-soft:active {
    background-color: var(--bg-button-soft-active, var(--utility-neutral-200));
  }
  .btn-ghost {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-ghost, var(--text-primary));
    background-color: var(--bg-button-ghost, var(--alpha-0));
    border-color: var(--border-button-ghost, var(--alpha-0));
  }
  .btn-ghost:hover {
    background-color: var(--bg-button-ghost-hover, var(--utility-neutral-100));
  }
  .btn-ghost:active {
    background-color: var(--bg-button-ghost-active, var(--utility-neutral-200));
  }
  .btn-link {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xs);
    padding-inline: var(--spacing);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: underline;
    text-underline-offset: 4px;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    color: var(--text-button-link, var(--text-primary));
  }
  .btn-link:hover {
    text-decoration-line: none;
  }
  .btn-light {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-light, var(--text-primary));
    background-color: var(--bg-button-light, var(--utility-neutral-50));
    border-color: var(--border-button-light, var(--border-primary));
  }
  .btn-light:hover {
    background-color: var(--bg-button-light-hover, var(--utility-neutral-100));
  }
  .btn-light:active {
    background-color: var(--bg-button-light-active, var(--utility-neutral-200));
  }
  .btn-danger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-danger, var(--alpha-white-100));
    background-color: var(--bg-button-danger, var(--utility-red-600, #dc2626));
    border-color: var(--border-button-danger, var(--alpha-0));
  }
  .btn-danger:hover {
    background-color: var(--bg-button-danger-hover, var(--utility-red-700, #b91c1c));
  }
  .btn-danger:active {
    background-color: var(--bg-button-danger-active, var(--utility-red-800, #991b1b));
  }
  .btn-danger-outline {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-danger-outline, var(--utility-red-700, #b91c1c));
    background-color: var(--bg-button-danger-outline, var(--alpha-0));
    border-color: var(--border-button-danger-outline, var(--alpha-0));
  }
  .btn-danger-outline:hover {
    background-color: var(--bg-button-danger-outline-hover, var(--utility-red-50, #fef2f2));
  }
  .btn-danger-outline:active {
    background-color: var(--bg-button-danger-outline-active, var(--utility-red-100, #fee2e2));
  }
  .btn-success {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-success, var(--text-on-success, var(--alpha-white-100)));
    background-color: var(--bg-button-success, var(--bg-success-solid, var(--utility-green-600, #16a34a)));
    border-color: var(--border-button-success, var(--border-success-solid, var(--alpha-0)));
  }
  .btn-success:hover {
    background-color: var(--bg-button-success-hover, var(--bg-success-solid-hover, var(--utility-green-700, #15803d)));
  }
  .btn-success:active {
    background-color: var(--bg-button-success-active, var(--bg-success-solid-active, var(--utility-green-800, #166534)));
  }
  .btn-success-outline {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-success-outline, var(--utility-green-700, #15803d));
    background-color: var(--bg-button-success-outline, var(--alpha-0));
    border-color: var(--border-button-success-outline, var(--alpha-0));
  }
  .btn-success-outline:hover {
    background-color: var(--bg-button-success-outline-hover, var(--utility-green-50, #f0fdf4));
  }
  .btn-success-outline:active {
    background-color: var(--bg-button-success-outline-active, var(--utility-green-100, #dcfce7));
  }
  .btn-warning {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-warning, var(--text-on-warning, var(--alpha-white-100)));
    background-color: var(--bg-button-warning, var(--bg-warning-solid, var(--utility-amber-600, #d97706)));
    border-color: var(--border-button-warning, var(--border-warning-solid, var(--alpha-0)));
  }
  .btn-warning:hover {
    background-color: var(--bg-button-warning-hover, var(--bg-warning-solid-hover, var(--utility-amber-700, #b45309)));
  }
  .btn-warning:active {
    background-color: var(--bg-button-warning-active, var(--bg-warning-solid-active, var(--utility-amber-800, #92400e)));
  }
  .btn-warning-outline {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-warning-outline, var(--utility-amber-700, #b45309));
    background-color: var(--bg-button-warning-outline, var(--alpha-0));
    border-color: var(--border-button-warning-outline, var(--alpha-0));
  }
  .btn-warning-outline:hover {
    background-color: var(--bg-button-warning-outline-hover, var(--utility-amber-50, #fffbeb));
  }
  .btn-warning-outline:active {
    background-color: var(--bg-button-warning-outline-active, var(--utility-amber-100, #fef3c7));
  }
  .btn-info {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-info, var(--alpha-white-100));
    background-color: var(--bg-button-info, var(--bg-info-solid, var(--utility-blue-600, #2563eb)));
    border-color: var(--border-button-info, var(--alpha-0));
  }
  .btn-info:hover {
    background-color: var(--bg-button-info-hover, var(--utility-blue-700, #1d4ed8));
  }
  .btn-info:active {
    background-color: var(--bg-button-info-active, var(--utility-blue-800, #1e40af));
  }
  .btn-info-outline {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-button-info-outline, var(--utility-blue-700, #1d4ed8));
    background-color: var(--bg-button-info-outline, var(--alpha-0));
    border-color: var(--border-button-info-outline, var(--alpha-0));
  }
  .btn-info-outline:hover {
    background-color: var(--bg-button-info-outline-hover, var(--utility-blue-50, #eff6ff));
  }
  .btn-info-outline:active {
    background-color: var(--bg-button-info-outline-active, var(--utility-blue-100, #dbeafe));
  }
  .btn-glass {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    overflow: hidden;
    z-index: 0;
    color: var(--text-button-glass);
    background-color: var(--bg-button-glass);
    border-color: var(--border-button-glass);
  }
  .btn-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='1'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: var(--opacity-button-grain, 0);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .btn-glass > * {
    position: relative;
    z-index: 1;
  }
  .btn-glass:hover {
    color: var(--text-button-glass-hover);
    background-color: var(--bg-button-glass-hover);
    border-color: var(--border-button-glass-hover);
  }
  .btn-glass:active {
    color: var(--text-button-glass-active);
    background-color: var(--bg-button-glass-active);
    border-color: var(--border-button-glass-active);
  }
  .btn-primary, .btn-cta, .btn-danger, .btn-success, .btn-warning, .btn-info {
    position: relative;
  }
  .btn-primary::before, .btn-cta::before, .btn-danger::before, .btn-success::before, .btn-warning::before, .btn-info::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid var(--alpha-white-100);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--alpha-white-100) 12%, transparent);
    }
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, var(--color-white) 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--color-white) 0%, transparent 100%);
  }
  .btn-primary:not(.btn-icon) :is(i, svg), .btn-cta:not(.btn-icon) :is(i, svg) {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 70%, transparent);
    }
  }
  .btn-primary:not(.btn-icon):hover :is(i, svg), .btn-cta:not(.btn-icon):hover :is(i, svg) {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 85%, transparent);
    }
  }
  .btn-xs {
    --ctl-h: var(--control-h-xs);
    --ctl-line: var(--control-line-xs);
    --ctl-fs: var(--control-fs-xs);
    --ctl-px: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .btn-sm {
    --ctl-h: var(--control-h-sm);
    --ctl-line: var(--control-line-sm);
    --ctl-fs: var(--control-fs-sm);
    --ctl-px: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .btn-md {
    --ctl-h: var(--control-h-md);
    --ctl-line: var(--control-line-md);
    --ctl-fs: var(--control-fs-md);
    --ctl-px: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .btn-lg {
    --ctl-h: var(--control-h-lg);
    --ctl-line: var(--control-line-lg);
    --ctl-fs: var(--control-fs-lg);
    --ctl-px: calc(var(--spacing) * 5);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .btn-pill {
    border-radius: var(--radius-full);
  }
  .btn-with-icon > i, .btn-with-icon > svg {
    margin-left: calc(var(--spacing) * -0.5);
  }
  .btn-icon {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    padding: 0;
    line-height: 1;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
  }
  .btn-icon-xs {
    padding: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: 1;
    line-height: 1;
    width: var(--control-h-xs);
    height: var(--control-h-xs);
    min-height: var(--control-h-xs);
  }
  .btn-icon-sm {
    padding: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: 1;
    line-height: 1;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    min-height: var(--control-h-sm);
  }
  .btn-icon-md {
    padding: 0;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-leading: 1;
    line-height: 1;
    width: var(--control-h-md);
    height: var(--control-h-md);
    min-height: var(--control-h-md);
  }
  .btn-icon-lg {
    padding: 0;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-leading: 1;
    line-height: 1;
    width: var(--control-h-lg);
    height: var(--control-h-lg);
    min-height: var(--control-h-lg);
  }
  .btn-icon i {
    --tw-leading: 1;
    line-height: 1;
    font-size: 1em;
  }
  .btn-icon.btn-secondary, .btn-icon.btn-soft, .btn-icon.btn-ghost, .btn-icon.btn-danger-outline, .btn-icon.btn-success-outline, .btn-icon.btn-warning-outline, .btn-icon.btn-info-outline {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .is-loading {
    pointer-events: none;
  }
  .btn-spinner {
    display: inline-block;
    animation: var(--animate-spin);
  }
  .btn-group {
    display: inline-flex;
    vertical-align: middle;
  }
  .btn-group > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ) {
    margin-left: -1px;
    border-radius: var(--radius-none);
    box-shadow: none;
  }
  .btn-group > .dropdown > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ) {
    margin-left: -1px;
    border-radius: var(--radius-none);
    box-shadow: none;
  }
  .btn-group > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ):first-child {
    margin-left: 0;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .btn-group > .dropdown:first-child > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ) {
    margin-left: 0;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .btn-group > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ):last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .btn-group > .dropdown:last-child > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .btn-group.btn-group-pill > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ):first-child {
    border-top-left-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
  }
  .btn-group.btn-group-pill > .dropdown:first-child > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ) {
    border-top-left-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
  }
  .btn-group.btn-group-pill > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ):last-child {
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
  }
  .btn-group.btn-group-pill > .dropdown:last-child > :is( [class^="btn-"], [class*=" btn-"], a[class^="btn-"], a[class*=" btn-"] ) {
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
  }
  .btn-group > * {
    position: relative;
    z-index: 0;
  }
  .btn-group > *:hover, .btn-group > *:focus-visible {
    z-index: 1;
  }
  .btn-group > .dropdown:has(.show) {
    z-index: 2;
  }
  .btn-group.btn-group-shadow {
    border-radius: var(--radius-md);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .btn-group.btn-group-shadow > * {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .btn-group.btn-group-compact > :is(.btn-primary,.btn-secondary,.btn-soft,.btn-ghost,.btn-danger,.btn-danger-outline,.btn-success,.btn-success-outline,.btn-warning,.btn-warning-outline,.btn-info,.btn-info-outline,.btn-glass) {
    padding-inline: calc(var(--spacing) * 2);
  }
  .btn-group.btn-group-compact > :is(.btn-primary,.btn-secondary,.btn-soft,.btn-ghost,.btn-danger,.btn-danger-outline,.btn-success,.btn-success-outline,.btn-warning,.btn-warning-outline,.btn-info,.btn-info-outline,.btn-glass).btn-xs {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .btn-group.btn-group-compact > :is(.btn-primary,.btn-secondary,.btn-soft,.btn-ghost,.btn-danger,.btn-danger-outline,.btn-success,.btn-success-outline,.btn-warning,.btn-warning-outline,.btn-info,.btn-info-outline,.btn-glass).btn-sm {
    padding-inline: calc(var(--spacing) * 2);
  }
  .btn-group.btn-group-compact > :is(.btn-primary,.btn-secondary,.btn-soft,.btn-ghost,.btn-danger,.btn-danger-outline,.btn-success,.btn-success-outline,.btn-warning,.btn-warning-outline,.btn-info,.btn-info-outline,.btn-glass).btn-md {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .btn-group.btn-group-compact > :is(.btn-primary,.btn-secondary,.btn-soft,.btn-ghost,.btn-danger,.btn-danger-outline,.btn-success,.btn-success-outline,.btn-warning,.btn-warning-outline,.btn-info,.btn-info-outline,.btn-glass).btn-lg {
    padding-inline: calc(var(--spacing) * 3);
  }
  .btn-group.btn-group-compact > .btn-icon.btn-icon-lg {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
  }
  .btn-group.btn-group-compact > .btn-icon.btn-icon-md {
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
  }
  .btn-group.btn-group-compact > .btn-icon.btn-icon-sm {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .btn-group.btn-group-compact > .btn-icon.btn-icon-xs {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .btn-group.btn-group-equal {
    width: 100%;
  }
  .btn-group.btn-group-equal > * {
    flex: 1;
  }
  .btn-group.btn-group-equal > .btn-icon {
    min-width: calc(var(--spacing) * 10);
  }
  :is([class^="btn-"], [class*=" btn-"]):not(.btn-icon):not(.badge) > .badge {
    margin-block: calc(var(--spacing) * -1);
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: 1;
    line-height: 1;
    padding-block: 0;
  }
  .btn-tonal {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-primary-solid);
    background-color: var(--text-primary-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary-solid) 12%, transparent);
    }
    border-color: transparent;
  }
  .btn-tonal:hover {
    background-color: var(--text-primary-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary-solid) 18%, transparent);
    }
  }
  .btn-tonal:active {
    background-color: var(--text-primary-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary-solid) 24%, transparent);
    }
  }
  .btn-tonal-success {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-success-strong, var(--text-success));
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 12%, transparent);
    }
    border-color: transparent;
  }
  .btn-tonal-success:hover {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 18%, transparent);
    }
  }
  .btn-tonal-success:active {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 24%, transparent);
    }
  }
  .btn-tonal-warning {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-warning-strong, var(--text-warning));
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 12%, transparent);
    }
    border-color: transparent;
  }
  .btn-tonal-warning:hover {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 18%, transparent);
    }
  }
  .btn-tonal-warning:active {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 24%, transparent);
    }
  }
  .btn-tonal-danger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-danger-strong, var(--text-danger));
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 12%, transparent);
    }
    border-color: transparent;
  }
  .btn-tonal-danger:hover {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 18%, transparent);
    }
  }
  .btn-tonal-danger:active {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 24%, transparent);
    }
  }
  .btn-outline {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-primary);
    background-color: transparent;
    border-color: var(--border-control, var(--border-divider));
  }
  .btn-outline:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
    border-color: var(--border-control-hover);
  }
  .btn-outline:active {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
    border-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-primary) 28%, transparent);
    }
  }
  .btn-primary-outline {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-brand);
    background-color: transparent;
    border-color: var(--border-control, var(--border-divider));
  }
  .btn-primary-outline:hover {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 8%, transparent);
    }
    border-color: var(--border-control-hover);
  }
  .btn-primary-outline:active {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 14%, transparent);
    }
  }
  .btn-cta {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    position: relative;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    border-color: transparent;
    padding: 10px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: var(--shadow-xs), 0 8px 24px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-xs), 0 8px 24px color-mix(in oklch, var(--bg-brand-solid) 24%, transparent);
    }
    transition: background-color 100ms linear, box-shadow 150ms ease, transform 150ms ease;
  }
  .btn-cta:hover {
    background-color: var(--bg-brand-solid-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs), 0 12px 32px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-xs), 0 12px 32px color-mix(in oklch, var(--bg-brand-solid) 30%, transparent);
    }
  }
  .btn-cta:active {
    background-color: var(--bg-brand-solid-active);
    transform: translateY(0);
    box-shadow: var(--shadow-xs), 0 6px 18px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-xs), 0 6px 18px color-mix(in oklch, var(--bg-brand-solid) 20%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-cta {
      transition: none;
    }
    .btn-cta:hover, .btn-cta:active {
      transform: none;
    }
  }
  .btn-block {
    width: 100%;
    justify-content: center;
  }
  .btn-xl {
    --ctl-h: var(--control-h-xl);
    --ctl-line: var(--control-line-xl);
    --ctl-fs: var(--control-fs-xl);
    --ctl-px: calc(var(--spacing) * 6);
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .btn-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
    width: 48px;
    height: 48px;
    color: var(--text-button-primary, var(--alpha-white-100));
    background-color: var(--bg-button-primary);
    border: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.08);
    cursor: pointer;
  }
  .btn-fab:hover {
    background-color: var(--bg-button-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,.20), 0 4px 8px rgba(0,0,0,.10);
  }
  .btn-fab:active {
    background-color: var(--bg-button-primary-active);
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,.16);
  }
  .btn-fab:focus-visible {
    outline: 2px solid var(--text-info);
    outline-offset: 2px;
  }
  .btn-fab i {
    font-size: 18px;
  }
  .btn-fab-sm {
    width: var(--control-h-md);
    height: var(--control-h-md);
  }
  .btn-fab-sm i {
    font-size: 16px;
  }
  .btn-fab-lg {
    width: var(--control-h-xl);
    height: var(--control-h-xl);
  }
  .btn-fab-lg i {
    font-size: 22px;
  }
  .btn-fab-extended {
    width: auto;
    height: 48px;
    padding: 0 20px;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
  }
  .btn-fab-extended i {
    font-size: 16px;
  }
  .btn-fab--anchor-br {
    position: absolute;
    right: 24px;
    bottom: 24px;
  }
  .btn-fab--anchor-bl {
    position: absolute;
    left: 24px;
    bottom: 24px;
  }
  .btn-fab--anchor-tr {
    position: absolute;
    right: 24px;
    top: 24px;
  }
  .btn-fab--anchor-tl {
    position: absolute;
    left: 24px;
    top: 24px;
  }
  .btn-fab--fixed {
    position: fixed;
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-fab {
      transition: none;
    }
    .btn-fab:hover, .btn-fab:active {
      transform: none;
    }
  }
  .btn.is-loading, .btn-icon.is-loading, .btn-fab.is-loading, [class*="btn-"].is-loading:not(.btn-link) {
    pointer-events: none;
    position: relative;
    color: transparent !important;
    text-shadow: none !important;
  }
  .btn.is-loading > *, .btn-icon.is-loading > *, .btn-fab.is-loading > *, [class*="btn-"].is-loading:not(.btn-link) > * {
    visibility: hidden;
  }
  .btn.is-loading::after, .btn-icon.is-loading::after, .btn-fab.is-loading::after, [class*="btn-"].is-loading:not(.btn-link)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: 0.85;
    animation: btn-loading-spin 0.7s linear infinite;
    color: var(--text-button-primary, var(--text-primary));
  }
  .btn-secondary.is-loading::after, .btn-soft.is-loading::after, .btn-ghost.is-loading::after, .btn-light.is-loading::after, .btn-outline.is-loading::after, .btn-tonal.is-loading::after, .btn-danger-outline.is-loading::after, .btn-success-outline.is-loading::after, .btn-warning-outline.is-loading::after, .btn-info-outline.is-loading::after, .btn-primary-outline.is-loading::after, .btn-tonal-success.is-loading::after, .btn-tonal-warning.is-loading::after, .btn-tonal-danger.is-loading::after {
    color: var(--text-primary);
  }
  .btn-primary.is-loading:not(.btn-link)::after, .btn-cta.is-loading:not(.btn-link)::after {
    color: var(--text-on-brand);
  }
  @keyframes btn-loading-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn.is-loading::after, .btn-icon.is-loading::after, .btn-fab.is-loading::after, [class*="btn-"].is-loading:not(.btn-link)::after {
      animation: none;
    }
  }
  .btn-split {
    display: inline-flex;
    vertical-align: middle;
    position: relative;
  }
  .btn-split > .btn-split__action {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .btn-split > .btn-split__chevron {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid var(--alpha-white-100);
    @supports (color: color-mix(in lab, red, red)) {
      border-left: 1px solid color-mix(in oklch, var(--alpha-white-100) 18%, transparent);
    }
    padding-left: 8px;
    padding-right: 8px;
    min-width: 28px;
  }
  .btn-split > .btn-secondary.btn-split__chevron, .btn-split > .btn-soft.btn-split__chevron, .btn-split > .btn-ghost.btn-split__chevron, .btn-split > .btn-light.btn-split__chevron, .btn-split > .btn-outline.btn-split__chevron, .btn-split > .btn-tonal.btn-split__chevron, .btn-split > .btn-primary-outline.btn-split__chevron, .btn-split > .btn-danger-outline.btn-split__chevron, .btn-split > .btn-success-outline.btn-split__chevron, .btn-split > .btn-warning-outline.btn-split__chevron, .btn-split > .btn-info-outline.btn-split__chevron {
    border-left-color: var(--border-divider);
  }
  [class*="btn-"][aria-pressed="true"]:not(.btn-secondary) {
    filter: brightness(0.96);
  }
  [class*="btn-"][aria-current="page"]:not(.btn-secondary) {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
    color: var(--text-primary);
  }
}
@layer utilities {
  .btn-social {
    --social-facebook: #1877F2;
    --social-facebook-hover: #0C63D4;
    --social-dribble: #EA4C89;
    --social-dribble-hover: #E62872;
    --social-linkedin: #0A66C2;
    --social-linkedin-hover: #004182;
    --social-dark: #0A0A0A;
    --social-dark-hover: #1F1F1F;
    position: relative;
    display: inline-flex;
    height: auto;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    -webkit-tap-highlight-color: transparent;
    min-height: 2.5rem;
    color: var(--text-secondary);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    transition: background-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
  }
  .btn-social:hover {
    background-color: var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-card), var(--text-primary) 4%);
    }
    color: var(--text-secondary-hover);
  }
  .btn-social__logo {
    pointer-events: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--text-quaternary);
  }
  .btn-social:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .btn-social:disabled, .btn-social[aria-disabled="true"], .btn-social[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn-social-xs {
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    min-height: 2rem;
  }
  .btn-social-xs .btn-social__logo {
    width: 0.875rem;
    height: 0.875rem;
  }
  .btn-social-sm {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    min-height: 2.25rem;
  }
  .btn-social-sm .btn-social__logo {
    width: 1rem;
    height: 1rem;
  }
  .btn-social-md {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    min-height: 2.5rem;
  }
  .btn-social-md .btn-social__logo {
    width: 1rem;
    height: 1rem;
  }
  .btn-social-lg {
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    min-height: 2.75rem;
  }
  .btn-social-lg .btn-social__logo {
    width: 1.25rem;
    height: 1.25rem;
  }
  .btn-social-icon {
    padding: 0;
    gap: 0;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
  }
  .btn-social-icon.btn-social-xs {
    width: 2rem;
    height: 2rem;
    min-height: 2rem;
  }
  .btn-social-icon.btn-social-sm {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
  }
  .btn-social-icon.btn-social-md {
    width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
  }
  .btn-social-icon.btn-social-lg {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
  .btn-social-facebook:not(.btn-social-color):not(.btn-social-gray), .btn-social-dribble:not(.btn-social-color):not(.btn-social-gray), .btn-social-linkedin:not(.btn-social-color):not(.btn-social-gray), .btn-social-apple:not(.btn-social-color):not(.btn-social-gray), .btn-social-twitter:not(.btn-social-color):not(.btn-social-gray), .btn-social-x:not(.btn-social-color):not(.btn-social-gray), .btn-social-github:not(.btn-social-color):not(.btn-social-gray), .btn-social-figma:not(.btn-social-color):not(.btn-social-gray) {
    color: var(--color-white);
    box-shadow: var(--shadow-xs);
  }
  .btn-social-facebook:not(.btn-social-color):not(.btn-social-gray)::before, .btn-social-dribble:not(.btn-social-color):not(.btn-social-gray)::before, .btn-social-linkedin:not(.btn-social-color):not(.btn-social-gray)::before, .btn-social-apple:not(.btn-social-color):not(.btn-social-gray)::before, .btn-social-twitter:not(.btn-social-color):not(.btn-social-gray)::before, .btn-social-x:not(.btn-social-color):not(.btn-social-gray)::before, .btn-social-github:not(.btn-social-color):not(.btn-social-gray)::before, .btn-social-figma:not(.btn-social-color):not(.btn-social-gray)::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--color-white) 12%, transparent);
    }
    border-radius: 7px;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, var(--color-white) 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--color-white) 0%, transparent 100%);
  }
  .btn-social-facebook:not(.btn-social-color):not(.btn-social-gray) {
    background-color: var(--social-facebook);
  }
  .btn-social-facebook:not(.btn-social-color):not(.btn-social-gray):hover {
    background-color: var(--social-facebook-hover);
    color: var(--color-white);
  }
  .btn-social-dribble:not(.btn-social-color):not(.btn-social-gray) {
    background-color: var(--social-dribble);
  }
  .btn-social-dribble:not(.btn-social-color):not(.btn-social-gray):hover {
    background-color: var(--social-dribble-hover);
    color: var(--color-white);
  }
  .btn-social-linkedin:not(.btn-social-color):not(.btn-social-gray) {
    background-color: var(--social-linkedin);
  }
  .btn-social-linkedin:not(.btn-social-color):not(.btn-social-gray):hover {
    background-color: var(--social-linkedin-hover);
    color: var(--color-white);
  }
  .btn-social-apple:not(.btn-social-color):not(.btn-social-gray), .btn-social-twitter:not(.btn-social-color):not(.btn-social-gray), .btn-social-x:not(.btn-social-color):not(.btn-social-gray), .btn-social-github:not(.btn-social-color):not(.btn-social-gray), .btn-social-figma:not(.btn-social-color):not(.btn-social-gray) {
    background-color: var(--social-dark);
  }
  .btn-social-apple:not(.btn-social-color):not(.btn-social-gray):hover, .btn-social-twitter:not(.btn-social-color):not(.btn-social-gray):hover, .btn-social-x:not(.btn-social-color):not(.btn-social-gray):hover, .btn-social-github:not(.btn-social-color):not(.btn-social-gray):hover, .btn-social-figma:not(.btn-social-color):not(.btn-social-gray):hover {
    background-color: var(--social-dark-hover);
    color: var(--color-white);
  }
  .btn-social-facebook:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo :is(path), .btn-social-dribble:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo :is(path) {
    fill: currentColor;
  }
  .btn-social-facebook:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo, .btn-social-dribble:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo, .btn-social-linkedin:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo, .btn-social-apple:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo, .btn-social-twitter:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo, .btn-social-x:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo, .btn-social-github:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo, .btn-social-figma:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo {
    color: var(--color-white);
  }
  .btn-social-color {
    color: var(--text-secondary);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
  }
  .btn-social-color:hover {
    background-color: var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-card), var(--text-primary) 4%);
    }
    color: var(--text-secondary-hover);
  }
  .btn-social-color.btn-social-apple .btn-social__logo, .btn-social-color.btn-social-twitter .btn-social__logo, .btn-social-color.btn-social-x .btn-social__logo, .btn-social-color.btn-social-github .btn-social__logo {
    color: var(--text-primary);
  }
  .btn-social-gray {
    color: var(--text-secondary);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
  }
  .btn-social-gray:hover {
    background-color: var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-card), var(--text-primary) 4%);
    }
    color: var(--text-secondary-hover);
  }
  .btn-social-gray .btn-social__logo {
    color: var(--text-quaternary);
  }
  .btn-social-gray .btn-social__logo :is(path) {
    fill: currentColor;
  }
  .btn-social-gray:hover .btn-social__logo {
    color: var(--text-tertiary);
  }
  .btn-social-dribble:not(.btn-social-color):not(.btn-social-gray) .btn-social__logo .social-mark-bg, .btn-social-gray .btn-social__logo .social-mark-bg {
    fill: none;
  }
  .btn-social.is-loading {
    pointer-events: none;
    color: transparent !important;
  }
  .btn-social.is-loading > * {
    visibility: hidden;
  }
  .btn-social.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: 0.85;
    color: var(--text-secondary);
    animation: btn-social-spin 0.7s linear infinite;
  }
  .btn-social-facebook:not(.btn-social-color):not(.btn-social-gray).is-loading::after, .btn-social-dribble:not(.btn-social-color):not(.btn-social-gray).is-loading::after, .btn-social-linkedin:not(.btn-social-color):not(.btn-social-gray).is-loading::after, .btn-social-apple:not(.btn-social-color):not(.btn-social-gray).is-loading::after, .btn-social-twitter:not(.btn-social-color):not(.btn-social-gray).is-loading::after, .btn-social-x:not(.btn-social-color):not(.btn-social-gray).is-loading::after, .btn-social-github:not(.btn-social-color):not(.btn-social-gray).is-loading::after, .btn-social-figma:not(.btn-social-color):not(.btn-social-gray).is-loading::after {
    color: var(--color-white);
  }
  @keyframes btn-social-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .btn-social-block {
    width: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-social {
      transition: none;
    }
    .btn-social.is-loading::after {
      animation: none;
    }
  }
}
@layer utilities {
  .app-store-btn {
    --app-store-badge-bg: #000000;
    --app-store-badge-border: color-mix(in srgb, #fff 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --app-store-badge-border: color-mix(in oklch, var(--color-white) 12%, transparent);
    }
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 7px;
    background-color: var(--app-store-badge-bg);
    box-shadow: inset 0 0 0 1px var(--app-store-badge-border);
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 100ms linear, background-color 100ms linear, filter 100ms linear;
  }
  .app-store-btn__badge {
    pointer-events: none;
    display: block;
    height: 2.5rem;
    width: auto;
    border-radius: inherit;
  }
  .app-store-btn:hover {
    filter: brightness(1.06);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-white) 22%, transparent);
    }
  }
  .app-store-btn:active {
    filter: brightness(0.96);
  }
  .app-store-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .app-store-btn[aria-disabled="true"], .app-store-btn[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .app-store-btn-md .app-store-btn__badge {
    height: 2.5rem;
  }
  .app-store-btn-lg .app-store-btn__badge {
    height: 2.75rem;
  }
  .app-store-btn-outline {
    --app-store-badge-bg: transparent;
    color: var(--text-primary);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--text-primary);
  }
  .app-store-btn-outline:hover {
    filter: none;
    background-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--text-primary) 4%);
    }
    box-shadow: inset 0 0 0 1px var(--text-primary);
  }
  .app-store-btn-outline:active {
    filter: none;
    background-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--text-primary) 8%);
    }
  }
  .app-store-btn-outline .app-store-btn__badge .fill-current {
    fill: currentColor;
  }
  .app-store-btn-outline .app-store-btn__badge .stroke-current {
    stroke: currentColor;
  }
  .app-store-btn-white {
    --app-store-badge-border: transparent;
  }
  .app-store-btn-block {
    width: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .app-store-btn {
      transition: none;
    }
  }
}
@layer utilities {
  .store-badge {
    --store-badge-bg: #000000;
    --store-badge-border: color-mix(in srgb, #fff 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --store-badge-border: color-mix(in oklch, var(--color-white) 12%, transparent);
    }
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 7px;
    background-color: var(--store-badge-bg);
    box-shadow: inset 0 0 0 1px var(--store-badge-border);
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 100ms linear, background-color 100ms linear, filter 100ms linear;
  }
  .store-badge__art {
    pointer-events: none;
    display: block;
    height: 2.5rem;
    width: auto;
    border-radius: inherit;
  }
  .store-badge:hover {
    filter: brightness(1.06);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-white) 22%, transparent);
    }
  }
  .store-badge:active {
    filter: brightness(0.96);
  }
  .store-badge:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .store-badge[aria-disabled="true"], .store-badge[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .store-badge--lg .store-badge__art {
    height: 2.75rem;
  }
  .store-badge--outline {
    --store-badge-bg: transparent;
    color: var(--text-primary);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--text-primary);
  }
  .store-badge--outline:hover {
    filter: none;
    background-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--text-primary) 4%);
    }
    box-shadow: inset 0 0 0 1px var(--text-primary);
  }
  .store-badge--outline:active {
    filter: none;
    background-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--text-primary) 8%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .store-badge {
      transition: none;
    }
  }
}
@layer utilities {
  .segmented {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    vertical-align: middle;
    padding: 3px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
  }
  .segmented__option {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    min-height: 26px;
    padding: 3px 12px;
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  }
  .segmented__option:hover:not([aria-checked="true"]):not(:disabled) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
  }
  .segmented__option[aria-checked="true"], .segmented__option.is-selected {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-xs);
  }
  .segmented__option:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .segmented__option:disabled, .segmented__option[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 50%;
  }
  .segmented__option :is(i, svg) {
    font-size: 1em;
  }
  .segmented-sm .segmented__option {
    min-height: 22px;
    padding: 2px 10px;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .segmented-md .segmented__option {
    min-height: 34px;
    padding: 6px 16px;
  }
  .segmented-lg .segmented__option {
    min-height: 42px;
    padding: 9px 20px;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .segmented-block {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
  }
  .segmented-block .segmented__option {
    flex: 1;
  }
  .segmented-icon .segmented__option {
    padding-inline: 0;
    min-width: 32px;
  }
  .segmented-icon.segmented-sm .segmented__option {
    min-width: 26px;
  }
  .segmented-icon.segmented-lg .segmented__option {
    min-width: 40px;
  }
  @media (prefers-reduced-motion: reduce) {
    .segmented__option {
      transition: none;
    }
  }
  .btn-toolbar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    vertical-align: middle;
  }
  .btn-toolbar__sep {
    align-self: stretch;
    width: 1px;
    min-height: 20px;
    margin-inline: 2px;
    background-color: var(--border-divider);
  }
  .btn-toolbar__spacer {
    flex: 1;
  }
  .btn-toolbar-block {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
  }
  .btn-toolbar-vertical {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: stretch;
  }
  .btn-toolbar-vertical .btn-toolbar__sep {
    width: auto;
    min-height: 0;
    height: 1px;
    margin-block: 2px;
    margin-inline: 0;
  }
  .btn-toggle {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-xs);
  }
  .btn-toggle:hover:not(:disabled) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
  }
  .btn-toggle[aria-pressed="true"], .btn-toggle.is-active {
    color: var(--text-primary);
    background-color: var(--bg-active);
    border-color: var(--border-secondary);
    box-shadow: inset 0 1px 2px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 1px 2px color-mix(in oklch, var(--text-primary) 14%, transparent);
    }
  }
  .btn-toggle:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .btn-toggle-accent[aria-pressed="true"], .btn-toggle-accent.is-active {
    color: var(--text-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 14%, transparent);
    }
    border-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--bg-brand-solid) 32%, transparent);
    }
    box-shadow: none;
  }
  .btn-toggle__label {
    display: inline-block;
  }
  .btn-copy {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-xs);
  }
  .btn-copy:hover:not(:disabled) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
  }
  .btn-copy:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .btn-copy__done {
    display: none;
  }
  .btn-copy__idle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .btn-copy.is-copied {
    color: var(--text-success);
    border-color: var(--border-success);
    background-color: var(--bg-success-subtle);
  }
  .btn-copy.is-copied .btn-copy__idle {
    display: none;
  }
  .btn-copy.is-copied .btn-copy__done {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .btn-copy-icon {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    padding: 0;
    line-height: 1;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .btn-copy-icon:hover:not(:disabled) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
  }
  .btn-copy-icon:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .btn-copy-icon.is-copied {
    color: var(--text-success);
    border-color: var(--border-success);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-copy, .btn-copy-icon {
      transition: none;
    }
  }
  .btn-async {
    position: relative;
    overflow: hidden;
    --btn-progress: 0;
  }
  .btn-async::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(var(--btn-progress));
    transform-origin: left center;
    background-color: currentColor;
    opacity: 0.9;
    border-radius: var(--radius-full);
    pointer-events: none;
    visibility: hidden;
    transition: transform var(--duration-normal) var(--ease-out);
  }
  .btn-async.is-busy {
    pointer-events: none;
  }
  .btn-async.is-busy::after {
    visibility: visible;
  }
  .btn-async.is-done {
    color: var(--text-success);
    border-color: var(--border-success);
  }
  .btn-async.is-error {
    color: var(--text-danger);
    border-color: var(--border-danger);
  }
  .btn-async__busy, .btn-async__done {
    display: none;
  }
  .btn-async.is-busy .btn-async__idle, .btn-async.is-done .btn-async__idle {
    display: none;
  }
  .btn-async.is-busy .btn-async__busy {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .btn-async.is-done .btn-async__done {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-async::after {
      transition: none;
    }
  }
  .btn-confirm {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
    color: var(--text-danger);
    background-color: transparent;
    border-color: var(--border-danger);
    box-shadow: none;
  }
  .btn-confirm:hover:not(:disabled) {
    background-color: var(--bg-danger-subtle);
  }
  .btn-confirm:focus-visible {
    outline: 2px solid var(--border-danger, var(--text-danger));
    outline-offset: 2px;
  }
  .btn-confirm__confirm {
    display: none;
  }
  .btn-confirm__label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .btn-confirm.is-armed {
    color: var(--text-on-solid);
    background-color: var(--bg-danger-solid);
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }
  .btn-confirm.is-armed .btn-confirm__label {
    display: none;
  }
  .btn-confirm.is-armed .btn-confirm__confirm {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .btn-confirm-neutral {
    color: var(--text-secondary);
    border-color: var(--border-primary);
  }
  .btn-confirm-neutral:hover:not(:disabled) {
    background-color: var(--bg-hover);
  }
  .btn-confirm-neutral.is-armed {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .btn-confirm-neutral:focus-visible {
    outline-color: var(--border-focus);
  }
  .btn-reaction {
    display: inline-flex;
    min-height: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
  }
  .btn-reaction:hover:not(:disabled) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
  }
  .btn-reaction:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .btn-reaction__count {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .btn-reaction :is(i, svg) {
    font-size: 1em;
  }
  .btn-reaction-like[aria-pressed="true"], .btn-reaction-like.is-active {
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
    border-color: var(--border-danger);
  }
  .btn-reaction-like[aria-pressed="true"] .btn-reaction__count, .btn-reaction-like.is-active .btn-reaction__count {
    color: var(--text-danger);
  }
  .btn-reaction-up[aria-pressed="true"], .btn-reaction-up.is-active {
    color: var(--text-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 12%, transparent);
    }
    border-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--bg-brand-solid) 32%, transparent);
    }
  }
  .btn-reaction-up[aria-pressed="true"] .btn-reaction__count, .btn-reaction-up.is-active .btn-reaction__count {
    color: var(--bg-brand-solid);
  }
  .btn-reaction.just-reacted :is(i, svg) {
    animation: btn-reaction-pop var(--duration-normal) var(--ease-out);
  }
  @keyframes btn-reaction-pop {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.28);
    }
    100% {
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-reaction {
      transition: none;
    }
    .btn-reaction.just-reacted :is(i, svg) {
      animation: none;
    }
  }
  .btn-rich {
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  }
  .btn-rich:hover:not(:disabled) {
    background-color: var(--bg-hover);
    border-color: var(--border-secondary);
  }
  .btn-rich:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .btn-rich[aria-pressed="true"], .btn-rich.is-selected {
    border-color: var(--border-focus);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 6%, transparent);
    }
  }
  .btn-rich__media {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
  }
  .btn-rich__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .btn-rich__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .btn-rich__desc {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    color: var(--text-tertiary);
  }
  .btn-rich__trail {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    color: var(--text-quaternary);
  }
  .btn__kbd {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 18px;
    padding: 2px 5px;
    margin-inline-start: 2px;
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-divider);
    border-radius: var(--radius-sm);
  }
  :is(.btn-primary, .btn-cta) .btn__kbd {
    color: var(--text-on-brand);
    background-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-on-brand) 16%, transparent);
    }
    border-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-on-brand) 28%, transparent);
    }
  }
  .btn-shortcut {
    position: relative;
  }
  .btn-dock {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .btn-dock__spacer {
    flex: 1;
  }
  .btn-dock__group {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .btn-dock__end {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .btn-dock-sticky {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 12px 0;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-divider);
  }
  .btn-dock-bar {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
  }
  @media (max-width: 40rem) {
    .btn-dock-responsive {
      flex-direction: column;
      align-items: stretch;
    }
    .btn-dock-responsive .btn-dock__spacer {
      display: none;
    }
    .btn-dock-responsive .btn-dock__end {
      margin-left: 0;
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }
    .btn-dock-responsive .btn-dock__group {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }
  }
}
@layer components {
  @keyframes accordion-spin {
    to {
      transform: rotate(360deg);
    }
  }
}
@layer utilities {
  .spark .apexcharts-tooltip {
    background: var(--bg-spark-tooltip) !important;
    color: var(--text-spark-tooltip) !important;
    border: 1px solid var(--border-spark-tooltip) !important;
    box-shadow: none !important;
  }
  .spark .apexcharts-tooltip .apexcharts-tooltip-title {
    background: transparent !important;
    border-bottom: none !important;
    color: inherit !important;
  }
  .spark--thick {
    --stroke-spark-width: 3;
  }
  .spark--no-area {
    --fill-spark-area: transparent;
  }
  .spark--warning {
    --stroke-spark: var(--color-warning-500, #eab308);
  }
  .sparkline--success {
    --stroke-spark: var(--color-success-500, #10b981);
  }
  .sparkline--danger {
    --stroke-spark: var(--color-danger-500, #ef4444);
  }
  .sparkline--muted {
    --stroke-spark: var(--color-neutral-400, #9ca3af);
  }
  .spark--markers {
    --size-spark-marker: 2;
    --size-spark-marker-hover: 3;
  }
  .spark .apexcharts-tooltip {
    padding-inline: var(--spacing);
    padding-top: var(--spacing);
    padding-bottom: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .spark .apexcharts-tooltip-text {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .spark .apexcharts-tooltip-marker {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
  }
  .spark {
    --spark-warn-margin: 0.02;
  }
  .enodia-chart {
    min-width: 0;
    max-width: 100%;
  }
  .enodia-chart .apexcharts-canvas {
    font-family: inherit;
    max-width: 100%;
  }
  .enodia-chart .apexcharts-svg {
    overflow: visible;
    background: var(--apex-bg-surface);
  }
  .enodia-chart .apexcharts-title-text {
    font-size: 15px !important;
    fill: var(--apex-text);
  }
  .enodia-chart .apexcharts-subtitle-text {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    fill: var(--apex-text);
  }
  .enodia-chart .apexcharts-tooltip, .enodia-chart .apexcharts-tooltip.apexcharts-theme-light, .enodia-chart .apexcharts-tooltip.apexcharts-theme-dark {
    border-radius: var(--radius-lg) !important;
    padding-inline: var(--spacing) !important;
    padding-block: var(--spacing) !important;
    padding-bottom: 0 !important;
    font-size: 0.8125rem !important;
    line-height: var(--tw-leading, 1.25rem) !important;
    background: var(--apex-tooltip-bg) !important;
    border: 1px solid var(--apex-tooltip-border) !important;
    color: var(--apex-tooltip-text) !important;
    box-shadow: var(--apex-tooltip-shadow) !important;
  }
  .enodia-chart .apexcharts-tooltip-title {
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
    padding-inline: var(--spacing) !important;
    padding-block: calc(var(--spacing) * 0.5) !important;
    padding-bottom: 0 !important;
    font-size: 0.8125rem !important;
    line-height: var(--tw-leading, 1.25rem) !important;
    --tw-font-weight: var(--font-weight-medium) !important;
    font-weight: var(--font-weight-medium) !important;
    background: var(--apex-bg-subtle) !important;
    border-bottom: 1px solid var(--apex-tooltip-border) !important;
    color: var(--apex-tooltip-text) !important;
  }
  .enodia-chart .apexcharts-tooltip-text-label, .enodia-chart .apexcharts-tooltip-text-value, .enodia-chart .apexcharts-tooltip-y-label, .enodia-chart .apexcharts-tooltip-y-value, .enodia-chart .apexcharts-tooltip-x-value {
    font-size: 0.8125rem !important;
    line-height: var(--tw-leading, 1.25rem) !important;
    color: var(--apex-tooltip-text) !important;
  }
  .enodia-chart .apexcharts-tooltip-marker {
    width: calc(var(--spacing) * 1.5) !important;
    height: calc(var(--spacing) * 1.5) !important;
    border-radius: var(--radius-full) !important;
    border-color: var(--apex-tooltip-marker-border) !important;
  }
  .enodia-chart .apexcharts-xaxistooltip, .enodia-chart .apexcharts-xaxistooltip-bottom, .enodia-chart .apexcharts-xaxistooltip-top {
    border-radius: var(--radius-md) !important;
    padding-inline: var(--spacing) !important;
    padding-block: var(--spacing) !important;
    padding-bottom: 0 !important;
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    background: var(--apex-tooltip-bg) !important;
    border: 1px solid var(--apex-tooltip-border) !important;
    color: var(--apex-tooltip-text) !important;
    box-shadow: var(--apex-tooltip-shadow) !important;
  }
  .enodia-chart .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    color: var(--apex-tooltip-text) !important;
  }
  .enodia-chart .apexcharts-xaxistooltip:before, .enodia-chart .apexcharts-xaxistooltip:after {
    border-bottom-color: var(--apex-tooltip-border) !important;
  }
  .enodia-chart .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: var(--apex-tooltip-bg) !important;
  }
  .enodia-chart .apexcharts-yaxistooltip, .enodia-chart .apexcharts-yaxistooltip-left, .enodia-chart .apexcharts-yaxistooltip-right {
    border-radius: var(--radius-md) !important;
    padding-inline: var(--spacing) !important;
    padding-block: calc(var(--spacing) * 0.5) !important;
    padding-bottom: 0 !important;
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    background: var(--apex-tooltip-bg) !important;
    border: 1px solid var(--apex-tooltip-border) !important;
    color: var(--apex-tooltip-text) !important;
    box-shadow: var(--apex-tooltip-shadow) !important;
  }
  .enodia-chart .apexcharts-yaxistooltip .apexcharts-yaxistooltip-text {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    color: var(--apex-tooltip-text) !important;
  }
  .enodia-chart .apexcharts-yaxistooltip:before, .enodia-chart .apexcharts-yaxistooltip:after {
    border-right-color: var(--apex-tooltip-border) !important;
  }
  .enodia-chart .apexcharts-yaxistooltip-left:after {
    border-right-color: var(--apex-tooltip-bg) !important;
  }
  .enodia-chart .apexcharts-yaxistooltip-right:before, .enodia-chart .apexcharts-yaxistooltip-right:after {
    border-left-color: var(--apex-tooltip-border) !important;
  }
  .enodia-chart .apexcharts-yaxistooltip-right:after {
    border-left-color: var(--apex-tooltip-bg) !important;
  }
  .enodia-chart .apexcharts-gridline, .enodia-chart .apexcharts-grid-borders line {
    stroke: var(--apex-border);
  }
  .enodia-chart .apexcharts-xaxis-tick, .enodia-chart .apexcharts-yaxis-tick, .enodia-chart .apexcharts-axis-border {
    stroke: var(--apex-border);
  }
  .enodia-chart .apexcharts-xaxis-label, .enodia-chart .apexcharts-yaxis-label, .enodia-chart .apexcharts-xaxis-title-text, .enodia-chart .apexcharts-yaxis-title-text {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    fill: var(--apex-text);
  }
  .enodia-chart .apexcharts-xcrosshairs, .enodia-chart .apexcharts-ycrosshairs {
    stroke: var(--apex-border-accent);
    opacity: var(--apex-crosshair-opacity);
  }
  .enodia-chart .apexcharts-legend {
    column-gap: calc(var(--spacing) * 2);
    row-gap: var(--spacing);
  }
  .enodia-chart .apexcharts-legend-text {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    color: var(--apex-legend-text);
  }
  .enodia-chart .apexcharts-legend-marker {
    margin-right: var(--spacing);
    height: calc(var(--spacing) * 1.5) !important;
    width: calc(var(--spacing) * 1.5) !important;
    border-radius: var(--radius-full) !important;
    border-radius: 9999px !important;
    border-color: transparent;
  }
  .enodia-chart .apexcharts-datalabel, .enodia-chart .apexcharts-datalabel-label, .enodia-chart .apexcharts-datalabel-value {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    fill: var(--apex-datalabel-text);
  }
  .enodia-chart .apexcharts-marker {
    stroke: var(--apex-bg-surface);
  }
  .enodia-chart .apexcharts-menu {
    border-radius: var(--radius-lg) !important;
    background: var(--apex-bg-popover);
    border: 1px solid var(--apex-border);
    color: var(--apex-text);
  }
  .enodia-chart .apexcharts-zoom-icon, .enodia-chart .apexcharts-reset-zoom-icon, .enodia-chart .apexcharts-pan-icon, .enodia-chart .apexcharts-menu-icon {
    font-size: 0.8125rem !important;
    line-height: var(--tw-leading, 1.25rem) !important;
    color: var(--apex-toolbar-ink);
    fill: var(--apex-toolbar-ink);
  }
  .enodia-chart .apexcharts-selection-rect {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    fill: var(--apex-border-accent);
    fill-opacity: var(--apex-selection-fill-opacity);
    stroke: var(--apex-border-accent);
    stroke-opacity: var(--apex-selection-stroke-opacity);
  }
  .enodia-chart .apexcharts-pie-label, .enodia-chart .apexcharts-datalabels-group text {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    fill: var(--apex-pie-label-text);
  }
  .enodia-chart .apexcharts-radialbar .apexcharts-datalabel-value {
    font-size: 1rem !important;
    line-height: var(--tw-leading, 1.5rem) !important;
    --tw-font-weight: var(--font-weight-semibold) !important;
    font-weight: var(--font-weight-semibold) !important;
    fill: var(--apex-radial-value-text);
  }
  .enodia-chart .apexcharts-radialbar .apexcharts-radialbar-tracks line, .enodia-chart .apexcharts-radialbar .apexcharts-radialbar-track path {
    stroke: var(--apex-radial-track);
  }
  .enodia-chart .apexcharts-heatmap-rect {
    stroke: var(--apex-heatmap-stroke);
  }
  .enodia-chart .apexcharts-annotation-label {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    fill: var(--apex-annotation-text);
  }
  .enodia-chart .apexcharts-annotation-rect, .enodia-chart .apexcharts-annotation-line {
    stroke: var(--apex-annotation-border);
  }
  .enodia-chart .apexcharts-annotation-label-box {
    border-radius: var(--radius-md) !important;
    padding-inline: calc(var(--spacing) * 2) !important;
    padding-block: var(--spacing) !important;
    fill: var(--apex-annotation-bg);
    stroke: var(--apex-annotation-border);
  }
  .enodia-chart .apexcharts-text.apexcharts-no-data {
    font-size: 0.8125rem !important;
    line-height: var(--tw-leading, 1.25rem) !important;
    fill: var(--apex-nodata-text);
  }
  .enodia-chart .apexcharts-loading-text {
    font-size: 0.8125rem !important;
    line-height: var(--tw-leading, 1.25rem) !important;
    color: var(--apex-loading-text);
  }
  .enodia-chart .apexcharts-brush .apexcharts-brush-select {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    fill: var(--apex-border-accent) !important;
    fill-opacity: var(--apex-selection-fill-opacity) !important;
  }
  .enodia-chart:has(.apexcharts-pie) .apexcharts-xcrosshairs, .enodia-chart:has(.apexcharts-pie) .apexcharts-ycrosshairs, .enodia-chart:has(.apexcharts-pie) .apexcharts-grid, .enodia-chart:has(.apexcharts-pie) .apexcharts-gridline, .enodia-chart:has(.apexcharts-pie) .apexcharts-grid-borders, .enodia-chart:has(.apexcharts-pie) .apexcharts-grid-borders line, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-xcrosshairs, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-ycrosshairs, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-grid, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-gridline, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-grid-borders, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-grid-borders line, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-xaxis, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-yaxis, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-xaxis-tick, .enodia-chart:has(.apexcharts-radialbar) .apexcharts-axis-border {
    display: none !important;
  }
  .enodia-chart:has(.apexcharts-area) .apexcharts-ycrosshairs, .enodia-chart:has(.apexcharts-area) .apexcharts-grid-borders, .enodia-chart:has(.apexcharts-area) .apexcharts-grid-borders line {
    stroke: transparent !important;
  }
  .enodia-chart:has(.apexcharts-bar-series) .apexcharts-ycrosshairs, .enodia-chart:has(.apexcharts-bar-series) .apexcharts-grid, .enodia-chart:has(.apexcharts-bar-series) .apexcharts-gridline, .enodia-chart:has(.apexcharts-bar) .apexcharts-grid-borders, .enodia-chart:has(.apexcharts-bar) .apexcharts-grid-borders line {
    stroke: transparent !important;
  }
  .enodia-chart:has(.apexcharts-area) .apexcharts-axis-border, .enodia-chart:has(.apexcharts-bar) .apexcharts-axis-border {
    display: none !important;
    stroke: transparent !important;
  }
  .chart-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--bg-panel, var(--alpha-white-100));
    border-color: var(--border-divider);
    overflow: hidden;
    min-width: 0;
  }
  .chart-card--ghost {
    border-color: transparent;
    background-color: transparent;
  }
  .chart-card__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: var(--spacing);
  }
  .chart-card__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .chart-card__subtitle {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .chart-card__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .chart-card__body {
    min-height: 0;
    min-width: 0;
    flex: 1;
    padding-inline: calc(var(--spacing) * 4);
    padding-top: var(--spacing);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .chart-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-color: var(--border-divider);
    color: var(--text-tertiary);
  }
  .chart-card--compact .chart-card__header {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: 0;
  }
  .chart-card--compact .chart-card__body {
    padding-top: var(--spacing);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .chart-card--compact .chart-card__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .chart-card--compact .chart-card__subtitle {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .chart-card--flush .chart-card__body {
    padding: 0;
  }
  .chart-card.is-loading .chart-card__body {
    position: relative;
    min-height: 160px;
  }
  .chart-card.is-loading .chart-card__body::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-skeleton, var(--utility-neutral-100));
    background-image: linear-gradient( 90deg, var(--bg-skeleton, var(--utility-neutral-100)) 0%, var(--bg-skeleton, var(--utility-neutral-100)) 50%, var(--bg-skeleton, var(--utility-neutral-100)) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 90deg, var(--bg-skeleton, var(--utility-neutral-100)) 0%, color-mix(in oklch, var(--bg-skeleton, var(--utility-neutral-100)) 60%, var(--bg-primary)) 50%, var(--bg-skeleton, var(--utility-neutral-100)) 100% );
    }
    background-size: 200% 100%;
    animation: chart-card-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    margin: 8px;
  }
  @keyframes chart-card-shimmer {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .chart-card.is-loading .chart-card__body::after {
      animation: none;
    }
  }
  .chart-card__empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--text-tertiary);
  }
  .chart-card__empty i {
    font-size: 22px;
    opacity: 0.5;
  }
  .chart-card__empty-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .chart-card__empty-message {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .chart-card.is-empty .chart-card__body > :not(.chart-card__empty) {
    display: none;
  }
  .chart-card.is-empty .chart-card__empty {
    display: flex;
  }
  .stat-chart {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 3);
    background-color: var(--bg-panel, var(--alpha-white-100));
    border-color: var(--border-divider);
    min-height: 120px;
  }
  .stat-chart__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .stat-chart__value {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .stat-chart__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .stat-chart__delta--up {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .stat-chart__delta--down {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .stat-chart__delta--flat {
    background-color: var(--bg-secondary-subtle, var(--utility-neutral-100));
    color: var(--text-tertiary);
  }
  .stat-chart__spark {
    margin-top: auto;
    min-height: 32px;
    margin-left: -8px;
    margin-right: -8px;
    margin-bottom: -8px;
  }
  .enodia-chart--dense .apexcharts-xaxis-label, .enodia-chart--dense .apexcharts-yaxis-label {
    font-size: 9px !important;
  }
  .enodia-chart--dense .apexcharts-gridlines-horizontal line, .enodia-chart--dense .apexcharts-gridlines-vertical line {
    stroke-dasharray: 2 4;
  }
  .chart-card {
    background-color: var(--bg-chart-card, var(--bg-panel, var(--alpha-white-100)));
    border-color: var(--border-chart-card, var(--border-divider));
    box-shadow: var(--shadow-chart-card, none);
    transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
  }
  .chart-card__title {
    color: var(--text-chart-card-title, var(--text-primary));
  }
  .chart-card__subtitle {
    color: var(--text-chart-card-sub, var(--text-tertiary));
  }
  .chart-card__footer {
    color: var(--text-chart-card-meta, var(--text-tertiary));
  }
  .chart-card--hover:hover, .chart-card.is-hover-lift:hover {
    box-shadow: var(--shadow-chart-card-hover, 0 4px 12px rgba(0,0,0,0.08));
    transform: translateY(-1px);
  }
  .chart-card--glass {
    background-color: var(--bg-chart-card-glass, oklch(100% 0 0 / 0.7));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--border-chart-card-glass, oklch(100% 0 0 / 0.3));
  }
  .chart-card--success {
    box-shadow: inset 3px 0 0 var(--utility-green-500), var(--shadow-chart-card, none);
  }
  .chart-card--warning {
    box-shadow: inset 3px 0 0 var(--utility-amber-500), var(--shadow-chart-card, none);
  }
  .chart-card--danger {
    box-shadow: inset 3px 0 0 var(--utility-red-500), var(--shadow-chart-card, none);
  }
  .chart-card--info {
    box-shadow: inset 3px 0 0 var(--utility-blue-500), var(--shadow-chart-card, none);
  }
  @media (prefers-reduced-motion: reduce) {
    .chart-card {
      transition: none;
    }
    .chart-card--hover:hover, .chart-card.is-hover-lift:hover {
      transform: none;
    }
  }
  .chart-card__toolbar {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .chart-card__toolbar .chart-card__chip {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-chart-card-meta, var(--text-tertiary));
    background-color: transparent;
    border: 1px solid transparent;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  }
  .chart-card__toolbar .chart-card__chip:hover {
    color: var(--text-chart-card-title, var(--text-primary));
    background-color: var(--utility-neutral-50);
  }
  .chart-card__toolbar .chart-card__chip.is-active {
    background-color: var(--utility-neutral-100);
    color: var(--text-chart-card-title, var(--text-primary));
    border-color: var(--border-chart-card, var(--border-divider));
  }
  .chart-kpi {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 3);
    background-color: var(--bg-chart-kpi, var(--bg-chart-card));
    border-color: var(--border-chart-kpi, var(--border-chart-card));
    box-shadow: var(--shadow-chart-card, none);
    min-height: 110px;
    overflow: hidden;
  }
  .chart-kpi__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .chart-kpi__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-chart-kpi-label, var(--text-tertiary));
  }
  .chart-kpi__icon {
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--utility-neutral-100);
    color: var(--text-chart-kpi-label, var(--text-tertiary));
  }
  .chart-kpi__value {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-chart-kpi-value, var(--text-primary));
  }
  .chart-kpi__unit {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-chart-kpi-label);
  }
  .chart-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
  }
  .chart-kpi__delta--up {
    background-color: var(--bg-chart-kpi-delta-up);
    color: var(--text-chart-kpi-delta-up);
  }
  .chart-kpi__delta--down {
    background-color: var(--bg-chart-kpi-delta-dn);
    color: var(--text-chart-kpi-delta-dn);
  }
  .chart-kpi__delta--flat {
    background-color: var(--utility-neutral-100);
    color: var(--text-chart-kpi-label);
  }
  .chart-kpi__spark {
    margin-top: auto;
    min-height: 36px;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -12px;
  }
  .chart-kpi-grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .enodia-chart.is-no-data, .chart-card.is-no-data .chart-card__body {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .enodia-chart.is-no-data::before, .chart-card.is-no-data .chart-card__body::before {
    content: attr(data-no-data-text, "No data available");
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-chart-no-data, var(--text-tertiary));
    font-size: 12.5px;
  }
  .enodia-chart .apexcharts-boxPlot-series .apexcharts-box {
    stroke: var(--apex-boxplot-stroke);
    fill: var(--apex-boxplot-fill);
  }
  .enodia-chart .apexcharts-boxPlot-series .apexcharts-box-median {
    stroke: var(--apex-boxplot-median);
  }
  .enodia-chart .apexcharts-boxPlot-series .apexcharts-box-whisker {
    stroke: var(--apex-boxplot-whisker);
  }
  .enodia-chart .apexcharts-brush .apexcharts-selection-rect {
    fill: var(--apex-brush-fill) !important;
    stroke: var(--apex-brush-stroke) !important;
    fill-opacity: 1 !important;
    stroke-opacity: 1 !important;
  }
  .enodia-chart .apexcharts-point-annotation-marker, .enodia-chart .apexcharts-xaxis-annotation-label, .enodia-chart .apexcharts-yaxis-annotation-label {
    fill: var(--apex-annotation-accent) !important;
  }
  .enodia-chart .apexcharts-xaxis-annotation-line, .enodia-chart .apexcharts-yaxis-annotation-line {
    stroke: var(--apex-annotation-accent) !important;
  }
  .chart-grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .chart-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chart-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .chart-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .chart-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .chart-grid > *, .chart-kpi-grid > * {
    min-width: 0;
  }
  @media (max-width: 768px) {
    .chart-grid--2, .chart-grid--3, .chart-grid--4 {
      grid-template-columns: 1fr;
    }
  }
  .chart-grid__col-2 {
    grid-column: span 2;
  }
  .chart-grid__col-3 {
    grid-column: span 3;
  }
  .chart-grid__col-full {
    grid-column: 1 / -1;
  }
}
@layer utilities {
  .chart {
    --chart-series-1: var(--color-brand-600);
    --chart-series-2: var(--apex-series-1);
    --chart-series-3: var(--apex-series-2);
    --chart-series-4: var(--apex-series-6);
    --chart-series-5: var(--apex-series-7);
    --chart-series-6: var(--apex-series-4);
    --chart-series-7: var(--apex-series-8);
    --chart-series-8: var(--apex-series-11);
    --chart-series-9: var(--apex-series-3);
    --chart-series-10: var(--apex-series-9);
    --chart-series-11: var(--apex-series-12);
    --chart-series-12: var(--apex-series-10);
    --chart-grid: var(--apex-border);
    --chart-axis-text: var(--text-tertiary);
    --chart-axis-line: var(--apex-border-accent);
    --chart-surface: var(--bg-panel);
    --chart-tooltip-bg: var(--utility-neutral-900);
    --chart-tooltip-fg: var(--utility-neutral-50);
    --chart-tooltip-muted: var(--utility-neutral-300);
    --chart-active-ring: var(--color-brand-600);
    --chart-height: 18rem;
    --chart-line-width: 2px;
    --chart-area-opacity: 0.12;
    --chart-radar-fill-opacity: 0.12;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
    color: var(--text-primary);
    font-family: inherit;
  }
  .chart--xs {
    --chart-height: 8rem;
  }
  .chart--sm {
    --chart-height: 12rem;
  }
  .chart--md {
    --chart-height: 18rem;
  }
  .chart--lg {
    --chart-height: 24rem;
  }
  .chart--xl {
    --chart-height: 30rem;
  }
  .chart--pie, .chart--donut, .chart--radar {
    --chart-height: 20rem;
  }
  .chart__canvas {
    position: relative;
    width: 100%;
    height: var(--chart-height);
    min-height: 0;
  }
  .chart__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .chart__grid-line {
    stroke: var(--chart-grid);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    shape-rendering: crispEdges;
  }
  .chart__grid-line--zero {
    stroke-dasharray: none;
  }
  .chart__axis-line {
    stroke: var(--chart-axis-line);
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  .chart__axis-label {
    fill: var(--chart-axis-text);
    font-size: 0.75rem;
    font-family: inherit;
  }
  .chart__axis-label--x {
    text-anchor: middle;
  }
  .chart__axis-label--y {
    text-anchor: end;
    dominant-baseline: middle;
  }
  .chart__series {
    color: var(--chart-series-1);
  }
  .chart__line {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--chart-line-width);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .chart__area {
    fill: currentColor;
    opacity: var(--chart-area-opacity);
    stroke: none;
  }
  .chart__bar {
    fill: currentColor;
    rx: 4px;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .chart__bar--flat {
    rx: 0;
  }
  .chart__slice {
    fill: currentColor;
    stroke: var(--chart-surface);
    stroke-width: 2;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    transform-origin: center;
  }
  .chart__radar-shape {
    fill: currentColor;
    fill-opacity: var(--chart-radar-fill-opacity);
    stroke: currentColor;
    stroke-width: var(--chart-line-width);
    stroke-linejoin: round;
  }
  .chart__radar-grid {
    stroke: var(--chart-grid);
    fill: none;
    stroke-width: 1;
  }
  .chart__radar-spoke {
    stroke: var(--chart-grid);
    stroke-width: 1;
  }
  .chart__dot {
    fill: var(--chart-surface);
    stroke: currentColor;
    stroke-width: 2;
  }
  .chart__dot--rest {
    fill: currentColor;
    stroke: none;
  }
  .chart__plot[data-chart-active] .chart__bar:not([data-active]), .chart__plot[data-chart-active] .chart__slice:not([data-active]) {
    opacity: 0.45;
  }
  .chart__slice[data-active] {
    transform: scale(1.02);
  }
  .chart__hit:focus-visible, .chart__slice:focus-visible, .chart__bar:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .chart__hit {
    fill: transparent;
    cursor: default;
    outline: none;
  }
  .chart__crosshair {
    stroke: var(--chart-axis-line);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
  }
  .chart__center-value {
    fill: var(--text-primary);
    font-weight: 600;
    text-anchor: middle;
  }
  .chart__center-label {
    fill: var(--text-tertiary);
    text-anchor: middle;
    font-size: 0.75rem;
  }
  .chart-legend {
    display: flex;
    flex-flow: row wrap;
    gap: 0.375rem 0.75rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .chart-legend--vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .chart-legend--center {
    justify-content: center;
  }
  .chart-legend--end {
    justify-content: flex-end;
  }
  .chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0.25rem;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
  }
  .chart-legend__item:hover {
    color: var(--text-secondary);
  }
  .chart-legend__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .chart-legend__marker {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: currentColor;
  }
  .chart-legend__item[aria-pressed="false"] {
    opacity: 0.4;
  }
  .chart-legend__item[aria-pressed="false"] .chart-legend__label {
    text-decoration: line-through;
  }
  .chart-legend--static .chart-legend__item {
    cursor: default;
  }
  .chart-legend--static .chart-legend__item:hover {
    color: var(--text-tertiary);
  }
  .chart-tooltip {
    position: absolute;
    z-index: var(--z-tooltip, 80);
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 7rem;
    max-width: 16rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    background: var(--chart-tooltip-bg);
    color: var(--chart-tooltip-fg);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .chart-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .chart-tooltip__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--chart-tooltip-fg);
  }
  .chart-tooltip__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--chart-tooltip-muted);
  }
  .chart-tooltip__marker {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: currentColor;
  }
  .chart-tooltip__name {
    margin-right: auto;
  }
  .chart-tooltip__value {
    font-weight: 600;
    color: var(--chart-tooltip-fg);
    font-variant-numeric: tabular-nums;
  }
  .chart__status {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--chart-height);
    padding: 1rem;
    text-align: center;
    color: var(--text-tertiary);
  }
  .chart__status-icon {
    font-size: 1.5rem;
    opacity: 0.55;
  }
  .chart__status-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .chart__status-msg {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .chart.is-loading .chart__canvas, .chart.is-empty .chart__canvas, .chart.is-error .chart__canvas {
    display: none;
  }
  .chart.is-loading .chart-legend, .chart.is-empty .chart-legend, .chart.is-error .chart-legend {
    display: none;
  }
  .chart.is-empty .chart__status--empty, .chart.is-error .chart__status--error {
    display: flex;
  }
  .chart.is-loading .chart__status--loading {
    display: flex;
  }
  .chart__skeleton {
    position: relative;
    width: 100%;
    height: var(--chart-height);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-secondary);
  }
  .chart__skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, transparent 0%, var(--bg-primary) 50%, transparent 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 90deg, transparent 0%, color-mix(in oklch, var(--bg-primary) 55%, transparent) 50%, transparent 100% );
    }
    background-size: 200% 100%;
    animation: chart-shimmer 1.4s var(--ease-in-out) infinite;
  }
  @keyframes chart-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .chart__a11y {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .chart[data-animate] .chart__line, .chart[data-animate] .chart__radar-shape {
      stroke-dasharray: var(--chart-path-len, 1);
      stroke-dashoffset: var(--chart-path-len, 1);
      animation: chart-draw var(--duration-slower) var(--ease-out) forwards;
    }
    .chart[data-animate] .chart__area, .chart[data-animate] .chart__radar-shape {
      animation: chart-fade var(--duration-slower) var(--ease-out) forwards;
    }
    .chart[data-animate] .chart__bar {
      transform: scaleY(0);
      transform-origin: bottom;
      transform-box: fill-box;
      animation: chart-grow var(--duration-slow) var(--ease-out) forwards;
    }
    .chart[data-animate] .chart__slice {
      animation: chart-fade var(--duration-slow) var(--ease-out) forwards;
    }
  }
  @keyframes chart-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes chart-grow {
    to {
      transform: scaleY(1);
    }
  }
  @keyframes chart-fade {
    from {
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .chart *, .chart *::after {
      animation: none !important;
      transition: none !important;
    }
    .chart__line, .chart__radar-shape {
      stroke-dashoffset: 0 !important;
    }
    .chart__bar {
      transform: none !important;
    }
  }
}
@layer utilities {
  .avatar {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-avatar, var(--text-primary));
    background-color: var(--bg-avatar, var(--bg-secondary-subtle));
  }
  .avatar::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--border-avatar-contrast, var(--alpha-neutral-950-16));
  }
  .avatar > img, .avatar-img {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    object-fit: cover;
  }
  .avatar-initials {
    display: inline-flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .avatar-icon {
    color: var(--text-avatar-icon, var(--text-quaternary));
    line-height: 1;
  }
  .avatar-image {
    background-color: transparent;
  }
  .avatar.avatar-xs {
    height: 24px;
    width: 24px;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .avatar.avatar-sm {
    height: 32px;
    width: 32px;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .avatar.avatar-md {
    height: 40px;
    width: 40px;
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
  }
  .avatar.avatar-lg {
    height: 48px;
    width: 48px;
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .avatar.avatar-xl {
    height: 56px;
    width: 56px;
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .avatar.avatar-2xl {
    height: 64px;
    width: 64px;
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  .avatar.avatar-xs .avatar-icon {
    font-size: 16px;
  }
  .avatar.avatar-sm .avatar-icon {
    font-size: 20px;
  }
  .avatar.avatar-md .avatar-icon {
    font-size: 24px;
  }
  .avatar.avatar-lg .avatar-icon {
    font-size: 28px;
  }
  .avatar.avatar-xl .avatar-icon {
    font-size: 32px;
  }
  .avatar.avatar-2xl .avatar-icon {
    font-size: 32px;
  }
  .avatar-rounded {
    border-radius: var(--radius-xl);
  }
  .avatar-square {
    border-radius: var(--radius-md);
  }
  .avatar-border {
    padding: 2px;
    background-color: var(--bg-avatar-frame, var(--bg-panel));
    box-shadow: 0 0 0 1px var(--border-avatar-frame, var(--border-secondary));
  }
  .avatar-border::after {
    inset: 2px;
  }
  .avatar-soft {
    background-color: var(--bg-avatar-soft, var(--bg-secondary-subtle));
    color: var(--text-avatar-soft, var(--text-primary));
  }
  .avatar-solid {
    background-color: var(--bg-avatar-solid, var(--bg-primary-solid));
    color: var(--text-avatar-solid, var(--alpha-white-100));
  }
  .avatar-outline {
    background-color: transparent;
    color: var(--text-avatar-outline, var(--text-primary));
  }
  .avatar-outline::after {
    box-shadow: inset 0 0 0 2px var(--border-avatar-outline, var(--border-primary));
  }
  .avatar-ghost {
    background-color: transparent;
    color: var(--text-avatar-ghost, var(--text-primary));
  }
  .avatar-ghost::after {
    box-shadow: none;
  }
  .avatar-info {
    background-color: var(--bg-avatar-info, var(--bg-info-subtle));
    color: var(--text-avatar-info, var(--text-info-solid));
  }
  .avatar-success {
    background-color: var(--bg-avatar-success, var(--bg-success-subtle));
    color: var(--text-avatar-success, var(--text-success-solid));
  }
  .avatar-warning {
    background-color: var(--bg-avatar-warning, var(--bg-warning-subtle));
    color: var(--text-avatar-warning, var(--text-warning-solid));
  }
  .avatar-danger {
    background-color: var(--bg-avatar-danger, var(--bg-danger-subtle));
    color: var(--text-avatar-danger, var(--text-danger-solid));
  }
  .avatar-indigo {
    background-color: var(--bg-avatar-indigo, var(--bg-indigo-subtle));
    color: var(--text-avatar-indigo, var(--text-indigo-solid));
  }
  .avatar-purple {
    background-color: var(--bg-avatar-purple, var(--bg-purple-subtle));
    color: var(--text-avatar-purple, var(--text-purple-solid));
  }
  .avatar-pink {
    background-color: var(--bg-avatar-pink, var(--bg-pink-subtle));
    color: var(--text-avatar-pink, var(--text-pink-solid));
  }
  .avatar-teal {
    background-color: var(--bg-avatar-teal, var(--bg-teal-subtle));
    color: var(--text-avatar-teal, var(--text-teal-solid));
  }
  .avatar-mint {
    background-color: var(--bg-avatar-mint, var(--bg-mint-subtle));
    color: var(--text-avatar-mint, var(--text-mint-solid));
  }
  .avatar.ring-info::after {
    box-shadow: inset 0 0 0 2px var(--ring-avatar-info, var(--border-info-subtle));
  }
  .avatar.ring-success::after {
    box-shadow: inset 0 0 0 2px var(--ring-avatar-success, var(--border-success-subtle));
  }
  .avatar.ring-warning::after {
    box-shadow: inset 0 0 0 2px var(--ring-avatar-warning, var(--border-warning-subtle));
  }
  .avatar.ring-danger::after {
    box-shadow: inset 0 0 0 2px var(--ring-avatar-danger, var(--border-danger-subtle));
  }
  .avatar-badge {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    border-radius: var(--radius-full);
    background-color: var(--bg-avatar-offline, var(--utility-neutral-400));
    box-shadow: 0 0 0 1.5px var(--ring-avatar-presence, var(--bg-panel));
  }
  .avatar-badge::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background-image: linear-gradient(to bottom, var(--sheen-avatar-badge, var(--alpha-white-30)) 0%, transparent 60%);
  }
  .avatar-badge.avatar-badge-outline {
    box-shadow: 0 0 0 1.5px var(--border-avatar-badge, var(--border-primary));
  }
  .avatar.avatar-xs .avatar-badge {
    right: 0;
    bottom: 0;
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
  }
  .avatar.avatar-sm .avatar-badge {
    right: 0;
    bottom: 0;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
  }
  .avatar.avatar-md .avatar-badge {
    right: 0;
    bottom: 0;
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
  }
  .avatar.avatar-lg .avatar-badge {
    right: 0;
    bottom: 0;
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
  }
  .avatar.avatar-xl .avatar-badge {
    right: calc(var(--spacing) * 0.5);
    bottom: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .avatar.avatar-2xl .avatar-badge {
    right: var(--spacing);
    bottom: var(--spacing);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .avatar-badge.badge-online {
    background-color: var(--bg-avatar-online);
  }
  .avatar-badge.badge-away {
    background-color: var(--bg-avatar-away);
  }
  .avatar-badge.badge-busy {
    background-color: var(--bg-avatar-busy);
  }
  .avatar-badge.badge-ooo {
    background-color: var(--bg-avatar-ooo);
  }
  .avatar-badge.badge-offline {
    background-color: var(--bg-avatar-offline);
  }
  .avatar-verified {
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    color: var(--fg-avatar-verified, var(--utility-blue-500));
    line-height: 1;
  }
  .avatar.avatar-xs .avatar-verified {
    font-size: 10px;
    right: -1px;
    bottom: -1px;
  }
  .avatar.avatar-sm .avatar-verified {
    font-size: 12px;
  }
  .avatar.avatar-md .avatar-verified {
    font-size: 14px;
  }
  .avatar.avatar-lg .avatar-verified {
    font-size: 16px;
  }
  .avatar.avatar-xl .avatar-verified {
    font-size: 18px;
  }
  .avatar.avatar-2xl .avatar-verified {
    font-size: 20px;
  }
  .avatar-count {
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    letter-spacing: var(--tw-tracking, 0.02em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    color: var(--text-avatar-count, var(--alpha-white-100));
    background-color: var(--bg-avatar-count, var(--bg-danger-solid));
    box-shadow: 0 0 0 1.5px var(--ring-avatar-presence, var(--bg-panel));
  }
  .avatar-company {
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * -0.5);
    bottom: calc(var(--spacing) * -0.5);
    z-index: 10;
    border-radius: var(--radius-full);
    object-fit: cover;
    background-color: var(--bg-avatar-company, var(--bg-panel));
    box-shadow: 0 0 0 1.5px var(--ring-avatar-presence, var(--bg-panel));
  }
  .avatar.avatar-xs .avatar-company {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
  }
  .avatar.avatar-sm .avatar-company {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
  }
  .avatar.avatar-md .avatar-company {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .avatar.avatar-lg .avatar-company {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .avatar.avatar-xl .avatar-company {
    height: 18px;
    width: 18px;
  }
  .avatar.avatar-2xl .avatar-company {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .avatar-add {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-avatar-add, var(--text-quaternary));
    background-color: var(--bg-avatar-add, var(--bg-panel));
    border: 1px dashed var(--border-avatar-add, var(--border-primary));
    transition: background-color 0.1s linear, color 0.1s linear;
  }
  .avatar-add:hover {
    background-color: var(--bg-avatar-add-hover, var(--bg-primary-hover));
    color: var(--text-avatar-add-hover, var(--text-quaternary-hover));
  }
  .avatar-add:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .avatar-add:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .avatar-add.avatar-xs {
    height: 24px;
    width: 24px;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .avatar-add.avatar-sm {
    height: 32px;
    width: 32px;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .avatar-add.avatar-md {
    height: 40px;
    width: 40px;
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .avatar-profile {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--bg-avatar-frame, var(--bg-panel));
    box-shadow: 0 0 0 1px var(--border-avatar-frame, var(--border-secondary));
  }
  .avatar-profile > img, .avatar-profile .avatar-img {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
  }
  .avatar-profile::after {
    content: "";
    pointer-events: none;
    position: absolute;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border-avatar-contrast, var(--alpha-neutral-950-16));
  }
  .avatar-profile-sm {
    height: 72px;
    width: 72px;
    padding: 3px;
  }
  .avatar-profile-sm::after {
    inset: 3px;
  }
  .avatar-profile-md {
    height: 96px;
    width: 96px;
    padding: 4px;
    box-shadow: 0 0 0 1px var(--border-avatar-frame, var(--border-secondary)), var(--shadow-avatar-profile, var(--shadow-xl));
  }
  .avatar-profile-md::after {
    inset: 4px;
  }
  .avatar-profile-lg {
    height: 160px;
    width: 160px;
    padding: 6px;
    box-shadow: 0 0 0 1px var(--border-avatar-frame, var(--border-secondary)), var(--shadow-avatar-profile, var(--shadow-xl));
  }
  .avatar-profile-lg::after {
    inset: 6px;
  }
  .avatar-action {
    display: inline-flex;
    cursor: pointer;
    border-radius: var(--radius-full);
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .avatar-action:focus-visible {
    outline-color: var(--border-focus);
  }
  .avatar-group {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .avatar-group-stack {
    display: inline-flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .avatar-group-stack .avatar, .avatar-group-stack .avatar-more {
    box-shadow: 0 0 0 2px var(--ring-avatar-stack, var(--bg-panel));
  }
  .avatar-group-stack .avatar::after {
    box-shadow: none;
  }
  .avatar-group-stack-tight {
    display: inline-flex;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .avatar-group-stack-tight .avatar, .avatar-group-stack-tight .avatar-more {
    box-shadow: 0 0 0 2px var(--ring-avatar-stack, var(--bg-panel));
  }
  .avatar-group-stack-tight .avatar::after {
    box-shadow: none;
  }
  .avatar-group-grid {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .avatar-more {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-avatar-more, var(--text-secondary));
    background-color: var(--bg-avatar-more, var(--bg-primary-subtle));
    box-shadow: 0 0 0 1px var(--ring-avatar-more, var(--border-primary));
  }
  .avatar-more.avatar-xs {
    height: 24px;
    width: 24px;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .avatar-more.avatar-sm {
    height: 32px;
    width: 32px;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .avatar-more.avatar-md {
    height: 40px;
    width: 40px;
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
  }
  .avatar-more.avatar-lg {
    height: 48px;
    width: 48px;
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .avatar-more.avatar-xl {
    height: 56px;
    width: 56px;
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .avatar-more.avatar-2xl {
    height: 64px;
    width: 64px;
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  @media (prefers-reduced-motion: reduce) {
    .avatar-add {
      transition: none;
    }
  }
}
@layer utilities {
  .badge {
    --badge-fill: var(--bg-badge);
    --badge-fg: var(--text-badge);
    --badge-ring: var(--border-primary-subtle);
    display: inline-flex;
    width: max-content;
    align-items: center;
    column-gap: calc(var(--spacing) * 1.5);
    white-space: nowrap;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--badge-fg);
    background-color: var(--badge-fill);
    box-shadow: inset 0 0 0 1px var(--badge-ring);
  }
  .badge > i, .badge > [class*="fa-"] {
    color: var(--text-badge-icon, currentColor);
    font-size: 0.9em;
  }
  .badge-xs {
    column-gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .badge-sm {
    column-gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .badge-lg {
    column-gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .badge-pill {
    border-radius: var(--radius-full);
  }
  .badge-square {
    border-radius: var(--radius-md);
  }
  .badge-square.badge-lg {
    border-radius: var(--radius-lg);
  }
  .badge-modern {
    --badge-fill: var(--bg-badge-alt);
    --badge-fg: var(--text-secondary);
    --badge-ring: var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--badge-ring), var(--shadow-xs);
  }
  .badge-modern.badge-lg {
    border-radius: var(--radius-lg);
  }
  .badge-white {
    --badge-fill: var(--bg-badge-alt);
  }
  .badge-danger {
    --badge-fill: var(--bg-badge-danger);
    --badge-fg: var(--text-badge-danger);
    --badge-ring: var(--border-danger-subtle);
  }
  .badge-warning {
    --badge-fill: var(--bg-badge-warning);
    --badge-fg: var(--text-badge-warning);
    --badge-ring: var(--border-warning-subtle);
  }
  .badge-success {
    --badge-fill: var(--bg-badge-success);
    --badge-fg: var(--text-badge-success);
    --badge-ring: var(--border-success-subtle);
  }
  .badge-info {
    --badge-fill: var(--bg-badge-info);
    --badge-fg: var(--text-badge-info);
    --badge-ring: var(--border-info-subtle);
  }
  .badge-indigo {
    --badge-fill: var(--bg-badge-indigo);
    --badge-fg: var(--text-badge-indigo);
    --badge-ring: var(--border-indigo-subtle);
  }
  .badge-purple {
    --badge-fill: var(--bg-badge-purple);
    --badge-fg: var(--text-badge-purple);
    --badge-ring: var(--border-purple-subtle);
  }
  .badge-pink {
    --badge-fill: var(--bg-badge-pink);
    --badge-fg: var(--text-badge-pink);
    --badge-ring: var(--border-pink-subtle);
  }
  .badge-teal {
    --badge-fill: var(--bg-badge-teal);
    --badge-fg: var(--text-badge-teal);
    --badge-ring: var(--border-teal-subtle);
  }
  .badge-soft {
    --badge-fill: var(--badge-fg);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-fill: color-mix(in oklch, var(--badge-fg) 12%, transparent);
    }
    --badge-ring: transparent;
  }
  .badge-mint {
    --badge-fill: var(--bg-badge-mint);
    --badge-fg: var(--text-badge-mint);
    --badge-ring: var(--border-teal-subtle);
  }
  .badge-outline {
    --badge-fill: transparent;
    --badge-ring: var(--badge-fg);
  }
  .badge-ghost {
    --badge-fill: transparent;
    box-shadow: none;
  }
  .badge-glass {
    --badge-fill: var(--bg-surface);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-fill: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    }
    border: 1px solid currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    }
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .badge-glass {
    border-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, currentColor 42%, transparent);
    }
  }
  .badge.btn-badge {
    cursor: pointer;
    appearance: none;
    border: 0;
    font: inherit;
    transition: background-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
  }
  .badge.btn-badge:hover {
    background-color: var(--badge-fill);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--badge-fill), var(--badge-fg) 8%);
    }
  }
  .badge.btn-badge:active {
    background-color: var(--badge-fill);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--badge-fill), var(--badge-fg) 14%);
    }
  }
  .badge.btn-badge:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .badge.btn-badge:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .badge > .badge-close, .badge > [data-badge-dismiss] {
    margin-right: calc(var(--spacing) * -1);
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    padding: calc(var(--spacing) * 0.5);
    color: currentColor;
    opacity: 0.85;
    transition: background-color var(--duration-fast) var(--ease-in-out), opacity var(--duration-fast) var(--ease-in-out);
  }
  .badge > .badge-close > i, .badge > .badge-close > [class*="fa-"], .badge > [data-badge-dismiss] > i {
    color: currentColor;
    font-size: 0.75em;
  }
  .badge > .badge-close:hover, .badge > [data-badge-dismiss]:hover {
    opacity: 1;
    background-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--badge-fg) 14%);
    }
  }
  .badge > .badge-close:active, .badge > [data-badge-dismiss]:active {
    background-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--badge-fg) 22%);
    }
  }
  .badge > .badge-close:focus-visible, .badge > [data-badge-dismiss]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .badge-square > .badge-close, .badge-modern > .badge-close, .badge-square > [data-badge-dismiss], .badge-modern > [data-badge-dismiss] {
    border-radius: var(--radius-xs);
  }
  .badge.is-dismissing {
    transition: opacity var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out);
    opacity: 0;
    transform: scale(0.92);
  }
  .badge-icon-only {
    gap: 0;
    padding: calc(var(--spacing) * 1.5);
  }
  .badge-icon-only.badge-sm, .badge-icon-only.badge-xs {
    padding: var(--spacing);
  }
  .badge-icon-only.badge-lg {
    padding: calc(var(--spacing) * 2);
  }
  .badge-notification, .badge-notification-inline {
    display: inline-flex;
    min-width: 20px;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-badge-notification);
    background-color: var(--bg-badge-notification);
    box-shadow: var(--shadow-xs);
  }
  .badge-notification .count, .badge-notification-inline .count {
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-badge-notification);
  }
  .badge-notification-dot {
    display: inline-block;
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    background-color: var(--bg-badge-notification);
  }
  .badge-status {
    display: inline-flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-badge-status, var(--text-primary));
  }
  .status-dot, .status-dot-sm {
    display: inline-block;
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    flex-shrink: 0;
    align-self: center;
    border-radius: var(--radius-full);
    background-color: var(--dot-light);
  }
  .status-dot-sm {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }
  .badge-dot {
    display: inline-flex;
    width: max-content;
    align-items: center;
    column-gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--text-badge-dot, var(--text-primary));
    background-color: var(--bg-badge-dot, var(--bg-badge-alt));
    box-shadow: inset 0 0 0 1px var(--border-primary-subtle);
  }
  .badge-dot > span {
    display: inline-block;
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    flex-shrink: 0;
    align-self: center;
    border-radius: var(--radius-full);
    background-color: var(--dot-light);
  }
  .badge-dot > .light, .status-dot.light {
    background-color: var(--dot-light);
  }
  .badge-dot > .danger, .status-dot.danger {
    background-color: var(--dot-danger);
  }
  .badge-dot > .warning, .status-dot.warning {
    background-color: var(--dot-warning);
  }
  .badge-dot > .success, .status-dot.success {
    background-color: var(--dot-success);
  }
  .badge-dot > .info, .status-dot.info {
    background-color: var(--dot-info);
  }
  .badge-dot > .indigo, .status-dot.indigo {
    background-color: var(--dot-indigo);
  }
  .badge-dot > .purple, .status-dot.purple {
    background-color: var(--dot-purple);
  }
  .badge-dot > .pink, .status-dot.pink {
    background-color: var(--dot-pink);
  }
  .badge-dot > .teal, .status-dot.teal {
    background-color: var(--dot-teal);
  }
  .badge-dot > .mint, .status-dot.mint {
    background-color: var(--dot-mint);
  }
  @keyframes badge-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.2);
    }
  }
  .badge-notification.is-pulsing, .badge-notification-dot.is-pulsing, .badge-notification-inline.is-pulsing {
    animation: badge-pulse 1.5s var(--ease-in-out) infinite;
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) {
    .badge-danger:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-danger);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-danger) 78%, var(--border-danger-subtle));
      }
      --badge-ring: var(--text-badge-danger);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-danger) 45%, transparent);
      }
    }
    .badge-warning:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-warning);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-warning) 78%, var(--border-warning-subtle));
      }
      --badge-ring: var(--text-badge-warning);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-warning) 45%, transparent);
      }
    }
    .badge-success:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-success);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-success) 78%, var(--border-success-subtle));
      }
      --badge-ring: var(--text-badge-success);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-success) 45%, transparent);
      }
    }
    .badge-info:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-info);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-info) 78%, var(--border-info-subtle));
      }
      --badge-ring: var(--text-badge-info);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-info) 45%, transparent);
      }
    }
    .badge-indigo:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-indigo);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-indigo) 78%, var(--border-indigo-subtle));
      }
      --badge-ring: var(--text-badge-indigo);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-indigo) 45%, transparent);
      }
    }
    .badge-purple:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-purple);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-purple) 78%, var(--border-purple-subtle));
      }
      --badge-ring: var(--text-badge-purple);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-purple) 45%, transparent);
      }
    }
    .badge-pink:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-pink);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-pink) 78%, var(--border-pink-subtle));
      }
      --badge-ring: var(--text-badge-pink);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-pink) 45%, transparent);
      }
    }
    .badge-teal:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-teal);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-teal) 78%, var(--border-teal-subtle));
      }
      --badge-ring: var(--text-badge-teal);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-teal) 45%, transparent);
      }
    }
    .badge-mint:not(.badge-outline, .badge-ghost, .badge-glass, .badge-modern) {
      --badge-fg: var(--text-badge-mint);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-fg: color-mix(in oklch, var(--text-badge-mint) 78%, var(--border-teal-subtle));
      }
      --badge-ring: var(--text-badge-mint);
      @supports (color: color-mix(in lab, red, red)) {
        --badge-ring: color-mix(in oklch, var(--text-badge-mint) 45%, transparent);
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .badge, .badge.btn-badge, .badge > .badge-close, .badge > [data-badge-dismiss], .badge.is-dismissing {
      transition: none;
    }
    .badge.is-dismissing {
      opacity: 0;
      transform: none;
    }
    .badge-notification.is-pulsing, .badge-notification-dot.is-pulsing, .badge-notification-inline.is-pulsing {
      animation: none;
    }
  }
  @media (pointer: coarse) {
    .badge > .badge-close, .badge > [data-badge-dismiss] {
      position: relative;
    }
    .badge > .badge-close::before, .badge > [data-badge-dismiss]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
  }
  @media (pointer: coarse) {
    .badge:has(> .badge-close), .badge:has(> [data-badge-dismiss]) {
      margin-block: 10px;
    }
  }
}
@layer utilities {
  .icon-badge {
    --_ib-fg: var(--text-secondary);
    --_ib-bg: var(--bg-primary-subtle);
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--_ib-bg);
    color: var(--_ib-fg);
  }
  .icon-badge > i, .icon-badge > [class*="fa-"], .icon-badge > svg {
    color: inherit;
    fill: currentColor;
  }
  .icon-badge-xs {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    border-radius: var(--radius-sm);
  }
  .icon-badge-sm {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .icon-badge-md {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .icon-badge-lg {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .icon-badge-xl {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  .icon-badge-info {
    --_ib-fg: var(--text-info);
    --_ib-bg: var(--bg-info-subtle);
  }
  .icon-badge-success {
    --_ib-fg: var(--text-success);
    --_ib-bg: var(--bg-success-subtle);
  }
  .icon-badge-warning {
    --_ib-fg: var(--text-warning);
    --_ib-bg: var(--bg-warning-subtle);
  }
  .icon-badge-danger {
    --_ib-fg: var(--text-danger);
    --_ib-bg: var(--bg-danger-subtle);
  }
  .icon-badge-purple {
    --_ib-fg: var(--text-purple);
    --_ib-bg: var(--bg-purple-subtle);
  }
  .icon-badge-indigo {
    --_ib-fg: var(--text-indigo);
    --_ib-bg: var(--bg-indigo-subtle);
  }
  .icon-badge-pink {
    --_ib-fg: var(--text-pink);
    --_ib-bg: var(--bg-pink-subtle);
  }
  .icon-badge-neutral {
    --_ib-fg: var(--text-secondary);
    --_ib-bg: var(--bg-primary-subtle);
  }
  .icon-badge-modern {
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
  }
  .icon-badge-outline {
    background-color: var(--_ib-fg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--_ib-fg) 8%, transparent);
    }
    box-shadow: inset 0 0 0 1.5px var(--_ib-fg);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--_ib-fg) 40%, transparent);
    }
  }
  .icon-badge-circle {
    border-radius: var(--radius-full);
  }
}
@layer utilities {
  :root {
    --bg-qr-paper: var(--color-white);
    --fg-qr-module: var(--color-neutral-900);
    --bg-qr-surface: var(--bg-card);
    --border-qr-surface: var(--border-secondary);
    --text-qr-label: var(--text-secondary);
    --text-qr-caption: var(--text-tertiary);
    --accent-qr-frame: var(--color-brand-400);
    --accent-qr-scan: var(--color-brand-600);
  }
  .qr-code {
    --qr-size: 96px;
    --qr-pad: 8px;
    --qr-frame: 12px;
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: var(--qr-pad);
    color: var(--fg-qr-module);
    -webkit-tap-highlight-color: transparent;
  }
  .qr-code__canvas {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: var(--qr-size);
    height: var(--qr-size);
    padding: calc(var(--qr-size) * 0.06);
    border-radius: var(--radius-md);
    background-color: var(--bg-qr-paper);
  }
  .qr-code__canvas > svg {
    display: block;
    height: 100%;
    width: 100%;
    color: var(--fg-qr-module);
  }
  .qr-code__logo {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--qr-size) * 0.26);
    height: calc(var(--qr-size) * 0.26);
    padding: 3px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-qr-paper);
  }
  .qr-code__logo > img, .qr-code__logo > svg, .qr-code__logo > i {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
    font-size: calc(var(--qr-size) * 0.14);
    line-height: 1;
    color: var(--fg-qr-module);
  }
  .qr-code__frame {
    pointer-events: none;
    position: absolute;
    width: var(--qr-frame);
    height: var(--qr-frame);
  }
  .qr-code__frame--tl {
    top: 0;
    left: 0;
    border-top: 2px solid var(--accent-qr-frame);
    border-left: 2px solid var(--accent-qr-frame);
    border-top-left-radius: var(--radius-sm);
  }
  .qr-code__frame--tr {
    top: 0;
    right: 0;
    border-top: 2px solid var(--accent-qr-frame);
    border-right: 2px solid var(--accent-qr-frame);
    border-top-right-radius: var(--radius-sm);
  }
  .qr-code__frame--br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--accent-qr-frame);
    border-right: 2px solid var(--accent-qr-frame);
    border-bottom-right-radius: var(--radius-sm);
  }
  .qr-code__frame--bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid var(--accent-qr-frame);
    border-left: 2px solid var(--accent-qr-frame);
    border-bottom-left-radius: var(--radius-sm);
  }
  .qr-code__scan {
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    border-top: 1px solid var(--accent-qr-scan);
    background-color: var(--accent-qr-scan);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--accent-qr-scan) 10%, transparent);
    }
    -webkit-mask-image: radial-gradient(52.19% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0) 95.31%);
    mask-image: radial-gradient(52.19% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0) 95.31%);
  }
  .qr-code--scan .qr-code__scan {
    animation: qr-scan 2.4s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) infinite;
  }
  @keyframes qr-scan {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    88% {
      opacity: 1;
    }
    100% {
      transform: translateY(0%);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .qr-code--scan .qr-code__scan {
      animation: none;
      transform: none;
      opacity: 1;
    }
  }
  .qr-code--xs {
    --qr-size: 64px;
    --qr-pad: 6px;
    --qr-frame: 10px;
  }
  .qr-code--sm {
    --qr-size: 80px;
    --qr-pad: 6px;
    --qr-frame: 10px;
  }
  .qr-code--md {
    --qr-size: 96px;
    --qr-pad: 8px;
    --qr-frame: 12px;
  }
  .qr-code--lg {
    --qr-size: 128px;
    --qr-pad: 12px;
    --qr-frame: 14px;
  }
  .qr-code--xl {
    --qr-size: 160px;
    --qr-pad: 16px;
    --qr-frame: 18px;
  }
  .qr-code--card {
    --qr-pad: 16px;
    border-radius: var(--radius-xl);
    background-color: var(--bg-qr-surface);
    box-shadow: inset 0 0 0 1px var(--border-qr-surface), var(--shadow-sm);
  }
  .qr-code--plain .qr-code__frame {
    display: none;
  }
  .qr-code--neutral {
    --accent-qr-frame: var(--border-secondary);
    --accent-qr-scan: var(--text-tertiary);
  }
  .qr-code--info {
    --accent-qr-frame: var(--border-info);
    --accent-qr-scan: var(--text-info);
  }
  .qr-code--success {
    --accent-qr-frame: var(--border-success);
    --accent-qr-scan: var(--text-success);
  }
  .qr-code--warning {
    --accent-qr-frame: var(--border-warning);
    --accent-qr-scan: var(--text-warning);
  }
  .qr-code--danger {
    --accent-qr-frame: var(--border-danger);
    --accent-qr-scan: var(--text-danger);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .qr-code--adaptive {
    --bg-qr-paper: var(--color-neutral-900);
    --fg-qr-module: var(--color-neutral-50);
  }
  .qr-code-figure {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .qr-code-figure__label {
    text-align: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-qr-label);
  }
  .qr-code-figure__caption {
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-qr-caption);
    max-width: 22ch;
  }
  .qr-code-figure__actions {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .qr-code.is-loading .qr-code__canvas > svg, .qr-code.is-empty .qr-code__canvas > svg, .qr-code.is-error .qr-code__canvas > svg {
    display: none;
  }
  .qr-code.is-loading .qr-code__canvas {
    background-image: linear-gradient( 100deg, var(--bg-skeleton, var(--utility-neutral-200)) 30%, var(--bg-skeleton-highlight, var(--utility-neutral-100)) 50%, var(--bg-skeleton, var(--utility-neutral-200)) 70% );
    background-size: 200% 100%;
    animation: qr-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes qr-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .qr-code.is-loading .qr-code__canvas {
      animation: none;
    }
  }
  .qr-code__placeholder {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing);
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 4px;
    font-size: calc(var(--qr-size) * 0.1);
    line-height: 1.2;
  }
  .qr-code__placeholder > i {
    font-size: calc(var(--qr-size) * 0.2);
  }
  .qr-code.is-empty .qr-code__canvas {
    background-color: var(--bg-qr-surface);
    box-shadow: inset 0 0 0 1px var(--border-qr-surface);
  }
  .qr-code.is-empty .qr-code__placeholder {
    color: var(--text-qr-caption);
  }
  .qr-code.is-error .qr-code__canvas {
    background-color: var(--bg-danger-subtle);
  }
  .qr-code.is-error .qr-code__placeholder {
    color: var(--text-danger);
  }
  .qr-code--action {
    cursor: pointer;
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .qr-code--action:hover {
    transform: translateY(-1px);
  }
  .qr-code--action:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--border-qr-surface), 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--accent-qr-scan);
  }
  @media (prefers-reduced-motion: reduce) {
    .qr-code--action {
      transition: none;
    }
    .qr-code--action:hover {
      transform: none;
    }
  }
}
@layer utilities {
  .calendar {
    --cal-cell: 2.5rem;
    --cal-font: 0.875rem;
    display: inline-flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--text-secondary);
    user-select: none;
  }
  .calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .calendar__title {
    font-size: var(--cal-font);
    font-weight: 600;
    color: var(--text-secondary);
  }
  .calendar__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--radius-md, 0.5rem);
    color: var(--text-tertiary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .calendar__nav-btn:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .calendar__nav-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .calendar__grid {
    border-collapse: collapse;
    table-layout: fixed;
  }
  .calendar__weekday {
    width: var(--cal-cell);
    height: var(--cal-cell);
    font-size: var(--cal-font);
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    padding: 0;
  }
  .calendar__cell {
    width: var(--cal-cell);
    height: var(--cal-cell);
    padding: 0;
    position: relative;
    text-align: center;
  }
  .calendar__day {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--cal-font);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .calendar__day:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary-hover);
    font-weight: 500;
  }
  .calendar__day:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 1;
  }
  .calendar__cell--today .calendar__day {
    background: var(--bg-secondary);
    font-weight: 500;
  }
  .calendar__cell--today .calendar__day::after, .calendar__cell--highlighted .calendar__day::after {
    content: "";
    position: absolute;
    bottom: 0.25rem;
    left: 50%;
    width: 0.3125rem;
    height: 0.3125rem;
    transform: translateX(-50%);
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-brand-solid);
  }
  .calendar__cell--selected .calendar__day, .calendar__cell--range-start .calendar__day, .calendar__cell--range-end .calendar__day {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-weight: 500;
  }
  .calendar__cell--selected .calendar__day:hover, .calendar__cell--range-start .calendar__day:hover, .calendar__cell--range-end .calendar__day:hover {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
  }
  .calendar__cell--selected .calendar__day::after, .calendar__cell--range-start .calendar__day::after, .calendar__cell--range-end .calendar__day::after {
    background: var(--text-on-brand);
  }
  .calendar__cell--outside .calendar__day {
    color: var(--text-quaternary);
    opacity: 0.5;
  }
  .calendar__cell--disabled .calendar__day {
    color: var(--text-secondary);
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
  }
  .calendar__cell--in-range, .calendar__cell--range-start, .calendar__cell--range-end {
    --_cal-band: var(--bg-brand-subtle, var(--bg-brand-solid));
    @supports (color: color-mix(in lab, red, red)) {
      --_cal-band: var(--bg-brand-subtle, color-mix(in oklch, var(--bg-brand-solid) 16%, transparent));
    }
  }
  .calendar__cell--in-range {
    background: var(--_cal-band);
  }
  .calendar__cell--range-start {
    background: linear-gradient(to right, transparent 50%, var(--_cal-band) 50%);
  }
  .calendar__cell--range-end {
    background: linear-gradient(to left, transparent 50%, var(--_cal-band) 50%);
  }
  .calendar__cell--range-start.calendar__cell--range-end {
    background: transparent;
  }
  .calendar__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-secondary);
  }
  .calendar--card {
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-lg);
  }
  .calendar--bordered {
    padding: 0.75rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.75rem);
  }
  .calendar--xs {
    --cal-cell: 2rem;
    --cal-font: 0.75rem;
  }
  .calendar--sm {
    --cal-cell: 2.25rem;
    --cal-font: 0.8125rem;
  }
  .calendar--md {
    --cal-cell: 2.5rem;
    --cal-font: 0.875rem;
  }
  .calendar--lg {
    --cal-cell: 2.75rem;
    --cal-font: 0.9375rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .calendar__nav-btn, .calendar__day {
      transition: none;
    }
  }
}
@layer utilities {
  .calendar-schedule {
    --_h-day-header: var(--h-calendar-schedule-day-header, 48px);
    --_w-time-axis: var(--w-calendar-schedule-time-axis, 56px);
    --_h-hour: var(--h-calendar-schedule-hour, 64px);
    --_w-day: var(--w-calendar-schedule-day, 180px);
    --_day-count: var(--calendar-schedule-day-count, 7);
    --_gap: var(--gap-calendar-schedule, 0px);
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background: var(--bg-calendar-schedule, var(--canvas-secondary));
    color: var(--text-calendar-schedule, var(--text-primary));
    overflow: hidden;
    --outline-calendar-schedule-focus: var(--border-focus);
    --shadow-calendar-event-selected: 0 0 0 2px var(--bg-primary-solid);
    --border-calendar-schedule-now: var(--bg-primary-solid);
    --bg-calendar-schedule-today-col: var(--bg-primary-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-calendar-schedule-today-col: color-mix(in oklch, var(--bg-primary-solid) 6%, transparent);
    }
  }
  .calendar-schedule--elevated {
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--border-calendar-schedule, var(--border-secondary));
  }
  .calendar-schedule--muted {
    --bg-calendar-schedule-surface: var(--bg-calendar-schedule-muted, var(--canvas-tertiary));
  }
  .calendar-schedule--dashed .calendar-schedule__now::after {
    background: repeating-linear-gradient( to right, var(--_now-line) 0, var(--_now-line) 4px, transparent 4px, transparent 8px );
  }
  .calendar-schedule--dashed .calendar-schedule__today-line, .calendar-schedule--today-dashed .calendar-schedule__today-line {
    background: repeating-linear-gradient( to bottom, var(--_now-line) 0, var(--_now-line) 4px, transparent 4px, transparent 8px );
  }
  .calendar-schedule--now-dashed .calendar-schedule__now::after {
    background: repeating-linear-gradient( to right, var(--_now-line) 0, var(--_now-line) 4px, transparent 4px, transparent 8px );
  }
  .calendar-schedule--line-thin .calendar-schedule__now::after {
    height: 1px;
  }
  .calendar-schedule--line-thin .calendar-schedule__today-line {
    width: 1px;
  }
  .calendar-schedule--line-md .calendar-schedule__now::after {
    height: 2px;
  }
  .calendar-schedule--line-md .calendar-schedule__today-line {
    width: 2px;
  }
  .calendar-schedule--line-bold .calendar-schedule__now::after {
    height: 3px;
  }
  .calendar-schedule--line-bold .calendar-schedule__today-line {
    width: 3px;
  }
  .calendar-schedule__topbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
  }
  .calendar-schedule__viewport {
    display: grid;
    grid-template-columns: var(--_w-time-axis) 1fr;
    grid-template-rows: var(--_h-day-header) 1fr;
    overflow: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .calendar-schedule[data-calendar-snap="day"] .calendar-schedule__viewport {
    scroll-snap-type: x mandatory;
  }
  .calendar-schedule__corner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    padding-inline: calc(var(--spacing) * 4);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 30;
    width: var(--_w-time-axis);
    height: var(--_h-day-header);
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
  }
  .calendar-schedule__corner-label {
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-calendar-schedule, var(--text-tertiary));
  }
  .calendar-schedule__days {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
  }
  .calendar-schedule__day {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    flex: 1 1 0;
    min-width: 0;
    color: var(--text-calendar-schedule, var(--text-secondary));
    scroll-snap-align: start;
  }
  .calendar-schedule__day.is-today {
    color: var(--text-primary);
  }
  .calendar-schedule__day.is-today .calendar-schedule__day-num {
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    min-width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background: var(--bg-secondary);
    color: var(--text-primary);
  }
  .calendar-schedule__day.is-selected .calendar-schedule__day-num {
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    min-width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background: var(--bg-primary-solid);
    color: var(--text-on-brand);
  }
  .calendar-schedule__times {
    position: sticky;
    left: 0;
    z-index: 10;
    width: var(--_w-time-axis);
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
  }
  .calendar-schedule__time {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: calc(var(--spacing) * 2);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    height: var(--_h-hour);
    color: var(--text-calendar-schedule, var(--text-tertiary));
    transform: translateY(-0.5em);
  }
  .calendar-schedule__grid {
    position: relative;
    display: flex;
    width: 100%;
  }
  .calendar-schedule__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: repeating-linear-gradient( to bottom, var(--border-calendar-schedule, var(--border-tertiary)) 0, var(--border-calendar-schedule, var(--border-tertiary)) 1px, transparent 1px, transparent var(--_h-hour) ), linear-gradient( to right, var(--border-calendar-schedule, var(--border-tertiary)) 0, var(--border-calendar-schedule, var(--border-tertiary)) 1px, transparent 1px );
    background-size: 100% auto, calc(100% / var(--_day-count, 7)) 100%;
  }
  .calendar-schedule__now {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--now-y);
    z-index: 5;
    height: 0;
    pointer-events: none;
    display: none;
  }
  .calendar-schedule.is-now-ready .calendar-schedule__now {
    transition: top 30s linear;
  }
  .calendar-schedule--now-y .calendar-schedule__now, .calendar-schedule .calendar-schedule__now[data-calendar-now] {
    display: block;
  }
  .calendar-schedule__now::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--_now-dot);
  }
  .calendar-schedule__now::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--_now-line);
    opacity: 0.7;
  }
  .calendar-schedule__events {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }
  .calendar-schedule__event {
    position: absolute;
    left: calc(var(--day, 0) * (100% / var(--_day-count, 7)) + 4px);
    top: calc(var(--start, 0) * var(--_h-hour));
    width: calc(100% / var(--_day-count, 7) - 8px);
    height: calc(var(--dur, 1) * var(--_h-hour));
    pointer-events: auto;
    --_event-ring: var(--border-calendar-schedule-event);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    overflow: hidden;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background: var(--bg-calendar-schedule-event);
    box-shadow: inset 0 0 0 1px var(--_event-ring);
    color: var(--text-calendar-schedule-event);
    transition: box-shadow 0.15s ease, background 0.15s ease;
  }
  .calendar-schedule__event:hover {
    background: var(--bg-calendar-event-hover);
    z-index: 4;
  }
  .calendar-schedule__event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .calendar-schedule__event-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 70%;
  }
  .calendar-schedule__event-time {
    font-size: 10px;
    opacity: 50%;
  }
  .calendar-schedule__event-badge {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing);
    padding-block: 1px;
    font-size: 9px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: var(--border-calendar-schedule-event);
    color: var(--text-on-brand);
  }
  .calendar-schedule[data-calendar-view="day"] {
    --_day-count: 1;
  }
  .calendar-schedule[data-calendar-view="workweek"] {
    --_day-count: 5;
  }
  .calendar-schedule[data-calendar-view="week"] {
    --_day-count: 7;
  }
  .calendar-schedule[data-calendar-view="multiday"] {
    --_day-count: var(--days-visible, 3);
  }
  .calendar-schedule[data-calendar-view="resources"] {
    --_day-count: var(--resources-visible, 4);
  }
  .calendar-schedule[data-calendar-view] .calendar-schedule__day {
    flex: 1 1 0;
    min-width: var(--w-calendar-schedule-day-min, 80px);
    max-width: var(--w-calendar-schedule-day-max, none);
  }
  .calendar-schedule--compact {
    --_h-day-header: 36px;
    --_w-time-axis: 44px;
    --_h-hour: 44px;
  }
  .calendar-schedule--compact .calendar-schedule__topbar {
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
  }
  .calendar-schedule--compact .calendar-schedule__event {
    gap: 0;
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
  }
  .calendar-schedule--compact .calendar-schedule__time {
    padding-right: var(--spacing);
    font-size: 9px;
  }
  .calendar-schedule--compact .calendar-schedule__day {
    font-size: 10px;
  }
  .calendar-schedule--cozy {
    --_h-day-header: 56px;
    --_w-time-axis: 64px;
    --_h-hour: 80px;
  }
  .calendar-schedule--cozy .calendar-schedule__topbar {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .calendar-schedule--cozy .calendar-schedule__event {
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .calendar-schedule--cozy .calendar-schedule__time {
    padding-right: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .calendar-schedule--cozy .calendar-schedule__day {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .calendar-schedule--grid-soft .calendar-schedule__bg {
    opacity: 0.4;
  }
  .calendar-schedule--grid-soft .calendar-schedule__cell, .calendar-schedule--grid-soft .calendar-schedule__cell-time {
    border-color: var(--border-calendar-schedule-soft, var(--border-tertiary));
  }
  .calendar-schedule--grid-strong .calendar-schedule__bg {
    opacity: 1;
    background-image: repeating-linear-gradient( to bottom, var(--border-calendar-schedule, var(--border-tertiary)) 0, var(--border-calendar-schedule, var(--border-tertiary)) 1px, transparent 1px, transparent var(--_h-hour) ), linear-gradient( to right, var(--border-calendar-schedule, var(--border-tertiary)) 0, var(--border-calendar-schedule, var(--border-tertiary)) 2px, transparent 2px );
    background-size: 100% auto, calc(100% / var(--_day-count, 7)) 100%;
  }
  .calendar-schedule--striped-hours .calendar-schedule__grid::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: repeating-linear-gradient( to bottom, transparent 0, transparent var(--_h-hour), var(--bg-calendar-schedule-hour-stripe, rgba(0,0,0,0.02)) var(--_h-hour), var(--bg-calendar-schedule-hour-stripe, rgba(0,0,0,0.02)) calc(var(--_h-hour) * 2) );
  }
  .calendar-schedule--working-hours .calendar-schedule__grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
    top: 0;
    height: calc(var(--work-start, 2) * var(--_h-hour));
    background: var(--bg-calendar-schedule-nonworking-hours, rgba(0,0,0,0.03));
  }
  .calendar-schedule--working-hours .calendar-schedule__grid-nonwork-end {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
    top: calc(var(--work-end, 12) * var(--_h-hour));
    bottom: 0;
    background: var(--bg-calendar-schedule-nonworking-hours, rgba(0,0,0,0.03));
  }
  .calendar-schedule--weekend-dim .calendar-schedule__day.is-weekend {
    background: var(--bg-calendar-schedule-weekend, rgba(0,0,0,0.02));
  }
  .calendar-schedule--weekend-dim .calendar-schedule__weekend-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--bg-calendar-schedule-weekend, rgba(0,0,0,0.02));
  }
  .calendar-schedule.is-scrolled .calendar-schedule__days {
    box-shadow: var(--shadow-calendar-schedule-header);
  }
  .calendar-schedule.is-scrolled .calendar-schedule__corner {
    box-shadow: var(--shadow-calendar-schedule-header);
  }
  .calendar-schedule[data-calendar-snap="15m"] .calendar-schedule__viewport {
    scroll-snap-type: y proximity;
  }
  .calendar-schedule[data-calendar-snap="30m"] .calendar-schedule__viewport {
    scroll-snap-type: y proximity;
  }
  .calendar-schedule[data-calendar-snap="60m"] .calendar-schedule__viewport {
    scroll-snap-type: y mandatory;
  }
  .calendar-schedule[data-calendar-infinite="true"] .calendar-schedule__sentinel {
    position: absolute;
    width: 1px;
    height: 100%;
    pointer-events: none;
    visibility: hidden;
  }
  .calendar-schedule__sentinel--start {
    left: 0;
  }
  .calendar-schedule__sentinel--end {
    right: 0;
  }
  .calendar-schedule__today-col {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    left: calc(var(--today-index, -1) * (100% / var(--_day-count, 7)));
    width: calc(100% / var(--_day-count, 7));
    background: var(--bg-calendar-schedule-today-col, rgba(59,130,246,0.04));
  }
  .calendar-schedule__today-col[style*="--today-index:-"] {
    display: none;
  }
  .calendar-schedule__now-label {
    position: absolute;
    right: 4px;
    top: 0;
    transform: translateY(-50%);
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing);
    font-size: 9px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background: var(--_now-dot);
    color: var(--alpha-white-100);
    white-space: nowrap;
    z-index: 1;
  }
  .calendar-schedule--crosshair .calendar-schedule__crosshair-x, .calendar-schedule--crosshair .calendar-schedule__crosshair-y {
    position: absolute;
    pointer-events: none;
    z-index: 4;
  }
  .calendar-schedule--crosshair .calendar-schedule__crosshair-x {
    top: var(--hover-y, -999px);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-calendar-schedule-now);
    opacity: 0.25;
  }
  .calendar-schedule--crosshair .calendar-schedule__crosshair-y {
    left: var(--hover-x, -999px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-calendar-schedule-now);
    opacity: 0.25;
  }
  .calendar-schedule__allday {
    position: sticky;
    top: var(--_h-day-header);
    z-index: 15;
    display: flex;
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    grid-column: 1 / -1;
  }
  .calendar-schedule__allday-label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    padding-right: calc(var(--spacing) * 2);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    position: sticky;
    left: 0;
    width: var(--_w-time-axis);
    flex-shrink: 0;
    color: var(--text-calendar-schedule, var(--text-tertiary));
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    z-index: 1;
  }
  .calendar-schedule__allday-lanes {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 28px;
    position: relative;
  }
  .calendar-schedule__allday-lane {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 0.5);
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * 0.5);
  }
  .calendar-schedule__allday-event {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: 1px;
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--bg-calendar-schedule-event);
    border-left: 2px solid var(--border-calendar-schedule-event);
    color: var(--text-calendar-schedule-event);
    max-width: 100%;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }
  .calendar-schedule__allday-event:hover {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background: var(--bg-calendar-event-hover);
  }
  .calendar-schedule__viewport:has(.calendar-schedule__allday) {
    grid-template-rows: var(--_h-day-header) auto 1fr;
  }
  .calendar-schedule__event.is-primary {
    background: var(--bg-calendar-event-primary);
    --_event-ring: var(--border-calendar-event-primary);
  }
  .calendar-schedule__event.is-success {
    background: var(--bg-calendar-event-success);
    --_event-ring: var(--border-calendar-event-success);
  }
  .calendar-schedule__event.is-warning {
    background: var(--bg-calendar-event-warning);
    --_event-ring: var(--border-calendar-event-warning);
  }
  .calendar-schedule__event.is-danger {
    background: var(--bg-calendar-event-danger);
    --_event-ring: var(--border-calendar-event-danger);
  }
  .calendar-schedule__event.is-info {
    background: var(--bg-calendar-event-primary);
    --_event-ring: var(--border-calendar-event-primary);
  }
  .calendar-schedule__event.is-neutral {
    background: var(--bg-calendar-event-neutral);
    --_event-ring: var(--border-calendar-event-neutral);
  }
  .calendar-schedule__event.is-primary:hover, .calendar-schedule__event.is-info:hover {
    background: var(--bg-calendar-event-primary-hover);
  }
  .calendar-schedule__event.is-success:hover {
    background: var(--bg-calendar-event-success-hover);
  }
  .calendar-schedule__event.is-warning:hover {
    background: var(--bg-calendar-event-warning-hover);
  }
  .calendar-schedule__event.is-danger:hover {
    background: var(--bg-calendar-event-danger-hover);
  }
  .calendar-schedule__event.is-neutral:hover {
    background: var(--bg-calendar-event-neutral-hover);
  }
  .calendar-schedule__event--plain {
    box-shadow: none;
  }
  .calendar-schedule__allday-event--plain {
    border-left: none;
  }
  .calendar-schedule__event.is-selected {
    box-shadow: inset 0 0 0 1px var(--_event-ring), var(--shadow-calendar-event-selected);
    z-index: 6;
  }
  .calendar-schedule__event.is-dragging {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    opacity: 0.85;
    z-index: 50;
    cursor: grabbing;
  }
  .calendar-schedule__event.is-resizing {
    opacity: 0.9;
    z-index: 50;
    cursor: ns-resize;
  }
  .calendar-schedule__event.is-ghost {
    opacity: 0.35;
    box-shadow: none;
    outline: 1px dashed var(--_event-ring);
    outline-offset: -1px;
    pointer-events: none;
  }
  .calendar-schedule__event.is-blocked {
    background: repeating-linear-gradient( 135deg, transparent, transparent 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 8px );
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }
  .calendar-schedule__event.is-readonly {
    cursor: default;
    opacity: 0.7;
  }
  .calendar-schedule__event.is-readonly:hover {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transform: none;
  }
  .calendar-schedule__event.is-conflict {
    box-shadow: inset 0 0 0 1px var(--_event-ring), 0 0 0 2px var(--bg-danger-solid);
    z-index: 6;
  }
  .calendar-schedule__event-handle--top, .calendar-schedule__event-handle--bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
  }
  .calendar-schedule__event-handle--top {
    top: 0;
    border-radius: 6px 6px 0 0;
  }
  .calendar-schedule__event-handle--bottom {
    bottom: 0;
    border-radius: 0 0 6px 6px;
  }
  .calendar-schedule__event:hover .calendar-schedule__event-handle--top, .calendar-schedule__event:hover .calendar-schedule__event-handle--bottom, .calendar-schedule__event:focus-within .calendar-schedule__event-handle--top, .calendar-schedule__event:focus-within .calendar-schedule__event-handle--bottom {
    opacity: 1;
    background: var(--border-calendar-schedule-event);
  }
  .calendar-schedule__event:focus-visible {
    outline: 2px solid var(--outline-calendar-schedule-focus);
    outline-offset: 2px;
    z-index: 6;
  }
  .calendar-schedule__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--text-calendar-schedule, var(--text-tertiary));
    grid-column: 1 / -1;
    grid-row: 2 / -1;
  }
  .calendar-schedule__empty-icon {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    opacity: 30%;
  }
  .calendar-schedule__empty-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .calendar-schedule__empty-desc {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 60%;
  }
  @keyframes calendar-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  .calendar-schedule__skeleton {
    position: relative;
    overflow: hidden;
  }
  .calendar-schedule__skeleton .calendar-schedule__events {
    display: none;
  }
  .calendar-schedule__skeleton .calendar-schedule__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( 90deg, transparent 0%, var(--bg-calendar-schedule-surface, rgba(255,255,255,0.4)) 40%, transparent 80% );
    background-size: 200% 100%;
    animation: calendar-shimmer 1.5s ease-in-out infinite;
  }
  .calendar-schedule__skeleton-bar {
    position: absolute;
    border-radius: var(--radius-sm);
    background: var(--bg-calendar-schedule-hour-stripe, rgba(0,0,0,0.04));
    pointer-events: none;
  }
  .calendar-schedule[data-calendar-events="stack"] {
    --_h-slot: var(--h-calendar-schedule-slot, 64px);
    --_gap-slot: var(--gap-calendar-schedule-slot, 4px);
    --_slot-max: var(--h-calendar-slot-max, none);
  }
  .calendar-schedule[data-calendar-events="stack"] .calendar-schedule__events {
    display: none;
  }
  .calendar-schedule[data-calendar-events="stack"] .calendar-schedule__bg {
    background-image: none;
  }
  .calendar-schedule[data-calendar-events="stack"] .calendar-schedule__grid {
    height: auto !important;
    grid-column: 1 / -1;
  }
  .calendar-schedule[data-calendar-events="stack"] .calendar-schedule__times {
    display: none;
  }
  .calendar-schedule__cells {
    display: none;
  }
  .calendar-schedule[data-calendar-events="stack"] .calendar-schedule__cells {
    display: grid;
    grid-template-columns: var(--_w-time-axis) repeat(var(--_day-count, 7), 1fr);
    grid-auto-rows: minmax(var(--_h-slot), auto);
    position: relative;
    z-index: 3;
    width: 100%;
  }
  .calendar-schedule__row {
    display: contents;
  }
  .calendar-schedule__cell {
    min-height: var(--_h-slot);
    display: flex;
    flex-direction: column;
    gap: var(--_gap-slot);
    padding: var(--_gap-slot);
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    overflow: visible;
    position: relative;
  }
  .calendar-schedule__row > .calendar-schedule__cell:last-child {
    border-right: none;
  }
  .calendar-schedule__cell.is-closed {
    background-image: repeating-linear-gradient( -45deg, transparent, transparent 4px, var(--bg-calendar-schedule-closed, var(--utility-neutral-100)) 4px, var(--bg-calendar-schedule-closed, var(--utility-neutral-100)) 5px );
  }
  .calendar-schedule__cell-time {
    display: none;
  }
  .calendar-schedule[data-calendar-events="stack"] .calendar-schedule__cell-time {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 4);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    padding-top: var(--_gap-slot);
    min-height: var(--_h-slot);
    color: var(--text-calendar-schedule, var(--text-tertiary));
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
  }
  .calendar-schedule--compact .calendar-schedule__cell-time {
    padding-right: var(--spacing);
    font-size: 9px;
  }
  .calendar-schedule--cozy .calendar-schedule__cell-time {
    padding-right: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .calendar-schedule__row:nth-child(even) .calendar-schedule__cell {
    background-color: var(--bg-calendar-schedule-cell-alt, transparent);
  }
  .calendar-schedule[data-calendar-events="stack"] .calendar-schedule__now {
    left: var(--_w-time-axis);
    transition: opacity 150ms ease !important;
  }
  .calendar-schedule[data-calendar-events="stack"] .calendar-schedule__now::before {
    left: -4px;
    top: -5px;
  }
  .calendar-schedule[data-calendar-slot-overflow="scroll"] .calendar-schedule__cell {
    max-height: var(--_slot-max, 192px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
  }
  .calendar-schedule__card {
    --_event-ring: var(--border-calendar-schedule-event);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    position: relative;
    background: var(--bg-calendar-schedule-event);
    box-shadow: inset 0 0 0 1px var(--_event-ring);
    color: var(--text-calendar-schedule-event);
    transition: box-shadow 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
  }
  .calendar-schedule__card:hover {
    background: var(--bg-calendar-event-hover);
  }
  .calendar-schedule__card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .calendar-schedule__card-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 70%;
  }
  .calendar-schedule__card-time {
    font-size: 10px;
    opacity: 50%;
  }
  .calendar-schedule__card-badge {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing);
    padding-block: 1px;
    font-size: 9px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: var(--border-calendar-schedule-event);
    color: #fff;
  }
  .calendar-schedule__card.is-primary {
    background: var(--bg-calendar-event-primary);
    --_event-ring: var(--border-calendar-event-primary);
  }
  .calendar-schedule__card.is-success {
    background: var(--bg-calendar-event-success);
    --_event-ring: var(--border-calendar-event-success);
  }
  .calendar-schedule__card.is-warning {
    background: var(--bg-calendar-event-warning);
    --_event-ring: var(--border-calendar-event-warning);
  }
  .calendar-schedule__card.is-danger {
    background: var(--bg-calendar-event-danger);
    --_event-ring: var(--border-calendar-event-danger);
  }
  .calendar-schedule__card.is-info {
    background: var(--bg-calendar-event-primary);
    --_event-ring: var(--border-calendar-event-primary);
  }
  .calendar-schedule__card.is-neutral {
    background: var(--bg-calendar-event-neutral);
    --_event-ring: var(--border-calendar-event-neutral);
  }
  .calendar-schedule__card.is-primary:hover, .calendar-schedule__card.is-info:hover {
    background: var(--bg-calendar-event-primary-hover);
  }
  .calendar-schedule__card.is-success:hover {
    background: var(--bg-calendar-event-success-hover);
  }
  .calendar-schedule__card.is-warning:hover {
    background: var(--bg-calendar-event-warning-hover);
  }
  .calendar-schedule__card.is-danger:hover {
    background: var(--bg-calendar-event-danger-hover);
  }
  .calendar-schedule__card.is-neutral:hover {
    background: var(--bg-calendar-event-neutral-hover);
  }
  .calendar-schedule__card.is-primary .calendar-schedule__card-badge, .calendar-schedule__card.is-info .calendar-schedule__card-badge {
    background: var(--border-calendar-event-primary);
  }
  .calendar-schedule__card.is-success .calendar-schedule__card-badge {
    background: var(--border-calendar-event-success);
  }
  .calendar-schedule__card.is-warning .calendar-schedule__card-badge {
    background: var(--border-calendar-event-warning);
  }
  .calendar-schedule__card.is-danger .calendar-schedule__card-badge {
    background: var(--border-calendar-event-danger);
  }
  .calendar-schedule__card.is-neutral .calendar-schedule__card-badge {
    background: var(--border-calendar-event-neutral);
  }
  .calendar-schedule--compact .calendar-schedule__card {
    gap: 0;
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
  }
  .calendar-schedule--cozy .calendar-schedule__card {
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .calendar-schedule__card:focus-visible {
    outline: 2px solid var(--outline-calendar-schedule-focus);
    outline-offset: 2px;
    z-index: 6;
  }
  .calendar-schedule__frame {
    display: grid;
    grid-template-columns: 1fr var(--_w-frame-right, 0px);
    grid-template-rows: 1fr var(--_h-frame-bottom, 0px);
    min-height: 0;
    overflow: hidden;
  }
  .calendar-schedule:has(.calendar-schedule__frame-right:not(.is-hidden)) {
    --_w-frame-right: var(--w-calendar-schedule-frame-right, 240px);
  }
  .calendar-schedule:has(.calendar-schedule__frame-bottom:not(.is-hidden)) {
    --_h-frame-bottom: var(--h-calendar-schedule-frame-bottom, 48px);
  }
  .calendar-schedule__frame > .calendar-schedule__viewport {
    grid-row: 1;
    grid-column: 1;
    min-height: 0;
    min-width: 0;
  }
  .calendar-schedule__frame-right {
    grid-row: 1;
    grid-column: 2;
    overflow-y: auto;
    scrollbar-width: thin;
    border-left: 1px solid var(--border-calendar-schedule-frame, var(--border-calendar-schedule, var(--border-tertiary)));
    background: var(--bg-calendar-schedule-frame, var(--bg-calendar-schedule-surface, var(--canvas-secondary)));
  }
  .calendar-schedule__frame-bottom {
    grid-row: 2;
    grid-column: 1;
    overflow-x: auto;
    scrollbar-width: thin;
    border-top: 1px solid var(--border-calendar-schedule-frame, var(--border-calendar-schedule, var(--border-tertiary)));
    background: var(--bg-calendar-schedule-frame, var(--bg-calendar-schedule-surface, var(--canvas-secondary)));
  }
  .calendar-schedule__frame-corner {
    grid-row: 2;
    grid-column: 2;
    border-left: 1px solid var(--border-calendar-schedule-frame, var(--border-calendar-schedule, var(--border-tertiary)));
    border-top: 1px solid var(--border-calendar-schedule-frame, var(--border-calendar-schedule, var(--border-tertiary)));
    background: var(--bg-calendar-schedule-frame, var(--bg-calendar-schedule-surface, var(--canvas-secondary)));
  }
  .calendar-schedule__frame-right.is-hidden, .calendar-schedule__frame-bottom.is-hidden, .calendar-schedule__frame-corner.is-hidden {
    display: none;
  }
  .calendar-schedule[data-calendar-carousel="true"] .calendar-schedule__viewport {
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--_w-time-axis);
  }
  .calendar-schedule[data-calendar-carousel="true"] .calendar-schedule__day {
    flex: 0 0 var(--w-calendar-schedule-day-carousel, 200px);
    min-width: var(--w-calendar-schedule-day-carousel, 200px);
  }
  .calendar-schedule[data-calendar-carousel="true"] .calendar-schedule__grid {
    width: calc(var(--_day-count, 7) * var(--w-calendar-schedule-day-carousel, 200px));
  }
  .calendar-schedule[data-calendar-carousel="true"] .calendar-schedule__bg {
    background-size: 100% auto, var(--w-calendar-schedule-day-carousel, 200px) 100%;
  }
  .calendar-schedule[data-calendar-carousel="true"][data-calendar-events="stack"] .calendar-schedule__cells {
    grid-template-columns: repeat(var(--_day-count, 7), var(--w-calendar-schedule-day-carousel, 200px));
  }
  .calendar-schedule[data-calendar-carousel="true"] .calendar-schedule__today-col {
    left: calc(var(--today-index, -1) * var(--w-calendar-schedule-day-carousel, 200px));
    width: var(--w-calendar-schedule-day-carousel, 200px);
  }
  .calendar-schedule[data-calendar-carousel="true"] .calendar-schedule__allday-lanes {
    flex: 0 0 calc(var(--_day-count, 7) * var(--w-calendar-schedule-day-carousel, 200px));
  }
  .calendar-schedule[data-calendar-carousel="true"] .calendar-schedule__allday-lane {
    flex: 0 0 var(--w-calendar-schedule-day-carousel, 200px);
  }
  .calendar-schedule {
    --now-y: -999px;
    --_today-x-index: -1;
    --_now-dot: var(--bg-primary-solid);
    --_now-line: var(--bg-primary-solid);
    --_today-line: var(--bg-primary-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --_today-line: color-mix(in oklch, var(--bg-primary-solid) 25%, transparent);
    }
  }
  .calendar-schedule--now-danger {
    --_now-dot: var(--bg-calendar-now-dot-danger);
    --_now-line: var(--bg-calendar-now-line-danger);
    --_today-line: var(--bg-calendar-today-line-danger);
  }
  .calendar-schedule--now-primary {
    --_now-dot: var(--bg-calendar-now-dot-primary);
    --_now-line: var(--bg-calendar-now-line-primary);
    --_today-line: var(--bg-calendar-today-line-primary);
  }
  .calendar-schedule--now-info {
    --_now-dot: var(--bg-calendar-now-dot-info);
    --_now-line: var(--bg-calendar-now-line-info);
    --_today-line: var(--bg-calendar-today-line-info);
  }
  .calendar-schedule--now-success {
    --_now-dot: var(--bg-calendar-now-dot-success);
    --_now-line: var(--bg-calendar-now-line-success);
    --_today-line: var(--bg-calendar-today-line-success);
  }
  .calendar-schedule--now-warning {
    --_now-dot: var(--bg-calendar-now-dot-warning);
    --_now-line: var(--bg-calendar-now-line-warning);
    --_today-line: var(--bg-calendar-today-line-warning);
  }
  .calendar-schedule--today-x .calendar-schedule__day.is-today {
    position: relative;
  }
  .calendar-schedule--today-x .calendar-schedule__day.is-today::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--_now-dot);
    z-index: 1;
  }
  .calendar-schedule__today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    pointer-events: none;
    width: 1px;
    left: calc((var(--_today-x-index) + 0.5) * (100% / var(--_day-count)) - 1px);
    background: var(--_now-line);
    opacity: 0.5;
    display: none;
  }
  .calendar-schedule--today-x .calendar-schedule__today-line {
    display: block;
  }
  .calendar-schedule[data-calendar-carousel="true"] .calendar-schedule__today-line {
    left: calc((var(--_today-x-index) + 0.5) * var(--w-calendar-schedule-day-carousel) - 1px);
  }
}
@layer utilities {
  .cal-booking {
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--bg-cal-booking);
    --bg-cal-booking-selected: var(--bg-primary-solid);
    --bg-cal-booking-selected-hover: var(--bg-brand-solid-hover);
    --border-cal-booking-selected: var(--bg-primary-solid);
    --text-cal-booking-selected: var(--text-on-brand);
    --bg-cal-booking-today: var(--bg-secondary);
    --border-cal-booking-today: transparent;
    --text-cal-booking-today: var(--text-primary);
    --bg-cal-booking-today-dot: var(--text-primary-solid);
  }
  .cal-booking--bordered {
    border-radius: var(--radius-xl);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--border-cal-booking);
  }
  .cal-booking__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--spacing);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .cal-booking__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-cal-booking-month);
  }
  .cal-booking__title span {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    opacity: 70%;
  }
  .cal-booking__nav {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    color: var(--text-cal-booking-nav);
  }
  .cal-booking__nav:hover {
    color: var(--text-cal-booking-nav-hover);
    background-color: var(--bg-cal-booking-day-hover);
  }
  .cal-booking__nav:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .cal-booking__nav:disabled {
    cursor: not-allowed;
    opacity: 30%;
  }
  .cal-booking__nav-group {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .cal-booking__weekdays {
    margin-bottom: var(--spacing);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .cal-booking__weekday {
    text-align: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    color: var(--text-cal-booking-weekday);
  }
  .cal-booking__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--_cal-gap, 2px);
  }
  .cal-booking__day {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: transparent;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
    aspect-ratio: 1;
    border-color: var(--border-cal-booking-day);
    color: var(--text-cal-booking-day);
    background-color: var(--bg-cal-booking-day);
    min-width: 0;
    padding: 0;
  }
  .cal-booking__day:hover:not(.is-disabled):not(.is-outside) {
    background-color: var(--bg-cal-booking-day-hover);
    border-color: var(--border-cal-booking-day-hover);
  }
  .cal-booking__day:active:not(.is-disabled):not(.is-outside) {
    background-color: var(--bg-cal-booking-day-active);
  }
  .cal-booking__day:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 1;
  }
  .cal-booking__day-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .cal-booking__day.is-outside {
    color: var(--text-cal-booking-day-outside);
    cursor: default;
  }
  .cal-booking__day.is-outside:hover {
    background-color: var(--bg-cal-booking-day);
  }
  .cal-booking__day.is-disabled {
    color: var(--text-cal-booking-day-disabled);
    cursor: not-allowed;
    opacity: 50%;
  }
  .cal-booking__day.is-available {
    background-color: var(--bg-cal-booking-available);
    border-color: var(--border-cal-booking-available);
    color: var(--text-cal-booking-available);
  }
  .cal-booking__day.is-available:hover:not(.is-disabled) {
    background-color: var(--bg-cal-booking-available-hover);
  }
  .cal-booking__day.is-today {
    background-color: var(--bg-cal-booking-today);
    border-color: var(--border-cal-booking-today);
    color: var(--text-cal-booking-today);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .cal-booking__day.is-today .cal-booking__day-label {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .cal-booking__day.is-selected {
    background-color: var(--bg-cal-booking-selected);
    border-color: var(--border-cal-booking-selected);
    color: var(--text-cal-booking-selected);
  }
  .cal-booking__day.is-selected:hover {
    background-color: var(--bg-cal-booking-selected-hover);
  }
  .cal-booking__day.is-today.is-selected {
    background-color: var(--bg-cal-booking-selected);
    border-color: var(--border-cal-booking-selected);
    color: var(--text-cal-booking-selected);
  }
  .cal-booking__dots {
    margin-top: calc(var(--spacing) * 0.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 0.5);
    min-height: 6px;
  }
  .cal-booking__dot {
    height: var(--spacing);
    width: var(--spacing);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--bg-cal-booking-dot-available);
  }
  .cal-booking__dot--booked {
    background-color: var(--bg-cal-booking-dot-booked);
  }
  .cal-booking__dot--busy {
    background-color: var(--bg-cal-booking-dot-busy);
  }
  .cal-booking__dot--full {
    background-color: var(--bg-cal-booking-dot-full);
  }
  .cal-booking__dot--today {
    background-color: var(--bg-cal-booking-today-dot);
  }
  .cal-booking__day.is-selected .cal-booking__dot {
    opacity: 60%;
  }
  .cal-booking__day.is-selected .cal-booking__dot--today {
    background-color: var(--text-cal-booking-selected);
  }
  .cal-booking--elevated {
    --_cal-gap: 4px;
  }
  .cal-booking--elevated .cal-booking__day {
    border-radius: var(--radius-lg);
    background-color: var(--bg-cal-booking-elevated);
    border-color: var(--border-cal-booking-elevated);
    box-shadow: var(--shadow-cal-booking-elevated);
  }
  .cal-booking--elevated .cal-booking__day:hover:not(.is-disabled):not(.is-outside) {
    box-shadow: var(--shadow-cal-booking-elevated-hover);
  }
  .cal-booking--elevated .cal-booking__day.is-outside {
    pointer-events: none;
    opacity: 0%;
    box-shadow: none;
  }
  .cal-booking--elevated .cal-booking__day.is-available {
    background-color: var(--bg-cal-booking-available);
  }
  .cal-booking--elevated .cal-booking__day.is-selected {
    background-color: var(--bg-cal-booking-selected);
    border-color: var(--bg-cal-booking-selected);
    box-shadow: var(--shadow-cal-booking-elevated-hover);
  }
  .cal-booking--elevated .cal-booking__day.is-today:not(.is-selected) {
    border-color: var(--border-cal-booking-today);
  }
  .cal-booking--circle .cal-booking__day {
    border-radius: var(--radius-full);
  }
  .cal-booking--circle.cal-booking--elevated .cal-booking__day {
    border-radius: var(--radius-full);
  }
  .cal-booking--subtle .cal-booking__day {
    border-color: transparent;
  }
  .cal-booking--subtle .cal-booking__day:hover:not(.is-disabled):not(.is-outside) {
    background-color: var(--bg-cal-booking-day-hover);
    border-color: transparent;
  }
  .cal-booking--subtle .cal-booking__day.is-available {
    border-color: transparent;
    background-color: var(--bg-cal-booking-day-hover);
  }
  .cal-booking--subtle .cal-booking__day.is-available:hover:not(.is-disabled) {
    background-color: var(--bg-cal-booking-available-hover);
  }
  .cal-booking--subtle .cal-booking__day.is-today {
    border-color: var(--border-cal-booking-today);
  }
  .cal-booking--subtle .cal-booking__day.is-selected {
    background-color: var(--bg-cal-booking-selected);
    border-color: var(--border-cal-booking-selected);
    color: var(--text-cal-booking-selected);
  }
  .cal-booking--subtle .cal-booking__day.is-selected:hover {
    background-color: var(--bg-cal-booking-selected-hover);
  }
  .cal-booking--transparent {
    background-color: transparent;
  }
  .cal-booking--sm .cal-booking__header {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .cal-booking--sm .cal-booking__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .cal-booking--sm .cal-booking__weekday {
    font-size: 0.563rem;
    line-height: var(--tw-leading, 1rem);
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .cal-booking--sm .cal-booking__day-label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .cal-booking--sm .cal-booking__nav {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .cal-booking--sm .cal-booking__dots {
    min-height: 4px;
  }
  .cal-booking--sm .cal-booking__dot {
    height: calc(var(--spacing) * 0.5);
    width: calc(var(--spacing) * 0.5);
  }
  .cal-booking--lg .cal-booking__header {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .cal-booking--lg .cal-booking__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .cal-booking--lg .cal-booking__weekday {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 10);
    line-height: calc(var(--spacing) * 10);
  }
  .cal-booking--lg .cal-booking__day-label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .cal-booking--lg .cal-booking__nav {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
  }
  .cal-booking--lg .cal-booking__dots {
    min-height: 8px;
    margin-top: var(--spacing);
  }
  .cal-booking--lg .cal-booking__dot {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
  }
  .cal-booking--dual {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 6);
  }
  .cal-booking--dual > .cal-booking__month {
    min-width: 0;
    flex: 1;
  }
  @media (max-width: 640px) {
    .cal-booking--dual {
      flex-direction: column;
      gap: calc(var(--spacing) * 4);
    }
  }
  .cal-booking__slot-count {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.563rem;
    line-height: var(--tw-leading, 1rem);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    opacity: 70%;
  }
  .cal-booking__day.is-selected .cal-booking__slot-count {
    opacity: 80%;
  }
  .cal-booking__day.is-disabled .cal-booking__slot-count {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .cal-booking__day {
      transition: none;
    }
    .cal-booking__nav:active {
      transform: none;
    }
  }
  .cal-booking__day:focus:not(:focus-visible) {
    outline: none;
    box-shadow: var(--shadow-cal-booking-elevated, none);
  }
}
@layer utilities {
  .calendar-schedule--month {
    --_month-cell-min-h: 7rem;
    display: grid;
    grid-template-rows: auto auto 1fr;
  }
  .calendar-schedule__month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--_month-cell-min-h), 1fr);
    background: var(--border-calendar-schedule, var(--border-tertiary));
    gap: 1px;
    flex: 1;
    min-height: 0;
  }
  .calendar-schedule__month-cell {
    position: relative;
    background: var(--bg-calendar-schedule, var(--canvas-secondary));
    padding: 0.375rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 100ms ease;
  }
  .calendar-schedule__month-cell:hover {
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.02));
  }
  .calendar-schedule__month-cell.is-outside {
    background: var(--bg-secondary, oklch(0% 0 0 / 0.02));
    color: var(--text-quaternary, var(--text-tertiary));
  }
  .calendar-schedule__month-cell.is-today {
    background: var(--bg-primary-subtle);
  }
  .calendar-schedule__month-cell.is-selected {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    z-index: 2;
  }
  .calendar-schedule__month-cell.is-weekend {
    background: var(--bg-secondary, oklch(0% 0 0 / 0.015));
  }
  .calendar-schedule__month-cell-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
  }
  .calendar-schedule__month-cell.is-today .calendar-schedule__month-cell-date {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
  }
  .calendar-schedule__month-cell.is-selected .calendar-schedule__month-cell-date {
    background: var(--bg-primary-solid);
    color: var(--text-on-brand);
    font-weight: 600;
  }
  .calendar-schedule__month-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
  }
  .calendar-schedule__month-event {
    --_event-ring: var(--bg-primary-solid);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    box-shadow: inset 0 0 0 1px var(--_event-ring);
    transition: opacity 100ms ease, transform 100ms ease;
  }
  .calendar-schedule__month-event:hover {
    transform: translateX(1px);
  }
  .calendar-schedule__month-event.is-success {
    background: var(--bg-success-subtle, oklch(95% 0.05 142));
    color: var(--text-success);
    --_event-ring: var(--bg-success-solid, var(--utility-green-500));
  }
  .calendar-schedule__month-event.is-warning {
    background: var(--bg-warning-subtle, oklch(95% 0.06 80));
    color: var(--text-warning);
    --_event-ring: var(--bg-warning-solid, var(--utility-amber-500));
  }
  .calendar-schedule__month-event.is-danger {
    background: var(--bg-danger-subtle, oklch(95% 0.05 25));
    color: var(--text-danger);
    --_event-ring: var(--bg-danger-solid, var(--utility-red-500));
  }
  .calendar-schedule__month-event.is-neutral {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    --_event-ring: var(--border-secondary);
  }
  .calendar-schedule__month-event--multi {
    grid-column: span var(--span, 1);
    border-radius: 0.25rem;
  }
  .calendar-schedule__month-overflow {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-align: left;
  }
  .calendar-schedule__month-overflow:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.04));
  }
  .calendar-schedule--mini {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-calendar-schedule, var(--canvas-secondary));
    border: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    border-radius: 0.5rem;
    font-size: 0.75rem;
    min-width: 14rem;
  }
  .calendar-schedule__mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .calendar-schedule__mini-title {
    font-weight: 600;
    font-size: 0.8125rem;
  }
  .calendar-schedule__mini-nav {
    display: flex;
    gap: 2px;
  }
  .calendar-schedule__mini-nav-btn {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: background-color 100ms ease, color 100ms ease;
  }
  .calendar-schedule__mini-nav-btn:hover {
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.06));
    color: var(--text-primary);
  }
  .calendar-schedule__mini-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
  }
  .calendar-schedule__mini-weekday {
    text-align: center;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: 2px 0;
  }
  .calendar-schedule__mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
  }
  .calendar-schedule__mini-day {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    transition: background-color 100ms ease, color 100ms ease;
  }
  .calendar-schedule__mini-day:hover:not(.is-outside) {
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.06));
  }
  .calendar-schedule__mini-day.is-outside {
    color: var(--text-quaternary, var(--text-tertiary));
    opacity: 0.5;
  }
  .calendar-schedule__mini-day.is-today {
    background: var(--bg-primary-solid);
    color: var(--alpha-white-100, #fff);
    font-weight: 600;
  }
  .calendar-schedule__mini-day.is-selected {
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    font-weight: 600;
  }
  .calendar-schedule__mini-day.has-events::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--bg-primary-solid);
  }
  .calendar-schedule__mini-day.is-today.has-events::after {
    background: var(--alpha-white-100, #fff);
  }
  .calendar-schedule--agenda {
    display: flex;
    flex-direction: column;
    background: var(--bg-calendar-schedule, var(--canvas-secondary));
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .calendar-schedule__agenda-group {
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
  }
  .calendar-schedule__agenda-group:last-child {
    border-bottom: 0;
  }
  .calendar-schedule__agenda-day {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary, oklch(0% 0 0 / 0.02));
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    font-size: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .calendar-schedule__agenda-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--bg-primary-subtle);
    border-radius: 0.375rem;
    color: var(--text-primary-solid);
    font-weight: 600;
    font-size: 0.8125rem;
  }
  .calendar-schedule__agenda-day.is-today .calendar-schedule__agenda-date {
    background: var(--bg-primary-solid);
    color: var(--alpha-white-100, #fff);
  }
  .calendar-schedule__agenda-day-name {
    font-weight: 600;
    color: var(--text-primary);
  }
  .calendar-schedule__agenda-day-meta {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    margin-left: auto;
  }
  .calendar-schedule__agenda-items {
    display: flex;
    flex-direction: column;
  }
  .calendar-schedule__agenda-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-divider, var(--border-tertiary));
    cursor: pointer;
    transition: background-color 100ms ease;
  }
  .calendar-schedule__agenda-item:last-child {
    border-bottom: 0;
  }
  .calendar-schedule__agenda-item:hover {
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.02));
  }
  .calendar-schedule__agenda-item-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    min-width: 5rem;
    padding-top: 1px;
  }
  .calendar-schedule__agenda-item-color {
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--bg-primary-solid);
    flex-shrink: 0;
  }
  .calendar-schedule__agenda-item-color.is-success {
    background: var(--bg-success-solid, var(--utility-green-500));
  }
  .calendar-schedule__agenda-item-color.is-warning {
    background: var(--bg-warning-solid, var(--utility-amber-500));
  }
  .calendar-schedule__agenda-item-color.is-danger {
    background: var(--bg-danger-solid, var(--utility-red-500));
  }
  .calendar-schedule__agenda-item-color.is-neutral {
    background: var(--border-secondary);
  }
  .calendar-schedule__agenda-item-body {
    flex: 1;
    min-width: 0;
  }
  .calendar-schedule__agenda-item-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
  }
  .calendar-schedule__agenda-item-meta {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .calendar-schedule__agenda-item-meta-dot {
    opacity: 0.5;
  }
  .calendar-schedule--timeline {
    --_timeline-row-h: 2.5rem;
    --_timeline-label-w: 10rem;
    --_timeline-unit-w: 3rem;
    --_timeline-units: 24;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--bg-calendar-schedule, var(--canvas-secondary));
    overflow: hidden;
  }
  .calendar-schedule__timeline-viewport {
    display: grid;
    grid-template-columns: var(--_timeline-label-w) 1fr;
    overflow: auto;
    max-height: 24rem;
  }
  .calendar-schedule__timeline-header-corner {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 4;
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    height: 2rem;
  }
  .calendar-schedule__timeline-units {
    display: grid;
    grid-template-columns: repeat(var(--_timeline-units), var(--_timeline-unit-w));
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-bottom: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    position: sticky;
    top: 0;
    z-index: 3;
    height: 2rem;
  }
  .calendar-schedule__timeline-unit {
    padding: 0.375rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    text-align: center;
  }
  .calendar-schedule__timeline-label {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    height: var(--_timeline-row-h);
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
    border-bottom: 1px solid var(--border-divider, var(--border-tertiary));
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .calendar-schedule__timeline-label-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    border-radius: 0.25rem;
    font-size: 0.625rem;
    flex-shrink: 0;
  }
  .calendar-schedule__timeline-track {
    position: relative;
    height: var(--_timeline-row-h);
    display: grid;
    grid-template-columns: repeat(var(--_timeline-units), var(--_timeline-unit-w));
    border-bottom: 1px solid var(--border-divider, var(--border-tertiary));
    background-image: linear-gradient( to right, var(--border-divider, oklch(0% 0 0 / 0.06)) 1px, transparent 1px );
    background-size: var(--_timeline-unit-w) 100%;
  }
  .calendar-schedule__timeline-bar {
    position: absolute;
    top: 0.375rem;
    bottom: 0.375rem;
    left: calc(var(--start, 0) * var(--_timeline-unit-w));
    width: calc(var(--span, 1) * var(--_timeline-unit-w) - 4px);
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    border-left: 3px solid var(--bg-primary-solid);
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: transform 100ms ease, box-shadow 100ms ease;
  }
  .calendar-schedule__timeline-bar:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  .calendar-schedule__timeline-bar.is-success {
    background: var(--bg-success-subtle);
    color: var(--text-success);
    border-left-color: var(--bg-success-solid, var(--utility-green-500));
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .calendar-schedule__timeline-bar.is-warning {
    background: var(--bg-warning-subtle);
    color: var(--text-warning);
    border-left-color: var(--bg-warning-solid, var(--utility-amber-500));
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .calendar-schedule__timeline-bar.is-danger {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
    border-left-color: var(--bg-danger-solid, var(--utility-red-500));
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .calendar-schedule__timeline-bar.is-neutral {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-left-color: var(--border-secondary);
  }
  .calendar-schedule__timeline-now {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--now-x, 0) * var(--_timeline-unit-w));
    width: 1px;
    background: var(--text-danger);
    z-index: 1;
    pointer-events: none;
  }
  .calendar-schedule__timeline-now::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -3px;
    width: 7px;
    height: 7px;
    background: var(--text-danger);
    border-radius: 9999px;
  }
  .calendar-schedule--heatmap {
    --_heatmap-cell-size: 0.75rem;
    --_heatmap-gap: 2px;
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-calendar-schedule, var(--canvas-secondary));
    border-radius: 0.5rem;
    border: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
  }
  .calendar-schedule__heatmap-months {
    display: grid;
    grid-template-columns: repeat(53, var(--_heatmap-cell-size));
    gap: var(--_heatmap-gap);
    font-size: 0.625rem;
    color: var(--text-tertiary);
    margin-left: calc(var(--_heatmap-cell-size) + 0.25rem);
  }
  .calendar-schedule__heatmap-month-label {
    grid-column: span var(--week-span, 4);
    font-size: 0.625rem;
    color: var(--text-tertiary);
  }
  .calendar-schedule__heatmap-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem;
  }
  .calendar-schedule__heatmap-weekdays {
    display: grid;
    grid-template-rows: repeat(7, var(--_heatmap-cell-size));
    gap: var(--_heatmap-gap);
    font-size: 0.5625rem;
    color: var(--text-tertiary);
  }
  .calendar-schedule__heatmap-weekday {
    line-height: var(--_heatmap-cell-size);
    padding-right: 0.25rem;
    text-align: right;
  }
  .calendar-schedule__heatmap-grid {
    display: grid;
    grid-template-columns: repeat(53, var(--_heatmap-cell-size));
    grid-template-rows: repeat(7, var(--_heatmap-cell-size));
    grid-auto-flow: column;
    gap: var(--_heatmap-gap);
  }
  .calendar-schedule__heatmap-cell {
    width: var(--_heatmap-cell-size);
    height: var(--_heatmap-cell-size);
    border-radius: 2px;
    background: var(--bg-secondary, oklch(0% 0 0 / 0.04));
    cursor: pointer;
    transition: outline 75ms ease;
  }
  .calendar-schedule__heatmap-cell:hover {
    outline: 1px solid var(--border-focus);
    outline-offset: 1px;
  }
  .calendar-schedule__heatmap-cell[data-level="0"] {
    background: var(--bg-secondary, oklch(0% 0 0 / 0.04));
  }
  .calendar-schedule__heatmap-cell[data-level="1"] {
    background: oklch(from var(--bg-primary-solid) l c h / 0.25);
  }
  .calendar-schedule__heatmap-cell[data-level="2"] {
    background: oklch(from var(--bg-primary-solid) l c h / 0.45);
  }
  .calendar-schedule__heatmap-cell[data-level="3"] {
    background: oklch(from var(--bg-primary-solid) l c h / 0.70);
  }
  .calendar-schedule__heatmap-cell[data-level="4"] {
    background: var(--bg-primary-solid);
  }
  .calendar-schedule__heatmap-legend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
  }
  .calendar-schedule__heatmap-legend-cells {
    display: flex;
    gap: var(--_heatmap-gap);
  }
  .calendar-schedule__lane-list {
    position: sticky;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: var(--bg-calendar-schedule-surface, var(--canvas-secondary));
    border-right: 1px solid var(--border-calendar-schedule, var(--border-tertiary));
  }
  .calendar-schedule__lane-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-divider, var(--border-tertiary));
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .calendar-schedule__lane-label-avatar {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    font-weight: 600;
    font-size: 0.6875rem;
    flex-shrink: 0;
  }
  .calendar-schedule__lane-label-name {
    font-weight: 500;
    color: var(--text-primary);
  }
  .calendar-schedule__lane-label-meta {
    font-size: 0.625rem;
    color: var(--text-tertiary);
  }
  .cal-booking--slot {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
  }
  .cal-booking__slots {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 12rem;
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.25rem;
  }
  .cal-booking__slots-header {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .cal-booking__slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-card, var(--canvas-secondary));
    border: 1px solid var(--border-tertiary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 100ms ease, background-color 100ms ease;
  }
  .cal-booking__slot:hover:not(.is-disabled) {
    border-color: var(--border-focus);
  }
  .cal-booking__slot.is-selected {
    border-color: var(--bg-primary-solid);
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
  }
  .cal-booking__slot.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .cal-booking__slot-time {
    font-variant-numeric: tabular-nums;
  }
  .cal-booking__slot-badge {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    font-weight: 400;
  }
  .cal-booking--range .cal-booking__day.is-range-start, .cal-booking--range .cal-booking__day.is-range-end {
    background: var(--bg-primary-solid);
    color: var(--alpha-white-100, #fff);
    font-weight: 600;
    z-index: 2;
  }
  .cal-booking--range .cal-booking__day.is-in-range {
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    border-radius: 0;
  }
  .cal-booking--range .cal-booking__day.is-range-start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .cal-booking--range .cal-booking__day.is-range-end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .cal-booking--range .cal-booking__day.is-range-start.is-range-end {
    border-radius: 9999px;
  }
  .cal-booking--range .cal-booking__day.is-range-preview {
    background: var(--bg-primary-subtle);
    opacity: 0.6;
  }
  .cal-booking__range-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.03));
    border-radius: 0.375rem;
    font-size: 0.75rem;
  }
  .cal-booking__range-summary-label {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
  }
  .cal-booking__range-summary-value {
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .cal-booking--multi .cal-booking__day.is-selected {
    background: var(--bg-primary-solid);
    color: var(--alpha-white-100, #fff);
  }
  .cal-booking__multi-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
  }
  .cal-booking__multi-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
  }
  .cal-booking__multi-chip-remove {
    cursor: pointer;
    opacity: 0.7;
    border: none;
    background: transparent;
    padding: 0;
    color: inherit;
    display: inline-flex;
  }
  .cal-booking__multi-chip-remove:hover {
    opacity: 1;
  }
  .cal-booking--week .cal-booking__day.is-week-hover, .cal-booking--week .cal-booking__day.is-week-selected {
    background: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    border-radius: 0;
  }
  .cal-booking--week .cal-booking__day.is-week-hover:first-child, .cal-booking--week .cal-booking__day.is-week-selected:first-child {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
  }
  .cal-booking--week .cal-booking__day.is-week-hover:last-child, .cal-booking--week .cal-booking__day.is-week-selected:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
  }
  .cal-booking--month-picker {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-card, var(--canvas-secondary));
    border: 1px solid var(--border-tertiary);
    border-radius: 0.5rem;
    min-width: 16rem;
  }
  .cal-booking__months-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
  }
  .cal-booking__month-cell {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color 100ms ease, color 100ms ease;
  }
  .cal-booking__month-cell:hover {
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.05));
    color: var(--text-primary);
  }
  .cal-booking__month-cell.is-current {
    border-color: var(--border-focus);
    color: var(--text-primary);
  }
  .cal-booking__month-cell.is-selected {
    background: var(--bg-primary-solid);
    color: var(--alpha-white-100, #fff);
  }
  .cal-booking--inline {
    font-size: 0.75rem;
    padding: 0.5rem;
  }
  .cal-booking--inline .cal-booking__day {
    height: 1.5rem;
    width: 1.5rem;
    font-size: 0.6875rem;
  }
  .cal-booking--inline .cal-booking__weekday {
    font-size: 0.5625rem;
  }
  .cal-event-popover {
    position: absolute;
    z-index: var(--z-popover, 1000);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-popover, var(--canvas-secondary));
    border: 1px solid var(--border-popover, var(--border-tertiary));
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    width: 18rem;
    font-size: 0.75rem;
  }
  .cal-event-popover__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .cal-event-popover__color-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: var(--bg-primary-solid);
    flex-shrink: 0;
  }
  .cal-event-popover__title-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
  }
  .cal-event-popover__title-input::placeholder {
    color: var(--text-tertiary);
  }
  .cal-event-popover__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
  }
  .cal-event-popover__row-icon {
    width: 1rem;
    height: 1rem;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cal-event-popover__row-label {
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
  }
  .cal-event-popover__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .cal-event-popover__color {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 100ms ease, transform 100ms ease;
  }
  .cal-event-popover__color:hover {
    transform: scale(1.1);
  }
  .cal-event-popover__color.is-selected {
    border-color: var(--text-primary);
  }
  .cal-event-popover__footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-divider, var(--border-tertiary));
  }
  .cal-drag-ghost {
    position: absolute;
    pointer-events: none;
    background: var(--bg-primary-subtle);
    border: 2px dashed var(--bg-primary-solid);
    border-radius: 0.25rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary-solid);
  }
  .cal-drag-ghost--move {
    background: var(--bg-primary-subtle);
    border-style: solid;
    opacity: 0.7;
  }
  .cal-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-calendar-schedule, var(--canvas-secondary));
    border-bottom: 1px solid var(--border-tertiary);
  }
  .cal-toolbar__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 10rem;
  }
  .cal-toolbar__nav {
    display: flex;
    gap: 0.25rem;
  }
  .cal-toolbar__nav-btn {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color 100ms ease, border-color 100ms ease;
  }
  .cal-toolbar__nav-btn:hover {
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.05));
    border-color: var(--border-tertiary);
  }
  .cal-toolbar__today-btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background: transparent;
    border: 1px solid var(--border-tertiary);
    cursor: pointer;
    color: var(--text-secondary);
    transition: border-color 100ms ease;
  }
  .cal-toolbar__today-btn:hover {
    border-color: var(--border-focus);
    color: var(--text-primary);
  }
  .cal-toolbar__view-switch {
    margin-left: auto;
    display: inline-flex;
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.03));
    border: 1px solid var(--border-tertiary);
    border-radius: 0.375rem;
    padding: 2px;
  }
  .cal-toolbar__view-btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--text-secondary);
    text-transform: capitalize;
    transition: background-color 100ms ease, color 100ms ease;
  }
  .cal-toolbar__view-btn:hover {
    color: var(--text-primary);
  }
  .cal-toolbar__view-btn.is-active {
    background: var(--bg-card, var(--canvas-secondary));
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  .cal-toolbar__action {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    background: var(--bg-primary-solid);
    color: var(--alpha-white-100, #fff);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: opacity 100ms ease;
  }
  .cal-toolbar__action:hover {
    opacity: 0.9;
  }
  .calendar-schedule--soft {
    background: var(--bg-secondary, oklch(0% 0 0 / 0.025));
    border: none;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-xs);
  }
  .calendar-schedule--soft .calendar-schedule__days, .calendar-schedule--soft .calendar-schedule__corner, .calendar-schedule--soft .calendar-schedule__times {
    background: transparent;
  }
  .calendar-schedule--ghost {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .calendar-schedule--ghost .calendar-schedule__days, .calendar-schedule--ghost .calendar-schedule__corner, .calendar-schedule--ghost .calendar-schedule__times {
    background: transparent;
    border-color: transparent;
  }
  .calendar-schedule--ghost .calendar-schedule__day {
    border-bottom: 1px solid var(--border-divider, var(--border-tertiary));
  }
  .calendar-schedule--glass {
    background: oklch(100% 0 0 / 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid oklch(100% 0 0 / 0.40);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
  }
  :is([data-bs-theme="dark"], .dark) .calendar-schedule--glass {
    background: oklch(20% 0.005 250 / 0.55);
    border-color: oklch(100% 0 0 / 0.08);
  }
  .calendar-schedule--glass .calendar-schedule__days, .calendar-schedule--glass .calendar-schedule__corner, .calendar-schedule--glass .calendar-schedule__times, .calendar-schedule--glass .calendar-schedule__topbar {
    background: transparent;
    border-color: oklch(100% 0 0 / 0.18);
  }
  .calendar-schedule--minimal {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .calendar-schedule--minimal .calendar-schedule__days, .calendar-schedule--minimal .calendar-schedule__corner, .calendar-schedule--minimal .calendar-schedule__times, .calendar-schedule--minimal .calendar-schedule__topbar {
    background: transparent;
    border-color: transparent;
  }
  .calendar-schedule--minimal .calendar-schedule__bg {
    background: none;
  }
  .calendar-schedule--card {
    background: var(--bg-card, var(--canvas-secondary));
    border: 1px solid var(--border-card, var(--border-tertiary));
    border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .calendar-schedule--flat {
    background: var(--bg-card, var(--canvas-secondary));
    border: none;
    box-shadow: none;
  }
  .calendar-schedule--gridless .calendar-schedule__bg, .calendar-schedule--gridless .calendar-schedule__cell, .calendar-schedule--gridless .calendar-schedule__cell-time {
    background: transparent !important;
    border-color: transparent !important;
  }
  .calendar-schedule--gridless .calendar-schedule__grid::before {
    display: none;
  }
  .calendar-schedule--grid-dotted .calendar-schedule__bg {
    background-image: linear-gradient( to bottom, var(--border-divider, oklch(0% 0 0 / 0.08)) 1px, transparent 1px );
    background-size: 100% var(--h-calendar-schedule-hour, 64px);
    background-repeat: repeat;
    mask-image: linear-gradient(to right, black 0, black 4px, transparent 4px, transparent 8px);
    -webkit-mask-image: linear-gradient(to right, black 0, black 4px, transparent 4px, transparent 8px);
    mask-size: 8px 100%;
    -webkit-mask-size: 8px 100%;
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
  }
  .calendar-schedule--grid-light .calendar-schedule__bg {
    background-image: linear-gradient( to bottom, oklch(0% 0 0 / 0.04) 1px, transparent 1px );
  }
  .calendar-schedule--grid-hour-only .calendar-schedule__cell {
    border-bottom: 1px solid var(--border-divider, var(--border-tertiary));
  }
  .calendar-schedule--grid-hour-only .calendar-schedule__cell + .calendar-schedule__cell {
    border-left: none;
  }
  .calendar-schedule__event--soft, .calendar-schedule__month-event--soft {
    background: oklch(from currentColor l c h / 0.10) !important;
    border: none !important;
    color: var(--text-primary);
  }
  .calendar-schedule__event--soft.is-primary, .calendar-schedule__event--soft.is-info {
    background: oklch(from var(--bg-primary-solid) l c h / 0.12) !important;
    color: var(--text-primary-solid);
  }
  .calendar-schedule__event--soft.is-success {
    background: oklch(from var(--utility-green-500) l c h / 0.12) !important;
    color: var(--utility-green-700);
  }
  .calendar-schedule__event--soft.is-warning {
    background: oklch(from var(--utility-amber-500) l c h / 0.15) !important;
    color: var(--utility-amber-700);
  }
  .calendar-schedule__event--soft.is-danger {
    background: oklch(from var(--utility-red-500) l c h / 0.12) !important;
    color: var(--utility-red-700);
  }
  .calendar-schedule__event--ghost, .calendar-schedule__month-event--ghost {
    background: transparent !important;
    border: 1px dashed currentColor !important;
    color: var(--text-secondary);
    border-left: 1px dashed currentColor !important;
  }
  .calendar-schedule__event--ghost.is-primary, .calendar-schedule__event--ghost.is-info {
    color: var(--text-primary-solid);
  }
  .calendar-schedule__event--ghost.is-success {
    color: var(--utility-green-600);
  }
  .calendar-schedule__event--ghost.is-warning {
    color: var(--utility-amber-600);
  }
  .calendar-schedule__event--ghost.is-danger {
    color: var(--utility-red-600);
  }
  .calendar-schedule__event--outline, .calendar-schedule__month-event--outline {
    background: transparent !important;
    border: 1.5px solid var(--bg-primary-solid) !important;
    color: var(--bg-primary-solid);
    border-left: 1.5px solid var(--bg-primary-solid) !important;
    font-weight: 600;
  }
  .calendar-schedule__event--outline.is-success {
    border-color: var(--bg-success-solid, var(--utility-green-500)) !important;
    color: var(--utility-green-700);
  }
  .calendar-schedule__event--outline.is-warning {
    border-color: var(--bg-warning-solid, var(--utility-amber-500)) !important;
    color: var(--utility-amber-700);
  }
  .calendar-schedule__event--outline.is-danger {
    border-color: var(--bg-danger-solid, var(--utility-red-500)) !important;
    color: var(--utility-red-700);
  }
  .calendar-schedule__event--pill, .calendar-schedule__month-event--pill {
    border-radius: 9999px !important;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  .calendar-schedule__event--glass {
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    backdrop-filter: blur(8px) saturate(150%);
    background: oklch(from var(--bg-primary-solid) l c h / 0.18) !important;
    border: 1px solid oklch(from var(--bg-primary-solid) l c h / 0.35) !important;
    color: var(--text-primary-solid);
  }
  .calendar-schedule__event--glass.is-success {
    background: oklch(from var(--utility-green-500) l c h / 0.18) !important;
    border-color: oklch(from var(--utility-green-500) l c h / 0.35) !important;
    color: var(--utility-green-800);
  }
  .calendar-schedule__event--glass.is-warning {
    background: oklch(from var(--utility-amber-500) l c h / 0.22) !important;
    border-color: oklch(from var(--utility-amber-500) l c h / 0.40) !important;
    color: var(--utility-amber-800);
  }
  .calendar-schedule__event--glass.is-danger {
    background: oklch(from var(--utility-red-500) l c h / 0.18) !important;
    border-color: oklch(from var(--utility-red-500) l c h / 0.35) !important;
    color: var(--utility-red-800);
  }
  .calendar-schedule__event--elevated {
    box-shadow: var(--shadow-sm);
    border: none !important;
  }
  .calendar-schedule__event--elevated:hover {
    box-shadow: var(--shadow-md);
  }
  .calendar-schedule__event--tinted {
    background: var(--bg-primary-subtle) !important;
    color: var(--text-primary-solid);
    border: none !important;
    border-left: 3px solid var(--bg-primary-solid) !important;
  }
  .calendar-schedule__event--tinted.is-success {
    background: var(--bg-success-subtle) !important;
    color: var(--text-success);
    border-left-color: var(--bg-success-solid) !important;
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .calendar-schedule__event--tinted.is-warning {
    background: var(--bg-warning-subtle) !important;
    color: var(--text-warning);
    border-left-color: var(--bg-warning-solid) !important;
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .calendar-schedule__event--tinted.is-danger {
    background: var(--bg-danger-subtle) !important;
    color: var(--text-danger);
    border-left-color: var(--bg-danger-solid) !important;
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .calendar-schedule__event--striped {
    background-image: repeating-linear-gradient( 45deg, oklch(0% 0 0 / 0.06) 0, oklch(0% 0 0 / 0.06) 6px, transparent 6px, transparent 12px ) !important;
    background-color: var(--bg-secondary, oklch(0% 0 0 / 0.04)) !important;
    color: var(--text-tertiary);
    border: 1px dashed var(--border-secondary) !important;
  }
  .calendar-schedule__event--striped:hover {
    background-color: var(--bg-tertiary, oklch(0% 0 0 / 0.06)) !important;
  }
  .calendar-schedule__month-event--dot {
    background: transparent !important;
    border-left: 0 !important;
    padding-left: 0.875rem;
    position: relative;
  }
  .calendar-schedule__month-event--dot::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--bg-primary-solid);
  }
  .calendar-schedule__month-event--dot.is-success::before {
    background: var(--bg-success-solid, var(--utility-green-500));
  }
  .calendar-schedule__month-event--dot.is-warning::before {
    background: var(--bg-warning-solid, var(--utility-amber-500));
  }
  .calendar-schedule__month-event--dot.is-danger::before {
    background: var(--bg-danger-solid, var(--utility-red-500));
  }
  .cal-booking--soft {
    background: var(--bg-secondary, oklch(0% 0 0 / 0.025));
    border: none;
    box-shadow: none;
  }
  .cal-booking--ghost {
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .cal-booking--ghost .cal-booking__day:hover:not(.is-disabled):not(.is-outside) {
    background: var(--bg-tertiary, oklch(0% 0 0 / 0.05));
  }
  .cal-booking--glass {
    background: oklch(100% 0 0 / 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid oklch(100% 0 0 / 0.40);
    border-radius: 0.625rem;
    box-shadow: var(--shadow-md);
  }
  :is([data-bs-theme="dark"], .dark) .cal-booking--glass {
    background: oklch(20% 0.005 250 / 0.55);
    border-color: oklch(100% 0 0 / 0.08);
  }
  .cal-booking--minimal {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .cal-booking--minimal .cal-booking__header {
    padding-bottom: 0.25rem;
  }
  .cal-booking--card {
    background: var(--bg-card, var(--canvas-secondary));
    border: 1px solid var(--border-card, var(--border-tertiary));
    border-radius: 0.625rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .cal-booking--flat {
    background: var(--bg-card, var(--canvas-secondary));
    border: none;
    box-shadow: none;
  }
  .cal-booking--pill-days .cal-booking__day {
    border-radius: 9999px;
  }
  .cal-booking--square-days .cal-booking__day {
    border-radius: 0;
  }
  .cal-booking--rounded-days .cal-booking__day {
    border-radius: 0.5rem;
  }
  .cal-booking--dotted-outline .cal-booking__day.is-selected {
    background: transparent !important;
    color: var(--text-primary-solid) !important;
    outline: 2px dashed var(--bg-primary-solid);
    outline-offset: -2px;
    font-weight: 600;
  }
  .cal-booking--underline .cal-booking__day.is-selected, .cal-booking--underline .cal-booking__day.is-today {
    background: transparent !important;
    color: var(--text-primary-solid) !important;
    font-weight: 600;
    border-radius: 0;
    position: relative;
  }
  .cal-booking--underline .cal-booking__day.is-selected::after, .cal-booking--underline .cal-booking__day.is-today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 25%;
    right: 25%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
  }
  .cal-booking--tone-success .cal-booking__day.is-selected, .cal-booking--tone-success .cal-booking__day.is-range-start, .cal-booking--tone-success .cal-booking__day.is-range-end {
    background: var(--bg-success-solid, var(--utility-green-500));
    color: var(--alpha-white-100, #fff);
  }
  .cal-booking--tone-success .cal-booking__day.is-in-range, .cal-booking--tone-success .cal-booking__day.is-week-selected {
    background: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .cal-booking--tone-warning .cal-booking__day.is-selected, .cal-booking--tone-warning .cal-booking__day.is-range-start, .cal-booking--tone-warning .cal-booking__day.is-range-end {
    background: var(--bg-warning-solid, var(--utility-amber-500));
    color: var(--alpha-white-100, #fff);
  }
  .cal-booking--tone-warning .cal-booking__day.is-in-range, .cal-booking--tone-warning .cal-booking__day.is-week-selected {
    background: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .cal-booking--tone-danger .cal-booking__day.is-selected, .cal-booking--tone-danger .cal-booking__day.is-range-start, .cal-booking--tone-danger .cal-booking__day.is-range-end {
    background: var(--bg-danger-solid, var(--utility-red-500));
    color: var(--alpha-white-100, #fff);
  }
  .cal-booking--tone-danger .cal-booking__day.is-in-range, .cal-booking--tone-danger .cal-booking__day.is-week-selected {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .cal-booking--tone-violet .cal-booking__day.is-selected, .cal-booking--tone-violet .cal-booking__day.is-range-start, .cal-booking--tone-violet .cal-booking__day.is-range-end {
    background: var(--utility-violet-500);
    color: var(--alpha-white-100, #fff);
  }
  .cal-booking--tone-violet .cal-booking__day.is-in-range, .cal-booking--tone-violet .cal-booking__day.is-week-selected {
    background: oklch(from var(--utility-violet-500) l c h / 0.15);
    color: var(--utility-violet-700);
  }
}
@layer utilities {
  .event-card {
    --evt-pad: 1rem;
    --evt-gap: 0.625rem;
    --evt-bar: 0.1875rem;
    --evt-radius: var(--radius-lg, 0.5rem);
    --evt-title-size: 0.9375rem;
    --evt-meta-size: 0.8125rem;
    --evt-avatar: 1.5rem;
    --evt-avatar-overlap: -0.5rem;
    --evt-accent: var(--bg-brand-solid);
    --evt-accent-soft: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --evt-accent-soft: color-mix(in oklch, var(--evt-accent) 14%, transparent);
    }
    --_ec-bg: var(--bg-primary);
    --_ec-border: var(--border-secondary);
    --_ec-shadow: var(--shadow-xs);
    --_ec-avatar-ring: var(--_ec-bg);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--evt-gap);
    padding: var(--evt-pad);
    padding-inline-start: calc(var(--evt-pad) + var(--evt-bar));
    overflow: hidden;
    background: var(--_ec-bg);
    border: 1px solid var(--_ec-border);
    border-radius: var(--evt-radius);
    box-shadow: var(--_ec-shadow);
    color: var(--text-secondary);
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease), box-shadow var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .event-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--evt-bar);
    background: var(--evt-accent);
  }
  .event-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .event-card__cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: var(--radius-md, 0.375rem);
    background: var(--evt-accent-soft);
    color: var(--evt-accent);
  }
  .event-card__time {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-width: 0;
    font-size: var(--evt-meta-size);
    font-weight: 600;
    color: var(--text-primary);
  }
  .event-card__time-dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--evt-accent);
  }
  .event-card__allday {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
  }
  .event-card__allday::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--evt-accent);
  }
  .event-card__title {
    margin: 0;
    font-size: var(--evt-title-size);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
  }
  .event-card__location {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    min-width: 0;
    font-size: var(--evt-meta-size);
    color: var(--text-tertiary);
  }
  .event-card__location > i, .event-card__location > svg {
    flex: none;
    color: var(--text-quaternary);
  }
  .event-card__location-text {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .event-card__attendees {
    display: flex;
    align-items: center;
  }
  .event-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--evt-avatar);
    height: var(--evt-avatar);
    flex: none;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    box-shadow: 0 0 0 2px var(--_ec-avatar-ring);
    margin-inline-start: var(--evt-avatar-overlap);
  }
  .event-card__avatar:first-child {
    margin-inline-start: 0;
  }
  .event-card__avatar--more {
    background: var(--bg-quaternary);
    color: var(--text-tertiary);
  }
  .event-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .event-card__meta-sep {
    width: 0.1875rem;
    height: 0.1875rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--text-quaternary);
    opacity: 0.7;
  }
  .event-card__badge {
    --_bdg-bg: var(--bg-tertiary);
    --_bdg-text: var(--text-secondary);
    --_bdg-ring: var(--border-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    flex: none;
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full, 9999px);
    background: var(--_bdg-bg);
    color: var(--_bdg-text);
    box-shadow: inset 0 0 0 1px var(--_bdg-ring);
    text-wrap: nowrap;
  }
  .event-card__badge::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: currentColor;
  }
  .event-card__badge--success {
    --_bdg-bg: var(--bg-success-subtle);
    --_bdg-text: var(--text-success);
    --_bdg-ring: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-ring: color-mix(in oklch, var(--text-success) 30%, transparent);
    }
  }
  .event-card__badge--danger {
    --_bdg-bg: var(--bg-danger-subtle);
    --_bdg-text: var(--text-danger);
    --_bdg-ring: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-ring: color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
  }
  .event-card__badge--warning {
    --_bdg-bg: var(--bg-warning-subtle);
    --_bdg-text: var(--text-warning);
    --_bdg-ring: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-ring: color-mix(in oklch, var(--text-warning) 30%, transparent);
    }
  }
  .event-card__badge--info {
    --_bdg-bg: var(--bg-info-subtle);
    --_bdg-text: var(--text-info);
    --_bdg-ring: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-ring: color-mix(in oklch, var(--text-info) 30%, transparent);
    }
  }
  .event-card__badge--brand {
    --_bdg-bg: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-bg: color-mix(in oklch, var(--bg-brand-solid) 12%, transparent);
    }
    --_bdg-text: var(--text-icon-brand);
    --_bdg-ring: var(--border-brand);
  }
  .event-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
  }
  .event-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), border-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .event-card__action:hover {
    background: var(--bg-primary-hover);
    border-color: var(--border-primary-hover);
    color: var(--text-secondary-hover);
  }
  .event-card__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .event-card__action--primary {
    border-color: transparent;
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .event-card__action--primary:hover {
    background: var(--bg-brand-solid-hover);
    border-color: transparent;
    color: var(--text-on-brand);
  }
  .event-card--cat-success {
    --evt-accent: var(--text-success);
  }
  .event-card--cat-danger {
    --evt-accent: var(--text-danger);
  }
  .event-card--cat-warning {
    --evt-accent: var(--text-warning);
  }
  .event-card--cat-info {
    --evt-accent: var(--text-info);
  }
  .event-card--cat-purple {
    --evt-accent: var(--text-purple);
  }
  .event-card--cat-indigo {
    --evt-accent: var(--text-indigo);
  }
  .event-card--cat-pink {
    --evt-accent: var(--text-pink);
  }
  .event-card--cat-mint {
    --evt-accent: var(--text-mint);
  }
  .event-card--outlined {
    --_ec-bg: transparent;
    --_ec-border: var(--border-primary);
    --_ec-shadow: none;
    --_ec-avatar-ring: var(--bg-primary);
  }
  .event-card--soft {
    --_ec-bg: var(--bg-secondary);
    --_ec-border: transparent;
    --_ec-shadow: none;
  }
  .event-card--elevated {
    --_ec-border: var(--border-secondary-subtle);
    --_ec-shadow: var(--shadow-lg);
  }
  .event-card--compact {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-block: 0.625rem;
    --evt-avatar: 1.25rem;
  }
  .event-card--compact .event-card__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .event-card--compact .event-card__location, .event-card--compact .event-card__meta {
    display: none;
  }
  .event-card--compact .event-card__actions {
    margin-top: 0;
  }
  .event-card:hover {
    --_ec-border: var(--border-primary-hover);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
  }
  .event-card:not(a):not([tabindex]):not([data-selectable]):hover {
    transform: none;
  }
  .event-card:focus-visible, .event-card[data-selectable]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .event-card--selected {
    --_ec-border: transparent;
    box-shadow: inset 0 0 0 2px var(--border-brand), var(--shadow-xs);
  }
  .event-card--selected:hover {
    box-shadow: inset 0 0 0 2px var(--border-brand), var(--shadow-lg);
  }
  .event-card--past {
    opacity: 0.6;
  }
  .event-card--cancelled {
    --evt-accent: var(--text-quaternary);
  }
  .event-card--cancelled .event-card__title {
    text-decoration: line-through;
    color: var(--text-quaternary);
  }
  .event-card--cancelled .event-card__time {
    color: var(--text-quaternary);
  }
  .event-card--sm {
    --evt-pad: 0.75rem;
    --evt-gap: 0.5rem;
    --evt-title-size: 0.875rem;
    --evt-meta-size: 0.75rem;
    --evt-avatar: 1.25rem;
  }
  .event-card--md {
    --evt-pad: 1rem;
    --evt-gap: 0.625rem;
    --evt-title-size: 0.9375rem;
    --evt-meta-size: 0.8125rem;
    --evt-avatar: 1.5rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .event-card, .event-card__action {
      transition: none;
    }
    .event-card:hover {
      transform: none;
    }
  }
}
@layer utilities {
  .time-picker {
    --tp-field-h: 2rem;
    --tp-field-pad: 0.625rem;
    --tp-font: 0.875rem;
    --tp-radius: var(--radius-lg, 0.5rem);
    --tp-option-h: 2.25rem;
    --tp-list-max: 16rem;
    --tp-cell-h: 2.25rem;
    --tp-spinner-rows: 5;
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: left;
  }
  .time-picker--ready .time-picker__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .time-picker__field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 8rem;
    height: var(--tp-field-h);
    padding: 0 var(--tp-field-pad);
    font-size: var(--tp-font);
    line-height: 1.25;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 0;
    border-radius: var(--tp-radius);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    cursor: pointer;
    user-select: none;
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .time-picker__field:hover {
    box-shadow: inset 0 0 0 1px var(--border-secondary-alt), var(--shadow-xs);
  }
  .time-picker__field:focus-visible, .time-picker.is-open .time-picker__field {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .time-picker__icon {
    flex: none;
    color: var(--text-tertiary);
    font-size: 0.875em;
  }
  .time-picker__chevron {
    flex: none;
    margin-left: auto;
    color: var(--text-quaternary);
    font-size: 0.75em;
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .time-picker.is-open .time-picker__chevron {
    transform: rotate(180deg);
  }
  .time-picker__value {
    flex: 1 1 auto;
    min-width: 0;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }
  .time-picker__placeholder {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-placeholder);
  }
  .time-picker__value:empty, .time-picker__placeholder:empty {
    display: none;
  }
  .time-picker--invalid .time-picker__field {
    box-shadow: inset 0 0 0 1px var(--border-danger), var(--shadow-xs);
  }
  .time-picker--invalid .time-picker__field:hover {
    box-shadow: inset 0 0 0 1px var(--border-danger), var(--shadow-xs);
  }
  .time-picker--invalid .time-picker__field:focus-visible, .time-picker--invalid.is-open .time-picker__field {
    box-shadow: inset 0 0 0 2px var(--border-danger), var(--shadow-xs);
  }
  .time-picker--disabled {
    pointer-events: none;
  }
  .time-picker--disabled .time-picker__field {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    cursor: not-allowed;
  }
  .time-picker--disabled .time-picker__value {
    color: var(--text-disabled);
  }
  .time-picker__popover {
    position: absolute;
    left: 0;
    top: calc(100% + 0.25rem);
    min-width: 100%;
    z-index: var(--z-popover, 60);
    display: none;
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-lg);
  }
  .time-picker.is-open .time-picker__popover {
    display: block;
    animation: time-picker-pop-in var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  @keyframes time-picker-pop-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .time-picker--inline .time-picker__popover {
    position: static;
    display: block;
    margin-top: 0.5rem;
    animation: none;
  }
  .time-picker__list {
    max-height: var(--tp-list-max);
    overflow-y: auto;
    padding: 0.25rem;
    scrollbar-width: thin;
  }
  .time-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: var(--tp-option-h);
    padding: 0 0.625rem;
    border-radius: var(--radius-md, 0.375rem);
    font-size: var(--tp-font);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .time-picker__option:hover, .time-picker__option--active {
    background: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .time-picker__option--active {
    box-shadow: inset 0 0 0 1px var(--border-focus);
  }
  .time-picker__option--selected {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-weight: 500;
  }
  .time-picker__option--selected:hover, .time-picker__option--selected.time-picker__option--active {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .time-picker__option--disabled {
    color: var(--text-disabled);
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
  }
  .time-picker__spinner-head {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem 0;
  }
  .time-picker__column-label {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
  }
  .time-picker__spinner {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    height: calc(var(--tp-cell-h) * var(--tp-spinner-rows));
  }
  .time-picker__spinner::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    top: 50%;
    height: var(--tp-cell-h);
    transform: translateY(-50%);
    border-radius: var(--radius-md, 0.375rem);
    background: var(--bg-secondary);
    pointer-events: none;
    z-index: 0;
  }
  .time-picker__spinner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient( var(--bg-primary), transparent 26%, transparent 74%, var(--bg-primary) );
  }
  .time-picker__column {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    scroll-snap-type: y mandatory;
    padding-block: calc(var(--tp-cell-h) * ((var(--tp-spinner-rows) - 1) / 2));
    text-align: center;
  }
  .time-picker__column::-webkit-scrollbar {
    display: none;
  }
  .time-picker__column:focus-visible {
    outline: none;
  }
  .time-picker__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--tp-cell-h);
    scroll-snap-align: center;
    border-radius: var(--radius-md, 0.375rem);
    font-size: var(--tp-font);
    font-variant-numeric: tabular-nums;
    color: var(--text-quaternary);
    cursor: pointer;
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .time-picker__cell:hover {
    color: var(--text-secondary);
  }
  .time-picker__cell--selected {
    color: var(--text-primary);
    font-weight: 600;
  }
  .time-picker__cell--active {
    box-shadow: inset 0 0 0 1px var(--border-focus);
  }
  .time-picker__cell--disabled {
    color: var(--text-disabled);
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
  }
  .time-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
    border-top: 1px solid var(--border-secondary);
  }
  .time-picker__action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .time-picker__action:hover {
    background: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .time-picker__action--primary {
    color: var(--text-on-brand);
    background: var(--bg-brand-solid);
  }
  .time-picker__action--primary:hover {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
  }
  .time-picker__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .time-picker--sm {
    --tp-field-h: 1.75rem;
    --tp-field-pad: 0.5rem;
    --tp-font: 0.8125rem;
    --tp-option-h: 2rem;
    --tp-cell-h: 2rem;
  }
  .time-picker--lg {
    --tp-field-h: 2.5rem;
    --tp-field-pad: 0.75rem;
    --tp-font: 1rem;
    --tp-option-h: 2.5rem;
    --tp-cell-h: 2.5rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .time-picker__field, .time-picker__chevron, .time-picker__option, .time-picker__cell, .time-picker__action {
      transition: none;
    }
    .time-picker.is-open .time-picker__popover {
      animation: none;
    }
    .time-picker__column {
      scroll-behavior: auto;
    }
  }
}
@layer utilities {
  .recurrence-picker {
    --rp-gap: 1rem;
    --rp-row-gap: 0.5rem;
    --rp-control-h: 2.5rem;
    --rp-day-size: 2.25rem;
    --rp-radius: var(--radius-md, 0.375rem);
    --rp-font: 0.875rem;
    --rp-label-font: 0.8125rem;
    display: flex;
    flex-direction: column;
    gap: var(--rp-gap);
    font-size: var(--rp-font);
    color: var(--text-secondary);
  }
  .recurrence-picker__field {
    display: flex;
    flex-direction: column;
    gap: var(--rp-row-gap);
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }
  .recurrence-picker__label, .recurrence-picker__legend {
    display: block;
    padding: 0;
    font-size: var(--rp-label-font);
    font-weight: 600;
    color: var(--text-secondary);
  }
  .recurrence-picker__unit, .recurrence-picker__inline-text {
    font-size: var(--rp-font);
    color: var(--text-tertiary);
    text-wrap: nowrap;
  }
  .recurrence-picker__section {
    display: none;
    flex-direction: column;
    gap: var(--rp-row-gap);
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }
  .recurrence-picker__section[hidden] {
    display: none;
  }
  .recurrence-picker:has(.recurrence-picker__freq-input:checked:not([value="NONE"])) :is( .recurrence-picker__section--interval, .recurrence-picker__section--ends ) {
    display: flex;
  }
  .recurrence-picker:has(.recurrence-picker__freq-input[value="WEEKLY"]:checked) .recurrence-picker__section--weekly {
    display: flex;
  }
  .recurrence-picker:has(.recurrence-picker__freq-input[value="MONTHLY"]:checked) .recurrence-picker__section--monthly {
    display: flex;
  }
  .recurrence-picker__freq {
    gap: var(--rp-row-gap);
  }
  .recurrence-picker__segments {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.5rem);
  }
  .recurrence-picker__freq-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .recurrence-picker__freq-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    text-wrap: nowrap;
    border: 0;
  }
  .recurrence-picker__freq-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 3.5rem;
    height: 2rem;
    padding-inline: 0.75rem;
    border-radius: var(--rp-radius);
    font-size: var(--rp-font);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .recurrence-picker__freq-option:hover .recurrence-picker__freq-text {
    background: var(--bg-primary-hover);
    color: var(--text-secondary-hover);
  }
  .recurrence-picker__freq-input:checked + .recurrence-picker__freq-text {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-xs);
  }
  .recurrence-picker__freq-option:hover .recurrence-picker__freq-input:checked + .recurrence-picker__freq-text {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
  }
  .recurrence-picker__freq-option:has(.recurrence-picker__freq-input:focus-visible) .recurrence-picker__freq-text {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .recurrence-picker__number, .recurrence-picker__date, .recurrence-picker__count, .recurrence-picker__select {
    height: var(--rp-control-h);
    padding-inline: 0.75rem;
    font-size: var(--rp-font);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--rp-radius);
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease), box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .recurrence-picker__number {
    inline-size: 3.5rem;
    text-align: center;
    padding-inline: 0.5rem;
  }
  .recurrence-picker__count {
    inline-size: 4.5rem;
  }
  .recurrence-picker__select {
    padding-inline-end: 2rem;
    cursor: pointer;
  }
  .recurrence-picker__number::placeholder, .recurrence-picker__date::placeholder, .recurrence-picker__count::placeholder {
    color: var(--text-placeholder);
  }
  .recurrence-picker__number:hover, .recurrence-picker__date:hover, .recurrence-picker__count:hover, .recurrence-picker__select:hover {
    border-color: var(--border-primary-hover);
  }
  .recurrence-picker__number:focus-visible, .recurrence-picker__date:focus-visible, .recurrence-picker__count:focus-visible, .recurrence-picker__select:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-color: var(--border-focus);
  }
  .recurrence-picker__number:disabled, .recurrence-picker__date:disabled, .recurrence-picker__count:disabled, .recurrence-picker__select:disabled {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    cursor: not-allowed;
  }
  .recurrence-picker__interval {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .recurrence-picker__stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-primary);
    border-radius: var(--rp-radius);
    background: var(--bg-primary);
    overflow: hidden;
  }
  .recurrence-picker__stepper:focus-within {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-color: var(--border-focus);
  }
  .recurrence-picker__stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    height: var(--rp-control-h);
    flex: none;
    color: var(--text-tertiary);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .recurrence-picker__stepper-btn:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .recurrence-picker__stepper-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .recurrence-picker__stepper-btn:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
    background: transparent;
  }
  .recurrence-picker__stepper .recurrence-picker__number {
    height: auto;
    border: 0;
    border-inline: 1px solid var(--border-secondary);
    border-radius: 0;
    background: transparent;
  }
  .recurrence-picker__stepper .recurrence-picker__number:focus-visible {
    outline: 0;
    border-inline-color: var(--border-secondary);
  }
  .recurrence-picker__days {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .recurrence-picker__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--rp-day-size);
    height: var(--rp-day-size);
    flex: none;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--rp-font);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease), border-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .recurrence-picker__day:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary-hover);
    border-color: var(--border-primary-hover);
  }
  .recurrence-picker__day[aria-pressed="true"] {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    border-color: var(--border-brand);
  }
  .recurrence-picker__day[aria-pressed="true"]:hover {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
  }
  .recurrence-picker__day:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 1;
  }
  .recurrence-picker__day:disabled {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    cursor: not-allowed;
  }
  .recurrence-picker__radio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--rp-font);
    color: var(--text-secondary);
    cursor: pointer;
  }
  .recurrence-picker__radio-input {
    inline-size: 1rem;
    height: 1rem;
    flex: none;
    margin: 0;
    accent-color: var(--bg-brand-solid);
    cursor: pointer;
  }
  .recurrence-picker__radio-input:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .recurrence-picker__radio:has(.recurrence-picker__radio-input:disabled), .recurrence-picker__radio.is-disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
  }
  .recurrence-picker--card {
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-xs);
  }
  .recurrence-picker--bordered {
    padding: 0.875rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.75rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .recurrence-picker__freq-text, .recurrence-picker__number, .recurrence-picker__date, .recurrence-picker__count, .recurrence-picker__select, .recurrence-picker__stepper-btn, .recurrence-picker__day {
      transition: none;
    }
  }
}
@layer utilities {
  .recurrence-summary {
    --rs-gap: 0.625rem;
    --rs-chip-gap: 0.375rem;
    --rs-radius: var(--radius-md, 0.375rem);
    --rs-font: 0.875rem;
    --rs-chip-font: 0.8125rem;
    --_rs-accent: var(--text-tertiary);
    --_rs-marker: var(--bg-brand-solid);
    display: flex;
    flex-direction: column;
    gap: var(--rs-gap);
    font-size: var(--rs-font);
    color: var(--text-secondary);
  }
  .recurrence-summary__text {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.4;
  }
  .recurrence-summary__text:empty {
    display: none;
  }
  .recurrence-summary__icon {
    flex: none;
    align-self: center;
    color: var(--_rs-marker);
  }
  .recurrence-summary__strong {
    font-weight: 600;
    color: var(--text-secondary-hover);
  }
  .recurrence-summary__muted {
    color: var(--text-tertiary);
  }
  .recurrence-summary__label {
    font-size: var(--rs-chip-font);
    font-weight: 600;
    color: var(--_rs-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .recurrence-summary__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rs-chip-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .recurrence-summary__list:empty {
    display: none;
  }
  .recurrence-summary__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--rs-chip-font);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-full, 9999px);
    text-wrap: nowrap;
  }
  .recurrence-summary__chip::before {
    content: "";
    inline-size: 0.375rem;
    height: 0.375rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--_rs-marker);
  }
  .recurrence-summary__chip--next {
    color: var(--text-primary);
    border-color: var(--border-secondary-alt);
  }
  .recurrence-summary__list--rows {
    flex-direction: column;
    gap: 0;
  }
  .recurrence-summary__list--rows .recurrence-summary__chip {
    inline-size: 100%;
    justify-content: space-between;
    padding: 0.5rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border-secondary);
  }
  .recurrence-summary__list--rows .recurrence-summary__chip::before {
    display: none;
  }
  .recurrence-summary__list--rows .recurrence-summary__chip:last-child {
    border-bottom: 0;
  }
  .recurrence-summary__chip-day {
    color: var(--text-tertiary);
  }
  .recurrence-summary--card {
    padding: 0.875rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-xs);
  }
  .recurrence-summary--bordered {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.75rem);
  }
  .recurrence-summary--info {
    --_rs-accent: var(--text-info);
    --_rs-marker: var(--bg-info);
  }
  .recurrence-summary--success {
    --_rs-accent: var(--text-success);
    --_rs-marker: var(--bg-success);
  }
  .recurrence-summary--warning {
    --_rs-accent: var(--text-warning);
    --_rs-marker: var(--bg-warning);
  }
  .recurrence-summary--danger {
    --_rs-accent: var(--text-danger);
    --_rs-marker: var(--bg-danger);
  }
  .recurrence-summary--info.recurrence-summary--card {
    background: var(--bg-info-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-info-subtle) 45%, var(--bg-primary));
    }
    border-color: var(--border-info-subtle);
  }
  .recurrence-summary--success.recurrence-summary--card {
    background: var(--bg-success-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-success-subtle) 45%, var(--bg-primary));
    }
    border-color: var(--border-success-subtle);
  }
  .recurrence-summary--warning.recurrence-summary--card {
    background: var(--bg-warning-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-warning-subtle) 45%, var(--bg-primary));
    }
    border-color: var(--border-warning-subtle);
  }
  .recurrence-summary--danger.recurrence-summary--card {
    background: var(--bg-danger-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-danger-subtle) 45%, var(--bg-primary));
    }
    border-color: var(--border-danger-subtle);
  }
}
@layer utilities {
  .availability-grid {
    --_ag-cols: var(--ag-cols, 7);
    --_ag-gutter: var(--ag-gutter, 4rem);
    --_ag-slot-h: var(--ag-slot-h, 1.75rem);
    --_ag-col-min: var(--ag-col-min, 2.5rem);
    --_ag-line: 1px;
    --evt-accent: var(--bg-brand-solid);
    display: grid;
    grid-template-columns: var(--_ag-gutter) repeat(var(--_ag-cols), minmax(var(--_ag-col-min), 1fr));
    gap: var(--_ag-line);
    background: var(--border-secondary);
    border: var(--_ag-line) solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.5rem);
    overflow: hidden;
    user-select: none;
    color: var(--text-secondary);
  }
  .availability-grid__row {
    display: contents;
  }
  .availability-grid__corner {
    background: var(--bg-secondary);
  }
  .availability-grid__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.0625rem;
    padding: 0.375rem 0.25rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
  }
  .availability-grid__day-sub {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-quaternary);
  }
  .availability-grid__time {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: var(--_ag-slot-h);
    padding: 0.0625rem 0.5rem;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    transform: translateY(-0.4em);
    text-wrap: nowrap;
  }
  .availability-grid__cell {
    position: relative;
    min-height: var(--_ag-slot-h);
    background: var(--bg-primary);
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .availability-grid[data-availability-grid] .availability-grid__cell {
    cursor: pointer;
    touch-action: none;
  }
  .availability-grid__cell--available {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 20%, var(--bg-primary));
    }
  }
  .availability-grid__cell--blocked {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
    cursor: not-allowed;
  }
  .availability-grid__cell--blocked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( -45deg, transparent 0, transparent 5px, var(--border-danger) 5px, var(--border-danger) 6px );
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-linear-gradient( -45deg, transparent 0, transparent 5px, color-mix(in oklch, var(--border-danger) 40%, transparent) 5px, color-mix(in oklch, var(--border-danger) 40%, transparent) 6px );
    }
    pointer-events: none;
  }
  .availability-grid[data-availability-grid] .availability-grid__cell:not(.availability-grid__cell--blocked):hover {
    background: var(--bg-primary-hover);
  }
  .availability-grid[data-availability-grid] .availability-grid__cell--available:hover {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 32%, var(--bg-primary));
    }
  }
  .availability-grid__cell--selected {
    box-shadow: inset 0 0 0 2px var(--border-brand);
    z-index: 1;
  }
  .availability-grid__cell:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    z-index: 2;
  }
  .availability-grid[data-readonly] .availability-grid__cell, .availability-grid__cell--disabled {
    cursor: default;
  }
  .availability-grid--heat .availability-grid__cell {
    cursor: default;
  }
  .availability-grid--heat .availability-grid__cell[data-count="1"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 15%, var(--bg-primary));
    }
  }
  .availability-grid--heat .availability-grid__cell[data-count="2"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 30%, var(--bg-primary));
    }
  }
  .availability-grid--heat .availability-grid__cell[data-count="3"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 45%, var(--bg-primary));
    }
  }
  .availability-grid--heat .availability-grid__cell[data-count="4"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 60%, var(--bg-primary));
    }
  }
  .availability-grid--heat .availability-grid__cell[data-count="5"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 75%, var(--bg-primary));
    }
  }
  .availability-grid__legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .availability-grid__legend-scale {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
  }
  .availability-grid__swatch {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-xs, 0.125rem);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .availability-grid__swatch[data-count="1"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 15%, var(--bg-primary));
    }
  }
  .availability-grid__swatch[data-count="2"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 30%, var(--bg-primary));
    }
  }
  .availability-grid__swatch[data-count="3"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 45%, var(--bg-primary));
    }
  }
  .availability-grid__swatch[data-count="4"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 60%, var(--bg-primary));
    }
  }
  .availability-grid__swatch[data-count="5"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 75%, var(--bg-primary));
    }
  }
  .availability-grid--times-across {
    --_ag-col-min: 3rem;
    --_ag-gutter: var(--ag-gutter, 5rem);
  }
  .availability-grid--sm {
    --_ag-slot-h: var(--ag-slot-h, 1.375rem);
    --_ag-gutter: var(--ag-gutter, 3.25rem);
    --_ag-col-min: var(--ag-col-min, 2rem);
  }
  .availability-grid--sm .availability-grid__day {
    font-size: 0.6875rem;
    padding: 0.25rem 0.1875rem;
  }
  .availability-grid--sm .availability-grid__time {
    font-size: 0.625rem;
  }
  .availability-grid--sticky {
    max-height: var(--ag-max-h, 26rem);
    overflow: auto;
    scrollbar-width: thin;
  }
  .availability-grid--sticky .availability-grid__day {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .availability-grid--sticky .availability-grid__time {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .availability-grid--sticky .availability-grid__corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
  }
  @media (prefers-reduced-motion: reduce) {
    .availability-grid__cell {
      transition: none;
    }
  }
}
@layer utilities {
  .duration-picker {
    --dp-chip-h: 2rem;
    --dp-chip-pad: 0.75rem;
    --dp-font: 0.875rem;
    --dp-gap: 0.5rem;
    --dp-radius: var(--radius-full, 9999px);
    --dp-field-radius: var(--radius-md, 0.375rem);
    --dp-step-size: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--text-primary);
  }
  .duration-picker__presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dp-gap);
  }
  .duration-picker__preset {
    position: relative;
    display: inline-flex;
    margin: 0;
  }
  .duration-picker__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .duration-picker__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: var(--dp-chip-h);
    padding: 0 var(--dp-chip-pad);
    font-size: var(--dp-font);
    font-weight: 500;
    line-height: 1;
    text-wrap: nowrap;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border-radius: var(--dp-radius);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    cursor: pointer;
    user-select: none;
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease), background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .duration-picker__radio:not(:checked):not(:disabled) + .duration-picker__chip:hover {
    color: var(--text-primary);
    background: var(--bg-primary-hover);
    box-shadow: inset 0 0 0 1px var(--border-secondary-alt), var(--shadow-xs);
  }
  .duration-picker__radio:focus-visible + .duration-picker__chip {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .duration-picker__radio:checked + .duration-picker__chip {
    color: var(--text-on-brand);
    background: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid), var(--shadow-xs);
    font-weight: 600;
  }
  .duration-picker__radio:checked:not(:disabled) + .duration-picker__chip:hover {
    background: var(--bg-brand-solid-hover);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid-hover), var(--shadow-xs);
  }
  .duration-picker__radio:disabled + .duration-picker__chip {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    cursor: not-allowed;
  }
  .duration-picker__custom {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .duration-picker:has(.duration-picker__radio--custom:checked) .duration-picker__custom {
    display: flex;
  }
  .duration-picker__field {
    height: var(--dp-chip-h);
    padding: 0 0.625rem;
    font-size: var(--dp-font);
    line-height: 1.25;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 0;
    border-radius: var(--dp-field-radius);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .duration-picker__field:hover {
    box-shadow: inset 0 0 0 1px var(--border-secondary-alt), var(--shadow-xs);
  }
  .duration-picker__field:focus-visible, .duration-picker__field:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .duration-picker__number {
    width: 5rem;
    font-variant-numeric: tabular-nums;
  }
  .duration-picker__unit {
    min-width: 5.5rem;
    cursor: pointer;
  }
  .duration-picker__readout {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: var(--dp-font);
    color: var(--text-tertiary);
  }
  .duration-picker__readout-label {
    color: var(--text-tertiary);
  }
  .duration-picker__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }
  .duration-picker__value > [data-dp-for] {
    display: none;
  }
  .duration-picker:has(.duration-picker__radio[value="15"]:checked) .duration-picker__value > [data-dp-for="15"], .duration-picker:has(.duration-picker__radio[value="30"]:checked) .duration-picker__value > [data-dp-for="30"], .duration-picker:has(.duration-picker__radio[value="45"]:checked) .duration-picker__value > [data-dp-for="45"], .duration-picker:has(.duration-picker__radio[value="60"]:checked) .duration-picker__value > [data-dp-for="60"], .duration-picker:has(.duration-picker__radio[value="120"]:checked) .duration-picker__value > [data-dp-for="120"], .duration-picker:has(.duration-picker__radio[value="240"]:checked) .duration-picker__value > [data-dp-for="240"], .duration-picker:has(.duration-picker__radio--custom:checked) .duration-picker__value > [data-dp-for="custom"] {
    display: inline;
  }
  .duration-picker__stepper {
    display: inline-flex;
    align-items: stretch;
    width: fit-content;
    overflow: hidden;
    background: var(--bg-primary);
    border-radius: var(--dp-field-radius);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .duration-picker__stepper:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .duration-picker__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dp-step-size);
    height: var(--dp-step-size);
    flex: none;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .duration-picker__step:hover {
    color: var(--text-primary);
    background: var(--bg-primary-hover);
  }
  .duration-picker__step:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .duration-picker__step:disabled {
    color: var(--text-disabled);
    background: transparent;
    cursor: not-allowed;
  }
  .duration-picker__stepper-field {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    min-width: 5rem;
    padding: 0 0.5rem;
    box-shadow: inset 1px 0 0 var(--border-secondary), inset -1px 0 0 var(--border-secondary);
  }
  .duration-picker--stepper .duration-picker__number {
    width: 3rem;
    height: 100%;
    padding: 0;
    text-align: center;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    font-size: var(--dp-font);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .duration-picker--stepper .duration-picker__number:focus {
    outline: none;
  }
  .duration-picker__stepper-unit {
    align-self: center;
    font-size: var(--dp-font);
    color: var(--text-tertiary);
  }
  .duration-picker--inline {
    gap: 0;
  }
  .duration-picker--inline .duration-picker__readout, .duration-picker--inline .duration-picker__custom {
    display: none;
  }
  .duration-picker--sm {
    --dp-chip-h: 1.75rem;
    --dp-chip-pad: 0.625rem;
    --dp-font: 0.8125rem;
    --dp-gap: 0.375rem;
    --dp-step-size: 2rem;
  }
  .duration-picker--md {
    --dp-chip-h: 2rem;
    --dp-chip-pad: 0.75rem;
    --dp-font: 0.875rem;
    --dp-gap: 0.5rem;
    --dp-step-size: 2.25rem;
  }
  .duration-picker--disabled {
    pointer-events: none;
  }
  .duration-picker--disabled .duration-picker__chip, .duration-picker--disabled .duration-picker__field, .duration-picker--disabled .duration-picker__stepper {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    cursor: not-allowed;
  }
  .duration-picker--disabled .duration-picker__value, .duration-picker--disabled .duration-picker__number, .duration-picker--disabled .duration-picker__step, .duration-picker--disabled .duration-picker__stepper-unit {
    color: var(--text-disabled);
  }
  @media (prefers-reduced-motion: reduce) {
    .duration-picker__chip, .duration-picker__field, .duration-picker__stepper, .duration-picker__step {
      transition: none;
    }
  }
}
@layer utilities {
  .timezone-picker {
    --tz-field-h: 2.25rem;
    --tz-field-pad: 0.625rem;
    --tz-font: 0.875rem;
    --tz-radius: var(--radius-lg, 0.5rem);
    --tz-option-h: 2.5rem;
    --tz-list-max: 18rem;
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: left;
  }
  .timezone-picker--ready .timezone-picker__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .timezone-picker__field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 10rem;
    height: var(--tz-field-h);
    padding: 0 var(--tz-field-pad);
    font-size: var(--tz-font);
    line-height: 1.25;
    color: var(--text-primary);
    background: var(--bg-input, var(--bg-primary));
    border: 0;
    border-radius: var(--tz-radius);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    cursor: pointer;
    user-select: none;
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .timezone-picker__field:hover {
    box-shadow: inset 0 0 0 1px var(--border-secondary-alt), var(--shadow-xs);
  }
  .timezone-picker__field:focus-visible, .timezone-picker.is-open .timezone-picker__field {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .timezone-picker__icon {
    flex: none;
    color: var(--text-icon-brand);
    font-size: 0.875em;
  }
  .timezone-picker__chevron {
    flex: none;
    color: var(--text-quaternary);
    font-size: 0.75em;
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .timezone-picker.is-open .timezone-picker__chevron {
    transform: rotate(180deg);
  }
  .timezone-picker__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    color: var(--text-primary);
  }
  .timezone-picker__placeholder {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    color: var(--text-placeholder);
  }
  .timezone-picker__label:empty, .timezone-picker__placeholder:empty {
    display: none;
  }
  .timezone-picker__offset {
    flex: none;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-xs, 0.25rem);
    font-size: 0.75em;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
  }
  .timezone-picker__offset:empty {
    display: none;
  }
  .timezone-picker--invalid .timezone-picker__field {
    box-shadow: inset 0 0 0 1px var(--border-danger), var(--shadow-xs);
  }
  .timezone-picker--invalid .timezone-picker__field:hover {
    box-shadow: inset 0 0 0 1px var(--border-danger), var(--shadow-xs);
  }
  .timezone-picker--invalid .timezone-picker__field:focus-visible, .timezone-picker--invalid.is-open .timezone-picker__field {
    box-shadow: inset 0 0 0 2px var(--border-danger), var(--shadow-xs);
  }
  .timezone-picker--disabled {
    pointer-events: none;
  }
  .timezone-picker--disabled .timezone-picker__field {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    cursor: not-allowed;
  }
  .timezone-picker--disabled .timezone-picker__label, .timezone-picker--disabled .timezone-picker__offset {
    color: var(--text-disabled);
  }
  .timezone-picker__popover {
    position: absolute;
    left: 0;
    top: calc(100% + 0.25rem);
    min-width: 100%;
    z-index: var(--z-popover, 60);
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-lg);
  }
  .timezone-picker.is-open .timezone-picker__popover {
    display: flex;
    animation: timezone-picker-pop-in var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  @keyframes timezone-picker-pop-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .timezone-picker--inline .timezone-picker__popover {
    position: static;
    display: flex;
    margin-top: 0.5rem;
    animation: none;
  }
  .timezone-picker__search-wrap {
    position: relative;
    flex: none;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .timezone-picker__search-icon {
    position: absolute;
    top: 50%;
    left: 1.125rem;
    transform: translateY(-50%);
    color: var(--text-quaternary);
    font-size: 0.8125rem;
    pointer-events: none;
  }
  .timezone-picker__search {
    width: 100%;
    height: 2rem;
    padding: 0 0.625rem 0 2rem;
    font-size: var(--tz-font);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .timezone-picker__search::placeholder {
    color: var(--text-placeholder);
  }
  .timezone-picker__search:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .timezone-picker__listbox {
    flex: 1 1 auto;
    max-height: var(--tz-list-max);
    overflow-y: auto;
    padding: 0.25rem;
    scrollbar-width: thin;
  }
  .timezone-picker__group + .timezone-picker__group {
    margin-top: 0.125rem;
  }
  .timezone-picker__group-label {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.375rem 0.625rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
    background: var(--bg-primary);
  }
  .timezone-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: var(--tz-option-h);
    padding: 0 0.625rem;
    border-radius: var(--radius-md, 0.375rem);
    font-size: var(--tz-font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .timezone-picker__option-city {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .timezone-picker__option-offset {
    flex: none;
    font-size: 0.8125em;
    font-variant-numeric: tabular-nums;
    color: var(--text-quaternary);
  }
  .timezone-picker__option:hover, .timezone-picker__option--active {
    background: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .timezone-picker__option:hover .timezone-picker__option-offset, .timezone-picker__option--active .timezone-picker__option-offset {
    color: var(--text-tertiary);
  }
  .timezone-picker__option--active {
    box-shadow: inset 0 0 0 1px var(--border-focus);
  }
  .timezone-picker__option--selected {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-weight: 500;
  }
  .timezone-picker__option--selected .timezone-picker__option-offset {
    color: var(--text-on-brand);
  }
  .timezone-picker__option--selected:hover, .timezone-picker__option--selected.timezone-picker__option--active {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .timezone-picker__option--selected:hover .timezone-picker__option-offset, .timezone-picker__option--selected.timezone-picker__option--active .timezone-picker__option-offset {
    color: var(--text-on-brand);
  }
  .timezone-picker__option[hidden], .timezone-picker__group[hidden] {
    display: none;
  }
  .timezone-picker__empty {
    display: none;
    padding: 1.25rem 0.75rem;
    text-align: center;
    font-size: var(--tz-font);
    color: var(--text-tertiary);
  }
  .timezone-picker__listbox--empty .timezone-picker__empty {
    display: block;
  }
  .timezone-picker__preview {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-secondary);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .timezone-picker__preview-icon {
    color: var(--text-quaternary);
    font-size: 0.8125rem;
  }
  .timezone-picker__preview-time {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--text-primary);
  }
  .timezone-picker--sm {
    --tz-field-h: 2rem;
    --tz-field-pad: 0.5rem;
    --tz-font: 0.8125rem;
    --tz-option-h: 2.25rem;
  }
  .timezone-picker--md {
    --tz-field-h: 2.25rem;
    --tz-field-pad: 0.625rem;
    --tz-font: 0.875rem;
    --tz-option-h: 2.5rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .timezone-picker__field, .timezone-picker__chevron, .timezone-picker__search, .timezone-picker__option {
      transition: none;
    }
    .timezone-picker.is-open .timezone-picker__popover {
      animation: none;
    }
  }
}
@layer utilities {
  .time-range-picker {
    --trp-h: 2rem;
    --trp-gap: 0.625rem;
    --trp-font: 0.8125rem;
    --trp-sep: 0.875rem;
    --trp-radius: var(--radius-md, 0.375rem);
    display: inline-flex;
    align-items: center;
    gap: var(--trp-gap);
  }
  .time-range-picker__field {
    flex: 1 1 0;
    min-width: 7rem;
  }
  .time-range-picker__sep {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
    font-size: var(--trp-sep);
    line-height: 1;
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .time-range-picker__duration {
    display: none;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    height: var(--trp-h);
    padding: 0 0.625rem;
    font-size: var(--trp-font);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: var(--trp-radius);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease), background-color var(--duration-fast, 150ms) var(--ease-out, ease), box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .time-range-picker__duration > i {
    flex: none;
    color: var(--text-tertiary);
    font-size: 0.875em;
  }
  .time-range-picker--with-duration .time-range-picker__duration {
    display: inline-flex;
  }
  .time-range-picker--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .time-range-picker--stacked .time-range-picker__field {
    flex: none;
    width: 100%;
  }
  .time-range-picker--stacked .time-range-picker__sep {
    align-self: center;
    transform: rotate(90deg);
  }
  .time-range-picker--stacked .time-range-picker__duration {
    align-self: flex-start;
  }
  .time-range-picker--invalid .time-range-picker__duration {
    color: var(--text-danger);
    background: var(--bg-danger-subtle);
    box-shadow: inset 0 0 0 1px var(--border-danger-subtle);
  }
  .time-range-picker--invalid .time-range-picker__duration > i {
    color: var(--text-danger);
  }
  .time-range-picker--invalid .time-range-picker__sep {
    color: var(--text-danger);
  }
  .time-range-picker--disabled {
    pointer-events: none;
  }
  .time-range-picker--disabled .time-range-picker__sep {
    color: var(--text-disabled);
  }
  .time-range-picker--disabled .time-range-picker__duration {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .time-range-picker--md {
    --trp-h: 2rem;
    --trp-gap: 0.625rem;
    --trp-font: 0.8125rem;
    --trp-sep: 0.875rem;
  }
  .time-range-picker--sm {
    --trp-h: 1.75rem;
    --trp-gap: 0.5rem;
    --trp-font: 0.75rem;
    --trp-sep: 0.8125rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .time-range-picker__sep, .time-range-picker__duration {
      transition: none;
    }
  }
}
@layer utilities {
  .event-popover-anchor {
    position: relative;
    display: inline-flex;
  }
  .event-popover {
    --ep-width: 20rem;
    --ep-pad: 1rem;
    --ep-gap: 0.625rem;
    --ep-row-gap: 0.6875rem;
    --ep-bar: 0.1875rem;
    --ep-radius: var(--radius-lg, 0.75rem);
    --ep-arrow: 0.625rem;
    --ep-title-size: 0.9375rem;
    --ep-row-size: 0.8125rem;
    --ep-avatar: 1.5rem;
    --ep-avatar-overlap: -0.5rem;
    --ep-accent: var(--bg-brand-solid);
    --ep-accent-soft: var(--ep-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --ep-accent-soft: color-mix(in oklch, var(--ep-accent) 14%, transparent);
    }
    --_ep-bg: var(--bg-primary);
    --_ep-border: var(--border-secondary);
    --_ep-shadow: var(--shadow-lg);
    --_ep-avatar-ring: var(--_ep-bg);
    position: relative;
    display: block;
    width: var(--ep-width);
    max-width: min(92vw, 24rem);
    background: var(--_ep-bg);
    border: 1px solid var(--_ep-border);
    border-radius: var(--ep-radius);
    box-shadow: var(--_ep-shadow);
    color: var(--text-secondary);
    z-index: 60;
  }
  .event-popover.is-collapsed {
    display: none;
  }
  .event-popover.is-open {
    display: block;
    position: absolute;
  }
  .event-popover.is-open, .event-popover--bottom.is-open {
    top: calc(100% + var(--ep-gap));
    bottom: auto;
    left: 50%;
    right: auto;
    translate: -50% 0;
    transform-origin: top center;
  }
  .event-popover--top.is-open {
    top: auto;
    bottom: calc(100% + var(--ep-gap));
    left: 50%;
    right: auto;
    translate: -50% 0;
    transform-origin: bottom center;
  }
  .event-popover--left.is-open {
    top: 50%;
    bottom: auto;
    left: auto;
    right: calc(100% + var(--ep-gap));
    translate: 0 -50%;
    transform-origin: center right;
  }
  .event-popover--right.is-open {
    top: 50%;
    bottom: auto;
    left: calc(100% + var(--ep-gap));
    right: auto;
    translate: 0 -50%;
    transform-origin: center left;
  }
  .event-popover__arrow {
    position: absolute;
    width: var(--ep-arrow);
    height: var(--ep-arrow);
    background: var(--_ep-bg);
    border: 1px solid var(--_ep-border);
    transform: rotate(45deg);
  }
  .event-popover:not(.event-popover--top):not(.event-popover--left):not(.event-popover--right) .event-popover__arrow, .event-popover--bottom .event-popover__arrow {
    top: calc(var(--ep-arrow) / -2);
    left: 50%;
    margin-left: calc(var(--ep-arrow) / -2);
    border-right: 0;
    border-bottom: 0;
  }
  .event-popover--top .event-popover__arrow {
    top: auto;
    bottom: calc(var(--ep-arrow) / -2);
    left: 50%;
    margin-left: calc(var(--ep-arrow) / -2);
    border-left: 0;
    border-top: 0;
  }
  .event-popover--left .event-popover__arrow {
    top: 50%;
    left: auto;
    right: calc(var(--ep-arrow) / -2);
    margin-top: calc(var(--ep-arrow) / -2);
    border-left: 0;
    border-bottom: 0;
  }
  .event-popover--right .event-popover__arrow {
    top: 50%;
    left: calc(var(--ep-arrow) / -2);
    margin-top: calc(var(--ep-arrow) / -2);
    border-right: 0;
    border-top: 0;
  }
  .event-popover__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: var(--ep-pad);
    padding-inline-start: calc(var(--ep-pad) + var(--ep-bar) + 0.25rem);
    border-bottom: 1px solid var(--border-secondary);
  }
  .event-popover__header::before {
    content: "";
    position: absolute;
    inset-block: var(--ep-pad);
    inset-inline-start: var(--ep-pad);
    width: var(--ep-bar);
    border-radius: var(--radius-full, 9999px);
    background: var(--ep-accent);
  }
  .event-popover__heading {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  .event-popover__title {
    margin: 0;
    font-size: var(--ep-title-size);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
  }
  .event-popover__subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .event-popover__badge {
    --_ep-bdg-bg: var(--bg-tertiary);
    --_ep-bdg-text: var(--text-secondary);
    --_ep-bdg-ring: var(--border-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    flex: none;
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full, 9999px);
    background: var(--_ep-bdg-bg);
    color: var(--_ep-bdg-text);
    box-shadow: inset 0 0 0 1px var(--_ep-bdg-ring);
    text-wrap: nowrap;
  }
  .event-popover__badge::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: currentColor;
  }
  .event-popover__badge--success {
    --_ep-bdg-bg: var(--bg-success-subtle);
    --_ep-bdg-text: var(--text-success);
    --_ep-bdg-ring: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      --_ep-bdg-ring: color-mix(in oklch, var(--text-success) 30%, transparent);
    }
  }
  .event-popover__badge--danger {
    --_ep-bdg-bg: var(--bg-danger-subtle);
    --_ep-bdg-text: var(--text-danger);
    --_ep-bdg-ring: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --_ep-bdg-ring: color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
  }
  .event-popover__badge--warning {
    --_ep-bdg-bg: var(--bg-warning-subtle);
    --_ep-bdg-text: var(--text-warning);
    --_ep-bdg-ring: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --_ep-bdg-ring: color-mix(in oklch, var(--text-warning) 30%, transparent);
    }
  }
  .event-popover__badge--info {
    --_ep-bdg-bg: var(--bg-info-subtle);
    --_ep-bdg-text: var(--text-info);
    --_ep-bdg-ring: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --_ep-bdg-ring: color-mix(in oklch, var(--text-info) 30%, transparent);
    }
  }
  .event-popover__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    margin: -0.25rem -0.25rem -0.25rem 0;
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .event-popover__close:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .event-popover__close:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .event-popover__body {
    display: flex;
    flex-direction: column;
    gap: var(--ep-row-gap);
    padding: var(--ep-pad);
  }
  .event-popover__row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    font-size: var(--ep-row-size);
    color: var(--text-secondary);
  }
  .event-popover__row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1.05rem;
    flex: none;
    color: var(--text-quaternary);
  }
  .event-popover__row-content {
    min-width: 0;
    line-height: 1.45;
  }
  .event-popover__row-sub {
    display: block;
    margin-top: 0.0625rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .event-popover__time-dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    margin-top: 0.28rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--ep-accent);
  }
  .event-popover__time {
    font-weight: 600;
    color: var(--text-primary);
  }
  .event-popover__description {
    color: var(--text-tertiary);
    line-height: 1.5;
  }
  .event-popover__attendees {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
  }
  .event-popover__avatars {
    display: flex;
    align-items: center;
  }
  .event-popover__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ep-avatar);
    height: var(--ep-avatar);
    flex: none;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    box-shadow: 0 0 0 2px var(--_ep-avatar-ring);
    margin-inline-start: var(--ep-avatar-overlap);
  }
  .event-popover__avatar:first-child {
    margin-inline-start: 0;
  }
  .event-popover__avatar--more {
    background: var(--bg-quaternary);
    color: var(--text-tertiary);
  }
  .event-popover__attendees-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .event-popover__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-weight: 600;
    color: var(--text-link);
    text-decoration: none;
    border-radius: var(--radius-xs, 0.25rem);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .event-popover__link:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
  }
  .event-popover__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .event-popover__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--ep-pad);
    border-top: 1px solid var(--border-secondary);
  }
  .event-popover__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }
  .event-popover__actions-spacer {
    margin-inline-start: auto;
  }
  .event-popover__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), border-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .event-popover__action:hover {
    background: var(--bg-primary-hover);
    border-color: var(--border-primary-hover);
    color: var(--text-secondary-hover);
  }
  .event-popover__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .event-popover__action--primary {
    border-color: transparent;
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .event-popover__action--primary:hover {
    background: var(--bg-brand-solid-hover);
    border-color: transparent;
    color: var(--text-on-brand);
  }
  .event-popover__action--danger {
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
    color: var(--text-danger);
  }
  .event-popover__action--danger:hover {
    background: var(--bg-danger-subtle);
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-danger) 45%, transparent);
    }
    color: var(--text-danger);
  }
  .event-popover--cat-success {
    --ep-accent: var(--text-success);
  }
  .event-popover--cat-danger {
    --ep-accent: var(--text-danger);
  }
  .event-popover--cat-warning {
    --ep-accent: var(--text-warning);
  }
  .event-popover--cat-info {
    --ep-accent: var(--text-info);
  }
  .event-popover--cat-purple {
    --ep-accent: var(--text-purple);
  }
  .event-popover--cat-indigo {
    --ep-accent: var(--text-indigo);
  }
  .event-popover--cat-pink {
    --ep-accent: var(--text-pink);
  }
  .event-popover--cat-mint {
    --ep-accent: var(--text-mint);
  }
  .event-popover--sm {
    --ep-width: 17rem;
    --ep-pad: 0.75rem;
    --ep-row-gap: 0.5rem;
    --ep-title-size: 0.875rem;
    --ep-row-size: 0.75rem;
    --ep-avatar: 1.25rem;
  }
  .event-popover--md {
    --ep-width: 20rem;
    --ep-pad: 1rem;
    --ep-row-gap: 0.6875rem;
    --ep-title-size: 0.9375rem;
    --ep-row-size: 0.8125rem;
    --ep-avatar: 1.5rem;
  }
  .event-popover.is-open {
    animation: event-popover-in var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  @keyframes event-popover-in {
    from {
      opacity: 0;
      transform: scale(0.98);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .event-popover.is-open {
      animation: none;
    }
    .event-popover__close, .event-popover__action {
      transition: none;
    }
  }
}
@layer utilities {
  .slot-picker {
    --sp-slot-h: 2.5rem;
    --sp-gap: 0.5rem;
    --sp-font: 0.875rem;
    --sp-meta-font: 0.6875rem;
    --sp-radius: var(--radius-md, 0.375rem);
    --sp-col-min: 6.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    color: var(--text-primary);
  }
  .slot-picker__header {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .slot-picker__date {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .slot-picker__tz {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .slot-picker__tz > i, .slot-picker__tz > svg {
    font-size: 0.8125rem;
    color: var(--text-quaternary);
  }
  .slot-picker__group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .slot-picker__section {
    margin-bottom: 0.5rem;
    font-size: var(--sp-meta-font);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .slot-picker__grid {
    display: grid;
    gap: var(--sp-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--sp-col-min), 1fr));
  }
  .slot-picker--grid .slot-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--sp-col-min), 1fr));
  }
  .slot-picker--list .slot-picker__grid {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
  .slot-picker__slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: var(--sp-slot-h);
    padding: 0.375rem 0.75rem;
    font-size: var(--sp-font);
    font-weight: 500;
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-primary);
    border-radius: var(--sp-radius);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    cursor: pointer;
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease), background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .slot-picker--list .slot-picker__slot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
  }
  .slot-picker__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .slot-picker__time {
    font-variant-numeric: tabular-nums;
  }
  .slot-picker__meta {
    font-size: var(--sp-meta-font);
    font-weight: 400;
    color: var(--text-tertiary);
  }
  .slot-picker__slot:hover:not(.slot-picker__slot--booked):not(.slot-picker__slot--unavailable) {
    box-shadow: inset 0 0 0 1px var(--border-focus), var(--shadow-xs);
  }
  .slot-picker__slot:has(.slot-picker__input:focus-visible) {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 1;
  }
  .slot-picker__slot--selected, .slot-picker__slot:has(.slot-picker__input:checked) {
    color: var(--text-on-brand);
    background: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid), var(--shadow-xs);
  }
  .slot-picker__slot--selected .slot-picker__meta, .slot-picker__slot:has(.slot-picker__input:checked) .slot-picker__meta {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
  .slot-picker__slot--selected:hover, .slot-picker__slot:has(.slot-picker__input:checked):hover {
    background: color-mix(in srgb, oklch(78.0% 0.157 84), black 12%);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--color-brand-600), black 12%);
    }
    box-shadow: inset 0 0 0 1px color-mix(in srgb, oklch(78.0% 0.157 84), black 12%), var(--shadow-xs);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-brand-600), black 12%), var(--shadow-xs);
    }
  }
  .slot-picker__slot--limited .slot-picker__meta {
    font-weight: 500;
    color: var(--text-warning);
  }
  .slot-picker__slot--booked, .slot-picker__slot--unavailable, .slot-picker__slot:has(.slot-picker__input:disabled) {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    cursor: not-allowed;
  }
  .slot-picker__slot--booked .slot-picker__time, .slot-picker__slot--unavailable .slot-picker__time, .slot-picker__slot:has(.slot-picker__input:disabled) .slot-picker__time {
    text-decoration: line-through;
  }
  .slot-picker__slot--booked .slot-picker__meta, .slot-picker__slot--unavailable .slot-picker__meta, .slot-picker__slot:has(.slot-picker__input:disabled) .slot-picker__meta {
    color: var(--text-disabled);
  }
  .slot-picker__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-secondary);
  }
  .slot-picker__summary {
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .slot-picker__summary-value {
    font-weight: 600;
    color: var(--text-primary);
  }
  .slot-picker__summary-picked {
    display: none;
  }
  .slot-picker:has(.slot-picker__input:checked) .slot-picker__summary-empty {
    display: none;
  }
  .slot-picker:has(.slot-picker__input:checked) .slot-picker__summary-picked {
    display: inline;
  }
  .slot-picker:not(:has(.slot-picker__input:checked)) .slot-picker__confirm {
    opacity: 0.6;
    pointer-events: none;
  }
  .slot-picker--sm {
    --sp-slot-h: 2rem;
    --sp-font: 0.8125rem;
    --sp-col-min: 5.5rem;
    --sp-gap: 0.375rem;
  }
  .slot-picker--md {
    --sp-slot-h: 2.5rem;
    --sp-font: 0.875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .slot-picker__slot {
      transition: none;
    }
  }
}
@layer utilities {
  .mini-calendar {
    --mc-cell: 1.75rem;
    --mc-font: 0.75rem;
    --mc-gap: 0.5rem;
    --mc-dot: 0.25rem;
    --_mc-evt: var(--evt-accent, var(--bg-brand-solid));
    display: inline-flex;
    flex-direction: column;
    gap: var(--mc-gap);
    color: var(--text-secondary);
    user-select: none;
  }
  .mini-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .mini-calendar__title {
    font-size: var(--mc-font);
    font-weight: 600;
    color: var(--text-primary);
  }
  .mini-calendar__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex: none;
  }
  .mini-calendar__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: var(--radius-md, 0.5rem);
    color: var(--text-tertiary);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .mini-calendar__nav-btn:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .mini-calendar__nav-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .mini-calendar__nav-btn:disabled {
    color: var(--text-disabled);
    pointer-events: none;
    cursor: default;
  }
  .mini-calendar__grid {
    border-collapse: collapse;
    table-layout: fixed;
  }
  .mini-calendar__weekday {
    width: var(--mc-cell);
    height: var(--mc-cell);
    font-size: calc(var(--mc-font) - 0.0625rem);
    font-weight: 500;
    color: var(--text-tertiary);
    text-align: center;
    padding: 0;
  }
  .mini-calendar__cell {
    width: var(--mc-cell);
    height: var(--mc-cell);
    padding: 0;
    position: relative;
    text-align: center;
  }
  .mini-calendar__day {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--mc-font);
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .mini-calendar__day:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary-hover);
    font-weight: 500;
  }
  .mini-calendar__day:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
    z-index: 1;
  }
  .mini-calendar__cell--today .mini-calendar__day {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--border-brand);
  }
  .mini-calendar__cell--selected .mini-calendar__day, .mini-calendar__cell--range-start .mini-calendar__day, .mini-calendar__cell--range-end .mini-calendar__day {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-weight: 500;
    box-shadow: none;
  }
  .mini-calendar__cell--selected .mini-calendar__day:hover, .mini-calendar__cell--range-start .mini-calendar__day:hover, .mini-calendar__cell--range-end .mini-calendar__day:hover {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
  }
  .mini-calendar__cell--outside .mini-calendar__day {
    color: var(--text-quaternary);
    opacity: 0.6;
  }
  .mini-calendar__cell--disabled .mini-calendar__day {
    color: var(--text-disabled);
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
  }
  .mini-calendar__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    pointer-events: none;
  }
  .mini-calendar__dot {
    width: var(--mc-dot);
    height: var(--mc-dot);
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--_mc-evt);
  }
  .mini-calendar__dot--brand {
    --_mc-evt: var(--bg-brand-solid);
  }
  .mini-calendar__dot--success {
    --_mc-evt: var(--bg-success);
  }
  .mini-calendar__dot--danger {
    --_mc-evt: var(--bg-danger);
  }
  .mini-calendar__dot--warning {
    --_mc-evt: var(--bg-warning);
  }
  .mini-calendar__dot--info {
    --_mc-evt: var(--bg-info);
  }
  .mini-calendar__count {
    position: absolute;
    top: 0.0625rem;
    right: 0.0625rem;
    min-width: 0.75rem;
    padding: 0 0.1875rem;
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 0.875rem;
    color: var(--text-on-brand);
    background: var(--_mc-evt);
    border-radius: var(--radius-full, 9999px);
    pointer-events: none;
  }
  .mini-calendar__cell--selected .mini-calendar__dot, .mini-calendar__cell--range-start .mini-calendar__dot, .mini-calendar__cell--range-end .mini-calendar__dot {
    background: var(--text-on-brand);
  }
  .mini-calendar__cell--selected .mini-calendar__count, .mini-calendar__cell--range-start .mini-calendar__count, .mini-calendar__cell--range-end .mini-calendar__count {
    color: var(--text-brand);
    background: var(--text-on-brand);
  }
  .mini-calendar__cell--in-range {
    background: var(--bg-secondary);
  }
  .mini-calendar__cell--range-start {
    border-radius: var(--radius-full, 9999px) 0 0 var(--radius-full, 9999px);
  }
  .mini-calendar__cell--range-end {
    border-radius: 0 var(--radius-full, 9999px) var(--radius-full, 9999px) 0;
  }
  .mini-calendar__cell--range-start.mini-calendar__cell--range-end {
    border-radius: var(--radius-full, 9999px);
  }
  .mini-calendar__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: var(--mc-gap);
    border-top: 1px solid var(--border-secondary);
  }
  .mini-calendar--card {
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-lg);
  }
  .mini-calendar--bordered {
    padding: 0.625rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.75rem);
  }
  .mini-calendar--xs {
    --mc-cell: 1.5rem;
    --mc-font: 0.625rem;
    --mc-dot: 0.1875rem;
  }
  .mini-calendar--sm {
    --mc-cell: 1.625rem;
    --mc-font: 0.6875rem;
    --mc-dot: 0.21875rem;
  }
  .mini-calendar--md {
    --mc-cell: 1.75rem;
    --mc-font: 0.75rem;
    --mc-dot: 0.25rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .mini-calendar__nav-btn, .mini-calendar__day {
      transition: none;
    }
  }
}
@layer utilities {
  .calendar-year {
    --_cy-cols: 1;
    --_cy-day: 1.5rem;
    --_cy-day-font: 0.6875rem;
    --_cy-cap-font: 0.8125rem;
    --_cy-month-gap: 1.25rem;
    --_cy-day-gap: 0.125rem;
    --evt-accent: var(--bg-brand-solid);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--text-secondary);
    user-select: none;
  }
  .calendar-year__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .calendar-year__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .calendar-year__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .calendar-year__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .calendar-year__nav-btn:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .calendar-year__nav-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .calendar-year__grid {
    display: grid;
    grid-template-columns: repeat(var(--_cy-cols), minmax(0, 1fr));
    gap: var(--_cy-month-gap);
  }
  .calendar-year__month {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }
  .calendar-year__caption {
    font-size: var(--_cy-cap-font);
    font-weight: 600;
    color: var(--text-secondary);
  }
  .calendar-year__weekdays, .calendar-year__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--_cy-day-gap);
  }
  .calendar-year__weekday {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    font-size: 0.5625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-quaternary);
  }
  .calendar-year__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: var(--_cy-day);
    border-radius: var(--radius-xs);
    font-size: var(--_cy-day-font);
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .calendar-year__day--pad {
    background: transparent;
    color: transparent;
  }
  a.calendar-year__day:hover, button.calendar-year__day:hover {
    background: var(--bg-primary-hover);
    color: var(--text-secondary-hover, var(--text-secondary));
    cursor: pointer;
  }
  .calendar-year__day:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 1;
  }
  .calendar-year__day--today {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1.5px var(--border-brand);
  }
  .calendar-year__day--selected {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-weight: 600;
  }
  a.calendar-year__day--selected:hover, button.calendar-year__day--selected:hover {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
  }
  .calendar-year__day--outside {
    color: var(--text-disabled);
  }
  .calendar-year__day--marked {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 85%, transparent);
    }
    color: var(--text-on-brand);
    font-weight: 600;
  }
  .calendar-year__day--marked[data-level="1"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 22%, transparent);
    }
    color: var(--text-primary);
  }
  .calendar-year__day--marked[data-level="2"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 44%, transparent);
    }
    color: var(--text-primary);
  }
  .calendar-year__day--marked[data-level="3"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 68%, transparent);
    }
    color: var(--text-on-brand);
  }
  .calendar-year__day--marked[data-level="4"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 92%, transparent);
    }
    color: var(--text-on-brand);
  }
  .calendar-year__day--marked.calendar-year__day--today {
    box-shadow: inset 0 0 0 1.5px var(--border-brand);
  }
  .calendar-year__legend {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .calendar-year__legend-scale {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
  }
  .calendar-year__legend-cell {
    width: var(--_cy-day);
    height: var(--_cy-day);
    border-radius: var(--radius-xs);
    background: var(--bg-tertiary);
  }
  .calendar-year__legend-cell[data-level="0"] {
    background: var(--bg-tertiary);
  }
  .calendar-year__legend-cell[data-level="1"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 22%, transparent);
    }
  }
  .calendar-year__legend-cell[data-level="2"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 44%, transparent);
    }
  }
  .calendar-year__legend-cell[data-level="3"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 68%, transparent);
    }
  }
  .calendar-year__legend-cell[data-level="4"] {
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 92%, transparent);
    }
  }
  .calendar-year--card {
    padding: 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .calendar-year--compact {
    --_cy-day: 1.25rem;
    --_cy-day-font: 0.625rem;
    --_cy-cap-font: 0.75rem;
    --_cy-month-gap: 1rem;
  }
  .calendar-year--compact .calendar-year__weekdays {
    display: none;
  }
  .calendar-year--heat .calendar-year__day {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
  }
  .calendar-year--heat .calendar-year__day--pad {
    background: transparent;
    color: transparent;
  }
  .calendar-year--heat .calendar-year__day--outside {
    background: transparent;
    color: var(--text-disabled);
  }
  @media (prefers-reduced-motion: reduce) {
    .calendar-year__nav-btn, .calendar-year__day {
      transition: none;
    }
  }
  @media (min-width: 30rem) {
    .calendar-year {
      --_cy-cols: 2;
    }
  }
  @media (min-width: 48rem) {
    .calendar-year {
      --_cy-cols: 3;
    }
  }
  @media (min-width: 64rem) {
    .calendar-year {
      --_cy-cols: 4;
    }
  }
}
@layer utilities {
  .calendar-agenda {
    --_agnd-surface: var(--bg-primary);
    --agnd-group-gap: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--agnd-group-gap);
    color: var(--text-secondary);
  }
  .calendar-agenda__group {
    position: relative;
  }
  .calendar-agenda__date {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-block: 0.5rem;
    margin-bottom: 0.375rem;
    background: var(--_agnd-surface);
    border-bottom: 1px solid var(--border-secondary);
  }
  .calendar-agenda__daynum {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .calendar-agenda__dow {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
  }
  .calendar-agenda__weekday {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .calendar-agenda__month {
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .calendar-agenda__rel {
    --_rel-bg: var(--bg-tertiary);
    --_rel-text: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full, 9999px);
    background: var(--_rel-bg);
    color: var(--_rel-text);
  }
  .calendar-agenda__rel--today {
    --_rel-bg: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --_rel-bg: color-mix(in oklch, var(--bg-brand-solid) 14%, transparent);
    }
    --_rel-text: var(--text-icon-brand);
  }
  .calendar-agenda__rel--tomorrow {
    --_rel-bg: var(--bg-info-subtle);
    --_rel-text: var(--text-info);
  }
  .calendar-agenda__count {
    margin-inline-start: auto;
    flex: none;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .calendar-agenda__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .calendar-agenda__item {
    --evt-accent: var(--bg-brand-solid);
    --_agnd-bg: transparent;
    --_agnd-border: transparent;
    --_agnd-shadow: 0 0 0 0 transparent;
    --_agnd-ring: 0 0 0 0 transparent;
    --agnd-time: 5.5rem;
    --agnd-col-gap: 1rem;
    --agnd-pad-inline: 0rem;
    --agnd-dot: 0.5rem;
    --agnd-marker-top: 1.15rem;
    --agnd-axis: calc(var(--agnd-pad-inline) + var(--agnd-time) + var(--agnd-col-gap) / 2);
    position: relative;
    display: grid;
    grid-template-columns: var(--agnd-time) minmax(0, 1fr) auto;
    column-gap: var(--agnd-col-gap);
    align-items: start;
    padding: 0.75rem var(--agnd-pad-inline);
    border-radius: var(--radius-md, 0.375rem);
    background: var(--_agnd-bg);
    border: 1px solid var(--_agnd-border);
    box-shadow: var(--_agnd-ring), var(--_agnd-shadow);
    color: var(--text-secondary);
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .calendar-agenda__item::before {
    content: "";
    position: absolute;
    top: var(--agnd-marker-top);
    inset-inline-start: var(--agnd-axis);
    width: var(--agnd-dot);
    height: var(--agnd-dot);
    transform: translate(-50%, -50%);
    border-radius: var(--radius-full, 9999px);
    background: var(--evt-accent);
    z-index: 1;
  }
  .calendar-agenda__time {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.0625rem;
    min-width: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  .calendar-agenda__start {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
  }
  .calendar-agenda__end {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text-quaternary);
  }
  .calendar-agenda__allday {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
  }
  .calendar-agenda__body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  .calendar-agenda__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
  }
  .calendar-agenda__location {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .calendar-agenda__location > i, .calendar-agenda__location > svg {
    flex: none;
    color: var(--text-quaternary);
  }
  .calendar-agenda__location-text {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .calendar-agenda__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .calendar-agenda__meta-sep {
    width: 0.1875rem;
    height: 0.1875rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--text-quaternary);
    opacity: 0.7;
  }
  .calendar-agenda__aside {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  .calendar-agenda__attendees {
    display: flex;
    align-items: center;
  }
  .calendar-agenda__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    box-shadow: 0 0 0 2px var(--_agnd-surface);
    margin-inline-start: -0.5rem;
  }
  .calendar-agenda__avatar:first-child {
    margin-inline-start: 0;
  }
  .calendar-agenda__avatar--more {
    background: var(--bg-quaternary);
    color: var(--text-tertiary);
  }
  .calendar-agenda__badge {
    --_bdg-bg: var(--bg-tertiary);
    --_bdg-text: var(--text-secondary);
    --_bdg-ring: var(--border-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    flex: none;
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-full, 9999px);
    background: var(--_bdg-bg);
    color: var(--_bdg-text);
    box-shadow: inset 0 0 0 1px var(--_bdg-ring);
    text-wrap: nowrap;
  }
  .calendar-agenda__badge::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: currentColor;
  }
  .calendar-agenda__badge--success {
    --_bdg-bg: var(--bg-success-subtle);
    --_bdg-text: var(--text-success);
    --_bdg-ring: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-ring: color-mix(in oklch, var(--text-success) 30%, transparent);
    }
  }
  .calendar-agenda__badge--danger {
    --_bdg-bg: var(--bg-danger-subtle);
    --_bdg-text: var(--text-danger);
    --_bdg-ring: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-ring: color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
  }
  .calendar-agenda__badge--warning {
    --_bdg-bg: var(--bg-warning-subtle);
    --_bdg-text: var(--text-warning);
    --_bdg-ring: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-ring: color-mix(in oklch, var(--text-warning) 30%, transparent);
    }
  }
  .calendar-agenda__badge--info {
    --_bdg-bg: var(--bg-info-subtle);
    --_bdg-text: var(--text-info);
    --_bdg-ring: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-ring: color-mix(in oklch, var(--text-info) 30%, transparent);
    }
  }
  .calendar-agenda__badge--brand {
    --_bdg-bg: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --_bdg-bg: color-mix(in oklch, var(--bg-brand-solid) 12%, transparent);
    }
    --_bdg-text: var(--text-icon-brand);
    --_bdg-ring: var(--border-brand);
  }
  .calendar-agenda__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), border-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .calendar-agenda__action:hover {
    background: var(--bg-primary-hover);
    border-color: var(--border-primary-hover);
    color: var(--text-secondary-hover);
  }
  .calendar-agenda__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .calendar-agenda__item--cat-success {
    --evt-accent: var(--text-success);
  }
  .calendar-agenda__item--cat-danger {
    --evt-accent: var(--text-danger);
  }
  .calendar-agenda__item--cat-warning {
    --evt-accent: var(--text-warning);
  }
  .calendar-agenda__item--cat-info {
    --evt-accent: var(--text-info);
  }
  .calendar-agenda__item--cat-purple {
    --evt-accent: var(--text-purple);
  }
  .calendar-agenda__item--cat-indigo {
    --evt-accent: var(--text-indigo);
  }
  .calendar-agenda__item--cat-pink {
    --evt-accent: var(--text-pink);
  }
  .calendar-agenda__item--cat-mint {
    --evt-accent: var(--text-mint);
  }
  :where(.calendar-agenda--card) .calendar-agenda__list {
    gap: 0.625rem;
  }
  :where(.calendar-agenda--card) .calendar-agenda__item {
    --_agnd-bg: var(--bg-primary);
    --_agnd-border: var(--border-secondary);
    --_agnd-shadow: var(--shadow-xs);
    --agnd-pad-inline: 1rem;
    padding-block: 0.875rem;
  }
  :where(.calendar-agenda--compact) .calendar-agenda__item {
    --agnd-time: 4.5rem;
    --agnd-col-gap: 0.75rem;
    --agnd-marker-top: 0.85rem;
    padding-block: 0.4375rem;
  }
  :where(.calendar-agenda--compact) .calendar-agenda__time {
    flex-direction: row;
    align-items: baseline;
    gap: 0.3125rem;
  }
  :where(.calendar-agenda--compact) .calendar-agenda__title {
    font-size: 0.875rem;
  }
  :where(.calendar-agenda--compact) .calendar-agenda__location, :where(.calendar-agenda--compact) .calendar-agenda__meta {
    display: none;
  }
  :where(.calendar-agenda--compact) .calendar-agenda__avatar {
    width: 1.25rem;
    height: 1.25rem;
  }
  :where(.calendar-agenda--timeline) .calendar-agenda__item {
    padding-block: 0.875rem;
  }
  :where(.calendar-agenda--timeline) .calendar-agenda__item::after {
    content: "";
    position: absolute;
    inset-inline-start: var(--agnd-axis);
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--border-secondary);
    z-index: 0;
  }
  :where(.calendar-agenda--timeline) .calendar-agenda__item::before {
    box-shadow: 0 0 0 3px var(--_agnd-surface);
  }
  :where(.calendar-agenda--timeline) .calendar-agenda__list > .calendar-agenda__item:first-child::after {
    top: var(--agnd-marker-top);
  }
  :where(.calendar-agenda--timeline) .calendar-agenda__list > .calendar-agenda__item:last-child::after {
    bottom: calc(100% - var(--agnd-marker-top));
  }
  .calendar-agenda__item:where(a, [tabindex], [data-selectable]) {
    cursor: pointer;
  }
  .calendar-agenda__item:where(a, [tabindex], [data-selectable]):hover {
    --_agnd-bg: var(--bg-primary-hover);
  }
  .calendar-agenda__item:where(a, [tabindex], [data-selectable]):focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .calendar-agenda__item--selected {
    --_agnd-ring: inset 0 0 0 2px var(--border-brand);
    --_agnd-border: transparent;
    --_agnd-bg: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --_agnd-bg: color-mix(in oklch, var(--bg-brand-solid) 8%, transparent);
    }
  }
  .calendar-agenda__group--past {
    opacity: 0.6;
  }
  .calendar-agenda__group--past .calendar-agenda__item {
    --evt-accent: var(--text-quaternary);
  }
  .calendar-agenda__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 2.75rem 1.25rem;
    text-align: center;
  }
  .calendar-agenda__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-secondary);
    color: var(--text-quaternary);
    font-size: 1.125rem;
  }
  .calendar-agenda__empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .calendar-agenda__empty-text {
    max-width: 24rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-quaternary);
  }
  @media (max-width: 30rem) {
    .calendar-agenda__item {
      grid-template-columns: var(--agnd-time) minmax(0, 1fr);
    }
    .calendar-agenda__aside {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin-top: 0.375rem;
      padding-inline-start: calc(var(--agnd-time) + var(--agnd-col-gap));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .calendar-agenda__item, .calendar-agenda__action {
      transition: none;
    }
  }
}
@layer utilities {
  .date-range-picker {
    --drp-field-h: 2.5rem;
    --drp-radius: var(--radius-md, 0.375rem);
    --drp-pop-radius: var(--radius-lg, 0.5rem);
    --drp-gap: 0.5rem;
    --drp-pad-x: 0.75rem;
    --drp-preset-w: 11rem;
    --drp-font: 0.875rem;
    position: relative;
    display: inline-block;
  }
  .date-range-picker__native {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--drp-gap);
  }
  .date-range-picker__native-field {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .date-range-picker__native-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .date-range-picker__native-sep {
    align-self: center;
    padding-bottom: 0.5rem;
    color: var(--text-quaternary);
  }
  .date-range-picker--ready .date-range-picker__native {
    display: none;
  }
  .date-range-picker__field {
    display: none;
    align-items: center;
    gap: var(--drp-gap);
    width: 100%;
    min-width: 15rem;
    height: var(--drp-field-h);
    padding: 0 var(--drp-pad-x);
    font-size: var(--drp-font);
    font-family: inherit;
    text-align: left;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 0;
    border-radius: var(--drp-radius);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    cursor: pointer;
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease), background-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .date-range-picker--ready:not(.date-range-picker--inline) .date-range-picker__field {
    display: inline-flex;
  }
  .date-range-picker__field:hover {
    background: var(--bg-primary-hover);
  }
  .date-range-picker__field:focus-visible, .date-range-picker--open .date-range-picker__field {
    outline: 2px solid var(--border-focus);
    outline-offset: -1px;
  }
  .date-range-picker__icon {
    flex: none;
    color: var(--text-quaternary);
    font-size: 1em;
  }
  .date-range-picker__caret {
    flex: none;
    margin-left: auto;
    color: var(--text-quaternary);
    font-size: 0.75em;
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .date-range-picker--open .date-range-picker__caret {
    transform: rotate(180deg);
  }
  .date-range-picker__value {
    flex: none;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .date-range-picker__value--placeholder {
    color: var(--text-placeholder);
  }
  .date-range-picker__sep {
    flex: none;
    color: var(--text-quaternary);
    font-size: 0.875em;
  }
  .date-range-picker--disabled .date-range-picker__field {
    color: var(--text-disabled);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    cursor: not-allowed;
    pointer-events: none;
  }
  .date-range-picker--disabled .date-range-picker__value {
    color: var(--text-disabled);
  }
  .date-range-picker--invalid .date-range-picker__field {
    box-shadow: inset 0 0 0 1px var(--border-danger), var(--shadow-xs);
  }
  .date-range-picker--invalid .date-range-picker__field:focus-visible, .date-range-picker--invalid.date-range-picker--open .date-range-picker__field {
    outline-color: var(--border-danger);
  }
  .date-range-picker__popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.375rem);
    left: 0;
    min-width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--drp-pop-radius);
    box-shadow: var(--shadow-lg);
    transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease), visibility var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .date-range-picker--open .date-range-picker__popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .date-range-picker__body {
    display: flex;
    align-items: stretch;
  }
  .date-range-picker__presets {
    flex: none;
    width: var(--drp-preset-w);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem;
    border-right: 1px solid var(--border-secondary);
  }
  .date-range-picker__preset {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    font-size: var(--drp-font);
    font-family: inherit;
    text-align: left;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--drp-radius);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .date-range-picker__preset:hover {
    background: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .date-range-picker__preset:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .date-range-picker__preset--selected {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-brand-solid) 10%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--border-brand);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--border-brand) 40%, transparent);
    }
  }
  .date-range-picker__preset-check {
    flex: none;
    margin-left: auto;
    opacity: 0;
    color: var(--text-primary);
    font-size: 0.8125em;
  }
  .date-range-picker__preset--selected .date-range-picker__preset-check {
    opacity: 1;
  }
  .date-range-picker__calendars {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
  }
  .date-range-picker--single-month .date-range-picker__calendars {
    gap: 0;
  }
  .date-range-picker--single-month .date-range-picker__month--right {
    display: none;
  }
  .date-range-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-secondary);
  }
  .date-range-picker__summary {
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .date-range-picker__summary--empty {
    color: var(--text-quaternary);
  }
  .date-range-picker__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .date-range-picker--inline {
    display: block;
  }
  .date-range-picker--inline .date-range-picker__popover {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
  }
  @media (max-width: 40rem) {
    .date-range-picker__body {
      flex-direction: column;
    }
    .date-range-picker__presets {
      width: 100%;
      flex-direction: row;
      flex-wrap: wrap;
      border-right: 0;
      border-bottom: 1px solid var(--border-secondary);
    }
    .date-range-picker__preset {
      width: auto;
    }
    .date-range-picker__preset-check {
      display: none;
    }
    .date-range-picker__month--right {
      display: none;
    }
    .date-range-picker__calendars {
      justify-content: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .date-range-picker__field, .date-range-picker__caret, .date-range-picker__preset, .date-range-picker__popover {
      transition: none;
    }
    .date-range-picker__popover {
      transform: none;
    }
  }
}
@layer utilities {
  .gantt {
    --_g-tasks-w: 15rem;
    --_g-head: 2.75rem;
    --_g-row: 2.5rem;
    --_g-col-w: 2.5rem;
    --_g-cols: 30;
    --_g-bar-h: 1.375rem;
    --_g-radius: var(--radius-md, 0.375rem);
    --_g-track: calc(var(--_g-cols) * var(--_g-col-w));
    position: relative;
    display: grid;
    grid-template-columns: var(--_g-tasks-w) minmax(0, 1fr);
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-xs);
    color: var(--text-secondary);
  }
  .gantt__tasks {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-secondary);
  }
  .gantt__tasks-head {
    display: flex;
    align-items: center;
    height: var(--_g-head);
    padding-inline: 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .gantt__task {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    height: var(--_g-row);
    padding-inline: 0.875rem;
    border-bottom: 1px solid var(--border-secondary-alt);
    overflow: hidden;
  }
  .gantt__task:last-child {
    border-bottom: 0;
  }
  .gantt__task-name {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .gantt__task-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .gantt__task-meta-sep {
    width: 0.1875rem;
    height: 0.1875rem;
    flex: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--text-quaternary);
  }
  .gantt__grid {
    position: relative;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) transparent;
  }
  .gantt__scale {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    width: var(--_g-track);
    height: var(--_g-head);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .gantt__scale-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--_g-col-w);
    width: var(--_g-col-w);
    min-width: 0;
    padding: 0.125rem;
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    color: var(--text-tertiary);
    border-right: 1px solid var(--border-secondary-alt);
  }
  .gantt__scale-cell:last-child {
    border-right: 0;
  }
  .gantt__scale-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .gantt__scale-cell--tick {
    border-left: 1px solid var(--border-secondary);
  }
  .gantt__scale-cell--muted {
    color: var(--text-quaternary);
    background: var(--bg-tertiary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-tertiary) 45%, transparent);
    }
  }
  .gantt__body {
    position: relative;
    width: var(--_g-track);
    background-image: repeating-linear-gradient( to right, var(--border-secondary-alt) 0, var(--border-secondary-alt) 1px, transparent 1px, transparent var(--_g-col-w) ), repeating-linear-gradient( to bottom, var(--border-secondary-alt) 0, var(--border-secondary-alt) 1px, transparent 1px, transparent var(--_g-row) );
  }
  .gantt__row {
    position: relative;
    height: var(--_g-row);
  }
  .gantt__bar {
    --evt-accent: var(--bg-brand-solid);
    position: absolute;
    top: 50%;
    left: calc(var(--_g-start, 0) * 1%);
    width: calc(var(--_g-span, 8) * 1%);
    height: var(--_g-bar-h);
    min-width: 0.5rem;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-inline: 0.5rem;
    overflow: hidden;
    border-radius: var(--_g-radius);
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 20%, var(--bg-primary));
    }
    box-shadow: inset 0 0 0 1px var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--evt-accent) 45%, transparent);
    }
    color: var(--text-primary);
    cursor: pointer;
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease), filter var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .gantt__bar-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--_g-done, 0) * 1%);
    border-start-start-radius: var(--_g-radius);
    border-end-start-radius: var(--_g-radius);
    background: var(--evt-accent);
    pointer-events: none;
  }
  .gantt__bar-label {
    position: relative;
    z-index: 1;
    min-width: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .gantt__bar-pct {
    position: relative;
    z-index: 1;
    margin-inline-start: auto;
    flex: none;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .gantt__bar--filled-label .gantt__bar-label, .gantt__bar--filled-label .gantt__bar-pct {
    color: var(--text-on-brand);
  }
  .gantt__bar-outside {
    position: absolute;
    top: 50%;
    left: calc((var(--_g-start, 0) + var(--_g-span, 8)) * 1%);
    transform: translateY(-50%);
    margin-inline-start: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    text-wrap: nowrap;
    color: var(--text-secondary);
    pointer-events: none;
  }
  .gantt__bar--success {
    --evt-accent: var(--text-success);
  }
  .gantt__bar--danger {
    --evt-accent: var(--text-danger);
  }
  .gantt__bar--warning {
    --evt-accent: var(--text-warning);
  }
  .gantt__bar--info {
    --evt-accent: var(--text-info);
  }
  .gantt__bar--purple {
    --evt-accent: var(--text-purple);
  }
  .gantt__bar--indigo {
    --evt-accent: var(--text-indigo);
  }
  .gantt__bar--pink {
    --evt-accent: var(--text-pink);
  }
  .gantt__bar--mint {
    --evt-accent: var(--text-mint);
  }
  .gantt__bar--milestone {
    --_g-ms: 0.875rem;
    width: 0;
    min-width: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    cursor: pointer;
  }
  .gantt__bar--milestone::before {
    content: "";
    flex: none;
    width: var(--_g-ms);
    height: var(--_g-ms);
    margin-inline-start: calc(var(--_g-ms) / -2);
    border-radius: 2px;
    background: var(--evt-accent);
    box-shadow: 0 0 0 2px var(--bg-primary);
    transform: rotate(45deg);
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .gantt__bar--milestone .gantt__bar-label {
    margin-inline-start: 0.5rem;
    color: var(--text-secondary);
    text-wrap: nowrap;
  }
  .gantt__bar--milestone:hover::before {
    transform: rotate(45deg) scale(1.12);
  }
  .gantt__bar--critical {
    --evt-accent: var(--text-danger);
    box-shadow: inset 0 0 0 1px var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--evt-accent) 60%, transparent);
    }
  }
  .gantt__bar--summary {
    height: 0.5rem;
    background: var(--evt-accent);
    box-shadow: none;
    border-radius: 2px;
    overflow: visible;
    cursor: default;
  }
  .gantt__bar--summary .gantt__bar-fill {
    display: none;
  }
  .gantt__bar--summary::before, .gantt__bar--summary::after {
    content: "";
    position: absolute;
    bottom: -0.25rem;
    width: 0;
    height: 0;
    border-top: 0.3125rem solid var(--evt-accent);
  }
  .gantt__bar--summary::before {
    left: 0;
    border-right: 0.3125rem solid transparent;
  }
  .gantt__bar--summary::after {
    right: 0;
    border-left: 0.3125rem solid transparent;
  }
  .gantt__link {
    --_gl-from-row: 0;
    --_gl-to-row: 1;
    --_gl-x1: 0;
    --_gl-x2: 0;
    --_gl-color: var(--border-primary);
    position: absolute;
    z-index: 0;
    left: calc(var(--_gl-x1) * 1%);
    top: calc((var(--_gl-from-row) + 0.5) * var(--_g-row));
    width: calc((var(--_gl-x2) - var(--_gl-x1)) * 1%);
    height: calc((var(--_gl-to-row) - var(--_gl-from-row)) * var(--_g-row));
    border-top: 2px solid var(--_gl-color);
    border-right: 2px solid var(--_gl-color);
    border-start-end-radius: 4px;
    pointer-events: none;
  }
  .gantt__link::after {
    content: "";
    position: absolute;
    right: -0.1875rem;
    bottom: -0.25rem;
    width: 0;
    height: 0;
    border-top: 0.25rem solid transparent;
    border-bottom: 0.25rem solid transparent;
    border-left: 0.3125rem solid var(--_gl-color);
  }
  .gantt__link--critical {
    --_gl-color: var(--text-danger);
  }
  .gantt__today {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    left: calc(var(--_g-today, 50) * 1%);
    width: 2px;
    transform: translateX(-1px);
    background: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-brand-solid) 55%, transparent);
    }
    pointer-events: none;
  }
  .gantt__today::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-brand-solid);
  }
  .gantt__today::after {
    content: attr(data-label);
    position: absolute;
    top: 0.125rem;
    left: 0.375rem;
    padding: 0.0625rem 0.3125rem;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-wrap: nowrap;
    border-radius: var(--radius-xs, 0.25rem);
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .gantt__weekend {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    left: calc(var(--_g-start, 0) * 1%);
    width: calc(var(--_g-span, 0) * 1%);
    background: var(--bg-tertiary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-tertiary) 40%, transparent);
    }
    pointer-events: none;
  }
  .gantt__task--group {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .gantt__task--group .gantt__task-name {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
  }
  .gantt__group-caret {
    flex: none;
    width: 0;
    height: 0;
    border-top: 0.3125rem solid transparent;
    border-bottom: 0.3125rem solid transparent;
    border-left: 0.375rem solid var(--text-quaternary);
    transform: rotate(90deg);
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .gantt__task--group.is-collapsed .gantt__group-caret {
    transform: rotate(0deg);
  }
  .gantt__row--group {
    background: var(--bg-secondary);
  }
  .gantt__group-count {
    flex: none;
    margin-inline-start: auto;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
  }
  .gantt__bar:hover {
    box-shadow: inset 0 0 0 1px var(--evt-accent), var(--shadow-lg);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--evt-accent) 60%, transparent), var(--shadow-lg);
    }
    filter: brightness(1.02);
  }
  .gantt__bar:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 4;
  }
  .gantt__bar--selected {
    box-shadow: inset 0 0 0 2px var(--border-brand), var(--shadow-xs);
    z-index: 3;
  }
  .gantt__task--selected {
    background: var(--bg-secondary);
  }
  .gantt__bar--past {
    opacity: 0.65;
  }
  .gantt__bar--blocked {
    cursor: not-allowed;
    background: repeating-linear-gradient( 135deg, var(--evt-accent) 0, var(--evt-accent) 5px, var(--bg-primary) 5px, var(--bg-primary) 10px );
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-linear-gradient( 135deg, color-mix(in oklch, var(--evt-accent) 16%, var(--bg-primary)) 0, color-mix(in oklch, var(--evt-accent) 16%, var(--bg-primary)) 5px, var(--bg-primary) 5px, var(--bg-primary) 10px );
    }
  }
  .gantt__bar--blocked .gantt__bar-fill {
    display: none;
  }
  .gantt--zoom-day {
    --_g-col-w: 2.5rem;
  }
  .gantt--zoom-week {
    --_g-col-w: 5.5rem;
  }
  .gantt--zoom-month {
    --_g-col-w: 7.5rem;
  }
  .gantt__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: calc(var(--_g-row) * 4);
    padding: 2rem;
    text-align: center;
    color: var(--text-tertiary);
  }
  .gantt__empty-icon {
    font-size: 1.75rem;
    color: var(--text-quaternary);
  }
  .gantt__empty-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .gantt__empty-desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .gantt__skeleton {
    position: absolute;
    top: 50%;
    left: calc(var(--_g-start, 0) * 1%);
    width: calc(var(--_g-span, 8) * 1%);
    height: var(--_g-bar-h);
    transform: translateY(-50%);
    border-radius: var(--_g-radius);
    background: linear-gradient( 90deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100% );
    background-size: 200% 100%;
    animation: gantt-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes gantt-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .gantt__bar, .gantt__bar--milestone::before, .gantt__group-caret {
      transition: none;
    }
    .gantt__bar:hover {
      filter: none;
    }
    .gantt__bar--milestone:hover::before {
      transform: rotate(45deg);
    }
    .gantt__skeleton {
      animation: none;
    }
  }
}
@layer utilities {
  .resource-timeline {
    --_rt-gutter-w: 12.5rem;
    --_rt-scale-h: 2.75rem;
    --_rt-unit-w: 5rem;
    --_rt-units: 12;
    --_rt-row-h: 3.5rem;
    --_rt-lane-pad: 0.375rem;
    --_rt-rows: 1;
    --_rt-now: -1;
    --_rt-load: 0;
    --_rt-line: var(--border-secondary);
    --_rt-now-color: var(--bg-brand-solid);
    --_rt-heat: var(--bg-warning);
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--_rt-line);
  }
  .resource-timeline__viewport {
    display: grid;
    grid-template-columns: var(--_rt-gutter-w) 1fr;
    grid-auto-rows: auto;
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .resource-timeline__head, .resource-timeline__row {
    display: contents;
  }
  .resource-timeline__corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    height: var(--_rt-scale-h);
    padding-inline: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    border-right: 1px solid var(--_rt-line);
    border-bottom: 1px solid var(--_rt-line);
  }
  .resource-timeline__scale {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    width: calc(var(--_rt-units) * var(--_rt-unit-w));
    height: var(--_rt-scale-h);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--_rt-line);
  }
  .resource-timeline__tick {
    display: flex;
    align-items: center;
    flex: 0 0 var(--_rt-unit-w);
    width: var(--_rt-unit-w);
    min-width: 0;
    padding-inline-start: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    border-left: 1px solid var(--_rt-line);
  }
  .resource-timeline__tick:first-child {
    border-left: 0;
  }
  .resource-timeline__resource {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: calc(var(--_rt-rows) * var(--_rt-row-h));
    padding-inline: 1rem;
    background: var(--bg-primary);
    border-right: 1px solid var(--_rt-line);
    border-bottom: 1px solid var(--_rt-line);
  }
  .resource-timeline__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
  }
  .resource-timeline__resource-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .resource-timeline__name {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .resource-timeline__meta {
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .resource-timeline__lane {
    position: relative;
    width: calc(var(--_rt-units) * var(--_rt-unit-w));
    height: calc(var(--_rt-rows) * var(--_rt-row-h));
    border-bottom: 1px solid var(--_rt-line);
    background-image: repeating-linear-gradient( to right, var(--_rt-line) 0, var(--_rt-line) 1px, transparent 1px, transparent var(--_rt-unit-w) );
  }
  .resource-timeline__row--empty .resource-timeline__lane {
    display: flex;
    align-items: center;
  }
  .resource-timeline__empty {
    padding-inline-start: 0.75rem;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-quaternary);
  }
  .resource-timeline__block {
    --evt-accent: var(--bg-brand-solid);
    position: absolute;
    left: calc(var(--_rt-start, 0) * var(--_rt-unit-w));
    width: calc(var(--_rt-span, 1) * var(--_rt-unit-w));
    top: calc(var(--_rt-sub, 0) * var(--_rt-row-h) + var(--_rt-lane-pad));
    height: calc(var(--_rt-row-h) - 2 * var(--_rt-lane-pad));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.0625rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    padding-inline-start: 0.625rem;
    overflow: hidden;
    text-align: start;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 14%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--evt-accent) 32%, transparent);
    }
    color: var(--text-primary);
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .resource-timeline__block::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0.1875rem;
    background: var(--evt-accent);
  }
  .resource-timeline__block-title {
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .resource-timeline__block-time {
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .resource-timeline__block-meta {
    overflow: hidden;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .resource-timeline__block--success {
    --evt-accent: var(--text-success);
  }
  .resource-timeline__block--danger {
    --evt-accent: var(--text-danger);
  }
  .resource-timeline__block--warning {
    --evt-accent: var(--text-warning);
  }
  .resource-timeline__block--info {
    --evt-accent: var(--text-info);
  }
  .resource-timeline__block--purple {
    --evt-accent: var(--text-purple);
  }
  .resource-timeline__block--indigo {
    --evt-accent: var(--text-indigo);
  }
  .resource-timeline__block--pink {
    --evt-accent: var(--text-pink);
  }
  .resource-timeline__block--mint {
    --evt-accent: var(--text-mint);
  }
  .resource-timeline__block:hover {
    z-index: 2;
    background: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--evt-accent) 22%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--evt-accent), var(--shadow-xs);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--evt-accent) 44%, transparent), var(--shadow-xs);
    }
  }
  .resource-timeline__block:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 3;
  }
  .resource-timeline__block.is-selected {
    z-index: 3;
    box-shadow: inset 0 0 0 2px var(--border-brand), var(--shadow-xs);
  }
  .resource-timeline__block--conflict {
    z-index: 3;
    box-shadow: inset 0 0 0 1px var(--evt-accent), 0 0 0 2px var(--bg-danger-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--evt-accent) 32%, transparent), 0 0 0 2px var(--bg-danger-solid);
    }
  }
  .resource-timeline__block--conflict:hover {
    box-shadow: inset 0 0 0 1px var(--evt-accent), 0 0 0 2px var(--bg-danger-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--evt-accent) 44%, transparent), 0 0 0 2px var(--bg-danger-solid);
    }
  }
  .resource-timeline__now {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--_rt-now) * var(--_rt-unit-w));
    width: 2px;
    margin-inline-start: -1px;
    z-index: 4;
    pointer-events: none;
    background: var(--_rt-now-color);
  }
  .resource-timeline__row:first-of-type .resource-timeline__now::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-full);
    background: var(--_rt-now-color);
  }
  .resource-timeline--utilization .resource-timeline__lane {
    background-color: var(--_rt-heat);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--_rt-heat) calc(var(--_rt-load) * 55%), transparent);
    }
  }
  .resource-timeline--compact {
    --_rt-gutter-w: 10rem;
    --_rt-scale-h: 2.25rem;
    --_rt-unit-w: 3.5rem;
    --_rt-row-h: 2.75rem;
    --_rt-lane-pad: 0.25rem;
  }
  .resource-timeline--compact .resource-timeline__block-title {
    font-size: 0.6875rem;
  }
  .resource-timeline--compact .resource-timeline__avatar {
    width: 1.75rem;
    height: 1.75rem;
  }
  .resource-timeline--zoom-hour {
    --_rt-unit-w: 5rem;
  }
  .resource-timeline--zoom-day {
    --_rt-unit-w: 9rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .resource-timeline__block {
      transition: none;
    }
  }
}
@layer utilities {
  .roadmap-timeline {
    --rt-lane-w: 12rem;
    --rt-periods: 12;
    --rt-col: minmax(3.25rem, 1fr);
    --rt-gap: 0.375rem;
    --rt-item-h: 2.25rem;
    --rt-radius: var(--radius-lg, 0.5rem);
    --rt-item-radius: var(--radius-md, 0.375rem);
    --rt-title-size: 0.8125rem;
    --rt-meta-size: 0.6875rem;
    position: relative;
    display: block;
    overflow: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--rt-radius);
    color: var(--text-secondary);
  }
  .roadmap-timeline__scale-quarters, .roadmap-timeline__scale-periods, .roadmap-timeline__lane, .roadmap-timeline__now {
    display: grid;
    grid-template-columns: var(--rt-lane-w) minmax(0, 1fr);
  }
  .roadmap-timeline__quarters, .roadmap-timeline__periods, .roadmap-timeline__track, .roadmap-timeline__now-inner {
    display: grid;
    grid-template-columns: repeat(var(--rt-periods), var(--rt-col));
  }
  .roadmap-timeline__scale {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .roadmap-timeline__scale-quarters {
    border-bottom: 1px solid var(--border-secondary);
  }
  .roadmap-timeline__scale-corner {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    background: var(--bg-secondary);
    border-inline-end: 1px solid var(--border-secondary);
    font-size: var(--rt-meta-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
  }
  .roadmap-timeline__quarter {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    font-size: var(--rt-meta-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-inline-start: 1px solid var(--border-secondary);
  }
  .roadmap-timeline__quarter:first-child {
    border-inline-start: 0;
  }
  .roadmap-timeline__period {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3125rem 0.25rem;
    font-size: var(--rt-meta-size);
    font-weight: 500;
    color: var(--text-tertiary);
    border-inline-start: 1px solid var(--border-secondary-alt);
  }
  .roadmap-timeline__period:first-child {
    border-inline-start: 0;
  }
  .roadmap-timeline__period--now {
    color: var(--text-info);
    font-weight: 600;
  }
  .roadmap-timeline__body {
    position: relative;
  }
  .roadmap-timeline__lane {
    border-bottom: 1px solid var(--border-secondary);
  }
  .roadmap-timeline__lane:last-child {
    border-bottom: 0;
  }
  .roadmap-timeline__lane-label {
    grid-column: 1;
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-primary);
    border-inline-end: 1px solid var(--border-secondary);
    font-size: var(--rt-title-size);
    font-weight: 600;
    color: var(--text-primary);
  }
  .roadmap-timeline__lane-meta {
    font-size: var(--rt-meta-size);
    font-weight: 400;
    color: var(--text-tertiary);
  }
  .roadmap-timeline__track {
    grid-column: 2;
    position: relative;
    grid-auto-rows: minmax(var(--rt-item-h), auto);
    align-content: center;
    gap: var(--rt-gap);
    padding-block: 0.5rem;
  }
  .roadmap-timeline__item {
    --rt-status-bg: var(--bg-tertiary);
    --rt-status-text: var(--text-secondary);
    --rt-status-ring: var(--border-secondary);
    --rt-status-strong: var(--text-tertiary);
    --rt-accent: var(--bg-brand-solid);
    grid-column: var(--rt-start, 1) / span var(--rt-span, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    min-width: 0;
    min-height: var(--rt-item-h);
    padding: 0.3125rem 0.625rem;
    padding-inline-start: 0.75rem;
    overflow: hidden;
    background: var(--rt-status-bg);
    border-radius: var(--rt-item-radius);
    box-shadow: inset 0 0 0 1px var(--rt-status-ring);
    color: var(--text-primary);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease), background-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .roadmap-timeline__item::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0.1875rem;
    background: var(--rt-accent);
  }
  .roadmap-timeline__item-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: var(--rt-title-size);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .roadmap-timeline__item-title::before {
    content: "";
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--rt-status-strong);
  }
  .roadmap-timeline__item-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: var(--rt-meta-size);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .roadmap-timeline__item-status {
    font-weight: 600;
    color: var(--rt-status-text);
  }
  .roadmap-timeline__progress {
    position: absolute;
    inset-inline: 0.5rem;
    bottom: 0.25rem;
    height: 0.1875rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--rt-status-strong);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--rt-status-strong) 20%, transparent);
    }
    overflow: hidden;
  }
  .roadmap-timeline__progress-fill {
    display: block;
    height: 100%;
    width: var(--rt-progress, 0%);
    border-radius: inherit;
    background: var(--rt-status-strong);
  }
  .roadmap-timeline__item:has(.roadmap-timeline__progress) {
    padding-bottom: 0.625rem;
  }
  .roadmap-timeline__item--planned, .roadmap-timeline__legend-item--planned {
    --rt-status-bg: var(--bg-tertiary);
    --rt-status-text: var(--text-secondary);
    --rt-status-ring: var(--border-secondary);
    --rt-status-strong: var(--text-tertiary);
  }
  .roadmap-timeline__item--in-progress, .roadmap-timeline__legend-item--in-progress {
    --rt-status-bg: var(--bg-info-subtle);
    --rt-status-text: var(--text-info);
    --rt-status-ring: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --rt-status-ring: color-mix(in oklch, var(--text-info) 30%, transparent);
    }
    --rt-status-strong: var(--text-info);
  }
  .roadmap-timeline__item--done, .roadmap-timeline__legend-item--done {
    --rt-status-bg: var(--bg-success-subtle);
    --rt-status-text: var(--text-success);
    --rt-status-ring: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      --rt-status-ring: color-mix(in oklch, var(--text-success) 30%, transparent);
    }
    --rt-status-strong: var(--text-success);
  }
  .roadmap-timeline__item--at-risk, .roadmap-timeline__legend-item--at-risk {
    --rt-status-bg: var(--bg-warning-subtle);
    --rt-status-text: var(--text-warning);
    --rt-status-ring: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --rt-status-ring: color-mix(in oklch, var(--text-warning) 32%, transparent);
    }
    --rt-status-strong: var(--text-warning);
  }
  .roadmap-timeline__item--done .roadmap-timeline__item-title {
    color: var(--text-secondary);
  }
  .roadmap-timeline__item--cat-success {
    --rt-accent: var(--text-success);
  }
  .roadmap-timeline__item--cat-danger {
    --rt-accent: var(--text-danger);
  }
  .roadmap-timeline__item--cat-warning {
    --rt-accent: var(--text-warning);
  }
  .roadmap-timeline__item--cat-info {
    --rt-accent: var(--text-info);
  }
  .roadmap-timeline__item--cat-purple {
    --rt-accent: var(--text-purple);
  }
  .roadmap-timeline__item--cat-indigo {
    --rt-accent: var(--text-indigo);
  }
  .roadmap-timeline__item--cat-pink {
    --rt-accent: var(--text-pink);
  }
  .roadmap-timeline__item--cat-mint {
    --rt-accent: var(--text-mint);
  }
  .roadmap-timeline__item:hover {
    box-shadow: inset 0 0 0 1px var(--rt-status-ring), var(--shadow-xs);
    background: var(--rt-status-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--rt-status-bg) 88%, var(--bg-primary));
    }
  }
  .roadmap-timeline__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 2;
  }
  .roadmap-timeline__item--selected {
    box-shadow: inset 0 0 0 2px var(--border-brand), var(--shadow-xs);
    z-index: 2;
  }
  .roadmap-timeline__item--selected:hover {
    box-shadow: inset 0 0 0 2px var(--border-brand), var(--shadow-lg);
  }
  .roadmap-timeline__now {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .roadmap-timeline__now-inner {
    grid-column: 2;
  }
  .roadmap-timeline__now-line {
    grid-column: var(--rt-now, 1);
    position: relative;
    border-inline-start: 2px dashed var(--text-info);
  }
  .roadmap-timeline__now-flag {
    position: absolute;
    top: 0.25rem;
    inset-inline-start: 0;
    display: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.375rem;
    transform: translateX(-50%);
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-info-subtle);
    color: var(--text-info);
    font-size: var(--rt-meta-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-wrap: nowrap;
    box-shadow: inset 0 0 0 1px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-info) 30%, transparent);
    }
  }
  .roadmap-timeline--now-labels .roadmap-timeline__now-flag {
    display: inline-flex;
  }
  .roadmap-timeline__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
  }
  .roadmap-timeline__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: var(--rt-meta-size);
    font-weight: 500;
    color: var(--text-secondary);
  }
  .roadmap-timeline__legend-dot {
    width: 0.625rem;
    height: 0.625rem;
    flex: none;
    border-radius: var(--radius-xs, 0.25rem);
    background: var(--rt-status-strong, var(--text-tertiary));
    box-shadow: inset 0 0 0 1px var(--rt-status-ring, var(--border-secondary));
  }
  .roadmap-timeline__legend-title {
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .roadmap-timeline--kanban-legend .roadmap-timeline__legend-item:not(:has(.roadmap-timeline__legend-dot)) {
    color: var(--text-tertiary);
  }
  .roadmap-timeline--kanban-legend .roadmap-timeline__legend-item:has(.roadmap-timeline__legend-dot) {
    padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--rt-status-bg, var(--bg-tertiary));
    color: var(--rt-status-text, var(--text-secondary));
    box-shadow: inset 0 0 0 1px var(--rt-status-ring, var(--border-secondary));
  }
  .roadmap-timeline--kanban-legend .roadmap-timeline__legend-dot {
    background: var(--rt-status-strong, var(--text-tertiary));
    box-shadow: none;
  }
  .roadmap-timeline--sm {
    --rt-lane-w: 9.5rem;
    --rt-col: minmax(2.75rem, 1fr);
    --rt-item-h: 1.875rem;
    --rt-gap: 0.25rem;
    --rt-title-size: 0.75rem;
    --rt-meta-size: 0.625rem;
  }
  .roadmap-timeline--sm .roadmap-timeline__lane-label {
    padding: 0.5rem 0.625rem;
  }
  .roadmap-timeline--sm .roadmap-timeline__item {
    padding: 0.25rem 0.5rem;
    padding-inline-start: 0.625rem;
  }
  .roadmap-timeline--sm .roadmap-timeline__item-meta {
    display: none;
  }
  @media (max-width: 640px) {
    .roadmap-timeline {
      --rt-lane-w: 8.5rem;
      --rt-col: minmax(3rem, 1fr);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .roadmap-timeline__item {
      transition: none;
    }
  }
}
@layer utilities {
  .schedule-timeline {
    --st-start-hour: 6;
    --st-end-hour: 22;
    --_st-hours: calc(var(--st-end-hour) - var(--st-start-hour));
    --_st-unit: var(--st-unit, 5.5rem);
    --_st-grid: var(--_st-unit);
    --lanes: 1;
    --_st-lane-h: 2.75rem;
    --_st-lane-gap: 0.375rem;
    --_st-ruler-h: 1.75rem;
    --_st-track-pad: 0.5rem;
    --_st-chip-gap: 4px;
    --_st-accent-bar: 3px;
    --_st-dot-size: 0.875rem;
    --_st-now-color: var(--bg-brand-solid);
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    color: var(--text-primary);
  }
  .schedule-timeline__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: inherit;
    scroll-behavior: smooth;
    scrollbar-width: thin;
  }
  .schedule-timeline__canvas {
    position: relative;
    width: calc(var(--_st-hours) * var(--_st-unit));
    min-width: 100%;
  }
  .schedule-timeline__ruler {
    position: relative;
    height: var(--_st-ruler-h);
    border-bottom: 1px solid var(--border-secondary);
  }
  .schedule-timeline__tick {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--_st-at, 0) * var(--_st-unit));
    display: flex;
    align-items: center;
    padding-inline-start: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-wrap: nowrap;
  }
  .schedule-timeline__tick::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-secondary);
  }
  .schedule-timeline__track {
    position: relative;
    min-width: 100%;
    height: calc( 2 * var(--_st-track-pad) + var(--lanes) * var(--_st-lane-h) + (var(--lanes) - 1) * var(--_st-lane-gap) );
    background-image: linear-gradient( to right, var(--border-secondary-subtle) 0, var(--border-secondary-subtle) 1px, transparent 1px );
    background-size: var(--_st-grid) 100%;
  }
  .schedule-timeline__event {
    --evt-accent: var(--bg-brand-solid);
    --_st-chip-bg: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --_st-chip-bg: color-mix(in oklch, var(--evt-accent) 12%, var(--bg-primary));
    }
    --_st-chip-bg-hover: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --_st-chip-bg-hover: color-mix(in oklch, var(--evt-accent) 20%, var(--bg-primary));
    }
    --_st-chip-ring: var(--evt-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --_st-chip-ring: color-mix(in oklch, var(--evt-accent) 32%, transparent);
    }
    position: absolute;
    left: calc(var(--_st-start, 0) * var(--_st-unit));
    width: calc(var(--_st-span, 1) * var(--_st-unit) - var(--_st-chip-gap));
    top: calc( var(--_st-track-pad) + var(--_st-lane, 0) * (var(--_st-lane-h) + var(--_st-lane-gap)) );
    height: var(--_st-lane-h);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.0625rem;
    overflow: hidden;
    padding: 0.25rem 0.5rem 0.25rem 0.625rem;
    border-radius: var(--radius-md);
    background: var(--_st-chip-bg);
    box-shadow: inset 0 0 0 1px var(--_st-chip-ring);
    color: var(--text-primary);
    text-align: start;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-out, ease), box-shadow var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .schedule-timeline__event::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--_st-accent-bar);
    background: var(--evt-accent);
  }
  .schedule-timeline__event-title {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .schedule-timeline__event-time {
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--text-tertiary);
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  .schedule-timeline__event--dot {
    width: var(--_st-dot-size);
    min-width: var(--_st-dot-size);
    height: var(--_st-dot-size);
    padding: 0;
    top: calc( var(--_st-track-pad) + var(--_st-lane, 0) * (var(--_st-lane-h) + var(--_st-lane-gap)) + (var(--_st-lane-h) - var(--_st-dot-size)) / 2 );
    border-radius: var(--radius-full);
    background: var(--evt-accent);
    box-shadow: none;
  }
  .schedule-timeline__event--dot::before, .schedule-timeline__event--dot .schedule-timeline__event-title, .schedule-timeline__event--dot .schedule-timeline__event-time {
    display: none;
  }
  .schedule-timeline__event-hint {
    position: absolute;
    bottom: calc(100% + 0.375rem);
    inset-inline-start: 50%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: max-content;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    color: var(--text-primary);
    text-wrap: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(0.25rem);
    transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .schedule-timeline__event:not(.schedule-timeline__event--dot) .schedule-timeline__event-hint {
    display: none;
  }
  .schedule-timeline__event--dot:hover, .schedule-timeline__event--dot:focus-visible, .schedule-timeline__event--dot:focus-within {
    z-index: 6;
  }
  .schedule-timeline__event--dot:hover .schedule-timeline__event-hint, .schedule-timeline__event--dot:focus-visible .schedule-timeline__event-hint, .schedule-timeline__event--dot:focus-within .schedule-timeline__event-hint {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .schedule-timeline__event--success {
    --evt-accent: var(--text-success);
  }
  .schedule-timeline__event--danger {
    --evt-accent: var(--text-danger);
  }
  .schedule-timeline__event--warning {
    --evt-accent: var(--text-warning);
  }
  .schedule-timeline__event--info {
    --evt-accent: var(--text-info);
  }
  .schedule-timeline__event--purple {
    --evt-accent: var(--text-purple);
  }
  .schedule-timeline__event--indigo {
    --evt-accent: var(--text-indigo);
  }
  .schedule-timeline__event--pink {
    --evt-accent: var(--text-pink);
  }
  .schedule-timeline__event--mint {
    --evt-accent: var(--text-mint);
  }
  .schedule-timeline__now {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--_st-now, 0) * var(--_st-unit));
    z-index: 5;
    width: 0;
    pointer-events: none;
  }
  .schedule-timeline__now::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--_st-now-color);
    transform: translate(-50%, -50%);
  }
  .schedule-timeline__now::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--_st-now-color);
    transform: translateX(-50%);
  }
  .schedule-timeline__gap {
    --_st-gap-tint: var(--text-success);
    position: absolute;
    top: var(--_st-track-pad);
    bottom: var(--_st-track-pad);
    left: calc(var(--_st-start, 0) * var(--_st-unit));
    width: calc(var(--_st-span, 1) * var(--_st-unit) - var(--_st-chip-gap));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: repeating-linear-gradient( 135deg, transparent 0, transparent 5px, var(--_st-gap-tint) 5px, var(--_st-gap-tint) 10px );
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-linear-gradient( 135deg, transparent 0, transparent 5px, color-mix(in oklch, var(--_st-gap-tint) 12%, transparent) 5px, color-mix(in oklch, var(--_st-gap-tint) 12%, transparent) 10px );
    }
    box-shadow: inset 0 0 0 1px var(--_st-gap-tint);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--_st-gap-tint) 24%, transparent);
    }
    pointer-events: none;
  }
  .schedule-timeline__gap-label {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--_st-gap-tint);
  }
  .schedule-timeline__event:hover {
    background: var(--_st-chip-bg-hover);
    transform: translateY(-1px);
    z-index: 3;
  }
  .schedule-timeline__event:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 4;
  }
  .schedule-timeline__event.is-selected {
    box-shadow: inset 0 0 0 2px var(--border-brand);
    z-index: 4;
  }
  .schedule-timeline__event.is-selected:hover {
    background: var(--_st-chip-bg-hover);
  }
  .schedule-timeline__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-tertiary);
  }
  .schedule-timeline__empty-icon {
    font-size: 1.5rem;
    color: var(--text-quaternary);
  }
  .schedule-timeline__empty-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .schedule-timeline__empty-desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .schedule-timeline--compact {
    --_st-unit: var(--st-unit, 4rem);
    --_st-lane-h: 2rem;
    --_st-lane-gap: 0.25rem;
    --_st-ruler-h: 1.5rem;
    --_st-track-pad: 0.375rem;
    --_st-dot-size: 0.75rem;
  }
  .schedule-timeline--compact .schedule-timeline__event-title {
    font-size: 0.75rem;
  }
  .schedule-timeline--compact .schedule-timeline__event-time {
    font-size: 0.625rem;
  }
  .schedule-timeline--ticks-hour {
    --_st-grid: var(--_st-unit);
  }
  .schedule-timeline--ticks-3h {
    --_st-grid: calc(3 * var(--_st-unit));
  }
  @media (prefers-reduced-motion: reduce) {
    .schedule-timeline__scroll {
      scroll-behavior: auto;
    }
    .schedule-timeline__event, .schedule-timeline__event-hint {
      transition: none;
    }
    .schedule-timeline__event:hover {
      transform: none;
    }
  }
}
@layer utilities {
  .working-hours {
    --_wh-row-pad-y: 1rem;
    --_wh-row-pad-x: 1rem;
    --_wh-col-gap: 1.25rem;
    --_wh-label-w: 9.5rem;
    --_wh-radius: var(--radius-lg, 0.5rem);
    --_wh-line: 1px;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: var(--_wh-radius);
    box-shadow: inset 0 0 0 var(--_wh-line) var(--border-secondary);
  }
  .working-hours > * + * {
    border-top: var(--_wh-line) solid var(--border-secondary);
  }
  .working-hours__day {
    display: grid;
    grid-template-columns: var(--_wh-label-w) 1fr;
    gap: var(--_wh-col-gap);
    align-items: start;
    padding: var(--_wh-row-pad-y) var(--_wh-row-pad-x);
  }
  .working-hours__day-head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }
  .working-hours__day-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .working-hours__status {
    min-width: 3rem;
  }
  .working-hours__ranges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
  }
  .working-hours__range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }
  .working-hours__range .time-range-picker {
    flex: 1 1 auto;
    min-width: 0;
  }
  .working-hours__add-range, .working-hours__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .working-hours__add-range:hover, .working-hours__copy:hover {
    background: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .working-hours__add-range > i, .working-hours__copy > i {
    color: var(--text-tertiary);
    font-size: 0.875em;
  }
  .working-hours__remove-range {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    background: transparent;
    color: var(--text-quaternary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease), color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .working-hours__remove-range:hover {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .working-hours__add-range:focus-visible, .working-hours__remove-range:focus-visible, .working-hours__copy:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .working-hours__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem var(--_wh-row-pad-x);
    background: var(--bg-secondary);
  }
  .working-hours__tz {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem var(--_wh-row-pad-x);
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .working-hours__tz > i {
    color: var(--text-quaternary);
    font-size: 0.875em;
  }
  .working-hours__tz strong {
    font-weight: 600;
    color: var(--text-secondary);
  }
  .working-hours__day--closed .working-hours__ranges, .working-hours__day:has(.working-hours__toggle .toggle-input:not(:checked)) .working-hours__ranges {
    display: none;
  }
  .working-hours__day--closed .working-hours__day-label, .working-hours__day:has(.working-hours__toggle .toggle-input:not(:checked)) .working-hours__day-label {
    color: var(--text-tertiary);
  }
  .working-hours--disabled, .working-hours__day--disabled {
    pointer-events: none;
  }
  .working-hours--disabled .working-hours__day-label, .working-hours__day--disabled .working-hours__day-label {
    color: var(--text-disabled);
  }
  .working-hours--summary {
    background: transparent;
    box-shadow: none;
    gap: 0;
  }
  .working-hours--summary > * + * {
    border-top: 0;
  }
  .working-hours--summary .working-hours__day {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
  }
  .working-hours--summary .working-hours__day-label {
    font-weight: 500;
    color: var(--text-secondary);
  }
  .working-hours__hours {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-align: right;
  }
  .working-hours__hours--closed {
    color: var(--text-quaternary);
  }
  .working-hours--summary .working-hours__day--closed .working-hours__day-label {
    color: var(--text-tertiary);
  }
  .working-hours--sm {
    --_wh-row-pad-y: 0.625rem;
    --_wh-col-gap: 0.875rem;
    --_wh-label-w: 8rem;
  }
  .working-hours--sm .working-hours__day-label {
    font-size: 0.8125rem;
  }
  @media (max-width: 640px) {
    .working-hours__day {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    .working-hours__day-head {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .working-hours__day-label, .working-hours__add-range, .working-hours__remove-range, .working-hours__copy {
      transition: none;
    }
  }
}
@layer utilities {
  .card {
    --card-fill: var(--bg-card, var(--alpha-white-100));
    --card-ring: var(--border-card, var(--border-primary));
    --card-shadow: var(--shadow-xs, 0 1px 1px 0 oklch(0% 0 0 / 0.03));
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card-md, var(--radius-xl));
    color: var(--text-card, var(--text-primary));
    background-color: var(--card-fill);
    box-shadow: inset 0 0 0 1px var(--card-ring), var(--card-shadow);
    backdrop-filter: var(--blur-card-backdrop, none);
  }
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='1'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: var(--opacity-card-grain, 0);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .card > * {
    position: relative;
    z-index: 1;
  }
  .card-header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .card-body {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .card-footer {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .card.card-dividers .card-header, .card.card-dividers .card-body {
    border-bottom: 1px solid var(--border-card-divider, var(--border-primary-subtle));
  }
  .card:has(> .card-footer) {
    display: flex;
    flex-direction: column;
  }
  .card:has(> .card-footer) > .card-body {
    flex: 1 1 auto;
  }
  .card:has(> .card-footer) > .card-footer {
    padding-bottom: 1rem;
  }
  .card.card-compact:has(> .card-footer) > .card-footer {
    padding-bottom: 0.75rem;
  }
  .card--horizontal:has(> .card-footer) {
    flex-direction: row;
  }
  .card.card-sm {
    border-radius: var(--radius-card-sm, var(--radius-lg));
  }
  .card.card-md {
    border-radius: var(--radius-card-md, var(--radius-xl));
  }
  .card.card-lg {
    border-radius: var(--radius-card-lg, var(--radius-2xl));
  }
  .card.card-pad-sm {
    padding: calc(var(--spacing) * 3);
  }
  .card.card-pad-md {
    padding: calc(var(--spacing) * 4);
  }
  .card.card-pad-lg {
    padding: calc(var(--spacing) * 6);
  }
  .card.card-t-0 {
    border-top-left-radius: var(--radius-none);
    border-top-right-radius: var(--radius-none);
    box-shadow: inset 0 -1px 0 0 var(--card-ring), inset 1px 0 0 0 var(--card-ring), inset -1px 0 0 0 var(--card-ring), var(--card-shadow);
  }
  .card.card-b-0 {
    border-bottom-right-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
    box-shadow: inset 0 1px 0 0 var(--card-ring), inset 1px 0 0 0 var(--card-ring), inset -1px 0 0 0 var(--card-ring), var(--card-shadow);
  }
  .card.card-l-0 {
    border-top-left-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
    box-shadow: inset 0 1px 0 0 var(--card-ring), inset 0 -1px 0 0 var(--card-ring), inset -1px 0 0 0 var(--card-ring), var(--card-shadow);
  }
  .card.card-r-0 {
    border-top-right-radius: var(--radius-none);
    border-bottom-right-radius: var(--radius-none);
    box-shadow: inset 0 1px 0 0 var(--card-ring), inset 0 -1px 0 0 var(--card-ring), inset 1px 0 0 0 var(--card-ring), var(--card-shadow);
  }
  .card.card-clickable {
    cursor: pointer;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .card.card-clickable:hover {
    background-color: var(--bg-card-hover, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-card-hover, color-mix(in oklch, var(--text-primary) 5%, var(--card-fill)));
    }
  }
  .card.card-clickable:active {
    background-color: var(--bg-card-pressed, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-card-pressed, color-mix(in oklch, var(--text-primary) 8%, var(--card-fill)));
    }
    box-shadow: inset 0 0 0 1px var(--card-ring), var(--shadow-card-pressed, inset 0 1px 0 rgba(0, 0, 0, .06));
  }
  .card.card-clickable:focus-visible, .card[role="button"]:focus-visible, .card[role="link"]:focus-visible, .card[tabindex]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--card-shadow);
  }
  .card.card-active, .card.is-selected, .card[aria-selected="true"], .card[aria-pressed="true"], .card[aria-checked="true"] {
    --card-ring: var(--border-brand);
    box-shadow: inset 0 0 0 1.5px var(--card-ring), var(--shadow-card-active, var(--shadow-sm));
  }
  .card.is-disabled, .card[aria-disabled="true"] {
    opacity: var(--opacity-card-disabled, 0.65);
    filter: var(--filter-card-disabled, none);
  }
  .card.is-disabled, .card[aria-disabled="true"], .card.is-disabled *, .card[aria-disabled="true"] * {
    pointer-events: none;
  }
  .card.card-flat {
    --card-fill: var(--bg-card-flat, var(--bg-card));
    --card-ring: var(--border-card-flat, var(--border-card));
    --card-shadow: none;
  }
  .card.card-flat::after {
    opacity: var(--opacity-card-flat-grain, 0);
  }
  .card.card-light {
    --card-fill: var(--bg-card-light, var(--bg-primary));
    --card-ring: var(--border-card-light, var(--border-card));
  }
  .card.card-light::after {
    opacity: var(--opacity-card-light-grain, 0);
  }
  .card.card-soft {
    --card-fill: var(--bg-card-soft, var(--bg-primary-subtle));
    --card-ring: var(--border-card-soft, var(--border-primary));
  }
  .card.card-ghost {
    --card-fill: var(--bg-card-ghost, var(--alpha-0));
    --card-ring: var(--border-card-ghost, var(--border-primary));
    --card-shadow: var(--shadow-card-ghost, none);
  }
  .card.card-outline-strong {
    --card-ring: var(--border-card-strong, var(--border-primary-solid));
  }
  .card-mini {
    --card-fill: var(--bg-card-mini, var(--bg-card));
    --card-ring: var(--border-card-mini, var(--border-card));
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    color: var(--text-card-mini, var(--text-card));
    background-color: var(--card-fill);
    box-shadow: inset 0 0 0 1px var(--card-ring), var(--shadow-sm);
  }
  .card-mini:hover {
    background-color: var(--bg-card-hover, var(--bg-primary-subtle));
  }
  .card-mini::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='1'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: var(--opacity-card-mini-grain, 0);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .card-glass {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--bg-glass-card, var(--alpha-white-20));
    color: var(--text-glass-card, var(--text-primary));
    backdrop-filter: var(--blur-glass-card, blur(20px));
    box-shadow: inset 0 0 0 1px var(--border-glass-card, var(--alpha-white-20)), var(--shadow-glass-card, var(--shadow-md));
  }
  .card-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='1'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: var(--opacity-glass-card-grain, 0.15);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .card-glass-sm {
    backdrop-filter: var(--blur-glass-card-sm, blur(10px));
    box-shadow: inset 0 0 0 1px var(--border-glass-card, var(--alpha-white-20)), var(--shadow-sm);
  }
  .card-glass-sm::after {
    opacity: var(--opacity-glass-grain-sm, var(--opacity-glass-card-grain, 0.15));
  }
  .card-glass-md {
    backdrop-filter: var(--blur-glass-card-md, blur(16px));
    box-shadow: inset 0 0 0 1px var(--border-glass-card, var(--alpha-white-20)), var(--shadow-md);
  }
  .card-glass-md::after {
    opacity: var(--opacity-glass-grain-md, var(--opacity-glass-card-grain, 0.15));
  }
  .card-glass-lg {
    backdrop-filter: var(--blur-glass-card-lg, blur(22px));
    box-shadow: inset 0 0 0 1px var(--border-glass-card, var(--alpha-white-20)), var(--shadow-lg);
  }
  .card-glass-lg::after {
    opacity: var(--opacity-glass-grain-lg, var(--opacity-glass-card-grain, 0.15));
  }
  .card-glass-xl {
    backdrop-filter: var(--blur-glass-card-xl, blur(28px));
    box-shadow: inset 0 0 0 1px var(--border-glass-card, var(--alpha-white-20)), var(--shadow-xl);
  }
  .card-glass-xl::after {
    opacity: var(--opacity-glass-grain-xl, var(--opacity-glass-card-grain, 0.15));
  }
  .login-aura {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 200, 120, 0.6) 0%, rgba(255, 180, 80, 0.28) 35%, transparent 65%);
    filter: blur(50px);
    transition: opacity 0.8s ease-out;
    will-change: transform;
  }
  .login-aura.is-active {
    opacity: 1;
  }
  [data-theme*="dark"] .login-aura {
    background: radial-gradient(circle, rgba(255, 190, 100, 0.3) 0%, rgba(200, 160, 80, 0.14) 40%, transparent 70%);
  }
  .login-card-glow {
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-opacity: 0;
  }
  .login-card-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: var(--glow-opacity);
    background: radial-gradient( 600px circle at var(--glow-x) var(--glow-y), rgba(255, 200, 120, 0.18) 0%, transparent 60% );
    transition: opacity 0.4s ease-out;
  }
  [data-theme*="dark"] .login-card-glow::before {
    background: radial-gradient( 600px circle at var(--glow-x) var(--glow-y), rgba(255, 190, 100, 0.12) 0%, transparent 60% );
  }
  @media (prefers-reduced-motion: reduce) {
    .login-aura {
      display: none;
    }
    .login-card-glow::before {
      display: none;
    }
  }
  @keyframes login-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .login-enter {
    animation: login-rise var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
  }
  @keyframes login-welcome-in {
    from {
      opacity: 0;
      transform: translateY(6px);
      filter: blur(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
  .login-welcome-in {
    animation: login-welcome-in var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) var(--duration-fast, 100ms) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .login-enter {
      animation: none;
    }
    .login-welcome-in {
      animation: none;
    }
  }
  .card-glow {
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-opacity: 0;
    position: relative;
    overflow: hidden;
  }
  .card-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: var(--glow-opacity);
    background: radial-gradient( 600px circle at var(--glow-x) var(--glow-y), rgba(20, 184, 166, 0.06) 0%, transparent 50% );
    transition: opacity 0.4s ease-out;
  }
  :is([data-theme*="dark"], [data-bs-theme="dark"]) .card-glow::before {
    background: radial-gradient( 600px circle at var(--glow-x) var(--glow-y), rgba(94, 234, 212, 0.05) 0%, transparent 50% );
  }
  @media (prefers-reduced-motion: reduce) {
    .card-glow::before {
      display: none;
    }
  }
  .section {
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 4);
    color: var(--text-primary);
    background-color: var(--bg-primary);
  }
  .section-content {
    padding: calc(var(--spacing) * 4);
  }
  .card-header__title-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
  }
  .card-overline {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .card-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .card-description {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
  }
  .card-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    border-radius: var(--radius-md);
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: var(--text-secondary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
  }
  .card-grip {
    display: inline-flex;
    flex: none;
    cursor: grab;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    border-radius: var(--radius-md);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    -webkit-user-select: none;
    user-select: none;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: -0.125rem;
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    opacity: 0.6;
  }
  .card-grip::before {
    content: "";
    display: block;
    width: 6px;
    height: 14px;
    background-image: radial-gradient(circle at center, currentColor 1.1px, transparent 1.3px);
    background-size: 4px 4px;
    background-position: 0 1px;
    background-repeat: round;
  }
  .card-grip:has(> i, > svg)::before {
    display: none;
  }
  .card:hover .card-grip, .card-grip:hover {
    opacity: 1;
    color: var(--text-secondary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
  }
  .card-grip:active {
    cursor: grabbing;
    color: var(--text-primary);
  }
  .card-grip:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
    opacity: 1;
  }
  .card-actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: var(--spacing);
    align-self: flex-start;
  }
  .card-header > .badge, .card-header > .chip {
    flex: none;
    align-self: flex-start;
  }
  .card-header:has(.card-overline) > .card-grip, .card-header:has(.card-overline) > .card-icon, .card-header:has(.card-overline) > .card-actions, .card-header:has(.card-overline) > .badge, .card-header:has(.card-overline) > .chip {
    margin-top: 0.875rem;
  }
  .card-close {
    position: absolute;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 28px;
    height: 28px;
    font-size: 12px;
    color: var(--icon-modal-close, var(--text-tertiary));
    background: transparent;
    border: 0;
  }
  .card-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-modal-close-hover, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-modal-close-hover, color-mix(in oklch, var(--text-primary) 8%, transparent));
    }
  }
  .card-close:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
    color: var(--text-primary);
  }
  .card-header:has(> .card-close) {
    padding-right: 2.5rem;
  }
  .card-footer--start {
    justify-content: flex-start;
  }
  .card-footer--center {
    justify-content: center;
  }
  .card-footer--between {
    justify-content: space-between;
  }
  .card-footer--end {
    justify-content: flex-end;
  }
  .card-media {
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-secondary);
  }
  .card-media > img, .card-media > svg, .card-media > video {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .card-media--square {
    aspect-ratio: 1 / 1;
  }
  .card-media--video {
    aspect-ratio: 16 / 9;
  }
  .card-media--wide {
    aspect-ratio: 21 / 9;
  }
  .card-media--tall {
    aspect-ratio: 3 / 4;
  }
  .card--horizontal {
    display: flex;
    align-items: stretch;
  }
  .card--horizontal > .card-media {
    flex: 0 0 33%;
    aspect-ratio: auto;
    align-self: stretch;
  }
  .card--horizontal > :not(.card-media) {
    flex: 1 1 auto;
    min-width: 0;
  }
  .card.card-success {
    --card-fill: var(--bg-success-subtle, var(--text-success));
    @supports (color: color-mix(in lab, red, red)) {
      --card-fill: var(--bg-success-subtle, color-mix(in oklch, var(--text-success) 8%, var(--bg-card, var(--alpha-white-100))));
    }
    --card-ring: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      --card-ring: color-mix(in oklch, var(--text-success) 30%, transparent);
    }
    --card-bar-color: var(--text-success);
  }
  .card.card-success .card-title {
    color: var(--text-success);
  }
  .card.card-success .card-icon {
    color: var(--text-success);
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 12%, transparent);
    }
  }
  .card.card-warning {
    --card-fill: var(--bg-warning-subtle, var(--text-warning));
    @supports (color: color-mix(in lab, red, red)) {
      --card-fill: var(--bg-warning-subtle, color-mix(in oklch, var(--text-warning) 8%, var(--bg-card, var(--alpha-white-100))));
    }
    --card-ring: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --card-ring: color-mix(in oklch, var(--text-warning) 30%, transparent);
    }
    --card-bar-color: var(--text-warning);
  }
  .card.card-warning .card-title {
    color: var(--text-warning);
  }
  .card.card-warning .card-icon {
    color: var(--text-warning);
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 12%, transparent);
    }
  }
  .card.card-danger {
    --card-fill: var(--bg-danger-subtle, var(--text-danger));
    @supports (color: color-mix(in lab, red, red)) {
      --card-fill: var(--bg-danger-subtle, color-mix(in oklch, var(--text-danger) 8%, var(--bg-card, var(--alpha-white-100))));
    }
    --card-ring: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --card-ring: color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
    --card-bar-color: var(--text-danger);
  }
  .card.card-danger .card-title {
    color: var(--text-danger);
  }
  .card.card-danger .card-icon {
    color: var(--text-danger);
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 12%, transparent);
    }
  }
  .card.card-info {
    --card-fill: var(--bg-info-subtle, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      --card-fill: var(--bg-info-subtle, color-mix(in oklch, var(--text-info) 8%, var(--bg-card, var(--alpha-white-100))));
    }
    --card-ring: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --card-ring: color-mix(in oklch, var(--text-info) 30%, transparent);
    }
    --card-bar-color: var(--text-info);
  }
  .card.card-info .card-title {
    color: var(--text-info);
  }
  .card.card-info .card-icon {
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, transparent);
    }
  }
  .card.card-success, .card.card-warning, .card.card-danger, .card.card-info, .card.card-bar-top, .card.card-bar-left {
    border-radius: var(--radius-card-accent, var(--radius-md));
  }
  .card.card-bar-top, .card.card-bar-left {
    --card-fill: var(--bg-card, var(--alpha-white-100));
    --card-ring: var(--border-card, var(--border-primary));
  }
  .card.card-bar-top {
    box-shadow: inset 0 3px 0 0 var(--card-bar-color, var(--border-brand)), inset 0 0 0 1px var(--card-ring), var(--card-shadow);
  }
  .card.card-bar-left {
    box-shadow: inset 3px 0 0 0 var(--card-bar-color, var(--border-brand)), inset 0 0 0 1px var(--card-ring), var(--card-shadow);
  }
  .card.card-elevated {
    box-shadow: inset 0 0 0 1px var(--card-ring), 0 4px 12px -4px var(--text-primary), 0 2px 4px -2px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px var(--card-ring), 0 4px 12px -4px color-mix(in oklch, var(--text-primary) 14%, transparent), 0 2px 4px -2px color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  .card.card-floating {
    box-shadow: inset 0 0 0 1px var(--card-ring), 0 12px 32px -8px var(--text-primary), 0 4px 8px -4px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px var(--card-ring), 0 12px 32px -8px color-mix(in oklch, var(--text-primary) 18%, transparent), 0 4px 8px -4px color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
  }
  .card.card-lift {
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  }
  .card.card-lift:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px var(--card-ring), 0 8px 20px -6px var(--text-primary), 0 4px 8px -4px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px var(--card-ring), 0 8px 20px -6px color-mix(in oklch, var(--text-primary) 16%, transparent), 0 4px 8px -4px color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .card.card-lift {
      transition: none;
    }
    .card.card-lift:hover {
      transform: none;
    }
  }
  .card.card-compact .card-header {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .card.card-compact .card-body {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
  }
  .card.card-compact .card-footer {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .card.card-compact .card-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .card.card-compact .card-description {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .card.card-compact .card-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .card.card-loading {
    position: relative;
    pointer-events: none;
  }
  .card.card-loading > * {
    visibility: hidden;
  }
  .card.card-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient( 100deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 45%, var(--bg-skeleton) 65% );
    background-size: 200% 100%;
    animation: card-shimmer 1.4s linear infinite;
  }
  @keyframes card-shimmer {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .card.card-loading::before {
      animation: none;
    }
  }
  .card-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
  .card-grid--gap-sm {
    gap: 0.5rem;
  }
  .card-grid--gap-lg {
    gap: 1rem;
  }
  .card-grid--gap-xl {
    gap: 1.5rem;
  }
  .card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 640px) {
    .card-grid--2, .card-grid--3, .card-grid--4 {
      grid-template-columns: 1fr;
    }
  }
  .card-check {
    pointer-events: none;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    top: 0.5rem;
    right: 0.5rem;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.625rem;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    opacity: 0;
    transition: opacity 120ms ease;
    z-index: 2;
  }
  .card.is-selected .card-check, .card[aria-pressed="true"] .card-check, .card[aria-selected="true"] .card-check, .card[aria-checked="true"] .card-check {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .card-check {
      transition: none;
    }
  }
  .card.card-invalid::before, .card[aria-invalid="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 1.5rem solid var(--text-danger);
    border-left: 1.5rem solid transparent;
    pointer-events: none;
    z-index: 2;
  }
  .card-image {
    position: relative;
    display: flex;
    min-height: 12rem;
    color: var(--alpha-white-100);
  }
  .card-image > img, .card-image > svg, .card-image > .card-image__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .card-image__content {
    position: relative;
    z-index: 1;
    margin-top: auto;
    width: 100%;
    padding: 2.5rem 1rem 1rem;
    background: linear-gradient( to top, var(--alpha-black-80) 0%, var(--alpha-black-60) 30%, transparent 85% );
  }
  .card-image .card-title {
    color: var(--alpha-white-100);
  }
  .card-image .card-overline, .card-image .card-description {
    color: var(--alpha-white-70, var(--alpha-white-100));
  }
  .card-image .card-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
  }
}
@layer utilities {
  .credit-card {
    --cc-width: 316px;
    --cc-radius: 5.06cqw;
    --cc-pad: 5.06cqw;
    --cc-bg: linear-gradient(to top right, var(--color-brand-900), var(--color-brand-700));
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
    --cc-scheme-bg: rgb(255 255 255 / 0.1);
    --cc-ring: rgb(255 255 255 / 0.3);
    --cc-backdrop: none;
    --cc-strip: var(--color-neutral-800);
    --cc-grad-a: #a5c0ee;
    --cc-grad-b: #fbc5ec;
    --cc-grad-va: #fbc2eb;
    --cc-grad-vb: #a18cd1;
    --cc-salmon: #f4d9d0;
    --cc-diffusor-1: #ec4899;
    --cc-diffusor-2: #f97316;
    --cc-diffusor-3: #3b82f6;
    --cc-diffusor-4: #22c55e;
    position: relative;
    display: inline-flex;
    width: var(--cc-width);
    max-width: 100%;
    aspect-ratio: 316 / 190;
    container-type: inline-size;
    color: var(--cc-footer);
  }
  .credit-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: var(--cc-pad);
    border-radius: var(--cc-radius);
    background-color: rgb(0 0 0 / 0);
    background-image: var(--cc-bg);
    -webkit-backdrop-filter: var(--cc-backdrop);
    backdrop-filter: var(--cc-backdrop);
    isolation: isolate;
  }
  .credit-card__face::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--cc-ring);
    -webkit-mask-image: linear-gradient(135deg, #fff 0%, rgb(255 255 255 / 0.2) 100%);
    mask-image: linear-gradient(135deg, #fff 0%, rgb(255 255 255 / 0.2) 100%);
  }
  .credit-card__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-inline: 1.27cqw;
    padding-top: 1.27cqw;
  }
  .credit-card__company {
    font-size: 5.06cqw;
    line-height: normal;
    font-weight: 600;
    color: var(--cc-company);
  }
  .credit-card__paypass {
    flex: none;
    width: 6.33cqw;
    height: auto;
    color: var(--cc-paypass);
  }
  .credit-card__footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3.8cqw;
  }
  .credit-card__lines {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2.53cqw;
  }
  .credit-card__meta {
    display: flex;
    align-items: flex-end;
    gap: 1.27cqw;
  }
  .credit-card__holder {
    min-width: 0;
    font-size: 3.8cqw;
    line-height: 1.375;
    font-weight: 600;
    letter-spacing: 0.19cqw;
    text-transform: uppercase;
    word-break: break-word;
    color: var(--cc-footer);
  }
  .credit-card__expiry {
    margin-left: auto;
    font-size: 3.8cqw;
    line-height: normal;
    font-weight: 600;
    letter-spacing: 0.19cqw;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--cc-footer);
  }
  .credit-card__number {
    font-size: 5.06cqw;
    line-height: normal;
    font-weight: 600;
    letter-spacing: 0.316cqw;
    font-variant-numeric: tabular-nums;
    color: var(--cc-footer);
  }
  .credit-card__scheme {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 10.13cqw;
    width: 14.56cqw;
    border-radius: 1.27cqw;
    background-color: var(--cc-scheme-bg);
  }
  .credit-card__scheme svg, .credit-card__scheme img {
    width: 9.49cqw;
    height: auto;
  }
  .credit-card__face::after {
    content: "";
    position: absolute;
    z-index: 0;
    display: none;
    pointer-events: none;
  }
  .credit-card-brand-dark {
    --cc-bg: linear-gradient(to top right, var(--color-brand-900), var(--color-brand-700));
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
    --cc-scheme-bg: rgb(255 255 255 / 0.1);
    --cc-ring: rgb(255 255 255 / 0.3);
  }
  .credit-card-brand-light {
    --cc-bg: none;
    --cc-company: var(--color-neutral-700);
    --cc-footer: var(--color-neutral-700);
    --cc-paypass: var(--color-white);
    --cc-scheme-bg: var(--color-white);
    --cc-ring: rgb(0 0 0 / 0.1);
  }
  .credit-card-brand-light .credit-card__face {
    background-color: var(--color-brand-100);
  }
  .credit-card-gray-dark {
    --cc-bg: linear-gradient(to top right, var(--color-neutral-900), var(--color-neutral-700));
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
    --cc-scheme-bg: rgb(255 255 255 / 0.1);
    --cc-ring: rgb(255 255 255 / 0.3);
  }
  .credit-card-gray-light {
    --cc-bg: none;
    --cc-company: var(--color-neutral-700);
    --cc-footer: var(--color-neutral-700);
    --cc-paypass: var(--color-neutral-400);
    --cc-scheme-bg: var(--color-white);
    --cc-ring: rgb(0 0 0 / 0.1);
  }
  .credit-card-gray-light .credit-card__face {
    background-color: var(--color-neutral-100);
  }
  .credit-card-transparent {
    --cc-bg: linear-gradient(to bottom right, rgb(255 255 255 / 0.3), transparent);
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
    --cc-scheme-bg: rgb(255 255 255 / 0.1);
    --cc-ring: rgb(255 255 255 / 0.3);
    --cc-backdrop: blur(6px);
  }
  .credit-card-transparent .credit-card__face {
    background-color: rgb(0 0 0 / 0.1);
  }
  .credit-card-transparent-gradient {
    --cc-bg: linear-gradient(to bottom right, rgb(255 255 255 / 0.3), transparent);
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
    --cc-scheme-bg: rgb(255 255 255 / 0.1);
    --cc-ring: rgb(255 255 255 / 0.3);
    --cc-backdrop: blur(6px);
  }
  .credit-card-transparent-gradient .credit-card__face {
    background-color: rgb(0 0 0 / 0.1);
  }
  .credit-card-transparent-gradient .credit-card__face::after {
    display: block;
    top: -5.06cqw;
    left: -5.06cqw;
    width: 50.64cqw;
    height: 50.64cqw;
    filter: blur(20.25cqw);
    background-image: radial-gradient(circle at 25% 25%, var(--cc-diffusor-1) 0 40%, transparent 60%), radial-gradient(circle at 75% 25%, var(--cc-diffusor-2) 0 40%, transparent 60%), radial-gradient(circle at 25% 75%, var(--cc-diffusor-3) 0 40%, transparent 60%), radial-gradient(circle at 75% 75%, var(--cc-diffusor-4) 0 40%, transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--cc-diffusor-1) 30%, transparent) 0 40%, transparent 60%), radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--cc-diffusor-2) 50%, transparent) 0 40%, transparent 60%), radial-gradient(circle at 25% 75%, color-mix(in srgb, var(--cc-diffusor-3) 30%, transparent) 0 40%, transparent 60%), radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--cc-diffusor-4) 30%, transparent) 0 40%, transparent 60%);
    }
  }
  .credit-card-transparent-strip, .credit-card-gray-strip, .credit-card-gradient-strip, .credit-card-salmon-strip {
    --cc-scheme-bg: rgb(255 255 255 / 0.1);
    --cc-ring: rgb(255 255 255 / 0.3);
  }
  .credit-card-transparent-strip .credit-card__face::after, .credit-card-gray-strip .credit-card__face::after, .credit-card-gradient-strip .credit-card__face::after, .credit-card-salmon-strip .credit-card__face::after {
    display: block;
    inset-inline: 0;
    bottom: 0;
    height: 50%;
    background-color: var(--cc-strip);
  }
  .credit-card-transparent-strip {
    --cc-bg: linear-gradient(to bottom right, rgb(255 255 255 / 0.3), transparent);
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
    --cc-backdrop: blur(6px);
  }
  .credit-card-gray-strip {
    --cc-bg: none;
    --cc-company: var(--color-neutral-700);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-neutral-400);
  }
  .credit-card-gray-strip .credit-card__face {
    background-color: var(--color-neutral-100);
  }
  .credit-card-gradient-strip {
    --cc-bg: linear-gradient(to bottom, var(--cc-grad-a), var(--cc-grad-b));
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
  }
  .credit-card-salmon-strip {
    --cc-bg: none;
    --cc-company: var(--color-neutral-700);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
  }
  .credit-card-salmon-strip .credit-card__face {
    background-color: var(--cc-salmon);
  }
  .credit-card-gray-strip-vertical, .credit-card-gradient-strip-vertical, .credit-card-salmon-strip-vertical {
    --cc-scheme-bg: rgb(255 255 255 / 0.1);
    --cc-ring: rgb(255 255 255 / 0.3);
  }
  .credit-card-gray-strip-vertical .credit-card__face::after, .credit-card-gradient-strip-vertical .credit-card__face::after, .credit-card-salmon-strip-vertical .credit-card__face::after {
    display: block;
    inset-block: 0;
    left: 0;
    right: 27.85cqw;
    background-color: var(--cc-strip);
  }
  .credit-card-gray-strip-vertical {
    --cc-bg: linear-gradient(to bottom right, rgb(255 255 255 / 0.3), transparent);
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-neutral-400);
  }
  .credit-card-gradient-strip-vertical {
    --cc-bg: linear-gradient(to bottom, var(--cc-grad-va), var(--cc-grad-vb));
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
  }
  .credit-card-salmon-strip-vertical {
    --cc-bg: none;
    --cc-company: var(--color-white);
    --cc-footer: var(--color-white);
    --cc-paypass: var(--color-white);
  }
  .credit-card-salmon-strip-vertical .credit-card__face {
    background-color: var(--cc-salmon);
  }
  .credit-card-xs {
    --cc-width: 200px;
  }
  .credit-card-sm {
    --cc-width: 256px;
  }
  .credit-card-md {
    --cc-width: 316px;
  }
  .credit-card-lg {
    --cc-width: 384px;
  }
  .credit-card-xl {
    --cc-width: 460px;
  }
  .credit-card-fluid {
    --cc-width: 100%;
    display: flex;
  }
  .credit-card-selectable {
    cursor: pointer;
    border: 0;
    padding: 0;
    background: none;
    text-align: inherit;
    font: inherit;
    transition: transform var(--duration-150, 150ms) var(--ease-out, ease), box-shadow var(--duration-150, 150ms) var(--ease-out, ease);
  }
  .credit-card-selectable:hover {
    transform: translateY(-2px);
  }
  .credit-card-selectable:active {
    transform: translateY(0);
  }
  .credit-card-selectable:focus-visible {
    outline: none;
  }
  .credit-card-selectable:focus-visible .credit-card__face::before {
    box-shadow: inset 0 0 0 1px var(--cc-ring), inset 0 0 0 2px var(--border-focus);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .credit-card-selectable[aria-pressed="true"] .credit-card__face::before, .credit-card-selectable[aria-checked="true"] .credit-card__face::before, .credit-card.is-selected .credit-card__face::before {
    box-shadow: inset 0 0 0 1px var(--cc-ring), inset 0 0 0 2px var(--border-focus);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .credit-card__check {
    position: absolute;
    z-index: 3;
    top: 3.8cqw;
    right: 3.8cqw;
    display: none;
    align-items: center;
    justify-content: center;
    width: 6.33cqw;
    height: 6.33cqw;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--bg-brand-solid, var(--color-brand-600));
    color: var(--text-on-brand, var(--color-white));
    font-size: 3.5cqw;
  }
  .credit-card-selectable[aria-pressed="true"] .credit-card__check, .credit-card-selectable[aria-checked="true"] .credit-card__check, .credit-card.is-selected .credit-card__check {
    display: flex;
  }
  .credit-card-selectable[disabled], .credit-card.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.2);
  }
  .credit-card-selectable[disabled]:hover, .credit-card.is-disabled:hover {
    transform: none;
  }
  .credit-card-loading .credit-card__face > * {
    visibility: hidden;
  }
  .credit-card-loading .credit-card__face::after {
    display: block;
    inset: 0;
    z-index: 3;
    background-image: linear-gradient( 100deg, transparent 30%, rgb(255 255 255 / 0.18) 50%, transparent 70% );
    background-size: 200% 100%;
    animation: credit-card-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes credit-card-shimmer {
    0% {
      background-position: 150% 0;
    }
    100% {
      background-position: -150% 0;
    }
  }
  .credit-card-empty .credit-card__face {
    background: var(--bg-card-soft, var(--bg-primary-subtle));
    box-shadow: none;
  }
  .credit-card-empty .credit-card__face::before {
    box-shadow: none;
    border: 1.5px dashed var(--border-primary);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .credit-card-empty .credit-card__company, .credit-card-empty .credit-card__holder, .credit-card-empty .credit-card__expiry, .credit-card-empty .credit-card__number {
    color: var(--text-quaternary);
  }
  .credit-card-empty .credit-card__paypass {
    color: var(--text-quaternary);
  }
  .credit-card-empty .credit-card__scheme {
    background-color: var(--bg-primary);
  }
  .credit-card-error .credit-card__face::before, .credit-card.is-invalid .credit-card__face::before {
    box-shadow: inset 0 0 0 2px var(--dot-danger);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .credit-card-success .credit-card__face::before, .credit-card.is-valid .credit-card__face::before {
    box-shadow: inset 0 0 0 2px var(--dot-success);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .credit-card__status {
    position: absolute;
    z-index: 3;
    top: 3.8cqw;
    left: 3.8cqw;
    display: inline-flex;
    align-items: center;
    gap: 1cqw;
    padding: 1cqw 2.2cqw;
    border-radius: var(--radius-full, 9999px);
    font-size: 3.2cqw;
    font-weight: 600;
    line-height: 1;
    background-color: var(--color-white);
    color: var(--text-primary);
  }
  .credit-card__status.is-danger {
    color: var(--dot-danger);
  }
  .credit-card__status.is-success {
    color: var(--dot-success);
  }
  .credit-card__status.is-warning {
    color: var(--dot-warning);
  }
  @media (prefers-reduced-motion: reduce) {
    .credit-card-selectable {
      transition: none;
    }
    .credit-card-loading .credit-card__face::after {
      animation: none;
    }
  }
}
@layer utilities {
  .banner {
    --_bn-bg: var(--bg-banner);
    --_bn-ring: var(--ring-banner);
    --_bn-edge: var(--border-banner-edge);
    --_bn-title: var(--text-banner-title);
    --_bn-body: var(--text-banner-body);
    --_bn-link: var(--decoration-banner-link);
    --_bn-divider: var(--bg-banner-divider);
    --_bn-icon: var(--icon-banner);
    position: relative;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    background-color: var(--_bn-bg);
    color: var(--_bn-body);
  }
  .banner--brand {
    --_bn-bg: var(--bg-banner-brand);
    --_bn-ring: var(--border-banner-brand);
    --_bn-edge: var(--border-banner-brand);
    --_bn-title: var(--text-banner-brand-title);
    --_bn-body: var(--text-banner-brand-body);
    --_bn-link: var(--decoration-banner-brand-link);
    --_bn-divider: var(--bg-banner-brand-divider);
  }
  .banner:not(.banner--full-width) {
    margin-inline: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      margin: 0;
    }
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--_bn-ring), var(--shadow-lg);
  }
  .banner--brand:not(.banner--full-width) {
    border-top: 1px solid var(--_bn-ring);
    box-shadow: var(--shadow-lg);
  }
  @media (min-width: 768px) {
    .banner--brand:not(.banner--full-width) {
      border-top: 0;
      border-bottom: 1px solid var(--_bn-ring);
    }
  }
  .banner--full-width {
    border-top: 1px solid var(--_bn-edge);
  }
  @media (min-width: 768px) {
    .banner--full-width {
      border-top: 0;
      border-bottom: 1px solid var(--_bn-edge);
    }
  }
  .banner--slim.banner--full-width {
    border-top: 0;
    border-bottom: 1px solid var(--_bn-edge);
  }
  .banner__container {
    margin-inline: auto;
    width: 100%;
    max-width: 80rem;
  }
  .banner--single-action:not(.banner--full-width), .banner--text-field:not(.banner--full-width) {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .banner--single-action.banner--full-width .banner__container, .banner--text-field.banner--full-width .banner__container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .banner--text-field:not(.banner--full-width), .banner--text-field.banner--full-width .banner__container {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .banner--dual-action:not(.banner--full-width) {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 5);
    }
  }
  .banner--dual-action.banner--full-width .banner__container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .banner--slim:not(.banner--full-width) {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .banner--slim.banner--full-width {
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3.5);
    }
  }
  .banner--countdown:not(.banner--full-width) {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: center;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .banner--countdown.banner--full-width .banner__container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: center;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .banner__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      width: 0;
    }
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .banner--dual-action .banner__main {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .banner--text-field .banner__main {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      width: 0;
    }
  }
  .banner__text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .banner--single-action .banner__text {
    gap: calc(var(--spacing) * 0.5);
    overflow: hidden;
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .banner--dual-action .banner__text {
    gap: calc(var(--spacing) * 2);
    overflow: hidden;
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .banner--slim .banner__text {
    width: 0;
    flex: 1;
    gap: calc(var(--spacing) * 0.5);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      justify-content: center;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 1.5);
    }
    @media (width >= 48rem) {
      text-align: center;
    }
  }
  .banner--slim.banner--full-width .banner__text {
    width: auto;
    flex: none;
    @media (width >= 48rem) {
      justify-content: center;
    }
  }
  .banner--countdown .banner__text {
    gap: calc(var(--spacing) * 0.5);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .banner--text-field .banner__text {
    gap: calc(var(--spacing) * 0.5);
    overflow: auto;
  }
  .banner__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--_bn-title);
  }
  .banner__body {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--_bn-body);
  }
  :is(.banner--single-action, .banner--dual-action, .banner--slim, .banner--text-field) .banner__title, :is(.banner--single-action, .banner--dual-action, .banner--slim, .banner--text-field) .banner__body {
    @media (width >= 48rem) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .banner--dual-action .banner__title, .banner--slim .banner__title, .banner--countdown .banner__title, .banner--text-field .banner__title {
    padding-right: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-right: 0;
    }
  }
  .banner__link {
    border-radius: var(--radius-xs);
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--_bn-link);
    text-underline-offset: 3px;
  }
  .banner__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .banner__glyph {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex: none;
    color: var(--_bn-icon);
  }
  .banner--brand .banner__glyph {
    color: var(--text-banner-brand-icon);
  }
  .banner__icon {
    flex: none;
  }
  .banner--text-field .banner__icon {
    display: none;
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .banner__icon--brand {
    background-color: var(--bg-banner-brand-icon);
    color: var(--text-banner-brand-icon);
    box-shadow: inset 0 0 0 1px var(--ring-banner-brand-icon);
  }
  .banner__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .banner--dual-action .banner__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 2);
  }
  .banner__buttons {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column-reverse;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  :is(.banner--single-action, .banner--dual-action).banner--brand .btn-secondary {
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }
  .banner__actions .btn-link {
    color: var(--_bn-title);
  }
  .banner__dismiss-slot {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: center;
  }
  .banner--single-action .banner__dismiss-slot, .banner--dual-action .banner__dismiss-slot, .banner--text-field .banner__dismiss-slot {
    @media (width >= 48rem) {
      position: static;
    }
  }
  .banner--slim.banner--full-width .banner__dismiss-slot {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 1.5);
    }
  }
  .banner--countdown .banner__dismiss-slot {
    @media (width >= 48rem) {
      top: calc(1 / 2 * 100%);
    }
  }
  @media (min-width: 768px) {
    .banner--countdown .banner__dismiss-slot {
      transform: translateY(-50%);
    }
  }
  .banner__dismiss {
    display: inline-flex;
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    flex: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--_bn-body);
    background-color: transparent;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .banner__dismiss:hover {
    background-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--_bn-title) 8%);
    }
    color: var(--_bn-title);
  }
  .banner__dismiss:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .banner__dismiss > i, .banner__dismiss > svg {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .banner__dismiss {
      transition: none;
    }
  }
  .banner__countdown {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .banner__unit {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .banner__unit-box {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: calc(var(--spacing) * 7);
    align-items: center;
    justify-content: center;
    padding: var(--spacing);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    background-color: var(--bg-banner-unit);
    color: var(--text-banner-unit);
    box-shadow: inset 0 0 0 1px var(--ring-banner-unit), var(--shadow-xs);
  }
  .banner--brand .banner__unit-box {
    background-color: transparent;
    color: var(--text-banner-brand-title);
    box-shadow: inset 0 0 0 1px var(--ring-banner-brand-unit);
  }
  .banner__unit-label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--_bn-body);
  }
  .banner__divider {
    display: none;
    height: calc(var(--spacing) * 4);
    width: 1px;
    --tw-border-style: none;
    border-style: none;
    @media (width >= 48rem) {
      display: block;
    }
    background-color: var(--_bn-divider);
  }
  .banner__form {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  @media (min-width: 768px) {
    .banner__form {
      width: 22.5rem;
      flex: none;
    }
  }
  .banner__form .form-control {
    flex: 1;
  }
  .banner {
    transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .banner.is-dismissing {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .banner {
      transition: none;
    }
    .banner.is-dismissing {
      transform: none;
    }
  }
}
@layer utilities {
  .iphone-mockup__screen, .tablet-mockup__screen, .zebra-mockup__screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
  }
  .iphone-mockup--light .iphone-mockup__screen, .tablet-mockup--light .tablet-mockup__screen, .zebra-mockup--light .zebra-mockup__screen {
    background: #fff;
    color: #000;
  }
  .iphone-mockup--dark .iphone-mockup__screen, .tablet-mockup--dark .tablet-mockup__screen, .zebra-mockup--dark .zebra-mockup__screen {
    background: #000;
    color: #fff;
  }
  .iphone-mockup__image, .tablet-mockup__image, .zebra-mockup__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .iphone-mockup {
    --_ip-bezel: #0b0d0d;
    --_ip-body-hi: #17191b;
    --_ip-rail: #2c2f33;
    --_ip-radius: 3rem;
    --_ip-inset: 0.42rem;
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 9 / 19.5;
    padding: var(--_ip-inset);
    background: linear-gradient(150deg, var(--_ip-body-hi), var(--_ip-bezel) 62%);
    border-radius: var(--_ip-radius);
    box-shadow: inset 0 0 0 1.5px var(--_ip-rail), inset 0 0 0 3px #000, var(--shadow-xl, 0 24px 48px -16px rgb(0 0 0 / 0.45));
  }
  .iphone-mockup::before, .iphone-mockup::after {
    content: "";
    position: absolute;
    width: 2.5px;
    background: var(--_ip-rail);
    border-radius: 2px;
  }
  .iphone-mockup::before {
    right: -1.5px;
    top: 30%;
    height: 13%;
  }
  .iphone-mockup::after {
    left: -1.5px;
    top: 27%;
    height: 16%;
  }
  .iphone-mockup__screen {
    border-radius: calc(var(--_ip-radius) - var(--_ip-inset));
  }
  .iphone-mockup__notch {
    position: absolute;
    top: calc(var(--_ip-inset) + 0.65rem);
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 1.35rem;
    background: #000;
    border-radius: var(--radius-full, 9999px);
    z-index: 2;
  }
  .iphone-mockup__notch::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14%;
    transform: translateY(-50%);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: var(--radius-full, 9999px);
    background: radial-gradient(circle at 35% 35%, #33384a, #000 68%);
  }
  .iphone-mockup--sm {
    max-width: 210px;
  }
  .iphone-mockup--md {
    max-width: 270px;
  }
  .iphone-mockup--lg {
    max-width: 340px;
  }
  .tablet-mockup {
    --_tb-bezel: #0b0d0d;
    --_tb-body-hi: #17191b;
    --_tb-rail: #2c2f33;
    --_tb-radius: 1.9rem;
    --_tb-inset: 0.62rem;
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    padding: var(--_tb-inset);
    background: linear-gradient(150deg, var(--_tb-body-hi), var(--_tb-bezel) 62%);
    border-radius: var(--_tb-radius);
    box-shadow: inset 0 0 0 1.5px var(--_tb-rail), var(--shadow-xl, 0 24px 48px -16px rgb(0 0 0 / 0.45));
  }
  .tablet-mockup::before {
    content: "";
    position: absolute;
    top: -2px;
    right: 20%;
    width: 12%;
    height: 2.5px;
    background: var(--_tb-rail);
    border-radius: 2px;
  }
  .tablet-mockup::after {
    content: "";
    position: absolute;
    right: -1.5px;
    top: 10%;
    width: 2.5px;
    height: 7%;
    background: var(--_tb-rail);
    border-radius: 2px;
    box-shadow: 0 1.6rem 0 0 var(--_tb-rail);
  }
  .tablet-mockup__screen {
    border-radius: calc(var(--_tb-radius) - var(--_tb-inset));
  }
  .tablet-mockup__camera {
    position: absolute;
    top: calc((var(--_tb-inset) - 0.34rem) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: 0.34rem;
    height: 0.34rem;
    border-radius: var(--radius-full, 9999px);
    background: radial-gradient(circle at 35% 35%, #33384a, #000 68%);
    z-index: 2;
  }
  .tablet-mockup--sm {
    max-width: 240px;
  }
  .tablet-mockup--md {
    max-width: 320px;
  }
  .tablet-mockup--lg {
    max-width: 420px;
  }
  .zebra-mockup {
    --_zb-body: #14171a;
    --_zb-body-2: #0c0e10;
    --_zb-rail: #2b2f33;
    --_zb-radius: 1.15rem;
    position: relative;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 240 / 470;
    padding: 2.5rem 0.9rem 3.2rem;
    background: linear-gradient(160deg, #1b1f22, var(--_zb-body-2) 72%);
    border-radius: var(--_zb-radius);
    box-shadow: inset 0 0 0 1.5px var(--_zb-rail), inset 0 0 0 6px var(--_zb-body),  var(--shadow-xl, 0 24px 48px -16px rgb(0 0 0 / 0.45));
  }
  .zebra-mockup::before, .zebra-mockup::after {
    content: "";
    position: absolute;
    top: 36%;
    width: 4px;
    height: 13%;
    background: var(--text-warning);
    border-radius: 2px;
  }
  .zebra-mockup::before {
    right: -2px;
  }
  .zebra-mockup::after {
    left: -2px;
  }
  .zebra-mockup__scanner {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 46%;
    height: 0.72rem;
    border-radius: 4px;
    background: linear-gradient(#3a0d10, #1a0507);
    box-shadow: inset 0 0 0 1px #000, inset 0 1px 3px rgb(255 60 60 / 0.25);
    z-index: 2;
  }
  .zebra-mockup__screen {
    border-radius: 0.4rem;
  }
  .zebra-mockup__trigger {
    position: absolute;
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 1.5rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--text-warning);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.25);
    z-index: 2;
  }
  .zebra-mockup__trigger::before, .zebra-mockup__trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--_zb-rail);
  }
  .zebra-mockup__trigger::before {
    left: -1.1rem;
  }
  .zebra-mockup__trigger::after {
    right: -1.1rem;
  }
  .zebra-mockup--sm {
    max-width: 190px;
  }
  .zebra-mockup--md {
    max-width: 240px;
  }
  .zebra-mockup--lg {
    max-width: 300px;
  }
}
@layer components {
  @keyframes collapse-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes collapse-slide-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes collapse-spin {
    to {
      transform: rotate(360deg);
    }
  }
}
@layer utilities {
  .divider-wrapper {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
  }
  .divider {
    flex-grow: 1;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-primary);
  }
  .divider-secondary {
    border-color: var(--border-divider);
  }
  .divider-content {
    margin-inline: calc(var(--spacing) * 4);
    flex-shrink: 1;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-divider);
  }
  .divider-simple {
    width: 100%;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-primary);
  }
  .divider-simple.divider-secondary {
    border-color: var(--border-divider);
  }
  .divider-vertical {
    height: 100%;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--border-primary);
  }
  .divider-vertical.divider-secondary {
    border-color: var(--border-divider);
  }
  .divider-inset {
    margin-inline: calc(var(--spacing) * 4);
  }
  .divider-inset-sm {
    margin-inline: calc(var(--spacing) * 2);
  }
  .divider-inset-lg {
    margin-inline: calc(var(--spacing) * 8);
  }
  .divider-vertical.divider-inset {
    margin-block: calc(var(--spacing) * 4);
  }
  .divider-vertical.divider-inset-sm {
    margin-block: calc(var(--spacing) * 2);
  }
  .divider-vertical.divider-inset-lg {
    margin-block: calc(var(--spacing) * 8);
  }
  .divider-strong {
    border-color: var(--border-divider-strong);
  }
  .divider-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .divider-dotted {
    --tw-border-style: dotted;
    border-style: dotted;
  }
  .divider-subtle {
    border-color: var(--border-divider-subtle);
  }
  .divider-danger {
    border-color: var(--border-danger);
  }
  .divider-warning {
    border-color: var(--border-warning);
  }
  .divider-success {
    border-color: var(--border-success);
  }
  .divider-info {
    border-color: var(--border-info);
  }
  .divider-indigo {
    border-color: var(--border-indigo);
  }
  .divider-purple {
    border-color: var(--border-purple);
  }
  .divider-pink {
    border-color: var(--border-pink);
  }
  .divider-teal {
    border-color: var(--border-teal);
  }
  .divider-mint {
    border-color: var(--border-mint);
  }
  .border-default, .border-divider {
    border-color: var(--border-divider) !important;
  }
  .border-success {
    border-color: var(--border-success);
  }
  .border-info {
    border-color: var(--border-info);
  }
  .border-purple {
    border-color: var(--border-purple);
  }
  .border-pink {
    border-color: var(--border-pink);
  }
  .border-danger {
    border-color: var(--border-danger);
  }
  .border-warning {
    border-color: var(--border-warning);
  }
  .divider-text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-divider, var(--text-tertiary));
  }
  .divider-text::before, .divider-text::after {
    content: "";
    flex: 1;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-divider, var(--border-primary));
  }
  .divider-text--subtle::before, .divider-text--subtle::after {
    border-color: var(--border-primary-subtle, var(--border-secondary));
  }
  .divider-text--dashed::before, .divider-text--dashed::after {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .divider-action {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .divider-action::before, .divider-action::after {
    content: "";
    flex: 1;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-divider, var(--border-primary));
  }
  .divider-action__content {
    flex-shrink: 0;
  }
  .divider-band {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 2);
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-color: var(--border-divider);
    color: var(--text-divider, var(--text-tertiary));
  }
  .divider-fill {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-secondary);
    color: var(--text-divider, var(--text-tertiary));
    border-radius: var(--radius-lg);
  }
  .divider-band.divider-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .divider-band.divider-dotted {
    --tw-border-style: dotted;
    border-style: dotted;
  }
  .divider-band.divider-subtle {
    border-color: var(--border-divider-subtle);
  }
  .divider-band.divider-strong {
    border-color: var(--border-divider-strong);
  }
  .divider-section {
    height: 1px;
    width: 100%;
    flex-shrink: 0;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--border-divider);
  }
  .divider-section.divider-strong {
    background-color: var(--border-divider-strong);
  }
  .divider-section.divider-subtle {
    background-color: var(--border-divider-subtle);
  }
  .divider-section.divider-danger {
    background-color: var(--border-danger);
  }
  .divider-section.divider-warning {
    background-color: var(--border-warning);
  }
  .divider-section.divider-success {
    background-color: var(--border-success);
  }
  .divider-section.divider-info {
    background-color: var(--border-info);
  }
  .divider-section.divider-indigo {
    background-color: var(--border-indigo);
  }
  .divider-section.divider-purple {
    background-color: var(--border-purple);
  }
  .divider-section.divider-pink {
    background-color: var(--border-pink);
  }
  .divider-section.divider-teal {
    background-color: var(--border-teal);
  }
  .divider-section.divider-mint {
    background-color: var(--border-mint);
  }
}
@layer utilities {
  .thumbnail-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-in);
    opacity: 0.9;
    cursor: pointer;
    background-color: var(--bg-thumbnail, transparent);
    border: 1px solid var(--border-thumbnail, var(--border-default));
  }
  .thumbnail-image:hover {
    opacity: 1;
  }
  .thumbnail-link {
    display: block;
    height: 100%;
    width: 100%;
  }
  .thumbnail-img {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background-color: var(--bg-thumbnail-img);
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  .thumbnail-img.is-loaded {
    opacity: 1;
  }
  .thumbnail-image::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient( 90deg, var(--bg-skeleton, var(--utility-neutral-100)) 0%, var(--bg-skeleton-highlight, var(--utility-neutral-50)) 50%, var(--bg-skeleton, var(--utility-neutral-100)) 100% );
    background-size: 200% 100%;
    animation: thumbnail-shimmer 1.5s ease-in-out infinite;
    z-index: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  .thumbnail-image.is-loaded::before {
    opacity: 0;
    pointer-events: none;
  }
  @keyframes thumbnail-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  :is([data-bs-theme="dark"], .dark) .thumbnail-image::before {
    background: linear-gradient( 90deg, var(--bg-skeleton, var(--utility-neutral-800)) 0%, var(--bg-skeleton-highlight, var(--utility-neutral-750)) 50%, var(--bg-skeleton, var(--utility-neutral-800)) 100% );
    background-size: 200% 100%;
  }
  .thumbnail-remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    align-items: center;
    justify-content: center;
    border-top-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    padding: var(--spacing);
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-in);
    background-color: var(--bg-thumbnail-remove);
    color: var(--text-thumbnail-remove);
    border: 1px solid var(--border-thumbnail-remove);
  }
  .thumbnail-remove-btn:hover {
    background-color: var(--bg-thumbnail-remove-hover);
  }
  .thumbnail-sm {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
  }
  .thumbnail-md {
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
  }
  .thumbnail-lg {
    height: calc(var(--spacing) * 32);
    width: calc(var(--spacing) * 32);
  }
  .thumbnail-xl {
    height: calc(var(--spacing) * 40);
    width: calc(var(--spacing) * 40);
  }
  .thumbnail-preview {
    position: relative;
    height: 64px;
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-lg);
    background-color: var(--bg-gallery-item-image);
    color: var(--text-gallery);
    box-shadow: inset 0 0 0 1px var(--border-gallery-item-hover);
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
  .thumbnail-preview:hover {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .thumbnail-preview.active {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .gallery-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-content: start;
    gap: 1rem;
    min-height: 100%;
    background-color: var(--bg-gallery);
    color: var(--text-gallery);
  }
  .gallery-view:has(> .empty-state) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
  }
  .gallery-group-header {
    position: sticky;
    z-index: 10;
    grid-column: 1 / -1;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    top: -0.75rem;
    margin: 0 -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-color: var(--bg-gallery);
    color: var(--text-gallery-header);
  }
  .gallery-view--compact {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
  }
  .gallery-view--dense {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.375rem;
  }
  .gallery-view--spacious {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  .gallery-view--masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
  }
  @supports not (grid-template-rows: masonry) {
    .gallery-view--masonry {
      display: block;
      column-count: 4;
      column-gap: 1rem;
    }
    .gallery-view--masonry > .gallery-item {
      display: inline-block;
      width: 100%;
      margin-bottom: 1rem;
      break-inside: avoid;
    }
    @media (max-width: 1280px) {
      .gallery-view--masonry {
        column-count: 3;
      }
    }
    @media (max-width: 900px) {
      .gallery-view--masonry {
        column-count: 2;
      }
    }
    @media (max-width: 600px) {
      .gallery-view--masonry {
        column-count: 1;
      }
    }
  }
  .gallery-view--card .gallery-item {
    background-color: var(--bg-panel, var(--alpha-white-100));
    border: none;
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: inset 0 0 0 1px var(--border-gallery-item-hover), var(--shadow-gallery-item);
    padding: 8px;
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
  }
  .gallery-view--card .gallery-item:hover {
    box-shadow: inset 0 0 0 1px var(--border-gallery-item-hover), var(--shadow-gallery-item-hover);
    transform: translateY(-1px);
  }
  .gallery-view--card .gallery-item.is-selected, .gallery-view--card .gallery-item[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-gallery-item-hover);
  }
  .gallery-view--minimal .gallery-item__body {
    display: none;
  }
  .gallery-item {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-gallery-item);
    border: 1px solid var(--border-gallery-item);
    color: var(--text-gallery);
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
  }
  .gallery-item:hover {
    background-color: var(--bg-gallery-item-hover);
    border-color: var(--border-gallery-item-hover);
  }
  .gallery-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .gallery-item.is-selected, .gallery-item[aria-pressed="true"] {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 10%, transparent);
    }
    border-color: var(--border-focus);
  }
  .gallery-item.is-selected .gallery-item__select i.fa-circle, .gallery-item[aria-pressed="true"] .gallery-item__select i.fa-circle {
    display: none;
  }
  .gallery-item.is-selected .gallery-item__select i.fa-circle-check, .gallery-item[aria-pressed="true"] .gallery-item__select i.fa-circle-check {
    display: inline-block;
  }
  .gallery-item.is-disabled, .gallery-item[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }
  @media (prefers-reduced-motion: reduce) {
    .gallery-item, .gallery-view--card .gallery-item {
      transition: none;
    }
  }
  .gallery-item__media {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    background-color: var(--bg-gallery-item-image);
  }
  .gallery-item--aspect-square .gallery-item__media {
    aspect-ratio: 1 / 1;
  }
  .gallery-item--aspect-portrait .gallery-item__media {
    aspect-ratio: 3 / 4;
  }
  .gallery-item--aspect-video .gallery-item__media {
    aspect-ratio: 16 / 9;
  }
  .gallery-item--aspect-wide .gallery-item__media {
    aspect-ratio: 21 / 9;
  }
  .gallery-item__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  .gallery-view.is-enhanced .gallery-item__img:not(.is-loaded) {
    opacity: 0;
  }
  .gallery-item__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    opacity: 0.4;
    font-size: 28px;
  }
  .gallery-item__broken {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 2);
    text-align: center;
    background-color: var(--bg-gallery-item-image);
    color: var(--text-tertiary);
  }
  .gallery-item__broken i {
    font-size: 22px;
    opacity: 0.55;
  }
  .gallery-item__broken span {
    font-size: 11px;
    opacity: 0.7;
  }
  .gallery-item.is-broken .gallery-item__img, .gallery-item.is-broken .gallery-item__placeholder {
    display: none;
  }
  .gallery-item.is-broken .gallery-item__broken {
    display: flex;
    &.collapse.show {
      display: flex;
    }
  }
  .gallery-item.is-loading .gallery-item__media::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, var(--bg-skeleton, var(--utility-neutral-100)) 0%, var(--bg-skeleton-highlight, var(--utility-neutral-50)) 50%, var(--bg-skeleton, var(--utility-neutral-100)) 100% );
    background-size: 200% 100%;
    animation: gallery-item-shimmer 1.5s ease-in-out infinite;
  }
  @keyframes gallery-item-shimmer {
    to {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .gallery-item.is-loading .gallery-item__media::after {
      animation: none;
    }
    .gallery-item__img {
      transition: none;
    }
  }
  .gallery-item__badge {
    position: absolute;
    top: calc(var(--spacing) * 2);
    left: calc(var(--spacing) * 2);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--alpha-black-60);
    color: var(--alpha-white-100);
    backdrop-filter: blur(6px);
    z-index: 2;
  }
  .gallery-item__badge--success {
    background-color: var(--bg-success-solid);
    color: var(--alpha-white-100);
  }
  .gallery-item__badge--warning {
    background-color: var(--bg-warning-solid);
    color: var(--alpha-black-100);
  }
  .gallery-item__badge--danger {
    background-color: var(--bg-danger-solid);
    color: var(--alpha-white-100);
  }
  .gallery-item__badge--info {
    background-color: var(--bg-info-solid);
    color: var(--alpha-white-100);
  }
  .gallery-item__file-type {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    text-transform: uppercase;
    background-color: var(--alpha-black-50);
    color: var(--alpha-white-100);
    backdrop-filter: blur(6px);
    z-index: 2;
    letter-spacing: 0.04em;
  }
  .gallery-item__select {
    position: absolute;
    top: calc(var(--spacing) * 2);
    left: calc(var(--spacing) * 2);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: var(--alpha-black-40);
    color: var(--alpha-white-100);
    border: 0;
    font-size: 14px;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
    z-index: 3;
    backdrop-filter: blur(6px);
  }
  .gallery-item__select i.fa-circle-check {
    display: none;
  }
  .gallery-item:hover .gallery-item__select, .gallery-item:focus-within .gallery-item__select, .gallery-item.is-selected .gallery-item__select, .gallery-item[aria-pressed="true"] .gallery-item__select {
    opacity: 1;
  }
  .gallery-item.is-selected .gallery-item__select, .gallery-item[aria-pressed="true"] .gallery-item__select {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .gallery-item__media:has(.gallery-item__badge) .gallery-item__select {
    left: auto;
    right: 2.25rem;
  }
  .gallery-item__actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    background: linear-gradient(to top, var(--alpha-black-60) 0%, transparent 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
    z-index: 2;
  }
  .gallery-item:hover .gallery-item__actions, .gallery-item:focus-within .gallery-item__actions {
    opacity: 1;
    transform: translateY(0);
  }
  .gallery-item__action {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background-color: var(--alpha-white-20);
    color: var(--alpha-white-100);
    border-radius: 6px;
    font-size: 12px;
    backdrop-filter: blur(6px);
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .gallery-item__action:hover {
    background-color: var(--alpha-white-30);
  }
  .gallery-item__action:focus-visible {
    outline: 2px solid var(--alpha-white-100);
    outline-offset: 1px;
  }
  @media (prefers-reduced-motion: reduce) {
    .gallery-item__actions, .gallery-item__select {
      transition: opacity 0ms;
      transform: none;
    }
  }
  .gallery-item__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    padding-inline: var(--spacing);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: var(--spacing);
  }
  .gallery-item__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-gallery);
  }
  .gallery-item__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-gallery-muted);
  }
  .gallery-item__meta {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-gallery-muted);
  }
  .gallery-item__meta i {
    font-size: 10px;
    opacity: 0.6;
  }
  .gallery-view--compact .gallery-item__body {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .gallery-view--compact .gallery-item__title {
    font-size: 11px;
  }
  .gallery-view--compact .gallery-item__subtitle {
    display: none;
  }
  .gallery-view--dense .gallery-item__body {
    display: none;
  }
  .gallery-item--upload {
    background-color: var(--bg-gallery-item-upload);
    border: 1.5px dashed var(--border-gallery-item-upload);
    border-radius: var(--radius-lg, 0.5rem);
  }
  .gallery-item--upload .gallery-item__media {
    background-color: transparent;
    flex-direction: column;
    gap: 4px;
    color: var(--text-tertiary);
  }
  .gallery-item--upload:hover {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 8%, transparent);
    }
    border-color: var(--border-focus);
    color: var(--border-focus);
  }
  .gallery-item--upload.is-dragover {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 12%, transparent);
    }
    border-color: var(--border-focus);
    border-style: solid;
    color: var(--border-focus);
  }
  .gallery-item--upload .upload-icon {
    font-size: 24px;
    opacity: 0.7;
  }
  .gallery-item--upload .upload-label {
    font-size: 11px;
    font-weight: 500;
  }
  .gallery-item--upload .upload-hint {
    font-size: 10px;
    opacity: 0.65;
  }
  .gallery-view > .gallery-empty {
    grid-column: 1 / -1;
  }
  .gallery-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    cursor: pointer;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background-color: transparent;
    border: none;
    color: var(--text-gallery-card);
    z-index: 0;
  }
  .gallery-card::before {
    content: "";
    pointer-events: none;
    position: absolute;
    border-radius: var(--radius-xl);
    inset: 0;
    background-color: transparent;
    transition: all var(--duration-normal) var(--ease-out);
    z-index: -1;
  }
  .gallery-card:hover::before {
    background-color: var(--bg-gallery-card-hover);
    inset: -8px -8px 0 -8px;
  }
  .gallery-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .gallery-card-image {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    aspect-ratio: 4/3;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
  }
  .gallery-card-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  .gallery-card-image img.is-loaded {
    opacity: 1;
  }
  .gallery-card-image .fa-image {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    opacity: 20%;
    color: var(--text-tertiary);
  }
  .gallery-card-image::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient( 90deg, var(--bg-skeleton, var(--utility-neutral-100)) 0%, var(--bg-skeleton-highlight, var(--utility-neutral-50)) 50%, var(--bg-skeleton, var(--utility-neutral-100)) 100% );
    background-size: 200% 100%;
    animation: thumbnail-shimmer 1.5s ease-in-out infinite;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  .gallery-card-image.is-loaded::after {
    opacity: 0;
  }
  :is([data-bs-theme="dark"], .dark) .gallery-card-image::after {
    background: linear-gradient( 90deg, var(--bg-skeleton, var(--utility-neutral-800)) 0%, var(--bg-skeleton-highlight, var(--utility-neutral-750)) 50%, var(--bg-skeleton, var(--utility-neutral-800)) 100% );
    background-size: 200% 100%;
  }
  .gallery-carousel {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .gallery-carousel__slide {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
    will-change: opacity, transform;
  }
  .gallery-carousel__slide.is-active {
    position: relative;
    height: 100%;
    width: 100%;
    opacity: 1;
    transform: translateX(0);
  }
  .gallery-carousel__slide.is-entering-next {
    transform: translateX(30%);
  }
  .gallery-carousel__slide.is-entering-prev {
    transform: translateX(-30%);
  }
  .gallery-carousel__slide.is-exiting-next {
    transform: translateX(-30%);
    opacity: 0;
  }
  .gallery-carousel__slide.is-exiting-prev {
    transform: translateX(30%);
    opacity: 0;
  }
  .gallery-carousel__prev, .gallery-carousel__next {
    position: absolute;
    top: calc(1 / 2 * 100%);
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transition-duration: var(--duration-normal);
    background: var(--alpha-black-40);
    color: var(--alpha-white-100);
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
  }
  .gallery-carousel__prev {
    left: 6px;
  }
  .gallery-carousel__next {
    right: 6px;
  }
  .gallery-card:hover .gallery-carousel__prev, .gallery-card:hover .gallery-carousel__next {
    opacity: 1;
  }
  .gallery-carousel__prev:focus-visible, .gallery-carousel__next:focus-visible {
    opacity: 1;
    outline: 2px solid var(--alpha-white-100);
    outline-offset: 1px;
  }
  .gallery-carousel__prev:hover, .gallery-carousel__next:hover {
    background: var(--alpha-black-60);
  }
  .gallery-carousel__loader {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  .gallery-carousel__loader.is-active {
    opacity: 1;
  }
  .gallery-carousel__loader::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--alpha-white-30);
    border-top-color: var(--alpha-white-80);
    border-radius: 50%;
    animation: gallery-spin 0.6s linear infinite;
  }
  @keyframes gallery-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .gallery-carousel__slide, .gallery-carousel__prev, .gallery-carousel__next, .gallery-card-image img {
      transition: none;
    }
    .gallery-carousel__loader::after {
      animation: none;
    }
  }
  @keyframes gallery-card-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .gallery-card.is-entering {
    animation: gallery-card-enter var(--duration-slow) var(--ease-out) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .gallery-card.is-entering {
      animation: none;
      opacity: 1;
    }
  }
  .gallery-card-skeleton {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .gallery-card-skeleton .skeleton-image {
    display: block;
    --skeleton-shimmer-duration: 1.5s;
    border-radius: var(--radius-sm);
    background: linear-gradient( 90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63% );
    background-size: 200% 100%;
    animation: shimmer var(--skeleton-shimmer-duration) var(--ease-default) infinite;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
  }
  .gallery-card-skeleton .skeleton-info {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
  }
  .gallery-card-skeleton .skeleton-info .skeleton--text:first-child {
    height: calc(var(--spacing) * 3.5);
    width: calc(4 / 5 * 100%);
  }
  .gallery-card-skeleton .skeleton-info .skeleton--text:last-child {
    height: calc(var(--spacing) * 2.5);
    width: calc(1 / 2 * 100%);
  }
  .gallery-card-skeleton .skeleton-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .gallery-card-skeleton .skeleton-footer .skeleton--text:first-child {
    height: calc(var(--spacing) * 2.5);
    width: calc(2 / 5 * 100%);
  }
  .gallery-card-skeleton .skeleton-footer .skeleton--text:last-child {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 8);
  }
  .gallery-card-info {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-grow: 1;
    cursor: pointer;
    flex-direction: column;
    color: var(--text-gallery-card);
  }
  .gallery-card-header {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 2);
  }
  .gallery-card-number {
    grid-column: span 3 / span 3;
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing);
    color: var(--text-gallery-card-number);
  }
  .gallery-card-date {
    grid-column: span 9 / span 9;
    text-align: right;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--text-gallery-card-date);
  }
  .gallery-card-refrow {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: baseline;
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 2);
  }
  .gallery-card-reference {
    grid-column: span 6 / span 6;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    line-height: 1.55;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    line-height: 1.5;
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-gallery-card-ref);
  }
  .gallery-card-notes {
    margin-top: calc(var(--spacing) * 2);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
    color: var(--text-gallery-card-notes);
  }
}
@layer components {
  @keyframes carousel-skeleton {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 100% 0;
    }
  }
}
@layer utilities {
  .video-player {
    --vp-radius: var(--radius-2xl);
    --vp-chrome-fg: var(--alpha-white-100);
    --vp-chrome-hover: var(--alpha-white-20);
    --vp-chrome-active: var(--alpha-white-30);
    --vp-track: var(--alpha-white-30);
    --vp-buffered: var(--alpha-white-50);
    --vp-fill: var(--alpha-white-100);
    --vp-scrim: linear-gradient(to top, var(--alpha-black-20), transparent);
    --vp-video-bg: var(--alpha-black-100);
    --vp-poster-glass: var(--alpha-white-30);
    --vp-poster-glass-hover: var(--alpha-white-40);
    --vp-poster-overlay: var(--alpha-black-10);
    --vp-focus: var(--border-focus);
    --vp-ring-on-media: var(--alpha-white-100);
    --vp-duration: var(--duration-normal, 200ms);
    --vp-ease-in: var(--ease-in, cubic-bezier(0.4, 0, 1, 1));
    --vp-ease-out: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
    position: relative;
    display: block;
    border-radius: var(--vp-radius);
    overflow: hidden;
  }
  .video-player:has(.video-player__video:focus-visible), .video-player.is-video-focus {
    overflow: visible;
    outline: 2px solid var(--vp-focus);
    outline-offset: 4px;
  }
  .video-player__video {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: inherit;
    background-color: var(--vp-video-bg);
    outline: 1px solid var(--alpha-black-10);
    outline-offset: -1px;
  }
  .video-player.is-enhanced .video-player__video::-webkit-media-controls {
    display: none !important;
  }
  .video-player__poster {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: pointer;
    border-radius: inherit;
    transition: opacity var(--duration-slow, 300ms) var(--vp-ease-in), visibility var(--duration-slow, 300ms) var(--vp-ease-in);
  }
  .video-player.is-started .video-player__poster {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .video-player__poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }
  .video-player__poster-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video-player__poster-play > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    color: var(--vp-chrome-fg);
    background-color: var(--vp-poster-glass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: scale(1);
    transition: background-color var(--duration-fast, 100ms) linear, transform var(--duration-slower, 500ms) var(--vp-ease-out);
  }
  .video-player__poster:hover .video-player__poster-play > span {
    background-color: var(--vp-poster-glass-hover);
  }
  .video-player__poster-play svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
    pointer-events: none;
  }
  .video-player__poster-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--vp-poster-overlay);
    outline: 2px solid var(--alpha-black-10);
    outline-offset: -1px;
    pointer-events: none;
  }
  .video-player__controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
    background-image: var(--vp-scrim);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity var(--duration-fast, 150ms) var(--vp-ease-in), transform var(--duration-fast, 150ms) var(--vp-ease-in);
    will-change: transform, opacity;
  }
  .video-player:hover .video-player__controls, .video-player:focus-within .video-player__controls, .video-player.is-controls-visible .video-player__controls {
    opacity: 1;
    transform: translateY(0);
    transition-duration: var(--vp-duration);
    transition-timing-function: var(--vp-ease-out);
  }
  .video-player__controls-row {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }
  .video-player__controls {
    text-shadow: 0 1px 2px var(--alpha-black-50);
  }
  .video-player__btn svg, .video-player__poster-play svg {
    filter: drop-shadow(0 1px 1.5px var(--alpha-black-50));
  }
  .video-player__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    min-width: 2rem;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--vp-chrome-fg);
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast, 100ms) linear, backdrop-filter var(--duration-fast, 100ms) linear;
  }
  .video-player__btn:hover {
    background-color: var(--vp-chrome-hover);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .video-player__btn:active {
    background-color: var(--vp-chrome-active);
  }
  .video-player__btn:focus-visible {
    outline: 2px solid var(--vp-ring-on-media);
    outline-offset: 2px;
  }
  .video-player__btn svg {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
  }
  .video-player__btn svg[data-vp-fill] {
    fill: currentColor;
  }
  .video-player__btn svg[data-vp-stroke] {
    fill: none;
    stroke: currentColor;
  }
  .video-player__btn--play .video-player__glyph {
    transition: transform var(--duration-fast, 100ms) linear, opacity var(--duration-fast, 100ms) linear;
  }
  .video-player__btn--play .video-player__glyph--pause {
    position: absolute;
  }
  .video-player__btn--play:active .video-player__glyph {
    transform: scale(0.8);
  }
  .video-player__glyph--play {
    transform: scale(1);
    opacity: 1;
  }
  .video-player__glyph--pause {
    transform: scale(0.8);
    opacity: 0;
    pointer-events: none;
  }
  .video-player.is-playing .video-player__glyph--play {
    transform: scale(0.8);
    opacity: 0;
    pointer-events: none;
  }
  .video-player.is-playing .video-player__glyph--pause {
    transform: scale(1);
    opacity: 1;
    position: static;
  }
  .video-player__btn--mute .video-player__glyph--volume-x {
    display: none;
  }
  .video-player.is-muted .video-player__btn--mute .video-player__glyph--volume {
    display: none;
  }
  .video-player.is-muted .video-player__btn--mute .video-player__glyph--volume-x {
    display: inline;
  }
  .video-player__btn--fullscreen .video-player__glyph--minimize {
    display: none;
  }
  .video-player.is-fullscreen .video-player__btn--fullscreen .video-player__glyph--maximize {
    display: none;
  }
  .video-player.is-fullscreen .video-player__btn--fullscreen .video-player__glyph--minimize {
    display: inline;
  }
  .video-player__btn--captions.is-active {
    background-color: var(--vp-chrome-active);
  }
  .video-player__volume {
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast, 100ms) linear;
  }
  .video-player__volume:hover {
    background-color: var(--vp-chrome-hover);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .video-player__volume .video-player__btn:hover {
    background-color: transparent;
    backdrop-filter: none;
  }
  .video-player__volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 2.75rem;
    height: 0.25rem;
    border-radius: var(--radius-full);
    background-color: var(--vp-track);
    background-image: linear-gradient( to right, var(--vp-fill) var(--vp-volume, 100%), transparent var(--vp-volume, 100%) );
    cursor: pointer;
    outline: none;
  }
  .video-player__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.75rem;
    height: 0.75rem;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--vp-fill);
  }
  .video-player__volume-slider::-moz-range-thumb {
    width: 0.75rem;
    height: 0.75rem;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--vp-fill);
  }
  .video-player__volume-slider:focus-visible {
    outline: 2px solid var(--vp-ring-on-media);
    outline-offset: 2px;
  }
  .video-player__timeline {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.5rem;
  }
  .video-player__time {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--vp-chrome-fg);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
  }
  .video-player__progress {
    position: relative;
    flex: 1 1 0%;
    cursor: pointer;
    padding-block: 2rem;
    margin-block: -2rem;
    outline: none;
  }
  .video-player__progress:focus-visible .video-player__progress-track {
    outline: 2px solid var(--vp-ring-on-media);
    outline-offset: 4px;
  }
  .video-player__progress-track {
    position: relative;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--vp-track);
  }
  .video-player__progress-buffered {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--vp-buffered);
    pointer-events: none;
  }
  .video-player__progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 0.5rem;
    width: 0;
    border-radius: var(--radius-full);
    background-color: var(--vp-fill);
    pointer-events: none;
  }
  .video-player__progress-cursor {
    position: absolute;
    top: 50%;
    height: 2rem;
    width: 1px;
    transform: translateY(-50%);
    background-color: var(--vp-track);
    opacity: 0;
    transition: opacity var(--duration-fast, 100ms) linear;
    pointer-events: none;
  }
  .video-player__progress-tip {
    position: absolute;
    bottom: 1.5rem;
    transform: translate(-50%, 0.5rem);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vp-chrome-fg);
    opacity: 0;
    white-space: nowrap;
    transition: opacity var(--duration-slow, 300ms) cubic-bezier(0.4, 0, 0.6, 1), transform var(--duration-slow, 300ms) cubic-bezier(0.4, 0, 0.6, 1);
    pointer-events: none;
  }
  .video-player__progress:hover .video-player__progress-cursor {
    opacity: 1;
  }
  .video-player__progress:hover .video-player__progress-tip {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .video-player__btn--speed {
    gap: 0;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .video-player__btn--speed svg {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.125rem;
  }
  .video-player__status {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: var(--vp-chrome-fg);
    background-color: var(--alpha-black-40);
    border-radius: inherit;
  }
  .video-player.is-loading .video-player__status--loading, .video-player.is-error .video-player__status--error, .video-player.is-empty .video-player__status--empty {
    display: flex;
  }
  .video-player__spinner {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--alpha-white-30);
    border-top-color: var(--vp-chrome-fg);
    animation: video-player-spin 0.7s linear infinite;
  }
  .video-player__status-text {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .video-player__status-sub {
    font-size: 0.75rem;
    color: var(--alpha-white-70);
  }
  .video-player__controls {
    padding: 2.5rem 1.25rem 1rem;
  }
  .video-player--xs .video-player__controls {
    padding: 1rem 0.25rem 0.25rem;
  }
  .video-player--sm .video-player__controls {
    padding: 1.5rem 0.25rem 0.25rem;
  }
  .video-player--md .video-player__controls {
    padding: 2.5rem 1.25rem 1rem;
  }
  .video-player--lg .video-player__controls {
    padding: 3rem 2rem 1.5rem;
  }
  .video-player--lg .video-player__controls-row {
    gap: 0.25rem;
  }
  .video-player--xs .video-player__timeline, .video-player--sm .video-player__timeline {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .video-player--xs .video-player__poster-play > span, .video-player--sm .video-player__poster-play > span {
    width: auto;
    height: auto;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .video-player:not(.video-player--lg) .video-player__volume-slider, .video-player:not(.video-player--lg) .video-player__btn--speed {
    display: none;
  }
  .video-player--16-9 {
    aspect-ratio: 16 / 9;
  }
  .video-player--4-3 {
    aspect-ratio: 4 / 3;
  }
  .video-player--1-1 {
    aspect-ratio: 1 / 1;
  }
  .video-player--21-9 {
    aspect-ratio: 21 / 9;
  }
  .video-player--9-16 {
    aspect-ratio: 9 / 16;
  }
  .video-player--16-9 .video-player__video, .video-player--4-3 .video-player__video, .video-player--1-1 .video-player__video, .video-player--21-9 .video-player__video, .video-player--9-16 .video-player__video {
    height: 100%;
    object-fit: cover;
  }
  .video-player--rounded-none {
    --vp-radius: 0;
  }
  .video-player--rounded-lg {
    --vp-radius: var(--radius-lg);
  }
  .video-player--rounded-xl {
    --vp-radius: var(--radius-xl);
  }
  @keyframes video-player-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .video-player__controls, .video-player__poster, .video-player__poster-play > span, .video-player__glyph, .video-player__progress-cursor, .video-player__progress-tip, .video-player__btn {
      transition-duration: 1ms;
    }
    .video-player__spinner {
      animation-duration: 1.5s;
    }
  }
  @media (forced-colors: active) {
    .video-player:has(.video-player__video:focus-visible), .video-player.is-video-focus {
      outline-color: Highlight;
    }
    .video-player__progress-track, .video-player__volume-slider {
      forced-color-adjust: none;
    }
  }
}
@layer utilities {
  .kanban-header {
    color: var(--text-kanban-header);
    background: var(--bg-kanban-header);
  }
  .kanban-list {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
    height: 100%;
    width: 100%;
    scrollbar-width: thin;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    padding: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 32);
    background: var(--bg-kanban-list);
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .kanban-list.is-droppable {
    outline: 2px dashed var(--border-kanban);
    outline-offset: 4px;
  }
  .kanban-list.is-over {
    background: var(--bg-kanban-list);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--bg-kanban-list), var(--text-primary) 4%);
    }
  }
  .kanban-list.board-sm .kanban-card-body {
    padding: calc(0.875 * 1rem) calc(1rem);
  }
  .kanban-card {
    position: relative;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
    background: var(--bg-kanban-card);
    color: var(--text-kanban);
    border-color: var(--border-kanban-card);
  }
  .kanban-card:hover {
    cursor: pointer;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background: var(--bg-kanban-card-hover, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: var(--bg-kanban-card-hover, color-mix(in oklch, var(--text-primary) 4%, var(--bg-kanban-card)));
    }
  }
  .kanban-card:active {
    background: var(--bg-kanban-card-active, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: var(--bg-kanban-card-active, color-mix(in oklch, var(--text-primary) 8%, var(--bg-kanban-card)));
    }
  }
  .kanban-card-disabled {
    opacity: 60%;
  }
  .kanban-card-disabled:hover {
    opacity: 100%;
  }
  .kanban-card-body {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .kanban-actions .btn-on-hover {
    visibility: hidden;
  }
  .kanban-card:hover .btn-on-hover {
    visibility: visible;
  }
  .kanban-handle {
    display: inline-flex;
    flex-shrink: 0;
    cursor: grab;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
    width: 12px;
    height: 18px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    opacity: 0.35;
    transition: opacity 120ms ease, color 120ms ease;
    vertical-align: middle;
  }
  .kanban-handle::before {
    content: "";
    display: block;
    width: 6px;
    height: 14px;
    background-image: radial-gradient(circle at center, currentColor 1.1px, transparent 1.3px);
    background-size: 4px 4px;
    background-position: 0 1px;
    background-repeat: round;
  }
  .kanban-card:hover .kanban-handle, .kanban-handle:hover {
    opacity: 1;
    color: var(--text-secondary);
  }
  .kanban-handle:active {
    cursor: grabbing;
    color: var(--text-primary);
  }
  .kanban-handle:has(> i, > svg)::before {
    display: none;
  }
  .kanban-card.is-dragging {
    opacity: 80%;
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transform: rotate(-0.5deg) scale(1.01);
  }
  .kanban-card.is-ghost {
    opacity: 50%;
  }
  .kanban-placeholder {
    border: 1px dashed var(--border-kanban);
    background: transparent;
    border-radius: var(--radius-kanban-card);
    height: calc(var(--spacing) * 16);
  }
  .kanban-drop-indicator {
    height: 4px;
    background: var(--border-kanban);
    border-radius: 9999px;
    margin-block: var(--spacing);
  }
  .kanban-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .kanban-card.is-kbd-grabbed {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: var(--shadow-kanban-card-drag, var(--shadow-xl));
  }
  .kanban {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 4);
    overflow-x: auto;
    background: var(--bg-kanban);
    border-radius: var(--radius-kanban);
    min-height: 200px;
  }
  .kanban.kanban--dragging {
    cursor: grabbing;
    user-select: none;
  }
  .kanban-col {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    width: var(--w-kanban-col, 300px);
    min-width: 240px;
    border-radius: var(--radius-kanban);
    background: var(--bg-kanban-col, var(--bg-kanban));
  }
  .kanban-col__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-kanban-header);
    background: var(--bg-kanban-header);
    border-radius: var(--radius-kanban) var(--radius-kanban) 0 0;
  }
  .kanban-col__body {
    min-height: 0;
    flex: 1;
  }
  .kanban-wip-badge {
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-kanban-wip, var(--text-tertiary));
    background: var(--bg-kanban-wip, transparent);
  }
  .kanban-col.is-wip-full .kanban-wip-badge, [data-kanban-column].is-wip-full .kanban-wip-badge {
    color: var(--text-kanban-wip-full, var(--text-danger));
    background: var(--bg-kanban-wip-full, var(--bg-danger-subtle));
    font-weight: 600;
  }
  .kanban-list.is-drop-target {
    background: var(--bg-kanban-drop-target, var(--bg-kanban-list));
    @supports (color: color-mix(in lab, red, red)) {
      background: var(--bg-kanban-drop-target, color-mix(in oklab, var(--bg-kanban-list), var(--text-info) 6%));
    }
    outline: 2px dashed var(--border-drop-target, var(--border-info));
    outline-offset: -2px;
  }
  .kanban-list.is-drop-invalid {
    background: var(--bg-kanban-drop-invalid, var(--bg-kanban-list));
    @supports (color: color-mix(in lab, red, red)) {
      background: var(--bg-kanban-drop-invalid, color-mix(in oklab, var(--bg-kanban-list), var(--text-danger) 6%));
    }
    outline: 2px dashed var(--border-drop-invalid, var(--border-danger));
    outline-offset: -2px;
    cursor: not-allowed;
  }
  .kanban-card.is-selected {
    border-color: var(--border-kanban-selected, var(--text-info));
    box-shadow: 0 0 0 2px var(--border-kanban-selected, var(--text-info));
  }
  .kanban-drag-clone {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background: var(--bg-kanban-card);
    border-color: var(--border-kanban-card);
    box-shadow: var(--shadow-kanban-card-drag);
    opacity: 0.95;
  }
  .kanban-card--image {
    overflow: hidden;
  }
  .kanban-card__media {
    width: 100%;
    overflow: hidden;
    background: var(--bg-kanban-card-media, var(--bg-primary-subtle));
  }
  .kanban-card__media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .kanban-card__content {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .kanban-card__badges {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .kanban-card__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-kanban-card);
  }
  .kanban-card__media-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    background: linear-gradient(to top, var(--bg-overlay), transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to top, color-mix(in oklab, var(--bg-overlay) 62%, transparent), transparent);
    }
    color: var(--text-on-solid);
  }
  .kanban-card--media-16x9 .kanban-card__media {
    aspect-ratio: 16 / 9;
  }
  .kanban-card--media-4x3 .kanban-card__media {
    aspect-ratio: 4 / 3;
  }
  .kanban-card--media-1x1 .kanban-card__media {
    aspect-ratio: 1 / 1;
  }
  .kanban--compact .kanban-card-body, .kanban--compact .kanban-card__content {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .kanban--compact .kanban-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--spacing) * 1.5);
  }
  .kanban--compact .kanban-col__header {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .kanban--dense .kanban-card-body, .kanban--dense .kanban-card__content {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .kanban--dense .kanban-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(1px * var(--tw-space-y-reverse));
      margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: var(--spacing);
  }
  .kanban--dense .kanban-col__header {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .kanban--dense .kanban-card {
    border-radius: var(--radius-md);
  }
  .kanban-card__cover {
    height: 6px;
    background-color: var(--kanban-card-cover, var(--text-info));
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }
  .kanban-card__labels {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 3);
  }
  .kanban-card__label {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--kanban-label-bg, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--kanban-label-bg, color-mix(in oklch, var(--text-info) 12%, transparent));
    }
    color: var(--kanban-label-fg, var(--text-info));
    line-height: 1.2;
  }
  .kanban-card__title {
    font-size: 13px;
    --tw-leading: 1.35;
    line-height: 1.35;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    letter-spacing: -0.005em;
  }
  .kanban-card__description {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: 11.5px;
    --tw-leading: 1.45;
    line-height: 1.45;
    color: var(--text-secondary);
    letter-spacing: 0;
  }
  .kanban-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .kanban-card__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .kanban-card__stats {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .kanban-card__stat {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .kanban-card__stat > i, .kanban-card__stat > svg {
    font-size: 10px;
    opacity: 0.7;
  }
  .kanban-card__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    width: 20px;
    height: 20px;
    font-size: 9px;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
    color: var(--text-secondary);
  }
  .kanban-card__avatar > img, .kanban-card__avatar > svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .kanban-card__avatars {
    display: inline-flex;
    align-items: center;
  }
  .kanban-card__avatars > .kanban-card__avatar {
    margin-left: -4px;
    box-shadow: 0 0 0 2px var(--bg-kanban-card);
  }
  .kanban-card__avatars > .kanban-card__avatar:first-child {
    margin-left: 0;
  }
  .kanban-card__priority-dot {
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 8px;
    height: 8px;
    background-color: var(--kanban-priority-color, var(--text-tertiary));
  }
  .kanban-card__priority-dot.is-urgent {
    background-color: var(--text-danger);
  }
  .kanban-card__priority-dot.is-high {
    background-color: var(--text-warning);
  }
  .kanban-card__priority-dot.is-medium {
    background-color: var(--text-info);
  }
  .kanban-card__priority-dot.is-low {
    background-color: var(--text-success);
  }
  .kanban-card__due {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
    color: var(--text-secondary);
  }
  .kanban-card__due > i {
    font-size: 9px;
  }
  .kanban-card__due.is-soon {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 14%, transparent);
    }
    color: var(--text-warning);
  }
  .kanban-card__due.is-overdue {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 14%, transparent);
    }
    color: var(--text-danger);
    font-weight: 600;
  }
  .kanban-card__progress {
    margin-top: calc(var(--spacing) * 2);
    height: var(--spacing);
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-full);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  .kanban-card__progress-fill {
    height: 100%;
    background-color: var(--text-info);
    transition: width 200ms ease;
  }
  .kanban-card__progress.is-complete .kanban-card__progress-fill {
    background-color: var(--text-success);
  }
  .kanban-card--priority-low, .kanban-card--priority-medium, .kanban-card--priority-high, .kanban-card--priority-urgent {
    border-left-width: 3px;
  }
  .kanban-card--priority-low {
    border-left-color: var(--text-success);
  }
  .kanban-card--priority-medium {
    border-left-color: var(--text-info);
  }
  .kanban-card--priority-high {
    border-left-color: var(--text-warning);
  }
  .kanban-card--priority-urgent {
    border-left-color: var(--text-danger);
  }
  .kanban-card--blocked {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 6%, var(--bg-kanban-card));
    }
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-danger) 28%, transparent);
    }
  }
  .kanban-card--blocked::before {
    content: "\f023";
    position: absolute;
    top: 6px;
    right: 6px;
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 9px;
    color: var(--text-danger);
    opacity: 0;
  }
  .kanban-card--archived {
    opacity: 0.55;
    filter: grayscale(0.4);
  }
  .kanban-card--archived:hover {
    opacity: 0.85;
  }
  .kanban-card--success {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 5%, var(--bg-kanban-card));
    }
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 24%, transparent);
    }
  }
  .kanban-card--warning {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 5%, var(--bg-kanban-card));
    }
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 24%, transparent);
    }
  }
  .kanban-card--danger {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 5%, var(--bg-kanban-card));
    }
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-danger) 24%, transparent);
    }
  }
  .kanban-card--info {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 5%, var(--bg-kanban-card));
    }
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 24%, transparent);
    }
  }
  .kanban-col__title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .kanban-col__title-dot {
    display: inline-block;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--kanban-col-accent, var(--text-tertiary));
  }
  .kanban-col__title-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kanban-col__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    min-width: 18px;
    height: 16px;
    color: var(--text-secondary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  .kanban-col__actions {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
  }
  .kanban-col--accent-info {
    --kanban-col-accent: var(--text-info);
  }
  .kanban-col--accent-success {
    --kanban-col-accent: var(--text-success);
  }
  .kanban-col--accent-warning {
    --kanban-col-accent: var(--text-warning);
  }
  .kanban-col--accent-danger {
    --kanban-col-accent: var(--text-danger);
  }
  .kanban-col__footer {
    flex: none;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  .kanban-col__add {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--text-secondary);
    background: transparent;
    border: 0;
  }
  .kanban-col__add:hover {
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 8%, transparent);
    }
  }
  .kanban-col__add > i {
    font-size: 10px;
  }
  .kanban-col__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .kanban-col__empty__icon {
    font-size: 20px;
    opacity: 0.4;
  }
  .kanban-col__empty__title {
    color: var(--text-secondary);
    font-weight: 500;
  }
  .kanban-col--collapsed {
    width: 44px;
    min-width: 44px;
    cursor: pointer;
  }
  .kanban-col--collapsed .kanban-col__body, .kanban-col--collapsed .kanban-col__footer, .kanban-col--collapsed .kanban-col__actions {
    display: none;
  }
  .kanban-col--collapsed .kanban-col__header {
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding-inline: 0;
    padding-block: calc(var(--spacing) * 3);
    height: 100%;
    border-radius: var(--radius-kanban);
  }
  .kanban-col--collapsed .kanban-col__title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-items: center;
  }
  .kanban-swimlane {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
  }
  .kanban-swimlane__header {
    position: sticky;
    left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 4%, transparent);
    }
    border-radius: var(--radius-kanban);
  }
  .kanban-swimlane__header__count {
    margin-left: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    opacity: 70%;
    text-transform: none;
    letter-spacing: 0;
  }
  .kanban-swimlane__header__toggle {
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    background: transparent;
    border: 0;
    transition: transform 150ms ease, color 100ms ease;
  }
  .kanban-swimlane[data-open="false"] .kanban-swimlane__header__toggle {
    transform: rotate(-90deg);
  }
  .kanban-swimlane[data-open="false"] .kanban-swimlane__body {
    display: none;
  }
  .kanban-swimlane__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 4);
  }
  .kanban-board {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.75rem;
  }
  .kanban-board__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .kanban-board__title {
    min-width: 0;
    flex: 1;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .kanban-board__filters {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .kanban-board__actions {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .kanban-card.is-loading {
    pointer-events: none;
    position: relative;
  }
  .kanban-card.is-loading > * {
    visibility: hidden;
  }
  .kanban-card.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient( 100deg, transparent 30%, var(--text-primary) 50%, transparent 70% ), var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 100deg, transparent 30%, color-mix(in oklch, var(--text-primary) 6%, transparent) 50%, transparent 70% ), color-mix(in oklch, var(--text-primary) 4%, transparent);
    }
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: kanban-shimmer 1.4s linear infinite;
  }
  @keyframes kanban-shimmer {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  .kanban-drag-clone__count {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    color: var(--text-on-solid);
    background-color: var(--text-info);
    box-shadow: var(--shadow-md);
  }
  .kanban-card--minimal {
    box-shadow: none;
    border-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  .kanban-card--minimal:hover {
    box-shadow: none;
    background: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-primary) 3%, var(--bg-kanban-card));
    }
    border-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-primary) 14%, transparent);
    }
  }
  .kanban-card--elevated {
    border-color: transparent;
    box-shadow: 0 1px 2px var(--text-primary), 0 2px 6px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 2px color-mix(in oklch, var(--text-primary) 6%, transparent), 0 2px 6px color-mix(in oklch, var(--text-primary) 4%, transparent);
    }
    transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background-color 120ms ease;
  }
  .kanban-card--elevated:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--text-primary), 0 8px 20px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 2px 4px color-mix(in oklch, var(--text-primary) 8%, transparent), 0 8px 20px color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
  }
  .kanban-card--elevated:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px var(--text-primary), 0 2px 6px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 2px color-mix(in oklch, var(--text-primary) 6%, transparent), 0 2px 6px color-mix(in oklch, var(--text-primary) 4%, transparent);
    }
  }
  .kanban-card--ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .kanban-card--ghost:hover {
    background: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
    border-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
  }
  .kanban-card--frosted {
    background: var(--bg-kanban-card);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-kanban-card) 60%, transparent);
    }
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
    box-shadow: 0 1px 2px var(--text-primary), 0 4px 16px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 2px color-mix(in oklch, var(--text-primary) 6%, transparent), 0 4px 16px color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
  }
  .kanban-card--quiet {
    background: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-primary) 3%, var(--bg-kanban-card));
    }
    border-color: transparent;
    box-shadow: none;
  }
  .kanban-card--quiet:hover {
    background: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-primary) 6%, var(--bg-kanban-card));
    }
  }
  .kanban-card--list {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }
  .kanban-card--list > .kanban-card-body, .kanban-card--list > .kanban-card__content {
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .kanban-card--list .kanban-card__title {
    margin: 0;
    font-size: 13px;
  }
  .kanban-card--list .kanban-card__description {
    margin-top: 2px;
    font-size: 11px;
  }
  .kanban-card--list .kanban-card__leading {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .kanban-card--list .kanban-card__trailing {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .kanban-card--stat {
    padding: 16px 14px;
    text-align: left;
  }
  .kanban-card--stat .kanban-card__stat-label {
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
  }
  .kanban-card--stat .kanban-card__stat-value {
    margin-top: var(--spacing);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .kanban-card--stat .kanban-card__stat-delta {
    margin-top: calc(var(--spacing) * 1.5);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .kanban-card--stat .kanban-card__stat-delta.is-up {
    color: var(--text-success);
  }
  .kanban-card--stat .kanban-card__stat-delta.is-down {
    color: var(--text-danger);
  }
  .kanban-card--note {
    background: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-warning) 12%, var(--bg-kanban-card));
    }
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 22%, transparent);
    }
    box-shadow: 0 1px 2px var(--text-warning), 0 4px 12px var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 2px color-mix(in oklch, var(--text-warning) 14%, transparent), 0 4px 12px color-mix(in oklch, var(--text-warning) 8%, transparent);
    }
  }
  .kanban-card--note:hover {
    background: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-warning) 18%, var(--bg-kanban-card));
    }
  }
  .kanban-card--task {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }
  .kanban-card--task > .kanban-card__check {
    flex-shrink: 0;
    margin-top: 1px;
  }
  .kanban-card--task > .kanban-card-body, .kanban-card--task > .kanban-card__content {
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .kanban-card--task.is-complete {
    background: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-primary) 3%, var(--bg-kanban-card));
    }
  }
  .kanban-card--task.is-complete .kanban-card__title {
    text-decoration: line-through;
    color: var(--text-tertiary);
  }
  .kanban-card--mini {
    padding: 6px 10px;
    border-radius: var(--radius-sm, 6px);
  }
  .kanban-card--mini .kanban-card__title {
    font-size: 12px;
    margin: 0;
  }
  .kanban-card--mini .kanban-card-body, .kanban-card--mini .kanban-card__content {
    padding: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .kanban-card, .kanban-card.is-dragging, .kanban-drag-clone, .kanban-placeholder, .kanban-card__progress-fill, .kanban-swimlane__header__toggle, .kanban-card.is-loading::before, .kanban-card--elevated, .kanban-card--elevated:hover, .kanban-card--elevated:active, .kanban-handle {
      transition: none !important;
      animation: none !important;
      transform: none !important;
    }
  }
}
@layer utilities;
@layer components {
  @keyframes panel-item-flash {
    0% {
      background-color: var(--bg-list-item-new-flash);
    }
    100% {
      background-color: var(--bg-list-item);
    }
  }
  @keyframes panel-skeleton {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
}
@layer utilities {
  .select-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--_select-gap, 6px);
  }
  .select-list--bordered {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 3);
    border-color: var(--border-select-option);
  }
  .select-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--_select-gap, 8px);
  }
  .select-list--inline > .select-option {
    width: auto;
    flex: 1;
    min-width: 12rem;
  }
  .select-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--_select-gap, 8px);
  }
  .select-list--bare {
    --_select-gap: 0;
  }
  .select-list__header {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
    padding-inline: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-select-option-header);
    letter-spacing: 0.05em;
  }
  .select-list__divider {
    margin-block: calc(var(--spacing) * 2);
    height: 1px;
    background-color: var(--border-select-option-divider);
  }
  .select-list__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    border-color: var(--border-select-option);
    color: var(--text-select-option-subtitle);
  }
  .select-list__empty > i {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    opacity: 60%;
  }
  .select-option {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    text-align: left;
    padding: var(--_select-py, 0.75rem) var(--_select-px, 1rem);
    gap: var(--_select-content-gap, 0.75rem);
    background-color: var(--bg-select-option);
    border-color: var(--border-select-option);
    color: var(--text-select-option);
    box-shadow: var(--shadow-select-option);
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), border-color var(--duration-fast, 100ms) var(--ease-out, ease), box-shadow var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .select-option:hover:not(.is-selected):not(.is-disabled):not([aria-checked="true"]):not([aria-selected="true"]) {
    background-color: var(--bg-select-option-hover);
    border-color: var(--border-select-option-hover);
    box-shadow: var(--shadow-select-option-hover);
  }
  .select-option:active:not(.is-disabled) {
    transform: scale(0.99);
  }
  .select-option:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .select-option__content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
  }
  .select-option__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: inherit;
  }
  .select-option__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-select-option-subtitle);
  }
  .select-option__meta {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing);
  }
  .select-option__trailing {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    color: var(--text-select-option-trailing);
  }
  .select-option__leading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--text-select-option-subtitle);
  }
  .select-option__leading > .avatar {
    flex-shrink: 0;
  }
  .select-option__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-tag-neutral, var(--utility-neutral-100));
    color: var(--text-tag-neutral, var(--text-secondary));
  }
  .select-option__check {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--border-select-option);
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), border-color var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .select-option__check > i, .select-option__check > svg {
    font-size: 0.563rem;
    line-height: var(--tw-leading, 1rem);
    opacity: 0%;
    color: var(--text-select-option-selected);
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .select-option__check--square {
    border-radius: var(--radius-sm);
  }
  .select-option__check--radio {
    border-color: var(--border-select-option);
  }
  .select-option__check--radio::after {
    content: "";
    border-radius: var(--radius-full);
    opacity: 0%;
    width: 0.5rem;
    height: 0.5rem;
    background-color: currentColor;
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .select-option:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    border-color: var(--border-select-option-selected);
    box-shadow: inset 0 0 0 1px var(--border-select-option-selected);
  }
  .select-option:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check:not(.select-option__check--radio) {
    border-color: var(--bg-select-option-selected);
    background-color: var(--bg-select-option-selected);
  }
  .select-option:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check:not(.select-option__check--radio) > i, .select-option:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check:not(.select-option__check--radio) > svg {
    opacity: 100%;
    color: var(--text-select-option-selected);
  }
  .select-option:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check--radio {
    border-color: var(--bg-select-option-selected);
    color: var(--bg-select-option-selected);
  }
  .select-option:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check--radio::after {
    opacity: 100%;
  }
  .select-option--tinted:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    background-color: var(--bg-select-option-tinted);
  }
  .select-option--tone-accent:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    border-color: var(--border-select-option-accent);
    box-shadow: inset 0 0 0 1px var(--border-select-option-accent);
  }
  .select-option--tone-accent:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check:not(.select-option__check--radio) {
    border-color: var(--bg-select-option-accent);
    background-color: var(--bg-select-option-accent);
  }
  .select-option--tone-accent:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check--radio {
    border-color: var(--bg-select-option-accent);
    color: var(--bg-select-option-accent);
  }
  .select-option--tone-accent.select-option--tinted:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    background-color: var(--bg-select-option-tinted-accent);
  }
  .select-option--tone-success:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    border-color: var(--border-select-option-success);
    box-shadow: inset 0 0 0 1px var(--border-select-option-success);
  }
  .select-option--tone-success:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check:not(.select-option__check--radio) {
    border-color: var(--bg-select-option-success);
    background-color: var(--bg-select-option-success);
  }
  .select-option--tone-success:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check--radio {
    border-color: var(--bg-select-option-success);
    color: var(--bg-select-option-success);
  }
  .select-option--tone-success.select-option--tinted:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    background-color: var(--bg-select-option-tinted-success);
  }
  .select-option--tone-warning:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    border-color: var(--border-select-option-warning);
    box-shadow: inset 0 0 0 1px var(--border-select-option-warning);
  }
  .select-option--tone-warning:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check:not(.select-option__check--radio) {
    border-color: var(--bg-select-option-warning);
    background-color: var(--bg-select-option-warning);
  }
  .select-option--tone-warning:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check--radio {
    border-color: var(--bg-select-option-warning);
    color: var(--bg-select-option-warning);
  }
  .select-option--tone-warning.select-option--tinted:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    background-color: var(--bg-select-option-tinted-warning);
  }
  .select-option--tone-danger:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    border-color: var(--border-select-option-danger);
    box-shadow: inset 0 0 0 1px var(--border-select-option-danger);
  }
  .select-option--tone-danger:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check:not(.select-option__check--radio) {
    border-color: var(--bg-select-option-danger);
    background-color: var(--bg-select-option-danger);
  }
  .select-option--tone-danger:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) .select-option__check--radio {
    border-color: var(--bg-select-option-danger);
    color: var(--bg-select-option-danger);
  }
  .select-option--tone-danger.select-option--tinted:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) {
    background-color: var(--bg-select-option-tinted-danger);
  }
  .select-option.is-disabled, .select-option:disabled, .select-option[aria-disabled="true"] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 60%;
    color: var(--text-select-option-disabled);
  }
  .select-option--tile {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    gap: 0.5rem;
    min-height: 8rem;
  }
  .select-option--tile .select-option__leading {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    width: 2.5rem;
    height: 2.5rem;
  }
  .select-option--tile .select-option__content {
    align-items: center;
    text-align: center;
  }
  .select-option--tile .select-option__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    white-space: normal;
  }
  .select-option--tile .select-option__subtitle {
    white-space: normal;
  }
  .select-option--tile .select-option__check {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .select-list--compact {
    --_select-gap: 4px;
    --_select-py: 0.5rem;
    --_select-px: 0.75rem;
    --_select-content-gap: 0.5rem;
  }
  .select-list--compact .select-option__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .select-list--compact .select-option__subtitle {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .select-list--compact .select-option__check {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .select-list--relaxed {
    --_select-gap: 8px;
    --_select-py: 1rem;
    --_select-px: 1.25rem;
    --_select-content-gap: 1rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .select-option, .select-option__check, .select-option__check > i, .select-option__check > svg, .select-option__check--radio::after {
      transition: none;
    }
    .select-option:active:not(.is-disabled) {
      transform: none;
    }
  }
}
@layer utilities {
  .pagination {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .pagination--divided {
    border-top: 1px solid var(--border-secondary);
    padding-top: calc(var(--spacing) * 4);
  }
  .pager {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .page-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    -webkit-user-select: none;
    user-select: none;
    appearance: none;
    border: 0;
    min-width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    padding: 0 calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-quaternary);
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .page-item:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .page-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .page-item:focus-visible:not(.active) {
    background-color: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .page-item.active {
    background-color: var(--bg-primary-solid);
    color: var(--text-button-primary);
    cursor: default;
  }
  .page-item.disabled, .page-item[aria-disabled="true"] {
    pointer-events: none;
    opacity: 40%;
    cursor: not-allowed;
  }
  .page-item--rounded, .pager--rounded .page-item {
    border-radius: var(--radius-full);
  }
  .page-prev, .page-next {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    -webkit-user-select: none;
    user-select: none;
    appearance: none;
    border: 0;
    gap: calc(var(--spacing) * 1.5);
    min-width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    padding: 0 calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-secondary);
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .page-prev:hover, .page-next:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .page-prev:focus-visible, .page-next:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .page-prev.disabled, .page-next.disabled, .page-prev[aria-disabled="true"], .page-next[aria-disabled="true"] {
    pointer-events: none;
    opacity: 40%;
    cursor: not-allowed;
  }
  .page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
    min-width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    font-size: 0.875rem;
    color: var(--text-tertiary);
    cursor: default;
  }
  .pagination__info {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .pagination__per-page {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .pagination--sm .page-item, .pagination--sm .page-prev, .pagination--sm .page-next, .pagination--sm .page-ellipsis, .pager--sm .page-item, .pager--sm .page-prev, .pager--sm .page-next, .pager--sm .page-ellipsis {
    min-width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    font-size: 0.8125rem;
  }
  .pager--joined {
    gap: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    overflow: hidden;
    isolation: isolate;
  }
  .pager--joined .page-item, .pager--joined .page-prev, .pager--joined .page-next, .pager--joined .page-ellipsis {
    border-radius: 0;
  }
  .pager--joined > :not(:first-child) {
    box-shadow: inset 1px 0 0 0 var(--border-primary);
  }
  .pager--joined .page-item:focus-visible, .pager--joined .page-prev:focus-visible, .pager--joined .page-next:focus-visible {
    outline-offset: -2px;
  }
  .pagination-dot {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .pagination-dot--lg {
    gap: calc(var(--spacing) * 4);
  }
  .pagination-dot--framed, .pagination-line--framed {
    padding: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    background-color: var(--bg-primary);
    backdrop-filter: blur(8px);
  }
  .pagination-dot--lg.pagination-dot--framed, .pagination-line--lg.pagination-line--framed {
    padding: calc(var(--spacing) * 3);
  }
  .pagination-dot .page-item {
    min-width: 0;
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    padding: 0;
    border-radius: var(--radius-full);
    background-color: var(--bg-quaternary);
    color: transparent;
  }
  .pagination-dot--lg .page-item {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }
  .pagination-dot .page-item:hover, .pagination-line .page-item:hover {
    background-color: var(--bg-quaternary);
    color: transparent;
  }
  .pagination-dot .page-item.active, .pagination-line .page-item.active {
    background-color: var(--bg-brand-solid);
  }
  .pagination-dot .page-item::after, .pagination-line .page-item::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .pagination-dot--brand .page-item, .pagination-line--brand .page-item {
    background-color: var(--alpha-white-40);
  }
  .pagination-dot--brand .page-item.active, .pagination-line--brand .page-item.active {
    background-color: var(--alpha-white-100);
  }
  .pagination-line {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .pagination-line--lg {
    gap: calc(var(--spacing) * 3);
  }
  .pagination-line .page-item {
    min-width: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 1.5);
    padding: 0;
    border-radius: var(--radius-full);
    background-color: var(--bg-quaternary);
    color: transparent;
  }
  .pagination-line--lg .page-item {
    height: calc(var(--spacing) * 2);
  }
  @media (prefers-reduced-motion: reduce) {
    .page-item, .page-prev, .page-next {
      transition: none;
    }
    .pagination-dot--framed, .pagination-line--framed {
      backdrop-filter: none;
    }
  }
}
@layer utilities {
  .persona {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--text-persona);
    background-color: var(--bg-persona);
    box-shadow: inset 0 0 0 1px var(--border-persona);
  }
  .persona-media {
    flex-shrink: 0;
  }
  .persona-body {
    min-width: 0;
    flex: 1;
  }
  .persona-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-persona-title);
  }
  .persona-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    color: var(--text-persona-subtitle);
  }
  .persona-meta {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    color: var(--text-persona-meta);
  }
  .persona-actions {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .persona-badges {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: var(--spacing);
  }
  .persona-tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-persona-tag);
    background-color: var(--bg-persona-tag);
    box-shadow: inset 0 0 0 1px var(--border-persona-tag);
  }
  .persona.persona-sm {
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .persona.persona-sm .persona-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .persona.persona-sm .persona-subtitle {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .persona.persona-lg {
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .persona.persona-lg .persona-title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .persona.persona-lg .persona-subtitle {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .persona.persona-lg .persona-meta {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .persona.persona-compact {
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .persona.persona-stack {
    align-items: flex-start;
  }
  .persona.persona-stack .persona-body {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .persona.persona-media-right {
    flex-direction: row-reverse;
  }
  .persona.persona-inline {
    align-items: flex-start;
    border-radius: var(--radius-none);
    padding: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .persona.persona-inline .persona-media {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .persona.persona-soft {
    background-color: var(--bg-persona-soft);
    box-shadow: inset 0 0 0 1px var(--border-persona-soft);
  }
  .persona.persona-ghost {
    background-color: var(--bg-persona-ghost);
    box-shadow: inset 0 0 0 1px var(--border-persona-ghost);
  }
  .persona.persona-outline-strong {
    box-shadow: inset 0 0 0 1px var(--border-persona-strong);
  }
  .persona.persona-elevated {
    box-shadow: inset 0 0 0 1px var(--border-persona), var(--shadow-persona);
  }
  .persona.persona-clickable {
    cursor: pointer;
    transition: background-color 120ms ease, box-shadow 120ms ease;
  }
  .persona.persona-clickable:hover {
    background-color: var(--bg-persona-hover);
    box-shadow: inset 0 0 0 1px var(--border-persona-hover);
  }
  .persona.persona-clickable:active {
    background-color: var(--bg-persona-pressed);
    box-shadow: inset 0 0 0 1px var(--border-persona-pressed), var(--shadow-persona-pressed);
  }
  .persona.is-selected, .persona[aria-selected="true"] {
    background-color: var(--bg-persona-selected);
    box-shadow: inset 0 0 0 1px var(--border-persona-selected);
  }
  .persona.persona-clickable:focus-visible, .persona[tabindex]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .persona.is-disabled, .persona[aria-disabled="true"] {
    opacity: var(--opacity-persona-disabled);
    filter: var(--filter-persona-disabled);
    pointer-events: none;
  }
  .persona-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-persona-status);
    background-color: var(--bg-persona-status);
    box-shadow: inset 0 0 0 1px var(--border-persona-status);
  }
  .persona-status-dot {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    background-color: var(--bg-persona-status-dot);
  }
  .persona-status.status-success {
    --bg-persona-status-dot: var(--bg-persona-dot-success);
  }
  .persona-status.status-warning {
    --bg-persona-status-dot: var(--bg-persona-dot-warning);
  }
  .persona-status.status-danger {
    --bg-persona-status-dot: var(--bg-persona-dot-danger);
  }
  .persona-status.status-info {
    --bg-persona-status-dot: var(--bg-persona-dot-info);
  }
  @media (prefers-reduced-motion: reduce) {
    .persona.persona-clickable {
      transition: none;
    }
  }
}
@layer utilities {
  :where(.track, .progress-radial, .progress-gauge, .progress-segments, .progress-ring) {
    --progress-accent: var(--color-brand-600);
  }
  :where([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) :where(.track, .progress-radial, .progress-gauge, .progress-segments, .progress-ring) {
    --progress-accent: var(--color-brand-500);
  }
  .track {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    overflow: hidden;
    height: var(--height-progress-track, 4px);
    border-radius: var(--radius-xs);
    background-color: var(--bg-progress);
  }
  .bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 500ms;
    transition-duration: 500ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    color: var(--text-progress);
    background-color: var(--progress-accent);
    border-radius: var(--radius-xs);
  }
  .bar-label {
    position: relative;
    z-index: 10;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline: var(--spacing);
  }
  .bar-sm {
    height: 4px;
  }
  .bar-md {
    height: 6px;
  }
  .bar-lg {
    height: 8px;
  }
  .bar-xl {
    height: 18px;
  }
  .bar-2xl {
    height: 22px;
  }
  .bar-3xl {
    height: 28px;
  }
  .track {
    position: relative;
  }
  .bar-label--overlay {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    z-index: 2;
    pointer-events: none;
    color: var(--text-progress-label, var(--text-secondary));
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
  }
  .bar-label--overlay {
    justify-content: flex-start;
    padding-left: 10px;
  }
  .bar-label--overlay-center {
    justify-content: center;
    padding: 0;
  }
  .bar-label--overlay-end {
    justify-content: flex-end;
    padding-right: 10px;
    padding-left: 0;
  }
  .bar-label--overlay-light {
    color: var(--alpha-white-100);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }
  .bar-label--outside {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
  }
  .bar:has(.bar-label--outside) {
    overflow: visible;
    position: relative;
  }
  .bar-xl .bar-label, .bar-2xl .bar-label, .bar-3xl .bar-label {
    padding: 0 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
  }
  .bar-3xl .bar-label {
    font-size: 0.75rem;
    padding: 0 10px;
  }
  .bar {
    min-width: 0;
  }
  .bar-rounded {
    border-radius: var(--radius-md);
  }
  .bar-pill {
    border-radius: var(--radius-full);
  }
  .bar-success {
    background-color: var(--bg-progress-bar-success);
  }
  .bar-warning {
    background-color: var(--bg-progress-bar-warning);
  }
  .bar-danger {
    background-color: var(--bg-progress-bar-danger);
  }
  .bar-info {
    background-color: var(--bg-progress-bar-info);
  }
  .bar-neutral {
    background-color: var(--bg-progress-bar-neutral);
  }
  .bar-indeterminate {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    border-radius: var(--radius-xs);
    animation: bar-indeterminate-slide 1.2s infinite ease-in-out;
  }
  @keyframes bar-indeterminate-slide {
    0% {
      left: -30%;
    }
    50% {
      left: 50%;
    }
    100% {
      left: 100%;
    }
  }
  .progress-stack {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: 2px;
  }
  .progress-radial {
    --size-radial: 48px;
    --thickness-radial: 6px;
    --value-radial: 0;
    --color-radial: var(--progress-accent);
    --track-radial: var(--bg-progress);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: var(--size-radial);
    height: var(--size-radial);
    background: conic-gradient( var(--color-radial) calc(var(--value-radial) * 1%), var(--track-radial) 0 );
  }
  .progress-radial::before {
    content: "";
    position: absolute;
    inset: var(--thickness-radial);
    border-radius: 9999px;
    background-color: var(--bg-progress-radial-inner);
  }
  .progress-radial .radial-label {
    position: relative;
    z-index: 10;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-progress-radial);
  }
  .progress-radial.progress-radial-cap::after {
    content: "";
    position: absolute;
    width: var(--size-radial-cap, 10px);
    height: var(--size-radial-cap, 10px);
    background-color: var(--color-radial);
    border-radius: 9999px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(calc(var(--value-radial) * 3.6deg)) translateY(calc(-1 * (var(--size-radial) / 2 - var(--thickness-radial) / 2)));
    box-shadow: var(--shadow-progress-cap, 0 0 0 2px var(--bg-progress-radial-inner));
  }
  .progress-radial.progress-radial-cap.progress-radial-cap-glow::after {
    box-shadow: 0 0 8px var(--color-radial), 0 0 0 2px var(--bg-progress-radial-inner);
  }
  .progress-radial-xs {
    --size-radial: 28px;
    --thickness-radial: 4px;
  }
  .progress-radial-sm {
    --size-radial: 36px;
    --thickness-radial: 5px;
  }
  .progress-radial-md {
    --size-radial: 48px;
    --thickness-radial: 6px;
  }
  .progress-radial-lg {
    --size-radial: 64px;
    --thickness-radial: 8px;
  }
  .progress-radial-xl {
    --size-radial: 84px;
    --thickness-radial: 10px;
  }
  .progress-radial-thin {
    --thickness-radial: 4px;
  }
  .progress-radial-thick {
    --thickness-radial: 10px;
  }
  .progress-radial-success {
    --color-radial: var(--bg-progress-bar-success);
  }
  .progress-radial-warning {
    --color-radial: var(--bg-progress-bar-warning);
  }
  .progress-radial-danger {
    --color-radial: var(--bg-progress-bar-danger);
  }
  .progress-radial-info {
    --color-radial: var(--bg-progress-bar-info);
  }
  .progress-radial-neutral {
    --color-radial: var(--bg-progress-bar-neutral);
  }
  .progress-radial-indeterminate {
    --value-radial: 25;
    animation: radial-spin 1s linear infinite;
  }
  @keyframes radial-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .bar-striped {
    background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.18) 75%, transparent 75%, transparent );
    background-size: 1rem 1rem;
  }
  .bar-striped-animated {
    animation: bar-stripes-march 1s linear infinite;
  }
  @keyframes bar-stripes-march {
    from {
      background-position: 1rem 0;
    }
    to {
      background-position: 0 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bar-striped-animated {
      animation: none;
    }
  }
  .track.bar-stack {
    background-color: var(--bg-progress);
  }
  .track.bar-stack > .bar {
    border-radius: 0;
  }
  .track.bar-stack > .bar:first-child {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
  }
  .track.bar-stack > .bar.bar-end, .track.bar-stack > .bar:last-child {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
  }
  .progress-segments {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .progress-segment {
    flex: 1;
    height: var(--height-progress-segment, 6px);
    background-color: var(--bg-progress, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-progress, color-mix(in oklch, var(--text-primary) 8%, transparent));
    }
    border-radius: var(--radius-xs);
    transition: background-color 200ms ease;
  }
  .progress-segment.is-complete {
    background-color: var(--bg-progress-bar-success, var(--text-success));
  }
  .progress-segment.is-current {
    background-color: var(--progress-accent);
    animation: progress-segment-pulse 1.6s ease-in-out infinite;
  }
  .progress-segment.is-error {
    background-color: var(--bg-progress-bar-danger, var(--text-danger));
  }
  .progress-segments--hairline .progress-segment {
    height: 2px;
  }
  .progress-segments--xthin .progress-segment {
    height: 3px;
  }
  .progress-segments--thin .progress-segment {
    height: 4px;
  }
  .progress-segments--thick .progress-segment {
    height: 8px;
  }
  .progress-segments--xthick .progress-segment {
    height: 12px;
  }
  .progress-segments--connected {
    gap: 0;
  }
  .progress-segments--connected .progress-segment {
    border-radius: 0;
  }
  .progress-segments--connected .progress-segment:first-child {
    border-top-left-radius: var(--radius-xs);
    border-bottom-left-radius: var(--radius-xs);
  }
  .progress-segments--connected .progress-segment:last-child {
    border-top-right-radius: var(--radius-xs);
    border-bottom-right-radius: var(--radius-xs);
  }
  @keyframes progress-segment-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .progress-segment.is-current {
      animation: none;
    }
  }
  .progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .progress-row > .track {
    flex: 1;
  }
  .progress-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 80px;
  }
  .progress-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
  }
  .progress-stacked-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .progress-stacked-label > .progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .progress-stacked-label .progress-label, .progress-stacked-label .progress-value {
    min-width: 0;
  }
  .progress-radial__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1;
  }
  .progress-radial__value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .progress-radial__label {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 600;
  }
  .track.bar-buffer {
    position: relative;
  }
  .track.bar-buffer .bar-buffer__behind {
    position: absolute;
    inset: 0;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 14%, transparent);
    }
    z-index: 0;
  }
  .track.bar-buffer > .bar:not(.bar-buffer__behind) {
    position: relative;
    z-index: 1;
  }
  .track--vertical {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: var(--width-progress-track-vertical, 8px);
    height: var(--height-progress-track-vertical, 120px);
  }
  .track--vertical > .bar {
    width: 100%;
    height: 0;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    transition: height 500ms ease-in-out;
  }
  .track--vertical.bar-sm {
    width: 4px;
  }
  .track--vertical.bar-md {
    width: 6px;
  }
  .track--vertical.bar-lg {
    width: 8px;
  }
  .track--vertical.bar-xl {
    width: 18px;
  }
  .track--vertical.bar-2xl {
    width: 22px;
  }
  .track--vertical.bar-3xl {
    width: 28px;
  }
  .progress-vertical-group {
    display: flex;
    align-items: flex-end;
    gap: 6px;
  }
  .progress-vertical-group .track--vertical {
    flex: 1;
    min-width: 0;
  }
  .track__marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: var(--at, 50%);
    width: 2px;
    background-color: var(--text-tertiary);
    border-radius: 1px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
  }
  .track__marker--success {
    background-color: var(--text-success);
  }
  .track__marker--warning {
    background-color: var(--text-warning);
  }
  .track__marker--danger {
    background-color: var(--text-danger);
  }
  .track__marker--info {
    background-color: var(--text-info);
  }
  .track__marker[data-label]::before {
    content: attr(data-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: currentColor;
    white-space: nowrap;
    line-height: 1;
  }
  .bar.bar-flow {
    background-image: linear-gradient( 90deg, currentColor 0%, transparent 50%, currentColor 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 90deg, color-mix(in oklch, currentColor 14%, transparent) 0%, transparent 50%, color-mix(in oklch, currentColor 14%, transparent) 100% );
    }
    background-size: 200% 100%;
    animation: bar-flow 1.4s linear infinite;
  }
  @keyframes bar-flow {
    from {
      background-position: 0% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bar.bar-flow {
      animation: none;
      background-image: none;
    }
  }
  .track--range {
    position: relative;
    background-color: var(--bg-progress);
  }
  .track__range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--from, 0%);
    width: calc(var(--to, 100%) - var(--from, 0%));
    background-color: var(--bg-progress-bar-info, var(--text-info));
    opacity: 0.7;
    border-radius: inherit;
  }
  .track__range-fill.bar-success {
    background-color: var(--bg-progress-bar-success);
  }
  .track__range-fill.bar-warning {
    background-color: var(--bg-progress-bar-warning);
  }
  .track__range-fill.bar-danger {
    background-color: var(--bg-progress-bar-danger);
  }
  .track__range-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: var(--at, 50%);
    width: 3px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 3;
    box-shadow: 0 0 0 1.5px var(--bg-card);
  }
  .progress-gauge {
    --gauge-size: 140px;
    --gauge-thickness: 14px;
    --gauge-value: 0;
    --gauge-color: var(--progress-accent);
    --gauge-track: var(--bg-progress, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      --gauge-track: var(--bg-progress, color-mix(in oklch, var(--text-primary) 10%, transparent));
    }
    position: relative;
    width: var(--gauge-size);
    height: calc(var(--gauge-size) / 2 + var(--gauge-thickness) / 2);
    overflow: hidden;
  }
  .progress-gauge::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--gauge-size);
    height: var(--gauge-size);
    border-radius: 50%;
    background: conic-gradient( from 270deg, var(--gauge-color) 0deg, var(--gauge-color) calc(var(--gauge-value) * 1.8deg), var(--gauge-track) calc(var(--gauge-value) * 1.8deg), var(--gauge-track) 180deg, transparent 180deg, transparent 360deg );
  }
  .progress-gauge::after {
    content: "";
    position: absolute;
    left: var(--gauge-thickness);
    top: var(--gauge-thickness);
    width: calc(var(--gauge-size) - var(--gauge-thickness) * 2);
    height: calc(var(--gauge-size) - var(--gauge-thickness) * 2);
    border-radius: 50%;
    background-color: var(--bg-card);
  }
  .progress-gauge__inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 8%;
    gap: 2px;
  }
  .progress-gauge__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .progress-gauge__label {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 600;
  }
  .progress-gauge--sm {
    --gauge-size: 100px;
    --gauge-thickness: 10px;
  }
  .progress-gauge--md {
    --gauge-size: 140px;
    --gauge-thickness: 14px;
  }
  .progress-gauge--lg {
    --gauge-size: 180px;
    --gauge-thickness: 18px;
  }
  .progress-gauge--xl {
    --gauge-size: 220px;
    --gauge-thickness: 22px;
  }
  .progress-gauge--sm .progress-gauge__value {
    font-size: 1.25rem;
  }
  .progress-gauge--lg .progress-gauge__value {
    font-size: 2.25rem;
  }
  .progress-gauge--xl .progress-gauge__value {
    font-size: 2.75rem;
  }
  .progress-gauge--success {
    --gauge-color: var(--bg-progress-bar-success, var(--text-success));
  }
  .progress-gauge--warning {
    --gauge-color: var(--bg-progress-bar-warning, var(--text-warning));
  }
  .progress-gauge--danger {
    --gauge-color: var(--bg-progress-bar-danger,  var(--text-danger));
  }
  .progress-gauge--info {
    --gauge-color: var(--bg-progress-bar-info,    var(--text-info));
  }
  .progress-segments--with-labels {
    margin-top: 1.5rem;
    position: relative;
    overflow: visible;
  }
  .progress-segments--with-labels .progress-segment {
    position: relative;
    overflow: visible;
  }
  .progress-segments--with-labels .progress-segment[data-label]::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-tertiary);
    white-space: nowrap;
  }
  .progress-segments--with-labels .progress-segment.is-complete[data-label]::after, .progress-segments--with-labels .progress-segment.is-current[data-label]::after {
    color: var(--text-primary);
    font-weight: 600;
  }
  .track--compare {
    position: relative;
    background-color: var(--bg-progress);
  }
  .track--compare > .bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  .track--compare > .bar-compare__secondary {
    background-image: repeating-linear-gradient( 45deg, currentColor 0 4px, transparent 4px 8px );
    color: var(--bg-progress-bar-info);
    background-color: transparent;
  }
  .track.track--pill {
    border-radius: 9999px;
    height: 28px;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
  }
  .track.track--pill > .bar {
    border-radius: 9999px;
    background-image: linear-gradient( 90deg, var(--progress-accent) 0%, var(--progress-accent) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 90deg, var(--progress-accent) 0%, color-mix(in oklch, var(--progress-accent) 80%, white) 100% );
    }
  }
  .track.track--pill .bar-label {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 12px;
    letter-spacing: -0.005em;
  }
  @media (prefers-reduced-motion: reduce) {
    .track--vertical > .bar {
      transition: none;
    }
  }
  .progress-ring {
    --ring-size: 48px;
    --ring-stroke: 3.2;
    --value: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ring-size);
    height: var(--ring-size);
  }
  .progress-ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
  }
  .progress-ring__track, .progress-ring__fill {
    fill: none;
    stroke-width: var(--ring-stroke);
    stroke-linecap: round;
  }
  .progress-ring__track {
    stroke: var(--bg-progress);
  }
  .progress-ring__fill {
    stroke: var(--progress-accent);
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--value, 0));
    transition: stroke-dashoffset 500ms ease-in-out;
  }
  .progress-ring__value, .progress-ring__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
  }
  .progress-ring__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .progress-ring__inner {
    flex-direction: column;
    gap: 2px;
  }
  .progress-ring__inner .progress-ring__value {
    position: static;
    inset: auto;
    display: block;
  }
  .progress-ring__inner .progress-ring__label {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
  }
  .progress-ring-xs {
    --ring-size: 28px;
    --ring-stroke: 4;
  }
  .progress-ring-sm {
    --ring-size: 36px;
    --ring-stroke: 3.6;
  }
  .progress-ring-md {
    --ring-size: 48px;
    --ring-stroke: 3.2;
  }
  .progress-ring-lg {
    --ring-size: 64px;
    --ring-stroke: 3;
  }
  .progress-ring-xl {
    --ring-size: 84px;
    --ring-stroke: 2.6;
  }
  .progress-ring-xs .progress-ring__value {
    font-size: 0.625rem;
  }
  .progress-ring-sm .progress-ring__value {
    font-size: 0.6875rem;
  }
  .progress-ring-md .progress-ring__value {
    font-size: 0.875rem;
  }
  .progress-ring-lg .progress-ring__value {
    font-size: 1.125rem;
  }
  .progress-ring-xl .progress-ring__value {
    font-size: 1.5rem;
  }
  .progress-ring-success {
    --progress-accent: var(--bg-progress-bar-success);
  }
  .progress-ring-warning {
    --progress-accent: var(--bg-progress-bar-warning);
  }
  .progress-ring-danger {
    --progress-accent: var(--bg-progress-bar-danger);
  }
  .progress-ring-info {
    --progress-accent: var(--bg-progress-bar-info);
  }
  .progress-ring-neutral {
    --progress-accent: var(--bg-progress-bar-neutral);
  }
  .progress-ring-indeterminate .progress-ring__fill {
    --value: 25;
    transition: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: progress-ring-spin 0.9s linear infinite;
  }
  @keyframes progress-ring-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .progress-ring--half {
    height: calc(var(--ring-size) / 2 + 6px);
  }
  .progress-ring--half .progress-ring__svg {
    transform: none;
  }
  .progress-ring--half .progress-ring__value, .progress-ring--half .progress-ring__inner {
    bottom: 0;
    top: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .progress-ring__fill {
      transition: none;
    }
    .progress-ring-indeterminate .progress-ring__fill {
      animation: none;
    }
  }
  .track.track--tipped {
    position: relative;
    margin-top: 2.25rem;
  }
  .track.track--tipped.track--tipped-bottom {
    margin-top: 0;
    margin-bottom: 2.25rem;
  }
  .track__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: clamp(0%, calc(var(--value, 0) * 1%), 100%);
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary-alt);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
  }
  .track__tip--bottom {
    bottom: auto;
    top: calc(100% + 8px);
  }
}
@layer utilities {
  @property --sc-value {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  .simple-circle {
    --sc-size: 4rem;
    --sc-stroke: 6;
    --sc-font: 0.875rem;
    --sc-value: 0;
    --sc-color: var(--bg-brand-solid);
    --sc-track: var(--bg-quaternary);
    position: relative;
    display: inline-flex;
    width: var(--sc-size);
    height: var(--sc-size);
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .simple-circle__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
  }
  .simple-circle__track {
    fill: none;
    stroke: var(--sc-track);
    stroke-width: var(--sc-stroke);
  }
  .simple-circle__indicator {
    fill: none;
    stroke: var(--sc-color);
    stroke-width: var(--sc-stroke);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--sc-value));
    transition: stroke-dashoffset var(--sc-dur, 0.6s) var(--ease-spinner-dash, cubic-bezier(0.4, 0, 0.2, 1));
  }
  .simple-circle__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sc-font);
    font-weight: 500;
    line-height: 1;
    color: var(--text-primary);
  }
  .simple-circle--xs {
    --sc-size: 2.5rem;
    --sc-font: 0.625rem;
  }
  .simple-circle--sm {
    --sc-size: 3rem;
    --sc-font: 0.75rem;
  }
  .simple-circle--md {
    --sc-size: 4rem;
    --sc-font: 0.875rem;
  }
  .simple-circle--lg {
    --sc-size: 5rem;
    --sc-font: 1rem;
  }
  .simple-circle--xl {
    --sc-size: 6rem;
    --sc-font: 1.125rem;
  }
  .simple-circle--thin {
    --sc-stroke: 4;
  }
  .simple-circle--thick {
    --sc-stroke: 8;
  }
  .simple-circle--brand {
    --sc-color: var(--bg-brand-solid);
  }
  .simple-circle--success {
    --sc-color: var(--text-success);
  }
  .simple-circle--warning {
    --sc-color: var(--text-warning);
  }
  .simple-circle--danger {
    --sc-color: var(--text-danger);
  }
  .simple-circle--info {
    --sc-color: var(--text-info);
  }
  .simple-circle--neutral {
    --sc-color: var(--text-tertiary);
  }
  .simple-circle--success .simple-circle__label {
    color: var(--text-success);
  }
  .simple-circle--indeterminate .simple-circle__label {
    display: none;
  }
  .simple-circle--indeterminate .simple-circle__indicator {
    stroke-dashoffset: 75;
    transition: none;
  }
  .simple-circle--indeterminate .simple-circle__svg {
    animation: simple-circle-spin var(--duration-spinner-rotate, 1.2s) linear infinite;
    transform-origin: center;
  }
  @keyframes simple-circle-spin {
    from {
      transform: rotate(-90deg);
    }
    to {
      transform: rotate(270deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .simple-circle__indicator {
      transition: none;
    }
    .simple-circle--indeterminate .simple-circle__svg {
      animation: none;
    }
  }
}
@layer utilities {
  .status-progress {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    vertical-align: middle;
    color: var(--text-tertiary);
  }
  .status-progress--neutral {
    color: var(--text-tertiary);
  }
  .status-progress--info {
    color: var(--text-info);
  }
  .status-progress--success {
    color: var(--text-success);
  }
  .status-progress--warning {
    color: var(--text-warning);
  }
  .status-progress--danger {
    color: var(--text-danger);
  }
  .status-progress__track {
    display: inline-flex;
    align-items: center;
    gap: var(--status-progress-gap, 0.125rem);
  }
  .status-progress__seg {
    width: var(--status-progress-seg-w, 0.5rem);
    height: var(--status-progress-seg-h, 0.1875rem);
    border-radius: 9999px;
    background-color: var(--bg-progress);
    transition: background-color var(--duration-base, 200ms) var(--ease-out, ease);
  }
  .status-progress__seg.is-complete, .status-progress__seg.is-current {
    background-color: currentColor;
  }
  .status-progress__seg.is-current {
    box-shadow: 0 0 0 1px currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in oklch, currentColor 30%, transparent);
    }
  }
  .status-progress__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-transform: capitalize;
    color: currentColor;
  }
  .status-progress--xs {
    --status-progress-seg-w: 0.4375rem;
    --status-progress-seg-h: 0.1875rem;
    --status-progress-gap: 0.125rem;
  }
  .status-progress--sm {
    --status-progress-seg-w: 0.5rem;
    --status-progress-seg-h: 0.1875rem;
    --status-progress-gap: 0.125rem;
  }
  .status-progress--md {
    --status-progress-seg-w: 0.75rem;
    --status-progress-seg-h: 0.25rem;
    --status-progress-gap: 0.1875rem;
  }
  .status-progress--sm .status-progress__label, .status-progress--md .status-progress__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .status-progress--bar .status-progress__track {
    position: relative;
    display: block;
    overflow: hidden;
    width: var(--status-progress-bar-w, 4rem);
    height: var(--status-progress-bar-h, 0.25rem);
    border-radius: 9999px;
    background-color: var(--bg-progress);
    gap: 0;
  }
  .status-progress--bar .status-progress__fill {
    display: block;
    height: 100%;
    width: calc(var(--status-progress-value, 0) * 100%);
    background-color: currentColor;
    border-radius: inherit;
    transition: width var(--duration-base, 200ms) var(--ease-out, ease);
  }
  .status-progress--bar.status-progress--md .status-progress__track {
    --status-progress-bar-h: 0.375rem;
  }
  .status-progress--bar.status-progress--xs .status-progress__track {
    --status-progress-bar-w: 3rem;
    --status-progress-bar-h: 0.1875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .status-progress__seg, .status-progress--bar .status-progress__fill {
      transition: none;
    }
  }
}
@layer utilities {
  .table-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--bg-table, var(--alpha-white-100));
    border-color: var(--border-table-container, var(--border-primary));
    border-radius: var(--radius-table, var(--radius-md));
  }
  .table-container.table-surface {
    background-color: var(--bg-table-surface, var(--bg-table, var(--alpha-white-100)));
  }
  .table-container.table-flush {
    border-radius: var(--radius-none);
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .table-container.table-elevated {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .table-scroll {
    width: 100%;
    overflow: auto;
  }
  .table {
    margin-block: 0;
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    color: var(--text-table, var(--text-primary));
    background-color: var(--bg-table, var(--alpha-white-100));
    --bg-table-row-selected: var(--bg-secondary);
    --bg-table-row-accent: var(--border-focus);
    --text-table-row-accent: var(--border-focus);
    --shadow-table-header-sorted: inset 0 -2px 0 var(--border-focus);
  }
  .table-container, .table {
    --border-table-container: var(--border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --border-table-container: color-mix(in oklch, var(--border-primary) 60%, transparent);
    }
    --border-table-header: var(--border-primary-alt);
    @supports (color: color-mix(in lab, red, red)) {
      --border-table-header: color-mix(in oklch, var(--border-primary-alt) 55%, transparent);
    }
    --border-table: var(--border-primary-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      --border-table: color-mix(in oklch, var(--border-primary-subtle) 85%, transparent);
    }
    --border-table-grid: var(--border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --border-table-grid: color-mix(in oklch, var(--border-primary) 60%, transparent);
    }
    --border-table-grid-strong: var(--border-primary-alt);
    @supports (color: color-mix(in lab, red, red)) {
      --border-table-grid-strong: color-mix(in oklch, var(--border-primary-alt) 60%, transparent);
    }
  }
  .table thead > tr > th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    vertical-align: middle;
    font-family: 'Manrope', sans-serif;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: var(--bg-table-header, var(--bg-primary));
    color: var(--text-table-header, var(--text-secondary));
    border-color: var(--border-table-header, var(--border-primary-alt));
    white-space: nowrap;
  }
  .table tbody > tr > td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    color: var(--text-table, var(--text-primary));
    border-color: var(--border-table, var(--border-primary-subtle));
    background-color: transparent;
  }
  .table tfoot > tr > td {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    color: var(--text-table-footer, var(--text-secondary-alt));
    border-color: var(--border-table, var(--border-primary-subtle));
    background-color: var(--bg-table-footer, var(--bg-primary-subtle));
  }
  .table :is(th, td):first-child {
    padding-left: calc(var(--spacing) * 4);
  }
  .table :is(th, td):last-child {
    padding-right: calc(var(--spacing) * 4);
  }
  :where(.table th), :where(.table td) {
    text-align: left;
  }
  .table .col-num {
    text-align: right;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .col-shrink {
    width: 1%;
    white-space: nowrap;
  }
  .table :is(th, td).col-check {
    width: 1%;
    white-space: nowrap;
    text-align: center;
  }
  .table .cell-truncate {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table thead > tr > th.sort {
    position: relative;
    cursor: pointer;
    padding-right: calc(calc(var(--spacing) * 4) + 0.85rem);
    user-select: none;
    transition: background-color var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease;
  }
  .table thead > tr > th.sort::after {
    content: "\f0dc";
    display: inline-block;
    position: absolute;
    right: calc(var(--spacing) * 3);
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 7 Pro";
    font-style: normal;
    font-weight: 900;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-table-sort-resting, var(--text-quaternary));
    opacity: var(--opacity-table-sort-resting, 0.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: opacity var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease;
  }
  .table thead > tr > th.sort:hover {
    background-color: var(--bg-table-header-hover, var(--bg-primary-hover));
  }
  .table thead > tr > th.sort:hover::after {
    opacity: 1;
    color: var(--text-table-sort-hover, var(--text-secondary));
  }
  .table thead > tr > th.sort:active {
    background-color: var(--bg-table-header-pressed, var(--bg-table-header-active, var(--bg-secondary)));
  }
  .table thead > tr > th.sort:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
    z-index: 1;
  }
  .table thead > tr > th.is-sorted, .table thead > tr > th.sorting_asc, .table thead > tr > th.sorting_desc {
    background-color: var(--bg-table-header-active, var(--bg-secondary));
    color: var(--text-table-header-active, var(--text-primary));
    box-shadow: var(--shadow-table-header-sorted, inset 0 -2px 0 var(--border-focus));
  }
  .table thead > tr > th.sorting_asc::after, .table thead > tr > th.sorting_desc::after {
    opacity: 1;
    color: var(--text-table-sort, currentColor);
  }
  .table thead > tr > th.sorting_asc::after {
    content: "\f0de";
  }
  .table thead > tr > th.sorting_desc::after {
    content: "\f0dd";
  }
  .table.table-sort-quiet thead > tr > th.sort:not(.is-sorted):not(.sorting_asc):not(.sorting_desc)::after {
    opacity: 0;
  }
  .table.table-sort-quiet thead > tr > th.sort:hover::after {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .table thead > tr > th.sort, .table thead > tr > th.sort::after {
      transition: none;
    }
  }
  .table.table-relaxed thead > tr > th {
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .table.table-relaxed tbody > tr > td {
    padding-block: calc(var(--spacing) * 3.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .table.table-relaxed tfoot > tr > td {
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .table.table-compact thead > tr > th {
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .table.table-compact tbody > tr > td {
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .table.table-compact tfoot > tr > td {
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .table.table-dense thead > tr > th {
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .table.table-dense tbody > tr > td {
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .table.table-dense tfoot > tr > td {
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .table:not(.no-hover) tbody > tr:hover {
    background-color: var(--bg-table-row-hover, var(--bg-primary-subtle));
  }
  .table.table-hover:not(.no-hover) tbody > tr:hover {
    background-color: var(--bg-table-row-hover, var(--bg-primary-subtle));
  }
  .table.no-hover tbody > tr:hover {
    background-color: transparent;
  }
  .table tbody > tr:has(.empty-state):hover {
    background-color: transparent;
  }
  .table:not(.no-hover) tbody > tr:hover > :is(td, th).no-hover {
    background-color: var(--bg-table-cell-no-hover, var(--bg-table, var(--alpha-white-100)));
  }
  .table.table-zebra tbody > tr:nth-child(odd) {
    background-color: var(--bg-table-row-zebra, var(--bg-primary-subtle));
  }
  .table tbody > tr.selected, .table tbody > tr[aria-selected="true"] {
    background-color: var(--bg-table-row-selected, var(--bg-info-subtle));
  }
  .table tbody > tr.selected > :is(td, th):first-child, .table tbody > tr[aria-selected="true"] > :is(td, th):first-child {
    box-shadow: inset 2px 0 0 0 var(--bg-table-row-accent, var(--border-focus));
  }
  .table.table-clickable tbody > tr:focus-visible, .table tbody > tr[tabindex]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .table.table-select-accent tbody > tr.selected, .table.table-select-accent tbody > tr[aria-selected="true"] {
    background-color: transparent;
    background-image: linear-gradient(to right, var(--text-table-row-accent, var(--text-info)) 0%, var(--text-table-row-accent, var(--text-info)) 55%, transparent 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(to right, color-mix(in oklch, var(--text-table-row-accent, var(--text-info)) 18%, transparent) 0%, color-mix(in oklch, var(--text-table-row-accent, var(--text-info)) 6%, transparent) 55%, transparent 100%);
    }
  }
  .table.table-select-accent tbody > tr.selected > :is(td, th):first-child, .table.table-select-accent tbody > tr[aria-selected="true"] > :is(td, th):first-child {
    box-shadow: inset 2px 0 0 0 var(--text-table-row-accent, var(--text-info));
  }
  .table.table-select-accent:not(.no-hover) tbody > tr.selected:hover, .table.table-select-accent:not(.no-hover) tbody > tr[aria-selected="true"]:hover {
    background-color: transparent;
  }
  .table.table-clickable > tbody tr.tr-active, .table.table-clickable > tbody tr[aria-current="true"], .table > tbody tr.tr-active, .table > tbody tr[aria-current="true"] {
    background-color: var(--bg-table-row-active, var(--bg-primary));
    color: var(--text-table-active, var(--text-primary));
  }
  .table.table-clickable:not(.no-hover) tbody > tr:hover {
    cursor: pointer;
  }
  .table.table-borderless :is(th, td) {
    border-color: var(--alpha-0) !important;
  }
  .table tbody > tr.is-disabled, .table tbody > tr[aria-disabled="true"] {
    background-color: var(--bg-table-row-disabled, var(--bg-primary-subtle));
    color: var(--text-table-disabled, var(--text-disabled));
  }
  .table tbody > tr.is-disabled :is(a, button, input, select, textarea), .table tbody > tr[aria-disabled="true"] :is(a, button, input, select, textarea) {
    pointer-events: none;
    opacity: 0.65;
  }
  .table tbody > tr.tr-success {
    background-color: var(--bg-table-row-success, var(--bg-success-subtle));
    color: var(--text-table-row-success, var(--text-success-solid));
  }
  .table tbody > tr.tr-warning {
    background-color: var(--bg-table-row-warning, var(--bg-warning-subtle));
    color: var(--text-table-row-warning, var(--text-warning-solid));
  }
  .table tbody > tr.tr-danger {
    background-color: var(--bg-table-row-danger, var(--bg-danger-subtle));
    color: var(--text-table-row-danger, var(--text-danger-solid));
  }
  .row-sweep--success, .sweep--success {
    --row-sweep-tint: var(--bg-row-sweep-success);
  }
  .row-sweep--info, .sweep--info {
    --row-sweep-tint: var(--bg-row-sweep-info);
  }
  .row-sweep--warning, .sweep--warning {
    --row-sweep-tint: var(--bg-row-sweep-warning);
  }
  .row-sweep--danger, .sweep--danger {
    --row-sweep-tint: var(--bg-row-sweep-danger);
  }
  .table tbody > tr.row-sweep > td {
    position: relative;
    overflow: hidden;
  }
  .table tbody > tr.row-sweep > td::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--row-sweep-tint, var(--bg-row-sweep-info)), transparent);
  }
  .table tbody > tr.row-sweep.is-sweeping > td::after {
    animation: row-sweep-pass var(--duration-row-sweep) var(--ease-row-sweep) forwards;
  }
  .table tbody > tr.row-sweep.is-fading > td::after {
    animation: row-sweep-fade var(--duration-row-sweep-fade) ease forwards;
  }
  @keyframes row-sweep-pass {
    0% {
      opacity: 0;
      transform: translateX(-100%);
    }
    15% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: translateX(100%);
    }
  }
  @keyframes row-sweep-fade {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .table tbody > tr.row-sweep.is-sweeping > td::after {
      animation: none;
      transform: none;
      opacity: 0.12;
    }
    .table tbody > tr.row-sweep.is-fading > td::after {
      animation: none;
      transition: opacity 300ms ease;
      opacity: 0;
    }
  }
  .sweep {
    position: relative;
    overflow: hidden;
    --duration-row-sweep-fast: 500ms;
    --duration-row-sweep-slow: 1200ms;
  }
  .sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    background: linear-gradient(90deg, transparent, var(--row-sweep-tint, var(--bg-row-sweep-info)), transparent);
  }
  .sweep.is-sweeping::after {
    animation: row-sweep-pass var(--duration-row-sweep) var(--ease-row-sweep) forwards;
  }
  .sweep.is-fading::after {
    animation: row-sweep-fade var(--duration-row-sweep-fade) ease forwards;
  }
  .sweep.sweep--fast.is-sweeping::after {
    animation-duration: var(--duration-row-sweep-fast);
  }
  .sweep.sweep--slow.is-sweeping::after {
    animation-duration: var(--duration-row-sweep-slow);
  }
  .sweep.sweep--reverse.is-sweeping::after {
    animation-name: row-sweep-pass-reverse;
  }
  @keyframes row-sweep-pass-reverse {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }
    15% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: translateX(-100%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sweep.is-sweeping::after {
      animation: none;
      transform: none;
      opacity: 0.12;
    }
    .sweep.is-fading::after {
      animation: none;
      transition: opacity 300ms ease;
      opacity: 0;
    }
  }
  .table.table-cell-states tbody > tr > td:hover {
    background-color: var(--bg-table-cell-hover, var(--bg-primary-subtle));
  }
  .table.table-cell-states tbody > tr > td:focus-within {
    background-color: var(--bg-table-cell-focus, var(--bg-info-subtle));
  }
  .table.table-cell-states.table-cell-ring tbody > tr > td:focus-within {
    box-shadow: var(--ring-table-cell-focus, 0 0 0 2px var(--border-info-subtle));
  }
  .table td.controls {
    padding-inline: 1px;
    padding-block: 2px;
  }
  .table tr > td.controls:first-child {
    padding-right: 1px;
    padding-left: calc(var(--spacing) * 4);
  }
  .table tr > td.controls:last-child {
    padding-right: calc(var(--spacing) * 4);
    padding-left: 1px;
  }
  .table .cell-controls {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .table .cell-controls-center {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .table td.controls :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control) {
    width: 100%;
    border-radius: var(--radius-xs);
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .table td.controls :is(.combobox__control, .combobox__input, .combobox__chips) {
    width: 100%;
    border-radius: var(--radius-xs);
    padding-left: 0.375rem;
  }
  .table.table-editable td.controls :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control) {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--bg-table-control, var(--alpha-0));
    border-color: var(--border-table-control, var(--border-table, var(--border-primary-subtle)));
  }
  .table.table-editable td.controls :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control):hover {
    border-color: var(--border-input-hover);
  }
  .table.table-editable td.controls :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control):focus {
    border-color: var(--border-input-active);
    background-color: var(--bg-table-control-focus, var(--bg-input-select));
  }
  .table.table-editable td.controls :is(.combobox__control, .combobox__input, .combobox__chips) {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--bg-table-control, var(--alpha-0));
    border-color: var(--border-table-control, var(--border-table, var(--border-primary-subtle)));
  }
  .table.table-editable td.controls .combobox__control:hover, .table.table-editable td.controls .combobox__input:hover, .table.table-editable td.controls .combobox__chips:hover {
    border-color: var(--border-input-hover);
  }
  .table.table-editable td.controls .combobox.is-focused :is(.combobox__control, .combobox__input), .table.table-editable td.controls .combobox__control:focus, .table.table-editable td.controls .combobox__input:focus, .table.table-editable td.controls .combobox__chips:focus-within {
    border-color: var(--border-input-active);
    background-color: var(--bg-table-control-focus, var(--bg-input-select));
  }
  .table td.controls :is(.checkbox, .checkbox-soft, .checkbox-round, .radio, .radio-soft, .radio-ghost) {
    vertical-align: middle;
  }
  .table td.controls .dropdown {
    display: inline-flex;
  }
  .table :is(td, th).table-row-actions-cell {
    padding-block: 2px;
    text-align: right;
    width: var(--width-table-row-actions, 1%);
    white-space: nowrap;
  }
  .table-row-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-table-row-actions, 2px);
    opacity: var(--opacity-table-row-actions-resting, 0);
    transition: opacity var(--duration-table-row-actions, 100ms) ease;
  }
  .table:not(.no-hover) tbody > tr:hover .table-row-actions,  .table tbody > tr:focus-within .table-row-actions,  .table tbody > tr.selected .table-row-actions, .table tbody > tr[aria-selected="true"] .table-row-actions, .table tbody > tr.tr-active .table-row-actions, .table tbody > tr[aria-current="true"] .table-row-actions,  .table-row-actions.is-revealed {
    opacity: var(--opacity-table-row-actions-revealed, 1);
  }
  .table.table-row-actions-always tbody > tr .table-row-actions {
    opacity: var(--opacity-table-row-actions-revealed, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .table-row-actions {
      transition: none;
    }
  }
  .table.table-sticky-header thead, .table thead.sticky-top {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .table.table-sticky-footer tfoot, .table tfoot.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 20;
  }
  .table thead.sticky-top, .table.table-sticky-header thead {
    background-color: var(--bg-table-header-sticky, var(--bg-table-header, var(--bg-primary)));
  }
  .table thead.sticky-top > tr > th, .table.table-sticky-header thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--bg-table-header-sticky, var(--bg-table-header, var(--bg-primary)));
    border-bottom-color: var(--alpha-0);
  }
  .table.table-sticky-header thead > tr > th, .table thead.sticky-top > tr > th {
    box-shadow: var(--shadow-table-sticky-header, inset 0 -1px 0 var(--border-table-header, var(--border-primary-alt)));
  }
  .table tfoot.sticky-bottom > tr > td, .table.table-sticky-footer tfoot > tr > td {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background-color: var(--bg-table-footer-sticky, var(--bg-table-footer, var(--bg-primary-subtle)));
    border-top-color: var(--border-table, var(--border-primary-subtle));
  }
  .table.table-sticky-footer tfoot > tr > td, .table tfoot.sticky-bottom > tr > td {
    box-shadow: var(--shadow-table-sticky-footer, inset 0 1px 0 var(--border-table, var(--border-primary-subtle)));
  }
  .table-container .table thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table.table-sticky-header thead > tr:first-child > th:first-child, .table-container .table thead.sticky-top > tr:first-child > th:first-child {
    border-top-left-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table.table-sticky-header thead > tr:first-child > th:last-child, .table-container .table thead.sticky-top > tr:first-child > th:last-child {
    border-top-right-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table tfoot > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table tfoot > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table:has(tfoot) tbody > tr:last-child > td:first-child, .table-container .table:has(tfoot) tbody > tr:last-child > td:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .table-container .table.table-sticky-footer tfoot > tr:last-child > td:first-child, .table-container .table tfoot.sticky-bottom > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--radius-table, var(--radius-md));
  }
  .table-container .table.table-sticky-footer tfoot > tr:last-child > td:last-child, .table-container .table tfoot.sticky-bottom > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--radius-table, var(--radius-md));
  }
  .tpl-frame__viewport .table-container, .card.p-0 .table-container {
    border: 0;
    border-radius: 0;
  }
  .table-container.table-flush .table :is(th, td), .tpl-frame__viewport .table-container .table :is(th, td), .card.p-0 .table-container .table :is(th, td) {
    border-radius: 0 !important;
  }
  .sticky-col {
    position: sticky;
    left: 0;
    z-index: 30;
    background-color: var(--bg-table-sticky, var(--bg-table, var(--alpha-white-100)));
    box-shadow: var(--shadow-table-sticky-col, inset -1px 0 0 var(--border-table-sticky-divider, var(--border-primary-solid)));
  }
  .sticky-col-right {
    position: sticky;
    right: 0;
    z-index: 30;
    background-color: var(--bg-table-sticky, var(--bg-table, var(--alpha-white-100)));
    box-shadow: var(--shadow-table-sticky-col-right, inset 1px 0 0 var(--border-table-sticky-divider, var(--border-primary-solid)));
  }
  .table thead :is(.sticky-col, .sticky-col-right) {
    z-index: 40;
    background-color: var(--bg-table-header-sticky, var(--bg-table-header, var(--bg-primary)));
  }
  .table:not(.no-hover) tbody > tr:hover :is(.sticky-col, .sticky-col-right) {
    background-color: var(--bg-table-sticky-hover, var(--bg-table-row-hover, var(--bg-primary-subtle)));
  }
  .table tbody > tr.selected :is(.sticky-col, .sticky-col-right), .table tbody > tr[aria-selected="true"] :is(.sticky-col, .sticky-col-right) {
    background-color: var(--bg-table-sticky-selected, var(--bg-table-row-selected, var(--bg-info-subtle)));
  }
  .table tbody > tr.tr-active :is(.sticky-col, .sticky-col-right), .table tbody > tr[aria-current="true"] :is(.sticky-col, .sticky-col-right) {
    background-color: var(--bg-table-sticky-active, var(--bg-table-row-active, var(--bg-primary)));
  }
  .table td[col-index]:hover, .table th[col-index]:hover {
    background-color: var(--bg-table-col-hover, var(--bg-info-subtle));
  }
  .table.table-grid thead > tr > th, .table.table-grid tbody > tr > td, .table.table-grid tfoot > tr > td {
    border-right: 1px solid var(--border-table-grid, var(--border-primary));
  }
  .table.table-grid :is(th, td):last-child {
    border-right-color: var(--alpha-0);
  }
  .table.table-grid-strong thead > tr > th, .table.table-grid-strong tbody > tr > td, .table.table-grid-strong tfoot > tr > td {
    border-right: 1px solid var(--border-table-grid-strong, var(--border-primary-alt));
  }
  .table.table-col-borders :is(th, td).col-border {
    border-right: 1px solid var(--border-table-grid, var(--border-primary));
  }
  .table.table-col-borders :is(th, td).col-border-left {
    border-left: 1px solid var(--border-table-grid, var(--border-primary));
  }
  .table :is(th, td).cell-border {
    border: 1px solid var(--border-table-grid, var(--border-primary));
  }
  .table :is(th, td).cell-border-x {
    border-left: 1px solid var(--border-table-grid, var(--border-primary));
    border-right: 1px solid var(--border-table-grid, var(--border-primary));
  }
  .table :is(th, td).cell-border-y {
    border-top: 1px solid var(--border-table-grid, var(--border-primary));
    border-bottom: 1px solid var(--border-table-grid, var(--border-primary));
  }
  .table :is(th, td).no-border {
    border-color: var(--alpha-0) !important;
  }
  .table tbody > tr.tr-expandable {
    cursor: pointer;
  }
  .table tbody > tr.tr-expandable .expand-icon {
    display: inline-block;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .table tbody > tr.tr-expandable.is-expanded .expand-icon {
    transform: rotate(90deg);
  }
  .table tbody > tr.tr-detail {
    display: none;
  }
  .table tbody > tr.tr-detail.is-expanded {
    display: table-row;
  }
  .table tbody > tr.tr-detail > td {
    background-color: var(--bg-table-row-detail, var(--bg-primary-subtle));
    border-bottom-color: var(--border-table, var(--border-primary-subtle));
  }
  .table tbody > tr.tr-skeleton > td {
    padding-block: calc(var(--spacing) * 3);
  }
  .table tbody > tr.tr-skeleton .skeleton {
    height: calc(var(--spacing) * 3);
    border-radius: var(--radius-sm);
  }
  .table-empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    color: var(--text-tertiary);
  }
  .table-empty__icon {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    opacity: 40%;
  }
  .table-empty__title {
    margin-bottom: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .table-empty__message {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .table__resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: inline-flex;
    cursor: col-resize;
    align-items: center;
    justify-content: center;
    width: var(--size-table-resize-handle-width, 6px);
    background-color: transparent;
    z-index: 2;
    user-select: none;
  }
  .table__resize-handle::after {
    content: "";
    width: 1px;
    height: 55%;
    border-radius: 1px;
    background-color: var(--border-divider);
    opacity: 0.55;
    transition: background-color var(--duration-fast, 100ms) ease, opacity var(--duration-fast, 100ms) ease, width var(--duration-fast, 100ms) ease, height var(--duration-fast, 100ms) ease;
  }
  .table__resize-handle:hover::after {
    width: 2px;
    height: 80%;
    opacity: 1;
    background-color: var(--bg-table-resize-handle-hover, var(--text-info, var(--utility-blue-500)));
  }
  .table__resize-handle--active::after {
    width: 2px;
    height: 100%;
    opacity: 1;
    background-color: var(--bg-table-resize-handle-active, var(--text-info, var(--utility-blue-500)));
  }
  @media (prefers-reduced-motion: reduce) {
    .table__resize-handle::after {
      transition: none;
    }
  }
  .table thead th .col-pin {
    margin-left: var(--spacing);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 4px;
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity 100ms ease, color 100ms ease, background-color 100ms ease;
    font-size: 10px;
  }
  .table thead tr > th:hover .col-pin, .table thead tr > th:focus-within .col-pin, .table thead tr > th.is-pinned .col-pin, .table thead tr > th.is-pinned-right .col-pin {
    opacity: 1;
  }
  .table thead th .col-pin:hover {
    color: var(--text-info);
    background-color: var(--bg-info-subtle);
  }
  .table thead th .col-pin.is-active, .table thead th.is-pinned .col-pin, .table thead th.is-pinned-right .col-pin {
    color: var(--text-info);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .table thead th .col-pin {
      transition: none;
    }
  }
  .table tbody > tr.tr-group > td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    background-color: var(--bg-table-group, var(--bg-primary-subtle, var(--utility-neutral-50)));
    border-top: 1px solid var(--border-table, var(--border-primary-subtle));
    border-bottom: 1px solid var(--border-table, var(--border-primary-subtle));
  }
  .table tbody > tr.tr-group:first-child > td {
    border-top: 0;
  }
  .table:not(.no-hover) tbody > tr.tr-group:hover > td {
    background-color: var(--bg-table-group, var(--bg-primary-subtle, var(--utility-neutral-50)));
  }
  .table tbody > tr.tr-group.is-sticky > td {
    position: sticky;
    top: var(--table-group-sticky-top, 33px);
    z-index: 2;
  }
  .table tbody > tr.tr-summary > td, .table tbody > tr.tr-total > td {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--bg-table-summary, var(--bg-secondary, var(--utility-neutral-50)));
    border-top: 1px solid var(--border-table, var(--border-primary-subtle));
    border-bottom: 1px solid var(--border-table, var(--border-primary-subtle));
  }
  .table tbody > tr.tr-total > td {
    background-color: var(--bg-table-total, var(--bg-primary, var(--utility-neutral-100)));
    border-top: 2px solid var(--border-table-strong, var(--border-primary-alt, var(--border-primary)));
  }
  .table:not(.no-hover) tbody > tr.tr-summary:hover > td, .table:not(.no-hover) tbody > tr.tr-total:hover > td {
    background-color: inherit;
  }
  .table .cell-currency, .table .cell-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .table .cell-persona {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .table .cell-persona__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
  }
  .table .cell-persona__name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .table .cell-persona__sub {
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .table .cell-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
  }
  .table .cell-progress__bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background-color: var(--bg-table-progress-track, var(--border-divider));
    overflow: hidden;
    min-width: 40px;
  }
  .table .cell-progress__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--bg-table-progress-fill, var(--text-info));
    width: var(--cell-progress, 0%);
    transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .table .cell-progress__value {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
    font-size: 11px;
  }
  @media (prefers-reduced-motion: reduce) {
    .table .cell-progress__fill {
      transition: none;
    }
  }
  .table.table-bordered-rows {
    border-spacing: 0 6px;
    border-collapse: separate;
  }
  .table.table-bordered-rows tbody > tr > td {
    background-color: var(--bg-panel, var(--alpha-white-100));
    border-top: 1px solid var(--border-table, var(--border-primary-subtle));
    border-bottom: 1px solid var(--border-table, var(--border-primary-subtle));
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .table.table-bordered-rows tbody > tr > td:first-child {
    border-left: 1px solid var(--border-table, var(--border-primary-subtle));
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .table.table-bordered-rows tbody > tr > td:last-child {
    border-right: 1px solid var(--border-table, var(--border-primary-subtle));
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .table.table-bordered-rows:not(.no-hover) tbody > tr:hover > td {
    background-color: var(--bg-table-row-hover);
  }
  .table tbody > tr.tr-expandable .expand-icon i {
    font-size: 10px;
    color: var(--text-tertiary);
    line-height: 1;
    display: inline-block;
  }
  .table tbody > tr.tr-detail > td {
    padding: 12px 16px;
  }
  .tr-detail__panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    align-items: start;
  }
  .tr-detail__panel-section dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 4px;
  }
  .tr-detail__panel-section dd {
    font-size: 13px;
    color: var(--text-primary);
  }
}
@layer utilities {
  .data-grid {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    --border-table-sticky-divider: var(--border-table);
    --data-grid-frozen-shadow: var(--alpha-black-10);
  }
  .data-grid .table > thead > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table > tbody > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table > tfoot > tr > :is(.sticky-col, .sticky-col-right) {
    box-shadow: inset -1px 0 0 var(--border-table);
  }
  .data-grid .table > thead > tr > .sticky-col-right, .data-grid .table > tbody > tr > .sticky-col-right, .data-grid .table > tfoot > tr > .sticky-col-right {
    box-shadow: inset 1px 0 0 var(--border-table);
  }
  .data-grid__scroll {
    min-height: 0;
    width: 100%;
    flex: 1;
    overflow: auto;
    position: relative;
  }
  .data-grid__scroll:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
  }
  .data-grid .table > thead > tr > th:not(.sticky-col):not(.sticky-col-right), .data-grid .table > tbody > tr > td:not(.sticky-col):not(.sticky-col-right), .data-grid .table > tfoot > tr > td:not(.sticky-col):not(.sticky-col-right) {
    position: relative;
  }
  .data-grid .table > thead > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table > tbody > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table > tfoot > tr > :is(.sticky-col, .sticky-col-right) {
    position: sticky;
  }
  .data-grid__scroll {
    background-color: var(--bg-table, var(--bg-panel));
  }
  .data-grid .table > tbody > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table > tfoot > tr > :is(.sticky-col, .sticky-col-right) {
    background-color: var(--bg-table, var(--bg-panel));
  }
  .data-grid .table > tbody > tr > td:not(.sticky-col):not(.sticky-col-right), .data-grid .table > tfoot > tr > td:not(.sticky-col):not(.sticky-col-right) {
    z-index: 0;
  }
  .data-grid .table > thead > tr > th:not(.sticky-col):not(.sticky-col-right) {
    z-index: 1;
  }
  .data-grid .table > tbody > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table > tfoot > tr > :is(.sticky-col, .sticky-col-right) {
    z-index: 2;
  }
  .data-grid .table.table-sticky-header > thead > tr > th:not(.sticky-col):not(.sticky-col-right), .data-grid .table > thead.sticky-top > tr > th:not(.sticky-col):not(.sticky-col-right) {
    z-index: 3;
  }
  .data-grid .table.table-sticky-footer > tfoot > tr > td:not(.sticky-col):not(.sticky-col-right), .data-grid .table > tfoot.sticky-bottom > tr > td:not(.sticky-col):not(.sticky-col-right) {
    z-index: 3;
  }
  .data-grid .table.table-sticky-header > thead > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table > thead.sticky-top > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table.table-sticky-footer > tfoot > tr > :is(.sticky-col, .sticky-col-right), .data-grid .table > tfoot.sticky-bottom > tr > :is(.sticky-col, .sticky-col-right) {
    z-index: 4;
  }
  .data-grid .table {
    border-collapse: separate;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
  }
  .data-grid .table thead > tr > th {
    -webkit-user-select: none;
    user-select: none;
  }
  .data-grid .table thead > tr > th .data-grid__col-subtext {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
  }
  .data-grid__cell {
    position: relative;
    cursor: pointer;
    transition: box-shadow var(--duration-fast) var(--ease-in-out), outline-color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out);
    min-width: 72px;
    user-select: none;
    outline: 1px solid transparent;
    outline-offset: -1px;
  }
  .data-grid__cell:hover {
    background-color: var(--bg-table-row-hover, var(--bg-primary-subtle));
  }
  .data-grid__cell.is-focused {
    box-shadow: inset 0 0 0 2px var(--border-focus);
    outline: none;
    z-index: 5 !important;
  }
  .data-grid__cell.is-editing {
    box-shadow: inset 0 0 0 2px var(--border-focus);
    outline: none;
    background-color: var(--bg-input-soft-active, var(--utility-neutral-100));
    z-index: 6 !important;
  }
  .data-grid__cell.is-dirty {
    outline-color: var(--border-warning);
  }
  .data-grid__cell.is-error {
    outline-color: var(--border-danger);
  }
  .data-grid__cell-plain {
    text-align: center;
    vertical-align: middle;
    padding: 6px 12px;
  }
  .data-grid__cell-plain .checkbox, .data-grid__cell-plain input[type="checkbox"] {
    vertical-align: middle;
  }
  .data-grid__cell-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }
  .data-grid__cell-value:empty::before {
    content: '—';
    color: var(--text-quaternary, var(--text-tertiary));
    opacity: 0.4;
  }
  .data-grid__cell--text .data-grid__cell-value {
    text-align: left;
  }
  .data-grid__cell.is-placeholder .data-grid__cell-value {
    color: var(--text-quaternary, var(--text-tertiary));
    opacity: 0.5;
    font-style: italic;
    padding-inline-end: 2px;
  }
  .data-grid__cell.is-placeholder .data-grid__cell-value::before {
    content: none;
  }
  .data-grid__cell.is-placeholder:hover .data-grid__cell-value {
    opacity: 0.7;
  }
  .data-grid__edit-popover {
    width: 220px;
  }
  .data-grid__edit-popover .popover__header {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .data-grid__edit-popover .popover__header-title {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-secondary);
  }
  .data-grid__edit-popover .popover__header-subtext {
    margin-left: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .data-grid__edit-popover .popover__body {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .data-grid__edit-popover .popover__footer {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .data-grid__edit-popover .popover__footer-context {
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .data-grid__lane-popover {
    width: 300px;
  }
  .data-grid__lane-popover--address {
    width: 340px;
  }
  .data-grid__lane-popover .popover__header {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .data-grid__lane-popover .popover__body {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .data-grid__lane-popover--address .popover__body {
    padding: calc(var(--spacing) * 3);
  }
  .data-grid__lane-popover--address .form-group {
    margin-bottom: 0;
  }
  .data-grid__lane-popover .data-grid__lane-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
  }
  .data-grid__lane-popover .data-grid__lane-field {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .data-grid__lane-popover .data-grid__lane-field--full {
    grid-column: span 2 / span 2;
  }
  .data-grid__lane-popover .data-grid__lane-field > label {
    margin-bottom: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .data-grid__lane-popover .popover__footer {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .data-grid__cell.is-save-success {
    animation: cell-save-flash 1s ease-out forwards;
  }
  @keyframes cell-save-flash {
    0% {
      outline-color: var(--border-success, var(--utility-green-500));
    }
    10% {
      outline-color: var(--border-success, var(--utility-green-500));
    }
    100% {
      outline-color: transparent;
    }
  }
  .data-grid__row-actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .data-grid [data-grid-edit-save].is-saving {
    pointer-events: none;
    opacity: 60%;
  }
  .data-grid__paste-zone {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-info-subtle);
    border: 2px dashed var(--border-info);
    border-radius: var(--radius-table, var(--radius-lg));
  }
  .data-grid__paste-zone.is-active {
    display: flex;
    &.collapse.show {
      display: flex;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .data-grid__cell {
      transition: none;
    }
    .data-grid__cell.is-save-success {
      animation: none;
    }
  }
  .data-grid--compact .table thead > tr > th, .data-grid--compact .data-grid__cell {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
  }
  .data-grid--compact .data-grid__cell {
    min-width: 60px;
  }
  .data-grid--comfortable .table thead > tr > th, .data-grid--comfortable .data-grid__cell {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13.5px;
  }
  .data-grid--lane-rates .table thead > tr > th:not(.sticky-col):not(.data-grid__col-actions) {
    text-align: right;
  }
  .data-grid--lane-rates .table thead > tr > th:not(.sticky-col):not(.data-grid__col-actions) .data-grid__col-subtext {
    text-align: right;
  }
  .data-grid--shadow-frozen .table .sticky-col + :not(.sticky-col)::before, .data-grid--shadow-frozen .table .sticky-col.data-grid__cell--frozen-edge::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    pointer-events: none;
    z-index: 1;
  }
  .data-grid--shadow-frozen .table .sticky-col + :not(.sticky-col)::before {
    left: 0;
    background: linear-gradient(to right, var(--data-grid-frozen-shadow), transparent);
    margin-left: -8px;
  }
  .data-grid--shadow-frozen .table .sticky-col.data-grid__cell--frozen-edge {
    position: sticky;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .data-grid {
    --data-grid-frozen-shadow: var(--alpha-black-40);
  }
  .data-grid .table tbody > tr.is-selected > td, .data-grid .table tbody > tr.is-selected > td.sticky-col {
    background-color: var(--bg-table-row-selected, var(--bg-info-subtle));
  }
  .data-grid .table tbody > tr.is-selected:hover > td, .data-grid .table tbody > tr.is-selected:hover > td.sticky-col {
    background-color: var(--bg-table-row-selected, var(--bg-info-subtle));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-table-row-selected, var(--bg-info-subtle)) 70%, var(--bg-table-row-hover));
    }
  }
  .data-grid .table tbody > tr.is-locked > td, .data-grid .table tbody > tr.is-locked > td.sticky-col {
    background-color: var(--bg-table-row-locked, var(--bg-secondary, var(--utility-neutral-50)));
    color: var(--text-tertiary);
    font-style: italic;
  }
  .data-grid .table tbody > tr.is-locked .data-grid__cell {
    pointer-events: none;
    cursor: not-allowed;
  }
  .data-grid .table tbody > tr.is-locked .data-grid__cell::after {
    content: "\f023";
    display: none;
  }
  .data-grid .table tbody > tr.is-summary > td, .data-grid .table tbody > tr.is-summary > td.sticky-col {
    font-weight: 600;
    background-color: var(--bg-table-summary, var(--bg-primary, var(--utility-neutral-100)));
    border-top: 2px solid var(--border-table-strong, var(--border-primary-alt, var(--border-primary)));
  }
  .data-grid .table tbody > tr.is-summary .data-grid__cell {
    cursor: default;
  }
  .data-grid .table tbody > tr.is-group > td {
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background-color: var(--bg-table-group, var(--bg-primary-subtle));
    border-top: 1px solid var(--border-table);
    border-bottom: 1px solid var(--border-table);
    padding: 4px 12px;
  }
  .data-grid .table tbody > tr.is-skeleton > td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .data-grid .table tbody > tr.is-skeleton .data-grid__skeleton {
    display: block;
    height: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient( 90deg, var(--bg-skeleton) 0%, var(--bg-skeleton-highlight) 50%, var(--bg-skeleton) 100% );
    background-size: 200% 100%;
    animation: data-grid-skeleton var(--skeleton-shimmer-duration, 1.4s) var(--ease-in-out) infinite;
  }
  @keyframes data-grid-skeleton {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .data-grid .table tbody > tr.is-skeleton .data-grid__skeleton {
      animation: none;
    }
  }
  .data-grid__cell--currency .data-grid__cell-value, .data-grid__cell--percent .data-grid__cell-value, .data-grid__cell--number .data-grid__cell-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .data-grid__cell--date .data-grid__cell-value, .data-grid__cell--datetime .data-grid__cell-value {
    font-variant-numeric: tabular-nums;
  }
  .data-grid__cell--badge .data-grid__cell-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .data-grid__cell--boolean, .data-grid__cell--checkbox {
    text-align: center;
  }
  .data-grid__cell--color .data-grid__cell-value::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background-color: currentColor;
    border: 1px solid var(--border-divider);
    margin-right: 6px;
    vertical-align: middle;
  }
  .data-grid__select-col {
    width: 36px;
    text-align: center;
  }
  .data-grid__select-col input[type="checkbox"] {
    cursor: pointer;
  }
  .data-grid__col-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 100ms ease, color 100ms ease, background-color 100ms ease;
  }
  .data-grid .table thead th:hover .data-grid__col-menu, .data-grid__col-menu:focus-visible, .data-grid__col-menu.is-open {
    opacity: 1;
  }
  .data-grid__col-menu:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-subtle);
  }
  .card > .data-grid {
    margin: -1px;
    border-radius: inherit;
    overflow: hidden;
  }
  .data-grid__switch {
    display: inline-flex;
    align-items: center;
    width: 28px;
    height: 16px;
    padding: 2px;
    border-radius: 999px;
    background-color: var(--bg-toggle-track);
    transition: background-color var(--duration-fast) var(--ease-default);
    cursor: pointer;
    vertical-align: middle;
  }
  .data-grid__switch.is-on {
    background-color: var(--bg-toggle-track-success);
  }
  .data-grid__switch-thumb {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background-color: var(--bg-toggle-thumb);
    box-shadow: var(--shadow-toggle-thumb);
    transform: translateX(0);
    transition: transform var(--duration-fast) var(--ease-default);
  }
  .data-grid__switch.is-on .data-grid__switch-thumb {
    transform: translateX(12px);
  }
}
@layer utilities {
  .rate-matrix {
    background: var(--bg-carrier-agreement-panel);
  }
  .modal-body:has(> .rate-matrix) {
    display: flex;
    flex-direction: column;
  }
  .modal-body > .rate-matrix {
    flex: 1;
    min-height: 0;
  }
  .rate-matrix__cell {
    background: var(--bg-rate-matrix-cell);
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .rate-matrix__cell:placeholder-shown {
    background: var(--bg-rate-matrix-cell-empty);
  }
  .rate-matrix__cell:focus {
    border-color: var(--border-rate-cell-active);
    outline: none;
    box-shadow: 0 0 0 2px var(--border-rate-cell-active);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-rate-cell-active) 25%, transparent);
    }
  }
  .rate-matrix__cell.is-dirty {
    background: var(--bg-rate-matrix-cell-dirty);
  }
  .rate-matrix__muted {
    color: var(--text-rate-matrix-muted);
  }
}
@layer utilities {
  .rating {
    --star-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z' fill='%23000'/%3E%3C/svg%3E");
    --star-size: 1rem;
    --star-gap: 0.125rem;
    display: inline-flex;
    align-items: center;
    gap: var(--star-gap);
  }
  .rating__star {
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--star-size);
    height: var(--star-size);
    --rating-fill: 100%;
  }
  .rating__star::before, .rating__star::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--star-glyph) center / contain no-repeat;
    mask: var(--star-glyph) center / contain no-repeat;
  }
  .rating__star::before {
    background-color: var(--star-empty);
  }
  .rating__star::after {
    background-color: var(--star-filled);
    clip-path: inset(0 calc(100% - var(--rating-fill, 0%)) 0 0);
    transition: clip-path var(--duration-fast, 120ms) ease, background-color var(--duration-fast, 120ms) ease;
  }
  .rating__star.is-empty {
    --rating-fill: 0%;
  }
  .rating__star.is-half {
    --rating-fill: 50%;
  }
  .rating__star.is-full {
    --rating-fill: 100%;
  }
  .rating-xs {
    --star-size: 0.75rem;
    --star-gap: 0.0625rem;
  }
  .rating-sm {
    --star-size: 0.875rem;
    --star-gap: 0.125rem;
  }
  .rating-md {
    --star-size: 1rem;
    --star-gap: 0.125rem;
  }
  .rating-lg {
    --star-size: 1.25rem;
    --star-gap: 0.1875rem;
  }
  .rating-xl {
    --star-size: 1.5rem;
    --star-gap: 0.25rem;
  }
  .rating-brand {
    --star-filled: var(--border-focus);
    --star-filled-hover: var(--border-focus);
  }
  .rating-danger {
    --star-filled: var(--text-danger);
    --star-filled-hover: var(--text-danger-hover);
  }
  .rating-success {
    --star-filled: var(--text-success);
    --star-filled-hover: var(--text-success-hover);
  }
  .rating-info {
    --star-filled: var(--text-info);
    --star-filled-hover: var(--text-info-hover);
  }
  .rating-warning {
    --star-filled: var(--utility-yellow-400);
    --star-filled-hover: var(--utility-yellow-500);
  }
  .rating-neutral {
    --star-filled: var(--text-tertiary);
    --star-filled-hover: var(--text-secondary);
  }
  .rating.is-disabled, .rating[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
  }
  .rating.is-loading .rating__star {
    --rating-fill: 0%;
  }
  .rating.is-loading .rating__star::before {
    animation: rating-pulse 1.4s ease-in-out infinite;
  }
  .rating.is-empty .rating__star {
    --rating-fill: 0%;
  }
  @keyframes rating-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.45;
    }
  }
  .rating-interactive {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }
  .rating__legend {
    padding: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-form-label, var(--text-secondary));
  }
  .rating__stars {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--star-gap);
  }
  .rating__input {
    position: absolute;
    margin: -1px;
    height: 1px;
    width: 1px;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
  }
  .rating-interactive .rating__star {
    cursor: pointer;
    --rating-fill: 0%;
    border-radius: var(--radius-sm, 0.25rem);
    transition: transform var(--duration-fast, 120ms) ease;
  }
  .rating-interactive .rating__input:checked ~ .rating__star {
    --rating-fill: 100%;
  }
  .rating-interactive .rating__stars:hover .rating__star {
    --rating-fill: 0%;
  }
  .rating-interactive .rating__stars:hover .rating__star:hover, .rating-interactive .rating__stars:hover .rating__star:hover ~ .rating__star {
    --rating-fill: 100%;
  }
  .rating-interactive .rating__star:hover::after {
    background-color: var(--star-filled-hover);
  }
  .rating-interactive .rating__star:active {
    transform: scale(0.92);
  }
  .rating-interactive .rating__input:focus-visible + .rating__star {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--border-focus);
  }
  .rating-interactive:disabled, .rating-interactive.is-disabled, .rating-interactive.is-readonly {
    opacity: 0.6;
  }
  .rating-interactive:disabled .rating__star, .rating-interactive.is-disabled .rating__star, .rating-interactive.is-readonly .rating__star {
    pointer-events: none;
    cursor: default;
  }
  .rating-interactive.is-readonly {
    opacity: 1;
  }
  .rating-interactive.is-error .rating__star::before {
    background-color: var(--border-danger);
  }
  .rating-interactive.is-success .rating__star::before {
    background-color: var(--border-success);
  }
  .rating__hint {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-hint, var(--text-tertiary));
  }
  .rating-interactive.is-error .rating__hint {
    color: var(--text-form-error, var(--text-danger));
  }
  .rating-interactive.is-success .rating__hint {
    color: var(--text-form-success, var(--text-success));
  }
  .rating__value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .rating-badge {
    display: inline-flex;
    align-items: center;
    color: var(--text-primary);
  }
  .rating-badge__wreath {
    --wreath-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='81' viewBox='0 0 36 81'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M34.188 79.123C21.8844 77.4193 12.9273 67.7396 8.84084 54.5087C7.16207 49.0327 6.91909 42.9593 7.50445 36.6094C8.58681 25.2702 13.7888 15.4245 21.3764 8.24482C21.4095 8.21163 21.4206 8.20057 21.4316 8.23376C21.4537 8.26695 21.52 8.30013 21.5531 8.32226C21.5973 8.34439 21.6083 8.32226 21.5752 8.37757C13.5237 15.7563 8.35488 27.4938 7.79161 39.3529C6.91909 56.2898 15.1362 71.2907 27.4509 76.4569C29.5162 77.3308 31.6809 77.9946 33.934 78.3375C34.0886 78.5367 34.177 78.8132 34.188 79.123Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.51737 50.8359C4.52243 52.0306 6.12388 53.2033 7.84683 52.7497C7.93518 52.8825 8.38801 53.5462 8.45428 53.6458C8.53159 53.7675 8.67517 53.8892 8.78561 53.7896C8.85188 53.7453 8.9071 53.6458 8.84084 53.4909C8.58681 53.1812 8.34383 52.8603 8.05667 52.5285C7.54863 49.8402 6.80864 48.0481 5.26241 46.2338C3.4732 44.1541 1.6398 43.2248 0.502216 42.8376C0.336548 42.7934 0.181926 42.7491 0.0162576 42.6938C-0.0941877 43.7337 0.380727 45.2493 0.756241 46.1121C1.48518 47.8822 2.28039 49.4309 3.51737 50.8359Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.317 12.9686C18.1735 13.0239 17.3341 13.2451 17.2347 13.0792C17.2015 13.0349 17.2457 12.869 17.323 12.8579C17.6323 12.8247 17.9747 12.8026 18.2729 12.7362C18.814 11.0326 20.3161 10.2914 21.6967 10.0038C23.3533 9.6719 25.1757 10.1808 27.1306 10.4573C27.23 10.4795 27.3404 10.4905 27.4288 10.4905C27.3956 10.5569 27.3515 10.6012 27.3073 10.6675C26.49 11.7849 25.2088 12.8137 23.9608 13.3226C23.1214 13.6766 22.1164 13.8757 21.1334 13.8425C20.0952 13.7983 19.2227 13.5659 18.317 12.9686Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.5531 8.3112C21.6194 8.33332 21.6194 8.3112 21.7408 8.24482C21.9728 8.02357 22.1716 7.89082 22.4035 7.68063C23.7289 7.69169 24.9879 7.29344 26.1807 6.49693C26.7109 6.14293 27.241 5.71148 27.6828 5.19154C28.7431 4.05209 29.5935 2.38164 29.9801 0.854996C30.0022 0.766495 30.0132 0.711182 30.0242 0.622681C29.9248 0.666931 29.8365 0.711183 29.7371 0.755433C27.5945 1.61832 25.5181 2.01657 23.7951 3.68703C22.6244 4.80435 22.017 6.15399 22.2599 7.45938C21.9949 7.66957 21.7188 7.86869 21.4647 8.11207C21.3543 8.21163 21.4868 8.3112 21.5531 8.3112Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.7557 20.1039C13.6121 20.1814 12.8058 20.6018 12.6843 20.4579C12.6291 20.4026 12.6512 20.2256 12.7285 20.1924C13.0267 20.0818 13.3801 20.0044 13.6783 19.8716C13.7888 18.6658 14.4625 17.5374 15.7989 16.763C17.8421 15.6789 20.1615 15.8559 22.3483 15.6678C22.4587 15.6568 22.5581 15.6568 22.6575 15.6457C22.6244 15.7121 22.5913 15.7674 22.5692 15.8338C21.8402 17.0949 20.6585 18.4556 19.4546 19.23C18.6484 19.7721 17.6544 20.1814 16.6604 20.3805C15.6111 20.5907 14.7165 20.469 13.7557 20.1039Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.0535 38.7113C3.71618 40.2047 4.90898 41.842 6.65402 41.9526C6.70924 42.1075 7.02953 42.8266 7.07371 42.9372C7.10685 43.0921 7.21729 43.258 7.36087 43.1916C7.42714 43.1695 7.4934 43.081 7.48236 42.9261C7.31669 42.5279 7.10685 42.2181 6.90804 41.8088C7.06267 39.0653 6.90804 37.0629 5.85881 34.8062C4.666 32.2064 3.03141 30.713 2.02636 29.9829C1.90487 29.8722 1.76129 29.7837 1.61771 29.6952C1.38578 30.7572 1.46309 32.4056 1.60667 33.357C1.86069 35.2818 2.26934 36.9744 3.0535 38.7113Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.00838 27.6929C5.29554 29.2859 6.01344 30.89 7.60385 31.5869C7.62594 31.7529 7.80265 32.5273 7.82474 32.6489C7.82474 32.8149 7.87996 33.0029 8.03458 32.9808C8.07876 32.9698 8.18921 32.9255 8.20025 32.7596C8.13399 32.3392 8.0125 31.8635 7.93519 31.4099C8.46532 29.474 8.75248 27.704 8.66412 25.8123C8.52054 23.1462 7.52654 20.8341 5.95821 18.9756C5.83672 18.8428 5.74837 18.699 5.63792 18.5773C5.19614 19.4955 4.90898 21.0664 4.83167 22.0067C4.666 23.9095 4.67705 25.8233 5.00838 27.6929Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.01755 17.637C8.97337 19.2742 9.37097 21.1106 10.7405 22.1727C10.7295 22.3386 10.6963 23.1351 10.6963 23.2457C10.6742 23.4006 10.6853 23.5887 10.8399 23.6219C10.8951 23.6219 10.9945 23.6108 11.0277 23.4559C11.0608 23.0466 11.0718 22.416 11.0939 21.9625C12.2646 19.9712 12.8942 17.8029 12.9163 15.3249C12.9604 12.4597 12.2536 10.6343 11.6903 9.48383C11.613 9.32896 11.5357 9.17408 11.4584 9.01921C10.8399 9.77146 10.2545 11.2096 9.98947 12.0946C9.45933 13.8868 9.07277 15.7563 9.01755 17.637Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.092 8.45501C14.7386 9.99271 14.838 12.2495 15.9867 13.1787C15.9425 13.3779 15.8431 14.0638 15.832 14.2186C15.7878 14.3846 15.7547 14.5394 15.8872 14.6058C15.9425 14.6279 15.9866 14.628 16.0529 14.4841C16.1302 14.0527 16.1523 13.6987 16.2186 13.2562C17.8532 11.5083 18.7809 9.78252 19.3 7.42619C19.8191 4.95923 19.7418 3.00114 19.5209 1.61832C19.4988 1.45238 19.4546 1.28644 19.4105 1.10944C17.9747 2.25995 16.9586 3.77553 16.0971 5.50129C15.6332 6.44162 15.2688 7.40406 15.092 8.45501Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0889 29.5182C9.95633 29.6399 9.22739 30.3369 9.05068 30.2484C9.0065 30.2041 8.97337 29.9718 9.05068 29.9275C9.32679 29.7063 9.68022 29.5404 9.95633 29.3302C9.86798 28.0026 10.1662 26.653 11.37 25.3919C13.2255 23.5887 15.6884 22.9802 17.9305 22.051C18.0299 22.0067 18.1293 21.9514 18.2508 21.9071C18.2287 21.9846 18.2176 22.0731 18.1845 22.1505C17.7427 23.6993 16.8592 25.5025 15.7878 26.7194C15.092 27.538 14.1533 28.3235 13.1703 28.8434C12.1432 29.3965 11.1712 29.5735 10.0889 29.5182Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.54263 40.3264C8.44323 40.5034 7.85787 41.4548 7.67012 41.4105C7.5928 41.4105 7.51549 41.1782 7.57072 41.0897C7.81369 40.7689 8.12294 40.5145 8.33279 40.1826C7.95727 38.9657 8.13399 37.2067 9.03964 35.5252C10.4754 33.0693 12.5739 31.8746 14.6061 30.1599C14.6944 30.0714 14.7828 29.9939 14.8822 29.8944C14.8932 29.9718 14.9043 30.0603 14.8932 30.1599C14.8491 31.8414 14.4073 33.9543 13.6231 35.5474C13.1151 36.6204 12.364 37.6935 11.5026 38.5896C10.608 39.4856 9.65813 40.0056 8.54263 40.3264Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.55873 50.9244C9.48142 51.1346 9.08382 52.263 8.88501 52.3072C8.81875 52.2961 8.68621 52.1302 8.74144 52.0085C8.90711 51.6324 9.09486 51.2009 9.24948 50.8138C8.56472 50.1611 8.33279 48.3468 8.88501 46.444C9.80171 43.6562 11.8449 41.5654 13.4906 39.2533C13.5679 39.1427 13.6452 39.0321 13.7225 38.9214C13.7446 38.9989 13.7557 39.0874 13.7777 39.1759C14.0649 40.8021 14.0428 42.9593 13.601 44.7183C13.3028 45.8909 12.7837 47.1852 12.11 48.2915C11.4142 49.4641 10.5859 50.2717 9.55873 50.9244Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.0958 63.3256C8.34383 64.1442 10.5748 64.7637 12.11 63.757C12.2315 63.8455 12.8721 64.2327 12.9494 64.2991C13.0598 64.4097 13.2145 64.4871 13.3139 64.3323C13.3691 64.2659 13.4022 64.1553 13.2918 64.0336C12.9715 63.8123 12.6181 63.6685 12.2757 63.4473C11.105 61.0135 9.84589 59.3652 7.9131 58.1483C5.70419 56.7323 3.85975 56.7101 2.67799 56.7101C2.51232 56.7101 2.34665 56.7212 2.18098 56.7212C2.46814 59.1218 5.43912 62.2968 7.0958 63.3256Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.2255 61.4449C13.2145 61.5998 13.1372 62.2857 13.0267 62.7061C12.9936 62.8277 12.9825 63.0048 12.8169 62.9384C12.7506 62.9273 12.6843 62.7835 12.6843 62.7171C12.7616 62.3078 12.8279 61.8432 12.861 61.4339C12.099 60.9471 11.5026 59.3541 11.3811 57.396C11.5136 54.4423 12.839 51.7651 13.8992 48.9774C13.9324 48.8557 13.9765 48.7229 14.0207 48.5902C14.0649 48.6565 14.087 48.7229 14.1312 48.7893C14.838 50.2496 15.3792 52.2962 15.4234 54.1436C15.4676 55.3494 15.2908 56.7544 14.9374 58.0598C14.5619 59.3983 14.0097 60.4493 13.2255 61.4449Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8551 73.4257C15.2908 73.7134 17.2347 73.647 18.4496 72.0982C18.7588 72.1425 19.2558 72.2199 19.5761 72.242C19.6645 72.2531 19.7307 72.1867 19.7639 72.0761C19.786 71.9987 19.7639 71.8991 19.6203 71.8217C19.2558 71.7442 18.8914 71.7442 18.5048 71.6778C16.8923 69.7861 15.3682 68.7241 13.1703 68.3259C10.6301 67.8612 8.47637 68.5139 7.32774 68.9896C7.17311 69.0449 7.00744 69.1113 6.86387 69.1888C7.27251 70.1069 8.46532 71.0473 9.21635 71.5008C10.6521 72.4522 12.1211 73.1381 13.8551 73.4257Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.9908 69.4321C19.0128 69.5981 19.0349 70.2618 19.0349 70.7043C19.0239 70.826 19.057 70.992 18.8914 71.003C18.814 71.003 18.7257 70.9035 18.7257 70.826C18.6926 70.4167 18.7146 69.9742 18.6484 69.5538C17.798 69.2883 16.6714 67.994 16.1523 66.2129C15.5559 63.3588 16.2075 60.4161 16.5168 57.396C16.5389 57.2633 16.5278 57.1305 16.5389 56.9867C16.5941 57.042 16.6604 57.0973 16.7156 57.1526C17.7538 58.2921 18.792 60.051 19.289 61.7768C19.6313 62.9052 19.8081 64.2991 19.8081 65.6376C19.786 67.0426 19.4988 68.2263 18.9908 69.4321Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.0312 75.24C27.1085 75.3617 27.2079 75.9148 27.3183 76.3352C27.3515 76.4348 27.4177 76.5896 27.2631 76.645C27.1858 76.6781 27.0864 76.6118 27.0643 76.5454C26.9207 76.1914 26.9207 75.8153 26.744 75.4613C25.9157 75.6604 24.4799 74.6094 23.5411 73.2377C22.2379 70.8703 22.0943 68.0936 21.5862 65.2726C21.5752 65.1398 21.531 65.0182 21.5089 64.8854C21.5752 64.8965 21.6414 64.9407 21.7077 64.9628C22.9557 65.5934 24.3805 66.7107 25.2972 68.0825C25.9267 68.9675 26.5121 70.1955 26.8434 71.4234C27.1858 72.7177 27.1968 73.9457 27.0312 75.24Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.514 80.5058C23.9829 80.3067 25.8825 79.6319 26.7219 77.7512C27.0201 77.6627 27.5392 77.6074 27.8485 77.5189C27.9368 77.5078 27.981 77.4083 27.9921 77.2866C27.9921 77.2202 27.9479 77.1207 27.7933 77.0985C27.4288 77.1538 27.0643 77.2645 26.6557 77.3087C24.5241 76.0476 22.8011 75.4723 20.5591 75.7931C17.9857 76.1582 16.1081 77.4525 15.1031 78.2822C14.9595 78.4039 14.8159 78.5145 14.6834 78.6362C15.3019 79.3996 16.6935 79.9084 17.5218 80.1297C19.1454 80.5833 20.7358 80.7603 22.514 80.5058Z' fill='%23000'/%3E%3C/svg%3E");
    display: inline-block;
    flex: none;
    width: 1.5rem;
    height: 3.375rem;
    background-color: currentColor;
    -webkit-mask: var(--wreath-glyph) center / contain no-repeat;
    mask: var(--wreath-glyph) center / contain no-repeat;
  }
  .rating-badge__wreath--end {
    transform: scaleX(-1);
  }
  .rating-badge__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-inline: -0.125rem;
  }
  .rating-badge__title {
    text-align: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .rating-badge__subtitle {
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .rating-badge--on-solid {
    color: var(--text-on-solid);
  }
  .rating-badge--on-solid .rating-badge__title {
    color: var(--text-on-solid);
  }
  .rating-badge--on-solid .rating-badge__subtitle {
    color: var(--text-on-solid);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-solid) 80%, transparent);
    }
  }
  .rating-badge-sm .rating-badge__wreath {
    width: 1.125rem;
    height: 2.53rem;
  }
  .rating-badge-sm .rating-badge__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .rating-badge-sm .rating-badge__subtitle {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .rating-badge-lg .rating-badge__wreath {
    width: 2rem;
    height: 4.5rem;
  }
  .rating-badge-lg .rating-badge__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .rating-badge-lg .rating-badge__subtitle {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .rating__star::after {
      transition: none;
    }
    .rating.is-loading .rating__star::before {
      animation: none;
    }
    .rating-interactive .rating__star, .rating-interactive .rating__star:active {
      transition: none;
      transform: none;
    }
  }
}
@layer utilities {
  .timeline {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    list-style: none;
    --_marker-size: var(--size-timeline-marker, 8px);
    --_marker-lg-size: var(--size-timeline-marker-lg, 22px);
    --_connector-width: var(--size-timeline-connector-width, 2px);
    --_gutter: calc(var(--_marker-size) + 0.75rem);
    --_axis: calc(-1 * var(--_gutter) + var(--_marker-size) / 2);
    padding-left: var(--_gutter);
  }
  .timeline__item {
    position: relative;
    padding-bottom: calc(var(--spacing) * 6);
  }
  .timeline__item:last-child {
    padding-bottom: 0;
  }
  .timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--_axis) - var(--_connector-width) / 2);
    top: calc(var(--_marker-size) + 4px);
    bottom: 0;
    width: var(--_connector-width);
    background-color: var(--border-timeline-connector, var(--border-secondary));
  }
  .timeline__marker {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    left: calc(var(--_axis) - var(--_marker-size) / 2);
    top: 3px;
    width: var(--_marker-size);
    height: var(--_marker-size);
    background-color: var(--bg-timeline-marker, var(--bg-primary-solid));
    z-index: 1;
  }
  .timeline__marker--lg {
    width: var(--_marker-lg-size);
    height: var(--_marker-lg-size);
    left: calc(var(--_axis) - var(--_marker-lg-size) / 2);
    top: 0;
  }
  .timeline:has(.timeline__marker--lg) {
    --_gutter: calc(var(--_marker-lg-size) + 0.75rem);
    --_axis: calc(-1 * var(--_gutter) + var(--_marker-lg-size) / 2);
  }
  .timeline__item:has(.timeline__marker--lg):not(:last-child)::before {
    top: calc(var(--_marker-lg-size) + 4px);
  }
  .timeline__marker--lg i {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: 1;
    line-height: 1;
    color: var(--alpha-white-100);
  }
  .timeline__content {
    min-width: 0;
  }
  .timeline__time {
    margin-bottom: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-timeline-time, var(--text-tertiary));
  }
  .timeline__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .timeline__body {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
  }
  .timeline__item--completed .timeline__marker {
    background-color: var(--bg-timeline-marker-completed, var(--bg-success-solid));
  }
  .timeline__item--error .timeline__marker {
    background-color: var(--bg-timeline-marker-error, var(--bg-danger-solid));
  }
  .timeline__item--warning .timeline__marker {
    background-color: var(--bg-timeline-marker-warning, var(--bg-warning-solid, var(--utility-amber-500)));
  }
  .timeline__item--active .timeline__marker {
    box-shadow: 0 0 0 2px var(--bg-body, var(--bg-surface)), 0 0 0 4px var(--bg-timeline-marker, var(--bg-primary-solid));
  }
  .timeline__item:not(.timeline__item--completed):not(.timeline__item--active):not(.timeline__item--error):not(.timeline__item--warning) .timeline__content {
    opacity: 50%;
  }
  .timeline__children {
    position: relative;
    margin-top: calc(var(--spacing) * 3);
    --_marker-size: 6px;
    --_gutter: calc(var(--_marker-size) + 0.625rem);
    --_axis: calc(-1 * var(--_gutter) + var(--_marker-size) / 2);
    padding-left: var(--_gutter);
  }
  .timeline__children::before {
    content: "";
    position: absolute;
    left: calc(var(--_gutter) + var(--_axis) - var(--_connector-width) / 2);
    top: 2px;
    bottom: 0;
    width: var(--_connector-width);
    background-color: var(--border-timeline-connector, var(--border-secondary));
    opacity: 0.7;
  }
  .timeline__children .timeline__item {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .timeline__children .timeline__item:last-child {
    padding-bottom: 0;
  }
  .timeline__children .timeline__item:not(:last-child)::before {
    left: calc(var(--_axis) - var(--_connector-width) / 2);
    top: calc(var(--_marker-size) + 3px);
  }
  .timeline__children .timeline__marker {
    left: calc(var(--_axis) - var(--_marker-size) / 2);
    top: 4px;
    width: var(--_marker-size);
    height: var(--_marker-size);
  }
  .timeline__children .timeline__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .timeline__children .timeline__body {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .timeline__children .timeline__time {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .timeline--compact {
    --_marker-size: 6px;
    --_gutter: calc(var(--_marker-size) + 0.5rem);
  }
  .timeline--compact .timeline__item {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .timeline--compact .timeline__body {
    display: none;
  }
  .timeline--compact .timeline__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .timeline--alternating {
    padding-left: 0;
    --_marker-size: var(--size-timeline-marker, 8px);
  }
  .timeline--alternating .timeline__item {
    display: grid;
    width: 100%;
    padding-bottom: calc(var(--spacing) * 6);
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
  }
  .timeline--alternating::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--_connector-width);
    transform: translateX(-50%);
    background-color: var(--border-timeline-connector, var(--border-secondary));
  }
  .timeline--alternating .timeline__item::before {
    display: none;
  }
  .timeline--alternating .timeline__marker {
    position: static;
    align-self: flex-start;
  }
  .timeline--alternating .timeline__item:nth-child(odd) .timeline__content {
    text-align: right;
  }
  .timeline--horizontal {
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    padding-left: 0;
    padding-top: 0;
  }
  .timeline--horizontal .timeline__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
    text-align: center;
    min-width: 120px;
    padding-right: 0;
  }
  .timeline--horizontal .timeline__item:not(:last-child)::before {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    height: var(--_connector-width);
    position: absolute;
    top: calc(var(--_marker-size) / 2 - var(--_connector-width) / 2);
    left: calc(50% + var(--_marker-size) / 2 + 4px);
    right: calc(-50% + var(--_marker-size) / 2 + 4px);
    transform: none;
    background-color: var(--border-timeline-connector, var(--border-secondary));
  }
  .timeline--horizontal .timeline__item:has(.timeline__marker--lg):not(:last-child)::before {
    top: calc(var(--_marker-lg-size) / 2 - var(--_connector-width) / 2);
    left: calc(50% + var(--_marker-lg-size) / 2 + 4px);
    right: calc(-50% + var(--_marker-lg-size) / 2 + 4px);
  }
  .timeline--horizontal:has(.timeline__marker--lg) .timeline__marker:not(.timeline__marker--lg) {
    transform: translateY(calc((var(--_marker-lg-size) - var(--_marker-size)) / 2));
  }
  .timeline--horizontal .timeline__marker {
    position: relative;
    margin-bottom: calc(var(--spacing) * 2);
    position: static;
    left: auto;
    top: auto;
  }
  .timeline--horizontal .timeline__content {
    margin-top: var(--spacing);
  }
  .timeline--horizontal .timeline__time {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .timeline--horizontal .timeline__marker--lg {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .timeline__group {
    position: relative;
    margin-bottom: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding-left: 0;
  }
  .timeline__avatar {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    left: calc(-1 * var(--_gutter) - 6px);
    top: 0;
    width: 28px;
    height: 28px;
    z-index: 1;
    background-color: var(--bg-primary-subtle);
    border: 2px solid var(--bg-surface);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary-solid);
  }
  .timeline__avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .timeline:has(.timeline__avatar) {
    --_gutter: 28px;
    --_avatar-size: 28px;
    padding-left: calc(var(--_gutter) + 8px);
  }
  .timeline:has(.timeline__avatar) .timeline__item:not(:last-child)::before {
    left: calc(-1 * var(--_gutter) - 6px + var(--_avatar-size) / 2 - var(--_connector-width) / 2);
    top: calc(var(--_avatar-size) + 4px);
  }
  .timeline__icon-marker {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    left: calc(-1 * var(--_gutter) - 4px);
    top: 0;
    width: 24px;
    height: 24px;
    z-index: 1;
    border: 2px solid var(--bg-surface);
  }
  .timeline__icon-marker--primary {
    background-color: var(--bg-primary-solid);
    color: var(--alpha-white-100);
  }
  .timeline__icon-marker--success {
    background-color: var(--bg-success-solid);
    color: var(--alpha-white-100);
  }
  .timeline__icon-marker--warning {
    background-color: var(--bg-warning-solid, var(--utility-amber-500));
    color: var(--alpha-white-100);
  }
  .timeline__icon-marker--danger {
    background-color: var(--bg-danger-solid);
    color: var(--alpha-white-100);
  }
  .timeline__icon-marker--info {
    background-color: var(--bg-info-solid);
    color: var(--alpha-white-100);
  }
  .timeline__icon-marker--system {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
  }
  .timeline:has(.timeline__icon-marker) {
    --_gutter: 24px;
    --_icon-marker-size: 24px;
    padding-left: calc(var(--_gutter) + 10px);
  }
  .timeline:has(.timeline__icon-marker) .timeline__item:not(:last-child)::before {
    left: calc(-1 * var(--_gutter) - 4px + var(--_icon-marker-size) / 2 - var(--_connector-width) / 2);
    top: calc(var(--_icon-marker-size) + 4px);
  }
  .timeline__card {
    margin-top: var(--spacing);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 3);
    --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.03));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--bg-card);
    border-color: var(--border-card);
  }
  .timeline__card:hover {
    border-color: var(--border-primary);
  }
  .timeline__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .timeline__actor {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .timeline__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-tertiary-subtle);
    color: var(--text-secondary);
  }
  .timeline__badge--system {
    background-color: var(--bg-info-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-info-subtle) 50%, var(--bg-tertiary-subtle));
    }
    color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-info) 82%, var(--text-secondary));
    }
  }
  .timeline__badge--alert {
    background-color: var(--bg-danger-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-danger-subtle) 50%, var(--bg-tertiary-subtle));
    }
    color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-danger) 82%, var(--text-secondary));
    }
  }
  .timeline__badge--milestone {
    background-color: var(--bg-success-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-success-subtle) 50%, var(--bg-tertiary-subtle));
    }
    color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-success) 82%, var(--text-secondary));
    }
  }
  .timeline__attachments {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .timeline__attachment {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    background-color: var(--bg-tertiary-subtle);
    border-color: var(--border-secondary);
    color: var(--text-secondary);
    transition: border-color 100ms ease;
  }
  .timeline__attachment:hover {
    border-color: var(--border-primary);
    color: var(--text-primary);
  }
  .timeline__attachment:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .timeline__attachment i {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .timeline__media {
    margin-top: calc(var(--spacing) * 2);
    display: grid;
    gap: calc(var(--spacing) * 1.5);
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    max-width: 320px;
  }
  .timeline__media-item {
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 1;
    background-color: var(--bg-tertiary-subtle);
  }
  .timeline__media-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .timeline__media-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .timeline__actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .timeline__action-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    transition: color 100ms ease, background-color 100ms ease;
  }
  .timeline__action-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover, var(--bg-primary-hover));
  }
  .timeline__action-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    color: var(--text-primary);
  }
  .timeline__footer {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .timeline__footer i {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .timeline--rich {
    --_gutter: 28px;
    --_avatar-size: 28px;
    padding-left: calc(var(--_gutter) + 8px);
  }
  .timeline--rich .timeline__item {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .timeline--rich .timeline__item:not(:last-child)::before {
    left: calc(-1 * var(--_gutter) - 6px + var(--_avatar-size) / 2 - var(--_connector-width) / 2);
    top: calc(var(--_avatar-size) + 4px);
  }
  .timeline--rich .timeline__item .timeline__content {
    opacity: 100%;
  }
  .timeline--feed {
    --_gutter: 28px;
    padding-left: calc(var(--_gutter) + 8px);
  }
  .timeline--feed .timeline__item {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-bottom: calc(var(--spacing) * 4);
    border-color: var(--border-secondary);
  }
  .timeline--feed .timeline__item:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .timeline--feed .timeline__item::before {
    display: none;
  }
  .timeline--feed .timeline__content {
    opacity: 100%;
  }
  .timeline--dense {
    --_marker-size: 4px;
    --_gutter: calc(var(--_marker-size) + 0.375rem);
  }
  .timeline--dense .timeline__item {
    padding-bottom: var(--spacing);
  }
  .timeline--dense .timeline__title {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
  }
  .timeline--dense .timeline__time {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .timeline--dense .timeline__body {
    display: none;
  }
  .timeline--grouped .timeline__group {
    position: relative;
    padding-left: 0;
    margin-left: calc(-1 * var(--_gutter));
  }
  .timeline__item--highlight {
    position: relative;
  }
  .timeline__item--highlight .timeline__card {
    border-left: 3px solid var(--bg-primary-solid);
    background-color: var(--bg-primary-subtle);
  }
  .timeline__item--highlight.timeline__item--highlight-danger .timeline__card {
    border-left-color: var(--bg-danger-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    background-color: var(--bg-danger-subtle);
  }
  .timeline__item--highlight.timeline__item--highlight-success .timeline__card {
    border-left-color: var(--bg-success-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    background-color: var(--bg-success-subtle);
  }
  .timeline__item--system .timeline__content {
    opacity: 60%;
  }
  .timeline__item--system .timeline__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  @media (prefers-reduced-motion: reduce) {
    .timeline__item {
      transition: none;
    }
  }
  .timeline--connector-dashed .timeline__item::before {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, var(--border-secondary) 50%, transparent 50%);
    background-size: 2px 8px;
    background-repeat: repeat-y;
  }
  .timeline--connector-dotted .timeline__item::before {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, var(--border-secondary) 50%, transparent 50%);
    background-size: 2px 4px;
    background-repeat: repeat-y;
  }
  .timeline--connector-flowing .timeline__item::before {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, var(--border-secondary) 50%, transparent 50%);
    background-size: 2px 12px;
    background-repeat: repeat-y;
    animation: timeline-flow 1.4s linear infinite;
  }
  @keyframes timeline-flow {
    to {
      background-position: 0 12px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .timeline--connector-flowing .timeline__item::before {
      animation: none;
    }
  }
  .timeline__marker, .timeline__icon-marker {
    transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .timeline__item--active .timeline__marker, .timeline__item--active .timeline__icon-marker {
    animation: timeline-marker-pulse 1.8s ease-in-out infinite;
  }
  @keyframes timeline-marker-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-info, var(--bg-info-solid)) 35%, transparent);
    }
    50% {
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--text-info, var(--bg-info-solid)) 0%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .timeline__item--active .timeline__marker, .timeline__item--active .timeline__icon-marker {
      animation: none;
    }
    .timeline__marker, .timeline__icon-marker {
      transition: none;
    }
  }
  .timeline__card[data-expandable] .timeline__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    cursor: pointer;
    user-select: none;
  }
  .timeline__card[data-expandable] .timeline__title:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .timeline__card[data-expandable] .timeline__title::after {
    content: "\f078";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 6 Free", sans-serif;
    font-weight: 300;
    margin-left: auto;
    font-size: 10px;
    color: var(--text-tertiary);
    transition: transform 180ms ease;
  }
  .timeline__card[data-expandable]:not(.is-collapsed) .timeline__title::after {
    transform: rotate(180deg);
  }
  .timeline__card[data-expandable].is-collapsed .timeline__body, .timeline__card[data-expandable].is-collapsed .timeline__attachments, .timeline__card[data-expandable].is-collapsed .timeline__media, .timeline__card[data-expandable].is-collapsed .timeline__footer {
    display: none;
  }
  .timeline__now {
    margin-block: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-info);
    padding-left: 32px;
    position: relative;
  }
  .timeline__now::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(to right, var(--text-info), transparent);
  }
  .timeline__now > span {
    position: relative;
    background-color: var(--bg-panel, var(--alpha-white-100));
    padding-right: 8px;
  }
  .timeline__load-more {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    background-color: transparent;
    border: 0;
    transition: color 100ms ease, background-color 100ms ease;
  }
  .timeline__load-more:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover, var(--bg-primary-hover));
  }
  .timeline__load-more:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    color: var(--text-primary);
  }
  @media (max-width: 639px) {
    .timeline--alternating {
      display: block;
    }
    .timeline--alternating .timeline__item {
      grid-template-columns: none !important;
      padding-left: 32px !important;
    }
    .timeline--alternating .timeline__content {
      grid-column: auto !important;
      text-align: left !important;
    }
  }
}
@layer utilities {
  .tree {
    --tree-indent: 1.5rem;
    --tree-toggle-size: 1rem;
    --tree-row-radius: var(--radius-tree-row, 0.375rem);
    position: relative;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tree, var(--text-primary));
  }
  .tree .navigator {
    padding: calc(var(--spacing) * 2);
    background-color: var(--bg-tree-surface, var(--alpha-0));
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    .tree .navigator {
      scroll-behavior: auto;
    }
  }
  .tree ul, .tree li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tree > ul[role="group"] {
    padding-bottom: 2rem;
  }
  .tree li {
    position: relative;
  }
  .tree .tree-children {
    margin-left: var(--tree-indent);
  }
  .tree.tree-lines .tree-children {
    position: relative;
  }
  .tree.tree-lines .tree-children::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--tree-indent) + 1rem);
    top: 0.25rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--bg-tree-line, var(--border-secondary));
    opacity: var(--opacity-tree-line, 0.9);
  }
  .tree.tree-lines li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--tree-indent) + 1rem);
    top: 1rem;
    width: 0.625rem;
    height: 1px;
    background: var(--bg-tree-line, var(--border-secondary));
    opacity: var(--opacity-tree-line, 0.9);
  }
  .tree.tree-lines-strong .tree-children::before, .tree.tree-lines-strong li::before {
    opacity: 1;
  }
  .tree.tree-lines-none .tree-children::before, .tree.tree-lines-none li::before {
    content: none !important;
  }
  .tree details.tree-group {
    position: relative;
  }
  .tree details.tree-group > summary {
    list-style: none;
  }
  .tree details.tree-group > summary::-webkit-details-marker {
    display: none;
  }
  .tree .tree-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 32px;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: linear;
    transition-timing-function: linear;
    border-radius: var(--tree-row-radius);
    background-color: var(--bg-tree-row, var(--alpha-0));
    min-width: 0;
  }
  .tree:not(.no-hover) .tree-row:hover {
    background-color: var(--bg-tree-row-hover, var(--bg-primary-hover));
  }
  .tree .tree-row.is-active, .tree .tree-row[aria-current="true"] {
    background-color: var(--bg-tree-row-active, var(--bg-secondary));
    color: var(--text-tree-row-active, var(--text-primary));
  }
  .tree .tree-row.is-selected, .tree .tree-row[aria-selected="true"] {
    background-color: var(--bg-tree-row-selected, var(--bg-secondary));
    color: var(--text-tree-row-selected, var(--text-primary));
  }
  .tree:not(.no-hover) .tree-row.is-selected:hover, .tree:not(.no-hover) .tree-row[aria-selected="true"]:hover, .tree:not(.no-hover) .tree-row.is-active:hover {
    background-color: var(--bg-secondary-hover);
  }
  .tree .tree-row.is-disabled, .tree .tree-row[aria-disabled="true"] {
    background-color: var(--bg-tree-row-disabled, var(--bg-primary-subtle));
    color: var(--text-tree-row-disabled, var(--text-disabled));
    opacity: var(--opacity-tree-disabled, 0.6);
    cursor: not-allowed;
  }
  .tree .tree-row.is-disabled *, .tree .tree-row[aria-disabled="true"] * {
    pointer-events: none;
  }
  .tree .tree-row:focus-visible, .tree .tree-row:focus-within {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .tree .tree-row {
    cursor: pointer;
  }
  .tree .tree-actions-bar {
    background-color: var(--bg-tree-surface, inherit);
  }
  .tree .tree-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: var(--tree-toggle-size);
    height: var(--tree-toggle-size);
    background: transparent;
    border: 0;
    color: var(--text-tree-toggle, var(--text-tertiary));
  }
  .tree .tree-toggle:hover {
    cursor: pointer;
  }
  .tree:not(.tree--plus-minus) details.tree-group > summary .tree-toggle::before {
    content: "";
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    transition: transform 150ms var(--ease-out, ease);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>") center / contain no-repeat;
  }
  .tree:not(.tree--plus-minus) details.tree-group[open] > summary .tree-toggle::before {
    transform: rotate(90deg);
  }
  .tree .tree-toggle:hover {
    color: var(--text-primary);
  }
  @media (prefers-reduced-motion: reduce) {
    .tree:not(.tree--plus-minus) details.tree-group > summary .tree-toggle::before {
      transition: none;
    }
  }
  .tree .tree-leaf .tree-toggle {
    visibility: hidden;
  }
  .tree:not(:has(details.tree-group)) .tree-toggle {
    display: none;
  }
  .tree .tree-check {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
  }
  .tree .tree-check input[type="checkbox"] {
    vertical-align: middle;
  }
  .tree .tree-icon {
    flex-shrink: 0;
    color: var(--text-tree-icon, var(--text-tertiary));
  }
  .tree .tree-label {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tree-label, var(--text-primary));
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tree .tree-meta {
    margin-left: auto;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 70%;
    color: var(--text-tree-meta, var(--text-tertiary));
    max-width: 40%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .tree .tree-actions {
    margin-left: calc(var(--spacing) * 2);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--text-tree-actions, var(--text-tertiary));
  }
  .tree .tree-drag-handle {
    display: inline-flex;
    flex-shrink: 0;
    cursor: grab;
    align-items: center;
    justify-content: center;
    color: var(--text-tree-icon, var(--text-tertiary));
    background: transparent;
    border: 0;
  }
  .tree .tree-drag-handle:active {
    cursor: grabbing;
  }
  .tree.tree-compact .tree-row {
    min-height: 28px;
    padding-block: var(--spacing);
  }
  .tree.tree-dense .tree-row {
    min-height: 26px;
    padding-block: calc(var(--spacing) * 0.5);
  }
  .tree.tree-relaxed .tree-row {
    min-height: 36px;
    padding-block: calc(var(--spacing) * 2);
  }
  .tree.tree--plus-minus .tree-toggle {
    border: 1px solid var(--border-tree-toggle, var(--border-primary));
    border-radius: var(--radius-sm, 0.25rem);
    background-color: var(--bg-tree-toggle, var(--bg-primary));
    color: var(--text-tree-toggle, var(--text-tertiary));
  }
  .tree.tree--plus-minus details.tree-group > summary .tree-toggle::before {
    content: "+";
    font-size: 0.75rem;
    line-height: 1;
    background: none;
    -webkit-mask: none;
    mask: none;
  }
  .tree.tree--plus-minus details.tree-group[open] > summary .tree-toggle::before {
    content: "–";
  }
  .tree.tree-sm {
    --tree-indent: 1.25rem;
    --tree-toggle-size: 0.875rem;
    font-size: 0.75rem;
  }
  .tree.tree-sm .tree-row {
    min-height: 26px;
  }
  .tree.tree-sm .tree-icon {
    font-size: 11px;
  }
  .tree.tree-lg {
    --tree-indent: 1.75rem;
    --tree-toggle-size: 1.125rem;
    font-size: 0.875rem;
  }
  .tree.tree-lg .tree-row {
    min-height: 36px;
  }
  .tree.tree-lg .tree-icon {
    font-size: 14px;
  }
  .tree-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    min-width: 18px;
    height: 16px;
    color: var(--text-secondary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  .tree-badge--info {
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, transparent);
    }
  }
  .tree-badge--success {
    color: var(--text-success);
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 12%, transparent);
    }
  }
  .tree-badge--warning {
    color: var(--text-warning);
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 12%, transparent);
    }
  }
  .tree-badge--danger {
    color: var(--text-danger);
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 12%, transparent);
    }
  }
  .tree-status-dot {
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 7px;
    height: 7px;
    background-color: var(--text-tertiary);
  }
  .tree-status-dot.is-success {
    background-color: var(--text-success);
  }
  .tree-status-dot.is-warning {
    background-color: var(--text-warning);
  }
  .tree-status-dot.is-danger {
    background-color: var(--text-danger);
  }
  .tree-status-dot.is-info {
    background-color: var(--text-info);
  }
  .tree-favorite {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    width: 18px;
    height: 18px;
    font-size: 11px;
    color: var(--text-tertiary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm, 0.25rem);
    opacity: 0.4;
  }
  .tree-favorite:hover {
    opacity: 1;
    color: var(--text-warning);
  }
  .tree-favorite.is-active, .tree-favorite[aria-pressed="true"] {
    opacity: 1;
    color: var(--text-warning);
  }
  .tree-favorite:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    opacity: 1;
  }
  .tree.tree--actions-hover .tree-row .tree-actions, .tree.tree--actions-hover .tree-row .tree-drag-handle {
    opacity: 0;
    transition: opacity 100ms var(--ease-out, ease);
    pointer-events: none;
  }
  .tree.tree--actions-hover .tree-row:hover .tree-actions, .tree.tree--actions-hover .tree-row:focus-within .tree-actions, .tree.tree--actions-hover .tree-row:hover .tree-drag-handle, .tree.tree--actions-hover .tree-row:focus-within .tree-drag-handle {
    opacity: 1;
    pointer-events: auto;
  }
  .tree.tree--actions-hover .tree-row .tree-favorite.is-active {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .tree.tree--actions-hover .tree-row .tree-actions, .tree.tree--actions-hover .tree-row .tree-drag-handle {
      transition: none;
    }
  }
  .tree-row.tree-row--info {
    border-left: 3px solid var(--text-info);
    padding-left: calc(0.5rem - 3px);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 5%, transparent);
    }
  }
  .tree-row.tree-row--success {
    border-left: 3px solid var(--text-success);
    padding-left: calc(0.5rem - 3px);
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 5%, transparent);
    }
  }
  .tree-row.tree-row--warning {
    border-left: 3px solid var(--text-warning);
    padding-left: calc(0.5rem - 3px);
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 5%, transparent);
    }
  }
  .tree-row.tree-row--danger {
    border-left: 3px solid var(--text-danger);
    padding-left: calc(0.5rem - 3px);
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 5%, transparent);
    }
  }
  .tree-row.tree-row--loading {
    pointer-events: none;
  }
  .tree-row.tree-row--loading .tree-label {
    position: relative;
    overflow: hidden;
    color: transparent;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
    border-radius: var(--radius-sm, 0.25rem);
    min-height: 12px;
  }
  .tree-row.tree-row--loading .tree-label::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 100deg, transparent 30%, var(--text-primary) 50%, transparent 70% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 100deg, transparent 30%, color-mix(in oklch, var(--text-primary) 8%, transparent) 50%, transparent 70% );
    }
    background-size: 200% 100%;
    animation: tree-shimmer 1.4s linear infinite;
  }
  .tree-row.tree-row--loading .tree-icon, .tree-row.tree-row--loading .tree-meta, .tree-row.tree-row--loading .tree-badge {
    opacity: 0.4;
  }
  @keyframes tree-shimmer {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tree-row.tree-row--loading .tree-label::after {
      animation: none;
    }
  }
  .tree-section {
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-tertiary);
  }
  .tree-section:first-child {
    padding-top: var(--spacing);
  }
  .tree.tree--sticky-headers details.tree-group > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bg-tree-surface, var(--bg-primary));
    backdrop-filter: blur(8px);
  }
  .tree-empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--text-tertiary);
  }
  .tree-empty__icon {
    font-size: 24px;
    opacity: 0.4;
  }
  .tree-empty__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .tree-empty__description {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    max-width: 280px;
  }
  .tree .tree-label mark, .tree .tree-meta mark {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 24%, transparent);
    }
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 600;
  }
  .tree-row.tree-row--dragging {
    opacity: 0.5;
    cursor: grabbing !important;
  }
  .tree-row.tree-row--drop-target {
    background-color: var(--bg-secondary-hover);
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    border-radius: var(--tree-row-radius);
  }
  .tree-row.tree-row--drop-before {
    position: relative;
  }
  .tree-row.tree-row--drop-before::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--bg-brand-solid);
    border-radius: 9999px;
    z-index: 2;
  }
  .tree-row.tree-row--drop-after {
    position: relative;
  }
  .tree-row.tree-row--drop-after::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--bg-brand-solid);
    border-radius: 9999px;
    z-index: 2;
  }
  .tree-row[draggable="true"] {
    cursor: grab;
  }
  .tree-row[draggable="true"]:active {
    cursor: grabbing;
  }
  .tree-row.tree-row--grabbed {
    outline: 2px dashed var(--border-focus);
    outline-offset: -2px;
    background-color: var(--bg-secondary);
  }
  .tree-row.tree-row--editing .tree-label {
    display: none;
  }
  .tree-rename {
    min-width: 0;
    flex: 1;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 2px 6px;
    background-color: var(--bg-input, var(--bg-primary));
    border: 0;
    border-radius: var(--radius-sm, 0.25rem);
    box-shadow: inset 0 0 0 1px var(--border-focus);
    color: var(--text-primary);
    outline: none;
    min-height: 22px;
  }
  .tree-rename:focus {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .tree .tree-row.row-sweep {
    position: relative;
    overflow: hidden;
  }
  .tree .tree-row.row-sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
  }
  .tree .tree-row.row-sweep::after, .tree .tree-row.row-sweep--info::after {
    background: linear-gradient(90deg, transparent, var(--bg-row-sweep-info, rgba(37, 99, 235, 0.10)), transparent);
  }
  .tree .tree-row.row-sweep--success::after {
    background: linear-gradient(90deg, transparent, var(--bg-row-sweep-success, rgba(22, 163, 74, 0.10)), transparent);
  }
  .tree .tree-row.row-sweep--warning::after {
    background: linear-gradient(90deg, transparent, var(--bg-row-sweep-warning, rgba(217, 119, 6, 0.10)), transparent);
  }
  .tree .tree-row.row-sweep--danger::after {
    background: linear-gradient(90deg, transparent, var(--bg-row-sweep-danger, rgba(220, 38, 38, 0.10)), transparent);
  }
  .tree .tree-row.row-sweep.is-sweeping::after {
    animation: row-sweep-pass var(--duration-row-sweep, 800ms) var(--ease-row-sweep, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
  }
  .tree .tree-row.row-sweep.is-fading::after {
    animation: row-sweep-fade var(--duration-row-sweep-fade, 600ms) ease forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .tree .tree-row.row-sweep.is-sweeping::after {
      animation: none;
      transform: none;
      opacity: 0.12;
    }
    .tree .tree-row.row-sweep.is-fading::after {
      animation: none;
      transition: opacity 300ms ease;
      opacity: 0;
    }
  }
}
@layer utilities {
  .stat-card {
    --sc-fill: var(--bg-stat-card, var(--bg-card));
    --sc-ring: var(--border-stat-card, var(--border-card));
    --sc-shadow: var(--shadow-stat-card, var(--shadow-xs));
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding: calc(var(--spacing) * 4);
    text-align: left;
    border-radius: var(--radius-card-md, var(--radius-xl));
    background-color: var(--sc-fill);
    box-shadow: inset 0 0 0 1px var(--sc-ring), var(--sc-shadow);
  }
  .stat-card__header {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .stat-card__title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-stat-card-label, var(--text-secondary));
  }
  .stat-card__menu {
    flex-shrink: 0;
  }
  .stat-card__icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
  }
  .stat-card__icon--outline {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--text-primary-solid);
    color: var(--text-primary-solid);
  }
  .stat-card__icon--soft {
    background-color: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
    opacity: 0.85;
  }
  .stat-card__icon--modern {
    background-color: var(--sc-fill, var(--bg-card));
    box-shadow: inset 0 0 0 1px var(--border-card), var(--shadow-xs);
    color: var(--text-secondary);
  }
  .stat-card__value {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-stat-card-value, var(--text-primary));
  }
  .stat-card__label {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-stat-card-label, var(--text-secondary));
  }
  .stat-card__delta {
    margin-left: var(--spacing);
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-stat-card-label, var(--text-secondary));
  }
  .stat-card__delta-label {
    opacity: 60%;
  }
  .stat-card__trend {
    margin-top: calc(var(--spacing) * 2);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .stat-card__trend--up {
    color: var(--text-stat-card-trend-up, var(--text-success));
  }
  .stat-card__trend--down {
    color: var(--text-stat-card-trend-down, var(--text-danger));
  }
  .stat-card__trend--neutral {
    color: var(--text-stat-card-trend-neutral, var(--text-tertiary));
  }
  .stat-card__trend-label {
    margin-left: var(--spacing);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    opacity: 70%;
  }
  .stat-card__trend--simple, .stat-card__trend--trend {
    gap: var(--spacing);
  }
  .stat-card__trend--simple > i, .stat-card__trend--simple > svg, .stat-card__trend--trend > i, .stat-card__trend--trend > svg {
    font-weight: 700;
  }
  .stat-card__trend--modern {
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    color: var(--text-secondary);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-card), var(--shadow-xs);
  }
  .stat-card__trend--modern.stat-card__trend--up > i, .stat-card__trend--modern.stat-card__trend--up > svg {
    color: var(--text-stat-card-trend-up, var(--text-success));
  }
  .stat-card__trend--modern.stat-card__trend--down > i, .stat-card__trend--modern.stat-card__trend--down > svg {
    color: var(--text-stat-card-trend-down, var(--text-danger));
  }
  .stat-card__trend--modern.stat-card__trend--neutral > i, .stat-card__trend--modern.stat-card__trend--neutral > svg {
    color: var(--text-stat-card-trend-neutral, var(--text-tertiary));
  }
  .stat-card__trend--pill {
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
  }
  .stat-card__trend--pill.stat-card__trend--up {
    background-color: var(--bg-stat-card-trend-up);
  }
  .stat-card__trend--pill.stat-card__trend--down {
    background-color: var(--bg-stat-card-trend-down);
  }
  .stat-card__trend--pill.stat-card__trend--neutral {
    background-color: var(--bg-stat-card-trend-neutral);
  }
  .stat-card__sparkline {
    margin-top: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 12);
    width: 100%;
    color: var(--text-tertiary);
  }
  .stat-card__sparkline > svg {
    display: block;
    height: 100%;
    width: 100%;
    overflow: visible;
  }
  .stat-card__sparkline polyline, .stat-card__sparkline-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .stat-card__sparkline-dot {
    fill: currentColor;
    stroke: var(--bg-stat-card, var(--bg-card));
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .stat-card__sparkline--up {
    color: var(--stroke-stat-card-spark-up);
  }
  .stat-card__sparkline--down {
    color: var(--stroke-stat-card-spark-down);
  }
  .stat-card__sparkline--neutral {
    color: var(--stroke-stat-card-spark-neutral);
  }
  .stat-card__sparkline path.stat-card__sparkline-area, .stat-card__sparkline-area {
    fill: var(--fill-stat-card-spark-neutral);
    stroke: none;
  }
  .stat-card__sparkline--up path.stat-card__sparkline-area, .stat-card__sparkline--up .stat-card__sparkline-area {
    fill: var(--fill-stat-card-spark-up);
  }
  .stat-card__sparkline--down path.stat-card__sparkline-area, .stat-card__sparkline--down .stat-card__sparkline-area {
    fill: var(--fill-stat-card-spark-down);
  }
  .stat-card__progress {
    position: relative;
    margin-top: calc(var(--spacing) * 3);
    height: var(--spacing);
    overflow: hidden;
    border-radius: var(--radius-full);
    background-color: var(--bg-stat-card-progress-track);
  }
  .stat-card__progress-fill {
    position: absolute;
    inset-block: 0;
    left: 0;
    border-radius: var(--radius-full);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
    background-color: var(--bg-stat-card-progress-fill);
    width: var(--progress, 0%);
  }
  .stat-card__progress--success .stat-card__progress-fill {
    background-color: var(--bg-stat-card-progress-fill-success);
  }
  .stat-card__progress--warning .stat-card__progress-fill {
    background-color: var(--bg-stat-card-progress-fill-warning);
  }
  .stat-card__progress--danger .stat-card__progress-fill {
    background-color: var(--bg-stat-card-progress-fill-danger);
  }
  @media (prefers-reduced-motion: reduce) {
    .stat-card__progress-fill {
      transition: none;
    }
  }
  .stat-card__progress-meta {
    margin-top: calc(var(--spacing) * 1.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-stat-card-label, var(--text-secondary));
  }
  .stat-card__split {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: stretch;
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
    border-color: var(--border-stat-card-divider, var(--border-secondary));
  }
  .stat-card__split > * {
    border-color: var(--border-stat-card-divider, var(--border-secondary));
  }
  .stat-card__metric {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 3);
    &:first-child {
      padding-left: 0;
    }
    &:last-child {
      padding-right: 0;
    }
  }
  .stat-card__metric-value {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-stat-card-value, var(--text-primary));
  }
  .stat-card__metric-label {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-stat-card-label, var(--text-secondary));
  }
  .stat-card__footer {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding-top: calc(var(--spacing) * 3);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    border-top: 1px solid var(--border-stat-card-divider, var(--border-secondary));
    color: var(--text-stat-card-label, var(--text-secondary));
  }
  .stat-card__footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--text-stat-card-footer);
  }
  .stat-card__footer-link:hover {
    opacity: 0.8;
  }
  .stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
  .stat-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .stat-grid--cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .stat-grid--tight {
    gap: 0.5rem;
  }
  .stat-grid--relaxed {
    gap: 1.5rem;
  }
  .stat-strip {
    --sc-fill: var(--bg-stat-card, var(--bg-card));
    --sc-ring: var(--border-stat-card, var(--border-card));
    --sc-shadow: var(--shadow-stat-card, var(--shadow-xs));
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: stretch;
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
    border-radius: var(--radius-card-md, var(--radius-xl));
    background-color: var(--sc-fill);
    box-shadow: inset 0 0 0 1px var(--sc-ring), var(--sc-shadow);
  }
  .stat-strip > * {
    border-color: var(--border-stat-card-divider, var(--border-secondary));
  }
  .stat-strip__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .stat-strip__value {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-stat-card-value, var(--text-primary));
  }
  .stat-strip__label {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-stat-card-label, var(--text-secondary));
  }
  .stat-strip__trend {
    margin-top: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .stat-card--mini {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    min-height: 1.75rem;
  }
  .stat-card--mini .stat-card__header {
    margin-bottom: 0;
    display: contents;
  }
  .stat-card--mini .stat-card__icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    border-radius: var(--radius-sm);
  }
  .stat-card--mini .stat-card__value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .stat-card--mini .stat-card__label {
    margin-top: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: 1;
    line-height: 1;
    color: var(--text-tertiary);
  }
  .stat-card--mini .stat-card__trend {
    margin-top: 0;
    margin-left: var(--spacing);
  }
  .stat-card--mini + .stat-card--mini::before {
    content: "·";
    opacity: 40%;
  }
  .stat-card--xs {
    padding: calc(var(--spacing) * 2);
  }
  .stat-card--xs .stat-card__value {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .stat-card--xs .stat-card__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .stat-card--xs .stat-card__icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-radius: var(--radius-sm);
  }
  .stat-card--sm {
    padding: calc(var(--spacing) * 2.5);
  }
  .stat-card--sm .stat-card__value {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .stat-card--sm .stat-card__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .stat-card--sm .stat-card__icon {
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-radius: var(--radius-md);
  }
  .stat-card--sm .stat-card__header {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .stat-card--compact {
    padding: calc(var(--spacing) * 3);
  }
  .stat-card--compact .stat-card__value {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .stat-card--lg .stat-card__value {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
  }
  .stat-card--xl .stat-card__value {
    font-size: 2.75rem;
    line-height: var(--tw-leading, 3rem);
    letter-spacing: var(--tw-tracking, -0.022em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .stat-card--horizontal {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .stat-card--horizontal .stat-card__header {
    margin-bottom: 0;
  }
  .stat-card--hero {
    padding: calc(var(--spacing) * 6);
  }
  .stat-card--hero .stat-card__value {
    font-size: 2.75rem;
    line-height: var(--tw-leading, 3rem);
    letter-spacing: var(--tw-tracking, -0.022em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .stat-card--hero .stat-card__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .stat-card--hero .stat-card__icon {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    border-radius: var(--radius-xl);
  }
  .stat-card--ghost {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }
  .stat-card--highlighted {
    box-shadow: inset 3px 0 0 0 var(--border-brand), inset 0 0 0 1px var(--sc-ring), var(--sc-shadow);
  }
  .stat-card--success {
    box-shadow: inset 3px 0 0 0 var(--bg-success-solid), inset 0 0 0 1px var(--sc-ring), var(--sc-shadow);
  }
  .stat-card--success .stat-card__icon {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .stat-card--warning {
    box-shadow: inset 3px 0 0 0 var(--bg-warning-solid), inset 0 0 0 1px var(--sc-ring), var(--sc-shadow);
  }
  .stat-card--warning .stat-card__icon {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .stat-card--danger {
    box-shadow: inset 3px 0 0 0 var(--bg-danger-solid), inset 0 0 0 1px var(--sc-ring), var(--sc-shadow);
  }
  .stat-card--danger .stat-card__icon {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .stat-card--info {
    box-shadow: inset 3px 0 0 0 var(--bg-info-solid), inset 0 0 0 1px var(--sc-ring), var(--sc-shadow);
  }
  .stat-card--info .stat-card__icon {
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .stat-card--clickable {
    cursor: pointer;
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .stat-card--clickable:hover {
    box-shadow: inset 0 0 0 1px var(--sc-ring), var(--shadow-md);
  }
  .stat-card--clickable:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--sc-shadow);
  }
  .stat-card--clickable:active {
    box-shadow: inset 0 0 0 1px var(--sc-ring), var(--shadow-xs);
  }
  @media (prefers-reduced-motion: reduce) {
    .stat-card--clickable {
      transition: none;
    }
  }
  .stat-card--loading .stat-card__value, .stat-card--loading .stat-card__trend, .stat-card--loading .stat-card__sparkline, .stat-card--loading .stat-card__progress {
    visibility: hidden;
    position: relative;
  }
  .stat-card--loading .stat-card__value::after, .stat-card--loading .stat-card__trend::after {
    content: "";
    visibility: visible;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .stat-card--loading .stat-card__sparkline::before, .stat-card--loading .stat-card__progress::before {
    content: "";
    visibility: visible;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .stat-card--loading .stat-card__value::after, .stat-card--loading .stat-card__trend::after, .stat-card--loading .stat-card__sparkline::before, .stat-card--loading .stat-card__progress::before {
      animation: none;
    }
  }
  .stat-card--empty .stat-card__value {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    color: var(--text-quaternary);
  }
  .stat-card--empty .stat-card__label {
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .widget {
    --dash-widget-fill: var(--bg-panel, var(--bg-primary));
    --dash-widget-ring: var(--border-secondary);
    --dash-widget-shadow: var(--shadow-card, var(--shadow-sm));
    --dash-widget-radius: var(--radius-card-md, var(--radius-xl));
    --dash-pad: 1rem;
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    border-radius: var(--dash-widget-radius);
    background-color: var(--dash-widget-fill);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .widget--plain {
    --dash-widget-ring: transparent;
    --dash-widget-shadow: none;
    --dash-widget-fill: transparent;
  }
  .widget--raised {
    --dash-widget-shadow: var(--shadow-lg);
  }
  .widget--brand {
    --dash-widget-ring: var(--border-brand, var(--border-focus));
  }
  .widget--accent-top {
    overflow: hidden;
  }
  .widget--accent-top::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: var(--spacing);
    background-color: var(--bg-brand-solid);
  }
  .widget__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: var(--dash-pad) var(--dash-pad) 0;
  }
  .widget__heading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .widget__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .widget__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    width: 2rem;
    height: 2rem;
    color: var(--text-icon-brand, var(--text-secondary));
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
  }
  .widget__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .widget__action {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-quaternary);
    background-color: transparent;
  }
  .widget__action:hover {
    color: var(--text-quaternary-hover, var(--text-secondary));
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .widget__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .widget__body {
    min-width: 0;
    flex: 1;
    padding: var(--dash-pad);
  }
  .widget__body--flush {
    padding: calc(var(--dash-pad) * 0.5) 0 0;
  }
  .widget__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    padding: 0 var(--dash-pad) var(--dash-pad);
    color: var(--text-tertiary);
  }
  .widget__footer--between {
    justify-content: space-between;
  }
  .widget__footer--end {
    justify-content: flex-end;
  }
  .widget__footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: 0.25rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    color: var(--text-icon-brand, var(--text-secondary));
  }
  .widget__footer-link:hover {
    text-decoration: underline;
  }
  .widget__footer-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .widget--sm {
    --dash-pad: 0.75rem;
  }
  .widget--sm .widget__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .widget--lg {
    --dash-pad: 1.5rem;
  }
  .widget--lg .widget__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .widget__divider {
    margin-block: 0;
    height: 1px;
    width: 100%;
    border: 0;
    background-color: var(--border-secondary);
  }
  .widget__grip {
    display: inline-flex;
    flex-shrink: 0;
    cursor: grab;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 1.5rem;
    height: 1.75rem;
    color: var(--text-quaternary);
    touch-action: none;
  }
  .widget__grip:active {
    cursor: grabbing;
  }
  .widget__grip:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .widget--dragging {
    opacity: 0.6;
    cursor: grabbing;
  }
  .widget--drop-before {
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), inset 3px 0 0 0 var(--bg-brand-solid);
  }
  .widget--add {
    --dash-widget-fill: transparent;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-height: 6rem;
    color: var(--text-tertiary);
    border-radius: var(--dash-widget-radius, var(--radius-card-md));
    box-shadow: none;
    border: 1px dashed var(--border-secondary);
    background-color: transparent;
    transition: color 100ms ease, border-color 100ms ease;
  }
  .widget--add:hover {
    color: var(--text-secondary);
    border-color: var(--border-brand, var(--border-focus));
  }
  .widget--add:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .widget__caret {
    transition: transform 150ms ease;
  }
  .widget[data-widget-collapsed="true"] .widget__caret {
    transform: rotate(-90deg);
  }
  .widget[data-widget-collapsed="true"] .widget__body, .widget[data-widget-collapsed="true"] .widget__footer {
    display: none;
  }
  .widget__action.is-busy {
    pointer-events: none;
  }
  .widget__action.is-busy > i, .widget__action.is-busy > svg {
    animation: widget-spin 0.7s linear infinite;
  }
  @keyframes widget-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .widget[data-widget-state="refreshing"] .widget__body {
    opacity: 0.5;
    transition: opacity 150ms ease;
    pointer-events: none;
  }
  .widget-skeleton {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .widget-skeleton__line, .widget-skeleton__block {
    border-radius: var(--radius-sm, 0.375rem);
    background-color: var(--bg-secondary);
    background-image: linear-gradient( 90deg, transparent 0%, var(--text-primary) 50%, transparent 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 90deg, transparent 0%, color-mix(in oklch, var(--text-primary) 6%, transparent) 50%, transparent 100% );
    }
    background-size: 200% 100%;
    animation: widget-shimmer 1.4s ease-in-out infinite;
  }
  .widget-skeleton__line {
    height: 0.75rem;
  }
  .widget-skeleton__line--lg {
    height: 1.5rem;
  }
  .widget-skeleton__line--sm {
    height: 0.5rem;
  }
  .widget-skeleton__line--60 {
    width: 60%;
  }
  .widget-skeleton__line--40 {
    width: 40%;
  }
  .widget-skeleton__block {
    height: 5rem;
  }
  @keyframes widget-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  .widget-empty, .widget-error {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    padding: 1.5rem 1rem;
  }
  .widget-empty__icon, .widget-error__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    width: 2.25rem;
    height: 2.25rem;
  }
  .widget-empty__icon {
    color: var(--text-tertiary);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
  }
  .widget-error__icon {
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle, var(--bg-secondary));
  }
  .widget-empty__title, .widget-error__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
  }
  .widget-empty__description, .widget-error__description {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .widget__freshness {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .widget__freshness::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--text-quaternary);
  }
  .widget__freshness.is-live::before {
    background-color: var(--bg-success-solid, var(--text-success));
    animation: widget-pulse 2s ease-in-out infinite;
  }
  .widget__freshness.is-stale::before {
    background-color: var(--text-warning);
  }
  @keyframes widget-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--bg-success-solid, var(--text-success)) 45%, transparent);
    }
    70% {
      box-shadow: 0 0 0 5px transparent;
    }
  }
  .widget-metric {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
  }
  .widget-metric__value {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget-metric__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .widget-metric__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .widget-metric__delta--up {
    color: var(--text-success);
  }
  .widget-metric__delta--down {
    color: var(--text-danger);
  }
  .widget-metric__delta--flat {
    color: var(--text-tertiary);
  }
  .widget-stat-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: stretch;
  }
  .widget-stat-group__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    padding: 0 0.75rem;
  }
  .widget-stat-group__item:first-child {
    padding-left: 0;
  }
  .widget-stat-group__item + .widget-stat-group__item {
    border-left: 1px solid var(--border-secondary);
  }
  .widget-stat-group__value {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget-stat-group__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .widget-spark {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    gap: calc(var(--spacing) * 0.5);
    height: 2.5rem;
  }
  .widget-spark--sm {
    height: 1.75rem;
  }
  .widget-spark--lg {
    height: 3.5rem;
  }
  .widget-spark__bar {
    flex: 1;
    border-radius: var(--radius-sm);
    min-width: 3px;
    height: var(--h, 40%);
    background-color: var(--bg-brand-solid);
    opacity: 0.85;
  }
  .widget-spark--success .widget-spark__bar {
    background-color: var(--bg-success-solid, var(--text-success));
  }
  .widget-spark--warning .widget-spark__bar {
    background-color: var(--bg-warning-solid, var(--text-warning));
  }
  .widget-spark--danger .widget-spark__bar {
    background-color: var(--bg-danger-solid, var(--text-danger));
  }
  .widget-spark--info .widget-spark__bar {
    background-color: var(--bg-info-solid, var(--text-info));
  }
  .widget-spark--muted .widget-spark__bar {
    background-color: var(--text-quaternary);
  }
  .widget-goal {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .widget-goal__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .widget-goal__value {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget-goal__target {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .widget-goal__track {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-full);
    height: 0.5rem;
    background-color: var(--bg-secondary);
  }
  .widget-goal__fill {
    height: 100%;
    border-radius: var(--radius-full);
    width: var(--v, 0%);
    background-color: var(--bg-brand-solid);
    transition: width 300ms ease;
  }
  .widget-goal__fill--success {
    background-color: var(--bg-success-solid, var(--text-success));
  }
  .widget-goal__fill--warning {
    background-color: var(--bg-warning-solid, var(--text-warning));
  }
  .widget-goal__fill--danger {
    background-color: var(--bg-danger-solid, var(--text-danger));
  }
  .widget-goal__fill--info {
    background-color: var(--bg-info-solid, var(--text-info));
  }
  .widget-goal__caption {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .widget-compare {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .widget-compare__side {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .widget-compare__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .widget-compare__value {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget-compare__value--muted {
    color: var(--text-tertiary);
    font-size: 1.25rem;
  }
  .widget-compare__arrow {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--text-quaternary);
  }
  .widget-chart {
    width: 100%;
  }
  .widget-line {
    display: block;
    width: 100%;
    height: 4rem;
    overflow: visible;
  }
  .widget-line--sm {
    height: 2.5rem;
  }
  .widget-line--lg {
    height: 6rem;
  }
  .widget-line .wl-stroke {
    fill: none;
    stroke: var(--bg-brand-solid);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .widget-line .wl-area {
    fill: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--bg-brand-solid) 14%, transparent);
    }
    stroke: none;
  }
  .widget-line .wl-dot {
    fill: var(--bg-brand-solid);
  }
  .widget-line--success .wl-stroke, .widget-line--success .wl-dot {
    stroke: var(--bg-success-solid, var(--text-success));
    fill: var(--bg-success-solid, var(--text-success));
  }
  .widget-line--success .wl-area {
    fill: var(--bg-success-solid, var(--text-success));
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--bg-success-solid, var(--text-success)) 14%, transparent);
    }
  }
  .widget-line--warning .wl-stroke, .widget-line--warning .wl-dot {
    stroke: var(--bg-warning-solid, var(--text-warning));
    fill: var(--bg-warning-solid, var(--text-warning));
  }
  .widget-line--warning .wl-area {
    fill: var(--bg-warning-solid, var(--text-warning));
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--bg-warning-solid, var(--text-warning)) 14%, transparent);
    }
  }
  .widget-line--danger .wl-stroke, .widget-line--danger .wl-dot {
    stroke: var(--bg-danger-solid, var(--text-danger));
    fill: var(--bg-danger-solid, var(--text-danger));
  }
  .widget-line--danger .wl-area {
    fill: var(--bg-danger-solid, var(--text-danger));
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--bg-danger-solid, var(--text-danger)) 14%, transparent);
    }
  }
  .widget-line--info .wl-stroke, .widget-line--info .wl-dot {
    stroke: var(--bg-info-solid, var(--text-info));
    fill: var(--bg-info-solid, var(--text-info));
  }
  .widget-line--info .wl-area {
    fill: var(--bg-info-solid, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--bg-info-solid, var(--text-info)) 14%, transparent);
    }
  }
  .widget-bars {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
    height: 6rem;
  }
  .widget-bars--sm {
    height: 4rem;
  }
  .widget-bars--lg {
    height: 9rem;
  }
  .widget-bars__col {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing);
  }
  .widget-bars__bar {
    width: 100%;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    height: var(--h, 40%);
    min-height: 2px;
    background-color: var(--bg-brand-solid);
    opacity: 0.85;
  }
  .widget-bars__bar--accent {
    background-color: var(--bg-success-solid, var(--text-success));
    opacity: 1;
  }
  .widget-bars__bar--success {
    background-color: var(--bg-success-solid, var(--text-success));
    opacity: 1;
  }
  .widget-bars__bar--warning {
    background-color: var(--bg-warning-solid, var(--text-warning));
    opacity: 1;
  }
  .widget-bars__bar--danger {
    background-color: var(--bg-danger-solid, var(--text-danger));
    opacity: 1;
  }
  .widget-bars__bar--info {
    background-color: var(--bg-info-solid, var(--text-info));
    opacity: 1;
  }
  .widget-bars__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .widget-donut {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: var(--size, 7rem);
    height: var(--size, 7rem);
    background: conic-gradient(var(--bg-brand-solid) calc(var(--v, 0) * 1%), var(--bg-secondary) 0);
  }
  .widget-donut--success {
    background: conic-gradient(var(--bg-success-solid, var(--text-success)) calc(var(--v, 0) * 1%), var(--bg-secondary) 0);
  }
  .widget-donut--warning {
    background: conic-gradient(var(--bg-warning-solid, var(--text-warning)) calc(var(--v, 0) * 1%), var(--bg-secondary) 0);
  }
  .widget-donut--danger {
    background: conic-gradient(var(--bg-danger-solid, var(--text-danger)) calc(var(--v, 0) * 1%), var(--bg-secondary) 0);
  }
  .widget-donut--info {
    background: conic-gradient(var(--bg-info-solid, var(--text-info)) calc(var(--v, 0) * 1%), var(--bg-secondary) 0);
  }
  .widget-donut--sm {
    --size: 5rem;
  }
  .widget-donut--sm::before {
    inset: 0.65rem;
  }
  .widget-donut--sm .widget-donut__value {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .widget-donut--lg {
    --size: 9rem;
  }
  .widget-donut--lg::before {
    inset: 1.15rem;
  }
  .widget-donut--lg .widget-donut__value {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  .widget-donut::before {
    content: "";
    position: absolute;
    border-radius: var(--radius-full);
    inset: 0.9rem;
    background-color: var(--dash-widget-fill, var(--bg-panel));
  }
  .widget-donut__label {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    --tw-leading: 1;
    line-height: 1;
  }
  .widget-donut__value {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget-donut__cap {
    margin-top: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .widget-legend {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .widget-legend__item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .widget-legend__dot {
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--bg-brand-solid);
  }
  .widget-legend__dot--2 {
    background-color: var(--text-quaternary);
  }
  .widget-legend__dot--success {
    background-color: var(--bg-success-solid, var(--text-success));
  }
  .widget-legend__dot--warning {
    background-color: var(--bg-warning-solid, var(--text-warning));
  }
  .widget-legend__dot--danger {
    background-color: var(--bg-danger-solid, var(--text-danger));
  }
  .widget-legend__dot--info {
    background-color: var(--bg-info-solid, var(--text-info));
  }
  .widget-heatmap {
    display: grid;
    gap: var(--spacing);
    grid-template-columns: repeat(var(--cols, 14), minmax(0, 1fr));
  }
  .widget-heatmap__cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background-color: var(--bg-secondary);
  }
  .widget-heatmap__cell[data-level="1"] {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 30%, var(--bg-secondary));
    }
  }
  .widget-heatmap__cell[data-level="2"] {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 55%, var(--bg-secondary));
    }
  }
  .widget-heatmap__cell[data-level="3"] {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 78%, var(--bg-secondary));
    }
  }
  .widget-heatmap__cell[data-level="4"] {
    background-color: var(--bg-brand-solid);
  }
  .widget-heatmap__key {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .widget-heatmap__key i {
    display: inline-block;
    border-radius: var(--radius-sm);
    width: 0.625rem;
    height: 0.625rem;
  }
  .widget-feed {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .widget-feed__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
  }
  .widget-feed__item + .widget-feed__item {
    border-top: 1px solid var(--border-secondary);
  }
  .widget-feed__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 1px;
    font-size: 0.75rem;
    color: var(--text-icon-brand, var(--text-secondary));
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
  }
  .widget-feed__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 1px;
  }
  .widget-feed__text {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .widget-feed__text strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .widget-feed__time {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .widget-feed__unread {
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background-color: var(--bg-brand-solid);
  }
  .widget-feed--timeline .widget-feed__item {
    position: relative;
  }
  .widget-feed--timeline .widget-feed__item + .widget-feed__item {
    border-top: 0;
  }
  .widget-feed--timeline .widget-feed__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.875rem;
    top: 2.25rem;
    bottom: -0.25rem;
    width: 1px;
    background-color: var(--border-secondary);
  }
  .widget-actions-grid {
    display: grid;
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  }
  .widget-action-tile {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    text-align: center;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    padding: 0.75rem 0.5rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
  }
  .widget-action-tile:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
    color: var(--text-primary);
  }
  .widget-action-tile:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .widget-action-tile__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    width: 2.25rem;
    height: 2.25rem;
    color: var(--text-icon-brand, var(--text-secondary));
    background-color: var(--bg-panel, var(--bg-primary));
  }
  .widget-action-tile__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .widget-links {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .widget-link {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-md);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    padding: 0.5rem;
    color: var(--text-secondary);
  }
  .widget-link:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
    color: var(--text-primary);
  }
  .widget-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .widget-link__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    color: var(--text-quaternary);
  }
  .widget-link__label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .widget-link__ext {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .widget-task {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
  }
  .widget-task + .widget-task {
    border-top: 1px solid var(--border-secondary);
  }
  .widget-task__label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .widget-task.is-done .widget-task__label {
    color: var(--text-tertiary);
    text-decoration: line-through;
  }
  .widget-clock {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .widget-clock__digital {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
  }
  .widget-clock__time {
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 2rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .widget-clock__date {
    margin-top: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .widget-clock__zone {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .widget-clock__face {
    position: relative;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 4rem;
    height: 4rem;
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .widget-clock__hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    border-radius: 2px;
    background-color: var(--text-primary);
  }
  .widget-clock__hand--h {
    width: 3px;
    height: 1.1rem;
    transform: translateX(-50%) rotate(var(--h, 0deg));
  }
  .widget-clock__hand--m {
    width: 2px;
    height: 1.5rem;
    transform: translateX(-50%) rotate(var(--m, 0deg));
  }
  .widget-clock__hand--s {
    width: 1px;
    height: 1.6rem;
    transform: translateX(-50%) rotate(var(--s, 0deg));
    background-color: var(--bg-brand-solid);
  }
  .widget-clock__pivot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-brand-solid);
  }
  .widget-weather {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .widget-weather__icon {
    font-size: 2.5rem;
    color: var(--text-icon-brand, var(--text-secondary));
  }
  .widget-weather__temp {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget-weather__cond {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .widget-forecast {
    margin-top: calc(var(--spacing) * 3);
    display: grid;
    gap: var(--spacing);
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  }
  .widget-forecast__day {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
    padding-block: var(--spacing);
    text-align: center;
  }
  .widget-forecast__dow {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .widget-forecast__ico {
    color: var(--text-quaternary);
  }
  .widget-forecast__hi {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget-cal {
    width: 100%;
  }
  .widget-cal__head {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
  }
  .widget-cal__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .widget-cal__grid {
    display: grid;
    gap: calc(var(--spacing) * 0.5);
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .widget-cal__dow {
    padding-block: var(--spacing);
    text-align: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .widget-cal__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    aspect-ratio: 1;
    color: var(--text-secondary);
  }
  .widget-cal__day--muted {
    color: var(--text-quaternary);
    opacity: 0.5;
  }
  .widget-cal__day--today {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-weight: 600;
  }
  .widget-cal__day--event {
    position: relative;
  }
  .widget-cal__day--event::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--bg-brand-solid);
  }
  .widget-cal__day--today.widget-cal__day--event::after {
    background-color: var(--text-on-brand);
  }
  .widget-embed__media {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--bg-secondary);
    color: var(--text-quaternary);
    font-size: 1.75rem;
  }
  .widget-embed__media > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .widget-embed__eyebrow {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-icon-brand, var(--text-tertiary));
  }
  .widget-map {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md, 0.5rem);
    background-image: linear-gradient(135deg, var(--bg-brand-solid), var(--bg-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(135deg, color-mix(in oklch, var(--bg-brand-solid) 16%, var(--bg-secondary)), var(--bg-secondary));
    }
  }
  .widget-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    color: var(--text-brand);
    font-size: 1.5rem;
  }
  .widget-map__overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    background-color: var(--bg-panel, var(--bg-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-panel, var(--bg-primary)) 85%, transparent);
    }
  }
  .widget-media {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--bg-secondary);
    color: var(--text-quaternary);
    font-size: 1.75rem;
  }
  .widget-media > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .widget-media__play {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 3rem;
    height: 3rem;
    color: var(--text-icon-brand, var(--text-primary));
    background-color: var(--bg-panel, var(--bg-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-panel, var(--bg-primary)) 90%, transparent);
    }
  }
  .widget-media__badge {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0.125rem 0.375rem;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .widget-media__cap {
    margin-top: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  @media (prefers-reduced-motion: reduce) {
    .widget__action, .widget__footer-link, .widget--add, .widget__caret, .widget-goal__fill, .widget-action-tile, .widget-link {
      transition: none;
    }
    .widget__action.is-busy > i, .widget__action.is-busy > svg, .widget-skeleton__line, .widget-skeleton__block, .widget__freshness.is-live::before {
      animation: none;
    }
  }
}
@layer utilities {
  .completion-gauge {
    --gauge-size: 80px;
    --gauge-stroke: 7;
    --gauge-track-color: var(--bg-skeleton, var(--utility-neutral-100));
    --gauge-fill-color: var(--utility-green-400);
    position: relative;
    width: var(--gauge-size);
    height: var(--gauge-size);
    flex-shrink: 0;
  }
  .completion-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .completion-gauge__track {
    fill: none;
    stroke: var(--gauge-track-color);
    stroke-width: var(--gauge-stroke);
  }
  .completion-gauge__fill {
    fill: none;
    stroke: var(--gauge-fill-color);
    stroke-width: var(--gauge-stroke);
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    transition: stroke-dashoffset 800ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .completion-gauge__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }
  .completion-gauge--sm {
    --gauge-size: 64px;
    --gauge-stroke: 6;
  }
  .completion-gauge--sm .completion-gauge__value {
    font-size: 0.875rem;
  }
  .completion-gauge--lg {
    --gauge-size: 100px;
    --gauge-stroke: 8;
  }
  .completion-gauge--lg .completion-gauge__value {
    font-size: 1.5rem;
  }
  .completion-gauge--xl {
    --gauge-size: 120px;
    --gauge-stroke: 9;
  }
  .completion-gauge--xl .completion-gauge__value {
    font-size: 1.75rem;
  }
  :is([data-bs-theme="dark"], .dark) .completion-gauge {
    --gauge-track-color: var(--bg-skeleton, var(--utility-neutral-800));
  }
  .completion-gauge--info {
    --gauge-fill-color: var(--utility-blue-400);
  }
  .completion-gauge--warning {
    --gauge-fill-color: var(--utility-yellow-400);
  }
  .completion-gauge--danger {
    --gauge-fill-color: var(--utility-red-400);
  }
  .completion-gauge--danger .completion-gauge__value {
    color: var(--utility-red-400);
  }
  .completion-gauge--muted {
    --gauge-fill-color: var(--bg-skeleton, var(--utility-neutral-200));
  }
  .completion-gauge--muted .completion-gauge__value {
    color: var(--text-tertiary);
  }
  .completion-gauge--over-capacity {
    --gauge-fill-color: var(--utility-red-400);
  }
  .completion-gauge--over-capacity .completion-gauge__value {
    color: var(--utility-red-400);
  }
  .completion-gauge[data-anim] .completion-gauge__fill {
    stroke-dashoffset: 326.73;
  }
  .completion-gauge__value.gauge-flash {
    animation: gauge-value-flash 800ms ease;
  }
  @keyframes gauge-value-flash {
    0% {
      opacity: 1;
    }
    30% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes gauge-spin {
    100% {
      transform: rotate(360deg);
    }
  }
  .completion-gauge--indeterminate .completion-gauge__ring {
    animation: gauge-spin 1.5s linear infinite;
    transform-origin: center;
  }
  .completion-gauge--indeterminate .completion-gauge__fill {
    stroke-dasharray: 80 326.73;
  }
  .completion-gauge--indeterminate .completion-gauge__value {
    display: none;
  }
  .completion-gauge--success {
    --gauge-fill-color: var(--bg-success-solid);
  }
  .completion-gauge--success .completion-gauge__value {
    color: var(--text-success);
  }
  @media (prefers-reduced-motion: reduce) {
    .completion-gauge__fill {
      transition: none;
    }
    .completion-gauge__value.gauge-flash {
      animation: none;
    }
    .completion-gauge--indeterminate .completion-gauge__ring {
      animation: none;
    }
  }
}
@layer utilities {
  .sky-banner {
    --_sb-bg: var(--bg-secondary);
    --_sb-ring: var(--border-secondary-alt);
    --_sb-edge: var(--border-primary);
    --_sb-title: var(--text-secondary);
    --_sb-body: var(--text-tertiary);
    --_sb-link: var(--border-primary-alt);
    --_sb-divider: var(--border-secondary);
    --_sb-icon: var(--text-icon-brand);
    --_sb-unit-bg: var(--bg-primary);
    --_sb-unit-ring: var(--border-primary);
    --_sb-unit-text: var(--text-primary);
    position: relative;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    background-color: var(--_sb-bg);
    color: var(--_sb-body);
  }
  .sky-banner--brand {
    --_sb-bg: var(--bg-brand-solid);
    --_sb-ring: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --_sb-ring: color-mix(in oklch, var(--text-on-brand) 25%, transparent);
    }
    --_sb-edge: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --_sb-edge: color-mix(in oklch, var(--text-on-brand) 25%, transparent);
    }
    --_sb-title: var(--text-on-brand);
    --_sb-body: var(--text-on-brand);
    --_sb-link: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --_sb-link: color-mix(in oklch, var(--text-on-brand) 55%, transparent);
    }
    --_sb-divider: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --_sb-divider: color-mix(in oklch, var(--text-on-brand) 20%, transparent);
    }
    --_sb-icon: var(--text-on-brand);
    --_sb-unit-bg: transparent;
    --_sb-unit-ring: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --_sb-unit-ring: color-mix(in oklch, var(--text-on-brand) 35%, transparent);
    }
    --_sb-unit-text: var(--text-on-brand);
  }
  .sky-banner:not(.sky-banner--full-width) {
    margin-inline: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      margin: 0;
    }
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--_sb-ring), var(--shadow-lg);
  }
  .sky-banner--brand:not(.sky-banner--full-width) {
    border-top: 1px solid var(--_sb-ring);
    box-shadow: var(--shadow-lg);
  }
  @media (min-width: 768px) {
    .sky-banner--brand:not(.sky-banner--full-width) {
      border-top: 0;
      border-bottom: 1px solid var(--_sb-ring);
    }
  }
  .sky-banner--full-width {
    border-top: 1px solid var(--_sb-edge);
  }
  @media (min-width: 768px) {
    .sky-banner--full-width {
      border-top: 0;
      border-bottom: 1px solid var(--_sb-edge);
    }
  }
  .sky-banner--slim.sky-banner--full-width {
    border-top: 0;
    border-bottom: 1px solid var(--_sb-edge);
  }
  .sky-banner__container {
    margin-inline: auto;
    width: 100%;
    max-width: 80rem;
  }
  .sky-banner--single-action:not(.sky-banner--full-width), .sky-banner--text-field:not(.sky-banner--full-width) {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .sky-banner--single-action.sky-banner--full-width .sky-banner__container, .sky-banner--text-field.sky-banner--full-width .sky-banner__container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .sky-banner--dual-action:not(.sky-banner--full-width) {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 5);
    }
  }
  .sky-banner--dual-action.sky-banner--full-width .sky-banner__container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .sky-banner--slim:not(.sky-banner--full-width) {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .sky-banner--slim.sky-banner--full-width {
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3.5);
    }
  }
  .sky-banner--countdown:not(.sky-banner--full-width) {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: center;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .sky-banner--countdown.sky-banner--full-width .sky-banner__container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: center;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .sky-banner__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      width: 0;
    }
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .sky-banner--dual-action .sky-banner__main {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .sky-banner--text-field .sky-banner__main {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      width: 0;
    }
  }
  .sky-banner__text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .sky-banner--single-action .sky-banner__text {
    gap: calc(var(--spacing) * 0.5);
    overflow: hidden;
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .sky-banner--dual-action .sky-banner__text {
    gap: calc(var(--spacing) * 2);
    overflow: hidden;
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .sky-banner--slim .sky-banner__text {
    width: 0;
    flex: 1;
    gap: calc(var(--spacing) * 0.5);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      justify-content: center;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 1.5);
    }
    @media (width >= 48rem) {
      text-align: center;
    }
  }
  .sky-banner--slim.sky-banner--full-width .sky-banner__text {
    width: auto;
    flex: none;
    @media (width >= 48rem) {
      justify-content: center;
    }
  }
  .sky-banner--countdown .sky-banner__text {
    gap: calc(var(--spacing) * 0.5);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .sky-banner--text-field .sky-banner__text {
    gap: calc(var(--spacing) * 0.5);
    overflow: auto;
  }
  .sky-banner__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--_sb-title);
  }
  .sky-banner__body {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--_sb-body);
  }
  :is(.sky-banner--single-action, .sky-banner--dual-action, .sky-banner--slim, .sky-banner--text-field) .sky-banner__title, :is(.sky-banner--single-action, .sky-banner--dual-action, .sky-banner--slim, .sky-banner--text-field) .sky-banner__body {
    @media (width >= 48rem) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .sky-banner--dual-action .sky-banner__title, .sky-banner--slim .sky-banner__title, .sky-banner--countdown .sky-banner__title, .sky-banner--text-field .sky-banner__title {
    padding-right: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-right: 0;
    }
  }
  .sky-banner__link {
    border-radius: var(--radius-xs);
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--_sb-link);
    text-underline-offset: 3px;
  }
  .sky-banner__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .sky-banner__glyph {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex: none;
    color: var(--_sb-icon);
  }
  .sky-banner__icon {
    flex: none;
  }
  .sky-banner--text-field .sky-banner__icon {
    display: none;
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .sky-banner__icon--brand {
    background-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-on-brand) 12%, transparent);
    }
    color: var(--text-on-brand);
    box-shadow: inset 0 0 0 1px var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-on-brand) 25%, transparent);
    }
  }
  .sky-banner__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .sky-banner--dual-action .sky-banner__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 2);
  }
  .sky-banner__buttons {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column-reverse;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  :is(.sky-banner--single-action, .sky-banner--dual-action).sky-banner--brand .btn-secondary {
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }
  .sky-banner__actions .btn-link {
    color: var(--_sb-title);
  }
  .sky-banner__dismiss-slot {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: center;
  }
  .sky-banner--single-action .sky-banner__dismiss-slot, .sky-banner--dual-action .sky-banner__dismiss-slot, .sky-banner--text-field .sky-banner__dismiss-slot {
    @media (width >= 48rem) {
      position: static;
    }
  }
  .sky-banner--slim.sky-banner--full-width .sky-banner__dismiss-slot {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 1.5);
    }
  }
  .sky-banner--countdown .sky-banner__dismiss-slot {
    @media (width >= 48rem) {
      top: calc(1 / 2 * 100%);
    }
  }
  @media (min-width: 768px) {
    .sky-banner--countdown .sky-banner__dismiss-slot {
      transform: translateY(-50%);
    }
  }
  .sky-banner__dismiss {
    display: inline-flex;
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    flex: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--_sb-body);
    background-color: transparent;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .sky-banner__dismiss:hover {
    background-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--_sb-title) 8%);
    }
    color: var(--_sb-title);
  }
  .sky-banner__dismiss:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .sky-banner__dismiss > i, .sky-banner__dismiss > svg {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  @media (prefers-reduced-motion: reduce) {
    .sky-banner__dismiss {
      transition: none;
    }
  }
  .sky-banner__countdown {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .sky-banner__unit {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .sky-banner__unit-box {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: calc(var(--spacing) * 7);
    align-items: center;
    justify-content: center;
    padding: var(--spacing);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    border-radius: var(--radius-md);
    background-color: var(--_sb-unit-bg);
    color: var(--_sb-unit-text);
    box-shadow: inset 0 0 0 1px var(--_sb-unit-ring), var(--shadow-xs);
  }
  .sky-banner--brand .sky-banner__unit-box {
    box-shadow: inset 0 0 0 1px var(--_sb-unit-ring);
  }
  .sky-banner__unit-label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--_sb-body);
  }
  .sky-banner__divider {
    display: none;
    height: calc(var(--spacing) * 4);
    width: 1px;
    --tw-border-style: none;
    border-style: none;
    @media (width >= 48rem) {
      display: block;
    }
    background-color: var(--_sb-divider);
  }
  .sky-banner__form {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  @media (min-width: 768px) {
    .sky-banner__form {
      width: 22.5rem;
      flex: none;
    }
  }
  .sky-banner__form .form-control {
    flex: 1;
  }
  .sky-banner {
    transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .sky-banner.is-dismissing {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .sky-banner {
      transition: none;
    }
    .sky-banner.is-dismissing {
      transform: none;
    }
  }
}
@layer utilities {
  .activity-feed {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .activity-feed__group {
    position: sticky;
    top: 0;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    background-color: var(--bg-surface);
  }
  .activity-feed__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    border-color: var(--border-activity-feed-item, var(--border-secondary));
    background-color: var(--bg-activity-feed-item, var(--bg-surface));
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .activity-feed__item:hover {
    background-color: var(--bg-activity-feed-item-hover, var(--bg-hover));
  }
  .activity-feed__item--unread {
    background-color: var(--bg-activity-feed-item-unread, var(--bg-info-subtle));
  }
  .activity-feed__avatar {
    flex-shrink: 0;
  }
  .activity-feed__content {
    min-width: 0;
    flex: 1;
  }
  .activity-feed__action {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-activity-feed-action, var(--text-secondary));
  }
  .activity-feed__target {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-activity-feed-target, var(--text-link));
  }
  .activity-feed__meta {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-activity-feed-meta, var(--text-tertiary));
  }
  .activity-feed--compact .activity-feed__item {
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .activity-feed--timeline {
    position: relative;
    padding-left: 2rem;
  }
  .activity-feed--timeline .activity-feed__item {
    position: relative;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
    padding-left: 0;
  }
  .activity-feed--timeline .activity-feed__item::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2.4px;
    top: 0;
    bottom: 0;
    transform: translateX(4px);
    background-image: radial-gradient(circle at center, var(--border-activity-feed-connector, var(--border-primary)) 1.2px, transparent 1.35px);
    background-position: center top;
    background-size: 2.4px 6px;
    background-repeat: repeat-y;
  }
  .activity-feed--timeline .activity-feed__item:last-child::before {
    display: none;
  }
  .activity-feed__icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-tertiary-subtle);
    color: var(--text-secondary);
  }
  .activity-feed__icon--success {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .activity-feed__icon--danger {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .activity-feed__icon--warning {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .activity-feed__icon--info {
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .activity-feed__icon--primary {
    background-color: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
  }
  .activity-feed__body {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
  }
  .activity-feed__attachments {
    margin-top: calc(var(--spacing) * 1.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .activity-feed__attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    background-color: var(--bg-tertiary-subtle);
    border-color: var(--border-secondary);
    color: var(--text-secondary);
  }
  .activity-feed__actions {
    margin-top: calc(var(--spacing) * 1.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .activity-feed__action-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    transition: color 100ms ease;
  }
  .activity-feed__action-btn:hover {
    color: var(--text-primary);
  }
  .activity-feed__item--important {
    border-left: 3px solid var(--bg-danger-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .activity-feed__item--important .activity-feed__action {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .activity-feed__item--system {
    background-color: var(--bg-tertiary-subtle);
  }
  .activity-feed__item--system .activity-feed__action {
    font-style: italic;
    color: var(--text-tertiary);
  }
  .activity-feed__expand {
    margin-top: var(--spacing);
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-link);
  }
  .activity-feed__expand:hover {
    text-decoration: underline;
  }
  .activity-feed__detail {
    margin-top: calc(var(--spacing) * 1.5);
    display: none;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-secondary);
  }
  .activity-feed__detail.is-expanded {
    display: block;
  }
  .activity-feed--cards .activity-feed__item {
    margin-bottom: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    background-color: var(--bg-card);
    border-color: var(--border-card);
  }
  .activity-feed--cards .activity-feed__item:hover {
    border-color: var(--border-primary);
  }
  .activity-feed__replies {
    margin-top: var(--spacing);
    margin-left: calc(var(--spacing) * 8);
    padding-left: calc(var(--spacing) * 3);
    border-left: 2px solid var(--border-primary-subtle);
  }
  .activity-feed__replies .activity-feed__item {
    padding-block: calc(var(--spacing) * 1.5);
  }
  @keyframes feed-item-appear {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .activity-feed__item.is-new {
    animation: feed-item-appear 300ms ease both;
  }
  .activity-feed__item.is-new::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-full);
    background-color: var(--bg-info-solid);
  }
  @media (prefers-reduced-motion: reduce) {
    .activity-feed__item.is-new {
      animation: none;
    }
  }
  .activity-feed__item--skeleton .activity-feed__icon {
    background: var(--bg-skeleton);
  }
  .activity-feed__item--skeleton .activity-feed__content {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .activity-feed--dense .activity-feed__item {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
  }
  .activity-feed--dense .activity-feed__icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .activity-feed--dense .activity-feed__content {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .activity-feed--dense .activity-feed__avatar img, .activity-feed--dense .activity-feed__avatar .avatar {
    width: 1.25rem;
    height: 1.25rem;
  }
  .activity-feed__item--pinned {
    background-color: var(--bg-activity-feed-pinned, var(--bg-warning-subtle));
    border-left: 3px solid var(--text-warning, var(--bg-warning-solid));
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .activity-feed__item--pinned::after {
    content: "\f02e";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    color: var(--text-warning);
  }
  .activity-feed__item--pinned {
    position: relative;
  }
  .activity-feed__action {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .activity-feed__body {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .activity-feed__item.is-expanded .activity-feed__action, .activity-feed__item.is-expanded .activity-feed__body, .activity-feed--no-clamp .activity-feed__action, .activity-feed--no-clamp .activity-feed__body {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .activity-feed__replies .activity-feed__replies {
    margin-left: calc(var(--spacing) * 4);
    padding-left: calc(var(--spacing) * 2);
  }
  .activity-feed__replies .activity-feed__replies .activity-feed__replies {
    margin-left: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 2);
    border-left-style: dashed;
  }
  .activity-feed__replies .activity-feed__replies .activity-feed__replies .activity-feed__replies {
    margin-left: 0;
    padding-left: calc(var(--spacing) * 2);
  }
  .activity-feed__action-btn.is-loading {
    opacity: 0.7;
    cursor: progress;
    pointer-events: none;
  }
  .activity-feed__action-btn.is-loading::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: feed-action-spin 0.7s linear infinite;
    margin-right: 4px;
  }
  @keyframes feed-action-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .activity-feed__action-btn.is-loading::before {
      animation: none;
    }
  }
  .activity-feed__load-more {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    background-color: transparent;
    border: 0;
    border-top: 1px solid var(--border-secondary);
    width: 100%;
    transition: background-color 100ms ease, color 100ms ease;
  }
  .activity-feed__load-more:hover {
    background-color: var(--bg-activity-feed-item-hover, var(--bg-hover));
    color: var(--text-primary);
  }
  .activity-feed__load-more.is-loading::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: feed-action-spin 0.7s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .activity-feed__load-more.is-loading::before {
      animation: none;
    }
  }
  .activity-feed__new-indicator {
    position: absolute;
    top: calc(var(--spacing) * 2);
    left: calc(1 / 2 * 100%);
    z-index: 10;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transform: translate(-50%, 0);
    background-color: var(--text-info);
    color: var(--alpha-white-100);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .activity-feed__new-indicator.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .activity-feed__filters {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-secondary);
    background-color: var(--bg-surface);
  }
  .activity-feed--connected {
    gap: 0;
  }
  .activity-feed--connected .activity-feed__item {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 3);
    padding-inline: 0;
    padding-block: 0;
    border-bottom: 0;
    background-color: transparent;
    transition: none;
  }
  .activity-feed--connected .activity-feed__item:hover {
    background-color: transparent;
  }
  .activity-feed--connected .activity-feed__avatar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
  }
  .activity-feed--connected .activity-feed__content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .activity-feed--connected .activity-feed__item:not(:last-child) .activity-feed__content {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .activity-feed--connected .activity-feed__action {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-activity-feed-action, var(--text-tertiary));
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .activity-feed__connector {
    margin-block: var(--spacing);
    width: 100%;
    flex-grow: 1;
    min-height: 0.5rem;
    background-image: radial-gradient(circle at center, var(--border-activity-feed-connector, var(--border-primary)) 1.2px, transparent 1.35px);
    background-position: center top;
    background-size: 2.4px 6px;
    background-repeat: repeat-y;
  }
  .activity-feed__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .activity-feed__header-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .activity-feed__user {
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    color: var(--text-activity-feed-user, var(--text-secondary));
  }
  .activity-feed__user:hover {
    text-decoration: underline;
  }
  .activity-feed__user:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .activity-feed__time {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-activity-feed-meta, var(--text-tertiary));
  }
  .activity-feed__username {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-activity-feed-meta, var(--text-tertiary));
  }
  .activity-feed__unseen {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: var(--radius-full);
    width: 10px;
    height: 10px;
    background-color: var(--text-activity-feed-unseen, var(--text-success));
  }
  .activity-feed__comment {
    display: block;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-activity-feed-comment, var(--text-tertiary));
  }
  .activity-feed__labels {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: var(--spacing);
  }
  .activity-feed__file {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .activity-feed__file-icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    background-color: var(--bg-tertiary-subtle);
    color: var(--text-tertiary);
  }
  .activity-feed__file-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
  }
  .activity-feed__file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .activity-feed__file-size {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .activity-feed__message {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    border-top-left-radius: 0;
    color: var(--text-secondary);
    background-color: var(--bg-activity-feed-message, transparent);
    box-shadow: inset 0 0 0 1px var(--border-activity-feed-message, var(--border-secondary));
  }
  .activity-feed--connected.activity-feed--sm .activity-feed__item:not(:last-child) .activity-feed__content {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .activity-feed--connected.activity-feed--sm .activity-feed__content {
    gap: calc(var(--spacing) * 2);
  }
}
@layer utilities {
  .notification-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .notification-list__group {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--border-primary-subtle);
  }
  .notification-list--cards {
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
  }
  .notification-list--cards > .notification {
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-card), var(--shadow-card);
  }
  .notification-list--cards > .notification:hover {
    background-color: var(--bg-card-hover);
  }
  .notification-list--flush > .notification {
    border-bottom: 1px solid var(--border-primary-subtle);
  }
  .notification-list--flush > .notification:last-child {
    border-bottom: 0;
  }
  .notification {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-panel);
    color: var(--text-primary);
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease), opacity 180ms ease, transform 180ms ease;
  }
  .notification:hover {
    background-color: var(--bg-primary-hover);
  }
  .notification:focus-within {
    outline: 2px solid var(--border-button-focus);
    outline-offset: -2px;
  }
  .notification__media {
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 0;
  }
  .notification__media .notification__icon {
    width: 2.375rem;
    height: 2.375rem;
  }
  .notification__media-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 10px;
    width: 18px;
    height: 18px;
    right: -2px;
    bottom: -2px;
    background-color: var(--bg-info-solid);
    color: var(--alpha-white-100);
    border: 2px solid var(--bg-panel);
  }
  .notification__media-badge--success {
    background-color: var(--bg-success-solid);
  }
  .notification__media-badge--warning {
    background-color: var(--bg-warning-solid);
  }
  .notification__media-badge--danger {
    background-color: var(--bg-danger-solid);
  }
  .notification__media-badge--info {
    background-color: var(--bg-info-solid);
  }
  .notification__icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    background-color: var(--bg-tertiary-subtle);
    color: var(--text-secondary);
  }
  .notification__icon--success {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .notification__icon--warning {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .notification__icon--danger {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .notification__icon--info {
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .notification__icon--primary {
    background-color: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
  }
  .notification__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing);
  }
  .notification__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .notification__title {
    min-width: 0;
    flex: 1;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
  .notification__title strong, .notification__title b, .notification__actor {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .notification__target {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-link);
  }
  .notification__target:hover {
    text-decoration: underline;
  }
  .notification__meta {
    margin-top: calc(var(--spacing) * 0.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .notification__meta i {
    opacity: 70%;
  }
  .notification__menu {
    margin-top: calc(var(--spacing) * -1);
    margin-right: calc(var(--spacing) * -1);
    flex-shrink: 0;
  }
  .notification__menu .btn-icon-sm {
    color: var(--text-tertiary);
  }
  .notification__body {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
  .notification.is-expanded .notification__title, .notification.is-expanded .notification__body, .notification--no-clamp .notification__title, .notification--no-clamp .notification__body {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .notification__preview {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 2);
    overflow: hidden;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--bg-card-alt);
    border-color: var(--border-primary-subtle);
    min-height: 64px;
  }
  .notification__preview-image {
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    width: 72px;
    background-color: var(--bg-tertiary-subtle);
  }
  .notification__preview-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .notification__preview-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    padding: calc(var(--spacing) * 2);
  }
  .notification__preview-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .notification__preview-desc {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .notification__preview-source {
    margin-top: auto;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-quaternary);
  }
  .notification__image {
    margin-top: var(--spacing);
    overflow: hidden;
    border-radius: var(--radius-md);
    background-size: cover;
    background-position: center;
    background-color: var(--bg-tertiary-subtle);
    aspect-ratio: 16 / 9;
    max-height: 200px;
  }
  .notification__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .notification__attachments {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .notification__attachment {
    display: inline-flex;
    max-width: 200px;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    background-color: var(--bg-tertiary-subtle);
    border-color: var(--border-primary-subtle);
    color: var(--text-secondary);
  }
  .notification__attachment > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .notification__attachment i {
    flex-shrink: 0;
    color: var(--text-tertiary);
  }
  .notification__actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .notification__action-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-button-secondary);
    border-color: var(--border-button-secondary);
    color: var(--text-button-secondary);
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  }
  .notification__action-btn:hover {
    background-color: var(--bg-button-secondary-hover);
  }
  .notification__action-btn--primary {
    background-color: var(--bg-button-primary);
    border-color: var(--bg-button-primary);
    color: var(--text-button-primary);
  }
  .notification__action-btn--primary:hover {
    background-color: var(--bg-button-primary-hover);
  }
  .notification__action-btn--ghost {
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: var(--text-tertiary);
  }
  .notification__action-btn--ghost:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .notification__action-btn.is-loading {
    opacity: 0.7;
    cursor: progress;
    pointer-events: none;
  }
  .notification__action-btn.is-loading::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: notification-spin 0.7s linear infinite;
  }
  @keyframes notification-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .notification__indicator {
    position: absolute;
    border-radius: var(--radius-full);
    width: 8px;
    height: 8px;
    left: 6px;
    top: calc(50% - 4px);
    background-color: var(--bg-info-solid);
    display: none;
  }
  .notification.is-unread .notification__indicator {
    display: block;
  }
  .notification.is-unread {
    background-color: var(--bg-info-subtle);
  }
  .notification.is-unread .notification__title {
    color: var(--text-primary);
    font-weight: 500;
  }
  .notification.is-unread:hover {
    background-color: var(--bg-info-subtle);
    filter: brightness(0.98);
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .notification.is-unread:hover {
    filter: brightness(1.05);
  }
  .notification.is-important {
    border-left: 3px solid var(--bg-danger-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    padding-left: calc(0.75rem - 3px);
  }
  .notification.is-important .notification__title {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .notification.is-archived {
    opacity: 0.7;
  }
  .notification.is-archived .notification__title {
    color: var(--text-secondary);
  }
  .notification.is-dismissing {
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
  }
  .notification--success {
    border-left: 3px solid var(--bg-success-solid);
    padding-left: calc(0.75rem - 3px);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .notification--warning {
    border-left: 3px solid var(--bg-warning-solid);
    padding-left: calc(0.75rem - 3px);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .notification--danger {
    border-left: 3px solid var(--bg-danger-solid);
    padding-left: calc(0.75rem - 3px);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .notification--info {
    border-left: 3px solid var(--bg-info-solid);
    padding-left: calc(0.75rem - 3px);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .notification--primary {
    border-left: 3px solid var(--bg-primary-solid);
    padding-left: calc(0.75rem - 3px);
  }
  .notification--card {
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-card), var(--shadow-card);
  }
  .notification--card:hover {
    background-color: var(--bg-card-hover);
  }
  .notification--compact {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
  }
  .notification--compact .notification__media .notification__icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .notification--compact .notification__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    -webkit-line-clamp: 2;
  }
  .notification--compact .notification__body {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    -webkit-line-clamp: 2;
  }
  .notification--inline {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .notification--inline .notification__media .notification__icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .notification--inline .notification__main {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .notification--inline .notification__title {
    -webkit-line-clamp: 1;
  }
  .notification--inline .notification__meta {
    margin-top: 0;
    margin-left: auto;
  }
  .notification--inline .notification__body, .notification--inline .notification__preview, .notification--inline .notification__attachments, .notification--inline .notification__actions, .notification--inline .notification__image {
    display: none;
  }
  .notification-sm {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .notification-sm .notification__media .notification__icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .notification-sm .notification__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .notification-sm .notification__body {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .notification-lg {
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .notification-lg .notification__media .notification__icon {
    width: 2.875rem;
    height: 2.875rem;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .notification-lg .notification__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .notification-lg .notification__body {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .notification--grouped .notification__media {
    line-height: 0;
  }
  .notification--grouped .avatar-group-stack, .notification--grouped .avatar-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
  }
  @keyframes notification-appear {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .notification.is-new {
    animation: notification-appear 240ms ease both;
  }
  .notification-new-indicator {
    position: absolute;
    top: calc(var(--spacing) * 2);
    left: calc(1 / 2 * 100%);
    z-index: 10;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transform: translate(-50%, 0);
    background-color: var(--text-info);
    color: var(--alpha-white-100);
    box-shadow: var(--shadow-card);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    border: 0;
  }
  .notification-new-indicator.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .notification-load-more {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    background-color: transparent;
    border: 0;
    border-top: 1px solid var(--border-primary-subtle);
    transition: background-color 100ms ease, color 100ms ease;
  }
  .notification-load-more:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .notification-load-more.is-loading {
    cursor: progress;
  }
  .notification-load-more.is-loading::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: notification-spin 0.7s linear infinite;
  }
  .notification--skeleton .notification__media {
    background: var(--bg-skeleton);
  }
  .notification--skeleton .notification__main {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .notification--toast {
    --notification-toast-width: 400px;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-panel);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  .notification--toast:hover {
    background-color: var(--bg-panel);
  }
  .notification--toast:focus-within {
    outline: none;
  }
  .notification--toast:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  @media (min-width: 480px) {
    .notification--toast {
      flex-direction: row;
      width: var(--notification-toast-width);
    }
  }
  .notification--toast .notification__main {
    gap: 0.75rem;
    padding-right: 1.75rem;
  }
  .notification__text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing);
  }
  .notification--toast .notification__title {
    flex: none;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    display: block;
    color: var(--text-primary);
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .notification--toast .notification__body {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    display: block;
    color: var(--text-secondary);
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .notification__byline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .notification__date {
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .notification--toast .notification__actions {
    gap: 0.75rem;
    margin-top: 0;
  }
  .notification__link {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: opacity var(--duration-fast, 120ms) var(--ease-in-out, ease);
  }
  .notification__link:hover {
    opacity: 0.85;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .notification__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .notification__link--muted {
    color: var(--text-tertiary);
  }
  .notification__link--muted:hover {
    color: var(--text-secondary);
  }
  .notification__close {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg);
    background: transparent;
    border: 0;
    color: var(--text-quaternary);
    transition: background-color var(--duration-fast, 120ms) var(--ease-in-out, ease), color var(--duration-fast, 120ms) var(--ease-in-out, ease);
  }
  .notification__close:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .notification__close:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .notification__close > i, .notification__close > svg, .notification__close > [class*="fa-"] {
    font-size: 1.125rem;
    line-height: 1;
  }
  .notification__progress {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .notification__progress .track {
    width: 100%;
  }
  .notification__progress-label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .notification--toast-image {
    --notification-toast-width: 496px;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }
  .notification__figure {
    flex: none;
    overflow: hidden;
    background-color: var(--bg-tertiary-subtle);
    width: 100%;
    height: 10rem;
    order: 2;
  }
  .notification__figure img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .notification--toast-image .notification__main {
    order: 1;
    padding: 1rem 1.75rem 1rem 1rem;
  }
  @media (min-width: 480px) {
    .notification--toast-image .notification__figure {
      width: 10rem;
      height: auto;
      align-self: stretch;
      order: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .notification, .notification.is-new, .notification.is-dismissing, .notification__action-btn.is-loading::before, .notification-load-more.is-loading::before, .notification-new-indicator, .notification__link, .notification__close {
      animation: none !important;
      transition: none !important;
    }
  }
}
@layer utilities {
  .empty-state {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
  }
  .empty-state > * {
    position: relative;
    z-index: 10;
  }
  .empty-state__media {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .empty-state__icon {
    position: relative;
    z-index: 10;
    display: inline-flex;
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
    flex: none;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    border-radius: var(--radius-lg);
    background-color: var(--bg-empty-state-icon, var(--bg-primary));
    color: var(--text-empty-state-icon, var(--text-secondary));
    box-shadow: inset 0 0 0 1px var(--border-empty-state-icon, var(--border-primary)), var(--shadow-xs);
  }
  .empty-state__icon > i, .empty-state__icon > [class*="fa-"], .empty-state__icon > svg {
    color: inherit;
    fill: currentColor;
  }
  .empty-state__title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-empty-state-title, var(--text-primary));
  }
  .empty-state__description {
    max-width: var(--container-sm);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-empty-state-description, var(--text-tertiary));
  }
  .empty-state__actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
  }
  .empty-state__pattern {
    pointer-events: none;
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    z-index: 0;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    width: 20rem;
    height: 20rem;
    color: var(--border-empty-state-pattern, var(--border-secondary));
    -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
  }
  .empty-state__pattern, .empty-state__pattern--circle {
    background-image: repeating-radial-gradient( circle at center, currentColor 0 1px, transparent 1px 32px );
  }
  .empty-state__pattern--grid {
    background-image: repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 32px), repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 32px);
  }
  .empty-state__pattern--grid-check {
    background-image: radial-gradient(currentColor 1px, transparent 1.5px);
    background-size: 24px 24px;
  }
  .empty-state--compact {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
  }
  .empty-state--compact .empty-state__icon {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .empty-state--compact .empty-state__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .empty-state--compact .empty-state__description {
    max-width: var(--container-xs);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .empty-state--lg {
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 16);
  }
  .empty-state--lg .empty-state__icon {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    border-radius: var(--radius-xl);
  }
  .empty-state--lg .empty-state__title {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .empty-state--lg .empty-state__description {
    max-width: var(--container-md);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .empty-state--start {
    align-items: flex-start;
    text-align: left;
  }
  .empty-state--start .empty-state__actions {
    justify-content: flex-start;
  }
  .empty-state--start .empty-state__description {
    text-align: left;
  }
  .empty-state--inline {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    text-align: left;
  }
  .empty-state--inline .empty-state__icon {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    flex: none;
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .empty-state--inline .empty-state__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .empty-state--inline .empty-state__description {
    max-width: none;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .empty-state--inline .empty-state__actions {
    margin-top: 0;
    margin-left: auto;
  }
  .empty-state--centered {
    justify-content: center;
    min-height: 100%;
    height: 100%;
  }
  .empty-state--icon-only {
    gap: 0;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
  }
  .empty-state--icon-only .empty-state__title, .empty-state--icon-only .empty-state__description {
    display: none;
  }
  .empty-state--bordered {
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-empty-state, var(--border-default));
  }
  .empty-state--illustration .empty-state__icon {
    width: calc(var(--spacing) * 32);
    height: calc(var(--spacing) * 32);
    font-size: 2.75rem;
    line-height: var(--tw-leading, 3rem);
    letter-spacing: var(--tw-tracking, -0.022em);
    border-radius: var(--radius-2xl, 1rem);
    background-color: transparent;
    background-image: linear-gradient(135deg, var(--bg-empty-state-illustration-from, var(--bg-info-subtle)), var(--bg-empty-state-illustration-to, var(--bg-success-subtle)));
    color: var(--text-empty-state-illustration, var(--text-primary));
    box-shadow: none;
  }
  .empty-state--illustration.empty-state--lg .empty-state__icon {
    width: calc(var(--spacing) * 40);
    height: calc(var(--spacing) * 40);
    font-size: 3.5rem;
    line-height: var(--tw-leading, 3.75rem);
    letter-spacing: var(--tw-tracking, -0.025em);
  }
  .empty-state--soft .empty-state__icon {
    background-color: transparent;
    color: var(--text-tertiary);
    box-shadow: none;
  }
  .empty-state--neutral .empty-state__icon {
    background-color: var(--bg-empty-state-icon, var(--bg-primary));
    color: var(--text-empty-state-icon, var(--text-secondary));
    box-shadow: inset 0 0 0 1px var(--border-empty-state-icon, var(--border-primary)), var(--shadow-xs);
  }
  .empty-state--error .empty-state__icon {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
    box-shadow: none;
  }
  .empty-state--error .empty-state__title {
    color: var(--text-danger);
  }
  .empty-state--success .empty-state__icon {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
    box-shadow: none;
  }
  .empty-state--warning .empty-state__icon {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
    box-shadow: none;
  }
  .empty-state--info .empty-state__icon {
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
    box-shadow: none;
  }
  .empty-state--skeleton .empty-state__icon {
    color: transparent;
    box-shadow: none;
    background-color: var(--bg-empty-state-skeleton, var(--bg-tertiary));
    background-image: linear-gradient( 90deg, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 0%, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 50%, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 90deg, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 0%, color-mix(in oklch, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 60%, var(--bg-primary)) 50%, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 100% );
    }
    background-size: 200% 100%;
    animation: empty-state-shimmer 1.4s ease-in-out infinite;
  }
  .empty-state--skeleton .empty-state__title, .empty-state--skeleton .empty-state__description {
    display: inline-block;
    color: transparent;
    border-radius: 4px;
    background-color: var(--bg-empty-state-skeleton, var(--bg-tertiary));
    background-image: linear-gradient( 90deg, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 0%, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 50%, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 90deg, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 0%, color-mix(in oklch, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 60%, var(--bg-primary)) 50%, var(--bg-empty-state-skeleton, var(--bg-tertiary)) 100% );
    }
    background-size: 200% 100%;
    animation: empty-state-shimmer 1.4s ease-in-out infinite;
  }
  .empty-state--skeleton .empty-state__title {
    width: 200px;
    height: 16px;
  }
  .empty-state--skeleton .empty-state__description {
    width: 280px;
    height: 12px;
  }
  @keyframes empty-state-shimmer {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .empty-state--skeleton .empty-state__icon, .empty-state--skeleton .empty-state__title, .empty-state--skeleton .empty-state__description {
      animation: none;
    }
  }
  .empty-state.is-entering {
    animation: empty-state-enter 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  @keyframes empty-state-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .empty-state.is-entering {
      animation: none;
    }
  }
  .empty-state__actions--inline {
    margin-top: 0;
  }
}
@layer utilities {
  .illustration {
    --illustration-h: 8.25rem;
    --illustration-badge: 3rem;
    --illustration-ar: 182 / 137;
    --illustration-halo: var(--bg-secondary-subtle);
    --illustration-surface: var(--bg-card);
    --illustration-shade: var(--bg-secondary);
    --illustration-deep: var(--bg-tertiary);
    --illustration-edge: var(--border-secondary-alt);
    --illustration-badge-bg: var(--alpha-black-20);
    --illustration-badge-fg: var(--text-on-solid);
    --illustration-shadow-1: rgba(10, 13, 18, 0.04);
    --illustration-shadow-2: rgba(10, 13, 18, 0.08);
    position: relative;
    display: inline-flex;
    height: var(--illustration-h);
    aspect-ratio: var(--illustration-ar);
    flex: none;
    color: var(--illustration-edge);
  }
  .illustration__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .illustration__halo {
    fill: var(--illustration-halo);
    stroke: none;
  }
  .illustration__surface {
    fill: var(--illustration-surface);
    stroke: var(--illustration-edge);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
  }
  .illustration__shade {
    fill: var(--illustration-shade);
    stroke: none;
  }
  .illustration__deep {
    fill: var(--illustration-deep);
    stroke: none;
  }
  .illustration__line {
    fill: none;
    stroke: var(--illustration-edge);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
  }
  .illustration__object {
    filter: drop-shadow(0 2px 2px var(--illustration-shadow-1)) drop-shadow(0 8px 10px var(--illustration-shadow-2));
  }
  .illustration__badge {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--illustration-badge);
    height: var(--illustration-badge);
    border-radius: 9999px;
    background-color: var(--illustration-badge-bg);
    color: var(--illustration-badge-fg);
    font-size: calc(var(--illustration-badge) * 0.42);
    line-height: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1;
    pointer-events: none;
  }
  .illustration__badge > i, .illustration__badge > svg {
    font-size: inherit;
  }
  .illustration--cloud {
    --illustration-ar: 182 / 137;
  }
  .illustration--box {
    --illustration-ar: 172 / 148;
  }
  .illustration--documents {
    --illustration-ar: 185 / 137;
  }
  .illustration--credit-card {
    --illustration-ar: 180 / 143;
  }
  .illustration--not-found {
    --illustration-ar: 514 / 164;
  }
  .illustration--xs {
    --illustration-h: 5.5rem;
    --illustration-badge: 2rem;
  }
  .illustration--sm {
    --illustration-h: 7rem;
    --illustration-badge: 2.5rem;
  }
  .illustration--md {
    --illustration-h: 8.25rem;
    --illustration-badge: 3rem;
  }
  .illustration--lg {
    --illustration-h: 10rem;
    --illustration-badge: 3.5rem;
  }
  .illustration--xl {
    --illustration-h: 12.5rem;
    --illustration-badge: 4rem;
  }
  .illustration--brand {
    --illustration-halo: oklch(78.0% 0.157 84);
    @supports (color: color-mix(in lab, red, red)) {
      --illustration-halo: color-mix(in oklch, var(--color-brand-600) 12%, var(--bg-secondary-subtle));
    }
    --illustration-badge-bg: var(--bg-brand-solid, var(--color-brand-600));
    --illustration-badge-fg: var(--text-on-brand, var(--text-on-solid));
  }
  .illustration--info {
    --illustration-badge-bg: var(--bg-info);
    --illustration-badge-fg: var(--text-on-solid);
  }
  .illustration--success {
    --illustration-badge-bg: var(--bg-success);
    --illustration-badge-fg: var(--text-on-solid);
  }
  .illustration--warning {
    --illustration-badge-bg: var(--bg-warning);
    --illustration-badge-fg: var(--text-on-solid);
  }
  .illustration--error {
    --illustration-badge-bg: var(--bg-danger);
    --illustration-badge-fg: var(--text-on-solid);
  }
  [data-theme="theme-dark"] .illustration, [data-theme="theme-mica-dark"] .illustration {
    --illustration-badge-bg: var(--alpha-white-20);
    --illustration-shadow-1: rgba(0, 0, 0, 0.20);
    --illustration-shadow-2: rgba(0, 0, 0, 0.32);
  }
  .illustration.is-entering {
    animation: illustration-enter var(--duration-slow, 320ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
  }
  .illustration--float .illustration__object {
    animation: illustration-float 4s var(--ease-in-out, ease-in-out) infinite;
  }
  @keyframes illustration-enter {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes illustration-float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-4px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .illustration.is-entering, .illustration--float .illustration__object {
      animation: none;
    }
  }
}
@layer utilities {
  .bol-doc {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-doc, var(--bg-modal));
    border: 1px solid var(--border-doc, var(--border-primary));
    border-radius: var(--radius-doc, var(--radius-md));
    overflow: hidden;
    font-size: var(--text-doc-size, var(--text-sm));
    color: var(--text-doc, var(--text-primary));
    line-height: var(--leading-doc, 1.35);
  }
  .bol-doc--compact {
    --padding-doc-cell: calc(var(--spacing) * 1.5);
    --padding-doc-title-y: calc(var(--spacing) * 1.5);
    --padding-doc-cell-tight-y: var(--spacing);
    --leading-doc: 1.3;
  }
  .bol-doc__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding: var(--padding-doc-title-y, calc(var(--spacing) * 2)) var(--padding-doc-title-x, calc(var(--spacing) * 3));
    background-color: var(--bg-doc-title, var(--bg-doc-table-head, var(--bg-table-header)));
    border-bottom: 1px solid var(--border-doc, var(--border-primary));
  }
  .bol-doc__title-text {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-doc-title, var(--text-primary));
  }
  .bol-doc__title-meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: row;
    gap: calc(var(--spacing) * 4);
    color: var(--text-doc-meta, var(--text-secondary));
  }
  .bol-doc__row {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--border-doc, var(--border-primary));
  }
  .bol-doc__row:last-child {
    border-bottom: 0;
  }
  .bol-doc__row--two {
    grid-template-columns: 1fr 1fr;
  }
  .bol-doc__row--three {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .bol-doc__row--four {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .bol-doc__cell {
    padding: var(--padding-doc-cell, calc(var(--spacing) * 2));
    border-right: 1px solid var(--border-doc, var(--border-primary));
    min-width: 0;
  }
  .bol-doc__cell:last-child {
    border-right: 0;
  }
  .bol-doc__cell-label {
    margin-bottom: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-doc-label, var(--text-tertiary));
  }
  .bol-doc__cell-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-doc-name, var(--text-primary));
  }
  .bol-doc__cell-meta {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-doc-meta, var(--text-secondary));
  }
  .bol-doc__cell-text {
    white-space: pre-wrap;
    min-height: 1.5em;
  }
  .bol-doc__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-doc-label, var(--text-tertiary));
  }
  .bol-doc__hu-wrap {
    margin-top: calc(var(--spacing) * 1.5);
    margin-left: calc(-1 * var(--padding-doc-cell, calc(var(--spacing) * 2)));
    margin-right: calc(-1 * var(--padding-doc-cell, calc(var(--spacing) * 2)));
    margin-bottom: calc(-1 * var(--padding-doc-cell, calc(var(--spacing) * 2)));
    border-top: 1px solid var(--border-doc, var(--border-primary));
    overflow-x: auto;
  }
  .bol-doc__hu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-doc-table-size, var(--text-sm));
  }
  .bol-doc__hu-table th, .bol-doc__hu-table td {
    padding: var(--padding-doc-cell-tight-y, 0.375rem) var(--padding-doc-cell-tight-x, calc(var(--spacing) * 2));
    border-right: 1px solid var(--border-doc-row, var(--border-primary-subtle));
    border-bottom: 1px solid var(--border-doc-row, var(--border-primary-subtle));
    vertical-align: top;
  }
  .bol-doc__hu-table th {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background-color: var(--bg-doc-table-head, var(--bg-table-header));
    color: var(--text-doc-label, var(--text-table-header));
    text-align: left;
  }
  .bol-doc__hu-table th:last-child, .bol-doc__hu-table td:last-child {
    border-right: 0;
  }
  .bol-doc__hu-table tfoot td {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--bg-doc-table-foot, var(--bg-doc-table-head, var(--bg-table-header)));
    color: var(--text-doc-label, var(--text-table-header));
    border-bottom: 0;
  }
  .bol-doc__hu-empty td {
    text-align: center;
    font-style: italic;
    color: var(--text-doc-empty, var(--text-tertiary));
    padding: var(--padding-doc-cell, calc(var(--spacing) * 2));
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .bol-doc__note {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    font-style: italic;
    color: var(--text-doc-meta, var(--text-secondary));
  }
  .bol-doc__cell--signature {
    min-height: 5rem;
  }
  .bol-doc__sig-line {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-doc-signature, var(--border-primary));
    height: 2rem;
  }
  @media print {
    .bol-doc {
      border: 1px solid var(--utility-neutral-900, #111);
      box-shadow: none;
    }
  }
}
@layer utilities {
  .object-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
  }
  .object-header__figure {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    width: 48px;
    height: 48px;
    background-color: var(--bg-object-header-figure, var(--bg-tertiary));
    color: var(--text-object-header-figure, var(--text-quaternary));
  }
  .object-header__figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .object-header__figure i {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    opacity: 0.5;
  }
  .object-header__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .object-header__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .object-header__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    row-gap: var(--spacing);
  }
  .object-header__meta > * {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-secondary);
  }
  .object-header__meta > .object-header__separator {
    height: var(--spacing);
    width: var(--spacing);
    border-radius: var(--radius-full);
    background-color: var(--text-quaternary);
  }
  .object-header__description {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .object-header__actions {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: var(--spacing);
  }
  .object-header__figure--sm {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
  }
  .object-header__figure--sm i {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .object-header__figure--lg {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
  }
  .object-header__figure--lg i {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
  }
  .object-header__figure--xl {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-xl);
  }
  .object-header__figure--xl i {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
  }
  .object-header--compact {
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3);
  }
  .object-header--compact .object-header__figure {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
  }
  .object-header--compact .object-header__figure i {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .object-header--compact .object-header__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .object-header--compact .object-header__meta > * {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .object-header--stacked {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    text-align: center;
  }
  .object-header--stacked .object-header__body {
    align-items: center;
  }
  .object-header--stacked .object-header__meta {
    justify-content: center;
  }
  .object-header--stacked .object-header__actions {
    margin-left: 0;
  }
  .object-header--bordered {
    border-bottom: 1px solid var(--border-divider, var(--border-primary));
  }
  .object-header--flush {
    padding: 0;
  }
  .object-header--clickable {
    cursor: pointer;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .object-header--clickable:hover {
    background-color: var(--bg-hover);
  }
  .object-header__status {
    position: absolute;
    right: calc(var(--spacing) * -0.5);
    bottom: calc(var(--spacing) * -0.5);
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--bg-surface, #fff);
  }
  .object-header__figure {
    position: relative;
  }
  .object-header--cover {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0;
    min-height: 188px;
  }
  .object-header--cover .object-header__banner {
    position: absolute;
    inset: 0;
    background-color: var(--bg-tertiary);
    background-image: var(--oh-banner, none);
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  .object-header--cover .object-header__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--alpha-neutral-950-80), transparent 62%), linear-gradient(to bottom, var(--alpha-neutral-950-40), transparent 45%);
  }
  .object-header--cover.is-fallback .object-header__banner {
    background-image: radial-gradient(circle at 1px 1px, var(--alpha-white-20) 1px, transparent 0), linear-gradient(135deg, var(--oh-brand, var(--bg-primary-subtle)), var(--oh-brand, var(--text-info)));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(circle at 1px 1px, var(--alpha-white-20) 1px, transparent 0), linear-gradient(135deg, var(--oh-brand, var(--bg-primary-subtle)), color-mix(in srgb, var(--oh-brand, var(--text-info)) 55%, var(--bg-tertiary)));
    }
    background-size: 14px 14px, cover;
  }
  .object-header--cover .object-header__actions {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    padding: calc(var(--spacing) * 3);
  }
  .object-header--cover .object-header__overlay {
    position: relative;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
  }
  .object-header--cover .object-header__figure {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    width: 64px;
    height: 64px;
    background-color: var(--bg-surface);
    border: 2px solid var(--alpha-white-30);
    box-shadow: var(--shadow-md);
  }
  .object-header--cover .object-header__figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .object-header--cover .object-header__figure i {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    color: var(--alpha-white-90);
    opacity: 1;
  }
  .object-header--cover.is-logo-fallback .object-header__figure {
    background-image: linear-gradient(135deg, var(--oh-brand, var(--text-info)), var(--oh-brand, var(--text-info)));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(135deg, color-mix(in srgb, var(--oh-brand, var(--text-info)) 35%, var(--bg-surface)), color-mix(in srgb, var(--oh-brand, var(--text-info)) 65%, var(--bg-surface)));
    }
  }
  .object-header--cover .object-header__body {
    min-width: 0;
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .object-header--cover .object-header__title {
    color: var(--alpha-white-100);
  }
  .object-header--cover .object-header__subtitle {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--alpha-white-80);
  }
  .object-header--cover .object-header__description {
    color: var(--alpha-white-70);
  }
  .object-header--loading .object-header__figure {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .object-header--loading .object-header__title, .object-header--loading .object-header__subtitle {
    visibility: hidden;
    position: relative;
  }
  .object-header--loading .object-header__title::after, .object-header--loading .object-header__subtitle::after {
    content: "";
    visibility: visible;
    position: absolute;
    inset-block: 0;
    left: 0;
    border-radius: var(--radius-sm);
    width: 60%;
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .object-header--loading .object-header__subtitle::after {
    width: 40%;
  }
}
@layer utilities {
  .detail-section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .detail-section + .detail-section {
    margin-top: calc(var(--spacing) * 6);
  }
  .detail-section__header {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .detail-section__title {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-detail-section-title, var(--text-primary));
  }
  .detail-section__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  .detail-section__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .detail-section--divider + .detail-section--divider {
    padding-top: calc(var(--spacing) * 6);
    border-top: 1px solid var(--border-detail-section, var(--border-primary-subtle));
  }
  .detail-section--bordered {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--border-detail-section, var(--border-primary-subtle));
  }
  .detail-section--bordered .detail-section__header {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .detail-section--card {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-detail-section-card, var(--bg-surface));
    border: 1px solid var(--border-detail-section, var(--border-primary-subtle));
    box-shadow: var(--shadow-xs);
  }
  .detail-section--card .detail-section__header {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .detail-section--collapsible > .detail-section__header {
    margin-inline: calc(var(--spacing) * -1);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * 2);
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 150ms ease;
  }
  .detail-section--collapsible > .detail-section__header:hover {
    background-color: var(--bg-primary-subtle);
  }
  .detail-section--collapsible > .detail-section__header::before {
    content: '\f054';
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
    font-weight: 300;
    margin-right: calc(var(--spacing) * 2);
    flex: none;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
    transition: transform 160ms ease;
  }
  .detail-section--collapsible.is-open > .detail-section__header::before {
    transform: rotate(90deg);
  }
  .detail-section--collapsible > .detail-section__body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 200ms ease, opacity 150ms ease 50ms;
  }
  .detail-section--collapsible.is-open > .detail-section__body {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 300ms ease, opacity 150ms ease;
  }
  .detail-section--flush .detail-section__body {
    margin-inline: calc(var(--spacing) * -4);
  }
  .detail-section--compact {
    gap: 0;
  }
  .detail-section--compact + .detail-section--compact {
    margin-top: calc(var(--spacing) * 4);
  }
  .detail-section--compact .detail-section__header {
    margin-bottom: var(--spacing);
  }
  .detail-section--compact .detail-section__title {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .detail-section--success {
    border-left: 3px solid var(--bg-success-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    padding-left: calc(var(--spacing) * 4);
  }
  .detail-section--warning {
    border-left: 3px solid var(--bg-warning-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    padding-left: calc(var(--spacing) * 4);
  }
  .detail-section--danger {
    border-left: 3px solid var(--bg-danger-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    padding-left: calc(var(--spacing) * 4);
  }
  .detail-section--info {
    border-left: 3px solid var(--bg-info-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    padding-left: calc(var(--spacing) * 4);
  }
  .detail-section--loading .detail-section__body {
    position: relative;
    min-height: 60px;
  }
  .detail-section--loading .detail-section__body::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .detail-section__edit-btn {
    margin-left: auto;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    color: var(--text-link);
  }
  .detail-section:hover .detail-section__edit-btn {
    opacity: 1;
  }
  .detail-section.is-editing {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-input-active);
  }
}
@layer utilities {
  .bulk-action-bar {
    position: fixed;
    bottom: calc(var(--spacing) * 4);
    left: calc(1 / 2 * 100%);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    transform: translate(-50%, calc(100% + 1rem));
    opacity: 0;
    pointer-events: none;
    background-color: var(--bg-bulk-action-bar, var(--bg-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-bulk-action-bar, color-mix(in oklch, var(--bg-primary) 95%, transparent));
    }
    color: var(--text-bulk-action-bar, var(--text-primary));
    box-shadow: inset 0 0 0 1px var(--border-bulk-action-bar, var(--border-divider)), var(--shadow-bulk-action-bar);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    transition: transform var(--duration-normal, 220ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1)), opacity var(--duration-normal, 220ms) var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
    will-change: transform, opacity;
    white-space: nowrap;
  }
  .bulk-action-bar.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
  .bulk-action-bar--top {
    bottom: auto;
    top: 1rem;
    transform: translate(-50%, calc(-100% - 1rem));
  }
  .bulk-action-bar--top.is-visible {
    transform: translate(-50%, 0);
  }
  .bulk-action-bar--inline {
    position: absolute;
    bottom: 12px;
    left: 50%;
  }
  .bulk-action-bar--compact {
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .bulk-action-bar--compact .bulk-action-bar__count {
    font-size: 12px;
  }
  .bulk-action-bar__count {
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-bulk-action-bar, var(--text-primary));
  }
  .bulk-action-bar__count-num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .bulk-action-bar__count-label {
    color: var(--text-tertiary);
    font-weight: 400;
    font-size: 12px;
  }
  .bulk-action-bar__select-all[hidden] {
    display: none;
  }
  .bulk-action-bar__select-all {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    white-space: nowrap;
    background-color: transparent;
    border: 1px dashed var(--border-divider);
    color: var(--text-info, var(--text-primary));
    font-weight: 500;
    transition: background-color 100ms ease, border-color 100ms ease;
  }
  .bulk-action-bar__select-all:hover {
    background-color: var(--bg-info-subtle);
    border-color: var(--text-info);
  }
  .bulk-action-bar__select-all.is-engaged {
    background-color: var(--bg-info-subtle);
    border-color: var(--text-info);
    border-style: solid;
  }
  .bulk-action-bar__select-all:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .bulk-action-bar__select-all i {
    font-size: 10px;
    opacity: 0.8;
  }
  .bulk-action-bar__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .bulk-action-bar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .bulk-action-bar__actions .btn, .bulk-action-bar__actions :is(.btn-primary, .btn-secondary, .btn-ghost, .btn-soft, .btn-danger) {
    min-height: 28px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }
  .bulk-action-bar__actions .btn-icon, .bulk-action-bar__actions :is(.btn-primary, .btn-secondary, .btn-ghost, .btn-soft, .btn-danger).btn-icon {
    min-width: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
  }
  .bulk-action-bar__divider {
    width: 1px;
    align-self: stretch;
    background-color: var(--border-bulk-action-bar, var(--border-divider));
    opacity: 0.5;
    margin: 4px 2px;
  }
  .bulk-action-bar__hint {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    padding-inline: var(--spacing);
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    color: var(--text-tertiary);
  }
  .bulk-action-bar__hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    color: var(--text-tertiary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-divider);
    border-radius: 4px;
  }
  .bulk-action-bar__dismiss {
    display: inline-flex;
    flex: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: var(--text-bulk-action-bar, var(--text-tertiary));
    background: transparent;
    border: none;
    font-size: 11px;
    opacity: 0.7;
    transition: opacity var(--duration-fast, 100ms) ease, background-color var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease;
  }
  .bulk-action-bar__dismiss:hover {
    opacity: 1;
    background-color: var(--bg-primary-subtle);
    color: var(--text-primary);
  }
  .bulk-action-bar__dismiss:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .bulk-action-bar {
      transition: opacity var(--duration-fast, 100ms) ease;
    }
    .bulk-action-bar, .bulk-action-bar--top, .bulk-action-bar--inline {
      transform: translate(-50%, 0);
    }
    .bulk-action-bar__select-all, .bulk-action-bar__dismiss {
      transition: none;
    }
  }
}
@layer utilities {
  .msg-panel {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-msg-panel, var(--bg-surface));
  }
  .msg-panel__thread {
    flex: 1;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    padding: calc(var(--spacing) * 4);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .msg-panel__composer-area {
    flex: none;
    padding: calc(var(--spacing) * 3);
    background-color: var(--bg-msg-composer-area, var(--bg-surface));
  }
  .msg {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    max-width: 85%;
    gap: calc(var(--spacing) * 2.5);
  }
  .msg--outbound {
    margin-left: auto;
    flex-direction: row-reverse;
  }
  .msg--system {
    max-width: 100%;
    justify-content: center;
  }
  .msg__avatar {
    flex-shrink: 0;
    align-self: flex-end;
  }
  .msg__avatar img, .msg__avatar .avatar {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .msg--outbound .msg__avatar {
    display: none;
  }
  .msg__body {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .msg__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    padding-inline: var(--spacing);
  }
  .msg--outbound .msg__header {
    flex-direction: row-reverse;
  }
  .msg__sender {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-msg-sender, var(--text-primary));
  }
  .msg__time {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    white-space: nowrap;
    color: var(--text-msg-time, var(--text-tertiary));
  }
  .msg__bubble {
    position: relative;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    background-color: var(--bg-msg-inbound, var(--bg-secondary-subtle));
    color: var(--text-msg-inbound, var(--text-primary));
    border: 1px solid var(--border-msg-inbound, transparent);
    word-break: break-word;
  }
  .msg--outbound .msg__bubble {
    background-color: var(--bg-msg-outbound, var(--bg-primary-solid));
    color: var(--text-msg-outbound, var(--text-on-primary));
    border-color: var(--border-msg-outbound, transparent);
  }
  .msg--system .msg__bubble {
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-system, var(--bg-tertiary-subtle));
    color: var(--text-msg-system, var(--text-tertiary));
    border-color: var(--border-msg-system, transparent);
  }
  .msg__bubble {
    border-bottom-left-radius: var(--radius-xs, 4px);
  }
  .msg--outbound .msg__bubble {
    border-bottom-left-radius: var(--radius-xl, 12px);
    border-bottom-right-radius: var(--radius-xs, 4px);
  }
  .msg + .msg:not(.msg--outbound) .msg__header, .msg--outbound + .msg--outbound .msg__header {
    display: none;
  }
  .msg + .msg:not(.msg--outbound), .msg--outbound + .msg--outbound {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .msg + .msg:not(.msg--outbound) .msg__bubble, .msg--outbound + .msg--outbound .msg__bubble {
    border-radius: var(--radius-xl, 12px);
  }
  .msg__content {
    overflow-wrap: break-word;
    white-space: pre-line;
    color: inherit;
  }
  .msg__content img {
    margin-block: var(--spacing);
    max-width: 100%;
    cursor: pointer;
    border-radius: var(--radius-md);
  }
  .msg__content img:hover {
    opacity: 90%;
  }
  .msg__bubble:not(:has(img)) {
    max-height: 450px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .msg__content ol, .msg__content ul {
    margin-block: var(--spacing);
    padding-left: calc(var(--spacing) * 5);
    margin: 0;
    padding-left: 1.5em;
  }
  .msg__content ul {
    list-style-type: disc;
  }
  .msg__content ol {
    list-style-type: decimal;
  }
  .msg__content li {
    margin-block: calc(var(--spacing) * 0.5);
    list-style-type: revert;
  }
  .msg__content a {
    color: var(--text-info);
    text-decoration-line: underline;
  }
  .msg--outbound .msg__content a {
    color: var(--text-info);
  }
  .msg__attachments {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .msg__attachment {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-attachment, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-attachment, color-mix(in oklch, var(--text-primary) 6%, transparent));
    }
    color: var(--text-msg-attachment, var(--text-secondary));
    border: 1px solid var(--border-msg-attachment, transparent);
    transition: background-color var(--duration-fast, 100ms) ease;
  }
  .msg__attachment:hover {
    background-color: var(--bg-msg-attachment-hover, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-attachment-hover, color-mix(in oklch, var(--text-primary) 10%, transparent));
    }
  }
  .msg__attachment i {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-msg-attachment-icon, var(--text-tertiary));
  }
  .msg--outbound .msg__attachment {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 8%, transparent);
    }
    color: var(--text-msg-outbound, var(--text-secondary));
    border-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, currentColor 12%, transparent);
    }
  }
  .msg--outbound .msg__attachment:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 12%, transparent);
    }
  }
  .msg--outbound .msg__attachment i {
    color: var(--text-tertiary);
  }
  .msg__actions {
    position: absolute;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: 1px;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    padding: 2px;
    top: -10px;
    right: 4px;
    background-color: var(--bg-msg-actions);
    border-color: var(--border-msg-actions, var(--border-secondary));
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity var(--duration-fast, 100ms) ease, transform var(--duration-fast, 100ms) ease;
  }
  .msg:hover .msg__actions, .msg__actions:focus-within, .msg__actions:has(.dropdown-menu.show) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .msg--outbound .msg__actions {
    right: 4px;
    left: auto;
  }
  .msg:not(.msg--outbound) .msg__actions .dropdown-menu {
    right: auto !important;
    left: 0 !important;
  }
  .msg__action-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 0px;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: var(--text-msg-action-btn, var(--text-secondary));
    background-color: transparent;
    transition: background-color var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease;
  }
  .msg__action-btn:hover {
    color: var(--text-msg-action-btn-hover, var(--text-primary));
    background-color: var(--bg-msg-action-btn-hover, var(--bg-hover));
  }
  .msg__action-btn:active {
    background-color: var(--bg-msg-action-btn-active, var(--bg-active));
  }
  .msg__reactions {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: var(--spacing);
    padding-inline: var(--spacing);
  }
  .msg-reaction {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-reaction, var(--bg-secondary-subtle));
    border-color: var(--border-msg-reaction, var(--border-secondary));
    color: var(--text-msg-reaction, var(--text-secondary));
    transition: background-color var(--duration-fast, 100ms) ease, border-color var(--duration-fast, 100ms) ease;
    user-select: none;
  }
  .msg-reaction:hover {
    background-color: var(--bg-msg-reaction-hover, var(--bg-hover));
    border-color: var(--border-msg-reaction-hover, var(--border-primary));
  }
  .msg-reaction.is-active {
    background-color: var(--bg-msg-reaction-active, var(--bg-info-subtle));
    border-color: var(--border-msg-reaction-active, var(--border-info));
    color: var(--text-msg-reaction-active, var(--text-info));
  }
  .msg-reaction__emoji {
    font-size: 14px;
    line-height: 1;
  }
  .msg-reaction__count {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .msg-reaction--add {
    --tw-border-style: dashed;
    border-style: dashed;
    color: var(--text-msg-reaction-add, var(--text-tertiary));
    opacity: 0;
    transition: opacity var(--duration-fast, 100ms) ease, background-color var(--duration-fast, 100ms) ease;
  }
  .msg:hover .msg-reaction--add, .msg-reaction--add:focus-visible {
    opacity: 1;
  }
  .msg-reaction-picker {
    position: absolute;
    z-index: 50;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 2);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--bg-msg-reaction-picker, var(--bg-popover));
    border-color: var(--border-msg-reaction-picker, var(--border-popover));
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
    transition: opacity var(--duration-fast, 100ms) ease, transform var(--duration-fast, 100ms) ease;
  }
  .msg-reaction-picker.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
  .msg-reaction-picker__grid {
    display: grid;
    gap: calc(var(--spacing) * 0.5);
    grid-template-columns: repeat(6, 1fr);
  }
  .msg-reaction-picker__btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: 18px;
    transition: background-color var(--duration-fast, 100ms) ease, transform var(--duration-fast, 100ms) ease;
  }
  .msg-reaction-picker__btn:hover {
    background-color: var(--bg-hover);
    transform: scale(1.2);
  }
  .msg-composer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-msg-composer, var(--bg-input));
    box-shadow: inset 0 0 0 1px var(--border-msg-composer, var(--border-input)), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 100ms) ease, background-color var(--duration-fast, 100ms) ease;
  }
  .msg-composer:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .msg-composer.is-drag-over {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
    background-color: var(--bg-msg-composer-dragover, var(--border-focus));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-composer-dragover, color-mix(in oklch, var(--border-focus) 8%, var(--bg-input)));
    }
  }
  .msg-composer__body {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 2.5);
    padding-bottom: var(--spacing);
  }
  .msg-composer__editor {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    color: var(--text-msg-composer, var(--text-primary));
    min-height: 24px;
    max-height: 160px;
    overflow-y: auto;
    line-height: 1.6;
    font-family: inherit;
    word-break: break-word;
    scrollbar-width: thin;
  }
  .msg-composer__editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-msg-composer-placeholder, var(--text-placeholder));
    pointer-events: none;
  }
  .msg-composer__editor b, .msg-composer__editor strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .msg-composer__editor i, .msg-composer__editor em {
    font-style: italic;
  }
  .msg-composer__editor u {
    text-decoration-line: underline;
  }
  .msg-composer__editor s, .msg-composer__editor strike {
    text-decoration-line: line-through;
  }
  .msg-composer__editor code {
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-composer-code, var(--bg-tertiary-subtle));
    color: var(--text-msg-composer-code, var(--text-danger));
  }
  .msg-composer__editor blockquote {
    margin-block: var(--spacing);
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    padding-left: calc(var(--spacing) * 3);
    font-style: italic;
    border-color: var(--border-msg-composer-quote, var(--border-secondary));
    color: var(--text-msg-composer-quote, var(--text-secondary));
  }
  .msg-composer__editor ul, .msg-composer__editor ol {
    margin-block: var(--spacing);
    padding-left: calc(var(--spacing) * 5);
  }
  .msg-composer__editor ul {
    list-style-type: disc;
  }
  .msg-composer__editor ol {
    list-style-type: decimal;
  }
  .msg-composer__editor li {
    margin-block: calc(var(--spacing) * 0.5);
  }
  .msg-composer__editor a {
    color: var(--text-info);
    text-decoration-line: underline;
  }
  .msg-composer__input {
    margin: 0;
    width: 100%;
    resize: none;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    color: var(--text-msg-composer, var(--text-primary));
    max-height: 120px;
    min-height: 20px;
    line-height: 1.5;
    font-family: inherit;
  }
  .msg-composer__input::placeholder {
    color: var(--text-msg-composer-placeholder, var(--text-placeholder));
  }
  .msg-composer__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .msg-composer__tools {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .msg-composer__tool-btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: var(--text-msg-composer-tool, var(--text-tertiary));
    font-size: 14px;
    transition: color var(--duration-fast, 100ms) ease, background-color var(--duration-fast, 100ms) ease;
  }
  .msg-composer__tool-btn:hover {
    color: var(--text-msg-composer-tool-hover, var(--text-primary));
    background-color: var(--bg-msg-composer-tool-hover, var(--bg-hover));
  }
  .msg-composer__tool-btn.is-active {
    color: var(--text-msg-composer-tool-active, var(--border-focus));
    background-color: var(--bg-msg-composer-tool-active, var(--border-focus));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-composer-tool-active, color-mix(in oklch, var(--border-focus) 12%, transparent));
    }
  }
  .msg-composer__tool-sep {
    margin-inline: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 4);
    width: 1px;
    background-color: var(--border-msg-composer-sep, var(--border-secondary-subtle));
  }
  .msg-composer__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .msg-composer__hint {
    display: none;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    -webkit-user-select: none;
    user-select: none;
    @media (width >= 40rem) {
      display: inline;
    }
    color: var(--text-msg-composer-hint, var(--text-quaternary));
  }
  .msg-composer__send {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--radius-full);
    font-size: 13px;
    color: var(--text-button-primary);
    background-color: var(--bg-button-primary);
    border: 1px solid var(--border-button-primary);
    transition: background-color var(--duration-fast, 100ms) ease, opacity var(--duration-fast, 100ms) ease;
  }
  .msg-composer__send:hover:not(:disabled) {
    background-color: var(--bg-button-primary-hover);
  }
  .msg-composer__send:active:not(:disabled) {
    transform: scale(0.97);
  }
  .msg-composer__send:disabled {
    opacity: 0.4;
    cursor: default;
  }
  .msg-composer__send-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .msg-typing {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-msg-typing, var(--text-tertiary));
  }
  .msg-typing__dots {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 0.5);
  }
  .msg-typing__dot {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    background-color: var(--bg-msg-typing-dot, var(--text-tertiary));
    animation: msg-typing-bounce 1.4s ease-in-out infinite;
  }
  .msg-typing__dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  .msg-typing__dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  @keyframes msg-typing-bounce {
    0%, 60%, 100% {
      transform: translateY(0);
      opacity: 0.4;
    }
    30% {
      transform: translateY(-4px);
      opacity: 1;
    }
  }
  .msg__status {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    padding-inline: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-msg-status, var(--text-quaternary));
  }
  .msg--outbound .msg__status {
    justify-content: flex-end;
  }
  .msg__status-icon {
    font-size: 11px;
  }
  .msg__status-icon--sent {
    color: var(--text-msg-status, var(--text-quaternary));
  }
  .msg__status-icon--delivered {
    color: var(--text-msg-status, var(--text-tertiary));
  }
  .msg__status-icon--read {
    color: var(--text-msg-status-read, var(--text-info));
  }
  .msg-date-separator {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
  }
  .msg-date-separator::before, .msg-date-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background-color: var(--border-msg-separator, var(--border-secondary));
  }
  .msg-date-separator__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--text-msg-separator, var(--text-tertiary));
  }
  .msg-unread-banner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .msg-unread-banner::before, .msg-unread-banner::after {
    content: "";
    height: 1px;
    flex: 1;
    background-color: var(--border-msg-unread, var(--border-danger));
  }
  .msg-unread-banner__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--text-msg-unread, var(--text-danger));
  }
  .msg-conversation-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .msg-conversation-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    border-color: var(--border-msg-conversation, var(--border-secondary));
    background-color: var(--bg-msg-conversation, transparent);
    transition: background-color var(--duration-fast, 100ms) ease;
  }
  .msg-conversation-item:hover {
    background-color: var(--bg-msg-conversation-hover, var(--bg-hover));
  }
  .msg-conversation-item.is-active {
    background-color: var(--bg-msg-conversation-active, var(--bg-active));
  }
  .msg-conversation-item.is-unread {
    background-color: var(--bg-msg-conversation-unread, var(--bg-info-subtle));
  }
  .msg-conversation-item__avatar {
    flex-shrink: 0;
  }
  .msg-conversation-item__content {
    min-width: 0;
    flex: 1;
  }
  .msg-conversation-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-msg-conversation-name, var(--text-primary));
  }
  .msg-conversation-item.is-unread .msg-conversation-item__name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .msg-conversation-item__preview {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-msg-conversation-preview, var(--text-tertiary));
  }
  .msg-conversation-item__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing);
  }
  .msg-conversation-item__time {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    white-space: nowrap;
    color: var(--text-msg-conversation-time, var(--text-quaternary));
  }
  .msg-conversation-item__badge {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    background-color: var(--bg-msg-badge, var(--bg-primary-solid));
    color: var(--text-msg-badge, var(--text-on-primary));
  }
  .msg-panel--compact .msg__bubble {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .msg-panel--compact .msg-panel__thread {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--spacing) * 3);
  }
  .msg-panel--compact .msg {
    max-width: 90%;
    gap: calc(var(--spacing) * 2);
  }
  .msg-panel--flat .msg__bubble {
    background-color: transparent;
    border-color: transparent;
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * 0.5);
  }
  .msg-panel--flat .msg--outbound .msg__bubble {
    background-color: transparent;
    color: var(--text-primary);
  }
  .msg-composer__reply {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-reply, var(--bg-secondary-subtle));
    border-color: var(--border-msg-composer-reply, var(--border-secondary-subtle));
    color: var(--text-msg-reply, var(--text-secondary));
  }
  .msg-composer__reply-text {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .msg-composer__reply-sender {
    margin-right: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-msg-reply-sender, var(--text-primary));
  }
  .msg-composer__reply-close {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: var(--text-msg-reply-close, var(--text-tertiary));
    font-size: 11px;
  }
  .msg-composer__reply-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
  }
  .msg-composer__attachments {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-msg-composer-attachments, var(--border-secondary-subtle));
  }
  .msg-composer__attachment-preview {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-attachment-preview, var(--bg-secondary-subtle));
    border: 1px solid var(--border-msg-attachment-preview, var(--border-secondary));
    color: var(--text-msg-attachment-preview, var(--text-secondary));
    max-width: 200px;
  }
  .msg-composer__attachment-preview i {
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-msg-attachment-icon, var(--text-tertiary));
  }
  .msg-composer__attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .msg-composer__attachment-size {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .msg-composer__attachment-remove {
    position: absolute;
    top: calc(var(--spacing) * -1.5);
    right: calc(var(--spacing) * -1.5);
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--bg-danger-solid);
    color: var(--text-on-solid);
    font-size: 8px;
    opacity: 0;
    transition: opacity var(--duration-fast, 100ms) ease;
  }
  .msg-composer__attachment-preview:hover .msg-composer__attachment-remove {
    opacity: 1;
  }
  .msg-composer__attachment-preview--image {
    padding: 0;
    width: 64px;
    height: 64px;
  }
  .msg-composer__attachment-preview--image img {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
  }
  .msg-panel--compact .msg-composer__toolbar {
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: var(--spacing);
  }
  .msg-panel--compact .msg-composer__tool-btn {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    font-size: 12px;
  }
  .msg-panel--compact .msg-composer__send {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 12px;
  }
  .msg-panel--compact .msg-composer__body {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .msg__quote {
    margin-bottom: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-quote, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-quote, color-mix(in oklch, currentColor 5%, transparent));
    }
    border-left-color: var(--border-msg-quote, var(--border-focus));
    color: var(--text-msg-quote, var(--text-secondary));
  }
  .msg--outbound .msg__quote {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 5%, transparent);
    }
    border-left-color: var(--border-focus);
    color: var(--text-secondary);
  }
  .msg__quote-sender {
    margin-bottom: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .msg__quote-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .msg__image {
    margin-top: var(--spacing);
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-lg);
    max-width: 280px;
  }
  .msg__image img {
    display: block;
    height: auto;
    width: 100%;
  }
  .msg__image-grid {
    margin-top: var(--spacing);
    display: grid;
    gap: var(--spacing);
    max-width: 320px;
  }
  .msg__image-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
  .msg__image-grid--3 {
    grid-template-columns: 1fr 1fr;
  }
  .msg__image-grid--4 {
    grid-template-columns: 1fr 1fr;
  }
  .msg__image-grid img {
    height: 100%;
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-lg);
    object-fit: cover;
    aspect-ratio: 1;
  }
  .msg__link-preview {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 2);
    background-color: var(--bg-msg-link-preview, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-link-preview, color-mix(in oklch, currentColor 4%, transparent));
    }
    border-color: var(--border-msg-link-preview, var(--border-secondary));
    transition: background-color var(--duration-fast, 100ms) ease;
  }
  .msg__link-preview:hover {
    background-color: var(--bg-msg-link-preview-hover, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-link-preview-hover, color-mix(in oklch, currentColor 7%, transparent));
    }
  }
  .msg--outbound .msg__link-preview {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 4%, transparent);
    }
    border-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, currentColor 12%, transparent);
    }
  }
  .msg--outbound .msg__link-preview:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 7%, transparent);
    }
  }
  .msg__link-preview-image {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
  }
  .msg__link-preview-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .msg__link-preview-body {
    min-width: 0;
    flex: 1;
  }
  .msg__link-preview-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .msg__link-preview-desc {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 0.7;
  }
  .msg__link-preview-domain {
    margin-top: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 0.5;
  }
  .msg__mention {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 0.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-msg-mention, var(--text-info));
    background-color: var(--bg-msg-mention, var(--bg-info-subtle));
  }
  .msg--outbound .msg__mention {
    color: var(--text-msg-mention, var(--text-info));
    background-color: var(--bg-msg-mention, var(--bg-info-subtle));
  }
  .msg__mention:hover {
    text-decoration: underline;
  }
  .msg-group-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .msg-group-avatar > * {
    box-shadow: 0 0 0 2px var(--bg-msg-panel, var(--bg-surface));
    border-radius: 9999px;
  }
  .msg-group-avatar__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
    color: var(--text-secondary);
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  .msg-group-avatar__overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 700;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    color: var(--text-tertiary);
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  .msg-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    border-color: var(--border-msg-panel, var(--border-secondary));
    background-color: var(--bg-msg-header, var(--bg-surface));
  }
  .msg-header__info {
    min-width: 0;
    flex: 1;
  }
  .msg-header__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .msg-header__status {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .msg-header__status-dot {
    margin-right: var(--spacing);
    display: inline-block;
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
  }
  .msg-header__status-dot--online {
    background-color: var(--bg-success-solid);
  }
  .msg-header__status-dot--away {
    background-color: var(--bg-warning-solid);
  }
  .msg-header__status-dot--offline {
    background-color: var(--text-quaternary);
  }
  .msg-header__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  .msg-pinned {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-pinned, var(--bg-warning-subtle));
    border-color: var(--border-msg-pinned, var(--border-warning-subtle));
    color: var(--text-msg-pinned, var(--text-warning));
    transition: background-color var(--duration-fast, 100ms) ease;
  }
  .msg-pinned:hover {
    background-color: var(--bg-msg-pinned-hover, var(--bg-warning-subtle));
    filter: brightness(0.97);
  }
  .msg-pinned__icon {
    flex-shrink: 0;
  }
  .msg-pinned__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .msg-empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--text-tertiary);
  }
  .msg-empty__icon {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    opacity: 30%;
  }
  .msg-empty__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .msg-empty__text {
    max-width: var(--container-xs);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .emoji-picker, .msg-emoji-picker {
    display: flex;
    flex-direction: column;
    width: 340px;
    max-height: 420px;
    background-color: var(--bg-popover, var(--bg-card));
    border: 1px solid var(--border-popover, var(--border-divider));
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 12px 32px -8px var(--text-primary), 0 4px 12px -4px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 32px -8px color-mix(in oklch, var(--text-primary) 22%, transparent), 0 4px 12px -4px color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
  }
  .emoji-picker--popup, .msg-emoji-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease;
  }
  .emoji-picker--popup.is-open, .msg-emoji-picker.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .emoji-picker--standalone {
    position: relative;
    bottom: auto;
    right: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .emoji-picker--compact {
    width: 280px;
    max-height: 320px;
  }
  .emoji-picker__quick-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 8px 4px;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 2%, transparent);
    }
  }
  .emoji-picker__quick-row .emoji-picker__btn {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }
  .emoji-picker__search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--border-divider);
  }
  .emoji-picker__search {
    flex: 1;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-input, var(--border-divider));
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  .emoji-picker__search::placeholder {
    color: var(--text-tertiary);
  }
  .emoji-picker__search:focus {
    border-color: var(--border-focus);
    box-shadow: inset 0 0 0 1px var(--border-focus);
  }
  .emoji-picker__tones {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
    background-color: var(--bg-input);
    border: 1px solid var(--border-input, var(--border-divider));
    border-radius: 9999px;
    padding: 2px;
    overflow: hidden;
    transition: width 180ms ease;
  }
  .emoji-picker__tone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 0;
    background-color: var(--msg-tone, transparent);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: transform 120ms ease;
  }
  .emoji-picker__tone:hover {
    transform: scale(1.2);
  }
  .emoji-picker__tone.is-active {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .emoji-picker__scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-divider) transparent;
    padding: 0 8px;
  }
  .emoji-picker__scroll::-webkit-scrollbar {
    width: 6px;
  }
  .emoji-picker__scroll::-webkit-scrollbar-thumb {
    background-color: var(--border-divider);
    border-radius: 9999px;
  }
  .emoji-picker__category-label, .emoji-picker__category {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 4px 4px;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    background-color: var(--bg-popover, var(--bg-card));
  }
  .emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding-bottom: 6px;
  }
  .emoji-picker--compact .emoji-picker__grid {
    grid-template-columns: repeat(7, 1fr);
  }
  .emoji-picker__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background-color: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    transition: background-color 100ms ease, transform 100ms ease;
  }
  .emoji-picker__btn:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    transform: scale(1.15);
  }
  .emoji-picker__btn:active {
    transform: scale(0.95);
  }
  .emoji-picker__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .emoji-picker__btn.is-recent::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background-color: var(--border-focus);
    bottom: 2px;
    right: 2px;
  }
  .emoji-picker__categories {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 6px 6px;
    border-top: 1px solid var(--border-divider);
    background-color: var(--bg-popover, var(--bg-card));
  }
  .emoji-picker__category-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    padding: 0;
    border: 0;
    background-color: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: 14px;
    transition: background-color 100ms ease, color 100ms ease;
    position: relative;
  }
  .emoji-picker__category-btn:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    color: var(--text-primary);
  }
  .emoji-picker__category-btn.is-active {
    color: var(--border-focus);
  }
  .emoji-picker__category-btn.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: 9999px;
    background-color: var(--border-focus);
  }
  .emoji-picker__preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid var(--border-divider);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 2%, transparent);
    }
    min-height: 36px;
  }
  .emoji-picker__preview-emoji {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }
  .emoji-picker__preview-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }
  .emoji-picker__preview-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
    line-height: 1.2;
  }
  .emoji-picker__preview-shortcode {
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: var(--font-mono, ui-monospace, monospace);
    line-height: 1.2;
  }
  .emoji-picker__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
    color: var(--text-tertiary);
  }
  .emoji-picker__empty-icon {
    font-size: 24px;
    opacity: 0.5;
  }
  .emoji-picker__empty-text {
    font-size: 12px;
  }
  .msg-emoji-picker__search {
    flex: 1;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-input, var(--border-divider));
    border-radius: 8px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 120ms ease;
  }
  .msg-emoji-picker__category {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 4px 4px;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    background-color: var(--bg-popover, var(--bg-card));
  }
  .msg-emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding-bottom: 6px;
  }
  .msg-emoji-picker__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background-color: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    transition: background-color 100ms ease, transform 100ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .emoji-picker, .msg-emoji-picker, .emoji-picker__btn, .emoji-picker__tone {
      transition: none;
      transform: none !important;
    }
  }
  .msg__audio {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: var(--spacing);
    padding-block: var(--spacing);
    min-width: 220px;
  }
  .msg__audio-play {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    width: 32px;
    height: 32px;
    background-color: var(--bg-msg-audio-play, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-audio-play, color-mix(in oklch, currentColor 18%, transparent));
    }
    color: inherit;
    font-size: 12px;
    transition: background-color 120ms ease, transform 120ms ease;
  }
  .msg__audio-play:hover {
    background-color: var(--bg-msg-audio-play-hover, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-audio-play-hover, color-mix(in oklch, currentColor 26%, transparent));
    }
  }
  .msg__audio-play:active {
    transform: scale(0.95);
  }
  .msg__audio-waveform {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    min-width: 0;
  }
  .msg__audio-waveform > span {
    display: inline-block;
    width: 2px;
    height: var(--bar-h, 40%);
    background-color: currentColor;
    opacity: 0.55;
    border-radius: 1px;
    transition: opacity 120ms ease, background-color 120ms ease;
  }
  .msg__audio-waveform > span.is-played {
    opacity: 1;
  }
  .msg__audio-duration {
    flex-shrink: 0;
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    opacity: 0.7;
  }
  .msg__video {
    position: relative;
    margin-top: var(--spacing);
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-lg);
    max-width: 280px;
    background-color: var(--bg-overlay);
  }
  .msg__video img, .msg__video video {
    display: block;
    height: auto;
    width: 100%;
  }
  .msg__video::after {
    content: "\f04b";
    font-family: "Font Awesome 6 Pro", "Font Awesome 7 Pro";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background-color: var(--bg-overlay);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-overlay) 55%, transparent);
    }
    color: var(--text-on-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color 120ms ease;
  }
  .msg__video:hover::after {
    background-color: var(--bg-overlay);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-overlay) 75%, transparent);
    }
  }
  .msg__video-duration {
    position: absolute;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    bottom: 6px;
    right: 6px;
    background-color: var(--bg-overlay);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-overlay) 70%, transparent);
    }
    color: var(--text-on-solid);
    font-variant-numeric: tabular-nums;
  }
  .msg__file {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    background-color: var(--bg-msg-file, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-file, color-mix(in oklch, currentColor 4%, transparent));
    }
    border-color: var(--border-msg-file, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--border-msg-file, color-mix(in oklch, currentColor 12%, transparent));
    }
    max-width: 320px;
  }
  .msg__file-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    width: 34px;
    height: 34px;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 14%, transparent);
    }
    color: inherit;
    font-size: 14px;
  }
  .msg__file-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 1px;
  }
  .msg__file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: inherit;
  }
  .msg__file-meta {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 0.7;
  }
  .msg__file-action {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    width: 28px;
    height: 28px;
    color: inherit;
    opacity: 0.6;
    font-size: 12px;
    transition: opacity 120ms ease, background-color 120ms ease;
  }
  .msg__file-action:hover {
    opacity: 1;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 12%, transparent);
    }
  }
  .msg__code {
    margin-block: var(--spacing);
    overflow-x: auto;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-msg-code, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-msg-code, color-mix(in oklch, currentColor 6%, transparent));
    }
    border: 1px solid var(--border-msg-code, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid var(--border-msg-code, color-mix(in oklch, currentColor 12%, transparent));
    }
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    line-height: 1.5;
    padding: 8px 10px;
    color: inherit;
  }
  .msg__code-lang {
    margin-bottom: var(--spacing);
    display: block;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.55;
  }
  .msg--edited .msg__time::after {
    content: " · edited";
    font-style: italic;
    opacity: 0.7;
  }
  .msg--deleted .msg__bubble {
    background-color: transparent !important;
    border: 1px dashed var(--border-msg-deleted, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px dashed var(--border-msg-deleted, color-mix(in oklch, var(--text-primary) 18%, transparent));
    }
    color: var(--text-tertiary);
    font-style: italic;
  }
  .msg--deleted .msg__reactions, .msg--deleted .msg__attachments, .msg--deleted .msg__actions {
    display: none !important;
  }
  .msg__forwarded {
    margin-bottom: var(--spacing);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    padding-inline: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
    font-style: italic;
  }
  .msg__forwarded i {
    font-size: 9px;
    opacity: 0.7;
  }
  .msg--sending .msg__bubble {
    opacity: 0.7;
    position: relative;
  }
  .msg--sending .msg__bubble::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient( 90deg, transparent 0%, currentColor 50%, transparent 100% );
    background-size: 200% 100%;
    animation: msg-sending-flow 1.4s linear infinite;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
  @keyframes msg-sending-flow {
    from {
      background-position: 0% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .msg--failed .msg__bubble {
    border: 1px solid var(--text-danger);
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 6%, var(--bg-msg-inbound, var(--bg-secondary-subtle)));
    }
  }
  .msg__failed-action {
    margin-top: var(--spacing);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-danger);
  }
  .msg__failed-action:hover {
    text-decoration: underline;
  }
  .msg__failed-action i {
    font-size: 10px;
  }
  .msg__thread-count {
    margin-top: var(--spacing);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: transparent;
    border-color: var(--border-msg-thread, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--border-msg-thread, color-mix(in oklch, var(--text-info) 30%, transparent));
    }
    color: var(--text-info);
    transition: background-color 120ms ease;
  }
  .msg__thread-count:hover {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 8%, transparent);
    }
  }
  .msg__thread-count i {
    font-size: 10px;
  }
  .msg__thread-count-avatars {
    display: inline-flex;
    align-items: center;
  }
  .msg__thread-count-avatars > * {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    margin-left: -4px;
    border: 1.5px solid var(--bg-msg-panel, var(--bg-surface));
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 14%, transparent);
    }
  }
  .msg__thread-count-avatars > *:first-child {
    margin-left: 0;
  }
  .msg--sticker .msg__bubble {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .msg--sticker .msg__bubble img, .msg--sticker .msg__bubble svg {
    max-width: 140px;
    max-height: 140px;
    display: block;
  }
  .msg__avatar {
    position: relative;
  }
  .msg__avatar-status {
    position: absolute;
    display: inline-block;
    border-radius: var(--radius-full);
    width: 9px;
    height: 9px;
    bottom: -1px;
    right: -1px;
    background-color: var(--text-tertiary);
    border: 2px solid var(--bg-msg-panel, var(--bg-surface));
    z-index: 1;
  }
  .msg__avatar-status--online {
    background-color: var(--bg-success-solid);
  }
  .msg__avatar-status--away {
    background-color: var(--bg-warning-solid);
  }
  .msg__avatar-status--busy {
    background-color: var(--text-danger);
  }
  .msg__avatar-status--offline {
    background-color: var(--text-tertiary);
  }
  .msg__seen-by {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 0.5);
    padding-inline: var(--spacing);
  }
  .msg__seen-by-label {
    margin-right: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .msg__seen-by > .avatar, .msg__seen-by-avatar {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    border: 1.5px solid var(--bg-msg-panel, var(--bg-surface));
    margin-left: -4px;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 14%, transparent);
    }
    overflow: hidden;
  }
  .msg__seen-by > .avatar:first-child, .msg__seen-by-avatar:first-child {
    margin-left: 0;
  }
  .msg__seen-by-more {
    margin-left: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .msg-panel--selecting .msg {
    cursor: pointer;
    padding-left: 32px;
    position: relative;
  }
  .msg-panel--selecting .msg::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-divider, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      border: 1.5px solid var(--border-divider, color-mix(in oklch, var(--text-primary) 22%, transparent));
    }
    background-color: var(--bg-surface);
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .msg-panel--selecting .msg.is-selected::before {
    background-color: var(--bg-brand-solid);
    border-color: var(--bg-brand-solid);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
  }
  .msg-panel--selecting .msg.is-selected {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 4%, transparent);
    }
  }
  .msg-quick-replies {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-msg-composer-attachments, var(--border-secondary-subtle));
    background-color: var(--bg-msg-panel, var(--bg-surface));
  }
  .msg-quick-reply {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-secondary-subtle, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-secondary-subtle, color-mix(in oklch, var(--text-primary) 5%, transparent));
    }
    border-color: transparent;
    color: var(--text-primary);
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .msg-quick-reply:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
  }
  .msg-quick-reply i {
    font-size: 10px;
    opacity: 0.7;
  }
  .msg-composer--recording {
    box-shadow: inset 0 0 0 2px var(--text-danger), var(--shadow-xs);
  }
  .msg-composer__recording {
    display: none;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .msg-composer--recording .msg-composer__recording {
    display: flex;
  }
  .msg-composer--recording .msg-composer__body, .msg-composer--recording .msg-composer__toolbar {
    display: none;
  }
  .msg-composer__recording-dot {
    display: inline-block;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--text-danger);
    animation: msg-recording-pulse 1.4s ease-in-out infinite;
  }
  .msg-composer__recording-waveform {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 6);
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .msg-composer__recording-waveform > span {
    display: inline-block;
    width: 2px;
    background-color: var(--text-danger);
    border-radius: 1px;
    animation: msg-recording-bar 0.8s ease-in-out infinite;
  }
  .msg-composer__recording-time {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-danger);
  }
  .msg-composer__recording-actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  @keyframes msg-recording-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.4;
      transform: scale(0.7);
    }
  }
  @keyframes msg-recording-bar {
    0%, 100% {
      height: 30%;
    }
    50% {
      height: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .msg-composer__recording-dot, .msg-composer__recording-waveform > span {
      animation: none;
    }
  }
  .msg-composer-autocomplete {
    position: absolute;
    z-index: 50;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background-color: var(--bg-popover, var(--bg-card));
    border-color: var(--border-popover, var(--border-divider));
    display: none;
    max-height: 240px;
  }
  .msg-composer-autocomplete.is-open {
    display: flex;
  }
  .msg-composer-autocomplete__hint {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-tertiary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 3%, transparent);
    }
  }
  .msg-composer-autocomplete > ul {
    margin: 0;
    list-style-type: none;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
  }
  .msg-composer-autocomplete__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    transition: background-color 100ms ease;
  }
  .msg-composer-autocomplete__item:hover, .msg-composer-autocomplete__item.is-active {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 10%, transparent);
    }
  }
  .msg-composer-autocomplete__item-icon, .msg-composer-autocomplete__item-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    width: 22px;
    height: 22px;
    font-size: 11px;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
    color: var(--text-secondary);
  }
  .msg-composer-autocomplete__item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    flex: 1;
  }
  .msg-composer-autocomplete__item-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .msg-panel__thread {
    position: relative;
  }
  .msg-panel__scroll-bottom {
    position: absolute;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    width: 36px;
    height: 36px;
    bottom: 16px;
    right: 16px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-divider);
    color: var(--text-secondary);
    font-size: 13px;
    box-shadow: 0 4px 12px -2px var(--text-primary), 0 2px 4px -1px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px -2px color-mix(in oklch, var(--text-primary) 18%, transparent), 0 2px 4px -1px color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 10;
  }
  .msg-panel.has-scroll-fab .msg-panel__scroll-bottom {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .msg-panel__scroll-bottom:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, var(--bg-card));
    }
  }
  .msg-panel__scroll-bottom-count {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--bg-danger-solid);
    color: var(--text-on-solid);
    border: 2px solid var(--bg-msg-panel, var(--bg-surface));
  }
  .msg-panel__new-pill {
    position: absolute;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    top: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: 0 4px 12px -2px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px -2px color-mix(in oklch, var(--bg-brand-solid) 30%, transparent);
    }
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 10;
  }
  .msg-panel.has-new-pill .msg-panel__new-pill {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .msg-panel__drop-zone {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 12%, var(--bg-surface));
    }
    border: 2px dashed var(--border-focus);
    z-index: 20;
    opacity: 0;
    transition: opacity 120ms ease;
  }
  .msg-panel.is-drag-over .msg-panel__drop-zone {
    opacity: 1;
  }
  .msg-panel__drop-zone-icon {
    font-size: 32px;
    color: var(--border-focus);
  }
  .msg-panel__drop-zone-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--border-focus);
  }
  .msg-panel__drop-zone-hint {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-secondary);
  }
  @media (prefers-reduced-motion: reduce) {
    .msg-typing__dot {
      animation: none;
      opacity: 0.6;
    }
    .msg-reaction-picker, .msg-panel__scroll-bottom, .msg-panel__new-pill {
      transition: none;
    }
    .msg--sending .msg__bubble::after {
      animation: none;
      background: currentColor;
      opacity: 0.4;
    }
  }
  .msg__action-btn:focus-visible, .msg-reaction:focus-visible, .msg-reaction-picker__btn:focus-visible, .msg-composer__tool-btn:focus-visible, .msg-composer__send:focus-visible, .msg-composer__reply-close:focus-visible, .msg-composer__attachment-remove:focus-visible, .msg__audio-play:focus-visible, .msg__file-action:focus-visible, .msg__failed-action:focus-visible, .msg__thread-count:focus-visible, .msg__mention:focus-visible, .msg-conversation-item:focus-visible, .msg-quick-reply:focus-visible, .msg-pinned:focus-visible, .msg-panel__scroll-bottom:focus-visible, .msg-panel__new-pill:focus-visible, .emoji-picker__tone:focus-visible, .emoji-picker__category-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .msg-conversation-item:focus-visible {
    outline-offset: -2px;
  }
}
@layer utilities {
  @keyframes rm-edge-flow {
    to {
      stroke-dashoffset: -20;
    }
  }
  @keyframes rm-edge-trace {
    to {
      stroke-dashoffset: -20;
    }
  }
  @keyframes rm-loading-sweep {
    0% {
      transform: translateX(-30%);
    }
    100% {
      transform: translateX(30%);
    }
  }
  @keyframes rm-status-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--text-info) 40%, transparent), 0 0 0 2px var(--bg-record-map, var(--bg-card));
    }
    50% {
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--text-info) 0%, transparent), 0 0 0 2px var(--bg-record-map, var(--bg-card));
    }
  }
  .record-map {
    --rm-node-width: 212px;
    --rm-node-min-h: 64px;
    --rm-node-pad-y: 10px;
    --rm-node-pad-x: 12px;
    --rm-edge-width: 1.5px;
    --rm-edge-width-active: 2.25px;
    --rm-grid-size: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-record-map);
    background-color: var(--bg-record-map);
    color: var(--text-record-map);
    overflow: hidden;
    isolation: isolate;
  }
  .record-map::before {
    content: '';
    position: absolute;
    inset: -25%;
    background: radial-gradient( circle at 50% 50%, var(--border-focus), transparent 55% );
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( circle at 50% 50%, color-mix(in oklch, var(--border-focus) 6%, transparent), transparent 55% );
    }
    pointer-events: none;
    z-index: 0;
  }
  @media (max-width: 768px) {
    .record-map {
      --rm-node-width: 164px;
    }
  }
  .record-map.is-panning .record-map__canvas {
    cursor: grabbing;
  }
  .record-map.is-panning .record-map__viewport, .record-map.is-zooming .record-map__viewport {
    transition: none;
  }
  .record-map.is-loading .record-map__nodes, .record-map.is-loading .record-map__edges {
    opacity: 0.3;
    filter: blur(0.5px);
  }
  .record-map.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient( 115deg, transparent 30%, oklch(100% 0 0 / 0.1) 50%, transparent 70% );
    animation: rm-loading-sweep 1.4s linear infinite;
    pointer-events: none;
  }
  .record-map.is-relaying .record-map-node {
    transition: transform var(--duration-slow) var(--ease-out), border-color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default);
  }
  .record-map.is-relaying .record-map__edges path {
    transition: d var(--duration-slow) var(--ease-out);
  }
  .record-map__canvas {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }
  .record-map__canvas:active {
    cursor: grabbing;
  }
  .record-map__canvas:hover .record-map__grid {
    opacity: 0.75;
  }
  .record-map__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient( circle, var(--bg-record-map-grid-dot) 1px, transparent 1px );
    background-size: var(--rm-grid-size) var(--rm-grid-size);
    background-position: 0 0;
    opacity: 0.5;
    transition: opacity var(--duration-normal) var(--ease-default);
    mask-image: radial-gradient(ellipse at center, oklch(0% 0 0 / 1) 40%, oklch(0% 0 0 / 0.4) 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, oklch(0% 0 0 / 1) 40%, oklch(0% 0 0 / 0.4) 100%);
  }
  .record-map--no-grid .record-map__grid {
    display: none;
  }
  .record-map__viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    transform-origin: 0 0;
    will-change: transform;
    transition: transform var(--duration-normal) var(--ease-default);
  }
  .record-map__edges {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  .record-map__edges path {
    fill: none;
    stroke: var(--line-record-map-connection);
    stroke-width: var(--rm-edge-width);
    stroke-linecap: round;
    transition: stroke var(--duration-normal) var(--ease-default), stroke-width var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default);
  }
  .record-map__edges path[data-flow='success'] {
    stroke: var(--line-record-map-connection-success);
  }
  .record-map__edges path[data-flow='warning'] {
    stroke: var(--line-record-map-connection-warning);
  }
  .record-map__edges path[data-flow='error'] {
    stroke: var(--line-record-map-connection-error);
  }
  .record-map__edges path[data-flow='ai'] {
    stroke: var(--line-record-map-connection-ai);
    stroke-dasharray: 5 5;
    animation: rm-edge-flow 1.6s linear infinite;
  }
  .record-map__edges path.is-active {
    stroke: var(--line-record-map-connection-active);
    stroke-width: var(--rm-edge-width-active);
    filter: drop-shadow(0 0 6px var(--border-focus));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 0 6px color-mix(in oklch, var(--border-focus) 40%, transparent));
    }
  }
  .record-map__edges path.is-faded {
    opacity: 0.18;
  }
  .record-map--mindmap .record-map__edges path {
    stroke: var(--line-record-map-connection);
    opacity: 0.8;
  }
  .record-map--radial .record-map__edges path {
    stroke-dasharray: 0;
    opacity: 0.5;
  }
  .record-map--radial .record-map__edges path.is-active {
    opacity: 1;
  }
  .record-map__edges path[data-rel-style='dashed'], .record-map__edges path.is-dashed {
    stroke-dasharray: 8 4;
  }
  .record-map__edges path[data-rel-style='dotted'], .record-map__edges path.is-dotted {
    stroke-dasharray: 2 4;
  }
  .record-map__edges path[data-rel-style='double'], .record-map__edges path.is-double {
    stroke-width: 4px;
    stroke-linecap: square;
  }
  .record-map__edges path[data-rel-style='flow'], .record-map__edges path.is-flowing {
    stroke-dasharray: 6 4;
    animation: rm-edge-flow 1.4s linear infinite;
  }
  .record-map__edges path[data-rel-style='thick'], .record-map__edges path.is-thick {
    stroke-width: 3px;
  }
  .record-map__edges path[data-rel-style='glow'], .record-map__edges path.is-glow {
    filter: drop-shadow(0 0 6px currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 0 6px color-mix(in oklch, currentColor 55%, transparent));
    }
  }
  .record-map__edges.is-tracing path.is-active {
    stroke-dasharray: 5 5;
    animation: rm-edge-trace 1s linear infinite;
  }
  .record-map--linear-v .record-map__edges path, .record-map--linear-h .record-map__edges path {
    stroke-linejoin: round;
    stroke-width: var(--rm-edge-width);
  }
  .record-map__edge-label {
    font-family: var(--font-sans, inherit);
    font-size: 10px;
    font-weight: 600;
    fill: var(--text-record-map, var(--text-secondary));
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: var(--bg-record-map, var(--bg-card));
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    user-select: none;
  }
  .record-map__edge-label--success {
    fill: var(--line-record-map-connection-success, var(--text-success));
  }
  .record-map__edge-label--warning {
    fill: var(--line-record-map-connection-warning, var(--text-warning));
  }
  .record-map__edge-label--error {
    fill: var(--line-record-map-connection-error, var(--text-danger));
  }
  .record-map__edge-label--ai {
    fill: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--text-info) 80%, var(--text-purple, var(--text-info)));
    }
  }
  [data-contrast='high'] .record-map__edges path {
    stroke-width: 2px;
  }
  [data-contrast='high'] .record-map__edges path.is-active {
    stroke-width: 3px;
  }
  .record-map__nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
  }
  .record-map-node {
    position: absolute;
    width: var(--rm-node-width);
    min-height: var(--rm-node-min-h);
    padding: var(--rm-node-pad-y) var(--rm-node-pad-x);
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-record-map-node);
    background-color: var(--bg-record-map-node);
    color: var(--text-record-map-node);
    box-shadow: var(--shadow-record-map-node);
    cursor: pointer;
    text-align: left;
    transform-origin: center center;
    transition: transform var(--duration-normal) var(--ease-default), border-color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default);
  }
  .record-map-node::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background-color: var(--accent-fg, var(--border-record-map-node));
    opacity: 0.75;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .record-map-node:hover::before {
    opacity: 1;
  }
  .record-map-node.is-active::before {
    opacity: 1;
    top: 0;
    bottom: 0;
    width: 4px;
  }
  .record-map-node:hover {
    border-color: var(--border-record-map-node-hover);
    background-color: var(--bg-record-map-node-hover);
    box-shadow: var(--shadow-record-map-node-hover);
    transform: translateY(-1px);
  }
  .record-map-node:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .record-map-node.is-active {
    border-color: var(--border-record-map-node-active);
    background-color: var(--bg-record-map-node-active);
    box-shadow: var(--shadow-record-map-node-active);
  }
  .record-map-node.is-related {
    border-color: var(--border-record-map-node-active);
  }
  .record-map-node.is-faded {
    opacity: 0.4;
    background-color: var(--bg-record-map-node-faded);
  }
  .record-map-node.is-warning {
    border-color: var(--border-record-map-node-warning);
  }
  .record-map-node.is-error {
    border-color: var(--border-record-map-node-error);
  }
  .record-map-node.is-success {
    border-color: var(--border-record-map-node-success);
  }
  .record-map-node.is-suggested {
    border: 1.5px dashed var(--border-record-map-node-active);
    background-image: linear-gradient( 135deg, var(--border-focus), transparent 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 135deg, color-mix(in oklch, var(--border-focus) 6%, transparent), transparent 60% );
    }
  }
  .record-map-node.is-pinned::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--border-record-map-node-active);
    box-shadow: 0 0 0 2px var(--bg-record-map-node);
  }
  .record-map-node:hover .record-map-node__expand, .record-map-node:focus-within .record-map-node__expand, .record-map-node.is-collapsed .record-map-node__expand {
    opacity: 1;
  }
  .record-map-node[data-record-type='shipment'] {
    --accent-fg: var(--accent-record-shipment);
    --accent-bg: var(--accent-record-shipment-bg);
  }
  .record-map-node[data-record-type='order'] {
    --accent-fg: var(--accent-record-order);
    --accent-bg: var(--accent-record-order-bg);
  }
  .record-map-node[data-record-type='customer'] {
    --accent-fg: var(--accent-record-customer);
    --accent-bg: var(--accent-record-customer-bg);
  }
  .record-map-node[data-record-type='carrier'] {
    --accent-fg: var(--accent-record-carrier);
    --accent-bg: var(--accent-record-carrier-bg);
  }
  .record-map-node[data-record-type='warehouse'] {
    --accent-fg: var(--accent-record-warehouse);
    --accent-bg: var(--accent-record-warehouse-bg);
  }
  .record-map-node[data-record-type='appointment'] {
    --accent-fg: var(--accent-record-appointment);
    --accent-bg: var(--accent-record-appointment-bg);
  }
  .record-map-node[data-record-type='yard-visit'] {
    --accent-fg: var(--accent-record-yard);
    --accent-bg: var(--accent-record-yard-bg);
  }
  .record-map-node[data-record-type='invoice'] {
    --accent-fg: var(--accent-record-invoice);
    --accent-bg: var(--accent-record-invoice-bg);
  }
  .record-map-node[data-record-type='claim'] {
    --accent-fg: var(--accent-record-claim);
    --accent-bg: var(--accent-record-claim-bg);
  }
  .record-map-node[data-record-type='osd'] {
    --accent-fg: var(--accent-record-claim);
    --accent-bg: var(--accent-record-claim-bg);
  }
  .record-map-node[data-record-type='handling-unit'] {
    --accent-fg: var(--accent-record-handlingunit);
    --accent-bg: var(--accent-record-handlingunit-bg);
  }
  .record-map-node[data-record-type='transportation-unit'] {
    --accent-fg: var(--accent-record-transportation);
    --accent-bg: var(--accent-record-transportation-bg);
  }
  .record-map-node[data-record-type='document'] {
    --accent-fg: var(--accent-record-document);
    --accent-bg: var(--accent-record-document-bg);
  }
  .record-map-node[data-record-type='photo'] {
    --accent-fg: var(--accent-record-photo);
    --accent-bg: var(--accent-record-photo-bg);
  }
  .record-map-node[data-record-type='event'] {
    --accent-fg: var(--accent-record-event);
    --accent-bg: var(--accent-record-event-bg);
  }
  .record-map--flow .record-map-node {
    --rm-node-width: 200px;
  }
  .record-map--mindmap .record-map-node {
    --rm-node-width: 188px;
    border-radius: var(--radius-full);
    padding: 8px 14px;
  }
  .record-map--radial .record-map-node {
    --rm-node-width: 184px;
  }
  .record-map--tree .record-map-node {
    --rm-node-width: 200px;
  }
  [data-contrast='high'] .record-map-node {
    border-width: 1.5px;
  }
  .record-map-node[data-popover-target] {
    cursor: help;
  }
  .record-map-node[data-popover-target]:hover {
    box-shadow: var(--shadow-record-map-node-hover);
  }
  .record-map-node__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background-color: var(--accent-bg, var(--bg-record-map-node-header));
    color: var(--accent-fg, var(--text-record-map-node));
  }
  .record-map-node__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .record-map-node__type {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-fg, var(--text-record-map-muted));
  }
  .record-map-node__title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-record-map-node);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.005em;
  }
  .record-map-node__meta {
    font-size: 11.5px;
    color: var(--text-record-map-node-meta);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .record-map-node__badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
  }
  .record-map-node__badge {
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: var(--radius-sm);
    background-color: var(--accent-bg, var(--bg-record-map-node-header));
    color: var(--accent-fg, var(--text-record-map-muted));
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .record-map-node__expand {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background-color: var(--bg-record-map-node);
    border: 1px solid var(--border-record-map-node);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-record-map-muted);
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .record-map-node__expand:hover {
    color: var(--text-record-map);
    transform: translateX(-50%) scale(1.08);
  }
  .record-map-node__expand:focus-visible {
    opacity: 1;
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .record-map-node__handles {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .record-map-node__handles::before, .record-map-node__handles::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--bg-record-map-node);
    border: 1.5px solid var(--border-record-map-node);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .record-map-node__handles::before {
    left: -5px;
  }
  .record-map-node__handles::after {
    right: -5px;
  }
  .record-map--flow .record-map-node:hover .record-map-node__handles::before, .record-map--flow .record-map-node:hover .record-map-node__handles::after {
    opacity: 1;
  }
  .record-map-node__status {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--text-tertiary);
    border: 2px solid var(--bg-record-map, var(--bg-card));
    z-index: 3;
  }
  .record-map-node__status--success {
    background-color: var(--text-success);
  }
  .record-map-node__status--warning {
    background-color: var(--text-warning);
  }
  .record-map-node__status--error {
    background-color: var(--text-danger);
  }
  .record-map-node__status--live {
    background-color: var(--text-info);
    animation: rm-status-pulse 1.6s ease-in-out infinite;
  }
  .record-map-node--stacked {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding-top: 12px;
    padding-bottom: 10px;
  }
  .record-map-node--stacked::before {
    display: none;
  }
  .record-map-node--stacked .record-map-node__icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .record-map-node--stacked .record-map-node__body {
    align-items: center;
    gap: 2px;
  }
  .record-map-node--stacked .record-map-node__title {
    white-space: normal;
    line-height: 1.2;
  }
  .record-map-node--rich {
    width: calc(var(--rm-node-width) + 40px);
    min-height: 84px;
    padding: 12px 14px;
    align-items: flex-start;
  }
  .record-map-node--rich .record-map-node__icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-radius: var(--radius-lg);
  }
  .record-map-node--rich .record-map-node__title {
    font-size: 14px;
  }
  .record-map-node--rich .record-map-node__meta {
    font-size: 12px;
  }
  .record-map-node--header {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }
  .record-map-node--header::before {
    display: none;
  }
  .record-map-node--header .record-map-node__icon {
    align-self: flex-start;
    margin: 8px 12px 0;
  }
  .record-map-node--header .record-map-node__body {
    padding: 0 12px 10px;
  }
  .record-map-node--header > .record-map-node__hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--accent-bg, var(--bg-record-map-node-header));
    color: var(--accent-fg, var(--text-record-map-node));
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--accent-fg, var(--border-record-map-node));
    @supports (color: color-mix(in lab, red, red)) {
      border-bottom: 1px solid color-mix(in oklch, var(--accent-fg, var(--border-record-map-node)) 35%, transparent);
    }
  }
  .record-map-node--tinted {
    background-color: var(--accent-fg, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--accent-fg, var(--text-info)) 8%, var(--bg-record-map-node));
    }
    border-color: var(--accent-fg, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--accent-fg, var(--text-info)) 28%, var(--border-record-map-node));
    }
  }
  .record-map-node--solid {
    background-color: var(--accent-fg, var(--text-info));
    border-color: var(--accent-fg, var(--text-info));
    color: oklch(100% 0 0);
  }
  .record-map-node--solid::before {
    display: none;
  }
  .record-map-node--solid .record-map-node__title, .record-map-node--solid .record-map-node__meta, .record-map-node--solid .record-map-node__type {
    color: oklch(100% 0 0 / 0.95);
  }
  .record-map-node--solid .record-map-node__type {
    opacity: 0.85;
  }
  .record-map-node--solid .record-map-node__icon {
    background-color: oklch(100% 0 0 / 0.18);
    color: oklch(100% 0 0);
  }
  .record-map-node--outline {
    background-color: transparent;
    box-shadow: none;
    border-style: dashed;
    border-color: var(--accent-fg, var(--border-record-map-node));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--accent-fg, var(--border-record-map-node)) 60%, transparent);
    }
  }
  .record-map-node--glass {
    background-color: var(--bg-record-map-node);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-record-map-node) 60%, transparent);
    }
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .record-map-node--focal, .record-map.is-focal .record-map-node {
    width: calc(var(--rm-node-width) + 48px);
    min-height: 88px;
    padding: 14px 16px;
    border-width: 1.5px;
    box-shadow: var(--shadow-record-map-node-active);
    background-image: linear-gradient( 135deg, var(--accent-fg, var(--text-info)), var(--bg-record-map-node) 70% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 135deg, color-mix(in oklch, var(--accent-fg, var(--text-info)) 10%, var(--bg-record-map-node)), var(--bg-record-map-node) 70% );
    }
  }
  .record-map-node--focal .record-map-node__icon {
    width: 44px;
    height: 44px;
    font-size: 17px;
    border-radius: var(--radius-lg);
  }
  .record-map-node--focal .record-map-node__title {
    font-size: 15px;
    font-weight: 700;
  }
  .record-map-node--focal .record-map-node__meta {
    font-size: 12px;
  }
  .record-map-node--focal::before {
    width: 4px;
    opacity: 1;
    top: 0;
    bottom: 0;
  }
  .record-map-node--compact, .record-map--dense .record-map-node {
    --rm-node-width: 156px;
    --rm-node-min-h: 48px;
    --rm-node-pad-y: 6px;
    --rm-node-pad-x: 8px;
    border-radius: var(--radius-md);
  }
  .record-map-node--compact .record-map-node__icon, .record-map--dense .record-map-node .record-map-node__icon {
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-radius: var(--radius-sm);
  }
  .record-map-node--compact .record-map-node__title, .record-map--dense .record-map-node .record-map-node__title {
    font-size: 11.5px;
    line-height: 1.25;
  }
  .record-map-node--compact .record-map-node__type, .record-map--dense .record-map-node .record-map-node__type {
    font-size: 9px;
  }
  .record-map-node--compact .record-map-node__meta, .record-map--dense .record-map-node .record-map-node__meta {
    display: none;
  }
  .record-map-cluster {
    position: absolute;
    border: 1px dashed var(--border-record-map-cluster);
    border-radius: var(--radius-xl);
    background-color: var(--bg-record-map-cluster);
    padding: 28px 16px 16px;
    backdrop-filter: blur(8px);
  }
  .record-map-cluster__label {
    position: absolute;
    top: 8px;
    left: 12px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-record-map-muted);
  }
  .record-map-cluster__label > i {
    margin-right: 4px;
    opacity: 0.7;
  }
  .record-map-toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-record-map);
    background-color: var(--bg-record-map-toolbar);
    box-shadow: var(--shadow-record-map-floating);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .record-map-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .record-map-toolbar__divider {
    width: 1px;
    height: 18px;
    background-color: var(--border-record-map);
    margin: 0 4px;
  }
  .record-map-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    border-radius: var(--radius-md);
    border: 0;
    background: transparent;
    color: var(--text-record-map);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .record-map-toolbar__btn:hover {
    background-color: var(--bg-record-map-node-hover);
  }
  .record-map-toolbar__btn.is-active {
    background-color: var(--bg-record-map-node-active);
    color: var(--border-record-map-node-active);
  }
  .record-map-toolbar__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .record-map-toolbar__zoom {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-record-map-muted);
    min-width: 42px;
    text-align: center;
  }
  .record-map-filterbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-record-map);
    background-color: var(--bg-record-map-toolbar);
    box-shadow: var(--shadow-record-map-floating);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: calc(100% - 24px);
  }
  .record-map-filterbar__search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 36px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-record-map-node);
    box-shadow: inset 0 0 0 1px var(--border-record-map);
    color: var(--text-record-map);
    min-width: 200px;
    transition: box-shadow var(--duration-fast) var(--ease-default);
  }
  .record-map-filterbar__search:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .record-map-filterbar__search input {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text-record-map);
    font-size: 13px;
    min-width: 0;
  }
  .record-map-filterbar__search input::placeholder {
    color: var(--text-record-map-subtle);
  }
  .record-map-filterbar__search i {
    color: var(--text-record-map-subtle);
    font-size: 12px;
  }
  .record-map-filterbar__chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  @media (max-width: 768px) {
    .record-map-filterbar__chips {
      display: none;
    }
  }
  .record-map-filterbar__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    font-size: 11px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-record-map);
    background-color: transparent;
    color: var(--text-record-map-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
  }
  .record-map-filterbar__chip:hover {
    color: var(--text-record-map);
    border-color: var(--border-record-map-node-hover);
  }
  .record-map-filterbar__chip.is-active {
    color: var(--border-record-map-node-active);
    border-color: var(--border-record-map-node-active);
    background-color: var(--bg-record-map-node-active);
  }
  .record-map-filterbar__chip:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .record-map-filterbar__chip .chip-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--accent-fg, currentColor);
  }
  .record-map-minimap {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    width: 160px;
    height: 110px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-record-map);
    background-color: var(--bg-record-map-minimap);
    box-shadow: var(--shadow-record-map-floating);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    cursor: pointer;
  }
  @media (max-width: 768px) {
    .record-map-minimap {
      display: none;
    }
  }
  .record-map-minimap__dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--text-record-map-subtle);
    transform: translate(-50%, -50%);
  }
  .record-map-minimap__dot.is-active {
    background-color: var(--border-record-map-node-active);
    box-shadow: 0 0 0 3px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--border-focus) 22%, transparent);
    }
  }
  .record-map-minimap__viewport {
    position: absolute;
    border: 1px solid var(--border-record-map-node-active);
    background-color: var(--bg-record-map-minimap-viewport);
    border-radius: var(--radius-xs);
  }
  .record-map-inspector {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: 320px;
    z-index: 3;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-record-map);
    background-color: var(--bg-record-map-inspector);
    box-shadow: var(--shadow-record-map-floating);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default);
  }
  .record-map-inspector.is-open {
    transform: translateX(0);
    opacity: 1;
  }
  @media (max-width: 768px) {
    .record-map-inspector {
      width: 88%;
    }
  }
  .record-map-inspector__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-record-map);
  }
  .record-map-inspector__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-bg, var(--bg-record-map-node-header));
    color: var(--accent-fg, var(--text-record-map));
    flex: 0 0 auto;
  }
  .record-map-inspector__title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .record-map-inspector__title-type {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-record-map-muted);
  }
  .record-map-inspector__title-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-record-map);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .record-map-inspector__close {
    border: 0;
    background: transparent;
    color: var(--text-record-map-muted);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .record-map-inspector__close:hover {
    background-color: var(--bg-record-map-node-hover);
    color: var(--text-record-map);
  }
  .record-map-inspector__close:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .record-map-inspector__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .record-map-inspector__section-title {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-record-map-muted);
    margin-bottom: 6px;
  }
  .record-map-inspector__fields {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    column-gap: 12px;
    row-gap: 6px;
    font-size: 12.5px;
  }
  .record-map-inspector__fields dt {
    color: var(--text-record-map-muted);
  }
  .record-map-inspector__fields dd {
    color: var(--text-record-map);
    margin: 0;
  }
  .record-map-inspector__related {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .record-map-inspector__related-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-record-map);
    background-color: var(--bg-record-map-node);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
  }
  .record-map-inspector__related-item:hover {
    background-color: var(--bg-record-map-node-hover);
    border-color: var(--border-record-map-node-hover);
  }
  .record-map-inspector__related-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .record-map-inspector__related-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-bg, var(--bg-record-map-node-header));
    color: var(--accent-fg, var(--text-record-map));
    font-size: 10px;
    flex: 0 0 auto;
  }
  .record-map-inspector__related-meta {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--text-record-map);
  }
  .record-map-inspector__related-meta small {
    display: block;
    color: var(--text-record-map-muted);
    font-size: 10.5px;
  }
  .record-map-ai-summary {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    max-width: 360px;
    padding: 10px 12px 10px 38px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-record-map);
    background: var(--bg-record-map-ai);
    color: var(--text-record-map);
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: var(--shadow-record-map-floating);
    backdrop-filter: blur(8px);
  }
  .record-map-ai-summary::before {
    content: '\f890';
    font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 300;
    position: absolute;
    left: 12px;
    top: 11px;
    color: var(--text-record-map-ai);
    font-size: 14px;
  }
  @media (max-width: 768px) {
    .record-map-ai-summary {
      right: 12px;
      max-width: none;
    }
  }
  .record-map-ai-summary__label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-record-map-ai);
    margin-bottom: 2px;
  }
  .record-map-ai-summary__text strong {
    color: var(--text-record-map-ai);
    font-weight: 600;
  }
  .record-map-breadcrumb {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-record-map);
    background-color: var(--bg-record-map-toolbar);
    box-shadow: var(--shadow-record-map-floating);
    backdrop-filter: blur(8px);
    font-size: 12px;
    color: var(--text-record-map-muted);
    max-width: 60%;
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .record-map-breadcrumb {
      max-width: 80%;
    }
  }
  .record-map-breadcrumb a, .record-map-breadcrumb__crumb {
    color: var(--text-record-map-muted);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .record-map-breadcrumb a:hover, .record-map-breadcrumb__crumb:hover {
    background-color: var(--bg-record-map-node-hover);
    color: var(--text-record-map);
  }
  .record-map-breadcrumb a:focus-visible, .record-map-breadcrumb__crumb:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .record-map-breadcrumb__crumb.is-current {
    color: var(--text-record-map);
    font-weight: 500;
  }
  .record-map-breadcrumb__sep {
    opacity: 0.5;
  }
  .record-map-hover {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    width: 260px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-record-map);
    background-color: var(--bg-record-map-inspector);
    box-shadow: var(--shadow-record-map-floating);
    font-size: 12px;
    color: var(--text-record-map);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .record-map-hover.is-open {
    opacity: 1;
    transform: translateY(0);
  }
  .record-map-hover__title {
    font-weight: 600;
    margin-bottom: 4px;
  }
  .record-map-hover__row {
    display: flex;
    gap: 8px;
    color: var(--text-record-map-muted);
    font-size: 11px;
  }
  .record-map-hover__row + .record-map-hover__row {
    margin-top: 2px;
  }
  .record-map-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: var(--text-record-map-muted);
  }
  .record-map-empty-state__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-record-map-node-hover);
    color: var(--text-record-map-subtle);
    font-size: 22px;
    margin-bottom: 4px;
  }
  .record-map-empty-state__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-record-map);
  }
  .record-map-empty-state__body {
    max-width: 420px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  .record-map--compact {
    min-height: 280px;
    --rm-node-width: 168px;
    --rm-node-min-h: 52px;
  }
  .record-map--compact .record-map-toolbar, .record-map--compact .record-map-minimap, .record-map--compact .record-map-breadcrumb, .record-map--compact .record-map-node__meta, .record-map--compact .record-map-node__badges {
    display: none;
  }
  .record-map--embedded {
    min-height: 220px;
    border-radius: var(--radius-xl);
  }
  .record-map--embedded .record-map-toolbar, .record-map--embedded .record-map-filterbar, .record-map--embedded .record-map-minimap {
    display: none;
  }
  .record-map--embedded .record-map__canvas {
    cursor: default;
  }
  .record-map--embedded .record-map-node {
    cursor: pointer;
  }
  .record-map--mindmap .record-map__edges path {
    stroke: var(--line-record-map-connection);
    opacity: 0.8;
  }
  .record-map--mindmap .record-map-node {
    border-radius: var(--radius-full);
    --rm-node-width: 188px;
    padding: 8px 14px;
  }
  .record-map--timeline .record-map__canvas {
    background-image: linear-gradient( to bottom, transparent calc(50% - 0.5px), var(--border-record-map) calc(50% - 0.5px), var(--border-record-map) calc(50% + 0.5px), transparent calc(50% + 0.5px) );
  }
  .record-map--timeline .record-map__grid {
    display: none;
  }
  .record-map--radial .record-map-node {
    --rm-node-width: 184px;
  }
  .record-map--tree .record-map-node {
    --rm-node-width: 200px;
  }
  .record-map--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: 1fr;
  }
  .record-map--split .record-map__canvas {
    grid-column: 1;
  }
  .record-map--split .record-map-inspector {
    position: static;
    transform: none !important;
    opacity: 1;
    width: 100%;
    grid-column: 2;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
    margin: 0;
  }
  .record-map--flow .record-map__viewport {
    transform-origin: 0 0;
  }
  .record-map--linear-v .record-map__grid, .record-map--linear-h .record-map__grid {
    opacity: 0.25;
  }
  .record-map--linear-v::before, .record-map--linear-h::before {
    background: linear-gradient(180deg, var(--text-info), transparent 50%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, color-mix(in oklch, var(--text-info) 4%, transparent), transparent 50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .record-map__viewport {
      transition: none;
    }
    .record-map.is-loading::after {
      animation: none;
    }
    .record-map.is-relaying .record-map-node, .record-map.is-relaying .record-map__edges path {
      transition: none;
    }
    .record-map__edges path[data-flow='ai'], .record-map__edges path[data-rel-style='flow'], .record-map__edges path.is-flowing {
      animation: none;
    }
    .record-map__edges.is-tracing path.is-active {
      animation: none;
      stroke-dasharray: 0;
    }
    .record-map-node__status--live {
      animation: none;
    }
  }
}
@layer utilities {
  --ease-* tokens and
 *            freeze under prefers-reduced-motion.
 * ========================================================================== */


/* --- Section Header --- */
.dash-section {
  @apply flex items-center justify-between pb-2 mb-4;
  border-bottom: 1px solid var(--border-divider);
}

.dash-section__title {
  @apply text-sm font-semibold;
  color: var(--text-primary);
}

.dash-section__subtitle {
  @apply text-2xs mt-0.5;
  color: var(--text-tertiary);
}

.dash-section__actions {
  @apply flex items-center gap-2;
}


/* --- Metric Card (extended stat-card variants) --- */

/* Goal / Progress metric */
.stat-card__progress {
  @apply mt-3;
}

.stat-card__progress-bar {
  @apply w-full rounded-full overflow-hidden;
  height: 6px;
  background-color: var(--bg-tertiary-subtle);
}

.stat-card__progress-fill {
  @apply h-full rounded-full;
  /* Default goal progress fills in the BRAND accent (violet), not the pre-3c
     info-blue --bg-primary-solid. */
  background-color: var(--bg-brand-solid);
  transition: width var(--duration-slower) var(--ease-out);
}

.stat-card__progress-fill--success {
  background-color: var(--bg-success-solid);
}

.stat-card__progress-fill--warning {
  background-color: var(--bg-warning-solid);
}

.stat-card__progress-fill--danger {
  background-color: var(--bg-danger-solid);
}

.stat-card__progress-label {
  @apply flex justify-between text-2xs mt-1;
  color: var(--text-tertiary);
}

/* Delta comparison */
.stat-card__delta {
  @apply flex items-center gap-3 mt-2 text-xs;
}

.stat-card__delta-item {
  @apply flex items-center gap-1;
}

.stat-card__delta-item--current {
  @apply font-semibold;
  color: var(--text-primary);
}

.stat-card__delta-item--previous {
  color: var(--text-tertiary);
}

/* Scorecard variant */
.stat-card--scorecard {
  @apply text-center;
}

.stat-card--scorecard .stat-card__value {
  @apply text-3xl;
}

.stat-card--scorecard .stat-card__icon {
  @apply mx-auto mb-2 w-10 h-10 text-base;
}

/* Semantic accent variants */
.stat-card--accent-success {
  border-left: 3px solid var(--bg-success-solid);
  @apply accent-edge-l;
}

.stat-card--accent-warning {
  border-left: 3px solid var(--bg-warning-solid);
  @apply accent-edge-l;
}

.stat-card--accent-danger {
  border-left: 3px solid var(--bg-danger-solid);
  @apply accent-edge-l;
}

.stat-card--accent-info {
  border-left: 3px solid var(--bg-info-solid);
  @apply accent-edge-l;
}

/* Clickable stat card */
.stat-card--clickable {
  @apply cursor-pointer;
  transition: box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

.stat-card--clickable:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-primary);
}

.stat-card--clickable:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* --- Summary List Widget --- */
.dash-list {
  @apply flex flex-col;
}

.dash-list__item {
  @apply flex items-center justify-between px-3 py-2 border-b;
  border-color: var(--border-secondary);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dash-list__item:last-child {
  @apply border-b-0;
}

.dash-list__item:hover {
  background-color: var(--bg-primary-subtle);
}

.dash-list__rank {
  @apply flex-shrink-0 w-6 text-center text-xs font-semibold tabular-nums;
  color: var(--text-tertiary);
}

.dash-list__content {
  @apply flex-1 min-w-0 ml-2;
}

.dash-list__label {
  @apply text-sm truncate;
  color: var(--text-primary);
}

.dash-list__meta {
  @apply text-2xs;
  color: var(--text-tertiary);
}

.dash-list__value {
  @apply flex-shrink-0 text-sm font-semibold tabular-nums ml-3;
  color: var(--text-primary);
}

.dash-list__bar {
  @apply flex-shrink-0 ml-3;
  width: 60px;
}

.dash-list__bar-track {
  @apply w-full rounded-full;
  height: 4px;
  background-color: var(--bg-tertiary-subtle);
}

.dash-list__bar-fill {
  @apply h-full rounded-full;
  background-color: var(--bg-brand-solid);
}

/* Action list variant */
.dash-list__item--action {
  @apply cursor-pointer;
}

.dash-list__item--action:hover {
  /* Brand-subtle tint signals an actionable row (no --bg-brand-subtle token). */
  background-color: var(--bg-brand-solid);
}

.dash-list__item--action:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* Priority markers */
.dash-list__priority {
  @apply flex-shrink-0 w-1.5 h-1.5 rounded-full mr-2;
}

.dash-list__priority--high {
  background-color: var(--bg-danger-solid);
}

.dash-list__priority--medium {
  background-color: var(--bg-warning-solid);
}

.dash-list__priority--low {
  background-color: var(--bg-success-solid);
}


/* --- Status Board --- */
.dash-status {
  @apply grid gap-3;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.dash-status__item {
  @apply flex items-center gap-2 rounded-lg border px-3 py-2;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-status__dot {
  @apply flex-shrink-0 w-2.5 h-2.5 rounded-full;
}

.dash-status__dot--operational {
  background-color: var(--bg-success-solid);
}

.dash-status__dot--degraded {
  background-color: var(--bg-warning-solid);
}

.dash-status__dot--down {
  background-color: var(--bg-danger-solid);
}

.dash-status__dot--maintenance {
  background-color: var(--bg-info-solid);
}

.dash-status__dot--unknown {
  background-color: var(--bg-tertiary);
}

.dash-status__label {
  @apply text-xs truncate;
  color: var(--text-primary);
}

.dash-status__value {
  @apply text-2xs ml-auto;
  color: var(--text-tertiary);
}

/* Pulse animation for live status */
.dash-status__dot--pulse {
  animation: dash-pulse var(--duration-progress-indeterminate) var(--ease-in-out) infinite;
}

@keyframes dash-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* --- Alert Surface --- */
.dash-alert {
  @apply flex items-start gap-3 rounded-lg border px-4 py-3;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-alert__icon {
  @apply flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-lg text-sm;
}

.dash-alert__content {
  @apply flex-1 min-w-0;
}

.dash-alert__title {
  @apply text-sm font-medium;
  color: var(--text-primary);
}

.dash-alert__body {
  @apply text-xs mt-0.5;
  color: var(--text-secondary);
}

.dash-alert__meta {
  @apply text-2xs mt-1;
  color: var(--text-tertiary);
}

.dash-alert__dismiss {
  @apply flex-shrink-0 p-1 rounded-sm text-xs cursor-pointer border-0 bg-transparent;
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-default);
}

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

.dash-alert__dismiss:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Dismiss transition — JS toggles .is-dismissing; freezes under reduced-motion */
.dash-alert.is-dismissing {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default),
              max-height var(--duration-normal) var(--ease-default),
              padding var(--duration-normal) var(--ease-default),
              margin var(--duration-normal) var(--ease-default);
}

/* Semantic alert variants */
.dash-alert--danger {
  border-left: 3px solid var(--bg-danger-solid);
  @apply accent-edge-l;
}

.dash-alert--danger .dash-alert__icon {
  background-color: var(--bg-danger-subtle);
  color: var(--text-danger);
}

.dash-alert--warning {
  border-left: 3px solid var(--bg-warning-solid);
  @apply accent-edge-l;
}

.dash-alert--warning .dash-alert__icon {
  background-color: var(--bg-warning-subtle);
  color: var(--text-warning);
}

.dash-alert--info {
  border-left: 3px solid var(--bg-info-solid);
  @apply accent-edge-l;
}

.dash-alert--info .dash-alert__icon {
  background-color: var(--bg-info-subtle);
  color: var(--text-info);
}

.dash-alert--success {
  border-left: 3px solid var(--bg-success-solid);
  @apply accent-edge-l;
}

.dash-alert--success .dash-alert__icon {
  background-color: var(--bg-success-subtle);
  color: var(--text-success);
}


/* --- Chart Container --- */
.dash-chart {
  @apply rounded-lg border;
  background-color: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.dash-chart__header {
  @apply flex items-center justify-between px-4 py-3 border-b;
  border-color: var(--border-secondary);
}

.dash-chart__title {
  @apply text-sm font-medium;
  color: var(--text-primary);
}

.dash-chart__body {
  @apply p-4;
}

.dash-chart__placeholder {
  @apply flex items-center justify-center rounded-md;
  height: 200px;
  background-color: var(--bg-tertiary-subtle);
  border: 1px dashed var(--border-secondary);
}

.dash-chart__placeholder-text {
  @apply text-xs;
  color: var(--text-tertiary);
}

.dash-chart__footer {
  @apply flex items-center justify-between px-4 py-2 border-t text-2xs;
  border-color: var(--border-secondary);
  color: var(--text-tertiary);
}


/* --- Filter Bar --- */
.dash-filter-bar {
  @apply flex items-center gap-3 px-4 py-2 rounded-lg border;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-filter-bar__group {
  @apply flex items-center gap-2;
}

.dash-filter-bar__label {
  @apply text-2xs font-medium uppercase tracking-wide;
  color: var(--text-tertiary);
}

.dash-filter-bar__divider {
  @apply self-stretch;
  width: 1px;
  background-color: var(--border-secondary);
}

.dash-filter-bar__spacer {
  @apply flex-1;
}


/* --- Segmented Control --- */
.dash-segmented {
  @apply inline-flex rounded-lg border p-0.5;
  background-color: var(--bg-tertiary-subtle);
  border-color: var(--border-secondary);
}

.dash-segmented__item {
  @apply px-3 py-1 text-xs font-medium rounded-md cursor-pointer border-0 bg-transparent;
  color: var(--text-secondary);
  transition: color var(--duration-normal) var(--ease-default),
              background-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

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

.dash-segmented__item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-segmented__item.is-active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}


/* --- Live Indicator --- */
.dash-live {
  @apply inline-flex items-center gap-1.5 text-2xs font-medium;
  color: var(--text-success);
}

.dash-live__dot {
  @apply w-1.5 h-1.5 rounded-full;
  background-color: var(--bg-success-solid);
  animation: dash-pulse var(--duration-progress-indeterminate) var(--ease-in-out) infinite;
}


/* --- Dashboard Header --- */
.dash-header {
  @apply flex items-center justify-between px-4 py-3 border-b;
  border-color: var(--border-divider);
  background-color: var(--bg-surface);
}

.dash-header__title {
  @apply text-base font-semibold;
  color: var(--text-primary);
}

.dash-header__subtitle {
  @apply text-xs;
  color: var(--text-secondary);
}

.dash-header__actions {
  @apply flex items-center gap-2;
}


/* --- Queue Widget --- */
.dash-queue {
  @apply flex items-center gap-4 rounded-lg border px-4 py-3;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-queue__count {
  @apply text-2xl font-bold tabular-nums;
  color: var(--text-primary);
}

.dash-queue__info {
  @apply flex-1 min-w-0;
}

.dash-queue__label {
  @apply text-sm font-medium;
  color: var(--text-primary);
}

.dash-queue__meta {
  @apply text-2xs;
  color: var(--text-tertiary);
}

.dash-queue__action {
  @apply flex-shrink-0;
}


/* --- Skeleton Dashboard States --- */
.dash-skeleton {
  @apply rounded-lg border p-4;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-skeleton__line {
  @apply rounded-sm;
  background-color: var(--bg-tertiary-subtle);
  animation: dash-shimmer var(--duration-progress-indeterminate) var(--ease-default) infinite;
}

.dash-skeleton__line--title {
  height: 12px;
  width: 60%;
  @apply mb-3;
}

.dash-skeleton__line--value {
  height: 24px;
  width: 40%;
  @apply mb-2;
}

.dash-skeleton__line--text {
  height: 8px;
  width: 80%;
  @apply mb-1.5;
}

.dash-skeleton__line--bar {
  height: 6px;
  width: 100%;
  @apply mt-3;
}

@keyframes dash-shimmer {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}


/* --- Empty State (dashboard context) --- */
.dash-empty {
  @apply flex flex-col items-center justify-center text-center py-8 px-4;
}

.dash-empty__icon {
  @apply text-3xl mb-3;
  color: var(--text-quaternary);
}

.dash-empty__title {
  @apply text-sm font-medium;
  color: var(--text-secondary);
}

.dash-empty__body {
  @apply text-xs mt-1;
  color: var(--text-tertiary);
}


/* --- Stale / Reconnect State --- */
.dash-stale {
  @apply flex items-center gap-2 px-3 py-1.5 rounded-md text-2xs;
  background-color: var(--bg-warning-subtle);
  color: var(--text-warning);
}

.dash-stale__icon {
  @apply text-xs;
}


/* --- Attention Needed Panel --- */
.dash-attention {
  @apply rounded-lg border overflow-hidden;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-attention__header {
  @apply flex items-center gap-2 px-4 py-2.5 text-sm font-medium;
  background-color: var(--bg-danger-subtle);
  color: var(--text-danger);
}

.dash-attention__count {
  @apply inline-flex items-center justify-center w-5 h-5 rounded-full text-2xs font-bold;
  background-color: var(--bg-danger-solid);
  color: var(--alpha-white-100);
}

.dash-attention__body {
  @apply p-0;
}


/* --- Responsive --- */
@media (max-width: 639px) {
  .dash-filter-bar {
    @apply flex-wrap;
  }

  .dash-status {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ========================================
   Advanced Dashboard Features
   Interactive behaviors, live data,
   drag-reorder, tabbed panels, notifications
   ======================================== */


/* --- Tabbed Dashboard Panel --- */
.dash-tabbed {
  @apply rounded-lg border overflow-hidden;
  background-color: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.dash-tabbed__tabs {
  @apply flex border-b;
  border-color: var(--border-secondary);
  background-color: var(--bg-surface);
}

.dash-tabbed__tab {
  @apply px-4 py-2.5 text-xs font-medium cursor-pointer border-0 bg-transparent border-b-2;
  color: var(--text-secondary);
  border-color: transparent;
  transition: color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

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

.dash-tabbed__tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-tabbed__tab.is-active {
  color: var(--text-primary);
  border-color: var(--bg-brand-solid);
}

.dash-tabbed__tab-count {
  @apply inline-flex items-center justify-center ml-1.5 px-1.5 rounded-full text-2xs font-semibold;
  min-width: 18px;
  height: 16px;
  background-color: var(--bg-tertiary-subtle);
  color: var(--text-tertiary);
}

.dash-tabbed__tab.is-active .dash-tabbed__tab-count {
  background-color: var(--bg-brand-solid);
  color: var(--text-link);
}

.dash-tabbed__panel {
  @apply p-4;
  display: none;
}

.dash-tabbed__panel.is-active {
  display: block;
}


/* --- Drag-Reorderable Widget Grid --- */
.dash-reorder {
  @apply grid gap-4;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.dash-reorder__item {
  @apply rounded-lg border;
  background-color: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
}

.dash-reorder__item.is-dragging {
  @apply opacity-50;
  box-shadow: var(--shadow-lg);
  border-color: var(--border-focus);
  transform: rotate(1deg);
}

.dash-reorder__item.is-drag-over {
  border-color: var(--border-focus);
  border-style: dashed;
}

.dash-reorder__handle {
  @apply flex items-center gap-2 px-4 py-2.5 cursor-grab border-b;
  border-color: var(--border-secondary);
}

.dash-reorder__handle:active {
  cursor: grabbing;
}

.dash-reorder__handle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-reorder__grip {
  @apply text-xs;
  color: var(--text-quaternary);
}

.dash-reorder__title {
  @apply text-sm font-medium flex-1;
  color: var(--text-primary);
}

.dash-reorder__actions {
  @apply flex items-center gap-1;
}

.dash-reorder__body {
  @apply p-4;
}

.dash-reorder__placeholder {
  @apply rounded-lg border-2 border-dashed flex items-center justify-center;
  border-color: var(--border-focus);
  background-color: var(--bg-brand-solid);
  min-height: 120px;
  opacity: 0.5;
}


/* --- Notification Center --- */
.dash-notif {
  @apply flex flex-col rounded-lg border overflow-hidden;
  background-color: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
  max-height: 480px;
}

.dash-notif__header {
  @apply flex items-center justify-between px-4 py-3 border-b flex-shrink-0;
  border-color: var(--border-secondary);
}

.dash-notif__title {
  @apply text-sm font-semibold;
  color: var(--text-primary);
}

.dash-notif__badge {
  @apply inline-flex items-center justify-center px-1.5 rounded-full text-2xs font-bold;
  min-width: 18px;
  height: 18px;
  background-color: var(--bg-danger-solid);
  color: var(--alpha-white-100);
}

.dash-notif__tabs {
  @apply flex border-b flex-shrink-0;
  border-color: var(--border-secondary);
}

.dash-notif__tab {
  @apply flex-1 px-3 py-2 text-2xs font-medium text-center cursor-pointer border-0 bg-transparent border-b-2;
  color: var(--text-tertiary);
  border-color: transparent;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

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

.dash-notif__tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-notif__tab.is-active {
  color: var(--text-primary);
  border-color: var(--bg-brand-solid);
}

.dash-notif__body {
  @apply flex-1 overflow-y-auto;
}

.dash-notif__item {
  @apply flex items-start gap-3 px-4 py-3 border-b;
  border-color: var(--border-secondary);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dash-notif__item:last-child {
  @apply border-b-0;
}

.dash-notif__item:hover {
  background-color: var(--bg-primary-subtle);
}

.dash-notif__item.is-unread {
  /* Brand-subtle unread tint (no --bg-brand-subtle token). */
  background-color: var(--bg-brand-solid);
}

.dash-notif__item-icon {
  @apply flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full text-xs;
  background-color: var(--bg-tertiary-subtle);
  color: var(--text-secondary);
}

.dash-notif__item-icon--danger {
  background-color: var(--bg-danger-subtle);
  color: var(--text-danger);
}

.dash-notif__item-icon--warning {
  background-color: var(--bg-warning-subtle);
  color: var(--text-warning);
}

.dash-notif__item-icon--success {
  background-color: var(--bg-success-subtle);
  color: var(--text-success);
}

.dash-notif__item-icon--info {
  background-color: var(--bg-info-subtle);
  color: var(--text-info);
}

.dash-notif__item-content {
  @apply flex-1 min-w-0;
}

.dash-notif__item-title {
  @apply text-xs font-medium;
  color: var(--text-primary);
}

.dash-notif__item-body {
  @apply text-2xs mt-0.5;
  color: var(--text-secondary);
}

.dash-notif__item-time {
  @apply text-2xs mt-1;
  color: var(--text-tertiary);
}

.dash-notif__item-dot {
  @apply flex-shrink-0 w-2 h-2 rounded-full mt-1.5;
  background-color: var(--bg-brand-solid);
}

.dash-notif__footer {
  @apply flex items-center justify-center px-4 py-2.5 border-t text-xs font-medium cursor-pointer flex-shrink-0 border-0;
  border-top: 1px solid var(--border-secondary);
  background-color: transparent;
  color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dash-notif__footer:hover {
  background-color: var(--bg-primary-subtle);
}

.dash-notif__footer:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}


/* --- Live Counter (animated value) --- */
.dash-counter {
  @apply tabular-nums;
  transition: color var(--duration-slow) var(--ease-default);
}

.dash-counter.is-updating {
  color: var(--text-primary);
}

.dash-counter__flash {
  @apply inline-block;
  animation: dash-counter-flash var(--duration-slower) var(--ease-default);
}

@keyframes dash-counter-flash {
  0%   { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 1; }
}

.dash-counter__trend {
  @apply inline-flex items-center gap-0.5 text-2xs font-medium ml-1.5;
}

.dash-counter__trend--up {
  color: var(--text-success);
}

.dash-counter__trend--down {
  color: var(--text-danger);
}


/* --- Feed Density Toggle --- */
.dash-density {
  @apply inline-flex rounded-md border p-0.5;
  background-color: var(--bg-tertiary-subtle);
  border-color: var(--border-secondary);
}

.dash-density__btn {
  @apply p-1.5 text-xs rounded-sm cursor-pointer border-0 bg-transparent leading-none;
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

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

.dash-density__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-density__btn.is-active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}


/* --- Load More --- */
.dash-load-more {
  @apply flex items-center justify-center py-3;
}

.dash-load-more__btn {
  @apply px-4 py-1.5 text-xs font-medium rounded-md border cursor-pointer;
  background-color: var(--bg-card);
  border-color: var(--border-secondary);
  color: var(--text-secondary);
  transition: color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

.dash-load-more__btn:hover {
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.dash-load-more__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.dash-load-more__btn.is-loading {
  @apply pointer-events-none opacity-60;
}

.dash-load-more__spinner {
  @apply inline-block w-3 h-3 mr-1.5 border-2 rounded-full;
  border-color: var(--border-secondary);
  border-top-color: var(--text-primary);
  animation: dash-spin var(--duration-spinner-rotate) linear infinite;
}

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


/* --- Saved View Indicator --- */
.dash-saved-view {
  @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-md border text-xs;
  background-color: var(--bg-card);
  border-color: var(--border-secondary);
  color: var(--text-secondary);
}

.dash-saved-view__name {
  @apply font-medium;
  color: var(--text-primary);
}

.dash-saved-view__actions {
  @apply flex items-center gap-1;
}

.dash-saved-view__btn {
  @apply p-0.5 text-2xs cursor-pointer border-0 bg-transparent rounded-sm;
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-default);
}

.dash-saved-view__btn:hover {
  color: var(--text-primary);
}

.dash-saved-view__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* --- Gauge Widget (radial in dashboard context) --- */
.dash-gauge {
  @apply flex flex-col items-center gap-2 p-4;
}

.dash-gauge__label {
  @apply text-xs font-medium;
  color: var(--text-secondary);
}

.dash-gauge__value {
  @apply text-2xs;
  color: var(--text-tertiary);
}


/* --- Auto-Append Feed Item --- */
.dash-feed-item-enter {
  animation: dash-feed-enter var(--duration-slow) var(--ease-out);
}

@keyframes dash-feed-enter {
  0% {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}


/* --- Reduced motion — freeze every animation + non-essential transition --- */
@media (prefers-reduced-motion: reduce) {
  .dash-status__dot--pulse,
  .dash-live__dot,
  .dash-skeleton__line,
  .dash-load-more__spinner,
  .dash-counter__flash,
  .dash-feed-item-enter {
    animation: none;
  }

  .stat-card__progress-fill,
  .dash-counter,
  .dash-reorder__item,
  .dash-alert.is-dismissing {
    transition: none;
  }
};
  @supports (color: color-mix(in lab, red, red)) {
    --ease-* tokens and
 *            freeze under prefers-reduced-motion.
 * ========================================================================== */


/* --- Section Header --- */
.dash-section {
  @apply flex items-center justify-between pb-2 mb-4;
  border-bottom: 1px solid var(--border-divider);
}

.dash-section__title {
  @apply text-sm font-semibold;
  color: var(--text-primary);
}

.dash-section__subtitle {
  @apply text-2xs mt-0.5;
  color: var(--text-tertiary);
}

.dash-section__actions {
  @apply flex items-center gap-2;
}


/* --- Metric Card (extended stat-card variants) --- */

/* Goal / Progress metric */
.stat-card__progress {
  @apply mt-3;
}

.stat-card__progress-bar {
  @apply w-full rounded-full overflow-hidden;
  height: 6px;
  background-color: var(--bg-tertiary-subtle);
}

.stat-card__progress-fill {
  @apply h-full rounded-full;
  /* Default goal progress fills in the BRAND accent (violet), not the pre-3c
     info-blue --bg-primary-solid. */
  background-color: var(--bg-brand-solid);
  transition: width var(--duration-slower) var(--ease-out);
}

.stat-card__progress-fill--success {
  background-color: var(--bg-success-solid);
}

.stat-card__progress-fill--warning {
  background-color: var(--bg-warning-solid);
}

.stat-card__progress-fill--danger {
  background-color: var(--bg-danger-solid);
}

.stat-card__progress-label {
  @apply flex justify-between text-2xs mt-1;
  color: var(--text-tertiary);
}

/* Delta comparison */
.stat-card__delta {
  @apply flex items-center gap-3 mt-2 text-xs;
}

.stat-card__delta-item {
  @apply flex items-center gap-1;
}

.stat-card__delta-item--current {
  @apply font-semibold;
  color: var(--text-primary);
}

.stat-card__delta-item--previous {
  color: var(--text-tertiary);
}

/* Scorecard variant */
.stat-card--scorecard {
  @apply text-center;
}

.stat-card--scorecard .stat-card__value {
  @apply text-3xl;
}

.stat-card--scorecard .stat-card__icon {
  @apply mx-auto mb-2 w-10 h-10 text-base;
}

/* Semantic accent variants */
.stat-card--accent-success {
  border-left: 3px solid var(--bg-success-solid);
  @apply accent-edge-l;
}

.stat-card--accent-warning {
  border-left: 3px solid var(--bg-warning-solid);
  @apply accent-edge-l;
}

.stat-card--accent-danger {
  border-left: 3px solid var(--bg-danger-solid);
  @apply accent-edge-l;
}

.stat-card--accent-info {
  border-left: 3px solid var(--bg-info-solid);
  @apply accent-edge-l;
}

/* Clickable stat card */
.stat-card--clickable {
  @apply cursor-pointer;
  transition: box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

.stat-card--clickable:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-primary);
}

.stat-card--clickable:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* --- Summary List Widget --- */
.dash-list {
  @apply flex flex-col;
}

.dash-list__item {
  @apply flex items-center justify-between px-3 py-2 border-b;
  border-color: var(--border-secondary);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dash-list__item:last-child {
  @apply border-b-0;
}

.dash-list__item:hover {
  background-color: var(--bg-primary-subtle);
}

.dash-list__rank {
  @apply flex-shrink-0 w-6 text-center text-xs font-semibold tabular-nums;
  color: var(--text-tertiary);
}

.dash-list__content {
  @apply flex-1 min-w-0 ml-2;
}

.dash-list__label {
  @apply text-sm truncate;
  color: var(--text-primary);
}

.dash-list__meta {
  @apply text-2xs;
  color: var(--text-tertiary);
}

.dash-list__value {
  @apply flex-shrink-0 text-sm font-semibold tabular-nums ml-3;
  color: var(--text-primary);
}

.dash-list__bar {
  @apply flex-shrink-0 ml-3;
  width: 60px;
}

.dash-list__bar-track {
  @apply w-full rounded-full;
  height: 4px;
  background-color: var(--bg-tertiary-subtle);
}

.dash-list__bar-fill {
  @apply h-full rounded-full;
  background-color: var(--bg-brand-solid);
}

/* Action list variant */
.dash-list__item--action {
  @apply cursor-pointer;
}

.dash-list__item--action:hover {
  /* Brand-subtle tint signals an actionable row (no --bg-brand-subtle token). */
  background-color: color-mix(in oklch, var(--bg-brand-solid) 8%, transparent);
}

.dash-list__item--action:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* Priority markers */
.dash-list__priority {
  @apply flex-shrink-0 w-1.5 h-1.5 rounded-full mr-2;
}

.dash-list__priority--high {
  background-color: var(--bg-danger-solid);
}

.dash-list__priority--medium {
  background-color: var(--bg-warning-solid);
}

.dash-list__priority--low {
  background-color: var(--bg-success-solid);
}


/* --- Status Board --- */
.dash-status {
  @apply grid gap-3;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.dash-status__item {
  @apply flex items-center gap-2 rounded-lg border px-3 py-2;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-status__dot {
  @apply flex-shrink-0 w-2.5 h-2.5 rounded-full;
}

.dash-status__dot--operational {
  background-color: var(--bg-success-solid);
}

.dash-status__dot--degraded {
  background-color: var(--bg-warning-solid);
}

.dash-status__dot--down {
  background-color: var(--bg-danger-solid);
}

.dash-status__dot--maintenance {
  background-color: var(--bg-info-solid);
}

.dash-status__dot--unknown {
  background-color: var(--bg-tertiary);
}

.dash-status__label {
  @apply text-xs truncate;
  color: var(--text-primary);
}

.dash-status__value {
  @apply text-2xs ml-auto;
  color: var(--text-tertiary);
}

/* Pulse animation for live status */
.dash-status__dot--pulse {
  animation: dash-pulse var(--duration-progress-indeterminate) var(--ease-in-out) infinite;
}

@keyframes dash-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* --- Alert Surface --- */
.dash-alert {
  @apply flex items-start gap-3 rounded-lg border px-4 py-3;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-alert__icon {
  @apply flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-lg text-sm;
}

.dash-alert__content {
  @apply flex-1 min-w-0;
}

.dash-alert__title {
  @apply text-sm font-medium;
  color: var(--text-primary);
}

.dash-alert__body {
  @apply text-xs mt-0.5;
  color: var(--text-secondary);
}

.dash-alert__meta {
  @apply text-2xs mt-1;
  color: var(--text-tertiary);
}

.dash-alert__dismiss {
  @apply flex-shrink-0 p-1 rounded-sm text-xs cursor-pointer border-0 bg-transparent;
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-default);
}

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

.dash-alert__dismiss:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Dismiss transition — JS toggles .is-dismissing; freezes under reduced-motion */
.dash-alert.is-dismissing {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default),
              max-height var(--duration-normal) var(--ease-default),
              padding var(--duration-normal) var(--ease-default),
              margin var(--duration-normal) var(--ease-default);
}

/* Semantic alert variants */
.dash-alert--danger {
  border-left: 3px solid var(--bg-danger-solid);
  @apply accent-edge-l;
}

.dash-alert--danger .dash-alert__icon {
  background-color: var(--bg-danger-subtle);
  color: var(--text-danger);
}

.dash-alert--warning {
  border-left: 3px solid var(--bg-warning-solid);
  @apply accent-edge-l;
}

.dash-alert--warning .dash-alert__icon {
  background-color: var(--bg-warning-subtle);
  color: var(--text-warning);
}

.dash-alert--info {
  border-left: 3px solid var(--bg-info-solid);
  @apply accent-edge-l;
}

.dash-alert--info .dash-alert__icon {
  background-color: var(--bg-info-subtle);
  color: var(--text-info);
}

.dash-alert--success {
  border-left: 3px solid var(--bg-success-solid);
  @apply accent-edge-l;
}

.dash-alert--success .dash-alert__icon {
  background-color: var(--bg-success-subtle);
  color: var(--text-success);
}


/* --- Chart Container --- */
.dash-chart {
  @apply rounded-lg border;
  background-color: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.dash-chart__header {
  @apply flex items-center justify-between px-4 py-3 border-b;
  border-color: var(--border-secondary);
}

.dash-chart__title {
  @apply text-sm font-medium;
  color: var(--text-primary);
}

.dash-chart__body {
  @apply p-4;
}

.dash-chart__placeholder {
  @apply flex items-center justify-center rounded-md;
  height: 200px;
  background-color: var(--bg-tertiary-subtle);
  border: 1px dashed var(--border-secondary);
}

.dash-chart__placeholder-text {
  @apply text-xs;
  color: var(--text-tertiary);
}

.dash-chart__footer {
  @apply flex items-center justify-between px-4 py-2 border-t text-2xs;
  border-color: var(--border-secondary);
  color: var(--text-tertiary);
}


/* --- Filter Bar --- */
.dash-filter-bar {
  @apply flex items-center gap-3 px-4 py-2 rounded-lg border;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-filter-bar__group {
  @apply flex items-center gap-2;
}

.dash-filter-bar__label {
  @apply text-2xs font-medium uppercase tracking-wide;
  color: var(--text-tertiary);
}

.dash-filter-bar__divider {
  @apply self-stretch;
  width: 1px;
  background-color: var(--border-secondary);
}

.dash-filter-bar__spacer {
  @apply flex-1;
}


/* --- Segmented Control --- */
.dash-segmented {
  @apply inline-flex rounded-lg border p-0.5;
  background-color: var(--bg-tertiary-subtle);
  border-color: var(--border-secondary);
}

.dash-segmented__item {
  @apply px-3 py-1 text-xs font-medium rounded-md cursor-pointer border-0 bg-transparent;
  color: var(--text-secondary);
  transition: color var(--duration-normal) var(--ease-default),
              background-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

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

.dash-segmented__item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-segmented__item.is-active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}


/* --- Live Indicator --- */
.dash-live {
  @apply inline-flex items-center gap-1.5 text-2xs font-medium;
  color: var(--text-success);
}

.dash-live__dot {
  @apply w-1.5 h-1.5 rounded-full;
  background-color: var(--bg-success-solid);
  animation: dash-pulse var(--duration-progress-indeterminate) var(--ease-in-out) infinite;
}


/* --- Dashboard Header --- */
.dash-header {
  @apply flex items-center justify-between px-4 py-3 border-b;
  border-color: var(--border-divider);
  background-color: var(--bg-surface);
}

.dash-header__title {
  @apply text-base font-semibold;
  color: var(--text-primary);
}

.dash-header__subtitle {
  @apply text-xs;
  color: var(--text-secondary);
}

.dash-header__actions {
  @apply flex items-center gap-2;
}


/* --- Queue Widget --- */
.dash-queue {
  @apply flex items-center gap-4 rounded-lg border px-4 py-3;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-queue__count {
  @apply text-2xl font-bold tabular-nums;
  color: var(--text-primary);
}

.dash-queue__info {
  @apply flex-1 min-w-0;
}

.dash-queue__label {
  @apply text-sm font-medium;
  color: var(--text-primary);
}

.dash-queue__meta {
  @apply text-2xs;
  color: var(--text-tertiary);
}

.dash-queue__action {
  @apply flex-shrink-0;
}


/* --- Skeleton Dashboard States --- */
.dash-skeleton {
  @apply rounded-lg border p-4;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-skeleton__line {
  @apply rounded-sm;
  background-color: var(--bg-tertiary-subtle);
  animation: dash-shimmer var(--duration-progress-indeterminate) var(--ease-default) infinite;
}

.dash-skeleton__line--title {
  height: 12px;
  width: 60%;
  @apply mb-3;
}

.dash-skeleton__line--value {
  height: 24px;
  width: 40%;
  @apply mb-2;
}

.dash-skeleton__line--text {
  height: 8px;
  width: 80%;
  @apply mb-1.5;
}

.dash-skeleton__line--bar {
  height: 6px;
  width: 100%;
  @apply mt-3;
}

@keyframes dash-shimmer {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}


/* --- Empty State (dashboard context) --- */
.dash-empty {
  @apply flex flex-col items-center justify-center text-center py-8 px-4;
}

.dash-empty__icon {
  @apply text-3xl mb-3;
  color: var(--text-quaternary);
}

.dash-empty__title {
  @apply text-sm font-medium;
  color: var(--text-secondary);
}

.dash-empty__body {
  @apply text-xs mt-1;
  color: var(--text-tertiary);
}


/* --- Stale / Reconnect State --- */
.dash-stale {
  @apply flex items-center gap-2 px-3 py-1.5 rounded-md text-2xs;
  background-color: var(--bg-warning-subtle);
  color: var(--text-warning);
}

.dash-stale__icon {
  @apply text-xs;
}


/* --- Attention Needed Panel --- */
.dash-attention {
  @apply rounded-lg border overflow-hidden;
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.dash-attention__header {
  @apply flex items-center gap-2 px-4 py-2.5 text-sm font-medium;
  background-color: var(--bg-danger-subtle);
  color: var(--text-danger);
}

.dash-attention__count {
  @apply inline-flex items-center justify-center w-5 h-5 rounded-full text-2xs font-bold;
  background-color: var(--bg-danger-solid);
  color: var(--alpha-white-100);
}

.dash-attention__body {
  @apply p-0;
}


/* --- Responsive --- */
@media (max-width: 639px) {
  .dash-filter-bar {
    @apply flex-wrap;
  }

  .dash-status {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ========================================
   Advanced Dashboard Features
   Interactive behaviors, live data,
   drag-reorder, tabbed panels, notifications
   ======================================== */


/* --- Tabbed Dashboard Panel --- */
.dash-tabbed {
  @apply rounded-lg border overflow-hidden;
  background-color: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.dash-tabbed__tabs {
  @apply flex border-b;
  border-color: var(--border-secondary);
  background-color: var(--bg-surface);
}

.dash-tabbed__tab {
  @apply px-4 py-2.5 text-xs font-medium cursor-pointer border-0 bg-transparent border-b-2;
  color: var(--text-secondary);
  border-color: transparent;
  transition: color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

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

.dash-tabbed__tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-tabbed__tab.is-active {
  color: var(--text-primary);
  border-color: var(--bg-brand-solid);
}

.dash-tabbed__tab-count {
  @apply inline-flex items-center justify-center ml-1.5 px-1.5 rounded-full text-2xs font-semibold;
  min-width: 18px;
  height: 16px;
  background-color: var(--bg-tertiary-subtle);
  color: var(--text-tertiary);
}

.dash-tabbed__tab.is-active .dash-tabbed__tab-count {
  background-color: color-mix(in oklch, var(--bg-brand-solid) 12%, transparent);
  color: var(--text-link);
}

.dash-tabbed__panel {
  @apply p-4;
  display: none;
}

.dash-tabbed__panel.is-active {
  display: block;
}


/* --- Drag-Reorderable Widget Grid --- */
.dash-reorder {
  @apply grid gap-4;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.dash-reorder__item {
  @apply rounded-lg border;
  background-color: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
}

.dash-reorder__item.is-dragging {
  @apply opacity-50;
  box-shadow: var(--shadow-lg);
  border-color: var(--border-focus);
  transform: rotate(1deg);
}

.dash-reorder__item.is-drag-over {
  border-color: var(--border-focus);
  border-style: dashed;
}

.dash-reorder__handle {
  @apply flex items-center gap-2 px-4 py-2.5 cursor-grab border-b;
  border-color: var(--border-secondary);
}

.dash-reorder__handle:active {
  cursor: grabbing;
}

.dash-reorder__handle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-reorder__grip {
  @apply text-xs;
  color: var(--text-quaternary);
}

.dash-reorder__title {
  @apply text-sm font-medium flex-1;
  color: var(--text-primary);
}

.dash-reorder__actions {
  @apply flex items-center gap-1;
}

.dash-reorder__body {
  @apply p-4;
}

.dash-reorder__placeholder {
  @apply rounded-lg border-2 border-dashed flex items-center justify-center;
  border-color: var(--border-focus);
  background-color: color-mix(in oklch, var(--bg-brand-solid) 8%, transparent);
  min-height: 120px;
  opacity: 0.5;
}


/* --- Notification Center --- */
.dash-notif {
  @apply flex flex-col rounded-lg border overflow-hidden;
  background-color: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
  max-height: 480px;
}

.dash-notif__header {
  @apply flex items-center justify-between px-4 py-3 border-b flex-shrink-0;
  border-color: var(--border-secondary);
}

.dash-notif__title {
  @apply text-sm font-semibold;
  color: var(--text-primary);
}

.dash-notif__badge {
  @apply inline-flex items-center justify-center px-1.5 rounded-full text-2xs font-bold;
  min-width: 18px;
  height: 18px;
  background-color: var(--bg-danger-solid);
  color: var(--alpha-white-100);
}

.dash-notif__tabs {
  @apply flex border-b flex-shrink-0;
  border-color: var(--border-secondary);
}

.dash-notif__tab {
  @apply flex-1 px-3 py-2 text-2xs font-medium text-center cursor-pointer border-0 bg-transparent border-b-2;
  color: var(--text-tertiary);
  border-color: transparent;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

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

.dash-notif__tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-notif__tab.is-active {
  color: var(--text-primary);
  border-color: var(--bg-brand-solid);
}

.dash-notif__body {
  @apply flex-1 overflow-y-auto;
}

.dash-notif__item {
  @apply flex items-start gap-3 px-4 py-3 border-b;
  border-color: var(--border-secondary);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dash-notif__item:last-child {
  @apply border-b-0;
}

.dash-notif__item:hover {
  background-color: var(--bg-primary-subtle);
}

.dash-notif__item.is-unread {
  /* Brand-subtle unread tint (no --bg-brand-subtle token). */
  background-color: color-mix(in oklch, var(--bg-brand-solid) 8%, transparent);
}

.dash-notif__item-icon {
  @apply flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full text-xs;
  background-color: var(--bg-tertiary-subtle);
  color: var(--text-secondary);
}

.dash-notif__item-icon--danger {
  background-color: var(--bg-danger-subtle);
  color: var(--text-danger);
}

.dash-notif__item-icon--warning {
  background-color: var(--bg-warning-subtle);
  color: var(--text-warning);
}

.dash-notif__item-icon--success {
  background-color: var(--bg-success-subtle);
  color: var(--text-success);
}

.dash-notif__item-icon--info {
  background-color: var(--bg-info-subtle);
  color: var(--text-info);
}

.dash-notif__item-content {
  @apply flex-1 min-w-0;
}

.dash-notif__item-title {
  @apply text-xs font-medium;
  color: var(--text-primary);
}

.dash-notif__item-body {
  @apply text-2xs mt-0.5;
  color: var(--text-secondary);
}

.dash-notif__item-time {
  @apply text-2xs mt-1;
  color: var(--text-tertiary);
}

.dash-notif__item-dot {
  @apply flex-shrink-0 w-2 h-2 rounded-full mt-1.5;
  background-color: var(--bg-brand-solid);
}

.dash-notif__footer {
  @apply flex items-center justify-center px-4 py-2.5 border-t text-xs font-medium cursor-pointer flex-shrink-0 border-0;
  border-top: 1px solid var(--border-secondary);
  background-color: transparent;
  color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dash-notif__footer:hover {
  background-color: var(--bg-primary-subtle);
}

.dash-notif__footer:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}


/* --- Live Counter (animated value) --- */
.dash-counter {
  @apply tabular-nums;
  transition: color var(--duration-slow) var(--ease-default);
}

.dash-counter.is-updating {
  color: var(--text-primary);
}

.dash-counter__flash {
  @apply inline-block;
  animation: dash-counter-flash var(--duration-slower) var(--ease-default);
}

@keyframes dash-counter-flash {
  0%   { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 1; }
}

.dash-counter__trend {
  @apply inline-flex items-center gap-0.5 text-2xs font-medium ml-1.5;
}

.dash-counter__trend--up {
  color: var(--text-success);
}

.dash-counter__trend--down {
  color: var(--text-danger);
}


/* --- Feed Density Toggle --- */
.dash-density {
  @apply inline-flex rounded-md border p-0.5;
  background-color: var(--bg-tertiary-subtle);
  border-color: var(--border-secondary);
}

.dash-density__btn {
  @apply p-1.5 text-xs rounded-sm cursor-pointer border-0 bg-transparent leading-none;
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

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

.dash-density__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.dash-density__btn.is-active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}


/* --- Load More --- */
.dash-load-more {
  @apply flex items-center justify-center py-3;
}

.dash-load-more__btn {
  @apply px-4 py-1.5 text-xs font-medium rounded-md border cursor-pointer;
  background-color: var(--bg-card);
  border-color: var(--border-secondary);
  color: var(--text-secondary);
  transition: color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

.dash-load-more__btn:hover {
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.dash-load-more__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.dash-load-more__btn.is-loading {
  @apply pointer-events-none opacity-60;
}

.dash-load-more__spinner {
  @apply inline-block w-3 h-3 mr-1.5 border-2 rounded-full;
  border-color: var(--border-secondary);
  border-top-color: var(--text-primary);
  animation: dash-spin var(--duration-spinner-rotate) linear infinite;
}

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


/* --- Saved View Indicator --- */
.dash-saved-view {
  @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-md border text-xs;
  background-color: var(--bg-card);
  border-color: var(--border-secondary);
  color: var(--text-secondary);
}

.dash-saved-view__name {
  @apply font-medium;
  color: var(--text-primary);
}

.dash-saved-view__actions {
  @apply flex items-center gap-1;
}

.dash-saved-view__btn {
  @apply p-0.5 text-2xs cursor-pointer border-0 bg-transparent rounded-sm;
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-default);
}

.dash-saved-view__btn:hover {
  color: var(--text-primary);
}

.dash-saved-view__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* --- Gauge Widget (radial in dashboard context) --- */
.dash-gauge {
  @apply flex flex-col items-center gap-2 p-4;
}

.dash-gauge__label {
  @apply text-xs font-medium;
  color: var(--text-secondary);
}

.dash-gauge__value {
  @apply text-2xs;
  color: var(--text-tertiary);
}


/* --- Auto-Append Feed Item --- */
.dash-feed-item-enter {
  animation: dash-feed-enter var(--duration-slow) var(--ease-out);
}

@keyframes dash-feed-enter {
  0% {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}


/* --- Reduced motion — freeze every animation + non-essential transition --- */
@media (prefers-reduced-motion: reduce) {
  .dash-status__dot--pulse,
  .dash-live__dot,
  .dash-skeleton__line,
  .dash-load-more__spinner,
  .dash-counter__flash,
  .dash-feed-item-enter {
    animation: none;
  }

  .stat-card__progress-fill,
  .dash-counter,
  .dash-reorder__item,
  .dash-alert.is-dismissing {
    transition: none;
  }
};
  }
}
@layer utilities {
  .tpl-example {
    scroll-margin-top: 6rem;
  }
  .tpl-frame {
    border: 1px solid var(--border-default, var(--border-divider));
    border-radius: var(--radius-xl, 12px);
    overflow: hidden;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(10, 13, 18, .06));
  }
  .tpl-frame__chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-default, var(--border-divider));
    background: var(--bg-secondary, var(--bg-primary-subtle));
  }
  .tpl-frame__dots {
    display: inline-flex;
    gap: 6px;
  }
  .tpl-frame__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-primary-alt, var(--border-divider));
  }
  .tpl-frame__url {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 4px;
    padding: 3px 10px;
    border-radius: var(--radius-md, 6px);
    background: var(--bg-primary);
    border: 1px solid var(--border-default, var(--border-divider));
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tpl-frame__viewport {
    max-height: 620px;
    overflow: auto;
    background: var(--bg-primary);
    container-type: inline-size;
  }
  .tpl-app {
    display: flex;
    min-height: 100%;
    min-width: 0;
    background: var(--bg-primary);
  }
  .tpl-app__side {
    flex: 0 0 auto;
    width: 264px;
    border-right: 1px solid var(--border-default, var(--border-divider));
    background: var(--bg-primary);
  }
  .tpl-app__main {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bg-primary);
  }
  .tpl-app__side .app-sidebar, .tpl-app__side .sidebar-panel {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    max-width: none;
    transform: none;
    box-shadow: none;
  }
  .tpl-app__side .sidebar {
    height: auto;
    min-height: 100%;
  }
  .tpl-topnav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-default, var(--border-divider));
    background: var(--bg-primary);
  }
  .tpl-topnav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .tpl-topnav__links {
    display: none;
    align-items: center;
    gap: 2px;
  }
  .tpl-topnav__link {
    padding: 7px 12px;
    border-radius: var(--radius-md, 6px);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color .12s ease, background .12s ease;
  }
  .tpl-topnav__link:hover {
    color: var(--text-secondary);
    background: var(--bg-primary-hover, var(--bg-secondary));
  }
  .tpl-topnav__link.active {
    color: var(--text-primary);
    background: var(--bg-active, var(--bg-secondary));
  }
  .tpl-topnav__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .tpl-page {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .tpl-badge-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bg-error-solid, var(--fg-error-primary));
    color: var(--text-on-brand, #fff);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }
  @container (max-width: 720px) {
    .tpl-app__side {
      display: none;
    }
    .tpl-page {
      padding: 16px;
      gap: 20px;
    }
  }
  @media (max-width: 640px) {
    .tpl-frame__viewport {
      max-height: 480px;
    }
  }
  .tpl-topnav__links {
    display: none;
  }
  @container (min-width: 860px) {
    .tpl-topnav__links {
      display: inline-flex;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tpl-topnav__link {
      transition: none;
    }
  }
}
@layer utilities {
  .monitor-board {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    flex-direction: column;
    background-color: var(--bg-card);
    color: var(--text-primary);
  }
  .monitor-board__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
  }
  .monitor-board__inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding: 0;
  }
  .monitor-board__pager {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px 10px;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-divider);
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 44px;
  }
  .monitor-board__pager.is-single-page .monitor-board__progress {
    visibility: hidden;
  }
  .monitor-board__progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--text-primary) 6%, transparent);
    }
  }
  .monitor-board__progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--text-primary) 35%, transparent);
    }
    transform-origin: left;
  }
  .monitor-board__summary {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    flex-wrap: wrap;
    line-height: 1;
  }
  .monitor-board__summary > span:not(.monitor-board__summary-strong):not(.monitor-board__summary-sep) {
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--text-tertiary);
    opacity: 0.8;
  }
  .monitor-board__summary-strong {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    padding: 0 3px;
  }
  .monitor-board__summary-sep {
    color: var(--text-quaternary, var(--text-tertiary));
    opacity: 0.5;
    margin: 0 6px;
    font-size: 0.875rem;
  }
  .monitor-board__summary--right {
    margin-left: auto;
  }
  .monitor-board__pager-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .monitor-board__pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--border-divider);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  }
  .monitor-board__pager-btn:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--text-primary) 6%, transparent);
    }
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--text-tertiary);
  }
  .monitor-board__pager-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .monitor-board__pager-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .monitor-board__pager.is-paused .monitor-board__progress {
    visibility: hidden;
  }
  .monitor-filters-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    border-color: var(--border-divider);
    background-color: var(--bg-card);
    color: var(--text-primary);
    flex-wrap: wrap;
  }
  .monitor-filters-bar__title {
    margin-right: var(--spacing);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .monitor-filters-bar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .monitor-filters-bar__divider {
    height: calc(var(--spacing) * 4);
    width: 1px;
    background-color: var(--border-divider);
  }
  .monitor-filters-bar__spacer {
    flex: 1;
  }
  .monitor-status-chip {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    -webkit-user-select: none;
    user-select: none;
    background-color: transparent;
    border-color: var(--border-divider);
    color: var(--text-secondary);
  }
  .monitor-status-chip:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
    color: var(--text-primary);
  }
  .monitor-status-chip:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .monitor-status-chip__dot {
    display: inline-block;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    background-color: var(--chip-accent, var(--text-tertiary));
  }
  .monitor-status-chip__count {
    margin-left: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    opacity: 60%;
  }
  .monitor-status-chip.is-active {
    border-color: var(--chip-accent, var(--text-primary));
    color: var(--text-primary);
    background-color: var(--chip-accent, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--chip-accent, var(--text-primary)) 10%, transparent);
    }
  }
  .monitor-section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .monitor-section__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .monitor-section__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
  }
  .monitor-section__name {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .monitor-section__count {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .monitor-section__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .monitor-section__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .monitor-grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .monitor-grid--dense {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .monitor-grid--comfy {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .monitor-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .monitor-board--fill {
    --monitor-tile-min: 340px;
    --monitor-target-rows: 4;
  }
  .monitor-board--fill .monitor-board__body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .monitor-board--fill .monitor-board__inner {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--monitor-cols, 6), 1fr);
    grid-template-rows: repeat(var(--monitor-target-rows, 5), 1fr);
    grid-auto-rows: 0;
    gap: 2px;
    padding: 0 1rem 1rem 1rem;
    overflow: hidden;
  }
  .monitor-board--fill .monitor-section, .monitor-board--fill .monitor-grid {
    display: contents;
  }
  .monitor-board--fill .monitor-tile {
    min-height: 0;
    min-width: 0;
    aspect-ratio: auto;
    overflow: hidden;
  }
  .monitor-board--fill .monitor-tile-button {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .monitor-tile.is-paged-out {
    display: none !important;
  }
  @keyframes mb-tile-enter {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes mb-tile-enter-subtle {
    from {
      opacity: 0.7;
    }
    to {
      opacity: 1;
    }
  }
  .monitor-board--fill.is-initial-load .monitor-tile:not(.is-paged-out) {
    opacity: 0;
    transform: translateY(10px);
  }
  .monitor-board__inner.is-page-entering .monitor-tile:not(.is-paged-out) {
    opacity: 0;
    transform: translateY(10px);
    animation: mb-tile-enter 480ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
  .monitor-board__inner.is-page-entering--subtle .monitor-tile:not(.is-paged-out) {
    opacity: 0.7;
    animation: mb-tile-enter-subtle 180ms ease-out both;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
  @keyframes mb-page-roll {
    from {
      opacity: 0.25;
    }
    to {
      opacity: 1;
    }
  }
  [data-monitor-summary-page].is-rolling, [data-monitor-summary-range].is-rolling {
    animation: mb-page-roll 320ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .monitor-board__inner.is-page-entering .monitor-tile:not(.is-paged-out), .monitor-board__inner.is-page-entering--subtle .monitor-tile:not(.is-paged-out), [data-monitor-summary-page].is-rolling, [data-monitor-summary-range].is-rolling {
      animation: none;
      opacity: 1;
    }
  }
  .monitor-tile--blank {
    --tile-ring: var(--border-divider);
    --tile-ring-width: 1px;
    --tile-shadow: none;
    background-color: var(--bg-card);
    cursor: default;
    opacity: 0.4;
  }
  .monitor-tile--blank::before, .monitor-tile--blank::after {
    display: none;
  }
  .monitor-tile--blank .monitor-tile__slash, .monitor-tile--blank .monitor-tile__id, .monitor-tile--blank .monitor-tile__header, .monitor-tile--blank .monitor-tile__body, .monitor-tile--blank .monitor-tile__meta {
    display: none;
  }
  .monitor-tile--blank:hover {
    --tile-shadow: none;
  }
  :is([data-theme="theme-light"],[data-theme="theme-mica-light"]) .monitor-tile-button, .monitor-tile-button {
    --face-shadow-strength: 22%;
    --glow-monitor-exception: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --glow-monitor-exception: color-mix(in srgb, var(--text-danger) 75%, transparent);
    }
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .monitor-tile-button {
    --face-shadow-strength: 38%;
    --glow-monitor-exception: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --glow-monitor-exception: color-mix(in srgb, var(--text-danger) 80%, transparent);
    }
  }
  .monitor-board--buttoned .monitor-tile {
    background: transparent;
    border: 0;
    cursor: default;
    padding: 0;
    min-height: 0;
    box-shadow: none;
    animation: none;
    opacity: 1;
  }
  .monitor-board--buttoned .monitor-tile::before, .monitor-board--buttoned .monitor-tile::after {
    display: none;
  }
  .monitor-board--buttoned .monitor-tile:hover {
    box-shadow: none;
  }
  .monitor-tile-button {
    --tile-accent: var(--border-divider);
    --tile-accent-soft: transparent;
    --bezel-size: 4px;
    --bezel-gap: 1px;
    --bezel-color: var(--tile-accent);
    --face-color: var(--bg-card);
    --face-hover-color: var(--bg-primary-hover, var(--bg-card));
    --text-monitor-tile: var(--text-primary);
    --text-monitor-tile-muted: var(--text-tertiary);
    --ring-monitor-tile-focus: var(--border-focus);
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-monitor-tile);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
  }
  .monitor-tile-button__bezel {
    position: absolute;
    background: var(--bezel-color);
    pointer-events: none;
    transition: background-color 150ms ease;
  }
  .monitor-tile-button__bezel--top {
    top: 0;
    left: 0;
    right: 0;
    height: var(--bezel-size);
    clip-path: polygon( var(--bezel-gap) 0, calc(100% - var(--bezel-gap)) 0, calc(100% - var(--bezel-size) - var(--bezel-gap)) 100%, calc(var(--bezel-size) + var(--bezel-gap)) 100% );
  }
  .monitor-tile-button__bezel--bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bezel-size);
    clip-path: polygon( calc(var(--bezel-size) + var(--bezel-gap)) 0, calc(100% - var(--bezel-size) - var(--bezel-gap)) 0, calc(100% - var(--bezel-gap)) 100%, var(--bezel-gap) 100% );
  }
  .monitor-tile-button__bezel--left {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--bezel-size);
    clip-path: polygon( 0 var(--bezel-gap), 100% calc(var(--bezel-size) + var(--bezel-gap)), 100% calc(100% - var(--bezel-size) - var(--bezel-gap)), 0 calc(100% - var(--bezel-gap)) );
  }
  .monitor-tile-button__bezel--right {
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--bezel-size);
    clip-path: polygon( 0 calc(var(--bezel-size) + var(--bezel-gap)), 100% var(--bezel-gap), 100% calc(100% - var(--bezel-gap)), 0 calc(100% - var(--bezel-size) - var(--bezel-gap)) );
  }
  .monitor-tile-button__face {
    position: absolute;
    inset: var(--bezel-size);
    background-color: var(--face-color);
    box-shadow: inset 0 0 28px var(--tile-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 28px color-mix(in srgb, var(--tile-accent) var(--face-shadow-strength), transparent);
    }
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    overflow: hidden;
    transition: background-color 150ms ease, transform 120ms ease;
  }
  .monitor-tile-button__face-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    min-height: 14px;
  }
  .monitor-tile-button__face-id {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--tile-accent);
    line-height: 1;
    white-space: nowrap;
  }
  .monitor-tile-button__face-icon {
    margin-left: auto;
    color: var(--tile-accent);
    font-size: 0.75rem;
    opacity: 0.75;
    line-height: 1;
  }
  .monitor-tile-button__face-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .monitor-tile-button__face-primary {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-monitor-tile);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .monitor-tile-button__face-secondary {
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--text-monitor-tile-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .monitor-tile-button__face-tertiary {
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--text-monitor-tile-muted);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 2px;
  }
  .monitor-tile-button__face-timer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    color: var(--tile-accent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .monitor-tile-button__face-timer i {
    font-size: 0.95rem;
    opacity: 0.85;
  }
  .monitor-tile-button__face-timer-value {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .monitor-tile-button:hover {
    --face-color: var(--face-hover-color);
  }
  .monitor-tile-button:active .monitor-tile-button__face {
    transform: translateY(0.5px);
  }
  .monitor-tile-button:focus-visible {
    outline: 2px solid var(--ring-monitor-tile-focus);
    outline-offset: 2px;
  }
  .monitor-tile-button.is-selected {
    --bezel-color: var(--text-primary);
  }
  .monitor-tile-button[disabled], .monitor-tile-button.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }
  .monitor-tile-button.is-dimmed {
    opacity: 0.2;
    pointer-events: none;
  }
  .monitor-tile-button.is-idle {
    --tile-accent: var(--text-tertiary);
    --tile-accent-soft: transparent;
  }
  .monitor-tile-button.is-assigned {
    --tile-accent: var(--text-info-alt, var(--text-info));
    --tile-accent-soft: var(--bg-info-subtle);
  }
  .monitor-tile-button.is-ready {
    --tile-accent: var(--text-teal-alt, var(--text-teal));
    --tile-accent-soft: var(--bg-teal-subtle, var(--bg-info-subtle));
  }
  .monitor-tile-button.is-inprogress {
    --tile-accent: var(--text-success-alt, var(--text-success));
    --tile-accent-soft: var(--bg-success-subtle);
  }
  .monitor-tile-button.is-waiting {
    --tile-accent: var(--text-warning-alt, var(--text-warning));
    --tile-accent-soft: var(--bg-warning-subtle);
  }
  .monitor-tile-button.is-exception {
    --tile-accent: var(--text-danger-alt, var(--text-danger));
    --tile-accent-soft: var(--bg-danger-subtle);
    animation: monitor-tile-button-pulse 1.4s ease-in-out infinite;
  }
  .monitor-tile-button.is-exception .monitor-tile-button__bezel {
    animation: mb-exception-bezel 1.4s ease-in-out infinite;
  }
  .monitor-tile-button.is-exception .monitor-tile-button__face {
    animation: mb-exception-face 1.4s ease-in-out infinite;
  }
  .monitor-tile-button.is-exception .monitor-tile-button__face-timer {
    animation: mb-exception-timer 1.4s ease-in-out infinite;
  }
  @keyframes mb-exception-timer {
    0%, 100% {
      opacity: 0.8;
      text-shadow: none;
    }
    50% {
      opacity: 1;
      text-shadow: 0 0 10px var(--glow-monitor-exception);
    }
  }
  @keyframes mb-exception-bezel {
    0%, 100% {
      filter: brightness(1) saturate(1);
    }
    50% {
      filter: brightness(1.5) saturate(1.25);
    }
  }
  @keyframes mb-exception-face {
    0%, 100% {
      background-color: var(--face-color);
      box-shadow: inset 0 0 28px color-mix(in srgb, var(--tile-accent) var(--face-shadow-strength), transparent);
    }
    50% {
      background-color: color-mix(in srgb, var(--tile-accent) 20%, var(--face-color));
      box-shadow: inset 0 0 36px color-mix(in srgb, var(--tile-accent) 55%, transparent);
    }
  }
  .monitor-tile-button.is-offline {
    --tile-accent: var(--text-quaternary, var(--text-tertiary));
    --tile-accent-soft: transparent;
    --text-monitor-tile: var(--text-tertiary);
    --face-color: var(--bg-secondary);
    opacity: 0.85;
  }
  .monitor-tile-button.is-idle .monitor-tile-button__face, .monitor-tile-button.is-offline .monitor-tile-button__face {
    box-shadow: none;
    background-image: none;
  }
  @keyframes monitor-tile-button-pulse {
    0%, 100% {
      filter: drop-shadow(0 0 0 transparent);
    }
    50% {
      filter: drop-shadow(0 0 10px var(--glow-monitor-exception)) drop-shadow(0 0 24px var(--glow-monitor-exception));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .monitor-tile-button.is-exception, .monitor-tile-button.is-exception .monitor-tile-button__bezel, .monitor-tile-button.is-exception .monitor-tile-button__face, .monitor-tile-button.is-exception .monitor-tile-button__face-timer {
      animation: none;
      filter: none;
      text-shadow: none;
    }
  }
  .monitor-tile-button--blank {
    --tile-accent: var(--text-quaternary, var(--text-tertiary));
    --tile-accent-soft: transparent;
    --text-monitor-tile: var(--text-tertiary);
    --face-color: var(--bg-secondary);
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
  }
  .monitor-tile-button--blank .monitor-tile-button__face {
    box-shadow: none;
  }
  .monitor-tile {
    --tile-accent: var(--text-tertiary);
    --tile-accent-soft: var(--bg-surface-subtle, var(--bg-card));
    --tile-accent-on: var(--alpha-white-100);
    --tile-ring: var(--tile-accent);
    --tile-ring-width: 1.5px;
    --tile-shadow: var(--shadow-xs);
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    overflow: hidden;
    background-clip: padding-box;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-card);
    border: 0;
    border-radius: var(--radius-card-md, var(--radius-xl));
    min-height: 140px;
    box-shadow: inset 0 0 0 var(--tile-ring-width) var(--tile-ring), var(--tile-shadow);
  }
  .monitor-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--tile-accent) 0%, transparent 42%);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
  }
  .monitor-tile::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tile-accent), transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--tile-accent) 22%, transparent), transparent);
    }
    pointer-events: none;
    z-index: 0;
  }
  .monitor-tile > * {
    position: relative;
    z-index: 1;
  }
  .monitor-tile:hover, .monitor-tile:focus-visible, .monitor-tile.is-selected {
    position: relative;
    z-index: 2;
  }
  .monitor-tile:hover {
    --tile-shadow: var(--shadow-md);
  }
  .monitor-tile:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .monitor-tile.is-selected {
    --tile-ring-width: 2px;
    --tile-shadow: var(--shadow-md);
  }
  .monitor-tile__slash {
    --slash-size: 36px;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--slash-size);
    height: var(--slash-size);
    background-color: var(--tile-accent);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    pointer-events: none;
    z-index: 1;
  }
  .monitor-tile__id {
    --slash-size: 36px;
    position: absolute;
    top: calc(var(--slash-size) / 6);
    right: calc(var(--slash-size) / -6);
    width: var(--slash-size);
    z-index: 2;
    transform: rotate(45deg);
    transform-origin: center;
    color: var(--tile-accent-on);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    text-transform: uppercase;
  }
  .monitor-tile__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 2.5);
    padding-right: 32px;
    min-height: 30px;
  }
  .monitor-tile__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .monitor-tile__icon {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--tile-accent);
    width: 16px;
    text-align: center;
  }
  .monitor-tile__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .monitor-tile__primary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .monitor-tile__secondary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    color: var(--text-secondary);
  }
  .monitor-tile__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .monitor-tile__row-label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    opacity: 60%;
  }
  .monitor-tile__row-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
  }
  .monitor-tile__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
    background-color: var(--tile-accent-soft);
    border-top: 1px solid var(--border-divider);
  }
  .monitor-tile__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .monitor-tile__meta-item i {
    opacity: 70%;
  }
  .monitor-tile__progress {
    position: relative;
    margin-top: var(--spacing);
    height: var(--spacing);
    overflow: hidden;
    border-radius: var(--radius-full);
    background-color: var(--bg-surface-subtle, var(--bg-secondary));
  }
  .monitor-tile__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--tile-accent);
    transition: width 300ms ease;
  }
  .monitor-tile__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    background-color: var(--tile-accent-soft);
    color: var(--tile-accent);
  }
  .monitor-tile--xs {
    min-height: 100px;
  }
  .monitor-tile--xs .monitor-tile__slash, .monitor-tile--xs .monitor-tile__id {
    --slash-size: 28px;
  }
  .monitor-tile--xs .monitor-tile__id {
    font-size: 0.45rem;
    letter-spacing: 0.3px;
  }
  .monitor-tile--xs .monitor-tile__header {
    padding-top: 0.375rem;
    padding-right: 26px;
    min-height: 22px;
  }
  .monitor-tile--xs .monitor-tile__body {
    padding: 0.25rem 0.5rem;
  }
  .monitor-tile--sm {
    min-height: 120px;
  }
  .monitor-tile--sm .monitor-tile__slash, .monitor-tile--sm .monitor-tile__id {
    --slash-size: 32px;
  }
  .monitor-tile--lg {
    min-height: 180px;
  }
  .monitor-tile--lg .monitor-tile__slash, .monitor-tile--lg .monitor-tile__id {
    --slash-size: 48px;
  }
  .monitor-tile--lg .monitor-tile__id {
    font-size: 0.625rem;
    letter-spacing: 0.5px;
  }
  .monitor-tile--lg .monitor-tile__header {
    padding-right: 44px;
  }
  .monitor-tile.is-idle {
    --tile-accent: var(--text-tertiary);
    --tile-accent-soft: var(--bg-surface-subtle, var(--bg-secondary));
  }
  .monitor-tile.is-assigned {
    --tile-accent: var(--text-info);
    --tile-accent-soft: var(--bg-info-subtle);
  }
  .monitor-tile.is-ready {
    --tile-accent: var(--text-teal);
    --tile-accent-soft: var(--bg-teal-subtle, var(--bg-info-subtle));
  }
  .monitor-tile.is-inprogress {
    --tile-accent: var(--text-success);
    --tile-accent-soft: var(--bg-success-subtle);
  }
  .monitor-tile.is-waiting {
    --tile-accent: var(--text-warning);
    --tile-accent-soft: var(--bg-warning-subtle);
  }
  .monitor-tile.is-exception {
    --tile-accent: var(--text-danger);
    --tile-accent-soft: var(--bg-danger-subtle);
    animation: monitor-tile-pulse 2.2s ease-in-out infinite;
  }
  .monitor-tile.is-offline {
    --tile-accent: var(--text-quaternary, var(--text-tertiary));
    --tile-accent-soft: transparent;
    --tile-accent-on: var(--text-primary);
    --tile-ring: transparent;
    --tile-shadow: none;
    border: 1.5px dashed var(--tile-accent);
    opacity: 0.75;
  }
  .monitor-tile.is-offline:hover {
    opacity: 0.95;
  }
  @keyframes monitor-tile-pulse {
    0%, 100% {
      box-shadow: inset 0 0 0 var(--tile-ring-width) var(--tile-ring), var(--shadow-xs), 0 0 0 0 transparent;
    }
    50% {
      box-shadow: inset 0 0 0 var(--tile-ring-width) var(--tile-ring), var(--shadow-xs), 0 0 0 4px color-mix(in srgb, var(--text-danger) 14%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .monitor-tile.is-exception {
      animation: none;
    }
  }
  .monitor-tile.is-live::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--tile-accent);
    box-shadow: 0 0 0 0 var(--tile-accent);
    animation: monitor-tile-dot 1.6s ease-out infinite;
    z-index: 2;
  }
  @keyframes monitor-tile-dot {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--tile-accent) 50%, transparent);
    }
    70% {
      box-shadow: 0 0 0 6px transparent;
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .monitor-tile.is-live::after {
      animation: none;
    }
  }
  .monitor-tile.is-dimmed {
    opacity: 0.15;
    pointer-events: none;
  }
  .monitor-legend {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-color: var(--border-divider);
    background-color: var(--bg-card);
    color: var(--text-secondary);
  }
  .monitor-legend__title {
    margin-right: var(--spacing);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .monitor-legend__item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .monitor-legend__swatch {
    display: inline-block;
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xs);
    background-color: var(--chip-accent, var(--text-tertiary));
  }
  .monitor-legend__swatch--dashed {
    background-color: transparent;
    border: 1.5px dashed var(--chip-accent, var(--text-tertiary));
  }
  .monitor-drawer {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    width: 380px;
    max-width: 90%;
    background-color: var(--bg-card);
    border-color: var(--border-divider);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 200ms ease;
    z-index: 20;
  }
  .monitor-drawer.is-open {
    transform: translateX(0);
  }
  .monitor-drawer__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-color: var(--border-divider);
  }
  .monitor-drawer__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .monitor-drawer__status {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background-color: var(--tile-accent-soft);
    color: var(--tile-accent);
    border: 1px solid var(--tile-accent);
  }
  .monitor-drawer__body {
    min-height: 0;
    flex: 1;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    padding: calc(var(--spacing) * 4);
  }
  .monitor-drawer__section-title {
    margin-bottom: var(--spacing);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    opacity: 60%;
  }
  .monitor-drawer__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    border-bottom: 1px solid var(--border-divider);
  }
  .monitor-drawer__row:last-child {
    border-bottom: none;
  }
  .monitor-drawer__row-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .monitor-drawer__row-value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .monitor-drawer__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-color: var(--border-divider);
  }
  .monitor-board__surface {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
  }
  @media (max-width: 640px) {
    .monitor-grid {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .monitor-drawer {
      width: 100%;
    }
  }
}
@layer utilities {
  .ne-canvas {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 480px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-surface, var(--canvas-secondary));
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }
  .ne-canvas:active:not(.ne-canvas--connecting) {
    cursor: grabbing;
  }
  .ne-canvas.ne-canvas--connecting {
    cursor: crosshair;
  }
  .ne-canvas.is-drop-target {
    outline: 2px dashed var(--border-focus);
    outline-offset: -6px;
  }
  .ne-canvas:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .ne-canvas__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--ne-grid-dot, var(--border-primary)) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
    opacity: 0.5;
    transition: opacity var(--duration-normal) var(--ease-default);
  }
  .ne-canvas:hover .ne-canvas__grid {
    opacity: 0.7;
  }
  .ne-canvas__transform {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
  }
  .ne-canvas__connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    pointer-events: none;
  }
  .ne-canvas__connectors path {
    pointer-events: stroke;
  }
  .ne-toolbar {
    position: absolute;
    top: calc(var(--spacing) * 3);
    left: calc(var(--spacing) * 3);
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    padding: 4px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
  }
  .ne-toolbar__btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ne-toolbar__btn:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  .ne-toolbar__btn:active {
    background-color: var(--bg-primary-alt, var(--bg-secondary));
  }
  .ne-toolbar__btn.is-active {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .ne-toolbar__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .ne-toolbar__sep {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background-color: var(--border-primary);
  }
  .ne-toolbar__zoom {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    min-width: 44px;
    justify-content: center;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .ne-minimap {
    position: absolute;
    right: calc(var(--spacing) * 3);
    bottom: calc(var(--spacing) * 3);
    z-index: 10;
    width: 160px;
    height: 100px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    opacity: 0.85;
    transition: opacity var(--duration-normal) var(--ease-default);
  }
  .ne-minimap:hover {
    opacity: 1;
  }
  .ne-minimap__content {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .ne-minimap__viewport {
    position: absolute;
    border: 1.5px solid var(--border-focus);
    border-radius: var(--radius-xs);
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 12%, transparent);
    }
    pointer-events: none;
  }
  .ne-minimap__node {
    position: absolute;
    border-radius: var(--radius-xs);
    background-color: var(--border-primary-solid);
    opacity: 0.5;
  }
  .ne-node {
    position: absolute;
    min-width: 200px;
    max-width: 300px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 1.5px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: box-shadow var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default);
    z-index: 1;
  }
  .ne-node:hover {
    border-color: var(--border-primary-hover);
    box-shadow: var(--shadow-md);
    z-index: 2;
  }
  .ne-node:active {
    cursor: grabbing;
  }
  .ne-node.is-selected {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus), var(--shadow-md);
    z-index: 3;
  }
  .ne-node.is-dragging {
    box-shadow: var(--shadow-lg);
    z-index: 10;
    transition: none;
  }
  .ne-node.is-snapping {
    transition: none;
  }
  .ne-node.is-resizing {
    box-shadow: var(--shadow-lg);
    z-index: 10;
    transition: none;
  }
  .ne-node.is-appearing {
    animation: ne-node-appear var(--duration-normal) var(--ease-out);
  }
  @keyframes ne-node-appear {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .ne-node:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .ne-node[data-color="blue"] {
    border-top: 3px solid var(--text-info);
  }
  .ne-node[data-color="green"] {
    border-top: 3px solid var(--text-success);
  }
  .ne-node[data-color="purple"] {
    border-top: 3px solid var(--text-purple);
  }
  .ne-node[data-color="orange"] {
    border-top: 3px solid var(--text-warning);
  }
  .ne-node[data-color="red"] {
    border-top: 3px solid var(--text-danger);
  }
  .ne-node[data-color="teal"] {
    border-top: 3px solid var(--text-teal);
  }
  .ne-node[data-color="pink"] {
    border-top: 3px solid var(--text-pink);
  }
  .ne-node[data-color="indigo"] {
    border-top: 3px solid var(--text-indigo);
  }
  .ne-node__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 11px 13px 7px;
  }
  .ne-node__icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    font-size: 14px;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
  }
  .ne-node[data-color="blue"] .ne-node__icon {
    background-color: var(--bg-info);
    color: var(--text-info);
  }
  .ne-node[data-color="green"] .ne-node__icon {
    background-color: var(--bg-success);
    color: var(--text-success);
  }
  .ne-node[data-color="purple"] .ne-node__icon {
    background-color: var(--bg-purple);
    color: var(--text-purple);
  }
  .ne-node[data-color="orange"] .ne-node__icon {
    background-color: var(--bg-warning);
    color: var(--text-warning);
  }
  .ne-node[data-color="red"] .ne-node__icon {
    background-color: var(--bg-danger);
    color: var(--text-danger);
  }
  .ne-node[data-color="teal"] .ne-node__icon {
    background-color: var(--bg-teal);
    color: var(--text-teal);
  }
  .ne-node[data-color="pink"] .ne-node__icon {
    background-color: var(--bg-pink);
    color: var(--text-pink);
  }
  .ne-node[data-color="indigo"] .ne-node__icon {
    background-color: var(--bg-indigo);
    color: var(--text-indigo);
  }
  .ne-node__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ne-node__subtitle {
    font-size: 11.5px;
    color: var(--text-tertiary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ne-node__body {
    padding: 4px 12px 10px;
  }
  .ne-node__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .ne-node__badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
  }
  .ne-node__badge--info {
    background-color: var(--bg-info);
    color: var(--text-info);
  }
  .ne-node__badge--success {
    background-color: var(--bg-success);
    color: var(--text-success);
  }
  .ne-node__badge--warning {
    background-color: var(--bg-warning);
    color: var(--text-warning);
  }
  .ne-node__badge--danger {
    background-color: var(--bg-danger);
    color: var(--text-danger);
  }
  .ne-node__badge--purple {
    background-color: var(--bg-purple);
    color: var(--text-purple);
  }
  .ne-port {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 2px solid var(--border-primary-solid);
    cursor: crosshair;
    z-index: 4;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .ne-port:hover, .ne-port.is-active {
    transform: scale(1.4);
    border-color: var(--border-focus);
    background-color: var(--border-focus);
  }
  .ne-port--left {
    left: -6px;
    top: 50%;
    margin-top: -6px;
  }
  .ne-port--right {
    right: -6px;
    top: 50%;
    margin-top: -6px;
  }
  .ne-port--top {
    top: -6px;
    left: 50%;
    margin-left: -6px;
  }
  .ne-port--bottom {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
  }
  .ne-connector {
    fill: none;
    stroke: var(--border-primary-solid);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke var(--duration-normal) var(--ease-default), stroke-width var(--duration-normal) var(--ease-default);
  }
  .ne-connector:hover {
    stroke: var(--border-focus);
    stroke-width: 2.5;
  }
  .ne-connector.is-selected {
    stroke: var(--border-focus);
    stroke-width: 2.5;
  }
  .ne-connector--draft {
    stroke: var(--border-focus);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.6;
  }
  .ne-connector-arrow {
    fill: var(--border-primary-solid);
  }
  .ne-connector:hover + .ne-connector-arrow, .ne-connector.is-selected + .ne-connector-arrow {
    fill: var(--border-focus);
  }
  .ne-snap-guide {
    position: absolute;
    background-color: var(--border-focus);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ne-snap-guide.is-visible {
    opacity: 0.6;
  }
  .ne-snap-guide--h {
    height: 1px;
    left: 0;
    right: 0;
  }
  .ne-snap-guide--v {
    width: 1px;
    top: 0;
    bottom: 0;
  }
  .ne-snap-indicator {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    font-size: 10px;
    font-weight: 500;
    color: var(--border-focus);
    background-color: var(--bg-surface, var(--canvas-secondary));
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--border-focus) 40%, transparent);
    }
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ne-snap-indicator.is-visible {
    opacity: 1;
  }
  .ne-selection-box {
    position: absolute;
    border: 1.5px solid var(--border-focus);
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 12%, transparent);
    }
    border-radius: var(--radius-xs);
    z-index: 5;
    pointer-events: none;
  }
  .ne-canvas--timeline .ne-canvas__grid {
    background-image: linear-gradient(to right, var(--ne-grid-dot, var(--border-primary)) 1px, transparent 1px);
    background-size: 120px 20px;
    opacity: 0.3;
  }
  .ne-timeline-axis {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
  }
  .ne-timeline-marker {
    position: absolute;
    bottom: 0;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-quaternary);
    text-align: center;
    padding-bottom: 6px;
    white-space: nowrap;
  }
  .ne-timeline-marker::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 4px;
    background-color: var(--border-primary-solid);
    opacity: 0.4;
  }
  .ne-timeline-lane {
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px dashed var(--border-primary);
    opacity: 0.3;
  }
  .ne-timeline-lane__label {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
    background-color: var(--bg-surface, var(--canvas-secondary));
    padding: 2px 6px;
    border-radius: var(--radius-sm);
  }
  .ne-node--timeline {
    min-width: 140px;
    max-width: 200px;
    border-radius: var(--radius-md);
  }
  .ne-node--timeline .ne-node__header {
    padding: 8px 10px 4px;
  }
  .ne-node--timeline .ne-node__body {
    padding: 2px 10px 8px;
  }
  .ne-node--milestone {
    min-width: auto;
    max-width: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-width: 2px;
  }
  .ne-node--milestone .ne-node__header, .ne-node--milestone .ne-node__body {
    display: none;
  }
  .ne-node--milestone .ne-node__milestone-icon {
    font-size: 14px;
    color: var(--text-secondary);
  }
  .ne-node--milestone[data-color="blue"] .ne-node__milestone-icon {
    color: var(--text-info);
  }
  .ne-node--milestone[data-color="green"] .ne-node__milestone-icon {
    color: var(--text-success);
  }
  .ne-node--milestone[data-color="purple"] .ne-node__milestone-icon {
    color: var(--text-purple);
  }
  .ne-node--milestone[data-color="orange"] .ne-node__milestone-icon {
    color: var(--text-warning);
  }
  .ne-node--milestone-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
  }
  .ne-status {
    position: absolute;
    bottom: calc(var(--spacing) * 3);
    left: calc(var(--spacing) * 3);
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 11px;
    color: var(--text-tertiary);
    pointer-events: none;
  }
  .ne-status__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  .ne-frame {
    position: absolute;
    border: 1.5px dashed var(--border-primary);
    border-radius: var(--radius-xl);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 3%, transparent);
    }
    z-index: 0;
    pointer-events: none;
    transition: border-color var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default);
  }
  .ne-frame.is-selected {
    border-color: var(--border-focus);
    border-style: solid;
  }
  .ne-frame__label {
    position: absolute;
    top: -12px;
    left: 12px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    color: var(--text-secondary);
    pointer-events: auto;
    cursor: move;
    border: 1px solid var(--border-primary);
    letter-spacing: -0.005em;
  }
  .ne-frame[data-color="blue"] {
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 50%, transparent);
    }
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 4%, transparent);
    }
  }
  .ne-frame[data-color="blue"] .ne-frame__label {
    color: var(--text-info);
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 40%, transparent);
    }
  }
  .ne-frame[data-color="green"] {
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 50%, transparent);
    }
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 4%, transparent);
    }
  }
  .ne-frame[data-color="green"] .ne-frame__label {
    color: var(--text-success);
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 40%, transparent);
    }
  }
  .ne-frame[data-color="purple"] {
    border-color: var(--text-purple);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-purple) 50%, transparent);
    }
    background-color: var(--text-purple);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-purple) 4%, transparent);
    }
  }
  .ne-frame[data-color="purple"] .ne-frame__label {
    color: var(--text-purple);
    border-color: var(--text-purple);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-purple) 40%, transparent);
    }
  }
  .ne-frame[data-color="orange"] {
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 50%, transparent);
    }
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 4%, transparent);
    }
  }
  .ne-frame[data-color="orange"] .ne-frame__label {
    color: var(--text-warning);
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 40%, transparent);
    }
  }
  .ne-sticky {
    position: absolute;
    width: 200px;
    min-height: 100px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background-color: var(--text-warning);
    color: rgba(0, 0, 0, 0.85);
    box-shadow: var(--shadow-md);
    cursor: grab;
    font-family: var(--font-handwritten, var(--font-sans, inherit));
    font-size: 12.5px;
    line-height: 1.45;
    transform: rotate(-1deg);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    z-index: 1;
  }
  .ne-sticky:hover {
    transform: rotate(0deg);
    box-shadow: var(--shadow-lg);
    z-index: 2;
  }
  .ne-sticky:active {
    cursor: grabbing;
  }
  .ne-sticky__body {
    white-space: pre-line;
    word-break: break-word;
  }
  .ne-sticky__author {
    margin-top: 8px;
    font-size: 10px;
    opacity: 0.6;
    font-weight: 500;
  }
  .ne-sticky[data-color="yellow"] {
    background-color: var(--utility-yellow-200);
  }
  .ne-sticky[data-color="pink"] {
    background-color: var(--utility-pink-200);
  }
  .ne-sticky[data-color="green"] {
    background-color: var(--utility-green-200);
  }
  .ne-sticky[data-color="blue"] {
    background-color: var(--utility-blue-200);
  }
  .ne-sticky[data-color="purple"] {
    background-color: var(--utility-purple-200);
  }
  .ne-sticky[data-color="orange"] {
    background-color: var(--utility-orange-200);
  }
  .ne-node__ports {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 10px;
  }
  .ne-node__ports-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }
  .ne-node__ports-col--in {
    align-items: flex-start;
  }
  .ne-node__ports-col--out {
    align-items: flex-end;
  }
  .ne-port-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    position: relative;
  }
  .ne-port-row .ne-port {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
  }
  .ne-port--inline {
    position: relative;
    flex-shrink: 0;
  }
  .ne-port--success {
    border-color: var(--text-success);
  }
  .ne-port--warning {
    border-color: var(--text-warning);
  }
  .ne-port--danger {
    border-color: var(--text-danger);
  }
  .ne-port--info {
    border-color: var(--text-info);
  }
  .ne-port-label {
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
  }
  .ne-connector--dashed {
    stroke-dasharray: 8 4;
  }
  .ne-connector--dotted {
    stroke-dasharray: 2 4;
  }
  .ne-connector--double {
    stroke-width: 4;
    stroke-linecap: square;
  }
  .ne-connector--success {
    stroke: var(--text-success);
  }
  .ne-connector--warning {
    stroke: var(--text-warning);
  }
  .ne-connector--danger {
    stroke: var(--text-danger);
  }
  .ne-connector--flow {
    stroke-dasharray: 6 4;
    animation: ne-connector-flow 1.2s linear infinite;
  }
  @keyframes ne-connector-flow {
    to {
      stroke-dashoffset: -20;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ne-connector--flow {
      animation: none;
    }
  }
  .ne-connector-label {
    font-family: var(--font-sans, inherit);
    font-size: 10px;
    font-weight: 600;
    fill: var(--text-secondary);
    paint-order: stroke;
    stroke: var(--bg-surface, var(--canvas-secondary));
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
  .ne-node__status {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background-color: var(--text-tertiary);
    border: 2px solid var(--bg-surface, var(--canvas-secondary));
    z-index: 5;
  }
  .ne-node__status--success {
    background-color: var(--text-success);
  }
  .ne-node__status--error {
    background-color: var(--text-danger);
  }
  .ne-node__status--warning {
    background-color: var(--text-warning);
  }
  .ne-node__status--running {
    background-color: var(--text-info);
    animation: ne-status-pulse 1.4s ease-in-out infinite;
  }
  @keyframes ne-status-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--text-info) 40%, transparent), 0 0 0 2px var(--bg-surface, var(--canvas-secondary));
    }
    50% {
      box-shadow: 0 0 0 5px color-mix(in oklch, var(--text-info) 0%, transparent), 0 0 0 2px var(--bg-surface, var(--canvas-secondary));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ne-node__status--running {
      animation: none;
    }
  }
  .ne-node.is-collapsed {
    min-width: 0;
    max-width: 180px;
  }
  .ne-node.is-collapsed .ne-node__body, .ne-node.is-collapsed .ne-node__ports {
    display: none;
  }
  .ne-node.is-collapsed .ne-node__header {
    padding-bottom: 10px;
  }
  .ne-node--resizable {
    overflow: visible;
    max-width: none;
  }
  .ne-node--resizable::after {
    content: "";
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    background: linear-gradient( 135deg, transparent 0, transparent 50%, var(--text-tertiary) 50%, var(--text-tertiary) 60%, transparent 60%, transparent 70%, var(--text-tertiary) 70%, var(--text-tertiary) 80%, transparent 80% );
    opacity: 0.5;
    pointer-events: none;
  }
  .ne-node__resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 6;
  }
  .ne-canvas--readonly {
    cursor: default;
  }
  .ne-canvas--readonly:active {
    cursor: default;
  }
  .ne-canvas--readonly .ne-node {
    cursor: default;
  }
  .ne-canvas--readonly .ne-port {
    display: none;
  }
  .ne-canvas--readonly .ne-node--resizable::after {
    display: none;
  }
  .ne-palette {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface, var(--canvas-secondary));
    border-right: 1px solid var(--border-primary);
    overflow: hidden;
  }
  .ne-palette--right {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--border-primary);
  }
  .ne-palette__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-primary);
  }
  .ne-palette__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .ne-palette__search {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-primary);
  }
  .ne-palette__search input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-primary);
    background-color: var(--bg-input);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-input);
    outline: none;
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
  .ne-palette__search input::placeholder {
    color: var(--text-placeholder, var(--text-tertiary));
  }
  .ne-palette__search input:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover, var(--border-primary-hover));
  }
  .ne-palette__search input:focus, .ne-palette__search input:focus-visible {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .ne-palette__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
  }
  .ne-palette__section + .ne-palette__section {
    margin-top: 12px;
  }
  .ne-palette__section-label {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    padding: 4px 6px;
  }
  .ne-palette__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .ne-palette__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    border: 1px solid var(--border-primary);
    cursor: grab;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    text-align: center;
    min-height: 64px;
  }
  .ne-palette__item:hover {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 6%, var(--bg-card));
    }
    border-color: var(--border-focus);
  }
  .ne-palette__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .ne-palette__item:active {
    cursor: grabbing;
    transform: scale(0.96);
  }
  .ne-palette__item-icon {
    font-size: 16px;
    color: var(--text-secondary);
  }
  .ne-palette__item-label {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .ne-canvas:has(> .ne-palette) .ne-canvas__transform {
    padding-left: 240px;
  }
  .ne-canvas:has(> .ne-palette--right) .ne-canvas__transform {
    padding-left: 0;
    padding-right: 240px;
  }
  .ne-canvas__empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: var(--text-tertiary);
    pointer-events: none;
    padding: 24px;
  }
  .ne-canvas__empty-icon {
    font-size: 36px;
    opacity: 0.4;
  }
  .ne-canvas__empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .ne-canvas__empty-text {
    font-size: 12px;
    max-width: 280px;
    line-height: 1.5;
  }
  .ne-canvas__empty-action {
    margin-top: 4px;
    pointer-events: auto;
  }
  .ne-canvas__empty.is-hidden {
    display: none;
  }
  .ne-node.is-animating {
    transition: left var(--duration-slow) var(--ease-out), top var(--duration-slow) var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .ne-node, .ne-node.is-animating, .ne-port, .ne-connector, .ne-snap-guide, .ne-snap-indicator, .ne-minimap, .ne-canvas__grid, .ne-sticky, .ne-frame {
      transition: none;
    }
    .ne-node.is-appearing {
      animation: none;
    }
  }
}
@layer utilities {
  .code-snippet, .code-snippet--tabs {
    --code-snippet-radius-shell: 20px;
    --code-snippet-radius-frame: var(--radius-xl);
    --code-snippet-bg-shell: var(--bg-secondary);
    --code-snippet-bg-frame: var(--bg-primary);
    --code-snippet-ring-shell: var(--border-secondary);
    --code-snippet-ring-frame: var(--border-secondary-alt, var(--border-secondary));
    --code-snippet-gutter-bg: var(--bg-secondary);
    --code-snippet-gutter-border: var(--border-secondary);
    --code-snippet-gutter-text: var(--text-quaternary);
    --code-snippet-fade: var(--bg-primary);
    --code-snippet-font-size: 0.875rem;
    --code-snippet-line-height: 22px;
    --code-snippet-pad: 16px;
    --code-snippet-gutter-w: 48px;
    --code-snippet-plain: var(--text-primary);
    --code-snippet-comment: var(--utility-gray-500);
    --code-snippet-keyword: var(--utility-pink-700);
    --code-snippet-string: var(--utility-green-700);
    --code-snippet-number: var(--utility-orange-700);
    --code-snippet-function: var(--utility-violet-700);
    --code-snippet-class: var(--utility-blue-700);
    --code-snippet-property: var(--utility-sky-700);
    --code-snippet-tag: var(--utility-blue-700);
    --code-snippet-attr: var(--utility-violet-700);
    --code-snippet-operator: var(--text-secondary);
    --code-snippet-punctuation: var(--text-tertiary);
    --code-snippet-builtin: var(--utility-cyan-700);
    --code-snippet-regex: var(--utility-emerald-700);
    --code-snippet-diff-add-bg: var(--utility-green-500);
    @supports (color: color-mix(in lab, red, red)) {
      --code-snippet-diff-add-bg: color-mix(in oklch, var(--utility-green-500) 14%, transparent);
    }
    --code-snippet-diff-add-mark: var(--utility-green-700);
    --code-snippet-diff-remove-bg: var(--utility-red-500);
    @supports (color: color-mix(in lab, red, red)) {
      --code-snippet-diff-remove-bg: color-mix(in oklch, var(--utility-red-500) 14%, transparent);
    }
    --code-snippet-diff-remove-mark: var(--utility-red-700);
  }
  .code-snippet {
    position: relative;
    display: block;
    max-width: 100%;
    padding: 8px;
    border-radius: var(--code-snippet-radius-shell);
    background-color: var(--code-snippet-bg-shell);
    box-shadow: inset 0 0 0 1px var(--code-snippet-ring-shell);
    color: var(--code-snippet-plain);
  }
  .code-snippet__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 6px 8px 8px;
    color: var(--text-tertiary);
  }
  .code-snippet__filename {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .code-snippet__filename > .code-snippet__filename-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .code-snippet__filename > i, .code-snippet__filename > svg {
    flex-shrink: 0;
    font-size: 0.875rem;
    opacity: 0.75;
  }
  .code-snippet__lang {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
  }
  .code-snippet__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--code-snippet-radius-frame);
    background-color: var(--code-snippet-bg-frame);
    box-shadow: inset 0 0 0 1px var(--code-snippet-ring-frame), var(--shadow-lg);
  }
  .code-snippet__scroll {
    overflow-x: auto;
    margin: 0;
    padding: var(--code-snippet-pad);
    font-family: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: var(--code-snippet-font-size);
    line-height: var(--code-snippet-line-height);
    tab-size: 2;
    scrollbar-width: thin;
    scrollbar-color: var(--text-primary) transparent;
    @supports (color: color-mix(in lab, red, red)) {
      scrollbar-color: color-mix(in oklch, var(--text-primary) 22%, transparent) transparent;
    }
  }
  .code-snippet__scroll::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }
  .code-snippet__scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .code-snippet__scroll::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-primary) 22%, transparent);
    }
  }
  .code-snippet__code {
    display: block;
    white-space: pre;
    color: var(--code-snippet-plain);
    font: inherit;
  }
  .code-snippet__line {
    display: block;
    min-height: var(--code-snippet-line-height);
  }
  .code-snippet--numbered .code-snippet__scroll {
    padding-left: 0;
  }
  .code-snippet--numbered .code-snippet__code {
    counter-reset: cs-line;
  }
  .code-snippet--numbered .code-snippet__line {
    counter-increment: cs-line;
  }
  .code-snippet--numbered .code-snippet__line::before {
    content: counter(cs-line);
    position: sticky;
    left: 0;
    display: inline-block;
    text-align: right;
    -webkit-user-select: none;
    user-select: none;
    width: var(--code-snippet-gutter-w);
    margin-right: 16px;
    padding-right: 16px;
    color: var(--code-snippet-gutter-text);
    background-color: var(--code-snippet-gutter-bg);
    border-right: 1px solid var(--code-snippet-gutter-border);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .code-snippet--numbered .code-snippet__line:first-child::before {
    padding-top: var(--code-snippet-pad);
  }
  .code-snippet--numbered .code-snippet__line:last-child::before {
    padding-bottom: var(--code-snippet-pad);
  }
  .code-snippet__actions {
    position: absolute;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .code-snippet__frame:hover > .code-snippet__actions, .code-snippet__frame:focus-within > .code-snippet__actions, .code-snippet.is-expanded .code-snippet__actions {
    opacity: 1;
  }
  .code-snippet__action {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 82%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    backdrop-filter: blur(4px);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease), background-color var(--duration-fast, 100ms) var(--ease-default, ease), box-shadow var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .code-snippet__action:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .code-snippet__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    color: var(--text-primary);
  }
  .code-snippet__action > i, .code-snippet__action > svg {
    font-size: 0.8125rem;
    pointer-events: none;
  }
  .code-snippet__action.is-copied {
    color: var(--text-success, var(--utility-green-700));
    box-shadow: inset 0 0 0 1px var(--utility-green-500);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--utility-green-500) 45%, transparent);
    }
  }
  .code-snippet--collapsible .code-snippet__scroll {
    max-height: var(--code-snippet-max-height, 260px);
    overflow-y: hidden;
  }
  .code-snippet--collapsible.is-expanded .code-snippet__scroll {
    max-height: none;
    overflow-y: visible;
  }
  .code-snippet__fade {
    pointer-events: none;
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    justify-content: center;
    height: 128px;
    padding-bottom: 16px;
    background: linear-gradient( to bottom, var(--code-snippet-fade) 0%, var(--code-snippet-fade) 60%, var(--code-snippet-fade) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to bottom, color-mix(in oklch, var(--code-snippet-fade), transparent 100%) 0%, color-mix(in oklch, var(--code-snippet-fade), transparent 30%) 60%, var(--code-snippet-fade) 100% );
    }
    transition: opacity var(--duration-normal, 200ms) var(--ease-default, ease);
  }
  .code-snippet__fade > .code-snippet__more {
    pointer-events: auto;
  }
  .code-snippet.is-expanded .code-snippet__fade {
    position: static;
    height: auto;
    padding: 12px 0 4px;
    background: none;
  }
  .code-snippet--collapsible:not(.is-collapsible-ready) .code-snippet__fade {
    display: none;
  }
  .code-snippet--collapsible:not(.is-collapsible-ready) .code-snippet__scroll {
    max-height: none;
    overflow-y: visible;
  }
  .code-snippet__more {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-style: var(--tw-border-style);
    border-width: 0px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .code-snippet__more:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .code-snippet__more:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .code-snippet--xs {
    --code-snippet-font-size: 0.75rem;
    --code-snippet-line-height: 18px;
    --code-snippet-pad: 10px;
    --code-snippet-gutter-w: 32px;
  }
  .code-snippet--sm {
    --code-snippet-font-size: 0.8125rem;
    --code-snippet-line-height: 20px;
    --code-snippet-pad: 12px;
    --code-snippet-gutter-w: 40px;
  }
  .code-snippet--lg {
    --code-snippet-font-size: 0.9375rem;
    --code-snippet-line-height: 26px;
    --code-snippet-pad: 20px;
    --code-snippet-gutter-w: 56px;
  }
  .code-snippet--bordered {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .code-snippet--bordered .code-snippet__frame {
    box-shadow: inset 0 0 0 1px var(--code-snippet-ring-shell);
  }
  .code-snippet--bordered .code-snippet__header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-secondary);
    margin-bottom: 0;
  }
  .code-snippet--plain {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .code-snippet--plain .code-snippet__frame {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .code-snippet--plain .code-snippet__actions {
    top: 0;
    right: 0;
  }
  .code-snippet--terminal {
    --code-snippet-bg-shell: var(--utility-neutral-900);
    --code-snippet-bg-frame: var(--utility-neutral-950, var(--color-neutral-950));
    --code-snippet-ring-shell: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --code-snippet-ring-shell: color-mix(in oklch, var(--utility-neutral-100) 12%, transparent);
    }
    --code-snippet-ring-frame: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --code-snippet-ring-frame: color-mix(in oklch, var(--utility-neutral-100) 8%, transparent);
    }
    --code-snippet-fade: var(--utility-neutral-950, var(--color-neutral-950));
    --code-snippet-plain: var(--utility-neutral-100);
    --code-snippet-gutter-bg: var(--utility-neutral-900);
    --code-snippet-gutter-border: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      --code-snippet-gutter-border: color-mix(in oklch, var(--utility-neutral-100) 10%, transparent);
    }
    --code-snippet-gutter-text: var(--utility-neutral-500);
    --code-snippet-comment: var(--utility-neutral-500);
    --code-snippet-keyword: var(--utility-pink-300);
    --code-snippet-string: var(--utility-green-300);
    --code-snippet-number: var(--utility-orange-300);
    --code-snippet-function: var(--utility-violet-300);
    --code-snippet-class: var(--utility-blue-300);
    --code-snippet-property: var(--utility-sky-300);
    --code-snippet-tag: var(--utility-blue-300);
    --code-snippet-attr: var(--utility-violet-300);
    --code-snippet-operator: var(--utility-neutral-300);
    --code-snippet-punctuation: var(--utility-neutral-400);
    --code-snippet-builtin: var(--utility-cyan-300);
    --code-snippet-regex: var(--utility-emerald-300);
  }
  .code-snippet--terminal .code-snippet__action {
    color: var(--utility-neutral-300);
    background-color: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--utility-neutral-100) 8%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--utility-neutral-100) 14%, transparent);
    }
  }
  .code-snippet--terminal .code-snippet__action:hover {
    color: var(--utility-neutral-100);
    background-color: var(--utility-neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--utility-neutral-100) 14%, transparent);
    }
  }
  .cs-tok--comment {
    color: var(--code-snippet-comment);
    font-style: italic;
  }
  .cs-tok--keyword {
    color: var(--code-snippet-keyword);
  }
  .cs-tok--string {
    color: var(--code-snippet-string);
  }
  .cs-tok--number {
    color: var(--code-snippet-number);
  }
  .cs-tok--boolean {
    color: var(--code-snippet-number);
  }
  .cs-tok--function {
    color: var(--code-snippet-function);
  }
  .cs-tok--class {
    color: var(--code-snippet-class);
  }
  .cs-tok--property {
    color: var(--code-snippet-property);
  }
  .cs-tok--tag {
    color: var(--code-snippet-tag);
  }
  .cs-tok--attr {
    color: var(--code-snippet-attr);
  }
  .cs-tok--operator {
    color: var(--code-snippet-operator);
  }
  .cs-tok--punctuation {
    color: var(--code-snippet-punctuation);
  }
  .cs-tok--builtin {
    color: var(--code-snippet-builtin);
  }
  .cs-tok--regex {
    color: var(--code-snippet-regex);
  }
  .cs-tok--variable {
    color: var(--code-snippet-plain);
  }
  .code-snippet__line--add, .code-snippet__line--remove {
    position: relative;
    display: block;
    width: 100%;
  }
  .code-snippet__line--add {
    background-color: var(--code-snippet-diff-add-bg);
  }
  .code-snippet__line--remove {
    background-color: var(--code-snippet-diff-remove-bg);
  }
  .code-snippet__line--add::after, .code-snippet__line--remove::after {
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    left: 6px;
    font-weight: 700;
  }
  .code-snippet__line--add::after {
    content: "+";
    color: var(--code-snippet-diff-add-mark);
  }
  .code-snippet__line--remove::after {
    content: "−";
    color: var(--code-snippet-diff-remove-mark);
  }
  .code-snippet--diff:not(.code-snippet--numbered) .code-snippet__code {
    padding-left: 18px;
  }
  .code-snippet__skeleton, .code-snippet__empty, .code-snippet__error {
    display: none;
  }
  .code-snippet.is-loading .code-snippet__scroll, .code-snippet.is-empty .code-snippet__scroll, .code-snippet.is-error .code-snippet__scroll {
    display: none;
  }
  .code-snippet.is-loading .code-snippet__actions, .code-snippet.is-empty .code-snippet__actions, .code-snippet.is-error .code-snippet__actions {
    display: none;
  }
  .code-snippet.is-loading .code-snippet__skeleton {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding: var(--code-snippet-pad);
  }
  .code-snippet__skeleton-line {
    height: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient( 90deg, var(--text-primary) 25%, var(--text-primary) 37%, var(--text-primary) 63% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 90deg, color-mix(in oklch, var(--text-primary) 8%, transparent) 25%, color-mix(in oklch, var(--text-primary) 16%, transparent) 37%, color-mix(in oklch, var(--text-primary) 8%, transparent) 63% );
    }
    background-size: 400% 100%;
    animation: cs-shimmer 1.4s ease infinite;
  }
  .code-snippet__skeleton-line:nth-child(2) {
    width: 82%;
  }
  .code-snippet__skeleton-line:nth-child(3) {
    width: 64%;
  }
  .code-snippet__skeleton-line:nth-child(4) {
    width: 90%;
  }
  .code-snippet__skeleton-line:nth-child(5) {
    width: 48%;
  }
  @keyframes cs-shimmer {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0 0;
    }
  }
  .code-snippet.is-empty .code-snippet__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    padding: 40px 16px;
    color: var(--text-tertiary);
  }
  .code-snippet__empty > i, .code-snippet__empty > svg {
    font-size: 1.5rem;
    opacity: 0.5;
  }
  .code-snippet__empty-text {
    font-size: 0.8125rem;
  }
  .code-snippet.is-error .code-snippet__error {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 16px;
    color: var(--text-danger, var(--utility-red-700));
    font-size: 0.8125rem;
  }
  .code-snippet__error > i, .code-snippet__error > svg {
    flex-shrink: 0;
    font-size: 1rem;
  }
  .code-snippet.is-disabled, .code-snippet[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
  }
  .code-snippet--tabs {
    position: relative;
    display: block;
    padding: 0;
    border-radius: var(--code-snippet-radius-shell);
    background-color: var(--code-snippet-bg-shell);
    box-shadow: inset 0 0 0 1px var(--code-snippet-ring-shell), var(--shadow-xs);
    overflow: hidden;
  }
  .code-snippet__tabbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
  }
  .code-snippet__tablist {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    align-items: center;
    gap: var(--spacing);
    overflow-x: auto;
    padding: 8px 8px 8px 12px;
    scrollbar-width: none;
  }
  .code-snippet__tablist::-webkit-scrollbar {
    display: none;
  }
  .code-snippet__tab {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease), background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .code-snippet__tab:hover {
    color: var(--text-secondary);
  }
  .code-snippet__tab[aria-selected="true"] {
    color: var(--text-primary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
  }
  .code-snippet__tab:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .code-snippet__tabcopy {
    flex-shrink: 0;
    margin: 8px 8px 0 0;
  }
  .code-snippet__panel {
    display: none;
  }
  .code-snippet__panel[data-active] {
    display: block;
  }
  .code-snippet__panel > .code-snippet {
    padding: 8px;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .code-snippet__panel > .code-snippet .code-snippet__frame {
    box-shadow: inset 0 0 0 1px var(--code-snippet-ring-frame);
  }
  [data-theme="theme-dark"] .code-snippet:not(.code-snippet--terminal), [data-theme="theme-mica-dark"] .code-snippet:not(.code-snippet--terminal) {
    --code-snippet-comment: var(--utility-neutral-500);
    --code-snippet-keyword: var(--utility-pink-300);
    --code-snippet-string: var(--utility-green-300);
    --code-snippet-number: var(--utility-orange-300);
    --code-snippet-function: var(--utility-violet-300);
    --code-snippet-class: var(--utility-blue-300);
    --code-snippet-property: var(--utility-sky-300);
    --code-snippet-tag: var(--utility-blue-300);
    --code-snippet-attr: var(--utility-violet-300);
    --code-snippet-operator: var(--utility-neutral-300);
    --code-snippet-punctuation: var(--utility-neutral-400);
    --code-snippet-builtin: var(--utility-cyan-300);
    --code-snippet-regex: var(--utility-emerald-300);
    --code-snippet-diff-add-mark: var(--utility-green-400);
    --code-snippet-diff-remove-mark: var(--utility-red-400);
  }
  @media (prefers-reduced-motion: reduce) {
    .code-snippet__action, .code-snippet__actions, .code-snippet__more, .code-snippet__fade, .code-snippet__tab {
      transition: none;
    }
    .code-snippet__skeleton-line {
      animation: none;
    }
  }
  @media (max-width: 639px) {
    .code-snippet {
      --code-snippet-pad: 12px;
    }
    .code-snippet--numbered {
      --code-snippet-gutter-w: 36px;
    }
    .code-snippet__actions {
      opacity: 1;
    }
  }
}
@layer utilities {
  .description-list {
    display: grid;
    column-gap: calc(var(--spacing) * 6);
    row-gap: calc(var(--spacing) * 3.5);
    grid-template-columns: 1fr;
    margin: 0;
  }
  .description-list__group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing);
  }
  .description-list__term {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .description-list__term-icon {
    flex: none;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-quaternary);
  }
  .description-list__detail {
    min-width: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
    margin: 0;
    overflow-wrap: anywhere;
  }
  .description-list__detail:empty::after {
    content: "—";
    color: var(--text-quaternary);
  }
  .description-list__hint {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .description-list--horizontal .description-list__group {
    display: grid;
    align-items: flex-start;
    gap: var(--spacing);
    grid-template-columns: minmax(9rem, 34%) 1fr;
    gap: 0 1.25rem;
  }
  .description-list--horizontal .description-list__term {
    padding-top: 1px;
  }
  .description-list--inline .description-list__group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: calc(var(--spacing) * 2);
    row-gap: 0;
  }
  .description-list--inline .description-list__term::after {
    content: ":";
    color: var(--text-quaternary);
  }
  .description-list--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .description-list--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media (max-width: 48rem) {
    .description-list--cols-2, .description-list--cols-3 {
      grid-template-columns: 1fr;
    }
  }
  .description-list--card {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 5);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .description-list--bordered {
    row-gap: 0;
  }
  .description-list--bordered .description-list__group {
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-divider);
  }
  .description-list--bordered .description-list__group:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .description-list--striped {
    row-gap: 0;
  }
  .description-list--striped .description-list__group {
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
  }
  .description-list--striped .description-list__group:nth-child(odd) {
    background-color: var(--bg-secondary);
  }
  .description-list--compact {
    row-gap: calc(var(--spacing) * 2);
  }
  .description-list--compact.description-list--bordered .description-list__group, .description-list--compact.description-list--striped .description-list__group {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .description-list--comfortable {
    row-gap: calc(var(--spacing) * 5);
  }
  .description-list--comfortable.description-list--bordered .description-list__group {
    padding-block: calc(var(--spacing) * 4);
  }
  .description-list__group--editable {
    position: relative;
  }
  .description-list__edit {
    margin-left: var(--spacing);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    opacity: 0%;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-tertiary);
    transition: opacity var(--duration-fast, 120ms) var(--ease-default, ease), background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .description-list__group--editable:hover .description-list__edit, .description-list__group--editable:focus-within .description-list__edit {
    opacity: 100%;
  }
  .description-list__edit:hover {
    background-color: var(--bg-primary-hover);
  }
  .description-list__edit:focus-visible {
    opacity: 100%;
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .description-list--loading .description-list__detail {
    border-radius: 0.25rem;
    color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    min-height: 1.05rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .description-list--loading .description-list__detail {
      animation: none;
    }
  }
}
@layer utilities {
  .data-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
  }
  .data-list--card {
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .data-list__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-divider);
  }
  .data-list__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    text-decoration-line: none;
    color: inherit;
    border-top: 1px solid var(--border-divider);
    background-color: transparent;
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .data-list__row:first-child, .data-list__header + .data-list__row {
    border-top: 0;
  }
  .data-list--flush {
    background: transparent;
    box-shadow: none;
  }
  .data-list--hover .data-list__row:hover, a.data-list__row:hover, button.data-list__row:hover {
    background-color: var(--bg-secondary);
  }
  a.data-list__row:active, button.data-list__row:active {
    background-color: var(--bg-tertiary);
  }
  .data-list__row:focus-visible {
    position: relative;
    z-index: 10;
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .data-list__row.is-selected {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-brand-solid) 8%, transparent);
    }
  }
  .data-list__row.is-selected .data-list__title {
    color: var(--text-link);
  }
  .data-list__row.is-unread {
    box-shadow: inset 3px 0 0 0 var(--border-brand);
  }
  .data-list__row.is-unread .data-list__title {
    font-weight: 600;
  }
  .data-list__select {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
  }
  .data-list__lead {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: center;
  }
  .data-list__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .data-list__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .data-list__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .data-list__col {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 0.5);
    text-align: right;
    min-width: 5rem;
  }
  .data-list__col-label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-quaternary);
  }
  .data-list__col-value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .data-list__trailing {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .data-list__chevron {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-quaternary);
    transition: transform var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  a.data-list__row:hover .data-list__chevron, button.data-list__row:hover .data-list__chevron {
    transform: translateX(2px);
    color: var(--text-tertiary);
  }
  .data-list__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    opacity: 0%;
    transition: opacity var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .data-list__row:hover .data-list__actions, .data-list__row:focus-within .data-list__actions {
    opacity: 100%;
  }
  .data-list--compact .data-list__row {
    padding-block: calc(var(--spacing) * 2);
  }
  .data-list--comfortable .data-list__row {
    padding-block: calc(var(--spacing) * 4);
  }
  .data-list--striped .data-list__row:nth-child(even) {
    background-color: var(--bg-secondary);
  }
  .data-list__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    color: var(--text-tertiary);
  }
  .data-list__empty i {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    color: var(--text-quaternary);
  }
  .data-list__row[aria-busy="true"] .data-list__title, .data-list__row[aria-busy="true"] .data-list__subtitle, .data-list__row[aria-busy="true"] .data-list__col-value {
    border-radius: 0.25rem;
    color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .data-list__row[aria-busy="true"] .data-list__title, .data-list__row[aria-busy="true"] .data-list__subtitle, .data-list__row[aria-busy="true"] .data-list__col-value {
      animation: none;
    }
  }
  @media (max-width: 40rem) {
    .data-list__col {
      display: none;
    }
    .data-list__col--keep {
      display: flex;
    }
  }
}
@layer utilities {
  .ranked-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    counter-reset: rank;
  }
  .ranked-list--card {
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .ranked-list__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-divider);
  }
  .ranked-list__row:first-child {
    border-top: 0;
  }
  .ranked-list--compact .ranked-list__row {
    padding-block: calc(var(--spacing) * 2);
  }
  .ranked-list__rank {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .ranked-list__row--leader .ranked-list__rank {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .ranked-list__row--leader .ranked-list__label {
    color: var(--text-primary);
    font-weight: 600;
  }
  .ranked-list__lead {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: center;
  }
  .ranked-list__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing);
  }
  .ranked-list__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .ranked-list__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .ranked-list__bar {
    margin-top: calc(var(--spacing) * 0.5);
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-full);
    height: 0.375rem;
    background-color: var(--bg-tertiary);
  }
  .ranked-list__bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    width: var(--value, 0%);
    background-color: var(--bg-brand-solid);
    transition: width var(--duration-normal, 240ms) var(--ease-out, ease);
  }
  .ranked-list:not(.ranked-list--bars) .ranked-list__bar {
    display: none;
  }
  .ranked-list__value {
    flex: none;
    text-align: right;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
    min-width: 4rem;
  }
  .ranked-list__delta {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
    min-width: 2.75rem;
  }
  .ranked-list__delta--up {
    color: var(--text-success);
  }
  .ranked-list__delta--down {
    color: var(--text-danger);
  }
  .ranked-list__delta--flat {
    color: var(--text-quaternary);
  }
  @media (prefers-reduced-motion: reduce) {
    .ranked-list__bar-fill {
      transition: none;
    }
  }
}
@layer utilities {
  .nested-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    --nl-indent: 1.25rem;
  }
  .nested-list--card {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 2);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .nested-list__branch {
    display: block;
  }
  .nested-list__row, .nested-list__leaf {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: default;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-secondary);
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .nested-list__row {
    cursor: pointer;
    list-style: none;
  }
  .nested-list__row::-webkit-details-marker {
    display: none;
  }
  .nested-list__row::marker {
    content: "";
  }
  .nested-list__row:hover, .nested-list__leaf:hover {
    background-color: var(--bg-secondary);
  }
  .nested-list__branch > .nested-list__row:focus-visible, .nested-list__leaf:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .nested-list__chevron {
    width: calc(var(--spacing) * 3);
    flex: none;
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-quaternary);
    transition: transform var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .nested-list__branch[open] > .nested-list__row .nested-list__chevron {
    transform: rotate(90deg);
  }
  .nested-list__leaf-spacer {
    width: calc(var(--spacing) * 3);
    flex: none;
  }
  .nested-list__icon {
    flex: none;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .nested-list__label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nested-list__count {
    flex: none;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
  }
  .nested-list__children {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-left: var(--nl-indent);
  }
  .nested-list--guides .nested-list__children {
    position: relative;
    margin-left: 0.55rem;
    padding-left: calc(var(--nl-indent) - 0.55rem);
    border-left: 1px solid var(--border-divider);
  }
  .nested-list__row.is-current, .nested-list__leaf.is-current {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-brand-solid) 8%, transparent);
    }
    color: var(--text-link);
    font-weight: 500;
  }
  .nested-list__row.is-current .nested-list__icon, .nested-list__leaf.is-current .nested-list__icon {
    color: var(--text-link);
  }
  .nested-list--compact .nested-list__row, .nested-list--compact .nested-list__leaf {
    padding-block: var(--spacing);
  }
  .nested-list--compact {
    --nl-indent: 1rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .nested-list__chevron {
      transition: none;
    }
  }
}
@layer utilities {
  .detail-attributes {
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .detail-attributes--flush {
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-none);
  }
  .detail-attributes__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--border-divider);
  }
  .detail-attributes__identity {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .detail-attributes__identity-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .detail-attributes__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .detail-attributes__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .detail-attributes__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .detail-attributes__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .detail-attributes__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-divider);
    background-color: var(--bg-secondary);
  }
  .detail-attributes.is-editing {
    box-shadow: inset 0 0 0 1px var(--border-brand), var(--shadow-sm);
  }
  .detail-attributes.is-editing .detail-attributes__header {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-brand-solid) 5%, transparent);
    }
  }
  .detail-attributes--compact .detail-attributes__header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .detail-attributes--compact .detail-attributes__body {
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .detail-attributes--compact .detail-attributes__footer {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .detail-attributes__body--two-col {
    display: grid;
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 6);
    grid-template-columns: 1fr;
  }
  @media (min-width: 40rem) {
    .detail-attributes__body--two-col {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .detail-attributes.is-loading .detail-attributes__name, .detail-attributes.is-loading .detail-attributes__subtitle, .detail-attributes.is-loading .detail-attributes__body {
    pointer-events: none;
    border-radius: 0.25rem;
    color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .detail-attributes.is-loading .detail-attributes__body {
    min-height: 8rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .detail-attributes.is-loading .detail-attributes__name, .detail-attributes.is-loading .detail-attributes__subtitle, .detail-attributes.is-loading .detail-attributes__body {
      animation: none;
    }
  }
}
@layer utilities {
  .metric-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .metric-delta--up {
    color: var(--text-success);
  }
  .metric-delta--down {
    color: var(--text-danger);
  }
  .metric-delta--flat {
    color: var(--text-quaternary);
  }
  .metric-delta--pill {
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    background-color: var(--bg-secondary);
  }
  .metric-delta--pill.metric-delta--up {
    background-color: var(--bg-success-subtle);
  }
  .metric-delta--pill.metric-delta--down {
    background-color: var(--bg-danger-subtle);
  }
  .metric-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 5);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .metric-card__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .metric-card__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .metric-card__tools {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  .metric-card__value {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .metric-card__value-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .metric-card__compare {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-divider);
  }
  .metric-card__compare-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .metric-card__compare-value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
  }
  .metric-card__spark {
    display: block;
    width: 100%;
    height: 3rem;
  }
  .metric-card__spark svg {
    display: block;
    height: 100%;
    width: 100%;
    overflow: visible;
  }
  .metric-card__spark polyline {
    fill: none;
    stroke: var(--bg-brand-solid);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }
  .metric-card__spark path {
    fill: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--bg-brand-solid) 12%, transparent);
    }
    stroke: none;
  }
  .metric-card__spark--up polyline {
    stroke: var(--bg-success-solid);
  }
  .metric-card__spark--up path {
    fill: var(--bg-success-solid);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--bg-success-solid) 12%, transparent);
    }
  }
  .metric-card__spark--down polyline {
    stroke: var(--bg-danger-solid);
  }
  .metric-card__spark--down path {
    fill: var(--bg-danger-solid);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in srgb, var(--bg-danger-solid) 12%, transparent);
    }
  }
  .metric-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .metric-card__footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    color: var(--text-link);
  }
  .kpi-grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .kpi-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kpi-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 48rem) {
    .kpi-grid--cols-3, .kpi-grid--cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 30rem) {
    .kpi-grid, .kpi-grid--cols-2, .kpi-grid--cols-3, .kpi-grid--cols-4 {
      grid-template-columns: 1fr;
    }
  }
  .kpi-tile {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .kpi-tile--focus {
    grid-column: span 2;
  }
  @media (max-width: 30rem) {
    .kpi-tile--focus {
      grid-column: auto;
    }
  }
  .kpi-tile__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .kpi-tile__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    width: 2rem;
    height: 2rem;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
  }
  .kpi-tile--brand .kpi-tile__icon {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .kpi-tile--success .kpi-tile__icon {
    color: var(--text-success);
    background-color: var(--bg-success-subtle);
  }
  .kpi-tile--warning .kpi-tile__icon {
    color: var(--text-warning);
    background-color: var(--bg-warning-subtle);
  }
  .kpi-tile--danger .kpi-tile__icon {
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
  }
  .kpi-tile--info .kpi-tile__icon {
    color: var(--text-info);
    background-color: var(--bg-info-subtle);
  }
  .kpi-tile__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .kpi-tile__value {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .kpi-tile__foot {
    margin-top: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .stat-summary-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
    overflow-x: auto;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .stat-summary-bar--flush {
    background: transparent;
    box-shadow: none;
    padding-inline: 0;
  }
  .stat-summary-bar__title {
    flex: none;
    padding-right: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .stat-summary-bar__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    padding-left: calc(var(--spacing) * 4);
    border-left: 1px solid var(--border-divider);
  }
  .stat-summary-bar__item:first-of-type {
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
    padding-left: 0;
  }
  .stat-summary-bar__item-value {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .stat-summary-bar__item-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .stat-summary-bar__spacer {
    flex: 1;
  }
  .stat-summary-bar__action {
    flex: none;
  }
  .big-number {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .big-number__value {
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--text-primary);
    letter-spacing: -0.02em;
  }
  .big-number__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .big-number__context {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .big-number--split {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--spacing) * 8);
  }
  .big-number__satellites {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 6);
  }
  .big-number__sat {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .big-number__sat-value {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .big-number__sat-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .progress-stat {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 5);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .progress-stat--horizontal {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .progress-stat__ring {
    flex: none;
  }
  .progress-stat__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing);
  }
  .progress-stat__value {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .progress-stat__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .progress-stat__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .segmeter {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: var(--spacing);
  }
  .segmeter__seg {
    flex: 1;
    border-radius: var(--radius-full);
    height: 0.5rem;
    background-color: var(--bg-tertiary);
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .segmeter__seg.is-filled {
    background-color: var(--bg-brand-solid);
  }
  .segmeter--success .segmeter__seg.is-filled {
    background-color: var(--bg-success-solid);
  }
  .segmeter--warning .segmeter__seg.is-filled {
    background-color: var(--bg-warning-solid);
  }
  .segmeter--danger .segmeter__seg.is-filled {
    background-color: var(--bg-danger-solid);
  }
  .segmeter__caption {
    margin-top: calc(var(--spacing) * 1.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .segmeter__seg {
      transition: none;
    }
  }
}
@layer utilities {
  .trend-stat {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 5);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .trend-stat__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .trend-stat__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .trend-stat__value {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .trend-bars {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: flex-end;
    gap: var(--spacing);
    height: 4rem;
  }
  .trend-bars__bar {
    flex: 1;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    height: calc(var(--h, 0) * 1%);
    min-height: 2px;
    background-color: var(--bg-tertiary);
    transition: height var(--duration-normal, 240ms) var(--ease-out, ease);
  }
  .trend-bars__bar--current {
    background-color: var(--bg-brand-solid);
  }
  .trend-bars__bar--up {
    background-color: var(--bg-success-solid);
  }
  .trend-bars__bar--down {
    background-color: var(--bg-danger-solid);
  }
  .trend-bars__axis {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .sparkbars {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    vertical-align: middle;
    height: 1.25rem;
    width: 4rem;
  }
  .sparkbars__bar {
    flex: 1;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    height: calc(var(--h, 0) * 1%);
    min-height: 1px;
    background-color: var(--bg-tertiary);
  }
  .sparkbars__bar--current {
    background-color: var(--bg-brand-solid);
  }
  .trend-bars--comparison .trend-bars__bar {
    position: relative;
  }
  .trend-bars__ghost {
    position: absolute;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    left: -25%;
    right: 55%;
    bottom: 0;
    height: calc(var(--h-prev, 0) * 1%);
    min-height: 2px;
    background-color: var(--bg-tertiary);
    opacity: 0.7;
  }
  .trend-bars {
    position: relative;
  }
  .trend-bars__goal {
    pointer-events: none;
    position: absolute;
    right: 0;
    left: 0;
    bottom: calc(var(--goal, 0) * 1%);
    border-top: 1px dashed var(--border-brand);
  }
  .trend-bars__goal-label {
    position: absolute;
    right: 0;
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    padding-right: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-link);
  }
  .trend-stat--inline {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3);
  }
  .trend-stat--inline .trend-stat__head {
    flex: none;
  }
  .trend-stat--inline .trend-stat__value {
    flex: none;
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .trend-stat--inline .trend-bars {
    flex: 1;
    height: 2rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .trend-bars__bar {
      transition: none;
    }
  }
}
@layer utilities {
  .comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .comparison-table th, .comparison-table td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-divider);
  }
  .comparison-table th[scope="row"], .comparison-table .comparison-table__feature {
    position: sticky;
    left: 0;
    z-index: 10;
    text-align: left;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    background-color: var(--bg-card);
  }
  .comparison-table thead th {
    color: var(--text-primary);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .comparison-table__plan {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .comparison-table__price {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
  }
  .comparison-table__col--recommended {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-brand-solid) 6%, transparent);
    }
  }
  .comparison-table thead .comparison-table__col--recommended {
    border-top: 2px solid var(--border-brand);
  }
  .comparison-table__check {
    color: var(--text-success);
  }
  .comparison-table__cross {
    color: var(--text-quaternary);
  }
  .pivot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
  }
  .pivot-table th, .pivot-table td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: right;
    border-bottom: 1px solid var(--border-divider);
    border-right: 1px solid var(--border-divider);
  }
  .pivot-table th:last-child, .pivot-table td:last-child {
    border-right: 0;
  }
  .pivot-table thead th, .pivot-table th[scope="row"] {
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .pivot-table thead th {
    text-align: right;
  }
  .pivot-table th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 10;
  }
  .pivot-table__total, .pivot-table tfoot td, .pivot-table tfoot th {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .pivot-table__subtotal {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
    }
  }
  .pivot-table--compact th, .pivot-table--compact td {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
  }
  .pivot-table--striped tbody tr:nth-child(even) td {
    background-color: var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-secondary) 45%, transparent);
    }
  }
  .pivot-table__cell--emphasis {
    box-shadow: inset 0 0 0 2px var(--border-brand);
    color: var(--text-link);
    font-weight: 600;
  }
  .matrix-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .matrix-table th, .matrix-table td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    border: 1px solid var(--border-divider);
  }
  .matrix-table thead th {
    color: var(--text-primary);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .matrix-table th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 10;
    text-align: left;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    background-color: var(--bg-card);
  }
  .matrix-table__cell--on {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .matrix-table__cell--partial {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .matrix-table__cell--off {
    color: var(--text-quaternary);
  }
  .matrix-legend {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .matrix-legend__item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .matrix-legend__swatch {
    display: inline-block;
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    border-radius: var(--radius-sm);
  }
  .matrix-legend__swatch--on {
    background-color: var(--bg-success-subtle);
    box-shadow: inset 0 0 0 1px var(--bg-success-solid);
  }
  .matrix-legend__swatch--partial {
    background-color: var(--bg-warning-subtle);
    box-shadow: inset 0 0 0 1px var(--bg-warning-solid);
  }
  .matrix-legend__swatch--off {
    background-color: var(--bg-tertiary);
  }
  .definition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .definition-table th, .definition-table td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-divider);
  }
  .definition-table th[scope="row"] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    width: 1%;
  }
  .definition-table__type {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .definition-table__group th {
    padding-top: calc(var(--spacing) * 5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-divider);
    background-color: transparent;
  }
  .definition-table--compact th, .definition-table--compact td {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .definition-table--striped tbody tr:not(.definition-table__group):nth-child(even) td {
    background-color: var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-secondary) 45%, transparent);
    }
  }
  .definition-table__term--deprecated {
    color: var(--text-quaternary);
    text-decoration: line-through;
  }
  .definition-table__term--deprecated + td, .definition-table__term--deprecated ~ td {
    color: var(--text-quaternary);
  }
  .figures-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
  }
  .figures-table th, .figures-table td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-divider);
  }
  .figures-table th {
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .figures-table td:first-child, .figures-table th:first-child {
    text-align: left;
  }
  .figures-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .figures-table__pos {
    color: var(--text-success);
  }
  .figures-table__neg {
    color: var(--text-danger);
  }
  .figures-table__row--subtotal td {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    border-top: 1px solid var(--border-divider);
  }
  .figures-table__row--total td {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    border-top: 2px solid var(--border-default);
    background-color: var(--bg-secondary);
  }
  .figures-table__row--indent td:first-child {
    padding-left: calc(var(--spacing) * 8);
    color: var(--text-tertiary);
  }
  .display-table-scroll {
    width: 100%;
    overflow-x: auto;
  }
}
@layer utilities {
  .tree-grid {
    width: 100%;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
    --tg-step: 1.25rem;
  }
  .tree-grid--card {
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .tree-grid__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-divider);
  }
  .tree-grid__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-top: 1px solid var(--border-divider);
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .tree-grid__row:first-of-type, .tree-grid__head + .tree-grid__row {
    border-top: 0;
  }
  .tree-grid__row:hover {
    background-color: var(--bg-secondary);
  }
  .tree-grid__row.is-current {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-brand-solid) 8%, transparent);
    }
  }
  .tree-grid__row[hidden] {
    display: none;
  }
  .tree-grid__cell {
    flex: none;
    padding-inline: calc(var(--spacing) * 2);
    text-align: right;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
    min-width: 5rem;
  }
  .tree-grid__cell--tree {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-left: 0;
    text-align: left;
    color: var(--text-primary);
  }
  .tree-grid__indent {
    flex: none;
    width: calc(var(--depth, 0) * var(--tg-step));
  }
  .tree-grid__toggle {
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-quaternary);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: transform var(--duration-fast, 120ms) var(--ease-out, ease), background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .tree-grid__toggle:hover {
    background-color: var(--bg-primary-hover);
  }
  .tree-grid__toggle:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .tree-grid__row[aria-expanded="true"] > .tree-grid__cell--tree .tree-grid__toggle {
    transform: rotate(90deg);
  }
  .tree-grid__toggle--leaf {
    visibility: hidden;
    cursor: default;
  }
  .tree-grid__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tree-grid__icon {
    flex: none;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .tree-grid--compact .tree-grid__row {
    padding-block: var(--spacing);
  }
  @media (prefers-reduced-motion: reduce) {
    .tree-grid__toggle {
      transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease);
    }
  }
  @media (max-width: 40rem) {
    .tree-grid__cell:not(.tree-grid__cell--keep):not(.tree-grid__cell--tree) {
      display: none;
    }
  }
}
@layer utilities {
  .org-chart, .org-chart ul {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 1.25rem;
  }
  .org-chart {
    padding-top: 0;
  }
  .org-chart li {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.5rem 0;
  }
  .org-chart li::before {
    content: "";
    position: absolute;
    top: 0;
    height: 1.25rem;
    border-left: 1px solid var(--border-divider);
  }
  .org-chart li::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 1.25rem;
    border-top: 1px solid var(--border-divider);
  }
  .org-chart li::after {
    right: 0;
  }
  .org-chart li:first-child::after {
    border-left: 0;
  }
  .org-chart li:only-child::after {
    display: none;
  }
  .org-chart li:only-child {
    padding-top: 1.25rem;
  }
  .org-chart li:first-child::after {
    left: 50%;
    border-left: 1px solid var(--border-divider);
    border-top-left-radius: 6px;
  }
  .org-chart li:last-child::after {
    right: 50%;
    border-right: 1px solid var(--border-divider);
    border-top-right-radius: 6px;
  }
  .org-chart li:first-child:last-child::after {
    display: none;
  }
  .org-chart > li:only-child::before {
    display: none;
  }
  .org-chart li > ul {
    position: relative;
  }
  .org-chart li > ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 1.25rem;
    border-left: 1px solid var(--border-divider);
  }
  .org-chart--compact li > ul::before {
    height: 1rem;
  }
  .org-chart__node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
    min-width: 9rem;
    position: relative;
    z-index: 1;
  }
  .org-chart__node--brand {
    box-shadow: inset 0 0 0 1px var(--border-brand), var(--shadow-sm);
  }
  .org-chart__avatar {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .org-chart__name {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .org-chart__role {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .org-chart__meta {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .org-chart--compact .org-chart__node {
    min-width: 0;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .org-chart--compact li, .org-chart--compact ul {
    padding-top: 1rem;
  }
  .org-chart--compact li::before, .org-chart--compact li::after {
    height: 1rem;
  }
  .org-chart__node--muted {
    box-shadow: inset 0 0 0 1px var(--border-divider);
    background-color: var(--bg-secondary);
  }
  .org-chart__node--muted .org-chart__name {
    color: var(--text-tertiary);
    font-weight: 500;
  }
  .org-chart__node--muted.org-chart__node {
    border-style: dashed;
  }
  .org-chart__node--success {
    box-shadow: inset 3px 0 0 0 var(--bg-success-solid), inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .org-chart__node--warning {
    box-shadow: inset 3px 0 0 0 var(--bg-warning-solid), inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .org-chart__node--danger {
    box-shadow: inset 3px 0 0 0 var(--bg-danger-solid), inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .org-chart--lines-none li::before, .org-chart--lines-none li::after, .org-chart--lines-none li > ul::before {
    display: none;
  }
  .org-chart--lines-none, .org-chart--lines-none ul {
    padding-top: 0;
    gap: 1rem;
  }
  .org-chart--lines-none ul {
    padding-top: 1.5rem;
  }
}
@layer utilities {
  .file-browser {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .file-browser__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    border-bottom: 1px solid var(--border-divider);
  }
  .file-browser__crumbs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .file-browser__crumb {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-tertiary);
  }
  .file-browser__crumb--current {
    color: var(--text-primary);
    font-weight: 500;
  }
  .file-browser__crumb-sep {
    color: var(--text-quaternary);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .file-browser__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
  }
  .file-browser__rail {
    flex: none;
    overflow-y: auto;
    padding: calc(var(--spacing) * 2);
    width: 15rem;
    border-right: 1px solid var(--border-divider);
  }
  .file-browser__main {
    min-width: 0;
    flex: 1;
    overflow-y: auto;
  }
  .file-browser:not(.file-browser--split) .file-browser__rail {
    display: none;
  }
  .file-browser__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-divider);
  }
  .file-browser__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    text-decoration-line: none;
    color: inherit;
    border-top: 1px solid var(--border-divider);
    background: transparent;
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .file-browser__list .file-browser__item:first-child, .file-browser__head + .file-browser__item {
    border-top: 0;
  }
  .file-browser__item:hover {
    background-color: var(--bg-secondary);
  }
  .file-browser__item:focus-visible {
    position: relative;
    z-index: 10;
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .file-browser__item.is-selected {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-brand-solid) 8%, transparent);
    }
  }
  .file-browser__icon {
    width: calc(var(--spacing) * 6);
    flex: none;
    text-align: center;
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    color: var(--text-tertiary);
  }
  .file-browser__item--folder .file-browser__icon {
    color: var(--text-link);
  }
  .file-browser__name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
  }
  .file-browser__col {
    flex: none;
    text-align: right;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
    min-width: 6rem;
  }
  .file-browser__grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  }
  .file-browser__tile {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 3);
    text-align: center;
    text-decoration-line: none;
    color: inherit;
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .file-browser__tile:hover {
    background-color: var(--bg-secondary);
  }
  .file-browser__tile .file-browser__icon {
    width: auto;
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
  }
  .file-browser__tile .file-browser__name {
    flex: none;
  }
  .file-browser__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--text-tertiary);
  }
  .file-browser__empty i {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    color: var(--text-quaternary);
  }
  @media (max-width: 40rem) {
    .file-browser__col--modified {
      display: none;
    }
    .file-browser__rail {
      display: none;
    }
  }
}
@layer utilities {
  .tag-set {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .tag-set__label {
    flex: none;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    min-width: 6rem;
  }
  .tag-set__tags {
    min-width: 0;
    flex: 1;
  }
  .tag-set--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 1.5);
  }
  .tag-set--stacked .tag-set__label {
    min-width: 0;
  }
  .tag-overflow {
    cursor: pointer;
    color: var(--text-tertiary);
  }
  .tag-overflow:hover {
    color: var(--text-secondary);
  }
  .tag-overflow:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    border-radius: var(--radius-tag, 6px);
  }
  .attribute-tags {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .attribute-tags .tag-set {
    border-top: 1px solid var(--border-divider);
  }
  .attribute-tags .tag-set:first-child {
    border-top: 0;
  }
  .tag-cloud {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    row-gap: calc(var(--spacing) * 2);
  }
  .tag-cloud__item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing);
    --tw-leading: 1;
    line-height: 1;
    text-decoration-line: none;
    color: var(--text-secondary);
    transition: color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .tag-cloud__item:hover {
    color: var(--text-link);
  }
  .tag-cloud__item:focus-visible {
    border-radius: 0.25rem;
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .tag-cloud__count {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-quaternary);
  }
  .tag-cloud__item--w1 {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-tertiary);
  }
  .tag-cloud__item--w2 {
    font-size: 0.9375rem;
    font-weight: 400;
  }
  .tag-cloud__item--w3 {
    font-size: 1.125rem;
    font-weight: 500;
  }
  .tag-cloud__item--w4 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .tag-cloud__item--w5 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .tag-cloud--brand .tag-cloud__item--w4, .tag-cloud--brand .tag-cloud__item--w5 {
    color: var(--text-link);
  }
}
@layer utilities {
  .timeline-h {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: flex-start;
    overflow-x: auto;
    counter-reset: tlh;
  }
  .timeline-h__step {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding-inline: calc(var(--spacing) * 2);
    text-align: center;
    min-width: 7rem;
  }
  .timeline-h__step::before {
    content: "";
    position: absolute;
    top: 0.6875rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: var(--border-divider);
    z-index: 0;
  }
  .timeline-h__step:first-child::before {
    display: none;
  }
  .timeline-h__step.is-done::before, .timeline-h__step.is-current::before {
    background-color: var(--bg-brand-solid);
  }
  .timeline-h__dot {
    position: relative;
    z-index: 10;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 1.375rem;
    height: 1.375rem;
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 2px var(--border-divider);
    color: var(--text-quaternary);
    font-size: 0.625rem;
  }
  .timeline-h__step.is-done .timeline-h__dot {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .timeline-h__step.is-current .timeline-h__dot {
    box-shadow: inset 0 0 0 2px var(--border-brand);
    color: var(--text-link);
  }
  .timeline-h__label {
    margin-top: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .timeline-h__date {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .status-timeline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
  }
  .status-timeline__step {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    align-items: center;
    &:last-child {
      flex: none;
    }
  }
  .status-timeline__node {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .status-timeline__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    font-size: 0.75rem;
  }
  .status-timeline__text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .status-timeline__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .status-timeline__time {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .status-timeline__bar {
    margin-inline: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 0.5);
    flex: 1;
    background-color: var(--border-divider);
  }
  .status-timeline__step.is-done .status-timeline__icon {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .status-timeline__step.is-done .status-timeline__bar {
    background-color: var(--bg-brand-solid);
  }
  .status-timeline__step.is-current .status-timeline__icon {
    background-color: var(--bg-card);
    color: var(--text-link);
    box-shadow: inset 0 0 0 2px var(--border-brand);
  }
  .release-timeline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .release-timeline__group {
    position: relative;
    padding-left: calc(var(--spacing) * 6);
  }
  .release-timeline__group::before {
    content: "";
    position: absolute;
    left: 0.3125rem;
    top: 0.25rem;
    bottom: 0;
    width: 2px;
    background-color: var(--border-divider);
  }
  .release-timeline__group:last-child::before {
    bottom: auto;
    height: 1.5rem;
  }
  .release-timeline__marker {
    position: absolute;
    border-radius: var(--radius-full);
    left: 0;
    top: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--bg-brand-solid);
    box-shadow: 0 0 0 3px var(--bg-card);
  }
  .release-timeline__date {
    margin-bottom: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
  }
  .release-timeline__entry {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .release-timeline__version {
    margin-bottom: var(--spacing);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .release-timeline__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .release-timeline__body {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .release-timeline__body ul {
    margin-top: var(--spacing);
    list-style-type: disc;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-left: calc(var(--spacing) * 5);
  }
  .release-timeline--compact .release-timeline__entry {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .release-timeline--compact .release-timeline__group {
    padding-left: calc(var(--spacing) * 5);
  }
  .release-timeline__group.is-current .release-timeline__marker {
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--border-brand);
  }
  .release-timeline__group.is-current .release-timeline__title {
    color: var(--text-link);
  }
  .release-timeline__marker--major {
    background-color: var(--bg-brand-solid);
  }
  .release-timeline__marker--minor {
    background-color: var(--bg-success-solid);
  }
  .release-timeline__marker--patch {
    background-color: var(--text-quaternary);
  }
  @media (prefers-reduced-motion: reduce) {
    .timeline-h, .status-timeline {
      scroll-behavior: auto;
    }
  }
}
@layer utilities {
  .error-inline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
  }
  .error-inline__icon {
    flex: none;
  }
  .error-inline__msg {
    min-width: 0;
    flex: 1;
    color: var(--text-primary);
  }
  .error-inline__action {
    flex: none;
  }
  .error-block {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .error-block__icon {
    margin-bottom: var(--spacing);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 2.75rem;
    height: 2.75rem;
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
    font-size: 1.125rem;
  }
  .error-block__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .error-block__desc {
    max-width: var(--container-sm);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .error-block__actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .skeleton-table {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .skeleton-table__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-divider);
  }
  .skeleton-table__row:first-child {
    border-top: 0;
  }
  .skeleton-table__cell {
    flex: 1;
  }
  .skeleton-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .skeleton-list__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .skeleton-list__lines {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .skeleton-stat-row {
    display: grid;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
  .skeleton-stat {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .skeleton-card-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .skeleton-card {
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .skeleton-card__banner {
    display: block;
    width: 100%;
    height: 6rem;
  }
  .skeleton-card__lines {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 4);
  }
  .error-inline--warning {
    color: var(--text-warning);
    background-color: var(--bg-warning-subtle);
  }
  .error-inline--warning .error-inline__msg {
    color: var(--text-primary);
  }
}
@layer utilities {
  .record-card-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .record-card-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
  .record-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    text-decoration-line: none;
    color: inherit;
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-default, ease), transform var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  a.record-card:hover, button.record-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-md);
    transform: translateY(-1px);
  }
  .record-card:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-md);
  }
  .record-card.is-selected {
    box-shadow: inset 0 0 0 2px var(--border-brand), var(--shadow-xs);
  }
  .record-card__media {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    height: 6rem;
    background-color: var(--bg-secondary);
    color: var(--text-quaternary);
    font-size: 1.5rem;
  }
  .record-card__media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .record-card__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing);
    padding: calc(var(--spacing) * 4);
  }
  .record-card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .record-card__meta {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .record-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-divider);
  }
  .record-card-grid--compact .record-card__media {
    height: 4.5rem;
  }
  .record-card-grid--compact .record-card__body {
    padding: calc(var(--spacing) * 3);
  }
  @media (prefers-reduced-motion: reduce) {
    .record-card {
      transition: box-shadow var(--duration-fast, 120ms) var(--ease-default, ease);
    }
    a.record-card:hover, button.record-card:hover {
      transform: none;
    }
  }
  .record-card-grid--bordered .record-card {
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .record-card-grid--bordered a.record-card:hover, .record-card-grid--bordered button.record-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .record-card--horizontal {
    flex-direction: row;
  }
  .record-card--horizontal .record-card__media {
    width: 6rem;
    height: auto;
    flex: none;
  }
  .record-card--horizontal .record-card__body {
    padding: 0.875rem 1rem;
  }
  .record-card--horizontal .record-card__footer {
    border-top: 0;
    border-left: 1px solid var(--border-divider);
    padding: 0.875rem 1rem;
    align-items: center;
  }
  .record-card__media {
    position: relative;
  }
  .record-card__badge {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 1;
  }
  .record-card.is-unread {
    box-shadow: inset 3px 0 0 0 var(--border-brand), inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .record-card.is-unread .record-card__title {
    font-weight: 700;
  }
}
@layer utilities {
  .status-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .status-list--card {
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
  }
  .status-list__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-divider);
  }
  .status-list__row:first-child {
    border-top: 0;
  }
  .status-list--compact .status-list__row {
    padding-block: calc(var(--spacing) * 2);
  }
  .status-list__dot {
    display: inline-block;
    flex: none;
    border-radius: var(--radius-full);
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--text-quaternary);
  }
  .status-list__dot--ok {
    background-color: var(--bg-success-solid);
  }
  .status-list__dot--warn {
    background-color: var(--bg-warning-solid);
  }
  .status-list__dot--down {
    background-color: var(--bg-danger-solid);
  }
  .status-list__dot--idle {
    background-color: var(--text-quaternary);
  }
  .status-list__dot--pulse {
    position: relative;
  }
  .status-list__dot--pulse::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    color: var(--bg-success-solid);
    opacity: 0;
    animation: statusPulse 2s ease-out infinite;
  }
  @keyframes statusPulse {
    0% {
      opacity: 0.6;
      transform: scale(0.8);
    }
    100% {
      opacity: 0;
      transform: scale(1.6);
    }
  }
  .status-list__label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
  }
  .status-list__state {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .status-list__value {
    flex: none;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
  }
  @media (prefers-reduced-motion: reduce) {
    .status-list__dot--pulse::after {
      animation: none;
    }
  }
}
@layer utilities {
  .lean-spectrum {
    --lean-dem: var(--color-blue-500);
    --lean-rep: var(--color-red-500);
    --lean-neutral: var(--color-slate-400);
    --lean-pos: 50%;
    --lean-spread: 8%;
    position: relative;
    width: 100%;
    padding: 16px 0 4px;
    color: var(--lean-neutral);
  }
  .lean-spectrum--dem {
    color: var(--lean-dem);
  }
  .lean-spectrum--rep {
    color: var(--lean-rep);
  }
  .lean-spectrum__track {
    position: relative;
    height: 10px;
    border-radius: 9999px;
    background: linear-gradient(to right, var(--lean-dem) 0%, var(--lean-dem) 30%, var(--lean-neutral) 50%, var(--lean-rep) 70%, var(--lean-rep) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to right, color-mix(in srgb, var(--lean-dem) 45%, transparent) 0%, color-mix(in srgb, var(--lean-dem) 14%, transparent) 30%, color-mix(in srgb, var(--lean-neutral) 22%, transparent) 50%, color-mix(in srgb, var(--lean-rep) 14%, transparent) 70%, color-mix(in srgb, var(--lean-rep) 45%, transparent) 100%);
    }
  }
  .lean-spectrum__center {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: 1px;
    background: var(--lean-neutral);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--lean-neutral) 55%, transparent);
    }
  }
  .lean-spectrum__uncertainty {
    position: absolute;
    top: 50%;
    left: var(--lean-pos);
    width: calc(var(--lean-spread) * 2);
    min-width: 10px;
    height: 20px;
    transform: translate(-50%, -50%);
    background: currentColor;
    opacity: 0.16;
    border-radius: 9999px;
    filter: blur(2px);
  }
  .lean-spectrum__marker {
    position: absolute;
    top: 50%;
    left: var(--lean-pos);
    width: 14px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background: currentColor;
    box-shadow: 0 1px 4px color-mix(in srgb, #000 28%, transparent), 0 0 0 3px var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 4px color-mix(in srgb, var(--color-black) 28%, transparent), 0 0 0 3px var(--bg-card);
    }
  }
  .lean-spectrum--low .lean-spectrum__marker, .lean-spectrum--unknown .lean-spectrum__marker {
    background: transparent;
    border: 2px dashed currentColor;
    box-shadow: none;
  }
  .lean-spectrum--compact {
    width: 44px;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
  }
  .lean-spectrum--compact .lean-spectrum__track {
    height: 4px;
  }
  .lean-spectrum--compact .lean-spectrum__center {
    top: -1px;
    bottom: -1px;
  }
  .lean-ink--rep {
    color: var(--text-lean-rep);
  }
  .lean-ink--dem {
    color: var(--text-lean-dem);
  }
  .lean-ink--neutral {
    color: var(--text-lean-neutral);
  }
  .lean-spectrum--compact .lean-spectrum__marker {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 1.5px var(--bg-panel);
  }
  .lean-spectrum__label {
    position: absolute;
    top: 0;
    left: var(--lean-pos);
    transform: translateX(-50%);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: currentColor;
    white-space: nowrap;
  }
  .lean-spectrum__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.625rem;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.7;
  }
  .lean-chip {
    --lean-dem: var(--color-blue-500);
    --lean-rep: var(--color-red-500);
    --lean-neutral: var(--color-slate-400);
    --c: var(--lean-neutral);
    --c-ink: var(--text-lean-neutral);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  .lean-chip--dem {
    --c: var(--lean-dem);
    --c-ink: var(--text-lean-dem);
    --c-solid: var(--utility-blue-700);
  }
  .lean-chip--rep {
    --c: var(--lean-rep);
    --c-ink: var(--text-lean-rep);
    --c-solid: var(--utility-red-700);
  }
  .lean-chip--neutral {
    --c: var(--lean-neutral);
    --c-ink: var(--text-lean-neutral);
    --c-solid: var(--utility-neutral-600);
  }
  .lean-chip--solid {
    background: var(--c-solid, var(--c));
    color: var(--color-white);
  }
  .lean-chip--soft {
    background: var(--c);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--c) 16%, transparent);
    }
    color: var(--c-ink);
  }
  .lean-chip--outline {
    border: 1px solid var(--c);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
    }
    color: var(--c-ink);
  }
  .lean-chip.is-stale {
    opacity: 0.5;
  }
  .lean-detail__empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 12px;
    border-radius: var(--radius-md, 8px);
    background: var(--text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--text-secondary) 6%, transparent);
    }
    color: var(--text-secondary);
    font-size: 0.8125rem;
  }
  .lean-sparkline {
    width: 100%;
    height: 40px;
    overflow: visible;
  }
  .lean-sparkline__line {
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .lean-sparkline__mid {
    stroke: color-mix(in srgb, #8895af 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in srgb, var(--color-slate-400) 45%, transparent);
    }
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
  }
}
@layer utilities {
  .chart-card {
    --chart-card-bg: var(--bg-panel);
    --chart-card-border: var(--border-secondary);
    --chart-card-radius: var(--radius-xl);
    --chart-card-pad: 1.25rem;
    --chart-card-gap: 1rem;
    --chart-card-shadow: var(--shadow-chart-card);
    --chart-card-shadow-hover: var(--shadow-chart-card-hover);
    display: flex;
    flex-direction: column;
    gap: var(--chart-card-gap);
    min-width: 0;
    padding: var(--chart-card-pad);
    background-color: var(--chart-card-bg);
    border: 1px solid var(--chart-card-border);
    border-radius: var(--chart-card-radius);
    box-shadow: var(--chart-card-shadow);
    color: var(--text-primary);
  }
  .chart-card--soft {
    --chart-card-border: transparent;
    --chart-card-bg: var(--bg-secondary-subtle);
    --chart-card-shadow: var(--shadow-none);
  }
  .chart-card--raised {
    --chart-card-shadow: var(--shadow-md);
  }
  .chart-card--flush {
    --chart-card-border: transparent;
    --chart-card-shadow: var(--shadow-none);
    --chart-card-pad: 0;
    background-color: transparent;
  }
  .chart-card--interactive {
    cursor: pointer;
    transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .chart-card--interactive:hover {
    box-shadow: var(--chart-card-shadow-hover);
    border-color: var(--border-secondary-hover);
  }
  .chart-card--interactive:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .chart-card--sm {
    --chart-card-pad: 1rem;
    --chart-card-gap: 0.75rem;
  }
  .chart-card--lg {
    --chart-card-pad: 1.5rem;
    --chart-card-gap: 1.25rem;
  }
  .chart-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
  }
  .chart-card__heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .chart-card__eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-quaternary);
  }
  .chart-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .chart-card__subtitle {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-tertiary);
  }
  .chart-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .chart-card__metric {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
  }
  .chart-card__metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .chart-card__metric-label {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .chart-card__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .chart-range {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    gap: 0.125rem;
  }
  .chart-range__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .chart-range__btn:hover {
    color: var(--text-secondary);
  }
  .chart-range__btn[aria-pressed="true"], .chart-range__btn.is-active {
    background-color: var(--bg-panel);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  .chart-range__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .chart-card__body {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
  }
  .chart-card__body > .chart, .chart-card__body > .viz {
    width: 100%;
  }
  .chart-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-default);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .chart-card__footer--plain {
    border-top: 0;
    padding-top: 0;
  }
  .chart-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-sm);
    line-height: 1;
  }
  .chart-card__delta--up {
    color: var(--text-success-solid);
    background-color: var(--bg-success-subtle);
  }
  .chart-card__delta--down {
    color: var(--text-danger-solid);
    background-color: var(--bg-danger-subtle);
  }
  .chart-card__delta--flat {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
  }
  .chart-card__state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    min-height: 8rem;
    padding: 1.5rem;
    color: var(--text-tertiary);
  }
  .chart-card__state-icon {
    font-size: 1.5rem;
    color: var(--text-quaternary);
  }
  .chart-card__state-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .chart-card__state-msg {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    max-width: 24rem;
  }
  .chart-card.is-loading .chart-card__body, .chart-card.is-empty .chart-card__body, .chart-card.is-error .chart-card__body {
    display: none;
  }
  .chart-card.is-loading .chart-card__footer, .chart-card.is-empty .chart-card__footer, .chart-card.is-error .chart-card__footer {
    display: none;
  }
  .chart-card.is-loading .chart-card__state--loading, .chart-card.is-empty .chart-card__state--empty, .chart-card.is-error .chart-card__state--error {
    display: flex;
  }
  .chart-card__skeleton {
    width: 100%;
    min-height: 8rem;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 37%, var(--bg-secondary) 63%);
    background-size: 400% 100%;
    animation: chart-card-shimmer 1.4s var(--ease-in-out) infinite;
  }
  @keyframes chart-card-shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: -100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .chart-card__skeleton {
      animation: none;
    }
    .chart-card--interactive {
      transition: none;
    }
  }
}
@layer utilities {
  .viz {
    --viz-series-1: var(--color-brand-600);
    --viz-series-2: var(--apex-series-1);
    --viz-series-3: var(--apex-series-2);
    --viz-series-4: var(--apex-series-6);
    --viz-series-5: var(--apex-series-7);
    --viz-series-6: var(--apex-series-4);
    --viz-series-7: var(--apex-series-8);
    --viz-series-8: var(--apex-series-11);
    --viz-series-9: var(--apex-series-3);
    --viz-series-10: var(--apex-series-9);
    --viz-series-11: var(--apex-series-12);
    --viz-series-12: var(--apex-series-10);
    --viz-grid: var(--apex-border);
    --viz-axis-text: var(--text-tertiary);
    --viz-axis-line: var(--apex-border-accent);
    --viz-surface: var(--bg-panel);
    --viz-track: var(--apex-radial-track);
    --viz-tooltip-bg: var(--utility-neutral-900);
    --viz-tooltip-fg: var(--utility-neutral-50);
    --viz-tooltip-muted: var(--utility-neutral-300);
    --viz-heat-0: var(--bg-secondary-subtle);
    --viz-heat-1: var(--apex-series-heatmap-1);
    --viz-heat-2: var(--apex-series-heatmap-2);
    --viz-heat-3: var(--apex-series-heatmap-3);
    --viz-heat-4: var(--apex-series-heatmap-4);
    --viz-zone-low: var(--bg-danger-solid);
    --viz-zone-mid: var(--bg-warning-solid);
    --viz-zone-high: var(--bg-success-solid);
    --viz-height: 18rem;
    --viz-mark-width: 2px;
    --viz-area-opacity: 0.14;
    position: relative;
    display: block;
    color: var(--text-primary);
    font-size: 0.75rem;
  }
  .viz--xs {
    --viz-height: 8rem;
  }
  .viz--sm {
    --viz-height: 12rem;
  }
  .viz--md {
    --viz-height: 18rem;
  }
  .viz--lg {
    --viz-height: 24rem;
  }
  .viz--xl {
    --viz-height: 30rem;
  }
  .viz--gauge, .viz--polar, .viz--pictogram, .viz--treemap, .viz--heatmap, .viz--calendar {
    --viz-height: 20rem;
  }
  .viz--bullet {
    --viz-height: auto;
  }
  .viz__canvas {
    position: relative;
    width: 100%;
    height: var(--viz-height);
    min-height: 0;
    outline: none;
  }
  .viz--bullet .viz__canvas {
    height: auto;
    min-height: 5rem;
  }
  .viz__canvas:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-md);
  }
  .viz__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .viz__grid-line {
    stroke: var(--viz-grid);
    stroke-width: 1;
    stroke-dasharray: 3 4;
  }
  .viz__grid-line--zero {
    stroke: var(--viz-axis-line);
    stroke-dasharray: none;
  }
  .viz__axis-line {
    stroke: var(--viz-axis-line);
    stroke-width: 1;
  }
  .viz__axis-label {
    fill: var(--viz-axis-text);
    font-size: 0.6875rem;
    font-family: inherit;
  }
  .viz__axis-label--x {
    text-anchor: middle;
  }
  .viz__axis-label--y {
    text-anchor: end;
    dominant-baseline: middle;
  }
  .viz__axis-title {
    fill: var(--text-quaternary);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .viz__point {
    fill: currentColor;
    fill-opacity: 0.72;
    stroke: var(--viz-surface);
    stroke-width: 1.5;
    transition: fill-opacity var(--duration-fast) var(--ease-out), r var(--duration-fast) var(--ease-out);
  }
  .viz__series {
    color: var(--viz-series-1);
  }
  .viz__point[data-active] {
    fill-opacity: 1;
  }
  [data-viz-active] .viz__point:not([data-active]) {
    fill-opacity: 0.28;
  }
  .viz__bar {
    fill: currentColor;
    transition: fill-opacity var(--duration-fast) var(--ease-out);
  }
  .viz__bar[data-active] {
    fill-opacity: 1;
  }
  [data-viz-active] .viz__bar:not([data-active]) {
    fill-opacity: 0.45;
  }
  .viz__bar--pos {
    color: var(--viz-series-1);
  }
  .viz__bar--neg {
    color: var(--apex-series-8);
  }
  .viz__bar--total {
    color: var(--text-quaternary);
  }
  .viz__line {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--viz-mark-width);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .viz__connector {
    stroke: var(--viz-grid);
    stroke-width: 1;
    stroke-dasharray: 2 3;
  }
  .viz__cell {
    stroke: var(--apex-heatmap-stroke, var(--bg-panel));
    stroke-width: 2;
    rx: 3;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .viz__cell[data-active] {
    stroke: var(--viz-axis-line);
    stroke-width: 2.5;
  }
  .viz__cell-label {
    fill: var(--text-secondary);
    font-size: 0.625rem;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
  }
  .viz__funnel-seg {
    fill: currentColor;
    transition: fill-opacity var(--duration-fast) var(--ease-out);
  }
  .viz__funnel-seg[data-active] {
    fill-opacity: 0.9;
  }
  .viz__funnel-label, .viz__seg-label {
    fill: var(--text-on-brand);
    font-size: 0.6875rem;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
  }
  .viz__seg-outside {
    fill: var(--text-secondary);
  }
  .viz__gauge-track {
    fill: none;
    stroke: var(--viz-track);
    stroke-linecap: round;
  }
  .viz__gauge-fill {
    fill: none;
    stroke: var(--viz-series-1);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--duration-slower) var(--ease-out);
  }
  .viz__gauge-zone {
    fill: none;
    stroke-linecap: butt;
    opacity: 0.9;
  }
  .viz__gauge-zone--low {
    stroke: var(--viz-zone-low);
  }
  .viz__gauge-zone--mid {
    stroke: var(--viz-zone-mid);
  }
  .viz__gauge-zone--high {
    stroke: var(--viz-zone-high);
  }
  .viz__gauge-needle {
    stroke: var(--text-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
  }
  .viz__gauge-hub {
    fill: var(--text-primary);
  }
  .viz__gauge-value {
    fill: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    text-anchor: middle;
  }
  .viz__gauge-label {
    fill: var(--text-tertiary);
    font-size: 0.75rem;
    text-anchor: middle;
  }
  .viz__gauge-tick {
    stroke: var(--viz-axis-line);
    stroke-width: 1;
  }
  .viz__gauge-ticklabel {
    fill: var(--viz-axis-text);
    font-size: 0.5625rem;
    text-anchor: middle;
  }
  .viz__bullet-band {
    transition: none;
  }
  .viz__bullet-band--poor {
    fill: var(--bg-danger-subtle);
  }
  .viz__bullet-band--fair {
    fill: var(--bg-warning-subtle);
  }
  .viz__bullet-band--good {
    fill: var(--bg-success-subtle);
  }
  .viz__bullet-measure {
    fill: var(--viz-series-1);
  }
  .viz__bullet-target {
    stroke: var(--text-primary);
    stroke-width: 2.5;
  }
  .viz__bullet-title {
    fill: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    dominant-baseline: middle;
  }
  .viz__bullet-sub {
    fill: var(--text-tertiary);
    font-size: 0.625rem;
    dominant-baseline: middle;
  }
  .viz__tile {
    stroke: var(--bg-panel);
    stroke-width: 2;
    transition: fill-opacity var(--duration-fast) var(--ease-out);
  }
  .viz__tile[data-active] {
    fill-opacity: 0.85;
  }
  .viz__tile-label {
    fill: var(--text-on-brand);
    font-size: 0.6875rem;
    font-weight: 600;
    pointer-events: none;
  }
  .viz__tile-value {
    fill: var(--text-on-brand);
    font-size: 0.625rem;
    opacity: 0.85;
    pointer-events: none;
  }
  .viz__wedge {
    fill: currentColor;
    fill-opacity: 0.78;
    stroke: var(--viz-surface);
    stroke-width: 1;
    transition: fill-opacity var(--duration-fast) var(--ease-out);
  }
  .viz__wedge[data-active] {
    fill-opacity: 1;
  }
  .viz__icon {
    fill: currentColor;
    transition: fill-opacity var(--duration-fast) var(--ease-out);
  }
  .viz__icon--empty {
    fill: var(--viz-track);
  }
  .viz__flow {
    fill: currentColor;
    fill-opacity: 0.4;
    transition: fill-opacity var(--duration-fast) var(--ease-out);
  }
  .viz__flow[data-active] {
    fill-opacity: 0.7;
  }
  .viz__node {
    fill: currentColor;
  }
  .viz__node-label {
    fill: var(--text-secondary);
    font-size: 0.625rem;
  }
  .viz__box {
    fill: currentColor;
    fill-opacity: 0.25;
    stroke: currentColor;
    stroke-width: 1.5;
  }
  .viz__whisker {
    stroke: currentColor;
    stroke-width: 1.5;
  }
  .viz__median {
    stroke: var(--text-primary);
    stroke-width: 2;
  }
  .viz__outlier {
    fill: currentColor;
    fill-opacity: 0.6;
  }
  .viz__crosshair {
    stroke: var(--viz-axis-line);
    stroke-width: 1;
    stroke-dasharray: 3 3;
  }
  .viz__dot {
    fill: var(--viz-surface);
    stroke: currentColor;
    stroke-width: 2;
  }
  .viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
  }
  .viz-legend--vertical {
    flex-direction: column;
    align-items: flex-start;
  }
  .viz-legend--center {
    justify-content: center;
  }
  .viz-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .viz-legend--static .viz-legend__item {
    cursor: default;
  }
  .viz-legend__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .viz-legend__item[aria-pressed="false"] {
    opacity: 0.45;
  }
  .viz-legend__item[aria-pressed="false"] .viz-legend__label {
    text-decoration: line-through;
  }
  .viz-legend__marker {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
    color: var(--viz-series-1);
    flex-shrink: 0;
  }
  .viz-legend__marker--sq {
    border-radius: 2px;
  }
  .viz-legend__label {
    color: var(--text-tertiary);
  }
  .viz-legend__scale {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .viz-legend__ramp {
    display: inline-flex;
    height: 0.5rem;
    width: 5rem;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--border-default);
  }
  .viz-legend__ramp > span {
    flex: 1;
  }
  .viz-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 8rem;
    max-width: 16rem;
    padding: 0.5rem 0.625rem;
    background-color: var(--viz-tooltip-bg);
    color: var(--viz-tooltip-fg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: 0.75rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  }
  .viz-tooltip.is-visible {
    opacity: 1;
    transform: none;
  }
  .viz-tooltip__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  .viz-tooltip__row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }
  .viz-tooltip__marker {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
    color: var(--viz-series-1);
    flex-shrink: 0;
  }
  .viz-tooltip__name {
    color: var(--viz-tooltip-muted);
  }
  .viz-tooltip__value {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .viz__status {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    text-align: center;
    padding: 1rem;
    color: var(--text-tertiary);
  }
  .viz.is-loading .viz__canvas, .viz.is-empty .viz__canvas, .viz.is-error .viz__canvas {
    visibility: hidden;
  }
  .viz.is-loading .viz-legend, .viz.is-empty .viz-legend, .viz.is-error .viz-legend {
    display: none;
  }
  .viz.is-loading .viz__status--loading, .viz.is-empty .viz__status--empty, .viz.is-error .viz__status--error {
    display: flex;
  }
  .viz__status-icon {
    font-size: 1.5rem;
    color: var(--text-quaternary);
  }
  .viz__status-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .viz__status-msg {
    font-size: 0.8125rem;
  }
  .viz__skeleton {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 37%, var(--bg-secondary) 63%);
    background-size: 400% 100%;
    animation: viz-shimmer 1.4s var(--ease-in-out) infinite;
  }
  @keyframes viz-shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: -100% 0;
    }
  }
  .viz__a11y {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .viz[data-animate] .viz__point {
    animation: viz-pop var(--duration-slow) var(--ease-out) both;
  }
  .viz[data-animate] .viz__bar, .viz[data-animate] .viz__funnel-seg, .viz[data-animate] .viz__tile, .viz[data-animate] .viz__cell {
    animation: viz-fade var(--duration-slow) var(--ease-out) both;
  }
  @keyframes viz-pop {
    from {
      opacity: 0;
      transform: scale(0.6);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes viz-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .viz__skeleton {
      animation: none;
    }
    .viz[data-animate] .viz__point, .viz[data-animate] .viz__bar, .viz[data-animate] .viz__funnel-seg, .viz[data-animate] .viz__tile, .viz[data-animate] .viz__cell {
      animation: none;
    }
    .viz__gauge-fill {
      transition: none;
    }
  }
}
@layer utilities {
  .spark {
    --spark-color: var(--color-brand-600);
    --spark-muted: var(--viz-track, var(--apex-radial-track));
    display: inline-block;
    width: 5.5rem;
    height: 1.5rem;
    vertical-align: middle;
    line-height: 0;
  }
  .spark--block {
    display: block;
    width: 100%;
    height: 2.5rem;
  }
  .spark__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .spark__line {
    fill: none;
    stroke: var(--spark-color);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .spark__area {
    fill: var(--spark-color);
    opacity: 0.14;
  }
  .spark__last {
    fill: var(--spark-color);
    stroke: var(--bg-panel);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  .spark__bar {
    fill: var(--spark-color);
  }
  .spark__wl--win {
    fill: var(--bg-success-solid);
  }
  .spark__wl--loss {
    fill: var(--bg-danger-solid);
  }
  .spark__wl--tie {
    fill: var(--spark-muted);
  }
  .spark.is-empty::after {
    content: "—";
    color: var(--text-quaternary);
    font-size: 0.75rem;
    line-height: 1.5rem;
  }
  .spark--up {
    --spark-color: var(--bg-success-solid);
  }
  .spark--down {
    --spark-color: var(--bg-danger-solid);
  }
  .spark--neutral {
    --spark-color: var(--text-quaternary);
  }
  .data-bar {
    --bar-fill: 0;
    --bar-color: var(--color-brand-600);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 4rem;
  }
  .data-bar__track {
    position: relative;
    flex: 1 1 auto;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .data-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--bar-fill) * 1%);
    background-color: var(--bar-color);
    border-radius: inherit;
    transition: width var(--duration-slow) var(--ease-out);
  }
  .data-bar__value {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 2.5rem;
    text-align: right;
  }
  .data-bar--sm .data-bar__track {
    height: 0.375rem;
  }
  .data-bar--lg .data-bar__track {
    height: 0.75rem;
  }
  .data-bar--success {
    --bar-color: var(--bg-success-solid);
  }
  .data-bar--warning {
    --bar-color: var(--bg-warning-solid);
  }
  .data-bar--danger {
    --bar-color: var(--bg-danger-solid);
  }
  .trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .trend-indicator__icon {
    font-size: 0.75rem;
  }
  .trend-indicator--up {
    color: var(--text-success);
  }
  .trend-indicator--down {
    color: var(--text-danger);
  }
  .trend-indicator--flat {
    color: var(--text-tertiary);
  }
  .trend-indicator--pill {
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-sm);
  }
  .trend-indicator--pill.trend-indicator--up {
    background-color: var(--bg-success-subtle);
    color: var(--text-success-solid);
  }
  .trend-indicator--pill.trend-indicator--down {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger-solid);
  }
  .trend-indicator--pill.trend-indicator--flat {
    background-color: var(--bg-secondary);
  }
  .trend-indicator__meta {
    color: var(--text-tertiary);
    font-weight: 400;
  }
  @media (prefers-reduced-motion: reduce) {
    .data-bar__fill {
      transition: none;
    }
  }
}
@layer utilities {
  .chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .chart-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .chart-typetoggle {
    display: inline-flex;
    padding: 0.1875rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    gap: 0.125rem;
  }
  .chart-typetoggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .chart-typetoggle__btn:hover {
    color: var(--text-secondary);
  }
  .chart-typetoggle__btn[aria-pressed="true"] {
    background-color: var(--bg-panel);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  .chart-typetoggle__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .chart-export {
    position: relative;
  }
  .chart-export__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    min-width: 10rem;
    padding: 0.25rem;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    z-index: 30;
  }
  .chart-export:not(.is-open) .chart-export__menu {
    display: none;
  }
  .chart-export__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
  }
  .chart-export__item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
  }
  .chart-export__item i {
    color: var(--text-tertiary);
    width: 1rem;
    text-align: center;
  }
  .chart-annotations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .chart-annotations__hline, .chart-annotations__vline {
    position: absolute;
    background: transparent;
    border-color: var(--apex-annotation-border, var(--viz-axis-line));
  }
  .chart-annotations__hline {
    left: 0;
    right: 0;
    border-top: 1px dashed var(--apex-annotation-border, var(--viz-axis-line));
  }
  .chart-annotations__vline {
    top: 0;
    bottom: 0;
    border-left: 1px dashed var(--apex-annotation-border, var(--viz-axis-line));
  }
  .chart-annotations__band {
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--apex-annotation-bg, var(--bg-warning-subtle));
    opacity: 0.5;
  }
  .chart-annotations__label {
    position: absolute;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--apex-annotation-text, var(--text-on-brand));
    background-color: var(--apex-annotation-accent, var(--bg-brand-solid));
    border-radius: var(--radius-xs);
    white-space: nowrap;
    transform: translateY(-50%);
  }
  .chart-annotations__label--success {
    background-color: var(--bg-success-solid);
  }
  .chart-annotations__label--danger {
    background-color: var(--bg-danger-solid);
  }
  .chart-annotations__marker {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-brand-solid);
    border: 2px solid var(--bg-panel);
    transform: translate(-50%, -50%);
  }
  .chart-datalabel {
    font-size: 0.625rem;
    font-weight: 600;
    fill: var(--apex-datalabel-text, var(--text-secondary));
    color: var(--apex-datalabel-text, var(--text-secondary));
  }
  .chart-datalabel--onmark {
    fill: var(--text-on-brand);
  }
  .chart-datalabel--muted {
    fill: var(--text-tertiary);
  }
  .chart-skeleton {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 6rem;
    overflow: hidden;
  }
  .chart-skeleton__bars {
    display: flex;
    align-items: flex-end;
    gap: 8%;
    height: 100%;
    padding: 0.5rem;
  }
  .chart-skeleton__bars > i {
    display: block;
    flex: 1;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
  .chart-skeleton__line {
    position: absolute;
    inset: 0;
  }
  .chart-skeleton__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--bg-tertiary) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: chart-chrome-shimmer 1.4s var(--ease-in-out) infinite;
    opacity: 0.6;
  }
  @keyframes chart-chrome-shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: -100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .chart-skeleton__shimmer {
      animation: none;
    }
    .chart-typetoggle__btn {
      transition: none;
    }
  }
}
@layer utilities {
  .metric-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-chart-card);
    overflow: hidden;
  }
  .metric-strip__item {
    padding: 1rem 1.25rem;
    border-left: 1px solid var(--border-default);
    min-width: 0;
  }
  .metric-strip__item:first-child {
    border-left: 0;
  }
  .metric-strip__label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    display: block;
    margin-bottom: 0.25rem;
  }
  .metric-strip__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .metric-strip__meta {
    margin-top: 0.375rem;
  }
  @media (max-width: 720px) {
    .metric-strip {
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-columns: 1fr 1fr;
    }
    .metric-strip__item {
      border-left: 0;
      border-top: 1px solid var(--border-default);
    }
    .metric-strip__item:nth-child(-n+2) {
      border-top: 0;
    }
    .metric-strip__item:nth-child(even) {
      border-left: 1px solid var(--border-default);
    }
  }
  .comparison-bar {
    --cmp-fill: 0;
    --cmp-mark: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .comparison-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .comparison-bar__label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
  }
  .comparison-bar__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .comparison-bar__track {
    position: relative;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: visible;
  }
  .comparison-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--cmp-fill) * 1%);
    background-color: var(--color-brand-600);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
  }
  .comparison-bar__mark {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: calc(var(--cmp-mark) * 1%);
    width: 2px;
    background-color: var(--text-primary);
    border-radius: 1px;
  }
  .comparison-bar__mark::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5625rem;
    color: var(--text-tertiary);
    white-space: nowrap;
  }
  .comparison-bar--over .comparison-bar__fill {
    background-color: var(--bg-success-solid);
  }
  .comparison-bar--under .comparison-bar__fill {
    background-color: var(--bg-warning-solid);
  }
  .linear-gauge {
    --kpi-fill: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .linear-gauge__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .linear-gauge__title {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
  }
  .linear-gauge__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .linear-gauge__track {
    position: relative;
    height: 0.75rem;
    border-radius: var(--radius-full);
    overflow: hidden;
    display: flex;
  }
  .linear-gauge__zone {
    height: 100%;
  }
  .linear-gauge__zone--low {
    background-color: var(--bg-danger-subtle);
  }
  .linear-gauge__zone--mid {
    background-color: var(--bg-warning-subtle);
  }
  .linear-gauge__zone--high {
    background-color: var(--bg-success-subtle);
  }
  .linear-gauge__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--kpi-fill) * 1%);
    background-color: var(--color-brand-600);
    opacity: 0.9;
    transition: width var(--duration-slow) var(--ease-out);
  }
  .linear-gauge__target {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: var(--lg-target, 50%);
    width: 2px;
    background-color: var(--text-primary);
  }
  .linear-gauge__scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.5625rem;
    color: var(--text-tertiary);
  }
  .radial-bar {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
  .radial-bar__svg {
    width: 8rem;
    height: 8rem;
    transform: rotate(-90deg);
    flex-shrink: 0;
  }
  .radial-bar__track {
    fill: none;
    stroke: var(--apex-radial-track);
  }
  .radial-bar__fill {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: calc(var(--kpi-fill)) 100;
    transition: stroke-dasharray var(--duration-slower) var(--ease-out);
  }
  .radial-bar__legend {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .radial-bar__key {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .radial-bar__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
  }
  .radial-bar__val {
    margin-left: auto;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .radial-bar--single .radial-bar__svg {
    width: 6rem;
    height: 6rem;
  }
  .radial-bar__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
  }
  @media (prefers-reduced-motion: reduce) {
    .comparison-bar__fill, .linear-gauge__fill, .radial-bar__fill {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-view {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-card, var(--bg-primary));
    border-radius: var(--radius-lg, var(--radius-md));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), var(--shadow-xs);
  }
  .dm-view.dm-view--flush {
    border-radius: 0;
    box-shadow: none;
  }
  .dm-view.dm-view--elevated {
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), var(--shadow-md);
  }
  .dm-toolbar, .dm-view__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--border-divider, var(--border-secondary));
  }
  .dm-view__toolbar--sub {
    padding-block: calc(var(--spacing) * 2);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
  }
  .dm-toolbar__group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .dm-toolbar__spacer {
    flex: 1;
  }
  .dm-toolbar__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .dm-toolbar__divider {
    margin-block: calc(var(--spacing) * 0.5);
    align-self: stretch;
    width: 1px;
    background-color: var(--border-divider, var(--border-secondary));
  }
  .dm-view__body {
    position: relative;
    width: 100%;
    overflow: auto;
  }
  .dm-view__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-divider, var(--border-secondary));
  }
  .dm-summary {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .dm-summary strong, .dm-summary .dm-summary__figure {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .dm-panel {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-card, var(--bg-primary));
    border-radius: var(--radius-lg, var(--radius-md));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), var(--shadow-sm);
  }
  .dm-panel__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--border-divider, var(--border-secondary));
  }
  .dm-panel__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .dm-panel__subtitle {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .dm-panel__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    overflow: auto;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .dm-panel__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-divider, var(--border-secondary));
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
  }
  .dm-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 2px;
  }
  .dm-list__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-secondary);
    border-radius: var(--radius-md, var(--radius-sm));
    background-color: var(--bg-primary, var(--bg-card));
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease), box-shadow var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-list__item:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .dm-list__item.is-dragging {
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-md);
    opacity: .9;
  }
  .dm-list__item.is-drop-target {
    box-shadow: inset 0 2px 0 var(--border-focus);
  }
  .dm-list__item.is-disabled {
    opacity: .55;
  }
  .dm-list__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
  }
  .dm-list__meta {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .dm-handle {
    display: inline-flex;
    flex-shrink: 0;
    cursor: grab;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-quaternary, var(--text-tertiary));
    border-radius: var(--radius-sm);
  }
  .dm-handle:hover {
    color: var(--text-tertiary);
  }
  .dm-handle:active {
    cursor: grabbing;
  }
  .dm-handle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .dm-field-row {
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr);
  }
  .dm-field-row + .dm-field-row {
    border-top: 1px solid var(--border-divider-subtle, var(--border-divider));
  }
  .dm-field-row__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .dm-field-row__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary, var(--text-tertiary));
  }
  .dm-segment {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    padding: calc(var(--spacing) * 0.5);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
  }
  .dm-segment__btn {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease), color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-segment__btn:hover {
    color: var(--text-secondary);
  }
  .dm-segment__btn.is-active {
    color: var(--text-primary);
    background-color: var(--bg-card, var(--bg-primary));
    box-shadow: var(--shadow-xs);
  }
  .dm-segment__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .dm-segment__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .3rem;
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary, var(--bg-secondary));
    border-radius: var(--radius-full);
    font-variant-numeric: tabular-nums;
  }
  .dm-segment__btn.is-active .dm-segment__count {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .dm-chip {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
    padding-left: calc(var(--spacing) * 2.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
  }
  .dm-chip__key {
    color: var(--text-tertiary);
  }
  .dm-chip__val {
    color: var(--text-primary);
    font-weight: 600;
  }
  .dm-chip__remove {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-tertiary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-full);
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease), color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-chip__remove:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary, var(--bg-secondary));
  }
  .dm-chip__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .dm-stat {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .dm-stat__value {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .dm-stat__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-list__item, .dm-segment__btn, .dm-chip__remove {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-table-view .dm-view__body .table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 1);
    background-color: var(--bg-table-header, var(--bg-secondary, var(--bg-primary-subtle)));
  }
  .dm-table-view.dm-density-compact .table :is(th, td) {
    padding-top: .375rem;
    padding-bottom: .375rem;
  }
  .dm-table-view.dm-density-relaxed .table :is(th, td) {
    padding-top: .875rem;
    padding-bottom: .875rem;
  }
  .dm-view__busy {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
    background-color: var(--bg-card, var(--bg-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-card, var(--bg-primary)) 62%, transparent);
    }
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal, .2s) var(--ease-out, ease);
  }
  .dm-table-view.is-busy .dm-view__busy {
    opacity: 1;
    pointer-events: auto;
  }
  .dm-view__busy i {
    animation: dmSpin var(--duration-spinner-rotate, .8s) linear infinite;
  }
  @keyframes dmSpin {
    to {
      transform: rotate(360deg);
    }
  }
  .dm-noresults {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 6);
    text-align: center;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    color: var(--text-tertiary);
  }
  .dm-noresults__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
    color: var(--text-quaternary, var(--text-tertiary));
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
  }
  .dm-noresults__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-view__busy {
      transition: none;
    }
    .dm-view__busy i {
      animation: none;
    }
  }
}
@layer utilities {
  .dm-columns {
    width: 100%;
    max-width: 22rem;
  }
  .dm-columns .dm-panel__body {
    max-height: 24rem;
  }
  .dm-columns__group-label {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-top: .375rem;
    color: var(--text-tertiary);
    background-color: var(--bg-card, var(--bg-primary));
  }
  .dm-columns__group-label:first-child {
    margin-top: 0;
  }
  .dm-columns__group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .3rem;
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary, var(--bg-secondary));
    border-radius: var(--radius-full);
    font-variant-numeric: tabular-nums;
  }
  .dm-columns__pin {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-quaternary, var(--text-tertiary));
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast, .12s) var(--ease-out, ease), background-color var(--duration-fast, .12s) var(--ease-out, ease), transform var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-columns__pin:hover {
    color: var(--text-secondary);
    background-color: var(--bg-tertiary, var(--bg-secondary));
  }
  .dm-columns__pin:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .dm-columns__pin.is-pinned {
    color: var(--text-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 10%, var(--bg-primary));
    }
  }
  .dm-columns__pin.is-pinned i {
    transform: rotate(-45deg);
  }
  .dm-columns__freeze {
    margin-block: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-tertiary);
  }
  .dm-columns__freeze::before, .dm-columns__freeze::after {
    flex: 1;
    content: "";
    height: 0;
    border-top: 1px dashed var(--border-secondary, var(--border-primary));
  }
  .dm-columns--popover {
    max-width: 16rem;
  }
  .dm-columns--popover .dm-panel__body {
    max-height: 18rem;
  }
  .dm-columns--popover .dm-list__item {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .dm-columns--popover .dm-list__meta {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-columns__pin {
      transition: none;
    }
  }
}
@layer utilities {
  .table thead th .chm-trigger {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: .25rem;
    padding: 0;
    border: 0;
    font-size: .6875rem;
    color: var(--text-tertiary);
    background-color: transparent;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--duration-fast, .12s) var(--ease-out, ease), color var(--duration-fast, .12s) var(--ease-out, ease), background-color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .table thead tr > th:hover .chm-trigger, .table thead tr > th:focus-within .chm-trigger, .table thead tr > th[aria-sort]:not([aria-sort="none"]) .chm-trigger, .table thead tr > th:has(.dropdown.show) .chm-trigger, .table thead tr > th.chm-open .chm-trigger, .chm-trigger[aria-expanded="true"] {
    opacity: 1;
  }
  .table thead th .chm-trigger:hover {
    color: var(--text-secondary);
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .table thead th .chm-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .table thead th .chm-trigger[aria-expanded="true"] {
    color: var(--text-primary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
  }
  .table thead th .chm-dir {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    margin-left: .125rem;
    font-size: .6875rem;
    opacity: .8;
  }
  .table thead > tr > th:has(.dropdown.show), .table thead > tr > th.chm-open {
    background-color: var(--bg-table-header-active, var(--bg-secondary));
    color: var(--text-table-header-active, var(--text-primary));
  }
  @media (prefers-reduced-motion: reduce) {
    .table thead th .chm-trigger {
      transition: none;
    }
  }
}
@layer utilities {
  .grouped-table__t {
    width: 100%;
    table-layout: fixed;
  }
  .grouped-table__t > colgroup > col:nth-child(1) {
    width: 42%;
  }
  .grouped-table__t > colgroup > col:nth-child(2) {
    width: 20%;
  }
  .grouped-table__t > colgroup > col:nth-child(3) {
    width: 20%;
  }
  .grouped-table__t > colgroup > col:nth-child(4) {
    width: 18%;
  }
  .grouped-table__group + .grouped-table__group {
    border-top: 1px solid var(--border-divider, var(--border-secondary));
  }
  .grouped-table__grouprow {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-primary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease);
    list-style: none;
  }
  .grouped-table__grouprow::-webkit-details-marker {
    display: none;
  }
  .grouped-table__grouprow::marker {
    content: "";
  }
  .grouped-table__grouprow:hover {
    background-color: var(--bg-secondary-hover, var(--bg-primary-hover));
  }
  .grouped-table__grouprow:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .grouped-table__caret {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1rem;
    font-size: .75rem;
    color: var(--text-tertiary);
    transition: transform var(--duration-normal, .2s) var(--ease-out, ease);
  }
  .grouped-table__group[open] > .grouped-table__grouprow .grouped-table__caret {
    transform: rotate(90deg);
  }
  .grouped-table__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .grouped-table__agg {
    margin-left: auto;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .grouped-table__head + .grouped-table__group {
    border-top: 0;
  }
  .grouped-table__total {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .grouped-table__total strong {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  @media (prefers-reduced-motion: reduce) {
    .grouped-table__grouprow {
      transition: none;
    }
    .grouped-table__caret {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-row-detail {
    display: grid;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
  .dm-row-detail__col {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
  }
  .dm-row-detail__section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .dm-row-detail__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .dm-row-detail__kv {
    display: grid;
    min-width: 0;
    column-gap: calc(var(--spacing) * 4);
    row-gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
  }
  .dm-row-detail__kv dt {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .dm-row-detail__kv dd {
    min-width: 0;
    color: var(--text-primary);
  }
  .dm-row-detail__stats {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 3);
  }
  .dm-row-detail__tags {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
}
@layer utilities {
  .dm-virtual__viewport {
    position: relative;
    width: 100%;
  }
  .dm-virtual .dm-view__body {
    max-height: var(--dm-virtual-viewport, 22rem);
  }
  .dm-virtual .dm-view__body .table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 1);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
  }
  .dm-virtual .dm-view__body:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .dm-virtual__spacer {
    position: relative;
    width: 100%;
  }
  .dm-virtual__window {
    position: absolute;
    inset-inline: 0;
    top: 0;
  }
  .dm-virtual__index {
    pointer-events: none;
    position: absolute;
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    right: .75rem;
    bottom: .75rem;
    color: var(--text-secondary);
    background-color: var(--bg-card, var(--bg-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-card, var(--bg-primary)) 88%, transparent);
    }
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), var(--shadow-xs);
    font-variant-numeric: tabular-nums;
    z-index: var(--z-sticky, 1);
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-virtual__index i {
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-virtual__index {
      transition: none;
    }
  }
  .badge-dot vocabulary the sibling data-management views consume is untouched. Semantic tokens only. ========================================================================== */ .dm-virtual > .dm-view__toolbar {
    align-items: center;
    row-gap: 0.5rem;
  }
  .dm-virtual > .dm-view__toolbar .dm-toolbar__group {
    align-items: center;
  }
  .dm-virtual > .dm-view__toolbar .input-affix {
    inline-size: clamp(200px, 24vw, 300px);
  }
  .dm-virtual .dm-view__body .table {
    table-layout: fixed;
    width: 100%;
  }
  .dm-virtual .dm-view__body .table th, .dm-virtual .dm-view__body .table td {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dm-virtual .dm-view__body .table td .flex {
    min-width: 0;
  }
  .dm-virtual .dm-view__body .table td .font-medium {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dm-virtual .badge-dot {
    border-radius: var(--radius-sm);
    width: max-content;
  }
  .dm-virtual > .dm-view__toolbar .dm-segment__count {
    border-radius: var(--radius-sm);
  }
  .dm-virtual .dm-audit {
    text-align: right;
    white-space: nowrap;
  }
  .dm-virtual .dm-view__body {
    padding-bottom: 2.5rem;
  }
}
@layer utilities {
  .selm:not(.is-visible) {
    display: none;
  }
  .selm.selm--engaged {
    background-color: var(--bg-info-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-info-subtle) 55%, var(--bg-secondary, var(--bg-primary-subtle)));
    }
    box-shadow: inset 0 0 0 1px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text-info) 20%, transparent);
    }
  }
  .selm__summary {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .selm__count {
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 1.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .selm__count-num {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .selm__breakdown {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .selm__breakdown-sep {
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-quaternary, var(--text-tertiary));
  }
}
@layer utilities {
  .dm-bulk-edit {
    width: 100%;
    max-width: 44rem;
  }
  .dm-field-row.dm-bulk-edit__row {
    grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 8.5rem) minmax(0, 1.4fr) auto;
  }
  .dm-bulk-edit__value {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .dm-bulk-edit__cleared {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    font-style: italic;
    color: var(--text-quaternary, var(--text-tertiary));
  }
  .dm-bulk-edit__was {
    color: var(--text-tertiary);
    text-decoration: line-through;
    text-decoration-color: var(--text-quaternary, var(--text-tertiary));
    font-variant-numeric: tabular-nums;
  }
}
@layer utilities {
  .dm-bulk-assign .dm-segment__btn[aria-selected="true"] {
    color: var(--text-primary);
    background-color: var(--bg-card, var(--bg-primary));
    box-shadow: var(--shadow-xs);
  }
  .dm-bulk-assign__suggest {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease), color var(--duration-fast, .12s) var(--ease-out, ease), box-shadow var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-bulk-assign__suggest:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary-hover, var(--bg-secondary));
  }
  .dm-bulk-assign__suggest:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-bulk-assign__suggest {
      transition: none;
    }
  }
}
@layer utilities {
  .bulk-status__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .track.bulk-status__dist {
    height: 8px;
  }
  .bulk-status__legend {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 4);
    row-gap: calc(var(--spacing) * 1.5);
  }
  .bulk-status__legend-item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .bulk-status__count {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
}
@layer utilities {
  .dm-merge {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    --dm-merge-cols: minmax(7.5rem, max-content) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
    min-width: 34rem;
  }
  .dm-merge.dm-merge--3up {
    --dm-merge-cols: minmax(7.5rem, max-content) repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
    min-width: 44rem;
  }
  .dm-merge__row {
    display: grid;
    grid-template-columns: var(--dm-merge-cols);
    align-items: stretch;
  }
  .dm-merge__row + .dm-merge__row {
    border-top: 1px solid var(--border-divider, var(--border-secondary));
  }
  .dm-merge__row > * + * {
    border-left: 1px solid var(--border-divider-subtle, var(--border-divider));
  }
  .dm-merge__cell {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
  }
  .dm-merge__field {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
  }
  .dm-merge__row--head {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 1);
    background-color: var(--bg-card, var(--bg-primary));
  }
  .dm-merge__row--head .dm-merge__field {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .dm-merge__rec {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
  }
  .dm-merge__rec-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .dm-merge__rec-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .dm-merge__pick {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    color: var(--text-primary);
    border-radius: var(--radius-md, var(--radius-sm));
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease), box-shadow var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-merge__pick:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .dm-merge__pick:has(:checked) {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 8%, var(--bg-card, var(--bg-primary)));
    }
    box-shadow: inset 0 0 0 1px var(--border-brand, var(--border-focus));
  }
  .dm-merge__pick:has(:disabled) {
    cursor: not-allowed;
    opacity: .55;
  }
  .dm-merge__value {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dm-merge__value--empty {
    color: var(--text-placeholder, var(--text-quaternary));
    font-style: italic;
  }
  .dm-merge__winner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 6%, var(--bg-card, var(--bg-primary)));
    }
  }
  .dm-merge__row--head .dm-merge__winner {
    box-shadow: inset 0 2px 0 var(--bg-brand-solid);
  }
  .dm-merge__pick.dm-merge__winner {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .dm-merge__winner-label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-brand);
  }
  .dm-merge__row.is-conflict .dm-merge__field {
    background-color: var(--bg-warning-subtle, var(--bg-secondary));
    box-shadow: inset 3px 0 0 var(--bg-warning-solid, var(--border-warning));
  }
  .dm-merge__chip-conflict {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    align-self: flex-start;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-warning, var(--text-secondary));
  }
  .dm-merge__row.is-match .dm-merge__value, .dm-merge__row.is-match .dm-merge__winner {
    color: var(--text-tertiary);
  }
  .dm-merge__chip-match {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    align-self: flex-start;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-merge__pick {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-qb {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .dm-qb__group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
  }
  .dm-qb__connector {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .dm-qb__connector-text {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .dm-qb__items {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
    padding-left: 1.25rem;
  }
  .dm-qb__items::before {
    content: "";
    position: absolute;
    left: .375rem;
    top: .125rem;
    bottom: .5rem;
    width: 1px;
    background-color: var(--border-divider, var(--border-secondary));
  }
  .dm-qb__items > .dm-qb__row, .dm-qb__items > .dm-qb__group--nested {
    position: relative;
  }
  .dm-qb__items > .dm-qb__row::before {
    content: "";
    position: absolute;
    left: -.875rem;
    top: 1.25rem;
    width: .875rem;
    height: 1px;
    background-color: var(--border-divider, var(--border-secondary));
  }
  .dm-qb__items > .dm-qb__group--nested::before {
    content: "";
    position: absolute;
    left: -.875rem;
    top: 1.5rem;
    width: .875rem;
    height: 1px;
    background-color: var(--border-divider, var(--border-secondary));
  }
  .dm-qb__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding: .25rem .375rem;
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-qb__row:focus-within {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 7%, transparent);
    }
  }
  .dm-qb__field {
    flex: 1 1 8.5rem;
    min-width: 7rem;
  }
  .dm-qb__op {
    flex: 1 1 7.5rem;
    min-width: 6.5rem;
  }
  .dm-qb__value {
    flex: 2 1 9rem;
    min-width: 7rem;
  }
  .dm-qb__value--range {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .dm-qb__range-sep {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .dm-qb__value-none {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    font-style: italic;
    color: var(--text-quaternary, var(--text-tertiary));
  }
  .dm-qb__remove {
    margin-left: auto;
    flex-shrink: 0;
  }
  .dm-qb__group--nested {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
    padding: .625rem .75rem;
    border-radius: var(--radius-lg, var(--radius-md));
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 5%, var(--bg-secondary, var(--bg-primary-subtle)));
    }
    box-shadow: inset 2px 0 0 var(--border-brand, var(--bg-brand-solid)), inset 0 0 0 1px var(--border-divider-subtle, var(--border-divider));
  }
  .dm-qb__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-qb__row {
      transition: none;
    }
  }
}
@layer utilities {
  .sv-pin {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-quaternary, var(--text-tertiary));
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast, .12s) var(--ease-out, ease), background-color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .sv-pin:hover {
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
  }
  .sv-pin:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .sv-pin.is-pinned {
    color: var(--text-brand);
  }
  .sv-pin.is-pinned:hover {
    color: var(--text-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 10%, var(--bg-primary));
    }
  }
  .sv-view__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  @media (prefers-reduced-motion: reduce) {
    .sv-pin {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-segment--icons .dm-segment__btn {
    justify-content: center;
    padding-inline: 0;
    width: 1.75rem;
  }
  .dm-switcher__previews {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
  }
  @media (min-width: 768px) {
    .dm-switcher__previews {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .dm-switcher__preview {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    text-align: left;
    background-color: var(--bg-card, var(--bg-primary));
    border-radius: var(--radius-lg, var(--radius-md));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease), box-shadow var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-switcher__preview:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .dm-switcher__preview.is-active {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .dm-switcher__preview:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .dm-switcher__preview-label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
  }
  .dm-switcher__preview.is-active .dm-switcher__preview-label {
    color: var(--text-primary);
  }
  .dm-switcher__thumb {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: var(--spacing);
    overflow: hidden;
    padding: calc(var(--spacing) * 1.5);
    height: 4.5rem;
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-md, var(--radius-sm));
    box-shadow: inset 0 0 0 1px var(--border-divider, var(--border-secondary));
  }
  .dm-switcher__thumb--stack {
    flex-direction: column;
  }
  .dm-switcher__cell {
    overflow: hidden;
    padding: var(--spacing);
    background-color: var(--bg-card, var(--bg-primary));
    border-radius: var(--radius-sm, var(--radius-xs));
    box-shadow: inset 0 0 0 1px var(--border-divider-subtle, var(--border-divider));
  }
  .dm-switcher__line {
    display: block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    height: .3rem;
    background-color: var(--text-tertiary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-tertiary) 40%, transparent);
    }
  }
  .dm-switcher__line--head {
    background-color: var(--text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-secondary) 65%, transparent);
    }
  }
  .dm-switcher__tile {
    display: block;
    flex-shrink: 0;
    border-radius: 0.25rem;
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 25%, var(--bg-tertiary, var(--bg-secondary)));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-switcher__preview {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-filter-summary {
    column-gap: calc(var(--spacing) * 2);
    row-gap: calc(var(--spacing) * 2);
  }
  .dm-filter-summary__label {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
  }
  .dm-filter-summary__chips {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .dm-filter-summary--scroll .dm-filter-summary__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .dm-filter-summary__empty {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .dm-chip__icon {
    display: inline-flex;
    flex-shrink: 0;
    --tw-leading: 1;
    line-height: 1;
    font-size: .8125rem;
    color: var(--text-tertiary);
  }
  .dm-chip.dm-chip--more {
    cursor: pointer;
    padding-inline: calc(var(--spacing) * 2.5);
    color: var(--text-secondary);
    background-color: var(--bg-tertiary, var(--bg-secondary));
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease), color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-chip--more:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary-hover, var(--bg-tertiary));
  }
  .dm-chip--more:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .dm-chip.dm-chip--saved {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 10%, var(--bg-primary));
    }
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bg-brand-solid) 35%, transparent);
    }
  }
  .dm-chip--saved .dm-chip__icon, .dm-chip--saved .dm-chip__key {
    color: var(--text-brand);
  }
  .dm-chip--saved .dm-chip__val {
    color: var(--text-primary);
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-chip--more {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-sort {
    width: 100%;
    max-width: 30rem;
  }
  .dm-sort .dm-panel__body {
    max-height: 22rem;
  }
  .dm-sort__index {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    width: 1.375rem;
    height: 1.375rem;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
    font-variant-numeric: tabular-nums;
  }
  .dm-sort__index.is-primary {
    color: var(--text-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 10%, var(--bg-primary));
    }
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bg-brand-solid) 24%, transparent);
    }
  }
  .dm-sort__field {
    min-width: 0;
    flex: 1;
  }
  .dm-sort__summary {
    cursor: pointer;
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease), box-shadow var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-sort__summary:hover {
    background-color: var(--bg-tertiary, var(--bg-secondary));
  }
  .dm-sort__summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), 0 0 0 2px var(--border-focus);
  }
  .dm-sort__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .3rem;
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary, var(--bg-secondary));
    border-radius: var(--radius-full);
    font-variant-numeric: tabular-nums;
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-sort__summary {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-dedupe {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .dm-dedupe__cluster {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-card, var(--bg-primary));
    border-radius: var(--radius-lg, var(--radius-md));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), var(--shadow-xs);
  }
  .dm-dedupe__cluster.is-high {
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), inset 3px 0 0 var(--bg-success-solid, var(--border-success)), var(--shadow-xs);
  }
  .dm-dedupe__cluster.is-medium {
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), inset 3px 0 0 var(--bg-warning-solid, var(--border-warning)), var(--shadow-xs);
  }
  .dm-dedupe__cluster.is-resolved {
    opacity: .6;
  }
  .dm-dedupe__cluster-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    row-gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    border-bottom: 1px solid var(--border-divider, var(--border-secondary));
  }
  .dm-dedupe__confidence {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .dm-dedupe__meter {
    flex-shrink: 0;
    width: 4rem;
  }
  .dm-dedupe__reason {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .dm-dedupe__reason i {
    color: var(--text-quaternary, var(--text-tertiary));
  }
  .dm-dedupe__actions {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .dm-dedupe__records {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
  }
  .dm-dedupe__email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
}
@layer utilities {
  .pf-loadmore {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-divider, var(--border-secondary));
  }
  .pf-loadmore__count {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .pf-sentinel {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .pf-sentinel i {
    animation: pfSpin var(--duration-spinner-rotate, .8s) linear infinite;
  }
  @keyframes pfSpin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pf-sentinel i {
      animation: none;
    }
  }
}
@layer utilities {
  .import-wizard__steps {
    overflow-x: auto;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--border-divider, var(--border-secondary));
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
  }
  .import-wizard__panels {
    min-height: 15rem;
  }
}
@layer utilities {
  .dm-column-mapping .dm-field-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  .dm-column-mapping__target {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .dm-column-mapping__target > .form-control {
    min-width: 0;
    flex: 1;
  }
  .dm-column-mapping .dm-field-row.is-skipped {
    opacity: .6;
  }
  .dm-column-mapping .dm-field-row.is-required-unmapped {
    padding-inline: .625rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-danger-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-danger-subtle) 55%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-column-mapping .dm-field-row {
      transition: none;
    }
  }
}
@layer utilities {
  .iv-summary {
    display: grid;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
  .iv-tile, .iv-health {
    --iv-tone: var(--text-tertiary);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg, var(--radius-md));
    background-color: var(--bg-primary, var(--bg-card));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
  }
  .iv-tile__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    color: var(--iv-tone);
    background-color: var(--iv-tone);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--iv-tone) 12%, var(--bg-primary));
    }
    border-radius: var(--radius-md, var(--radius-sm));
  }
  .iv-tile--valid {
    --iv-tone: var(--text-success);
  }
  .iv-tile--warning {
    --iv-tone: var(--text-warning);
  }
  .iv-tile--danger {
    --iv-tone: var(--text-danger);
  }
  .iv-tile--total {
    --iv-tone: var(--text-tertiary);
  }
  .iv-field {
    display: inline-block;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
  }
  .iv-issue__value {
    color: var(--text-primary);
    font-weight: 600;
  }
}
@layer utilities {
  .dm-export {
    width: 100%;
    max-width: 34rem;
  }
  .dm-export .dm-panel__body {
    gap: 0;
  }
  .dm-export__section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    min-width: 0;
    padding: 1rem 0;
    border: 0;
  }
  .dm-export__section:first-child {
    padding-top: .25rem;
  }
  .dm-export__section:last-child {
    padding-bottom: .25rem;
  }
  .dm-export__section + .dm-export__section {
    border-top: 1px solid var(--border-divider-subtle, var(--border-divider));
  }
  .dm-export__legend {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .dm-export__legend .dm-export__legend-note {
    margin-left: auto;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--text-quaternary, var(--text-tertiary));
  }
  .dm-export__cols {
    max-height: 12rem;
    overflow: auto;
  }
  .dm-export__schedule {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-md);
  }
}
@layer utilities {
  .dm-list__item.batch-progress__job {
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
  }
  .batch-progress__icon {
    margin-top: calc(var(--spacing) * 0.5);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: .8125rem;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-md, var(--radius-sm));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
  }
  .batch-progress__icon.is-running {
    color: var(--text-info);
    background-color: var(--bg-info-subtle);
    box-shadow: inset 0 0 0 1px var(--border-info-subtle, var(--border-info));
  }
  .batch-progress__icon.is-done {
    color: var(--text-success);
    background-color: var(--bg-success-subtle);
    box-shadow: inset 0 0 0 1px var(--border-success-subtle, var(--border-success));
  }
  .batch-progress__icon.is-failed {
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
    box-shadow: inset 0 0 0 1px var(--border-danger-subtle, var(--border-danger));
  }
  .batch-progress__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .batch-progress__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .batch-progress__name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .batch-progress__main .track {
    height: 6px;
  }
  .batch-progress__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .batch-progress__meta.is-error {
    color: var(--text-danger);
  }
  .batch-progress__action {
    margin-top: calc(var(--spacing) * 0.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .batch-progress__pill {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
    padding-left: calc(var(--spacing) * 2.5);
    background-color: var(--bg-card, var(--bg-primary));
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary)), var(--shadow-sm);
  }
  .batch-progress__pill .batch-progress__icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .75rem;
    margin-top: 0;
  }
  .batch-progress__pill .track {
    flex-shrink: 0;
    width: 7rem;
    height: 6px;
  }
  .batch-progress__pill-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .batch-progress__pill-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
}
@layer utilities {
  .dm-record-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .dm-record-nav__readout {
    justify-content: center;
    padding-inline: calc(var(--spacing) * 2);
    white-space: nowrap;
    min-width: 8.5rem;
    height: 2rem;
    text-align: center;
  }
  button.dm-record-nav__readout {
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md, var(--radius-sm));
    transition: background-color var(--duration-fast, .12s) var(--ease-out, ease);
  }
  button.dm-record-nav__readout:hover {
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
  }
  button.dm-record-nav__readout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .dm-record-nav__progress {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing);
    min-width: 9.5rem;
  }
  .dm-record-detail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
  }
  .dm-record-detail__title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  @media (prefers-reduced-motion: reduce) {
    button.dm-record-nav__readout {
      transition: none;
    }
  }
}
@layer utilities {
  .dm-refresh {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .dm-refresh__reload.is-syncing i, .dm-refresh__reload.is-syncing svg {
    transform-origin: center;
    animation: dmRefreshSpin var(--duration-spinner-rotate, .8s) linear infinite;
  }
  @keyframes dmRefreshSpin {
    to {
      transform: rotate(360deg);
    }
  }
  .dm-refresh-line {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: calc(var(--spacing) * 0.5);
    overflow: hidden;
    z-index: var(--z-sticky, 1);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-brand-solid) 16%, transparent);
    }
  }
  .dm-refresh-line__fill {
    position: absolute;
    inset-block: 0;
    width: 38%;
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-full);
    animation: dmRefreshLine 1.1s var(--ease-in-out, ease) infinite;
  }
  @keyframes dmRefreshLine {
    0% {
      left: -38%;
    }
    100% {
      left: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dm-refresh__reload.is-syncing i, .dm-refresh__reload.is-syncing svg {
      animation: none;
    }
    .dm-refresh-line__fill {
      animation: none;
      width: 100%;
      left: 0;
      opacity: .6;
    }
  }
}
@layer utilities {
  .dm-audit {
    width: 100%;
    max-width: 46rem;
  }
  .dm-audit__diff {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 2.5);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    border-radius: var(--radius-md, var(--radius-sm));
  }
  .dm-field-row.dm-audit__row {
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  }
  .dm-audit__change {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
  }
  .dm-audit__was {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
    text-decoration: line-through;
    text-decoration-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in oklab, var(--text-danger) 55%, transparent);
    }
    font-variant-numeric: tabular-nums;
  }
  .dm-audit__now {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-success);
    background-color: var(--bg-success-subtle);
    font-variant-numeric: tabular-nums;
  }
  .dm-audit__empty {
    display: inline-flex;
    align-items: center;
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    font-style: italic;
    color: var(--text-quaternary, var(--text-tertiary));
  }
}
@layer utilities {
  .retention-countdown {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
    font-variant-numeric: tabular-nums;
  }
  .retention-countdown > i, .retention-countdown > [class*="fa-"] {
    font-size: 0.85em;
    color: var(--text-tertiary);
  }
  .retention-countdown--soon {
    color: var(--text-warning);
    background-color: var(--bg-warning-subtle);
    box-shadow: inset 0 0 0 1px var(--border-warning-subtle, var(--border-warning));
  }
  .retention-countdown--soon > i, .retention-countdown--soon > [class*="fa-"] {
    color: var(--text-warning);
  }
  .retention-countdown--urgent {
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
    box-shadow: inset 0 0 0 1px var(--border-danger-subtle, var(--border-danger));
  }
  .retention-countdown--urgent > i, .retention-countdown--urgent > [class*="fa-"] {
    color: var(--text-danger);
    animation: retentionPulse 1.6s var(--ease-in-out, ease) infinite;
  }
  @keyframes retentionPulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .retention-countdown--urgent > i, .retention-countdown--urgent > [class*="fa-"] {
      animation: none;
    }
  }
}
@layer utilities {
  .dm-view.dm-view--stale {
    box-shadow: inset 0 2px 0 0 var(--border-warning, var(--border-warning-subtle)), inset 0 0 0 1px var(--border-secondary, var(--border-primary)), var(--shadow-xs);
  }
  .dm-view--stale .dm-view__toolbar--sub .dm-stale__icon {
    color: var(--text-warning);
  }
}
@layer utilities {
  .segment-tabs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .segment-tabs__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-bottom: 0.375rem;
  }
  .segment-tabs--underline {
    position: relative;
  }
  .segment-tabs--underline > .nav-tabs {
    min-width: 0;
    flex: 1;
  }
  .segment-tabs--underline::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--border-divider, var(--border-secondary));
    pointer-events: none;
  }
  .segment-tabs--underline > .nav-tabs::after {
    content: none;
  }
  .segment-tabs--pill {
    align-items: center;
  }
  .segment-tabs--pill .segment-tabs__actions {
    padding-bottom: 0;
  }
  .segment-tabs__unsaved {
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 0.4375rem;
    height: 0.4375rem;
    margin-inline-start: 0.125rem;
    background-color: var(--bg-warning-solid, var(--bg-warning));
  }
}
@layer utilities {
  .cf-t-success {
    --cf-fill: var(--bg-success-solid);
    --cf-text: var(--text-success);
  }
  .cf-t-warning {
    --cf-fill: var(--bg-warning-solid);
    --cf-text: var(--text-warning);
  }
  .cf-t-danger {
    --cf-fill: var(--bg-danger-solid);
    --cf-text: var(--text-danger);
  }
  .cf-t-info {
    --cf-fill: var(--bg-info-solid);
    --cf-text: var(--text-info);
  }
  .cf-t-default {
    --cf-fill: var(--bg-brand-solid);
    --cf-text: var(--text-secondary);
  }
  .cf-databar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .cf-databar__track {
    position: relative;
    flex: 1;
    overflow: hidden;
    height: .5rem;
    min-width: 3.5rem;
    border-radius: var(--radius-full);
    background-color: var(--cf-fill, var(--bg-brand-solid));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--cf-fill, var(--bg-brand-solid)) 14%, var(--bg-primary));
    }
  }
  .cf-databar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--cf-fill, var(--bg-brand-solid));
    transition: width var(--duration-normal, .2s) var(--ease-out, ease);
  }
  .cf-databar__value {
    text-align: right;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 4.25rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .cf-heat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 2.75rem;
    padding: .1875rem .5rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background-color: var(--cf-fill, var(--bg-success-solid));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--cf-fill, var(--bg-success-solid)) var(--cf-heat-amt, 18%), var(--bg-primary));
    }
    font-variant-numeric: tabular-nums;
  }
  .cf-heat--strong {
    --cf-heat-amt: 34%;
  }
  .cf-heat--soft {
    --cf-heat-amt: 10%;
  }
  .cf-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--cf-text, var(--text-tertiary));
    font-variant-numeric: tabular-nums;
  }
  .cf-trend--flat {
    --cf-text: var(--text-tertiary);
  }
  .cf-text {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--cf-text, var(--text-primary));
    font-variant-numeric: tabular-nums;
  }
  .cf-rules {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .cf-rule {
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2.5);
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .cf-rule + .cf-rule {
    border-top: 1px solid var(--border-divider-subtle, var(--border-divider));
  }
  .cf-rule__swatch {
    flex-shrink: 0;
    width: .875rem;
    height: .875rem;
    border-radius: var(--radius-xs, var(--radius-sm));
    background-color: var(--cf-fill, var(--bg-brand-solid));
  }
  .cf-rule__cond {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .cf-rule__out {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 1.5);
  }
  .cf-preview {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-md, var(--radius-sm));
    background-color: var(--bg-secondary, var(--bg-primary-subtle));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-primary));
  }
  .cf-preview__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .cf-databar__fill {
      transition: none;
    }
  }
}
@layer utilities {
  .ui-autocomplete {
    position: absolute;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    margin: 0 0 10px 25px;
    list-style: none;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    color: var(--text-autocomplete);
    background-color: var(--bg-autocomplete);
    border-color: var(--border-autocomplete);
  }
  .ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: var(--text-autocomplete-item);
    white-space: nowrap;
    text-decoration: none;
  }
  .ui-state-hover, .ui-state-active {
    color: var(--text-autocomplete-active);
    background-color: var(--bg-autocomplete-active);
    text-decoration: none;
    border-radius: 0;
  }
}
@layer utilities {
  .checkbox-base {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    border-width: 0;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 68%;
    box-shadow: inset 0 0 0 1px var(--border-checkbox, var(--border-control));
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), box-shadow var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):hover {
    box-shadow: inset 0 0 0 1px var(--border-checkbox-hover, var(--border-control-hover));
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):checked, :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):checked:hover, :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):indeterminate, :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):indeterminate:hover {
    background-color: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid);
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):checked:not(:indeterminate) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11.6666 3.5L5.24992 9.91667L2.33325 7'/></svg>");
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):indeterminate {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'><path d='M2.91675 7H11.0834'/></svg>");
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):disabled, :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round)[disabled] {
    cursor: not-allowed;
    opacity: 50%;
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):disabled:not(:checked):not(:indeterminate), :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round)[disabled]:not(:checked):not(:indeterminate) {
    background-color: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round).is-error {
    box-shadow: inset 0 0 0 1px var(--border-danger);
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round).is-success {
    box-shadow: inset 0 0 0 1px var(--border-success);
  }
  .checkbox {
    display: inline-block;
    cursor: pointer;
    appearance: none;
    border-style: var(--tw-border-style);
    border-width: 1px;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-checkbox);
    border-color: var(--border-checkbox);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: var(--radius-sm);
  }
  .checkbox-soft {
    display: inline-block;
    cursor: pointer;
    appearance: none;
    border-style: var(--tw-border-style);
    border-width: 1px;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-checkbox);
    border-color: var(--border-checkbox);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
  }
  .checkbox-round {
    display: inline-block;
    cursor: pointer;
    appearance: none;
    border-style: var(--tw-border-style);
    border-width: 1px;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-checkbox);
    border-color: var(--border-checkbox);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-radius: var(--radius-full);
  }
  .checkbox-xs {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
  }
  .checkbox-sm {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .checkbox-md {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .checkbox-lg {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .check {
    display: inline-flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    -webkit-user-select: none;
    user-select: none;
  }
  .check-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-check-label);
  }
  .check.check-muted .check-label {
    color: var(--text-check-label-muted);
  }
  .check.check-dense {
    gap: calc(var(--spacing) * 1.5);
  }
  .check.check-dense .check-label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .check-text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .check-text-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-check-label);
  }
  .check-text-help {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-check-label-muted);
  }
  .check-reverse {
    width: 100%;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .check-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-out, ease), background-color var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .check-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary-hover);
  }
  .check-card:has(input:checked) {
    box-shadow: inset 0 0 0 2px var(--border-brand);
  }
  .check-card:has(input:disabled) {
    cursor: not-allowed;
    opacity: 50%;
  }
  .check-card .check-label {
    flex: 1;
  }
  .toggle {
    display: inline-flex;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    -webkit-user-select: none;
    user-select: none;
  }
  .toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .toggle-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    width: 38px;
    height: 22px;
    background-color: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-linear, linear), box-shadow var(--duration-fast, 100ms) var(--ease-linear, linear);
  }
  .toggle-thumb {
    position: absolute;
    border-radius: var(--radius-full);
    width: 18px;
    height: 18px;
    left: 2px;
    background-color: var(--bg-toggle-thumb);
    box-shadow: var(--shadow-sm);
    transition: transform 150ms var(--ease-default, ease-in-out);
  }
  .toggle:hover .toggle-input:not(:checked) ~ .toggle-track {
    background-color: var(--bg-tertiary-hover);
  }
  .toggle-input:checked ~ .toggle-track {
    background-color: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid);
  }
  .toggle-input:checked ~ .toggle-track .toggle-thumb {
    transform: translateX(16px);
  }
  .toggle:hover .toggle-input:checked ~ .toggle-track {
    background-color: var(--bg-brand-solid-hover);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid-hover);
  }
  .toggle-input:disabled ~ .toggle-track {
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .toggle:has(.toggle-input:disabled) {
    cursor: not-allowed;
    opacity: 50%;
    pointer-events: none;
  }
  .toggle:has(.toggle-input:disabled) .toggle-label, .toggle:has(.toggle-input:disabled) .toggle-text {
    pointer-events: auto;
  }
  .toggle-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-check-label);
  }
  .toggle-input ~ .toggle-label[data-on][data-off] {
    font-size: 0;
    line-height: 0;
  }
  .toggle-input ~ .toggle-label[data-on][data-off]::after {
    font-size: 0.75rem;
    line-height: normal;
    content: attr(data-off);
  }
  .toggle-input:checked ~ .toggle-label[data-on][data-off]::after {
    content: attr(data-on);
  }
  .toggle-xs .toggle-track {
    width: 32px;
    height: 18px;
  }
  .toggle-xs .toggle-thumb {
    width: 14px;
    height: 14px;
  }
  .toggle-xs .toggle-input:checked ~ .toggle-track .toggle-thumb {
    transform: translateX(14px);
  }
  .toggle-sm .toggle-track {
    width: 34px;
    height: 20px;
  }
  .toggle-sm .toggle-thumb {
    width: 16px;
    height: 16px;
  }
  .toggle-sm .toggle-input:checked ~ .toggle-track .toggle-thumb {
    transform: translateX(14px);
  }
  .toggle-lg .toggle-track {
    width: 46px;
    height: 26px;
  }
  .toggle-lg .toggle-thumb {
    width: 22px;
    height: 22px;
  }
  .toggle-lg .toggle-input:checked ~ .toggle-track .toggle-thumb {
    transform: translateX(20px);
  }
  .toggle-success .toggle-input:checked ~ .toggle-track {
    background-color: var(--bg-toggle-track-success);
    box-shadow: inset 0 0 0 1px var(--bg-toggle-track-success);
  }
  .toggle-warning .toggle-input:checked ~ .toggle-track {
    background-color: var(--bg-toggle-track-warning);
    box-shadow: inset 0 0 0 1px var(--bg-toggle-track-warning);
  }
  .toggle-danger .toggle-input:checked ~ .toggle-track {
    background-color: var(--bg-toggle-track-danger);
    box-shadow: inset 0 0 0 1px var(--bg-toggle-track-danger);
  }
  .toggle-info .toggle-input:checked ~ .toggle-track {
    background-color: var(--bg-toggle-track-info);
    box-shadow: inset 0 0 0 1px var(--bg-toggle-track-info);
  }
  .toggle-icon .toggle-track::before, .toggle-icon .toggle-track::after {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    content: "";
    pointer-events: none;
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .toggle-icon .toggle-track::before {
    right: 5px;
    opacity: 1;
    background-color: var(--text-toggle-thumb-icon);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>");
  }
  .toggle-icon .toggle-track::after {
    left: 5px;
    opacity: 0;
    background-color: var(--text-on-brand);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  }
  .toggle-icon .toggle-input:checked ~ .toggle-track::before {
    opacity: 0;
  }
  .toggle-icon .toggle-input:checked ~ .toggle-track::after {
    opacity: 1;
  }
  .toggle-reverse {
    flex-direction: row-reverse;
  }
  .toggle-justify {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: flex-start;
  }
  .toggle-justify .toggle-track {
    margin-left: auto;
  }
  .toggle-text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .toggle-text-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-check-label);
  }
  .toggle-text-help {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-check-label-muted);
  }
  .toggle-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-out, ease), background-color var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .toggle-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary-hover);
  }
  .toggle-card:has(.toggle-input:checked) {
    box-shadow: inset 0 0 0 2px var(--border-brand);
  }
  .toggle-card:has(.toggle-input:disabled) {
    cursor: not-allowed;
    opacity: 50%;
  }
  .toggle-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .toggle-list-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    -webkit-user-select: none;
    user-select: none;
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .toggle-list > .toggle-list-item:last-child, .toggle-list > li:last-child > .toggle-list-item, .toggle-list > li:last-child {
    border-bottom: 0;
  }
  .toggle-list-item:hover {
    background-color: var(--bg-primary-hover);
  }
  .toggle-list-item .toggle-track {
    margin-left: auto;
    flex-shrink: 0;
  }
  .toggle-list-item:has(.toggle-input:disabled) {
    cursor: not-allowed;
    opacity: 50%;
  }
  .radio-base {
    position: relative;
    display: inline-flex;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    border-width: 0;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-radio, var(--border-control));
    --radio-dot-size: 0.5rem;
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), box-shadow var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--radio-dot-size);
    height: var(--radio-dot-size);
    border-radius: 9999px;
    transform: translate(-50%, -50%) scale(0);
    background-color: var(--text-on-brand);
    transition: transform 100ms var(--ease-out, ease);
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost):hover {
    box-shadow: inset 0 0 0 1px var(--border-radio-hover, var(--border-control-hover));
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost):checked, :is(.radio-base, .radio, .radio-soft, .radio-ghost):checked:hover {
    background-color: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid);
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost):checked::after {
    transform: translate(-50%, -50%) scale(1);
    background-color: var(--text-on-brand);
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost):disabled, :is(.radio-base, .radio, .radio-soft, .radio-ghost)[disabled] {
    cursor: not-allowed;
    opacity: 50%;
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost):disabled:not(:checked), :is(.radio-base, .radio, .radio-soft, .radio-ghost)[disabled]:not(:checked) {
    background-color: var(--bg-tertiary);
  }
  .radio {
    display: inline-flex;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-radio);
    border-color: var(--border-radio);
    position: relative;
    --radio-dot-size: 0.5rem;
  }
  .radio-soft {
    display: inline-flex;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-radio);
    border-color: var(--border-radio);
    position: relative;
    --radio-dot-size: 0.5rem;
    box-shadow: inset 0 0 0 1px var(--border-control);
  }
  .radio-ghost {
    display: inline-flex;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-radio);
    border-color: var(--border-radio);
    position: relative;
    --radio-dot-size: 0.5rem;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--border-radio-ghost, var(--border-control));
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost).is-error {
    box-shadow: inset 0 0 0 1px var(--border-danger);
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost).is-error:checked::after {
    background-color: var(--border-danger);
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost).is-success {
    box-shadow: inset 0 0 0 1px var(--border-success);
  }
  :is(.radio-base, .radio, .radio-soft, .radio-ghost).is-success:checked::after {
    background-color: var(--border-success);
  }
  .radio-xs {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    --radio-dot-size: 0.375rem;
  }
  .radio-sm {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    --radio-dot-size: 0.4375rem;
  }
  .radio-md {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    --radio-dot-size: 0.5rem;
  }
  .radio-lg {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    --radio-dot-size: 0.625rem;
  }
  .radio-group {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .radio-group-inline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round):focus-visible, :is(.radio-base, .radio, .radio-soft, .radio-ghost):focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .toggle-input:focus-visible + .toggle-track {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round).is-error:focus-visible, :is(.radio-base, .radio, .radio-soft, .radio-ghost).is-error:focus-visible {
    outline-color: var(--border-danger);
  }
  :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round).is-success:focus-visible, :is(.radio-base, .radio, .radio-soft, .radio-ghost).is-success:focus-visible {
    outline-color: var(--border-success);
  }
  @media (prefers-reduced-motion: reduce) {
    .checkbox-base, .checkbox, .checkbox-soft, .checkbox-round, .radio-base, .radio, .radio-soft, .radio-ghost, .check-card, .toggle-card, .toggle-list-item, .toggle-track, .toggle-thumb, .toggle-icon .toggle-track::before, .toggle-icon .toggle-track::after {
      transition: none;
    }
    :is(.radio-base, .radio, .radio-soft, .radio-ghost)::after {
      transition: none;
    }
  }
  @media (pointer: coarse) {
    :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round, .radio-base, .radio, .radio-soft, .radio-ghost) {
      position: relative;
    }
    :is(.checkbox-base, .checkbox, .checkbox-soft, .checkbox-round, .radio-base, .radio, .radio-soft, .radio-ghost)::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
    .check:not(:has(.check-text)):not(.check-card), .toggle:not(:has(.check-text)):not(.toggle-card):not(.toggle-list-item) {
      min-height: 44px;
      align-items: center;
    }
    .toggle:not(.toggle-card):not(.toggle-list-item) {
      min-width: 44px;
    }
  }
}
@layer utilities {
  .color-swatch {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    width: 1rem;
    height: 1rem;
    background-color: var(--swatch-color, transparent);
    outline: 1px solid var(--border-color-swatch);
    outline-offset: -1px;
  }
  .color-swatch:hover {
    box-shadow: 0 0 0 2px var(--bg-color-swatch-ring-hover);
  }
  .color-swatch:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    box-shadow: 0 0 0 2px var(--bg-color-swatch-ring-focus);
  }
  .color-swatch.active, .color-swatch[aria-checked="true"], .color-swatch[aria-selected="true"] {
    box-shadow: 0 0 0 2px var(--bg-color-swatch-ring-active);
  }
  .color-swatch.active:hover, .color-swatch[aria-checked="true"]:hover, .color-swatch[aria-selected="true"]:hover {
    box-shadow: 0 0 0 2px var(--bg-color-swatch-ring-active);
  }
  .color-swatch.active::after, .color-swatch[aria-checked="true"]::after, .color-swatch[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5' stroke='%23000000' stroke-opacity='0.45' stroke-width='5'/><path d='M20 6L9 17l-5-5' stroke='%23ffffff' stroke-width='3'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    pointer-events: none;
  }
  .color-swatch:disabled, .color-swatch.is-disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 50%;
  }
  .color-swatch-xs {
    width: 0.625rem;
    height: 0.625rem;
  }
  .color-swatch-sm {
    width: 0.75rem;
    height: 0.75rem;
  }
  .color-swatch-md {
    width: 1rem;
    height: 1rem;
  }
  .color-swatch-lg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .color-swatch-xl {
    width: 1.75rem;
    height: 1.75rem;
  }
  .color-swatch-xs.active::after, .color-swatch-sm.active::after, .color-swatch-xs[aria-checked="true"]::after, .color-swatch-sm[aria-checked="true"]::after {
    display: none;
  }
  .color-swatch-square {
    border-radius: var(--radius-xs);
  }
  .color-swatch.color-none {
    background-color: transparent;
    background-image: linear-gradient( to top right, transparent calc(50% - 1px), var(--text-color-swatch-slash) calc(50% - 0.5px), var(--text-color-swatch-slash) calc(50% + 0.5px), transparent calc(50% + 1px) );
    outline-color: var(--border-color-swatch);
  }
  .color-swatch.color-none.active::after, .color-swatch.color-none[aria-checked="true"]::after {
    background-color: var(--text-primary);
  }
  .color-swatch.color-red {
    --swatch-color: var(--utility-red-500);
  }
  .color-swatch.color-orange {
    --swatch-color: var(--utility-orange-500);
  }
  .color-swatch.color-amber {
    --swatch-color: var(--utility-amber-500);
  }
  .color-swatch.color-yellow {
    --swatch-color: var(--utility-yellow-500);
  }
  .color-swatch.color-lime {
    --swatch-color: var(--utility-lime-500);
  }
  .color-swatch.color-green {
    --swatch-color: var(--utility-green-500);
  }
  .color-swatch.color-emerald {
    --swatch-color: var(--utility-emerald-500);
  }
  .color-swatch.color-teal {
    --swatch-color: var(--utility-teal-500);
  }
  .color-swatch.color-cyan {
    --swatch-color: var(--utility-cyan-500);
  }
  .color-swatch.color-sky {
    --swatch-color: var(--utility-sky-500);
  }
  .color-swatch.color-blue {
    --swatch-color: var(--utility-blue-500);
  }
  .color-swatch.color-indigo {
    --swatch-color: var(--utility-indigo-500);
  }
  .color-swatch.color-violet {
    --swatch-color: var(--utility-violet-500);
  }
  .color-swatch.color-purple {
    --swatch-color: var(--utility-purple-500);
  }
  .color-swatch.color-fuchsia {
    --swatch-color: var(--utility-fuchsia-500);
  }
  .color-swatch.color-pink {
    --swatch-color: var(--utility-pink-500);
  }
  .color-swatch.color-rose {
    --swatch-color: var(--utility-rose-500);
  }
  .color-swatch.color-neutral {
    --swatch-color: var(--utility-neutral-500);
  }
  .color-swatch.color-slate {
    --swatch-color: var(--utility-slate-500);
  }
  .color-swatch.color-black {
    --swatch-color: var(--color-black);
  }
  .color-swatch.color-white {
    --swatch-color: var(--color-white);
  }
  .color-swatch.color-white, .color-swatch.color-yellow, .color-swatch.color-lime, .color-swatch.color-amber {
    outline-color: var(--border-color-swatch-light);
  }
  .color-picker {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .color-picker__preview {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    width: 2rem;
    height: 2rem;
    background-color: var(--swatch-color, var(--bg-color-picker-preview));
    outline: 1px solid var(--border-color-swatch);
    outline-offset: -1px;
  }
  .color-picker__preview-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
  }
  .color-picker__preview-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
  }
  .color-picker__preview.is-empty {
    background-image: linear-gradient( to top right, transparent calc(50% - 1px), var(--text-color-swatch-slash) calc(50% - 0.5px), var(--text-color-swatch-slash) calc(50% + 0.5px), transparent calc(50% + 1px) );
  }
  .color-picker__palette {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .color-picker__palette--grid {
    display: grid;
    gap: calc(var(--spacing) * 1.5);
    grid-template-columns: repeat(8, 1fr);
  }
  .color-picker__palette--grid-sm {
    grid-template-columns: repeat(6, 1fr);
  }
  .color-picker__palette--tight {
    gap: var(--spacing);
  }
  .color-picker__group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .color-picker__group-title {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 60%;
    color: var(--text-tertiary);
  }
  .color-picker__swatch {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    width: 1rem;
    height: 1rem;
    background-color: var(--swatch-color, transparent);
    outline: 1px solid var(--border-color-swatch);
    outline-offset: -1px;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: 0;
  }
  .color-picker__swatch--add {
    background-color: transparent;
    outline-style: dashed;
    outline-color: var(--border-secondary);
    position: relative;
  }
  .color-picker__swatch--add::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    pointer-events: none;
  }
  .color-picker__swatch--add:hover {
    outline-color: var(--border-primary);
  }
  .color-picker__native {
    position: absolute;
    cursor: pointer;
    opacity: 0%;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .color-picker__input {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    min-height: calc(var(--spacing) * 7);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    text-transform: uppercase;
    width: 6.5rem;
    letter-spacing: 0.025em;
    color: var(--text-input);
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
  }
  .color-picker__input::placeholder {
    color: var(--text-input-placeholder);
    text-transform: none;
    letter-spacing: normal;
  }
  .color-picker__input:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-input, var(--shadow-xs));
  }
  .color-picker__input:focus {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .color-picker__input:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .color-picker__input:disabled, .color-picker__input[readonly] {
    cursor: not-allowed;
    opacity: 60%;
  }
  .color-picker__input.is-error {
    box-shadow: inset 0 0 0 1px var(--border-input-error, var(--border-danger)), var(--shadow-input, var(--shadow-xs));
  }
  .color-picker__input-xs {
    min-height: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    width: 5.5rem;
  }
  .color-picker__input-md {
    min-height: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    width: 7rem;
  }
  .color-picker__input-lg {
    min-height: calc(var(--spacing) * 10);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    width: 8rem;
  }
  .color-picker__trigger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
  }
  .color-picker__trigger:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-input, var(--shadow-xs));
  }
  .color-picker__trigger:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .color-picker__trigger-label {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .color-picker__trigger .color-picker__preview {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-sm);
  }
  .color-picker__panel {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    min-width: 12rem;
  }
  .color-picker-block {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker-inline {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__dialog {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: calc(var(--spacing) * 80);
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    overflow: clip;
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-color-picker-dialog);
    box-shadow: inset 0 0 0 1px var(--border-color-picker-dialog), var(--shadow-color-picker-dialog);
  }
  .popover .color-picker__dialog, .dropdown-menu .color-picker__dialog, .color-picker__dialog--bare {
    width: 100%;
    border-radius: var(--radius-none);
    padding: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .color-picker__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .color-picker__area {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    cursor: crosshair;
    border-radius: var(--radius-lg);
    -webkit-user-select: none;
    user-select: none;
    aspect-ratio: 1 / 1;
    background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--cp-hue, 258) 89% 60%));
    box-shadow: inset 0 0 0 1px var(--border-color-picker-hairline);
    touch-action: none;
  }
  .color-picker__thumb {
    position: absolute;
    display: block;
    cursor: grab;
    border-radius: var(--radius-full);
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid var(--bg-color-picker-thumb-border);
    box-shadow: var(--shadow-color-picker-thumb);
    background-color: var(--cp-thumb-color, transparent);
    transform: translate(-50%, -50%);
    outline: 2px solid transparent;
    outline-offset: 2px;
    touch-action: none;
  }
  .color-picker__thumb:active, .color-picker__thumb.is-dragging {
    cursor: grabbing;
  }
  .color-picker__thumb:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    box-shadow: var(--shadow-color-picker-thumb), 0 0 0 2px var(--bg-color-picker-dialog), 0 0 0 4px var(--border-focus);
  }
  .color-picker__slider-track .color-picker__thumb {
    top: 50%;
  }
  .color-picker__rails {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__sliders {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__slider {
    width: 100%;
  }
  .color-picker__slider-track {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-full);
    -webkit-user-select: none;
    user-select: none;
    height: 0.75rem;
    box-shadow: inset 0 0 0 1px var(--border-color-picker-hairline);
    touch-action: none;
  }
  .color-picker__slider--hue .color-picker__slider-track {
    background-image: linear-gradient( to right, hsl(0 89% 60%), hsl(60 89% 60%), hsl(120 89% 60%), hsl(180 89% 60%), hsl(240 89% 60%), hsl(300 89% 60%), hsl(360 89% 60%) );
  }
  .color-picker__slider--alpha .color-picker__slider-track {
    background-image: linear-gradient(to right, transparent, var(--cp-solid, hsl(var(--cp-hue, 258) 89% 60%))), repeating-conic-gradient(var(--bg-color-picker-checker-a) 0% 25%, var(--bg-color-picker-checker-b) 0% 50%);
    background-size: 100% 100%, 8px 8px;
    background-position: 0 0, 50% 50%;
  }
  .color-picker__eyedropper {
    flex-shrink: 0;
  }
  .color-picker__value {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__format {
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    width: 5rem;
    color: var(--text-color-picker-cell);
    background-color: var(--bg-color-picker-cell);
    box-shadow: inset 0 0 0 1px var(--border-color-picker-cell), var(--shadow-xs);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.75rem;
  }
  .color-picker__format:focus-visible {
    box-shadow: inset 0 0 0 2px var(--border-color-picker-cell-focus), var(--shadow-xs);
  }
  .color-picker__inputs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    box-shadow: var(--shadow-xs);
    border-radius: var(--radius-lg);
  }
  .color-picker__cell {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    place-content: center;
    place-items: center;
    background-color: var(--bg-color-picker-cell);
    box-shadow: inset 0 0 0 1px var(--border-color-picker-cell);
    transition: box-shadow 100ms ease;
  }
  .color-picker__cell:focus-within {
    z-index: 10;
    box-shadow: inset 0 0 0 2px var(--border-color-picker-cell-focus);
  }
  .color-picker__cell--only {
    border-radius: var(--radius-lg);
  }
  .color-picker__cell--first {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .color-picker__cell--last {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .color-picker__cell--middle {
    border-radius: 0;
  }
  .color-picker__cell--middle, .color-picker__cell--last {
    margin-left: -1px;
  }
  .color-picker__cell--narrow {
    flex: 0 0 3.5rem;
    width: 3.5rem;
  }
  .color-picker__field {
    width: 100%;
    min-width: 0;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    color: var(--text-color-picker-cell);
    font-variant-numeric: tabular-nums;
  }
  .color-picker__cell-swatch {
    margin-left: calc(var(--spacing) * 2.5);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 1rem;
    height: 1rem;
    background-color: var(--cp-solid, transparent);
    box-shadow: inset 0 0 0 1px var(--border-color-picker-hairline);
  }
  .color-picker__saved {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__saved-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__saved-label {
    flex: 1;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color-picker-saved-label);
  }
  .color-picker__saved-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .color-picker__saved-list .color-swatch.active, .color-picker__saved-list .color-swatch[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--bg-color-picker-dialog), 0 0 0 4px var(--swatch-color, var(--border-focus));
  }
  .color-picker__saved-list .color-swatch.active::after, .color-picker__saved-list .color-swatch[aria-checked="true"]::after {
    display: none;
  }
  .color-picker__gradient {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .color-picker__gradient-area {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    -webkit-user-select: none;
    user-select: none;
    aspect-ratio: 1 / 1;
    touch-action: none;
  }
  .color-picker__gradient-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-color-picker-hairline);
  }
  .color-picker__gradient-line {
    pointer-events: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .color-picker__gradient-stop {
    position: absolute;
    z-index: 10;
    display: block;
    cursor: grab;
    border-radius: var(--radius-full);
    width: 1rem;
    height: 1rem;
    border: 3px solid var(--bg-color-picker-thumb-border);
    box-shadow: var(--shadow-color-picker-thumb);
    background-color: var(--cp-stop-color, transparent);
    transform: translate(-50%, -50%);
    outline: 2px solid transparent;
    outline-offset: 2px;
    touch-action: none;
  }
  .color-picker__gradient-stop--endpoint {
    width: 1.25rem;
    height: 1.25rem;
  }
  .color-picker__gradient-stop:active, .color-picker__gradient-stop.is-dragging {
    cursor: grabbing;
  }
  .color-picker__gradient-stop:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    box-shadow: var(--shadow-color-picker-thumb), 0 0 0 2px var(--bg-color-picker-dialog), 0 0 0 4px var(--border-focus);
  }
  .color-picker__gradient-toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
  }
  .color-picker__type {
    width: 6.5rem;
  }
  .color-picker__reverse {
    flex-shrink: 0;
  }
  .color-picker__gradient-slider {
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-full);
    -webkit-user-select: none;
    user-select: none;
    height: 0.75rem;
    box-shadow: inset 0 0 0 1px var(--border-color-picker-hairline);
    touch-action: none;
  }
  .color-picker__gradient-slider .color-picker__gradient-stop {
    top: 50%;
  }
  .color-picker__stop-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__stop-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__stop-head-label {
    flex: 1;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color-picker-saved-label);
  }
  .color-picker__stop-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .color-picker__stop-row.is-selected .color-picker__cell {
    box-shadow: inset 0 0 0 2px var(--border-color-picker-cell-focus);
  }
  .color-picker__stop-fields {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    align-items: center;
    gap: var(--spacing);
  }
  @media (pointer: coarse) {
    .color-picker__trigger {
      min-height: 44px;
    }
    button.color-picker__preview::before, a.color-picker__preview::before, .color-picker__preview[data-color-picker]::before, .color-picker__preview[role="button"]::before, .color-picker__preview[tabindex]:not([tabindex="-1"])::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
    input[type="color"].color-picker__preview, input[type="color"].color-picker__preview-sm, input[type="color"].color-picker__preview-lg {
      width: 44px;
      height: 44px;
    }
  }
}
@layer utilities {
  .date-picker {
    position: relative;
    display: block;
  }
  .date-picker-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .date-picker-range > .flatpickr-input, .date-picker-range > .form-control {
    flex: 1 1 0;
    min-width: 0;
  }
  .date-picker-range__sep {
    flex: 0 0 auto;
    color: var(--text-quaternary);
    font-size: 1rem;
    line-height: 1;
    user-select: none;
  }
  @media (max-width: 480px) {
    .date-picker-range {
      flex-direction: column;
      align-items: stretch;
    }
    .date-picker-range__sep {
      display: none;
    }
  }
  .date-picker-inline {
    display: inline-block;
  }
  .date-picker-inline .flatpickr-calendar.inline {
    box-shadow: 0 0 0 1px var(--border-secondary);
  }
}
@layer utilities {
  label, .form-label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-form-label);
  }
  .form-label-muted {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-form-label-muted);
  }
  .form-label-strong {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-form-label-strong);
  }
  label.required::after, .form-label.required::after, label.is-required::after, .form-label.is-required::after, .required::after, .is-required::after {
    content: " *";
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-form-label-required);
  }
  .form-info-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    -webkit-user-select: none;
    user-select: none;
    width: 22px;
    height: 22px;
    color: var(--text-form-info-btn);
    background-color: var(--alpha-0);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease), box-shadow var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .form-info-btn:hover {
    background-color: var(--bg-form-info-btn-hover);
  }
  .form-info-btn:active {
    background-color: var(--bg-form-info-btn-active, var(--bg-form-info-btn-hover));
  }
  .form-info-btn:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .form-info-btn-xs {
    width: 18px;
    height: 18px;
  }
  .form-info-btn-sm {
    width: 20px;
    height: 20px;
  }
  .form-info-btn i, .form-info-btn svg {
    --tw-leading: 1;
    line-height: 1;
    font-size: 0.9em;
  }
  .form-group {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .form-group-compact {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .form-group-dense {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .form-group > label, .form-group > .form-label {
    display: block;
  }
  .controls {
    margin-top: var(--spacing);
  }
  .controls-tight {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .controls-loose {
    margin-top: calc(var(--spacing) * 2);
  }
  .form-hint {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-hint);
  }
  .form-hint-muted {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-hint-muted);
  }
  .form-error {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-error);
  }
  .form-success {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-success);
  }
  .form-warning {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-warning);
  }
  .form-info {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-info);
  }
  .form-meta {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .form-counter {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    white-space: nowrap;
    opacity: 70%;
    color: var(--text-form-hint);
    font-variant-numeric: tabular-nums;
  }
  .form-divider {
    margin-block: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-form-divider);
  }
  .form-group-inline {
    margin-bottom: var(--spacing);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
    align-items: start;
    --form-inline-label-offset: 0.375rem;
  }
  .form-group-inline > label, .form-group-inline > .form-label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: flex-end;
    margin-top: var(--form-inline-label-offset);
  }
  .form-group-inline > .controls {
    margin-top: 0;
    min-width: 0;
  }
  .form-group-inline:has(.controls :is(.form-control-xs, .input-group .form-control-xs, .input-group-stack .form-control-xs)) {
    --form-inline-label-offset: 0.25rem;
  }
  .form-group-inline:has(.controls :is(.form-control-sm, .input-group .form-control-sm, .input-group-stack .form-control-sm)) {
    --form-inline-label-offset: 0.125rem;
  }
  .form-group-inline:has(.controls :is(.form-control-md, .input-group .form-control-md, .input-group-stack .form-control-md, .form-control, .combobox__control)) {
    --form-inline-label-offset: 0.5325rem;
  }
  .form-group-inline:has(.controls :is(.form-control-lg, .input-group .form-control-lg, .input-group-stack .form-control-lg)) {
    --form-inline-label-offset: 0.5rem;
  }
  .form-group-inline:has(.controls textarea) {
    --form-inline-label-offset: 0.325rem;
  }
  .form-label-right {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
    @media (width >= 48rem) {
      text-align: right;
    }
  }
  .form-label-top {
    align-items: flex-start;
    padding-top: 0;
  }
  .form-horizontal .form-group-inline {
    margin-bottom: var(--spacing);
  }
  .form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  .form-col-6 {
    grid-column: span 12 / span 12;
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .form-col-4 {
    grid-column: span 12 / span 12;
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .form-col-3 {
    grid-column: span 12 / span 12;
    @media (width >= 48rem) {
      grid-column: span 3 / span 3;
    }
  }
  .form-col-12 {
    grid-column: span 12 / span 12;
  }
  .form-group-display {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .form-group-display.form-group-compact {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .form-group-display.form-group-dense {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .form-group-display > label {
    display: block;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-form-label);
  }
  .form-group-display > :not(label) {
    margin-top: calc(var(--spacing) * 0.5);
    color: var(--text-input-primary);
  }
  .form-group-display-inline {
    margin-bottom: var(--spacing);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
    align-items: start;
    --form-display-label-offset: 0.325rem;
  }
  .form-group-display-inline.form-group-compact {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .form-group-display-inline.form-group-dense {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .form-group-display-inline > label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-form-label);
    margin-top: var(--form-display-label-offset);
  }
  .form-group-display-inline > :not(label) {
    margin-top: 0;
    min-width: 0;
    color: var(--text-input-primary);
  }
  .value-pre {
    white-space: pre-line;
  }
  .value-muted {
    color: var(--text-input-tertiary);
    opacity: 0.85;
  }
  .value-empty {
    color: var(--text-input-tertiary);
    opacity: 0.7;
    font-style: italic;
  }
  [data-copyable] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    max-width: 100%;
    border-radius: var(--radius-sm);
  }
  [data-copyable]:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  [data-copyable] > .copyable__btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 9px;
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease);
    pointer-events: none;
  }
  [data-copyable]:hover > .copyable__btn, [data-copyable]:focus-within > .copyable__btn, [data-copyable][data-copyable-persistent] > .copyable__btn {
    opacity: 0.45;
    pointer-events: auto;
  }
  [data-copyable] > .copyable__btn:hover, [data-copyable] > .copyable__btn:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    opacity: 1;
    color: var(--text-primary);
  }
  [data-copyable] > .copyable__btn.is-copied {
    opacity: 1;
    color: var(--text-success, var(--color-success));
    background: none;
    pointer-events: auto;
  }
  [data-copyable] > .copyable__btn.is-fading {
    opacity: 0;
    transition: opacity var(--duration-slow, 300ms) var(--ease-default, ease);
  }
  .input-validation-error, .form-control.input-validation-error, .form-control-soft.input-validation-error, .form-control-ghost.input-validation-error, .form-control-borderless.input-validation-error, select.form-control.input-validation-error, select.form-control-soft.input-validation-error, select.form-control-ghost.input-validation-error, select.form-control-borderless.input-validation-error {
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .input-validation-error:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .input-validation-error:focus {
    --tw-outline-style: none;
    outline-style: none;
    box-shadow: inset 0 0 0 2px var(--border-input-error-focus), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .field-validation-error, .field-validation-valid {
    margin-top: var(--spacing);
    display: block;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-error);
  }
  .field-validation-valid:empty {
    display: none;
  }
  .required-field {
    color: var(--text-form-error);
  }
  .form-group.is-error :is(.form-hint, .form-hint-muted) {
    color: var(--text-form-error);
  }
  .form-group.is-success :is(.form-hint, .form-hint-muted) {
    color: var(--text-form-success);
  }
  .form-group.is-warning :is(.form-hint, .form-hint-muted) {
    color: var(--text-form-warning);
  }
  .form-group.is-info :is(.form-hint, .form-hint-muted) {
    color: var(--text-form-info);
  }
  .form-dense label, .form-dense .form-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .form-dense .controls {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .validation-summary {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-alert-danger, var(--text-danger));
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .validation-summary--success {
    color: var(--text-success);
    background-color: transparent;
  }
  .validation-summary__icon {
    margin-top: calc(var(--spacing) * 0.5);
    flex-shrink: 0;
    color: var(--icon-alert-danger, var(--text-danger));
  }
  .validation-summary__title {
    margin-bottom: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .validation-summary__list {
    list-style-type: disc;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-left: calc(var(--spacing) * 4);
  }
  .validation-summary--hidden {
    display: none;
  }
  .validation-summary--warning {
    color: var(--text-alert-warning, var(--text-warning));
    background-color: transparent;
  }
  .validation-summary--warning .validation-summary__icon {
    color: var(--icon-alert-warning, var(--text-warning));
  }
  .form-fieldset {
    margin-bottom: calc(var(--spacing) * 4);
    display: block;
    padding: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-divider);
    background-color: var(--bg-primary);
  }
  .form-fieldset__header {
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .form-fieldset__title {
    display: block;
    padding: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .form-fieldset__description {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-hint-muted, var(--text-secondary));
  }
  .form-fieldset__body {
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .form-fieldset__body > .form-group:last-child, .form-fieldset__body > .form-group-inline:last-child {
    margin-bottom: 0;
  }
  .form-fieldset__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-divider);
    background-color: var(--bg-secondary);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
  .form-fieldset--plain {
    margin-bottom: calc(var(--spacing) * 3);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    border-radius: var(--radius-none);
  }
  .form-fieldset--plain > .form-fieldset__header {
    padding-inline: 0;
    padding-top: 0;
  }
  .form-fieldset--plain > .form-fieldset__body {
    padding-inline: 0;
  }
  .form-fieldset--filled {
    border-color: transparent;
    background-color: var(--bg-secondary);
  }
  .form-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .form-row__main {
    min-width: 0;
    flex: 1;
  }
  .form-row__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .form-row__description {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-hint-muted, var(--text-secondary));
  }
  .form-row__control {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
  }
  .form-row--bordered {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--border-divider);
  }
  .form-row--bordered:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .form-row--card {
    margin-bottom: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-divider);
    background-color: var(--bg-primary);
  }
  .form-inline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: stretch;
    gap: 0;
  }
  .form-inline > :not(:first-child):not(:last-child) {
    border-radius: 0 !important;
    margin-left: -1px;
  }
  .form-inline > :first-child:not(:only-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .form-inline > :last-child:not(:only-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px;
  }
  .form-inline > :focus, .form-inline > :focus-within {
    z-index: 2;
  }
  .form-inline-loose {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .form-actions {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-top: calc(var(--spacing) * 4);
    border-color: var(--border-divider);
  }
  .form-actions--start {
    justify-content: flex-start;
  }
  .form-actions--center {
    justify-content: center;
  }
  .form-actions--between {
    justify-content: space-between;
  }
  .form-actions--vertical {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions--vertical > * {
    width: 100%;
    justify-content: center;
  }
  .form-actions--borderless {
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding-top: 0;
  }
  .form-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-inline: calc(var(--spacing) * -4);
    margin-top: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-primary);
    border-color: var(--border-divider);
    box-shadow: 0 -8px 12px -8px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 -8px 12px -8px color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
  }
  .form-floating {
    position: relative;
  }
  .form-floating > .form-control, .form-floating > .form-control-soft {
    height: 56px;
    min-height: 56px;
    line-height: 1.25;
    padding: 1.125rem 0.75rem;
  }
  .form-floating > label {
    pointer-events: none;
    position: absolute;
    margin: 0;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    display: block;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 100%;
    padding: 1.125rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--text-form-label-muted, var(--text-secondary));
    background: transparent;
    transform-origin: top left;
    transition: transform var(--duration-normal, 200ms) var(--ease-default, ease), color var(--duration-normal, 200ms) var(--ease-default, ease), opacity var(--duration-normal, 200ms) var(--ease-default, ease);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .form-floating > .form-control:focus, .form-floating > .form-control-soft:focus, .form-floating > .form-control:not(:placeholder-shown), .form-floating > .form-control-soft:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
  }
  .form-floating > .form-control:focus ~ label, .form-floating > .form-control-soft:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-soft:not(:placeholder-shown) ~ label {
    transform: scale(0.78) translateY(-0.5rem);
    color: var(--text-form-label, var(--text-tertiary));
    opacity: 0.9;
  }
  .form-readonly-value {
    display: inline-flex;
    align-items: center;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: 7px;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-radius: var(--radius-lg);
    min-height: 32px;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-input);
    cursor: default;
  }
  .form-readonly-value--block {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
  }
  .form-readonly-value--ghost {
    padding-inline: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .form-comfortable .form-group {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .form-comfortable .controls {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .form-spacious .form-group {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .form-spacious .controls {
    margin-top: calc(var(--spacing) * 2);
  }
  .form-spacious label, .form-spacious .form-label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .form-group:focus-within > label, .form-group-inline:focus-within > label {
    color: var(--text-form-label-strong, var(--text-primary));
  }
  @media (prefers-reduced-motion: reduce) {
    .form-info-btn, [data-copyable] > .copyable__btn, [data-copyable] > .copyable__btn.is-fading, .form-floating > label, .form-floating > .form-control, .form-floating > .form-control-soft {
      transition: none !important;
    }
  }
}
@layer utilities {
  .form-summary {
    display: flex;
    gap: 0.625rem;
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    color: var(--text-danger);
  }
  .form-summary:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .form-summary--success {
    background: none;
    box-shadow: none;
    color: var(--text-success);
  }
  .form-summary__icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    margin-block-start: 0.05em;
  }
  .form-summary__body {
    min-width: 0;
  }
  .form-summary__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-danger);
  }
  .form-summary--success .form-summary__title {
    color: var(--text-success);
  }
  .form-summary__list {
    margin: 0.375rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.8125rem;
  }
  .form-summary__link {
    color: var(--text-danger);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    text-align: start;
    font: inherit;
  }
  .form-summary__link:hover {
    color: var(--text-danger-hover, var(--text-danger));
  }
  .form-summary__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .form-summary.is-entering {
    animation: form-summary-in var(--duration-normal) var(--ease-out);
  }
  @keyframes form-summary-in {
    from {
      opacity: 0;
      transform: translateY(-0.25rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .form-summary.is-entering {
      animation: none;
    }
  }
}
@layer utilities {
  .field-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-block-start: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-tertiary);
  }
  .field-feedback__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.4em;
    font-size: 1em;
    line-height: 1;
  }
  .field-feedback.is-error {
    color: var(--text-danger);
  }
  .field-feedback.is-success {
    color: var(--text-success);
  }
  .field-feedback.is-warning {
    color: var(--text-warning);
  }
  .field-feedback.is-info {
    color: var(--text-info);
  }
  .field-feedback.is-checking {
    color: var(--text-tertiary);
  }
  .field-feedback.is-checking .field-feedback__icon i {
    animation: field-feedback-spin var(--duration-spinner-rotate, 0.7s) linear infinite;
  }
  .field-hint {
    margin-block-start: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .field-count {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    font-variant-numeric: tabular-nums;
    margin-inline-start: auto;
  }
  .field-count.is-near {
    color: var(--text-warning);
  }
  .field-count.is-over {
    color: var(--text-danger);
    font-weight: 600;
  }
  .field-label-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  @keyframes field-feedback-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .field-feedback.is-checking .field-feedback__icon i {
      animation-duration: 1.4s;
    }
  }
}
@layer utilities {
  .input-base {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .form-control::selection, .form-control-soft::selection, .form-control-ghost::selection, .form-control-borderless::selection, .form-control-static::selection {
    background-color: var(--bg-input-selection, var(--utility-blue-200));
    color: var(--text-input-selection, var(--text-primary));
  }
  input::placeholder, textarea::placeholder {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-input-placeholder);
  }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 9999px var(--bg-input) inset !important;
    box-shadow: 0 0 0 9999px var(--bg-input) inset !important;
    -webkit-text-fill-color: var(--text-input) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    caret-color: var(--text-input);
  }
  input:autofill, input:autofill:hover, input:autofill:focus, textarea:autofill, select:autofill {
    background-color: var(--bg-input) !important;
    color: var(--text-input) !important;
    filter: none !important;
    background-image: none !important;
  }
  .form-control {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    color: var(--text-input);
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
  }
  .form-control::placeholder {
    color: var(--text-placeholder);
    opacity: 1;
  }
  .form-control:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-input, var(--shadow-xs));
  }
  .form-control:focus {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .form-control-soft {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    color: var(--text-input);
    background-color: var(--bg-input-soft, var(--utility-neutral-100));
    box-shadow: none;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .form-control-soft:hover {
    background-color: var(--bg-input-soft-hover, var(--utility-neutral-100));
    box-shadow: inset 0 0 0 1px var(--border-input, var(--border-divider));
  }
  .form-control-soft:focus, .form-control-soft:focus-visible {
    background-color: var(--bg-input-soft-active, var(--utility-neutral-50));
    box-shadow: inset 0 0 0 2px var(--border-focus);
    outline: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .form-control-soft {
      transition: none;
    }
  }
  .form-control-ghost {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-input);
    background-color: var(--alpha-0);
  }
  .form-control-ghost:hover {
    background-color: var(--bg-input-ghost-hover, var(--utility-neutral-100));
  }
  .form-control-ghost:focus {
    background-color: var(--bg-input-ghost-active, var(--utility-neutral-50));
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .form-control-borderless {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-input-primary);
    background-color: var(--bg-input-borderless);
  }
  .form-control-borderless:hover {
    background-color: var(--bg-input-borderless-hover);
  }
  .form-control-borderless:focus {
    background-color: var(--bg-input-borderless-active);
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .form-control-static {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--text-input-primary);
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border-input);
  }
  .form-control[readonly], .form-control-soft[readonly], .form-control-ghost[readonly], .form-control-borderless[readonly], .form-control-static[readonly] {
    color: var(--text-input-readonly, var(--text-input-tertiary));
    background-color: var(--bg-input-readonly, var(--utility-neutral-100));
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
  }
  .form-control:disabled, .form-control-soft:disabled, .form-control-ghost:disabled, .form-control-borderless:disabled, .form-control-static:disabled, .form-control[disabled], .form-control-soft[disabled], .form-control-ghost[disabled], .form-control-borderless[disabled], .form-control-static[disabled] {
    color: var(--text-input-disabled);
    background-color: var(--bg-input-disabled);
    box-shadow: inset 0 0 0 1px var(--border-input-disabled);
    cursor: not-allowed;
    opacity: 0.75;
  }
  .form-control[readonly]:focus {
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
    outline: none;
  }
  .form-control-soft[readonly]:focus, .form-control-ghost[readonly]:focus, .form-control-borderless[readonly]:focus, .form-control-static[readonly]:focus {
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
    outline: none;
  }
  input[type="date"].form-control, input[type="date"].form-control-soft, input[type="date"].form-control-ghost, input[type="date"].form-control-borderless, input[type="date"].form-control-static, input[type="datetime-local"].form-control, input[type="datetime-local"].form-control-soft, input[type="datetime-local"].form-control-ghost, input[type="datetime-local"].form-control-borderless, input[type="datetime-local"].form-control-static, input[type="time"].form-control, input[type="time"].form-control-soft, input[type="time"].form-control-ghost, input[type="time"].form-control-borderless, input[type="time"].form-control-static {
    color: var(--text-input);
  }
  input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {
    color: var(--text-tertiary);
    opacity: 0.7;
    cursor: pointer;
  }
  input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }
  select.form-control, select.form-control-soft, select.form-control-ghost, select.form-control-borderless, select.form-control-static {
    cursor: pointer;
    background-color: var(--bg-input-select);
  }
  select.form-control-soft {
    cursor: pointer;
    background-color: var(--bg-input-soft, var(--utility-neutral-100));
  }
  select:invalid {
    color: var(--text-input-placeholder);
  }
  select option[disabled][selected] {
    color: var(--text-input-placeholder);
  }
  select option {
    color: var(--text-input-primary);
  }
  textarea.form-control, textarea.form-control-soft, textarea.form-control-ghost, textarea.form-control-borderless, textarea.form-control-static {
    resize: vertical;
  }
  textarea.form-control {
    background-color: var(--bg-input);
  }
  .form-control-inline {
    min-height: calc(var(--spacing) * 7);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .form-control-mono {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  input[type="search"].form-control::-webkit-search-cancel-button, input[type="search"].form-control-soft::-webkit-search-cancel-button, input[type="search"].form-control-ghost::-webkit-search-cancel-button, input[type="search"].form-control-borderless::-webkit-search-cancel-button, input[type="search"].form-control::-webkit-search-decoration, input[type="search"].form-control-soft::-webkit-search-decoration, input[type="search"].form-control-ghost::-webkit-search-decoration, input[type="search"].form-control-borderless::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }
  .is-error, [aria-invalid="true"].form-control, [aria-invalid="true"].form-control-soft, [aria-invalid="true"].form-control-ghost, [aria-invalid="true"].form-control-borderless {
    box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-input, var(--shadow-xs));
  }
  .is-error:hover, [aria-invalid="true"].form-control:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-input, var(--shadow-xs));
  }
  .is-error:focus, [aria-invalid="true"].form-control:focus, [aria-invalid="true"].form-control-soft:focus, [aria-invalid="true"].form-control-ghost:focus, [aria-invalid="true"].form-control-borderless:focus {
    box-shadow: inset 0 0 0 2px var(--border-input-error-focus), var(--shadow-input, var(--shadow-xs));
  }
  .is-success {
    box-shadow: inset 0 0 0 1px var(--border-input-success), var(--shadow-input, var(--shadow-xs));
  }
  .is-success:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-success), var(--shadow-input, var(--shadow-xs));
  }
  .is-success:focus {
    box-shadow: inset 0 0 0 2px var(--border-input-success-focus), var(--shadow-input, var(--shadow-xs));
  }
  .is-warning {
    box-shadow: inset 0 0 0 1px var(--border-input-warning, var(--border-input-hover)), var(--shadow-input, var(--shadow-xs));
  }
  .is-warning:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-warning, var(--border-input-hover)), var(--shadow-input, var(--shadow-xs));
  }
  .is-warning:focus {
    box-shadow: inset 0 0 0 2px var(--border-input-warning-focus, var(--border-warning)), var(--shadow-input, var(--shadow-xs));
  }
  .is-info {
    box-shadow: inset 0 0 0 1px var(--border-input-info, var(--border-input-hover)), var(--shadow-input, var(--shadow-xs));
  }
  .is-info:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-info, var(--border-input-hover)), var(--shadow-input, var(--shadow-xs));
  }
  .is-info:focus {
    box-shadow: inset 0 0 0 2px var(--border-input-info-focus, var(--border-info)), var(--shadow-input, var(--shadow-xs));
  }
  .input-addon, .input-group-text {
    display: inline-flex;
    min-height: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    color: var(--text-input-tertiary);
    background-color: var(--bg-input-addon, var(--utility-neutral-100));
    box-shadow: inset 0 0 0 1px var(--border-input-addon, var(--border-input)), var(--shadow-input, var(--shadow-xs));
  }
  .input-addon-xs, .input-group-text-xs {
    min-height: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .input-addon-sm, .input-group-text-sm {
    min-height: calc(var(--spacing) * 7);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .input-addon-lg, .input-group-text-lg {
    min-height: calc(var(--spacing) * 10);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .input-group {
    position: relative;
    display: inline-flex;
    width: 100%;
    border-radius: var(--radius-md);
    background-color: var(--bg-input);
    box-shadow: var(--shadow-input, var(--shadow-xs));
  }
  .input-group::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--border-input);
    z-index: 3;
  }
  .input-group:hover::after {
    box-shadow: inset 0 0 0 1px var(--border-input-hover);
  }
  .input-group:focus-within::after {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .input-group > * {
    margin-left: -1px;
    position: relative;
    z-index: 0;
  }
  .input-group > :first-child {
    margin-left: 0;
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .input-group > :last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .input-group > :not(:first-child):not(:last-child) {
    border-radius: var(--radius-none);
  }
  .input-group > *:hover, .input-group > *:focus-within {
    z-index: 1;
  }
  .input-group :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, .input-addon, .input-group-text, .btn-primary, .btn-secondary, .btn-soft, .btn-ghost, .btn-danger, .btn-danger-outline, .btn-glass, .btn-icon ) {
    border-radius: var(--radius-none);
  }
  .input-group > :first-child, .input-group > :first-child :is( .form-control,.form-control-soft,.form-control-ghost,.form-control-borderless,.form-control-static, .btn-primary,.btn-secondary,.btn-soft,.btn-ghost,.btn-danger,.btn-danger-outline,.btn-glass,.btn-icon ), .input-group > :first-child :is(.input-addon,.input-group-text) {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .input-group > :last-child, .input-group > :last-child :is( .form-control,.form-control-soft,.form-control-ghost,.form-control-borderless,.form-control-static, .btn-primary,.btn-secondary,.btn-soft,.btn-ghost,.btn-danger,.btn-danger-outline,.btn-glass,.btn-icon ), .input-group > :last-child :is(.input-addon,.input-group-text) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .input-group.input-group-compact :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static ) {
    min-height: calc(var(--spacing) * 7);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .input-group.input-group-compact :is(.input-addon,.input-group-text) {
    min-height: calc(var(--spacing) * 7);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .input-group.input-group-equal > * {
    flex: 1;
  }
  .input-group.input-group-equal > :is(.input-addon,.input-group-text) {
    flex: none;
  }
  .input-group > i[class*="fa-"], .input-group > svg {
    flex: 0 0 auto;
    align-self: center;
    display: inline-grid;
    place-items: center;
    padding-inline: 0.625rem 0.25rem;
    font-size: 0.9375rem;
    line-height: 1;
    color: var(--text-search-icon, var(--text-quaternary));
    pointer-events: none;
  }
  .input-group > svg {
    box-sizing: content-box;
    width: 1.125rem;
    height: 1.125rem;
  }
  .input-group-sm > i[class*="fa-"], .input-group-sm > svg {
    padding-inline: 0.5rem 0.125rem;
    font-size: 0.875rem;
  }
  .input-group :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static ), .input-group :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static ):hover, .input-group :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static ):focus {
    box-shadow: none;
  }
  .input-group > :first-child, .input-group > :first-child:hover, .input-group > :first-child:focus, .input-group > :first-child:focus-within {
    box-shadow: none;
  }
  .input-group > *:not(:first-child), .input-group > *:not(:first-child):hover, .input-group > *:not(:first-child):focus, .input-group > *:not(:first-child):focus-within {
    box-shadow: inset 1px 0 0 0 var(--border-input);
  }
  .input-group, .input-group-wrap, .input-group-stack {
    --bg-input-group-item-hover: var(--bg-input-group-hover, var(--bg-input-soft-hover, var(--bg-primary-subtle)));
    --bg-input-group-item-focus: var(--bg-input-group-focus, var(--bg-input-soft-active, var(--bg-primary-hover)));
  }
  .input-group :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control, select.form-control-soft, select.form-control-ghost, select.form-control-borderless, select.form-control-static, textarea.form-control, textarea.form-control-soft, textarea.form-control-ghost, textarea.form-control-borderless, textarea.form-control-static ):hover {
    background-color: var(--bg-input-group-item-hover);
  }
  .input-group :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control, select.form-control-soft, select.form-control-ghost, select.form-control-borderless, select.form-control-static, textarea.form-control, textarea.form-control-soft, textarea.form-control-ghost, textarea.form-control-borderless, textarea.form-control-static ):focus {
    background-color: var(--bg-input-group-item-focus);
  }
  .input-group-wrap :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control, select.form-control-soft, select.form-control-ghost, select.form-control-borderless, select.form-control-static, textarea.form-control, textarea.form-control-soft, textarea.form-control-ghost, textarea.form-control-borderless, textarea.form-control-static ):hover {
    background-color: var(--bg-input-group-item-hover);
  }
  .input-group-wrap :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control, select.form-control-soft, select.form-control-ghost, select.form-control-borderless, select.form-control-static, textarea.form-control, textarea.form-control-soft, textarea.form-control-ghost, textarea.form-control-borderless, textarea.form-control-static ):focus {
    background-color: var(--bg-input-group-item-focus);
  }
  .input-group-stack :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control, select.form-control-soft, select.form-control-ghost, select.form-control-borderless, select.form-control-static, textarea.form-control, textarea.form-control-soft, textarea.form-control-ghost, textarea.form-control-borderless, textarea.form-control-static ):hover {
    background-color: var(--bg-input-group-item-hover);
  }
  .input-group-stack :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, select.form-control, select.form-control-soft, select.form-control-ghost, select.form-control-borderless, select.form-control-static, textarea.form-control, textarea.form-control-soft, textarea.form-control-ghost, textarea.form-control-borderless, textarea.form-control-static ):focus {
    background-color: var(--bg-input-group-item-focus);
  }
  .input-group-wrap {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
  }
  .input-group-wrap:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-input, var(--shadow-xs));
  }
  .input-group-wrap:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .input-group-wrap .form-control, .input-group-wrap .form-control-soft, .input-group-wrap .form-control-ghost, .input-group-wrap .form-control-borderless, .input-group-wrap .form-control-static {
    min-width: 120px;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: 0;
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    min-height: unset;
    background-color: var(--alpha-0);
  }
  .input-group-stack {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--bg-input);
    box-shadow: var(--shadow-input, var(--shadow-xs));
    border: 0;
  }
  .input-group-stack::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--border-input-stack);
    z-index: 1;
  }
  .input-group-stack:hover::after {
    box-shadow: inset 0 0 0 1px var(--border-input-stack-hover);
  }
  .input-group-stack:focus-within::after, .input-group-stack:has(.combobox.is-focused)::after {
    box-shadow: inset 0 0 0 2px var(--border-input-stack-active);
  }
  .input-group-stack > * {
    width: 100%;
  }
  .input-group-stack .input-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
  }
  .input-row.input-row-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .input-row.input-row-grid > * {
    min-width: 0;
  }
  .input-group-stack :is( .form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static, .input-addon, .input-group-text, .btn-primary, .btn-secondary, .btn-soft, .btn-ghost, .btn-danger, .btn-danger-outline, .btn-glass, .btn-icon ) {
    border-radius: var(--radius-none);
    border-style: var(--tw-border-style);
    border-width: 0px;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--alpha-0);
  }
  .input-group-stack .input-row + .input-row {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-input-stack-divider);
  }
  .input-group-stack .input-row > * + * {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--border-input-stack-divider);
  }
  .input-first {
    border-top-left-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
  }
  .input-first-full {
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
  }
  .input-last {
    border-top-right-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
  }
  .input-last-full {
    border-bottom-right-radius: var(--radius-md) !important;
    border-bottom-left-radius: var(--radius-md) !important;
  }
  .input-start-first {
    border-top-left-radius: var(--radius-md) !important;
  }
  .input-start-last {
    border-top-right-radius: var(--radius-md) !important;
  }
  .input-end-first {
    border-bottom-left-radius: var(--radius-md) !important;
  }
  .input-end-last {
    border-bottom-right-radius: var(--radius-md) !important;
  }
  .controls, .input-row {
    position: relative;
  }
  .input-clear {
    position: absolute;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    right: 6px;
    top: calc(var(--control-h-sm) / 2);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 1;
    color: var(--text-tertiary);
    opacity: 0;
    pointer-events: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 9999px;
    z-index: 2;
    transition: opacity var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease, background-color var(--duration-fast, 100ms) ease;
  }
  .input-clear > i, .input-clear > svg {
    line-height: 1;
    display: block;
  }
  :is(.controls, .input-row):has(:is(.form-control-xs, select.form-control-xs, textarea.form-control-xs)) > .input-clear {
    right: 5px;
    top: calc(var(--control-h-xs) / 2);
    width: 12px;
    height: 12px;
    font-size: 8px;
  }
  :is(.controls, .input-row):has(:is(.form-control-sm, select.form-control-sm, textarea.form-control-sm)) > .input-clear {
    right: 6px;
    top: calc(var(--control-h-sm) / 2);
    width: 14px;
    height: 14px;
    font-size: 9px;
  }
  :is(.controls, .input-row):has(:is(.form-control-md, select.form-control-md, textarea.form-control-md)) > .input-clear {
    top: calc(var(--control-h-md) / 2);
  }
  :is(.controls, .input-row):has(:is(.form-control-lg, select.form-control-lg, textarea.form-control-lg)) > .input-clear {
    right: 8px;
    top: calc(var(--control-h-lg) / 2);
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  :is(.controls, .input-row):has(:is(.form-control-xl, select.form-control-xl, textarea.form-control-xl)) > .input-clear {
    right: 8px;
    top: calc(var(--control-h-xl) / 2);
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  :is(.controls, .input-row).has-clear-value > .input-clear {
    opacity: 0.55;
    pointer-events: auto;
  }
  .input-clear:hover {
    opacity: 1;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .input-clear:active {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
  }
  .input-clear:focus-visible {
    opacity: 1;
    outline: 2px solid var(--text-info);
    outline-offset: 1px;
  }
  @media (pointer: coarse) {
    .input-clear::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
  }
  .table td.controls > .input-clear {
    right: 6px;
  }
  .table tr > td.controls:last-child > .input-clear {
    right: 20px;
  }
  .input-affix {
    position: relative;
    display: inline-flex;
    width: 100%;
  }
  .input-affix__icon, .input-affix__btn {
    pointer-events: none;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-input-placeholder, var(--text-tertiary));
    font-size: 11px;
    z-index: 1;
    left: 8px;
    width: 14px;
    height: 14px;
  }
  .input-affix--end .input-affix__icon, .input-affix__icon--end, .input-affix__btn--end {
    left: auto;
    right: 10px;
  }
  .input-affix__btn {
    cursor: pointer;
    pointer-events: auto;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 4px;
    transition: color 100ms ease, background-color 100ms ease;
  }
  .input-affix__btn:hover {
    color: var(--text-input);
    background-color: var(--bg-input-soft-hover, var(--utility-neutral-100));
  }
  @media (pointer: coarse) {
    .input-affix__btn::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
  }
  .input-affix > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static) {
    padding-left: 26px;
  }
  .input-affix--end > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static), .input-affix:has(.input-affix__icon--end, .input-affix__btn--end) > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static) {
    padding-right: 26px;
  }
  .input-affix:has(.form-control-md) :is(.input-affix__icon, .input-affix__btn) {
    left: 10px;
    width: 16px;
    height: 16px;
    font-size: 12px;
  }
  .input-affix:has(.form-control-md) > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static) {
    padding-left: 32px;
  }
  .input-affix--end:has(.form-control-md) > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static), .input-affix:has(.form-control-md):has(.input-affix__icon--end, .input-affix__btn--end) > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static) {
    padding-right: 32px;
  }
  .input-affix:has(.form-control-xs) :is(.input-affix__icon, .input-affix__btn) {
    left: 6px;
    width: 12px;
    height: 12px;
    font-size: 10px;
  }
  .input-affix:has(.form-control-xs) > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static) {
    padding-left: 22px;
  }
  .input-affix:has(.form-control-sm) :is(.input-affix__icon, .input-affix__btn) {
    left: 8px;
    width: 14px;
    height: 14px;
    font-size: 11px;
  }
  .input-affix:has(.form-control-sm) > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static) {
    padding-left: 26px;
  }
  .input-affix:has(.form-control-lg) :is(.input-affix__icon, .input-affix__btn) {
    left: 12px;
    width: 18px;
    height: 18px;
    font-size: 14px;
  }
  .input-affix:has(.form-control-lg) > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static) {
    padding-left: 38px;
  }
  .form-control.is-ringed:focus, .form-control-soft.is-ringed:focus, .form-control-ghost.is-ringed:focus, .form-control-borderless.is-ringed:focus, .form-control-static.is-ringed:focus {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--ring-focus);
  }
  .form-control.is-ringed.is-success:focus, .form-control-soft.is-ringed.is-success:focus, .form-control-ghost.is-ringed.is-success:focus, .form-control-borderless.is-ringed.is-success:focus {
    box-shadow: inset 0 0 0 2px var(--border-input-success-focus), 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--border-input-success-focus);
  }
  .input-stepper {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--radius-md);
    --stepper-ring: 2px;
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
    background-color: var(--bg-input);
    overflow: hidden;
    padding: var(--stepper-ring);
  }
  .input-stepper:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-input, var(--shadow-xs));
  }
  .input-stepper:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .input-stepper > input {
    width: 100%;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    text-align: center;
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    min-width: 56px;
    padding: 0 6px;
    color: var(--text-input);
    -moz-appearance: textfield;
  }
  .input-stepper > input::-webkit-outer-spin-button, .input-stepper > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .input-stepper__btn {
    display: inline-flex;
    flex: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
    width: 28px;
    background-color: transparent;
    border: 0;
    color: var(--text-input);
    font-size: 14px;
    line-height: 1;
    transition: background-color 100ms ease, color 100ms ease;
  }
  .input-stepper__btn:hover {
    background-color: var(--bg-input-soft-hover, var(--utility-neutral-100));
  }
  .input-stepper__btn:disabled, .input-stepper__btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .input-stepper > .input-stepper__btn:first-child {
    border-top-left-radius: calc(var(--radius-md, 0.375rem) - var(--stepper-ring));
    border-bottom-left-radius: calc(var(--radius-md, 0.375rem) - var(--stepper-ring));
  }
  .input-stepper > .input-stepper__btn:last-child {
    border-top-right-radius: calc(var(--radius-md, 0.375rem) - var(--stepper-ring));
    border-bottom-right-radius: calc(var(--radius-md, 0.375rem) - var(--stepper-ring));
  }
  .input-stepper.input-stepper-sm > input {
    min-width: 44px;
    padding: 2px 4px;
    font-size: 12px;
  }
  .input-stepper.input-stepper-sm .input-stepper__btn {
    width: 24px;
    font-size: 12px;
  }
  .input-stepper.input-stepper-lg > input {
    min-width: 72px;
    padding: 6px 8px;
    font-size: 15px;
  }
  .input-stepper.input-stepper-lg .input-stepper__btn {
    width: 36px;
    font-size: 16px;
  }
  .input-numeric {
    position: relative;
    display: inline-flex;
    width: 100%;
  }
  .input-numeric > :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 30px;
  }
  .input-numeric__steppers {
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 20px;
    height: calc(100% - 6px);
    max-height: 30px;
    gap: 1px;
    opacity: 0.65;
    pointer-events: auto;
    transition: opacity 100ms ease;
  }
  .input-numeric:hover .input-numeric__steppers, .input-numeric:focus-within .input-numeric__steppers {
    opacity: 1;
    pointer-events: auto;
  }
  .input-numeric__step {
    display: inline-flex;
    flex: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 3px;
    padding: 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    transition: background-color 75ms ease, color 75ms ease;
  }
  .input-numeric__step:hover {
    background-color: var(--bg-input-soft-hover, var(--utility-neutral-100));
    color: var(--text-primary);
  }
  .input-numeric__step:active {
    background-color: var(--bg-input-soft-active, var(--utility-neutral-50));
  }
  .input-numeric input[type="number"]::-webkit-outer-spin-button, .input-numeric input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .input-numeric input[type="number"] {
    -moz-appearance: textfield;
  }
  :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static)[type="number"]::-webkit-outer-spin-button, :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static)[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  :is(.form-control, .form-control-soft, .form-control-ghost, .form-control-borderless, .form-control-static)[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .table td.controls .input-numeric > :is(.form-control, .form-control-ghost, .form-control-soft) {
    padding-right: 22px;
  }
  .table td.controls .input-numeric__steppers {
    right: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .input-numeric__steppers {
      transition: none;
    }
  }
  select.form-control, select.form-control-soft, select.form-control-ghost, select.form-control-borderless, select.form-control-static {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 24px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
    background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 8px) calc(50% - 2px);
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
  }
  select.form-control:focus, select.form-control-soft:focus, select.form-control-ghost:focus, select.form-control-borderless:focus, select.form-control-static:focus {
    background-image: linear-gradient(45deg, var(--text-primary) 50%, transparent 50%), linear-gradient(135deg, transparent 50%, var(--text-primary) 50%);
    background-position: calc(100% - 8px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  }
  .input-otp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .input-otp__cell {
    border-radius: var(--radius-md);
    text-align: center;
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    width: 40px;
    height: 44px;
    font-size: 18px;
    color: var(--text-input);
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-input, var(--shadow-xs));
    transition: box-shadow 100ms ease, background-color 75ms ease;
  }
  .input-otp__cell:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-input, var(--shadow-xs));
  }
  .input-otp__cell:focus {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .input-otp__cell:not(:placeholder-shown) {
    background-color: var(--bg-input-soft-active, var(--utility-neutral-50));
  }
  .input-otp__separator {
    -webkit-user-select: none;
    user-select: none;
    font-size: 18px;
    color: var(--text-tertiary);
  }
  .input-otp.input-otp-sm .input-otp__cell {
    width: 32px;
    height: 36px;
    font-size: 15px;
  }
  .input-otp.input-otp-lg .input-otp__cell {
    width: 48px;
    height: 52px;
    font-size: 22px;
  }
  .input-file {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--border-input);
    background-color: var(--bg-input);
    transition: border-color 100ms ease, background-color 100ms ease;
  }
  .input-file:hover {
    border-color: var(--border-focus);
    background-color: var(--bg-input-soft-hover, var(--utility-neutral-100));
  }
  .input-file.is-dragover {
    border-color: var(--border-focus);
    background-color: var(--bg-input-soft-active, var(--utility-neutral-50));
  }
  .input-file > input[type="file"] {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0%;
  }
  .input-file__inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-input);
    pointer-events: none;
  }
  .input-file__icon {
    font-size: 22px;
    color: var(--text-tertiary);
  }
  .input-file__hint {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .input-file--button {
    display: inline-flex;
    --tw-border-style: solid;
    border-style: solid;
  }
  .input-file--button .input-file__inner {
    flex-direction: row;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .input-file--button .input-file__icon {
    font-size: 13px;
  }
}
@layer utilities;
@layer components {
  @keyframes step-pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.18);
      opacity: 0.55;
    }
  }
  @keyframes wizard-slide-in {
    from {
      transform: translateX(8px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes wizard-slide-in-back {
    from {
      transform: translateX(-8px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}
@layer utilities {
  .combobox {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  .controls .combobox, .form-group-inline .combobox {
    display: block;
  }
  .combobox__input {
    display: block;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    padding-right: 2rem;
    color: var(--text-combobox, var(--text-input));
    background-color: var(--bg-combobox, var(--bg-input));
    box-shadow: inset 0 0 0 1px var(--border-combobox, var(--border-input)), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__input::placeholder {
    color: var(--text-combobox-placeholder, var(--text-input-placeholder));
  }
  .combobox__input:hover {
    box-shadow: inset 0 0 0 1px var(--border-combobox-hover, var(--border-input-hover)), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__input:focus, .combobox.is-focused .combobox__input {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__control {
    display: block;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    min-width: 0;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-wrap: nowrap;
    padding-right: 0.25rem;
    color: var(--text-combobox, var(--text-input));
    background-color: var(--bg-combobox, var(--bg-input));
    box-shadow: inset 0 0 0 1px var(--border-combobox, var(--border-input)), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__control:hover {
    box-shadow: inset 0 0 0 1px var(--border-combobox-hover, var(--border-input-hover)), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__control:focus, .combobox__control:focus-visible, .combobox.is-focused .combobox__control {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
    outline: none;
  }
  .combobox__value {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-combobox, var(--text-input));
  }
  .combobox__value:empty {
    display: none;
  }
  .combobox__placeholder {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-combobox-placeholder, var(--text-input-placeholder));
  }
  .combobox__control:has(.combobox__value:not(:empty)) .combobox__placeholder {
    display: none;
  }
  .combobox--select .combobox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .combobox__trigger {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 2);
    color: var(--text-tertiary);
    transition: transform var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .combobox__control .combobox__trigger {
    position: static;
    flex: none;
    padding-inline: var(--spacing);
    width: 18px;
    font-size: 11px;
  }
  .combobox--sm .combobox__control .combobox__trigger {
    width: 16px;
    font-size: 10px;
  }
  .combobox--xs .combobox__control .combobox__trigger {
    width: 14px;
    font-size: 9px;
  }
  .combobox.is-open .combobox__trigger {
    transform: rotate(180deg);
  }
  .combobox__clear {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    right: 28px;
    top: calc(var(--control-h-sm) / 2);
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    font-size: 10px;
    color: var(--text-tertiary);
    opacity: 0;
    pointer-events: none;
    border: none;
    background: none;
    padding: 0;
    border-radius: 50%;
    z-index: 1;
    transition: opacity var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease;
  }
  .combobox--xs > .combobox__clear {
    top: calc(var(--control-h-xs) / 2);
  }
  .combobox--sm > .combobox__clear {
    top: calc(var(--control-h-sm) / 2);
  }
  .combobox--md > .combobox__clear {
    top: calc(var(--control-h-md) / 2);
  }
  .combobox--lg > .combobox__clear {
    top: calc(var(--control-h-lg) / 2);
  }
  .combobox__control > .combobox__clear {
    position: static;
    flex-shrink: 0;
    height: auto;
    transform: none;
  }
  @media (pointer: coarse) {
    .combobox__clear::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
    .combobox__control > .combobox__clear {
      position: relative;
    }
  }
  .combobox.has-value.is-focused .combobox__clear, .combobox.has-value.is-open .combobox__clear {
    opacity: 0.5;
    pointer-events: auto;
  }
  .combobox__clear:hover {
    opacity: 1;
    color: var(--text-primary);
  }
  .combobox__panel {
    position: absolute;
    right: 0;
    left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    max-height: 320px;
    background-color: var(--bg-dropdown);
    border-color: var(--border-combobox, var(--border-dropdown));
    box-shadow: var(--shadow-combobox-listbox, var(--shadow-dropdown));
    z-index: var(--z-popover, 60);
    display: none;
  }
  .combobox.is-open .combobox__panel {
    display: flex;
    animation: combobox-panel-in var(--duration-fast, 120ms) var(--ease-out, ease-out);
  }
  @keyframes combobox-panel-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .combobox__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='1'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: var(--opacity-combobox-grain, 0);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .combobox__panel > * {
    position: relative;
    z-index: 1;
  }
  .combobox__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding: calc(var(--spacing) * 1.5);
    background-color: var(--bg-combobox-header, var(--bg-dropdown));
    border-color: var(--border-combobox-header, var(--border-dropdown-divider));
    position: relative;
    z-index: 2;
  }
  .combobox__search-wrap {
    position: relative;
    min-width: 0;
    flex: 1;
  }
  .combobox__search {
    display: block;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
    min-height: calc(var(--spacing) * 7);
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    padding-right: calc(var(--spacing) * 7);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    color: var(--text-combobox, var(--text-input));
    background-color: var(--bg-combobox-search, var(--bg-input));
    box-shadow: inset 0 0 0 1px var(--border-combobox, var(--border-input)), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__search:focus {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__search::placeholder {
    color: var(--text-combobox-placeholder, var(--text-input-placeholder));
  }
  .combobox__search-clear {
    position: absolute;
    top: calc(1 / 2 * 100%);
    right: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    color: var(--text-tertiary);
    opacity: 0;
    pointer-events: none;
    border-radius: 50%;
    transition: opacity var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease;
  }
  .combobox__search-wrap.has-search-value .combobox__search-clear {
    opacity: 0.6;
    pointer-events: auto;
  }
  .combobox__search-clear:hover {
    opacity: 1;
    color: var(--text-primary);
  }
  .combobox__add-new {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    width: 26px;
    height: 26px;
    font-size: 11px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-combobox, var(--border-input));
    transition: color var(--duration-fast, 100ms) ease, background-color var(--duration-fast, 100ms) ease;
  }
  .combobox__add-new:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover, var(--bg-surface-hover));
  }
  .combobox__panel .combobox__listbox {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing);
    scrollbar-width: thin;
  }
  .combobox:not(:has(.combobox__panel)) .combobox__listbox {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: var(--spacing);
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: var(--spacing);
    max-height: 240px;
    background-color: var(--bg-dropdown);
    border-color: var(--border-combobox, var(--border-dropdown));
    box-shadow: var(--shadow-combobox-listbox, var(--shadow-dropdown));
    z-index: var(--z-dropdown, 10);
    display: none;
  }
  .combobox:not(:has(.combobox__panel)).is-open .combobox__listbox {
    display: block;
  }
  .combobox__footer {
    flex: none;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-combobox-footer, var(--bg-dropdown));
    border-color: var(--border-combobox-footer, var(--border-dropdown-divider));
    color: var(--text-tertiary);
  }
  .combobox__option {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    -webkit-user-select: none;
    user-select: none;
    min-height: var(--control-h-sm, 2rem);
    font-size: var(--control-fs-sm, 0.8125rem);
    line-height: var(--control-line-sm, 1.25rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-combobox-option, var(--text-primary));
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .combobox__option:hover, .combobox__option--active {
    background-color: var(--bg-combobox-option-hover, var(--bg-dropdown-hover));
  }
  .combobox__option--selected {
    background-color: var(--bg-combobox-option-selected, var(--bg-dropdown-selected));
    color: var(--text-combobox-option-selected, var(--text-dropdown-selected));
    font-weight: 500;
  }
  .combobox__option--disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 50%;
  }
  .combobox__option-icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .combobox__option-content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .combobox__option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .combobox__option-meta {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    color: var(--text-combobox-option-meta, var(--text-tertiary));
  }
  .combobox__option-avatar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    background-color: var(--bg-combobox-option-avatar, var(--bg-badge));
    color: var(--text-combobox-option-avatar, var(--text-badge));
  }
  .combobox__option .avatar {
    flex-shrink: 0;
    box-shadow: none;
  }
  .combobox__option-check {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 0%;
    color: var(--border-focus);
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .combobox__option--selected .combobox__option-check {
    opacity: 1;
  }
  .combobox--checkbox .combobox__option-check {
    margin-right: var(--spacing);
    margin-left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    opacity: 100%;
    border-color: var(--border-checkbox);
    background-color: var(--bg-checkbox);
    order: -1;
    font-size: 9px;
    color: white;
  }
  .combobox--checkbox .combobox__option--selected .combobox__option-check {
    background-color: var(--bg-checkbox-checked);
    border-color: var(--border-checkbox-checked);
  }
  .combobox__option--selected:not(:has(.combobox__option-check))::after {
    content: "\f00c";
    font-family: "Font Awesome 7 Pro";
    font-weight: 300;
    margin-left: auto;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--border-focus);
  }
  .combobox__group {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-tertiary);
  }
  .combobox__divider {
    margin-inline: var(--spacing);
    margin-block: var(--spacing);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-combobox-header, var(--border-dropdown-divider));
  }
  .combobox__empty {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .combobox__loading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .combobox__loading .combobox__spinner {
    animation: var(--animate-spin);
    width: 14px;
    height: 14px;
  }
  .combobox__chips {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    background-color: var(--bg-combobox, var(--bg-input));
    box-shadow: inset 0 0 0 1px var(--border-combobox, var(--border-input)), var(--shadow-input, var(--shadow-xs));
    min-height: 34px;
  }
  .combobox__chips:hover {
    box-shadow: inset 0 0 0 1px var(--border-combobox-hover, var(--border-input-hover)), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__chips:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-input, var(--shadow-xs));
  }
  .combobox__chips .combobox__input {
    min-width: 80px;
    flex: 1;
    border-radius: var(--radius-none);
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: 0;
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    min-height: unset;
    background-color: var(--alpha-0);
  }
  .combobox__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    background-color: var(--bg-tag-neutral);
    border: 1px solid var(--border-tag-neutral);
    color: var(--text-tag-neutral);
    max-width: 200px;
  }
  .combobox__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .combobox__chip-dismiss {
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-size: 10px;
    opacity: 0.5;
    transition: opacity var(--duration-fast, 100ms) ease;
  }
  .combobox__chip-dismiss:hover {
    opacity: 1;
  }
  .combobox--select .combobox__control:has(.combobox__chip) {
    height: auto;
    flex-wrap: wrap;
    gap: var(--spacing);
    min-height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .combobox.is-disabled {
    pointer-events: none;
  }
  .combobox.is-disabled .combobox__input, .combobox.is-disabled .combobox__control, .combobox.is-disabled .combobox__chips {
    color: var(--text-input-disabled);
    background-color: var(--bg-input-disabled);
    box-shadow: inset 0 0 0 1px var(--border-input-disabled);
    cursor: not-allowed;
    opacity: 0.6;
  }
  .combobox.is-error .combobox__input, .combobox.is-error .combobox__control, .combobox.is-error .combobox__chips {
    box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .combobox.is-error .combobox__input:focus, .combobox.is-error .combobox__control:focus, .combobox.is-error .combobox__chips:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-input-error-focus), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .combobox:has(.input-validation-error) .combobox__input, .combobox:has(.input-validation-error) .combobox__control, .combobox:has(.input-validation-error) .combobox__chips {
    box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .combobox:has(.input-validation-error) .combobox__input:focus, .combobox:has(.input-validation-error) .combobox__control:focus, .combobox:has(.input-validation-error) .combobox__chips:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-input-error-focus), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .combobox.is-readonly .combobox__control {
    background-color: var(--bg-input-readonly);
    color: var(--text-input-readonly);
    cursor: default;
  }
  .combobox--xs .combobox__input {
    --ctl-h: var(--control-h-xs);
    --ctl-line: var(--control-line-xs);
    --ctl-fs: var(--control-fs-xs);
    --ctl-px: calc(var(--spacing) * 2.5);
  }
  .combobox--xs .combobox__control {
    --ctl-h: var(--control-h-xs);
    --ctl-line: var(--control-line-xs);
    --ctl-fs: var(--control-fs-xs);
    --ctl-px: calc(var(--spacing) * 2.5);
  }
  .combobox--xs .combobox__chips {
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    min-height: 24px;
  }
  .combobox--xs .combobox__option {
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .combobox--sm .combobox__input {
    --ctl-h: var(--control-h-sm);
    --ctl-line: var(--control-line-sm);
    --ctl-fs: var(--control-fs-sm);
    --ctl-px: calc(var(--spacing) * 3);
  }
  .combobox--sm .combobox__control {
    --ctl-h: var(--control-h-sm);
    --ctl-line: var(--control-line-sm);
    --ctl-fs: var(--control-fs-sm);
    --ctl-px: calc(var(--spacing) * 3);
  }
  .combobox--sm .combobox__chips {
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: var(--spacing);
    min-height: 28px;
  }
  .combobox--sm .combobox__option {
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .combobox--md .combobox__input {
    --ctl-h: var(--control-h-md);
    --ctl-line: var(--control-line-md);
    --ctl-fs: var(--control-fs-md);
    --ctl-px: calc(var(--spacing) * 3);
  }
  .combobox--md .combobox__control {
    --ctl-h: var(--control-h-md);
    --ctl-line: var(--control-line-md);
    --ctl-fs: var(--control-fs-md);
    --ctl-px: calc(var(--spacing) * 3);
  }
  .combobox--md .combobox__chips {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    min-height: 36px;
  }
  .combobox--md .combobox__option {
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .combobox--lg .combobox__input {
    --ctl-h: var(--control-h-lg);
    --ctl-line: var(--control-line-lg);
    --ctl-fs: var(--control-fs-lg);
    --ctl-px: calc(var(--spacing) * 3.5);
  }
  .combobox--lg .combobox__control {
    --ctl-h: var(--control-h-lg);
    --ctl-line: var(--control-line-lg);
    --ctl-fs: var(--control-fs-lg);
    --ctl-px: calc(var(--spacing) * 3.5);
  }
  .combobox--lg .combobox__chips {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    min-height: 40px;
  }
  .combobox--lg .combobox__option {
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox {
    position: static;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox .combobox__trigger {
    position: static;
    flex: none;
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox:not(.combobox--select) .combobox__trigger {
    padding-inline: calc(var(--spacing) * 2);
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox--select .combobox__control .combobox__trigger {
    width: 18px;
    font-size: 11px;
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox--sm .combobox__control .combobox__trigger {
    width: 16px;
    font-size: 10px;
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox:not(.combobox--select) {
    position: relative;
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox:not(.combobox--select) .combobox__control {
    padding-right: 0;
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox--select .combobox__control {
    padding-right: 0.25rem;
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) :is(.combobox__control, .combobox__input, .combobox__chips) {
    border-radius: var(--radius-none);
    border-style: var(--tw-border-style);
    border-width: 0px;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--alpha-0);
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) :is(.combobox__control, .combobox__input):hover {
    background-color: var(--bg-input-group-item-hover);
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) :is(.combobox__control, .combobox__input):focus, :is(.input-group-stack, .input-group, .input-group-wrap) .combobox.is-focused :is(.combobox__control, .combobox__input) {
    background-color: var(--bg-input-group-item-focus);
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox .form-control {
    min-width: 0;
    flex: 1;
    border-radius: var(--radius-none);
    border-style: var(--tw-border-style);
    border-width: 0px;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--alpha-0);
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox .form-control:hover {
    background-color: var(--bg-input-group-item-hover);
  }
  :is(.input-group-stack, .input-group, .input-group-wrap) .combobox .form-control:focus, :is(.input-group-stack, .input-group, .input-group-wrap) .combobox.is-focused .form-control {
    background-color: var(--bg-input-group-item-focus);
  }
  .combobox--w-auto .combobox__panel, .combobox__panel.combobox--w-auto {
    width: auto;
    min-width: 100%;
    left: 0;
    right: auto;
  }
  .combobox--w-sm .combobox__panel, .combobox__panel.combobox--w-sm {
    width: 200px;
    left: 0;
    right: auto;
  }
  .combobox--w-md .combobox__panel, .combobox__panel.combobox--w-md {
    width: 280px;
    left: 0;
    right: auto;
  }
  .combobox--w-lg .combobox__panel, .combobox__panel.combobox--w-lg {
    width: 360px;
    left: 0;
    right: auto;
  }
  .combobox--w-xl .combobox__panel, .combobox__panel.combobox--w-xl {
    width: 480px;
    left: 0;
    right: auto;
  }
  .combobox--w-full .combobox__panel, .combobox__panel.combobox--w-full {
    width: 100%;
  }
  .combobox--soft .combobox__input, .combobox--soft .combobox__control, .combobox--soft .combobox__chips {
    background-color: var(--bg-input-soft, var(--bg-secondary));
    box-shadow: none;
  }
  .combobox--soft .combobox__input:hover, .combobox--soft .combobox__control:hover, .combobox--soft .combobox__chips:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, var(--bg-input-soft, var(--bg-secondary)));
    }
  }
  .combobox--soft .combobox__input:focus, .combobox--soft .combobox__control:focus, .combobox--soft .combobox.is-focused .combobox__control, .combobox--soft .combobox__chips:focus-within {
    background-color: var(--bg-input, var(--bg-primary));
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .combobox--ghost .combobox__input, .combobox--ghost .combobox__control, .combobox--ghost .combobox__chips {
    background-color: transparent;
    box-shadow: none;
  }
  .combobox--ghost .combobox__input:hover, .combobox--ghost .combobox__control:hover, .combobox--ghost .combobox__chips:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
  }
  .combobox--ghost .combobox__input:focus, .combobox--ghost .combobox__control:focus, .combobox--ghost .combobox.is-focused .combobox__control, .combobox--ghost .combobox__chips:focus-within {
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .combobox--borderless .combobox__input, .combobox--borderless .combobox__control, .combobox--borderless .combobox__chips {
    box-shadow: none;
  }
  .combobox--pill .combobox__control, .combobox--pill .combobox__input {
    border-radius: 9999px;
    padding-left: 0.625rem;
    padding-right: 0.5rem;
    min-height: 28px;
  }
  .combobox--pill .combobox__value, .combobox--pill .combobox__placeholder {
    font-size: 0.6875rem;
  }
  .combobox.is-success .combobox__input, .combobox.is-success .combobox__control, .combobox.is-success .combobox__chips {
    box-shadow: inset 0 0 0 1px var(--border-input-success, var(--text-success)), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .combobox.is-warning .combobox__input, .combobox.is-warning .combobox__control, .combobox.is-warning .combobox__chips {
    box-shadow: inset 0 0 0 1px var(--border-input-warning, var(--text-warning)), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .combobox.is-info .combobox__input, .combobox.is-info .combobox__control, .combobox.is-info .combobox__chips {
    box-shadow: inset 0 0 0 1px var(--border-input-info, var(--text-info)), var(--shadow-input, var(--shadow-xs)) !important;
  }
  .combobox.is-loading .combobox__trigger > i, .combobox.is-loading .combobox__trigger > svg {
    display: none;
  }
  .combobox.is-loading .combobox__trigger::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 9999px;
    animation: combobox-spin 0.7s linear infinite;
  }
  @keyframes combobox-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .combobox__option-swatch {
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    border-style: var(--tw-border-style);
    border-width: 1px;
    width: 14px;
    height: 14px;
    border-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
  }
  .combobox__option-dot {
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 8px;
    height: 8px;
    background-color: var(--text-tertiary);
  }
  .combobox__option-dot.is-success {
    background-color: var(--text-success);
  }
  .combobox__option-dot.is-warning {
    background-color: var(--text-warning);
  }
  .combobox__option-dot.is-danger {
    background-color: var(--text-danger);
  }
  .combobox__option-dot.is-info {
    background-color: var(--text-info);
  }
  .combobox__option-trailing {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .combobox__option-shortcut {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 60%;
    color: var(--text-tertiary);
  }
  .combobox__option-shortcut > kbd {
    display: inline-block;
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: var(--spacing);
    min-width: 14px;
    text-align: center;
    line-height: 1.4;
    color: inherit;
    background-color: transparent;
    border-color: var(--border-divider);
    font-family: inherit;
    font-size: inherit;
  }
  .combobox__option--has-description {
    align-items: flex-start;
    padding-block: calc(var(--spacing) * 2);
  }
  .combobox__option--has-description .combobox__option-icon, .combobox__option--has-description .combobox__option-avatar {
    margin-top: 1px;
  }
  .combobox__option--level-1 {
    padding-left: 1.25rem;
  }
  .combobox__option--level-2 {
    padding-left: 2rem;
  }
  .combobox__option--level-3 {
    padding-left: 2.75rem;
  }
  .combobox__option--level-4 {
    padding-left: 3.5rem;
  }
  .combobox__option:is(.combobox__option--level-1, .combobox__option--level-2, .combobox__option--level-3, .combobox__option--level-4)::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 1px;
    margin-right: 4px;
    margin-left: -8px;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 18%, transparent);
    }
    opacity: 0.6;
    align-self: center;
  }
  .combobox__panel--compact .combobox__option {
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .combobox__panel--compact .combobox__group {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
  }
  .combobox__panel--floating {
    border-color: transparent;
    box-shadow: 0 20px 48px -12px var(--text-primary), 0 8px 16px -6px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 20px 48px -12px color-mix(in oklch, var(--text-primary) 24%, transparent), 0 8px 16px -6px color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
  }
  .combobox__panel--top {
    top: auto !important;
    bottom: 100% !important;
    margin-bottom: 0.25rem;
  }
  .combobox__panel--arrow {
    overflow: visible;
  }
  .combobox__panel--arrow::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 14px;
    width: 10px;
    height: 10px;
    background-color: inherit;
    border-left: 1px solid var(--border-combobox, var(--border-dropdown));
    border-top: 1px solid var(--border-combobox, var(--border-dropdown));
    transform: rotate(45deg);
    z-index: 2;
  }
  .combobox__panel--arrow.combobox__panel--top::before {
    top: auto;
    bottom: -5px;
    transform: rotate(225deg);
  }
  .combobox__panel-tabs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: var(--spacing);
    border-color: var(--border-combobox-header, var(--border-dropdown-divider));
  }
  .combobox__panel-tab {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
  }
  .combobox__panel-tab:hover {
    color: var(--text-primary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
  }
  .combobox__panel-tab.is-active, .combobox__panel-tab[aria-selected="true"] {
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 10%, transparent);
    }
  }
  .combobox__add-new-action {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--text-info);
    background-color: transparent;
    border: 0;
  }
  .combobox__add-new-action:hover {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 8%, transparent);
    }
  }
  .combobox__add-new-action > i {
    font-size: 10px;
  }
  .combobox__chip--avatar {
    padding-left: 2px;
  }
  .combobox__chip--avatar > .combobox__chip-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
    color: var(--text-secondary);
    font-size: 8px;
  }
  .combobox__chip--avatar > .combobox__chip-avatar > img, .combobox__chip--avatar > .combobox__chip-avatar > svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .combobox__chip--colored {
    background-color: var(--chip-bg, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--chip-bg, color-mix(in oklch, var(--text-info) 12%, transparent));
    }
    color: var(--chip-fg, var(--text-info));
    border-color: var(--chip-bg, transparent);
  }
  .combobox__chip--success {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 12%, transparent);
    }
    color: var(--text-success);
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 30%, transparent);
    }
  }
  .combobox__chip--warning {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 12%, transparent);
    }
    color: var(--text-warning);
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 30%, transparent);
    }
  }
  .combobox__chip--danger {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 12%, transparent);
    }
    color: var(--text-danger);
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
  }
  .combobox__chips-overflow {
    display: inline-flex;
    flex-shrink: 0;
    cursor: default;
    align-items: center;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    color: var(--text-secondary);
    border: 1px dashed var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px dashed color-mix(in oklch, var(--text-primary) 18%, transparent);
    }
  }
  .combobox__option:not(.combobox__option--selected):hover, .combobox__option:not(.combobox__option--selected).combobox__option--active {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
  }
  .combobox__option--active {
    box-shadow: inset 0 0 0 1px var(--border-focus);
  }
  @media (prefers-reduced-motion: reduce) {
    .combobox__trigger, .combobox__option, .combobox__clear, .combobox__chip-dismiss, .combobox__option-check, .combobox__panel-tab, .combobox__add-new-action, .combobox.is-open .combobox__panel, .combobox.is-loading .combobox__trigger::before {
      transition: none;
      animation: none;
    }
  }
}
@layer utilities {
  .range {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
    --size-range-track-height: 8px;
    --size-range-thumb: 24px;
    --size-range-tick-height: 8px;
    --size-range-tick-width: 2px;
    --bg-range-track: var(--bg-quaternary);
    --bg-range-fill: var(--bg-brand-solid);
    --bg-range-thumb: var(--bg-surface);
    --border-range-thumb: var(--border-primary);
    --bg-range-glow: var(--bg-brand-solid);
    --shadow-range-thumb: var(--shadow-md);
    --shadow-range-thumb-hover: var(--shadow-lg);
    height: var(--size-range-thumb);
  }
  .range__track {
    position: absolute;
    right: 0;
    left: 0;
    cursor: pointer;
    border-radius: var(--radius-full);
    top: 50%;
    transform: translateY(-50%);
    height: var(--size-range-track-height);
    background-color: var(--bg-range-track);
  }
  .range__fill {
    pointer-events: none;
    position: absolute;
    border-radius: var(--radius-full);
    top: 50%;
    transform: translateY(-50%);
    height: var(--size-range-track-height);
    background-color: var(--bg-range-fill);
  }
  .range:not(.range--dual) .range__fill {
    left: 0;
    right: calc(100% - var(--range-pct, 0%));
  }
  .range.range--dual .range__fill {
    left: var(--range-pct-min, 0%);
    right: calc(100% - var(--range-pct-max, 100%));
  }
  .range__thumb {
    position: absolute;
    cursor: grab;
    border-radius: var(--radius-full);
    touch-action: none;
    top: 50%;
    width: var(--size-range-thumb);
    height: var(--size-range-thumb);
    background-color: var(--bg-range-thumb);
    box-shadow: inset 0 0 0 2px var(--border-range-thumb), var(--shadow-range-thumb);
    --thumb-y: -50%;
    --thumb-scale: 1;
    transform: translate(-50%, var(--thumb-y)) scale(var(--thumb-scale));
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease), transform var(--duration-fast, 100ms) var(--ease-default, ease), background-color var(--duration-fast, 100ms) var(--ease-default, ease);
    z-index: 2;
  }
  @media (prefers-reduced-motion: reduce) {
    .range__thumb {
      transition: none;
    }
  }
  .range:not(.range--dual) .range__thumb {
    left: var(--range-pct, 0%);
  }
  .range.range--dual .range__thumb[data-thumb="min"] {
    left: var(--range-pct-min, 0%);
  }
  .range.range--dual .range__thumb[data-thumb="max"] {
    left: var(--range-pct-max, 100%);
  }
  .range__thumb:hover {
    box-shadow: inset 0 0 0 2px var(--border-range-thumb), var(--shadow-range-thumb-hover);
    --thumb-scale: 1.1;
  }
  .range__thumb:active, .range__thumb.is-dragging {
    cursor: grabbing;
    box-shadow: inset 0 0 0 2px var(--border-range-thumb), var(--shadow-range-thumb), 0 0 0 6px var(--bg-range-glow);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 2px var(--border-range-thumb), var(--shadow-range-thumb), 0 0 0 6px color-mix(in srgb, var(--bg-range-glow) 18%, transparent);
    }
    --thumb-scale: 1.12;
    z-index: 3;
  }
  .range__thumb:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .range__value {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .range__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .range__labels {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    justify-content: space-between;
  }
  .range__labels .range__label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-quaternary);
  }
  .range__tooltip {
    pointer-events: none;
    position: absolute;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    background-color: var(--bg-tooltip, var(--bg-tertiary-solid));
    color: var(--text-tooltip, var(--text-on-brand));
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .range__tooltip {
      transition: none;
    }
  }
  .range__thumb:active .range__tooltip, .range__thumb.is-dragging .range__tooltip, .range__thumb:focus-visible .range__tooltip {
    opacity: 1;
  }
  .range--show-tooltip .range__tooltip {
    opacity: 1;
  }
  .range__ticks {
    pointer-events: none;
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--size-range-track-height);
  }
  .range__tick {
    position: absolute;
    width: var(--size-range-tick-width);
    height: var(--size-range-tick-height);
    background-color: var(--bg-range-tick, var(--bg-quaternary-alt));
    border-radius: 1px;
    transform: translateX(-50%);
    top: calc(50% + calc(var(--size-range-track-height) / 2) + 2px);
  }
  .range__tick.is-active {
    background-color: var(--bg-range-tick-active, var(--bg-range-fill));
    opacity: 0.5;
  }
  .range__tick-labels {
    pointer-events: none;
    position: absolute;
    right: 0;
    left: 0;
    top: calc(var(--size-range-thumb) / 2 + var(--size-range-track-height) / 2 + 14px);
  }
  .range__tick-label {
    position: absolute;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-quaternary);
    transform: translateX(-50%);
  }
  .range--sm {
    --size-range-track-height: 6px;
    --size-range-thumb: 20px;
    --size-range-tick-height: 6px;
    --size-range-tick-width: 1px;
  }
  .range--lg {
    --size-range-track-height: 10px;
    --size-range-thumb: 28px;
    --size-range-tick-height: 10px;
    --size-range-tick-width: 2px;
  }
  .range.is-disabled {
    pointer-events: none;
    opacity: 50%;
  }
  .range--success {
    --bg-range-fill: var(--bg-success-solid);
    --border-range-thumb: var(--border-success-solid);
    --bg-range-glow: var(--bg-success-solid);
  }
  .range--warning {
    --bg-range-fill: var(--bg-warning-solid);
    --border-range-thumb: var(--border-warning-solid);
    --bg-range-glow: var(--bg-warning-solid);
  }
  .range--danger {
    --bg-range-fill: var(--bg-danger-solid);
    --border-range-thumb: var(--border-danger-solid);
    --bg-range-glow: var(--bg-danger-solid);
  }
  .range--info {
    --bg-range-fill: var(--bg-info-solid);
    --border-range-thumb: var(--border-info-solid);
    --bg-range-glow: var(--bg-info-solid);
  }
  .range--vertical {
    width: auto;
    flex-direction: column;
    height: var(--size-range-vertical-height, 12rem);
    width: var(--size-range-thumb);
  }
  .range--vertical .range__track {
    top: 0;
    right: auto;
    bottom: 0;
    left: auto;
    left: calc(50% - var(--size-range-track-height) / 2);
    width: var(--size-range-track-height);
    height: 100%;
    transform: none;
  }
  .range.range--vertical .range__fill {
    left: calc(50% - var(--size-range-track-height) / 2);
    right: auto;
    width: var(--size-range-track-height);
    height: auto;
    transform: none;
  }
  .range.range--vertical:not(.range--dual) .range__fill {
    bottom: 0;
    top: calc(100% - var(--range-pct, 0%));
  }
  .range.range--vertical.range--dual .range__fill {
    bottom: var(--range-pct-min, 0%);
    top: calc(100% - var(--range-pct-max, 100%));
  }
  .range.range--vertical .range__thumb {
    top: auto;
    left: 50%;
    --thumb-y: 50%;
  }
  .range.range--vertical:not(.range--dual) .range__thumb {
    bottom: var(--range-pct, 0%);
  }
  .range.range--vertical.range--dual .range__thumb[data-thumb="min"] {
    bottom: var(--range-pct-min, 0%);
  }
  .range.range--vertical.range--dual .range__thumb[data-thumb="max"] {
    bottom: var(--range-pct-max, 100%);
  }
  .range--vertical .range__tick {
    transform: translateY(50%);
    top: auto;
    left: calc(50% + calc(var(--size-range-track-height) / 2) + 2px);
    width: var(--size-range-tick-height);
    height: var(--size-range-tick-width);
  }
  .range--vertical .range__tick-labels {
    top: auto;
    left: calc(var(--size-range-thumb) / 2 + var(--size-range-track-height) / 2 + 14px);
  }
  .range--vertical .range__tick-label {
    transform: translateY(50%);
  }
  .range--vertical .range__tooltip {
    bottom: auto;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
  }
  .range--vertical .range__labels {
    margin-top: 0;
    margin-left: var(--spacing);
    flex-direction: column;
  }
  .range--dual .range__thumb[data-thumb="min"] {
    z-index: 2;
  }
  .range--dual .range__thumb[data-thumb="max"] {
    z-index: 2;
  }
  .range--dual .range__thumb.is-dragging {
    z-index: 3;
  }
  .range--stepped .range__tick {
    --size-range-tick-height: 10px;
    --size-range-tick-width: 2px;
  }
  .range--stepped.range--sm .range__tick {
    --size-range-tick-height: 8px;
    --size-range-tick-width: 1px;
  }
  .range--stepped.range--lg .range__tick {
    --size-range-tick-height: 12px;
    --size-range-tick-width: 3px;
  }
  .range--glass {
    --bg-range-track: var(--alpha-white-100);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-range-track: color-mix(in srgb, var(--alpha-white-100) 35%, transparent);
    }
    --bg-range-fill: var(--alpha-white-100);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-range-fill: color-mix(in srgb, var(--alpha-white-100) 65%, transparent);
    }
    --bg-range-thumb: var(--bg-button-glass, var(--alpha-white-30));
    --border-range-thumb: var(--border-button-glass, var(--alpha-white-30));
    --bg-range-glow: var(--alpha-white-100);
    --shadow-range-thumb: 0 4px 14px rgba(0, 0, 0, 0.18), 0 1px 0 var(--alpha-white-30) inset;
    --shadow-range-thumb-hover: 0 6px 18px rgba(0, 0, 0, 0.22), 0 1px 0 var(--alpha-white-30) inset;
  }
  .range--glass .range__thumb {
    box-shadow: var(--shadow-range-thumb);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid var(--alpha-white-30);
  }
  .range--glass .range__thumb:hover {
    box-shadow: var(--shadow-range-thumb-hover);
    background-color: var(--alpha-white-100);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--alpha-white-100) 22%, transparent);
    }
  }
  .range--glass .range__track, .range--glass .range__fill {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .range--glass .range__tooltip {
    background-color: var(--alpha-black-100, #000);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--alpha-black-100, #000) 60%, transparent);
    }
    color: var(--alpha-white-100);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .range--gradient {
    --bg-range-fill: linear-gradient(
    to right,
    var(--bg-range-fill-from, var(--text-info)),
    var(--bg-range-fill-to, var(--text-success))
  );
  }
  .range--gradient .range__fill {
    background: var(--bg-range-fill);
  }
  .range--gradient.range--vertical .range__fill {
    background: linear-gradient( to top, var(--bg-range-fill-from, var(--text-info)), var(--bg-range-fill-to, var(--text-success)) );
  }
  .range--zones .range__track {
    background: linear-gradient(to right, var(--range-zones, var(--bg-danger-subtle) 0 33%, var(--bg-warning-subtle) 33% 66%, var(--bg-success-subtle) 66% 100%));
    opacity: 0.9;
  }
  .range--zones .range__fill {
    background-color: var(--bg-range-fill-zones, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-range-fill-zones, color-mix(in srgb, var(--text-primary) 30%, transparent));
    }
    mix-blend-mode: multiply;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .range--zones .range__fill {
    mix-blend-mode: lighten;
  }
  .range--inset .range__track {
    background-color: var(--bg-range-track-inset, var(--bg-secondary, var(--bg-tertiary)));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  }
  .range--inset .range__fill {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  .range--no-fill .range__fill {
    display: none;
  }
  .range--label-floating .range__tooltip {
    opacity: 1;
    background-color: var(--bg-range-floating-label, var(--bg-panel, var(--alpha-white-100)));
    color: var(--text-range-floating-label, var(--text-primary));
    border: 1px solid var(--border-divider);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
    padding: 2px 6px;
  }
  .range--label-floating .range__tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: inherit;
    border-right: 1px solid var(--border-divider);
    border-bottom: 1px solid var(--border-divider);
    transform: translateX(-50%) rotate(45deg);
    margin-top: -3px;
  }
  .range__threshold {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: var(--range-threshold-pct, 50%);
    width: 2px;
    height: calc(var(--size-range-thumb) + 4px);
    background-color: var(--bg-range-threshold, var(--text-danger));
    transform: translate(-50%, -50%);
    border-radius: 999px;
    z-index: 1;
  }
  .range__threshold::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: inherit;
  }
  .range__threshold-label {
    position: absolute;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-range-threshold-label, var(--text-danger));
  }
  .range--vertical .range__threshold {
    top: var(--range-threshold-pct, 50%);
    bottom: auto;
    left: 50%;
    width: calc(var(--size-range-thumb) + 4px);
    height: 2px;
    transform: translate(-50%, 50%);
  }
  .range--vertical .range__threshold::before {
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
  }
  .range--vertical .range__threshold-label {
    bottom: auto;
    top: 50%;
    left: calc(100% + 6px);
    transform: translateY(50%);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .range {
    --bg-range-track: var(--bg-quaternary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-range-track: color-mix(in oklch, var(--bg-quaternary), var(--text-primary) 16%);
    }
  }
}
@layer components {
  @keyframes ie-spin {
    to {
      transform: rotate(360deg);
    }
  }
}
@layer utilities {
  .form-section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .form-section + .form-section {
    margin-top: calc(var(--spacing) * 6);
  }
  .form-section:first-child {
    margin-top: 0;
  }
  .form-section__header {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .form-section__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-form-section-title, var(--text-secondary));
  }
  .form-section__description {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-form-section-description, var(--text-tertiary));
  }
  .form-section__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .form-section--bordered + .form-section--bordered {
    padding-top: calc(var(--spacing) * 6);
    border-top: 1px solid var(--border-form-section, var(--border-primary-subtle));
  }
  .form-section--card {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-form-section-card, var(--bg-surface));
    border: 1px solid var(--border-form-section, var(--border-primary-subtle));
    box-shadow: var(--shadow-form-section-card, var(--shadow-xs));
  }
  .form-section--card .form-section__header {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .form-section--compact + .form-section--compact {
    margin-top: calc(var(--spacing) * 4);
  }
  .form-section--compact .form-section__header {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .form-section--compact .form-section__title {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .form-section--collapsible .form-section__header {
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    -webkit-user-select: none;
    user-select: none;
  }
  .form-section--collapsible .form-section__header:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .form-section--collapsible .form-section__header::after {
    content: "\f078";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
    font-weight: 300;
    flex: none;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .form-section--collapsible.is-open .form-section__header::after {
    transform: rotate(180deg);
  }
  .form-section--collapsible:not(.is-open) .form-section__body {
    display: none;
  }
  .form-section--error .form-section__title, .form-section--error .form-section__icon {
    color: var(--text-danger);
  }
  .form-section--warning .form-section__title, .form-section--warning .form-section__icon {
    color: var(--text-warning);
  }
  .form-section--disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  .form-section--disabled .form-section__body {
    -webkit-user-select: none;
    user-select: none;
  }
  .form-section__body--2col {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .form-section__body--3col {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .form-section__body--4col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .form-section__body--auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 1rem;
  }
  .form-section__header:has(.form-section__actions), .form-section__header:has(.form-section__icon), .form-section__header:has(.form-section__badge) {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .form-section__header > .form-section__title-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .form-section__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 32px;
    height: 32px;
    background-color: var(--bg-form-section-icon, var(--bg-secondary));
    color: var(--text-form-section-icon, var(--text-secondary));
    font-size: 14px;
  }
  .form-section__badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    background-color: var(--bg-form-section-badge, var(--text-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-form-section-badge, color-mix(in oklch, var(--text-secondary) 12%, transparent));
    }
    color: var(--text-form-section-badge, var(--text-secondary));
    font-weight: 600;
  }
  .form-section__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .form-section__footer {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-form-section, var(--border-divider));
  }
  .form-section--card .form-section__footer {
    margin-inline: calc(var(--spacing) * -4);
    margin-top: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-form-section, var(--border-divider));
  }
  .form-section__footer--start {
    justify-content: flex-start;
  }
  .form-section__footer--between {
    justify-content: space-between;
  }
  .form-section--filled {
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-form-section-filled, var(--bg-secondary));
    border: 0;
  }
  .form-section--ghost {
    background: transparent;
    border: 0;
    padding: 0;
  }
  .form-section--inline {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .form-section--inline > .form-section__header {
    margin-bottom: 0;
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .form-section--inline > .form-section__body {
    @media (width >= 48rem) {
      grid-column: span 8 / span 8;
    }
    @media (width >= 64rem) {
      grid-column: span 9 / span 9;
    }
  }
  .form-section--numbered .form-section__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .form-section--numbered .form-section__title::before {
    content: attr(data-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    width: 20px;
    height: 20px;
    color: var(--text-button-primary, var(--alpha-white-100));
    background-color: var(--bg-button-primary);
    text-transform: none;
    letter-spacing: 0;
  }
  .form-section--success .form-section__title, .form-section--success .form-section__icon {
    color: var(--text-success);
  }
  .form-section--info .form-section__title, .form-section--info .form-section__icon {
    color: var(--text-info);
  }
  .form-section-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .form-section-group:has(.form-section--bordered) {
    gap: 0;
  }
  .form-section-group[data-numbered] {
    counter-reset: form-section;
  }
  .form-section-group[data-numbered] .form-section--numbered {
    counter-increment: form-section;
  }
  .form-section-group[data-numbered] .form-section--numbered .form-section__title::before {
    content: counter(form-section);
  }
  @media (prefers-reduced-motion: reduce) {
    .form-section--collapsible .form-section__header::after {
      transition: none;
    }
  }
}
@layer utilities {
  .route-builder {
    display: grid;
    align-items: stretch;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: 1fr auto 1fr;
  }
  .route-builder__node {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .route-builder__node-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-height: 1.5rem;
  }
  .route-builder__node-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    width: var(--size-route-builder-icon, 1.5rem);
    height: var(--size-route-builder-icon, 1.5rem);
    background-color: var(--bg-route-builder-icon, var(--bg-primary-subtle));
    color: var(--text-route-builder-icon, var(--text-secondary));
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), color var(--duration-fast, 100ms) var(--ease-out, ease), box-shadow var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .route-builder__node--origin .route-builder__node-icon, .route-builder__node--pickup .route-builder__node-icon {
    background-color: var(--bg-route-builder-icon-origin, var(--bg-info-subtle));
    color: var(--text-route-builder-icon-origin, var(--text-info));
  }
  .route-builder__node--destination .route-builder__node-icon, .route-builder__node--dropoff .route-builder__node-icon {
    background-color: var(--bg-route-builder-icon-destination, var(--bg-success-subtle));
    color: var(--text-route-builder-icon-destination, var(--text-success));
  }
  .route-builder__node--stop .route-builder__node-icon {
    background-color: var(--bg-route-builder-icon-stop, var(--bg-warning-subtle));
    color: var(--text-route-builder-icon-stop, var(--text-warning));
  }
  .route-builder__node--hub .route-builder__node-icon {
    background-color: var(--bg-route-builder-icon-hub, var(--bg-secondary-subtle));
    color: var(--text-route-builder-icon-hub, var(--text-secondary));
  }
  .route-builder__node--port .route-builder__node-icon {
    background-color: var(--bg-route-builder-icon-port, var(--bg-info-subtle));
    color: var(--text-route-builder-icon-port, var(--text-info));
    box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 3px var(--border-route-builder-port, var(--text-info));
  }
  .route-builder__node-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-route-builder-label, var(--text-secondary));
  }
  .route-builder__node-label.required::after {
    content: " *";
    color: var(--text-danger);
  }
  .route-builder__node-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .route-builder__node.is-complete .route-builder__node-icon {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .route-builder__node.is-error .route-builder__node-icon {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .route-builder__node.is-focused .route-builder__node-icon {
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .route-builder__connector {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    align-self: center;
    min-width: 2rem;
    min-height: 2rem;
  }
  .route-builder__connector--top-align {
    justify-content: flex-start;
    align-self: flex-start;
    padding-top: var(--padding-route-builder-connector-top, 2rem);
  }
  .route-builder__arrow {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-route-builder-arrow, var(--text-tertiary));
    line-height: 1;
    opacity: 0.6;
  }
  .route-builder__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--bg-route-builder-meta, transparent);
    color: var(--text-route-builder-meta, var(--text-tertiary));
  }
  .route-builder__meta i {
    font-size: 10px;
    opacity: 0.6;
  }
  .route-builder__add-stop {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    -webkit-user-select: none;
    user-select: none;
    min-height: 24px;
    padding: 2px 10px;
    border: 1px dashed var(--border-divider);
    border-radius: 999px;
    background-color: transparent;
    color: var(--text-tertiary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), color var(--duration-fast, 100ms) var(--ease-out, ease), border-color var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .route-builder__add-stop:hover {
    background-color: var(--bg-primary-subtle);
    border-color: var(--border-focus);
    color: var(--text-secondary);
  }
  .route-builder__add-stop:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .route-builder--multi-stop {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr) auto;
  }
  .route-builder--multi-stop > .route-builder__connector:last-child {
    display: none;
  }
  .route-builder--stacked {
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .route-builder--stacked .route-builder__node {
    width: 100%;
    min-width: 0;
    max-width: var(--max-width-route-builder-stacked-node, 360px);
  }
  .route-builder--stacked .route-builder__connector {
    padding: 4px 0;
    min-height: 1.5rem;
  }
  .route-builder--stacked .route-builder__arrow i {
    transform: rotate(90deg);
  }
  .route-builder--stacked.route-builder--multi-stop {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: auto;
  }
  .route-builder--compact {
    gap: calc(var(--spacing) * 3);
  }
  .route-builder--compact .route-builder__node {
    gap: calc(var(--spacing) * 1.5);
  }
  @media (prefers-reduced-motion: reduce) {
    .route-builder__node-icon, .route-builder__add-stop {
      transition: none;
    }
    .route-builder--stacked .route-builder__arrow i {
      transform: rotate(90deg);
    }
  }
}
@layer utilities {
  .choice-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--width-choice-card-min, 14rem), 1fr));
    gap: var(--gap-choice-card-grid, calc(var(--spacing) * 3));
    width: 100%;
  }
  .choice-card-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(var(--width-choice-card-min-compact, 11rem), 1fr));
    gap: var(--gap-choice-card-grid-compact, calc(var(--spacing) * 2));
  }
  .choice-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 4);
    width: 100%;
    font: inherit;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-width: 0;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), box-shadow var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .choice-card:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, var(--bg-primary));
    }
    box-shadow: inset 0 0 0 1px var(--border-primary-hover);
  }
  .choice-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .choice-card:disabled, .choice-card.is-disabled, .choice-card[aria-disabled="true"] {
    pointer-events: none;
    opacity: 50%;
    cursor: not-allowed;
    background-color: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    color: var(--text-disabled);
  }
  .choice-card:disabled .choice-card__icon, .choice-card.is-disabled .choice-card__icon, .choice-card[aria-disabled="true"] .choice-card__icon {
    color: var(--text-tertiary);
  }
  .choice-card__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--text-lg);
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
  }
  .choice-card__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: inherit;
  }
  .choice-card__description {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--text-tertiary);
  }
  .choice-card__badge {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
  }
  .choice-card--horizontal {
    flex-direction: row;
    align-items: center;
  }
  .choice-card--horizontal .choice-card__icon {
    align-self: flex-start;
  }
  .choice-card--centered {
    align-items: center;
    text-align: center;
  }
  .choice-card--centered .choice-card__title, .choice-card--centered .choice-card__description {
    text-align: center;
  }
  .choice-card--list {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .choice-card--list .choice-card__icon {
    width: 2rem;
    height: 2rem;
    font-size: var(--text-base);
  }
  .choice-card--list .choice-card__title-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .choice-card--xs {
    padding: calc(var(--spacing) * 2.5);
    gap: var(--spacing);
    border-radius: var(--radius-md);
  }
  .choice-card--xs .choice-card__icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: var(--text-xs);
  }
  .choice-card--xs .choice-card__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .choice-card--xs .choice-card__description {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .choice-card--sm {
    padding: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
  }
  .choice-card--sm .choice-card__icon {
    width: 2rem;
    height: 2rem;
    font-size: var(--text-sm);
  }
  .choice-card--sm .choice-card__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .choice-card--sm .choice-card__description {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .choice-card--lg {
    padding: calc(var(--spacing) * 5);
    gap: calc(var(--spacing) * 3);
  }
  .choice-card--lg .choice-card__icon {
    width: 3rem;
    height: 3rem;
    font-size: var(--text-xl);
  }
  .choice-card--lg .choice-card__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .choice-card--filled {
    background-color: var(--bg-secondary);
    box-shadow: none;
  }
  .choice-card--filled:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, var(--bg-secondary));
    }
    box-shadow: none;
  }
  .choice-card--ghost {
    background-color: transparent;
    box-shadow: none;
  }
  .choice-card--ghost:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
  }
  .choice-card--bordered-strong {
    box-shadow: inset 0 0 0 2px var(--border-secondary);
  }
  .choice-card.is-selected, .choice-card[aria-pressed="true"], .choice-card[aria-checked="true"] {
    box-shadow: inset 0 0 0 2px var(--border-brand);
  }
  .choice-card.is-selected .choice-card__icon, .choice-card[aria-pressed="true"] .choice-card__icon, .choice-card[aria-checked="true"] .choice-card__icon {
    color: var(--border-brand);
  }
  .choice-card--accent-fill.is-selected, .choice-card--accent-fill[aria-pressed="true"], .choice-card--accent-fill[aria-checked="true"] {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 8%, var(--bg-primary));
    }
  }
  .choice-card--intent-info.is-selected, .choice-card--intent-info[aria-pressed="true"], .choice-card--intent-info[aria-checked="true"] {
    box-shadow: inset 0 0 0 2px var(--border-info);
  }
  .choice-card--intent-info.is-selected .choice-card__icon, .choice-card--intent-info[aria-pressed="true"] .choice-card__icon, .choice-card--intent-info[aria-checked="true"] .choice-card__icon {
    color: var(--text-info);
  }
  .choice-card--intent-info.choice-card--accent-fill.is-selected, .choice-card--intent-info.choice-card--accent-fill[aria-pressed="true"], .choice-card--intent-info.choice-card--accent-fill[aria-checked="true"] {
    background-color: var(--bg-info-subtle);
  }
  .choice-card--intent-success.is-selected, .choice-card--intent-success[aria-pressed="true"], .choice-card--intent-success[aria-checked="true"] {
    box-shadow: inset 0 0 0 2px var(--border-success);
  }
  .choice-card--intent-success.is-selected .choice-card__icon, .choice-card--intent-success[aria-pressed="true"] .choice-card__icon, .choice-card--intent-success[aria-checked="true"] .choice-card__icon {
    color: var(--text-success);
  }
  .choice-card--intent-success.choice-card--accent-fill.is-selected, .choice-card--intent-success.choice-card--accent-fill[aria-pressed="true"], .choice-card--intent-success.choice-card--accent-fill[aria-checked="true"] {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 8%, var(--bg-primary));
    }
  }
  .choice-card--intent-warning.is-selected, .choice-card--intent-warning[aria-pressed="true"], .choice-card--intent-warning[aria-checked="true"] {
    box-shadow: inset 0 0 0 2px var(--border-warning);
  }
  .choice-card--intent-warning.is-selected .choice-card__icon, .choice-card--intent-warning[aria-pressed="true"] .choice-card__icon, .choice-card--intent-warning[aria-checked="true"] .choice-card__icon {
    color: var(--text-warning);
  }
  .choice-card--intent-warning.choice-card--accent-fill.is-selected, .choice-card--intent-warning.choice-card--accent-fill[aria-pressed="true"], .choice-card--intent-warning.choice-card--accent-fill[aria-checked="true"] {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 8%, var(--bg-primary));
    }
  }
  .choice-card--intent-danger.is-selected, .choice-card--intent-danger[aria-pressed="true"], .choice-card--intent-danger[aria-checked="true"] {
    box-shadow: inset 0 0 0 2px var(--border-danger);
  }
  .choice-card--intent-danger.is-selected .choice-card__icon, .choice-card--intent-danger[aria-pressed="true"] .choice-card__icon, .choice-card--intent-danger[aria-checked="true"] .choice-card__icon {
    color: var(--text-danger);
  }
  .choice-card--intent-danger.choice-card--accent-fill.is-selected, .choice-card--intent-danger.choice-card--accent-fill[aria-pressed="true"], .choice-card--intent-danger.choice-card--accent-fill[aria-checked="true"] {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 8%, var(--bg-primary));
    }
  }
  .choice-card--intent-info:focus-visible {
    outline-color: var(--border-info);
  }
  .choice-card--intent-success:focus-visible {
    outline-color: var(--border-success);
  }
  .choice-card--intent-warning:focus-visible {
    outline-color: var(--border-warning);
  }
  .choice-card--intent-danger:focus-visible {
    outline-color: var(--border-danger);
  }
  .choice-card__check {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    width: 1.125rem;
    height: 1.125rem;
    font-size: 0.625rem;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
    pointer-events: none;
    z-index: 2;
  }
  .choice-card:has(.choice-card__ribbon) .choice-card__check {
    right: auto;
    left: calc(var(--spacing) * 2);
  }
  .choice-card.is-selected .choice-card__check, .choice-card[aria-pressed="true"] .choice-card__check, .choice-card[aria-checked="true"] .choice-card__check {
    opacity: 1;
    transform: scale(1);
  }
  .choice-card--intent-info.is-selected .choice-card__check, .choice-card--intent-info[aria-pressed="true"] .choice-card__check, .choice-card--intent-info[aria-checked="true"] .choice-card__check {
    background-color: var(--text-info);
  }
  .choice-card--intent-success.is-selected .choice-card__check, .choice-card--intent-success[aria-pressed="true"] .choice-card__check, .choice-card--intent-success[aria-checked="true"] .choice-card__check {
    background-color: var(--text-success);
  }
  .choice-card--intent-warning.is-selected .choice-card__check, .choice-card--intent-warning[aria-pressed="true"] .choice-card__check, .choice-card--intent-warning[aria-checked="true"] .choice-card__check {
    background-color: var(--text-warning);
  }
  .choice-card--intent-danger.is-selected .choice-card__check, .choice-card--intent-danger[aria-pressed="true"] .choice-card__check, .choice-card--intent-danger[aria-checked="true"] .choice-card__check {
    background-color: var(--text-danger);
  }
  .choice-card__title-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .choice-card__meta {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .choice-card__price {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: var(--spacing);
  }
  .choice-card__price-amount {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .choice-card__price-unit {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .choice-card__features {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-secondary);
    list-style: none;
    padding: 0;
  }
  .choice-card__features > li {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .choice-card__features > li > i, .choice-card__features > li > svg {
    color: var(--text-success);
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.6875rem;
  }
  .choice-card__footer {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-top: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-color: var(--border-divider);
    color: var(--text-secondary);
  }
  .choice-card__media {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 16 / 9;
    background-color: var(--bg-secondary);
    margin: 0 0 var(--spacing) 0;
  }
  .choice-card__media > img, .choice-card__media > svg, .choice-card__media > video {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .choice-card__ribbon {
    pointer-events: none;
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    top: 10px;
    right: -28px;
    width: 110px;
    height: 20px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    transform: rotate(45deg);
    text-transform: uppercase;
    z-index: 1;
  }
  .choice-card--intent-info .choice-card__ribbon {
    background-color: var(--text-info);
  }
  .choice-card--intent-success .choice-card__ribbon {
    background-color: var(--text-success);
  }
  .choice-card--intent-warning .choice-card__ribbon {
    background-color: var(--text-warning);
  }
  .choice-card--intent-danger .choice-card__ribbon {
    background-color: var(--text-danger);
  }
  .choice-card:has(.choice-card__ribbon) {
    overflow: hidden;
  }
  .choice-card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .choice-card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 640px) {
    .choice-card-grid--2, .choice-card-grid--3, .choice-card-grid--4 {
      grid-template-columns: 1fr;
    }
  }
  .choice-card-grid--list {
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) * 2);
  }
  @media (prefers-reduced-motion: reduce) {
    .choice-card, .choice-card__check {
      transition: none;
    }
  }
}
@layer components {
  @keyframes uploader-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.06);
    }
  }
}
@layer utilities {
  .cropper {
    --cropper-accent: var(--border-focus);
    --cropper-handle: 12px;
    --cropper-handle-touch: 24px;
    --cropper-mask: var(--alpha-black-50);
    --cropper-guide: var(--alpha-white-40);
    --cropper-handle-fill: var(--alpha-white-100);
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: crosshair;
    background-color: var(--bg-secondary);
    background-image: linear-gradient(45deg, var(--text-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--text-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--text-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--text-tertiary) 75%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(45deg, color-mix(in oklch, var(--text-tertiary) 22%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in oklch, var(--text-tertiary) 22%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in oklch, var(--text-tertiary) 22%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in oklch, var(--text-tertiary) 22%, transparent) 75%);
    }
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  }
  .cropper *, .cropper *::before, .cropper *::after {
    box-sizing: border-box;
  }
  .cropper__media {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    transform-origin: center center;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
  }
  .cropper__area {
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
    touch-action: none;
    box-shadow: 0 0 0 1px var(--cropper-accent) inset, 0 0 0 9999px var(--cropper-mask);
    outline: 1px solid var(--cropper-accent);
    outline-offset: -1px;
  }
  .cropper--ready .cropper__area {
    animation: cropper-area-in var(--duration-normal) var(--ease-out);
  }
  .cropper__area:focus-visible {
    outline: 2px solid var(--cropper-accent);
    outline-offset: -2px;
  }
  .cropper__area::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, var(--cropper-accent) 50%, transparent 50%), linear-gradient(90deg, var(--cropper-accent) 50%, transparent 50%), linear-gradient(0deg, var(--cropper-accent) 50%, transparent 50%), linear-gradient(0deg, var(--cropper-accent) 50%, transparent 50%);
    background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    opacity: 0.6;
  }
  .cropper__handle {
    position: absolute;
    width: var(--cropper-handle);
    height: var(--cropper-handle);
    background-color: var(--cropper-handle-fill);
    border: 2px solid var(--cropper-accent);
    border-radius: 2px;
    z-index: 1;
  }
  .cropper__handle--nw {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    cursor: nwse-resize;
  }
  .cropper__handle--n {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: ns-resize;
  }
  .cropper__handle--ne {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    cursor: nesw-resize;
  }
  .cropper__handle--e {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    cursor: ew-resize;
  }
  .cropper__handle--se {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
    cursor: nwse-resize;
  }
  .cropper__handle--s {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    cursor: ns-resize;
  }
  .cropper__handle--sw {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    cursor: nesw-resize;
  }
  .cropper__handle--w {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    cursor: ew-resize;
  }
  .cropper__thirds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
  }
  .cropper--thirds .cropper__thirds {
    display: block;
  }
  .cropper__thirds::before, .cropper__thirds::after {
    content: '';
    position: absolute;
    background-color: var(--cropper-guide);
  }
  .cropper__thirds::before {
    top: 0;
    bottom: 0;
    left: calc(100% / 3);
    width: 1px;
    box-shadow: calc(100% / 3) 0 0 var(--cropper-guide);
  }
  .cropper__thirds::after {
    left: 0;
    right: 0;
    top: calc(100% / 3);
    height: 1px;
    box-shadow: 0 calc(100% / 3) 0 var(--cropper-guide);
  }
  .cropper--circular .cropper__area {
    border-radius: var(--radius-full);
  }
  .cropper--circular .cropper__area::after {
    border-radius: var(--radius-full);
    background: none;
    box-shadow: 0 0 0 1px var(--cropper-accent) inset;
  }
  .cropper--fixed .cropper__handle--n, .cropper--fixed .cropper__handle--e, .cropper--fixed .cropper__handle--s, .cropper--fixed .cropper__handle--w {
    display: none;
  }
  .cropper--disabled {
    cursor: default;
  }
  .cropper--disabled .cropper__area {
    cursor: default;
  }
  .cropper--disabled .cropper__handle {
    display: none;
  }
  .cropper-sm .cropper__media {
    max-height: 220px;
  }
  .cropper-md .cropper__media {
    max-height: 320px;
  }
  .cropper-lg .cropper__media {
    max-height: 440px;
  }
  .cropper--loading {
    min-height: 220px;
    min-width: 220px;
    cursor: default;
  }
  .cropper--loading .cropper__area, .cropper--loading .cropper__handle {
    display: none;
  }
  .cropper--loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient( 100deg, transparent 30%, var(--bg-primary) 50%, transparent 70% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 100deg, transparent 30%, color-mix(in oklch, var(--bg-primary) 55%, transparent) 50%, transparent 70% );
    }
    background-size: 200% 100%;
    animation: cropper-shimmer 1.4s linear infinite;
  }
  .cropper-field {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 3);
    max-width: 100%;
  }
  .cropper-field > .cropper {
    display: block;
    width: 100%;
  }
  .cropper-toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .cropper-toolbar__spacer {
    display: none;
  }
  @media (min-width: 640px) {
    .cropper-toolbar__spacer {
      display: block;
      flex: 1;
    }
  }
  .cropper-presets {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    padding: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
  }
  .cropper-preset {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .cropper-preset > i {
    font-size: 0.875em;
  }
  .cropper-preset:hover {
    color: var(--text-secondary);
    background: var(--bg-primary-hover);
  }
  .cropper-preset[aria-pressed='true'] {
    color: var(--text-primary);
    background: var(--bg-primary);
    box-shadow: var(--shadow-xs);
  }
  .cropper-preset:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .cropper-zoom {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .cropper-zoom__range {
    accent-color: var(--border-focus);
    width: 8rem;
    max-width: 40vw;
    cursor: pointer;
  }
  .cropper-zoom__range:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-full);
  }
  .cropper-zoom__value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
    min-width: 3.25rem;
    text-align: right;
  }
  @media (pointer: coarse) {
    .cropper__handle {
      width: var(--cropper-handle-touch);
      height: var(--cropper-handle-touch);
    }
    .cropper__handle--n, .cropper__handle--e, .cropper__handle--s, .cropper__handle--w {
      display: none;
    }
  }
  @keyframes cropper-area-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes cropper-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cropper--ready .cropper__area {
      animation: none;
    }
    .cropper--loading::before {
      animation: none;
    }
    .cropper-preset {
      transition: none;
    }
  }
}
@layer utilities {
  .rte {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .rte__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    cursor: default;
  }
  .rte__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: max-content;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  @media (min-width: 768px) {
    .rte__toolbar {
      flex-wrap: nowrap;
    }
  }
  .rte__toolbar--advanced {
    width: max-content;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  @media (min-width: 768px) {
    .rte__toolbar--advanced {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: calc(var(--spacing) * 3);
    }
  }
  .rte__toolbar--floating {
    border-radius: var(--radius-lg);
    padding: var(--spacing);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
  }
  .rte__toolbar--advanced.rte__toolbar--floating {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 2);
  }
  .rte__toolbar-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 2);
  }
  .rte__toolbar-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  @media (min-width: 768px) {
    .rte__toolbar-row {
      flex-wrap: nowrap;
    }
  }
  .rte__divider {
    align-self: stretch;
    padding: calc(var(--spacing) * 1.5);
    display: inline-flex;
  }
  .rte__divider::before {
    content: "";
    width: 1px;
    border-radius: var(--radius-full);
    align-self: stretch;
    min-height: 1.25rem;
    background-color: var(--border-primary);
  }
  .rte__btn {
    display: inline-flex;
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: 0;
    color: var(--text-quaternary);
    background-color: transparent;
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .rte__btn > i, .rte__btn > svg {
    pointer-events: none;
    font-size: 1.125rem;
    line-height: 1;
  }
  .rte__btn:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-tertiary);
  }
  .rte__btn[aria-pressed="true"], .rte__btn.is-active {
    background-color: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .rte__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .rte__btn:disabled, .rte__btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .rte__color {
    position: relative;
    display: inline-flex;
  }
  .rte__color-swatch {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.1);
    background-color: var(--rte-color, var(--text-primary));
  }
  .rte__color-pop {
    position: absolute;
    left: 0;
    z-index: 50;
    margin-top: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3);
    top: 100%;
    background-color: var(--bg-primary-alt);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
  }
  .rte__color-pop[hidden] {
    display: none;
  }
  .rte__swatch-grid {
    display: grid;
    gap: var(--spacing);
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .rte__swatch {
    display: inline-flex;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    padding: 0;
    background-color: var(--rte-color);
    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.1);
  }
  .rte__swatch:focus-visible, .rte__swatch[aria-pressed="true"] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .rte__color-custom {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .rte__color-custom-label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .rte__color-input {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 0.5);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-input);
  }
  .rte__select {
    display: inline-flex;
    height: calc(var(--spacing) * 9);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
  }
  .rte__select:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .rte__select > i {
    color: var(--text-quaternary);
    font-size: 1rem;
  }
  .rte__select select {
    width: 100%;
    cursor: pointer;
    appearance: none;
    background-color: transparent;
    padding-right: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-outline-style: none;
    outline-style: none;
    color: inherit;
  }
  .rte__select--family {
    min-width: 9rem;
  }
  .rte__select--size {
    min-width: 5rem;
  }
  .rte__content {
    position: relative;
    width: 100%;
    overflow: auto;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 5);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    resize: vertical;
    min-height: 10rem;
    scroll-padding-block: 0.75rem;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    caret-color: var(--border-focus);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease);
    outline: none;
  }
  .rte__content::selection, .rte__content *::selection {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 12%, transparent);
    }
  }
  .rte__content:focus, .rte__content:focus-visible {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .rte__content[data-rte-empty]::before {
    content: attr(data-placeholder);
    pointer-events: none;
    position: absolute;
    color: var(--text-placeholder);
  }
  .rte__content::-webkit-resizer {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2L2 10' stroke='%23D5D7DA' stroke-linecap='round'/%3E%3Cpath d='M11 7L7 11' stroke='%23D5D7DA' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }
  .rte__content > *:first-child {
    margin-top: 0;
  }
  .rte__content > *:last-child {
    margin-bottom: 0;
  }
  .rte__content p {
    margin: 0 0 0.5rem;
  }
  .rte__content h1 {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0.75rem 0 0.5rem;
  }
  .rte__content h2 {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0.75rem 0 0.5rem;
  }
  .rte__content h3 {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin: 0.75rem 0 0.5rem;
  }
  .rte__content ul {
    list-style-type: disc;
    margin: 0 0 0.5rem 1.75rem;
  }
  .rte__content ol {
    list-style-type: decimal;
    margin: 0 0 0.5rem 1.75rem;
  }
  .rte__content blockquote {
    margin-block: calc(var(--spacing) * 3.5);
    padding-left: calc(var(--spacing) * 4);
    border-left: 4px solid var(--border-secondary);
    color: var(--text-secondary);
  }
  .rte__content a {
    color: var(--text-primary);
    text-decoration: underline;
  }
  .rte__content img {
    margin-block: calc(var(--spacing) * 3);
    height: auto;
    max-width: 100%;
    border-radius: var(--radius-md);
  }
  .rte--sm .rte__content {
    min-height: 6rem;
  }
  .rte--md .rte__content {
    min-height: 10rem;
  }
  .rte--lg .rte__content {
    min-height: 16rem;
  }
  .rte.is-disabled .rte__content, .rte__content[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .rte.is-invalid .rte__content, .rte__content[aria-invalid="true"] {
    box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-xs);
  }
  .rte.is-invalid .rte__content:focus, .rte__content[aria-invalid="true"]:focus {
    box-shadow: inset 0 0 0 2px var(--border-input-error), var(--shadow-xs);
  }
  .rte__content[readonly], .rte.is-readonly .rte__content {
    resize: none;
  }
  .rte__hint {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .rte__hint--count {
    font-variant-numeric: tabular-nums;
  }
  .rte__hint--error {
    color: var(--border-danger);
  }
  .rte__hint--info {
    color: var(--border-focus);
  }
  .rte__bubble {
    position: fixed;
    z-index: 50;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 1.5);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    transform-origin: bottom;
    animation: rte-bubble-in var(--duration-fast, 100ms) var(--ease-out, ease-out);
  }
  @media (min-width: 768px) {
    .rte__bubble {
      flex-wrap: nowrap;
    }
  }
  .rte__bubble[hidden] {
    display: none;
  }
  @keyframes rte-bubble-in {
    from {
      opacity: 0;
      transform: translateY(2px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte__content::-webkit-resizer {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2L2 10' stroke='%23373A41' stroke-linecap='round'/%3E%3Cpath d='M11 7L7 11' stroke='%23373A41' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte__swatch, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte__color-swatch {
    box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.14);
  }
  @media (prefers-reduced-motion: reduce) {
    .rte__content, .rte__btn {
      transition: none;
    }
    .rte__bubble {
      animation: none;
    }
  }
}
@layer utilities {
  .rte-change {
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0 0.125rem;
    text-decoration-thickness: from-font;
    text-underline-offset: 2px;
    cursor: default;
  }
  .rte-change--ins {
    color: var(--text-success);
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 12%, transparent);
    }
    text-decoration-line: underline;
    text-decoration-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in oklch, var(--text-success) 70%, transparent);
    }
  }
  .rte-change--del {
    color: var(--text-danger);
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 12%, transparent);
    }
    text-decoration-line: line-through;
    text-decoration-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in oklch, var(--text-danger) 70%, transparent);
    }
  }
  .rte-change.is-active, .rte-change[aria-current="true"] {
    box-shadow: inset 0 0 0 1px currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, currentColor 55%, transparent);
    }
  }
  .rte-change--ins.is-active, .rte-change--ins[aria-current="true"] {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 20%, transparent);
    }
  }
  .rte-change--del.is-active, .rte-change--del[aria-current="true"] {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 20%, transparent);
    }
  }
  .rte-change:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte-change--ins {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 18%, transparent);
    }
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte-change--del {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 18%, transparent);
    }
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte-change--ins.is-active, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte-change--ins[aria-current="true"] {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 28%, transparent);
    }
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte-change--del.is-active, :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte-change--del[aria-current="true"] {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 28%, transparent);
    }
  }
}
@layer utilities {
  .rte-merge-field {
    --rte-merge-accent: var(--text-info);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    vertical-align: baseline;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    padding: 0 0.375rem;
    font-size: 0.875em;
    font-weight: 500;
    line-height: 1.5;
    color: var(--rte-merge-accent);
    background-color: var(--rte-merge-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--rte-merge-accent) 12%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--rte-merge-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--rte-merge-accent) 22%, transparent);
    }
    cursor: default;
  }
  .rte-merge-field > i, .rte-merge-field > [class*="fa-"] {
    pointer-events: none;
    font-size: 0.85em;
    opacity: 0.75;
  }
  .rte-merge-field:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .rte-merge-field--resolved {
    box-shadow: none;
    font-weight: 600;
    padding: 0 0.125rem;
    color: inherit;
    background-color: var(--rte-merge-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--rte-merge-accent) 14%, transparent);
    }
  }
}
@layer utilities {
  .rte-selection {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 20%, transparent);
    }
    color: inherit;
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0 0.0625rem;
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .rte-selection {
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 30%, transparent);
    }
  }
}
@layer utilities {
  .md-doc {
    display: grid;
    gap: calc(var(--spacing) * 8);
  }
  @media (min-width: 1024px) {
    .md-doc {
      grid-template-columns: minmax(0, 1fr) 16rem;
    }
  }
  .md-prose {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.7;
  }
  .md-prose > * + * {
    margin-top: 1rem;
  }
  .md-prose > :first-child {
    margin-top: 0;
  }
  .md-prose > :last-child {
    margin-bottom: 0;
  }
  .md-prose h1, .md-prose h2, .md-prose h3, .md-prose h4 {
    color: var(--text-primary);
    scroll-margin-top: 6rem;
  }
  .md-prose h1 {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
  }
  .md-prose h2 {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
  }
  .md-prose h3 {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
  }
  .md-prose h4 {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }
  .md-prose > h1 + *, .md-prose > h2 + *, .md-prose > h3 + *, .md-prose > h4 + * {
    margin-top: 0.5rem;
  }
  .md-prose > * + h1, .md-prose > * + h2, .md-prose > * + h3, .md-prose > * + h4 {
    margin-top: 2rem;
  }
  .md-prose h2 {
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-divider);
  }
  .md-prose strong {
    font-weight: 600;
    color: var(--text-primary);
  }
  .md-prose em {
    font-style: italic;
  }
  .md-prose a {
    color: var(--text-info);
    text-decoration: underline;
    text-underline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .md-prose a:hover {
    text-decoration-thickness: 2px;
  }
  .md-prose a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .md-prose code {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .md-prose .code-snippet code, .md-prose .code-snippet__code, .md-prose pre code {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    font-size: inherit;
  }
  .md-prose ul, .md-prose ol {
    padding-left: 1.5rem;
  }
  .md-prose ul {
    list-style: disc;
  }
  .md-prose ol {
    list-style: decimal;
  }
  .md-prose li {
    margin-top: 0.375rem;
  }
  .md-prose li::marker {
    color: var(--text-tertiary);
  }
  .md-prose li > ul, .md-prose li > ol {
    margin-top: 0.375rem;
  }
  .md-prose li.md-task {
    list-style: none;
    margin-left: -1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .md-prose blockquote {
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--border-secondary);
    color: var(--text-secondary);
  }
  .md-prose blockquote > * + * {
    margin-top: 0.5rem;
  }
  .md-prose hr {
    border: 0;
    border-top: 1px solid var(--border-divider);
    margin: 2rem 0;
  }
  .md-prose .md-table-scroll {
    overflow-x: auto;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--border-default);
  }
  .md-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }
  .md-prose th, .md-prose td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-divider);
  }
  .md-prose thead th {
    color: var(--text-secondary);
    font-weight: 600;
    background-color: var(--bg-secondary);
  }
  .md-prose tbody tr:last-child td {
    border-bottom: 0;
  }
  .md-prose td {
    color: var(--text-primary);
  }
  .md-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
  }
  .md-callout {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 3);
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--border-secondary);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .md-callout__icon {
    flex-shrink: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .md-callout__body {
    min-width: 0;
  }
  .md-callout__body > * + * {
    margin-top: 0.375rem;
  }
  .md-callout__title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.4;
  }
  .md-callout--note {
    border-left-color: var(--border-info);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    background-color: var(--bg-info);
  }
  .md-callout--note .md-callout__icon, .md-callout--note .md-callout__title {
    color: var(--text-info);
  }
  .md-callout--tip {
    border-left-color: var(--border-success);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    background-color: var(--bg-success);
  }
  .md-callout--tip .md-callout__icon, .md-callout--tip .md-callout__title {
    color: var(--text-success);
  }
  .md-callout--warning {
    border-left-color: var(--border-warning);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    background-color: var(--bg-warning);
  }
  .md-callout--warning .md-callout__icon, .md-callout--warning .md-callout__title {
    color: var(--text-warning);
  }
  .md-callout--danger {
    border-left-color: var(--border-danger);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
    background-color: var(--bg-danger);
  }
  .md-callout--danger .md-callout__icon, .md-callout--danger .md-callout__title {
    color: var(--text-danger);
  }
  .md-toc {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  @media (min-width: 1024px) {
    .md-toc {
      position: sticky;
      top: 6rem;
      align-self: start;
      max-height: calc(100vh - 8rem);
      overflow-y: auto;
    }
  }
  .md-toc__title {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
  }
  .md-toc__list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    list-style: none;
    padding: 0;
    border-left: 1px solid var(--border-divider);
  }
  .md-toc__link {
    display: block;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    padding: 0.25rem 0 0.25rem 0.75rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease), border-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .md-toc__link--sub {
    padding-left: 1.5rem;
  }
  .md-toc__link:hover {
    color: var(--text-secondary);
  }
  .md-toc__link[aria-current="location"], .md-toc__link[aria-current="true"] {
    color: var(--text-info);
    border-left-color: var(--border-focus);
    font-weight: 600;
  }
  .md-toc__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .md-toc__link {
      transition: none;
    }
  }
}
@layer utilities {
  .annotation-stage {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--bg-secondary);
    cursor: crosshair;
  }
  .annotation-stage__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .annotation-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .annotation-pin {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--bg-info-solid);
    color: var(--alpha-white-100);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 0 0 2px var(--alpha-white-100), var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .annotation-pin:hover {
    transform: translate(-50%, -50%) scale(1.08);
  }
  .annotation-pin.is-active, .annotation-pin[aria-pressed='true'] {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: 0 0 0 2px var(--alpha-white-100), 0 0 0 4px var(--border-focus), var(--shadow-sm);
  }
  .annotation-pin:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .annotation-pin--resolved {
    background-color: var(--bg-success-solid);
    color: var(--alpha-white-100);
  }
  .annotation-pin--inline {
    position: static;
    transform: none;
    flex: 0 0 auto;
  }
  .annotation-pin--inline:hover {
    transform: scale(1.08);
  }
  .annotation-rect {
    position: absolute;
    z-index: 1;
    border-radius: var(--radius-sm);
    pointer-events: auto;
    box-shadow: inset 0 0 0 2px var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, transparent);
    }
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
  .annotation-rect.is-active, .annotation-rect[aria-pressed='true'] {
    box-shadow: inset 0 0 0 2px var(--border-focus);
    background-color: var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--border-focus) 14%, transparent);
    }
  }
  .annotation-arrow {
    position: absolute;
    z-index: 1;
    height: 2px;
    transform-origin: left center;
    background-color: var(--text-info);
    pointer-events: auto;
  }
  .annotation-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid var(--text-info);
  }
  @media (prefers-reduced-motion: reduce) {
    .annotation-pin, .annotation-pin--inline, .annotation-rect {
      transition: none;
    }
    .annotation-pin:hover, .annotation-pin--inline:hover {
      transform: translate(-50%, -50%);
    }
    .annotation-pin--inline:hover {
      transform: none;
    }
  }
}
@layer utilities {
  .sheet-formula-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    overflow: hidden;
  }
  .sheet-formula-bar:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .sheet-formula-bar__ref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 6px 10px;
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    background-color: var(--bg-primary-subtle);
    box-shadow: inset -1px 0 0 var(--border-input);
  }
  .sheet-formula-bar__fx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-family: 'Space Mono', monospace;
    font-style: italic;
    font-size: 12.5px;
    color: var(--text-tertiary);
    box-shadow: inset -1px 0 0 var(--border-input);
  }
  .sheet-formula-bar__input {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 12px;
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    outline: none;
  }
  .sheet-formula-bar__input::placeholder {
    color: var(--text-placeholder);
    opacity: 1;
  }
  .sheet-grid .sheet-grid__colhead {
    text-align: center;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
  }
  .sheet-grid .sheet-grid__rowhead, .sheet-grid .sheet-grid__corner {
    text-align: center;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--bg-primary-subtle);
    user-select: none;
    font-variant-numeric: tabular-nums;
  }
  .sheet-grid .sheet-grid__corner {
    width: 40px;
    min-width: 40px;
  }
  .sheet-grid .sheet-grid__rowhead {
    width: 40px;
    min-width: 40px;
  }
  .sheet-grid .sheet-grid__colhead.is-active, .sheet-grid .sheet-grid__rowhead.is-active {
    color: var(--text-primary);
    background-color: var(--bg-table-row-selected, var(--bg-info-subtle));
  }
  .sheet-grid .data-grid__cell.is-range {
    background-color: var(--bg-table-row-selected, var(--bg-info-subtle));
  }
  .sheet-grid .data-grid__cell.is-range:hover {
    background-color: var(--bg-table-row-selected, var(--bg-info-subtle));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-table-row-selected, var(--bg-info-subtle)) 80%, var(--text-primary) 6%);
    }
  }
  .sheet-grid .sheet-fill-handle {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 7px;
    height: 7px;
    border-radius: 1px;
    background-color: var(--border-focus);
    box-shadow: 0 0 0 1px var(--bg-primary);
    cursor: crosshair;
    z-index: 7;
  }
  @media (prefers-reduced-motion: reduce) {
    .sheet-grid .data-grid__cell.is-range {
      transition: none;
    }
  }
}
@layer utilities {
  .blocks-editor {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
  }
  .block {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    padding: 8px;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-default, ease), background-color var(--duration-fast, 120ms) var(--ease-default, ease), opacity var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .block:hover {
    background-color: var(--bg-primary-subtle);
    box-shadow: inset 0 0 0 1px var(--border-input);
  }
  .block.is-selected {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .block.is-dragging {
    opacity: 0.85;
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-lg);
  }
  .block__gutter {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
  }
  .block .kanban-handle {
    opacity: 0;
  }
  .block:hover .kanban-handle, .block:focus-within .kanban-handle, .block.is-selected .kanban-handle {
    opacity: 1;
  }
  .block__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .block__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .block:hover .block__toolbar, .block:focus-within .block__toolbar, .block.is-selected .block__toolbar {
    opacity: 1;
  }
  .block__type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
  }
  .block__type > i {
    font-size: 12px;
  }
  .block__controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }
  .block__ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease), color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .block__ctrl:hover {
    background-color: var(--bg-primary-hover, var(--bg-primary-subtle));
    color: var(--text-primary);
  }
  .block__ctrl:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .block__ctrl--danger:hover {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .block__body {
    min-width: 0;
    color: var(--text-primary);
  }
  .block__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary-subtle);
    box-shadow: inset 0 0 0 1px var(--border-input);
    color: var(--text-tertiary);
  }
  .block__media > i {
    font-size: 22px;
    opacity: 0.7;
  }
  .block__media-label {
    font-size: 12px;
  }
  .block__callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background-color: var(--bg-info-subtle);
    box-shadow: inset 0 0 0 1px var(--border-info);
    color: var(--text-primary);
  }
  .block__callout > i {
    margin-top: 2px;
    color: var(--text-info);
  }
  .block__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 640px) {
    .block__columns {
      grid-template-columns: 1fr;
    }
  }
  .blocks-editor__insert {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
  }
  .blocks-editor__insert::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 1px;
    background-color: var(--border-focus);
    opacity: 0;
    transition: opacity var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .blocks-editor__insert:hover::before, .blocks-editor__insert:focus-within::before {
    opacity: 0.5;
  }
  .blocks-editor__insert-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    color: var(--text-tertiary);
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-fast, 120ms) var(--ease-default, ease), color var(--duration-fast, 120ms) var(--ease-default, ease), box-shadow var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .blocks-editor__insert:hover .blocks-editor__insert-btn, .blocks-editor__insert:focus-within .blocks-editor__insert-btn {
    opacity: 1;
  }
  .blocks-editor__insert-btn:hover {
    color: var(--border-focus);
    box-shadow: inset 0 0 0 1px var(--border-focus), var(--shadow-xs);
  }
  .blocks-editor__insert-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    opacity: 1;
  }
  .blocks-menu {
    width: 260px;
    padding: 6px;
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
  }
  .blocks-menu__label {
    padding: 6px 8px 4px;
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
  }
  .blocks-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .blocks-menu__item:hover {
    background-color: var(--bg-primary-subtle);
  }
  .blocks-menu__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .blocks-menu__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary-subtle);
    box-shadow: inset 0 0 0 1px var(--border-input);
    color: var(--text-secondary);
    font-size: 13px;
  }
  .blocks-menu__item-text {
    min-width: 0;
  }
  .blocks-menu__item-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
  }
  .blocks-menu__item-desc {
    font-size: 11.5px;
    color: var(--text-tertiary);
    line-height: 1.3;
  }
  @media (prefers-reduced-motion: reduce) {
    .block, .block__toolbar, .blocks-editor__insert::before, .blocks-editor__insert-btn, .block__ctrl, .blocks-menu__item {
      transition: none;
    }
  }
}
@layer utilities {
  .code-editor .code-snippet__line.is-active-line {
    background-color: var(--bg-primary-subtle);
    box-shadow: inset 3px 0 0 var(--border-focus);
  }
  .code-editor__statusbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 5px 12px;
    border-top: 1px solid var(--border-default);
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.6875rem;
    line-height: 1.4;
  }
  .code-editor__statusbar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
  }
  .code-editor__statusbar-item--push {
    margin-left: auto;
  }
  .code-editor__statusbar-item > i, .code-editor__statusbar-item > svg {
    font-size: 0.75rem;
    opacity: 0.8;
  }
  .code-editor__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
  }
  .code-editor__breadcrumb-sep {
    opacity: 0.5;
  }
  .code-editor__breadcrumb-current {
    color: var(--text-secondary);
    font-weight: 600;
  }
}
@layer utilities {
  .form-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 42rem;
  }
  .form-shell--narrow {
    max-width: 32rem;
  }
  .form-shell--wide {
    max-width: 60rem;
  }
  .form-shell--full {
    max-width: none;
  }
  .form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
  }
  .form-grid > * {
    grid-column: span 12;
  }
  .fg-1 {
    grid-column: span 1;
  }
  .fg-2 {
    grid-column: span 2;
  }
  .fg-3 {
    grid-column: span 3;
  }
  .fg-4 {
    grid-column: span 4;
  }
  .fg-5 {
    grid-column: span 5;
  }
  .fg-6 {
    grid-column: span 6;
  }
  .fg-7 {
    grid-column: span 7;
  }
  .fg-8 {
    grid-column: span 8;
  }
  .fg-9 {
    grid-column: span 9;
  }
  .fg-10 {
    grid-column: span 10;
  }
  .fg-11 {
    grid-column: span 11;
  }
  .fg-12 {
    grid-column: span 12;
  }
  .form-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
  }
  .form-inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
  }
  .form-inline-fields > * {
    flex: 1 1 12rem;
  }
  .form-inline-fields > .btn, .form-inline-fields > button, .form-inline-fields > [class*="btn-"] {
    flex: 0 0 auto;
  }
  .form-inline-fields .form-control, .form-inline-fields [data-combobox] .combobox__control {
    min-height: 2rem;
  }
  @media (max-width: 640px) {
    .form-grid > [class*="fg-"] {
      grid-column: span 12;
    }
    .form-two-col {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .field-group {
    display: block;
    min-inline-size: 0;
    padding: 1.125rem 1.25rem 1.25rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .field-group--flush {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .field-group__legend {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0;
  }
  .field-group__legend .field-group__hint {
    font-weight: 400;
    color: var(--text-tertiary);
  }
  .field-group__body {
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .field-repeat {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .field-repeat__row {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
  }
  .field-repeat__row > .form-group, .field-repeat__row > .controls {
    flex: 1 1 auto;
    margin: 0;
  }
  .field-repeat__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .field-repeat__remove:hover {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .field-repeat__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .field-repeat__add {
    align-self: flex-start;
  }
  .form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding-top: 0.25rem;
  }
  .form-actions--start {
    justify-content: flex-start;
  }
  .form-actions--center {
    justify-content: center;
  }
  .form-actions--split {
    justify-content: space-between;
  }
  .form-actions__hint {
    margin-right: auto;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .form-actions--sticky {
    position: sticky;
    bottom: 0;
    margin-top: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 var(--border-divider), var(--shadow-sm);
  }
  .form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-divider);
  }
  .form-header__titles {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  .form-header__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .form-header__desc {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .form-header__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .form-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
  }
  @media (max-width: 640px) {
    .form-header {
      flex-direction: column;
    }
    .form-header__actions {
      width: 100%;
    }
  }
  .form-autosave {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-tertiary);
  }
  .form-autosave__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--text-quaternary);
    flex: 0 0 auto;
  }
  .form-autosave i {
    font-size: 0.8125rem;
  }
  .form-autosave.is-dirty {
    color: var(--text-warning);
  }
  .form-autosave.is-dirty .form-autosave__dot {
    background: var(--text-warning);
  }
  .form-autosave.is-saving {
    color: var(--text-info);
  }
  .form-autosave.is-saving .form-autosave__dot {
    background: var(--text-info);
    animation: form-autosave-pulse 1s var(--ease-default) infinite;
  }
  .form-autosave.is-saved {
    color: var(--text-success);
  }
  .form-autosave.is-saved .form-autosave__dot {
    background: var(--text-success);
  }
  .form-autosave.is-error {
    color: var(--text-danger);
  }
  .form-autosave.is-error .form-autosave__dot {
    background: var(--text-danger);
  }
  @keyframes form-autosave-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.35;
    }
  }
  .form-dirty-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-lg);
    background: var(--bg-warning-subtle);
    box-shadow: inset 0 0 0 1px var(--border-warning);
    font-size: 0.8125rem;
    color: var(--text-warning);
  }
  .form-dirty-bar__label {
    margin-right: auto;
    font-weight: 500;
  }
  .form-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .form-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    font-size: 1.125rem;
    color: var(--text-tertiary);
  }
  .form-state--success .form-state__icon {
    background: var(--bg-success-subtle);
    color: var(--text-success);
    box-shadow: inset 0 0 0 1px var(--border-success);
  }
  .form-state--error .form-state__icon {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
    box-shadow: inset 0 0 0 1px var(--border-danger);
  }
  .form-state__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .form-state__desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    max-width: 24rem;
  }
  .form-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .form-skeleton__row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .form-skeleton__label, .form-skeleton__field {
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: form-skeleton-shimmer 1.4s var(--ease-default) infinite;
  }
  .form-skeleton__label {
    width: 30%;
    height: 0.75rem;
  }
  .form-skeleton__field {
    width: 100%;
    height: 2.25rem;
  }
  @keyframes form-skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .form-autosave.is-saving .form-autosave__dot, .form-skeleton__label, .form-skeleton__field {
      animation: none;
    }
  }
}
@layer utilities {
  .field-validation {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.3125rem;
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .field-validation i {
    margin-top: 0.0625rem;
    flex: 0 0 auto;
  }
  .field-validation--error {
    color: var(--text-danger);
  }
  .field-validation--success {
    color: var(--text-success);
  }
  .field-validation--warning {
    color: var(--text-warning);
  }
  .field-validation--info {
    color: var(--text-info);
  }
  .form-group:not(.is-validated) .field-validation {
    display: none;
  }
  .validation-summary {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    color: var(--text-danger);
  }
  .validation-summary__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-danger);
  }
  .validation-summary__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .validation-summary__item {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-danger);
  }
  .validation-summary__link {
    color: var(--text-danger);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
  }
  .validation-summary__link:hover {
    text-decoration-thickness: 2px;
  }
  .validation-summary--success {
    background: none;
    box-shadow: none;
    color: var(--text-success);
  }
  .validation-summary--success .validation-summary__head, .validation-summary--success .validation-summary__item, .validation-summary--success .validation-summary__link {
    color: var(--text-success);
  }
  .field-flash {
    animation: field-flash 1.2s var(--ease-default) 1;
  }
  @keyframes field-flash {
    0%, 100% {
      box-shadow: inset 0 0 0 1px var(--border-input);
    }
    20%, 60% {
      box-shadow: inset 0 0 0 2px var(--border-focus);
    }
  }
  .password-strength {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .password-strength__meter {
    display: flex;
    gap: 0.25rem;
    height: 0.3125rem;
  }
  .password-strength__seg {
    flex: 1 1 0;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    transition: background var(--duration-fast) var(--ease-default);
  }
  .password-strength[data-score="1"] .password-strength__seg:nth-child(-n+1), .password-strength[data-score="2"] .password-strength__seg:nth-child(-n+2), .password-strength[data-score="3"] .password-strength__seg:nth-child(-n+3), .password-strength[data-score="4"] .password-strength__seg {
    background: var(--strength-fill, var(--bg-brand-solid));
  }
  .password-strength[data-score="1"] {
    --strength-fill: var(--bg-danger-solid);
  }
  .password-strength[data-score="2"] {
    --strength-fill: var(--bg-warning-solid);
  }
  .password-strength[data-score="3"] {
    --strength-fill: var(--bg-info-solid);
  }
  .password-strength[data-score="4"] {
    --strength-fill: var(--bg-success-solid);
  }
  .password-strength__label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .password-strength__label b {
    color: var(--text-secondary);
    font-weight: 600;
  }
  .password-strength__rules {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .password-strength__rule {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .password-strength__rule i {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    width: 0.875rem;
    text-align: center;
  }
  .password-strength__rule.is-met {
    color: var(--text-success);
  }
  .password-strength__rule.is-met i {
    color: var(--text-success);
  }
  .field-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-left: 0.3125rem;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    line-height: 1;
    cursor: help;
    vertical-align: -0.2em;
    transition: background var(--duration-fast, 120ms) var(--ease-default, ease), color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .field-help > i {
    line-height: 1;
    display: block;
  }
  .field-help:hover {
    background: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .field-help:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .field-description {
    margin-top: 0.1875rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.45;
  }
  .field-hint-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .field-optional {
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--text-quaternary);
  }
  .required-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .required-legend__mark {
    color: var(--text-danger);
    font-weight: 600;
  }
  .char-counter {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
    white-space: nowrap;
  }
  .char-counter.is-near {
    color: var(--text-warning);
  }
  .char-counter.is-over {
    color: var(--text-danger);
    font-weight: 600;
  }
  @media (prefers-reduced-motion: reduce) {
    .password-strength__seg {
      transition: none;
    }
    .field-flash {
      animation: none;
    }
  }
}
@layer utilities {
  .wizard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
  }
  .wizard--split {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
  @media (max-width: 720px) {
    .wizard--split {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .form-shell.wizard {
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  @media (max-width: 640px) {
    .form-shell.wizard {
      padding: 1rem;
    }
  }
  .wizard-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .wizard-step {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4375rem;
    text-align: center;
    min-width: 0;
  }
  .wizard-step::before, .wizard-step::after {
    content: "";
    position: absolute;
    top: 0.875rem;
    height: 2px;
    background: var(--border-divider);
    width: 50%;
  }
  .wizard-step::before {
    left: 0;
  }
  .wizard-step::after {
    right: 0;
  }
  .wizard-step:first-child::before {
    display: none;
  }
  .wizard-step:last-child::after {
    display: none;
  }
  .wizard-step.is-complete::before, .wizard-step.is-complete::after, .wizard-step.is-current::before {
    background: var(--bg-brand-solid);
  }
  .wizard-step__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 2px var(--border-divider);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .wizard-step.is-current .wizard-step__marker {
    background: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 2px var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .wizard-step.is-complete .wizard-step__marker {
    background: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 2px var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .wizard-step__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
  }
  .wizard-step.is-current .wizard-step__label, .wizard-step.is-complete .wizard-step__label {
    color: var(--text-primary);
  }
  .wizard-step__hint {
    font-size: 0.6875rem;
    color: var(--text-quaternary);
  }
  @media (max-width: 640px) {
    .wizard-step__label, .wizard-step__hint {
      display: none;
    }
    .wizard-step.is-current .wizard-step__label {
      display: block;
    }
  }
  .wizard-step--nav {
    cursor: pointer;
  }
  .wizard-step--nav:focus-visible {
    outline: none;
  }
  .wizard-step--nav:focus-visible .wizard-step__marker {
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .wizard-rail {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .wizard-rail .wizard-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
  }
  .wizard-rail .wizard-step::before, .wizard-rail .wizard-step::after {
    display: none;
  }
  .wizard-rail .wizard-step__marker {
    flex: 0 0 auto;
  }
  .wizard-rail .wizard-step:not(:last-child) .wizard-step__marker::after {
    content: "";
    position: absolute;
    top: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% - 1.75rem + 1.25rem);
    background: var(--border-divider);
  }
  .wizard-rail .wizard-step.is-complete .wizard-step__marker::after {
    background: var(--bg-brand-solid);
  }
  .wizard-rail .wizard-step__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .wizard-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .wizard-progress__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .wizard-progress__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .wizard-progress__count {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .wizard-progress__track {
    height: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    overflow: hidden;
  }
  .wizard-progress__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--bg-brand-solid);
    transition: width var(--duration-normal) var(--ease-default);
  }
  .wizard-progress--stepped {
    gap: 0.875rem;
  }
  .wizard-progress--stepped .wizard-steps {
    margin-bottom: 0.125rem;
  }
  .wizard-pane {
    display: none;
  }
  .wizard-pane.is-active {
    display: block;
    animation: wizard-pane-in var(--duration-normal) var(--ease-default);
  }
  @keyframes wizard-pane-in {
    from {
      opacity: 0;
      transform: translateX(0.5rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .wizard-pane__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
  }
  .wizard-pane__desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
  }
  .wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-divider);
  }
  .wizard-review {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .wizard-review__group {
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    overflow: hidden;
  }
  .wizard-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-divider);
  }
  .wizard-review__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .wizard-review__edit {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .wizard-review__edit:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
  }
  .wizard-review__edit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    border-radius: var(--radius-sm);
  }
  .wizard-review__body {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.375rem 1rem;
    padding: 0.75rem 0.875rem;
  }
  .wizard-review__key {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .wizard-review__val {
    font-size: 0.8125rem;
    color: var(--text-primary);
  }
  @media (max-width: 560px) {
    .wizard-review__body {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.125rem;
    }
    .wizard-review__key {
      margin-top: 0.5rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .wizard-step__marker, .wizard-progress__fill, .wizard-pane.is-active {
      transition: none;
      animation: none;
    }
  }
}
@layer utilities {
  .upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1.5px var(--border-divider);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  }
  .upload-dropzone:hover {
    background: var(--bg-tertiary);
  }
  .upload-dropzone:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .upload-dropzone.is-dragover {
    background: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 1.5px var(--bg-brand-solid);
  }
  .upload-dropzone.is-dragover .upload-dropzone__icon, .upload-dropzone.is-dragover .upload-dropzone__title, .upload-dropzone.is-dragover .upload-dropzone__hint {
    color: var(--text-on-brand);
  }
  .upload-dropzone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    color: var(--text-tertiary);
    font-size: 1.125rem;
  }
  .upload-dropzone__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .upload-dropzone__title .upload-dropzone__browse {
    color: var(--text-link);
  }
  .upload-dropzone__hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .upload-dropzone--compact {
    flex-direction: row;
    padding: 0.875rem 1rem;
    text-align: left;
    gap: 0.75rem;
  }
  .upload-dropzone--compact .upload-dropzone__icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.9375rem;
  }
  .upload-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .upload-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .upload-item__thumb {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    color: var(--text-tertiary);
    font-size: 1rem;
    overflow: hidden;
  }
  .upload-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .upload-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .upload-item__name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .upload-item__meta {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .upload-item__bar {
    height: 0.25rem;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    overflow: hidden;
  }
  .upload-item__bar > span {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--bg-brand-solid);
    transition: width var(--duration-normal) var(--ease-default);
  }
  .upload-item__status {
    flex: 0 0 auto;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .upload-item__status .spinner {
    --spinner-ink: currentColor;
  }
  .upload-item.is-uploading .upload-item__status {
    color: var(--text-info);
  }
  .upload-item.is-done .upload-item__status {
    color: var(--text-success);
  }
  .upload-item.is-error .upload-item__status, .upload-item.is-error .upload-item__meta {
    color: var(--text-danger);
  }
  .upload-item.is-error .upload-item__bar > span {
    background: var(--bg-danger-solid);
  }
  .upload-item__remove {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .upload-item__remove:hover {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .upload-item__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .upload-avatar {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
  .upload-avatar__figure {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 auto;
  }
  .upload-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 1.5rem;
  }
  .upload-avatar__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-default);
    font-size: 1rem;
  }
  .upload-avatar__figure:hover .upload-avatar__overlay, .upload-avatar__figure:focus-within .upload-avatar__overlay {
    opacity: 1;
  }
  .upload-avatar__actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .upload-avatar__hint {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .upload-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .upload-inline__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    font-size: 0.75rem;
    color: var(--text-secondary);
  }
  .upload-inline__chip i {
    color: var(--text-tertiary);
  }
  .upload-inline__chip-remove {
    border: 0;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    line-height: 0;
  }
  .upload-inline__chip-remove:hover {
    color: var(--text-danger);
  }
  .upload-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 0.625rem;
  }
  .upload-gallery__tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .upload-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .upload-gallery__tile-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--alpha-white-20);
    color: var(--alpha-white-100);
    backdrop-filter: blur(6px);
    cursor: pointer;
    font-size: 0.6875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .upload-gallery__tile-remove:hover {
    background: var(--alpha-white-30);
    color: var(--text-danger);
  }
  .upload-gallery__tile-remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .upload-gallery__cover {
    position: absolute;
    bottom: 0.25rem;
    left: 0.25rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-full);
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-size: 0.625rem;
    font-weight: 600;
  }
  .upload-gallery__add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1.5px var(--border-divider);
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 1rem;
    transition: background var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  }
  .upload-gallery__add:hover {
    background: var(--bg-tertiary);
  }
  .upload-gallery__add:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .upload-gallery__add span {
    font-size: 0.6875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .upload-dropzone, .upload-item__bar > span, .upload-avatar__overlay, .upload-gallery__add {
      transition: none;
    }
  }
}
@layer utilities {
  .tags-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3125rem;
    min-height: 2rem;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radius-lg);
    background: var(--bg-input, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    cursor: text;
    transition: box-shadow var(--duration-fast) var(--ease-default);
  }
  .tags-input:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
  }
  .tags-input.is-focused {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .tags-input__token {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .tags-input__token-remove {
    border: 0;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    line-height: 0;
    font-size: 0.75rem;
  }
  .tags-input__token-remove:hover {
    color: var(--text-danger);
  }
  .tags-input__field {
    flex: 1 1 3rem;
    min-width: 3rem;
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--text-primary);
    padding: 0.1875rem 0.25rem;
  }
  .tags-input__field::placeholder {
    color: var(--text-input-placeholder, var(--text-tertiary));
  }
  .tags-input--sm {
    min-height: 1.75rem;
    padding: 0.125rem 0.25rem;
    gap: 0.25rem;
  }
  .tags-input--sm .tags-input__token {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.1875rem 0.0625rem 0.4375rem;
  }
  .tags-input--sm .tags-input__field {
    font-size: 0.75rem;
    min-width: 2.5rem;
  }
  .tags-input--lg {
    min-height: 2.75rem;
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
  }
  .tags-input--lg .tags-input__token {
    font-size: 0.8125rem;
    padding: 0.1875rem 0.375rem 0.1875rem 0.625rem;
  }
  .tags-input--lg .tags-input__field {
    font-size: 0.9375rem;
  }
  .tags-input.is-error {
    box-shadow: inset 0 0 0 1px var(--border-input-error);
  }
  .tags-input.is-error.is-focused {
    box-shadow: inset 0 0 0 2px var(--border-input-error-focus);
  }
  .tags-input.is-success {
    box-shadow: inset 0 0 0 1px var(--border-input-success);
  }
  .tags-input.is-disabled {
    background: var(--bg-input-disabled);
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px var(--border-input);
  }
  .tags-input.is-disabled .tags-input__token {
    opacity: 0.6;
  }
  .tags-input.is-disabled .tags-input__field {
    color: var(--text-disabled);
    pointer-events: none;
  }
  .tags-input__token--brand {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .tags-input__token--success {
    background: var(--bg-success-subtle);
    color: var(--text-success);
    box-shadow: inset 0 0 0 1px var(--border-success);
  }
  .tags-input__token--warning {
    background: var(--bg-warning-subtle);
    color: var(--text-warning);
    box-shadow: inset 0 0 0 1px var(--border-warning);
  }
  .tags-input__token--danger {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
    box-shadow: inset 0 0 0 1px var(--border-danger);
  }
  .tags-input__token--info {
    background: var(--bg-info-subtle);
    color: var(--text-info);
    box-shadow: inset 0 0 0 1px var(--border-info);
  }
  .tags-input__token--brand .tags-input__token-remove {
    color: var(--text-on-brand);
  }
  .mentions {
    position: relative;
  }
  .mentions__menu {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 100%;
    margin-top: 0.25rem;
    min-width: 14rem;
    max-height: 14rem;
    overflow: auto;
    border-radius: var(--radius-lg);
    background: var(--bg-dropdown, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-md, var(--shadow-sm));
    padding: 0.25rem;
  }
  .mentions__menu[hidden] {
    display: none;
  }
  .mentions__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .mentions__option.is-active, .mentions__option:hover {
    background: var(--bg-dropdown-hover, var(--bg-tertiary));
    color: var(--text-primary);
  }
  .mentions__avatar {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .mentions__name {
    font-weight: 500;
  }
  .mentions__handle {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .otp-input {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .otp-input__group {
    display: inline-flex;
    gap: 0.4375rem;
  }
  .otp-input__cell {
    width: 2.75rem;
    height: 3.25rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-input, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    transition: box-shadow var(--duration-fast) var(--ease-default);
    outline: none;
  }
  .otp-input__cell:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
  }
  .otp-input__cell:focus {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .otp-input__cell.is-filled {
    box-shadow: inset 0 0 0 1px var(--border-brand);
  }
  .otp-input__sep {
    color: var(--text-quaternary);
    font-weight: 600;
  }
  .otp-input.is-error .otp-input__cell {
    box-shadow: inset 0 0 0 1px var(--border-input-error);
  }
  .otp-input.is-error .otp-input__cell:focus {
    box-shadow: inset 0 0 0 2px var(--border-input-error-focus);
  }
  .otp-input.is-success .otp-input__cell {
    box-shadow: inset 0 0 0 1px var(--border-input-success);
  }
  .otp-input--pin .otp-input__cell {
    -webkit-text-security: disc;
    text-security: disc;
  }
  .otp-input--pin.is-revealed .otp-input__cell {
    -webkit-text-security: none;
    text-security: none;
  }
  .autosize {
    resize: none;
    overflow: hidden;
    min-height: 2.5rem;
    line-height: 1.5;
  }
  .autosize--capped {
    max-height: 9rem;
    overflow-y: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .tags-input, .otp-input__cell {
      transition: none;
    }
  }
}
@layer utilities {
  .currency-input .input-group-text {
    min-width: 2rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  .phone-input__dial {
    min-width: 3.5rem;
  }
  .input-group > [data-combobox] {
    display: inline-flex;
    align-items: stretch;
    align-self: stretch;
    flex: 0 0 auto;
  }
  .input-group > [data-combobox] > .combobox__control {
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    min-height: 100%;
    height: auto;
  }
  .input-group > [data-combobox] > .combobox__trigger {
    background: transparent;
  }
  .input-group.phone-input > .form-control, .input-group.currency-input > .form-control {
    flex: 1 1 auto;
    min-width: 4rem;
  }
  .qty-input {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--radius-lg);
    background: var(--bg-input, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--duration-fast) var(--ease-default);
  }
  .qty-input:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .qty-input__btn {
    flex: 0 0 auto;
    width: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-default);
  }
  .qty-input__btn:hover {
    background: var(--bg-tertiary);
  }
  .qty-input__btn:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
  }
  .qty-input--sm .qty-input__btn {
    width: 1.75rem;
    font-size: 0.75rem;
  }
  .qty-input--sm .qty-input__field {
    width: 2.5rem;
    font-size: 0.8125rem;
  }
  .qty-input--lg .qty-input__btn {
    width: 2.75rem;
    font-size: 1rem;
  }
  .qty-input--lg .qty-input__field {
    width: 4rem;
    font-size: 1.0625rem;
  }
  .qty-input.is-disabled {
    background: var(--bg-input-disabled);
    box-shadow: inset 0 0 0 1px var(--border-input);
  }
  .qty-input.is-disabled .qty-input__field {
    color: var(--text-disabled);
    pointer-events: none;
  }
  .qty-input.is-error {
    box-shadow: inset 0 0 0 1px var(--border-input-error);
  }
  .qty-input__btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .qty-input__field::-webkit-outer-spin-button, .qty-input__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  .qty-input__field {
    width: 3.25rem;
    border: 0;
    background: transparent;
    outline: none;
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }
  .qty-input__unit {
    display: inline-flex;
    align-items: center;
    padding: 0 0.625rem 0 0.25rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .toggle-group {
    display: inline-flex;
    padding: 0.1875rem;
    gap: 0.125rem;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .toggle-group__option {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .toggle-group__option:hover {
    color: var(--text-secondary);
  }
  .toggle-group__option[aria-pressed="true"], .toggle-group__option.is-selected {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  .toggle-group__option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .toggle-group--brand .toggle-group__option[aria-pressed="true"], .toggle-group--brand .toggle-group__option.is-selected {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .toggle-group--stretch {
    display: flex;
    width: 100%;
  }
  .toggle-group--stretch .toggle-group__option {
    flex: 1 1 0;
    justify-content: center;
  }
  .toggle-group--sm {
    padding: 0.125rem;
  }
  .toggle-group--sm .toggle-group__option {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  .toggle-group--lg {
    padding: 0.25rem;
  }
  .toggle-group--lg .toggle-group__option {
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
  }
  .toggle-group__option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .toggle-group__option:disabled:hover {
    color: var(--text-tertiary);
    background: transparent;
  }
  .kv-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .kv-input__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .kv-input__row .form-control {
    flex: 1 1 0;
  }
  .kv-input__key {
    flex: 0 0 40%;
  }
  .kv-input__sep {
    color: var(--text-quaternary);
    flex: 0 0 auto;
  }
  .kv-input__remove {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .kv-input__remove:hover {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .kv-input__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .signature-pad {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 26rem;
  }
  .signature-pad__surface {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: var(--radius-lg);
    background: var(--bg-input, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-input);
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
  }
  .signature-pad__surface:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .signature-pad__canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  .signature-pad__baseline {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 28%;
    border-top: 1px dashed var(--border-divider);
    pointer-events: none;
  }
  .signature-pad__hint {
    position: absolute;
    left: 1rem;
    bottom: calc(28% - 1.25rem);
    font-size: 0.6875rem;
    color: var(--text-quaternary);
    pointer-events: none;
  }
  .signature-pad__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .signature-pad.is-signed .signature-pad__hint {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .qty-input, .qty-input__btn, .toggle-group__option {
      transition: none;
    }
  }
}
@layer utilities {
  .mktg-banner {
    --mktg-banner-bg: var(--bg-secondary);
    --mktg-banner-ring: var(--border-secondary);
    --mktg-banner-border: var(--border-secondary);
    --mktg-banner-title: var(--text-secondary);
    --mktg-banner-text: var(--text-tertiary);
    --mktg-banner-link: var(--text-tertiary);
    --mktg-banner-link-decoration: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-link-decoration: color-mix(in oklch, transparent, var(--text-tertiary) 40%);
    }
    --mktg-banner-icon: var(--text-secondary);
    --mktg-banner-icon-bg: var(--bg-primary);
    --mktg-banner-icon-ring: var(--border-primary);
    --mktg-banner-dismiss: var(--text-tertiary);
    --mktg-banner-dismiss-hover: var(--text-secondary);
    --mktg-banner-dismiss-hover-bg: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-dismiss-hover-bg: color-mix(in oklch, transparent, var(--text-secondary) 8%);
    }
    --mktg-banner-count-bg: var(--bg-primary);
    --mktg-banner-count-ring: var(--border-primary);
    --mktg-banner-count-value: var(--text-primary);
    --mktg-banner-count-label: var(--text-tertiary);
    --mktg-banner-divider: var(--border-secondary);
    --mktg-banner-container: 80rem;
    position: relative;
    margin-inline: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    color: var(--mktg-banner-text);
    background-color: var(--mktg-banner-bg);
    box-shadow: inset 0 0 0 1px var(--mktg-banner-ring), var(--shadow-lg);
  }
  @media (min-width: 768px) {
    .mktg-banner {
      margin: 0;
      flex-direction: row;
      align-items: center;
      padding: 0.75rem;
    }
  }
  .mktg-banner__lead {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  @media (min-width: 768px) {
    .mktg-banner__lead {
      width: 0;
      flex-direction: row;
      align-items: center;
    }
  }
  .mktg-banner__icon {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    --tw-leading: 1;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    font-size: 1.25rem;
    color: var(--mktg-banner-icon);
    background-color: var(--mktg-banner-icon-bg);
    box-shadow: inset 0 0 0 1px var(--mktg-banner-icon-ring), var(--shadow-xs);
  }
  .mktg-banner__icon > svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
  }
  .mktg-banner__copy {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .mktg-banner__copy {
      flex-direction: row;
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .mktg-banner__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--mktg-banner-title);
  }
  .mktg-banner__text {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mktg-banner-text);
  }
  @media (min-width: 768px) {
    .mktg-banner__title, .mktg-banner__text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .mktg-banner__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--mktg-banner-link-decoration);
    border-radius: var(--radius-xs);
  }
  .mktg-banner__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .mktg-banner__trailing {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    gap: calc(var(--spacing) * 2);
  }
  .mktg-banner__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  @media (min-width: 768px) {
    .mktg-banner__actions {
      flex-direction: row;
    }
  }
  .mktg-banner__actions--dual {
    width: 100%;
    flex-direction: column-reverse;
    gap: calc(var(--spacing) * 2);
  }
  @media (min-width: 768px) {
    .mktg-banner__actions--dual {
      flex-direction: row;
      gap: calc(var(--spacing) * 3);
    }
  }
  .mktg-banner__form {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  @media (min-width: 768px) {
    .mktg-banner__form {
      width: 22.5rem;
      flex-direction: row;
    }
  }
  .mktg-banner__form .form-control {
    flex: 1;
  }
  .mktg-banner__dismiss {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    display: inline-flex;
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    color: var(--mktg-banner-dismiss);
    background: transparent;
    border: 0;
    transition: color var(--duration-fast, 100ms) var(--ease-in-out), background-color var(--duration-fast, 100ms) var(--ease-in-out);
  }
  .mktg-banner__dismiss:hover {
    color: var(--mktg-banner-dismiss-hover);
    background-color: var(--mktg-banner-dismiss-hover-bg);
  }
  .mktg-banner__dismiss:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .mktg-banner__dismiss > i, .mktg-banner__dismiss > svg {
    pointer-events: none;
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  @media (min-width: 768px) {
    .mktg-banner__dismiss--reflow {
      position: static;
    }
  }
  .mktg-banner--brand {
    --mktg-banner-bg: var(--color-brand-700);
    --mktg-banner-ring: transparent;
    --mktg-banner-border: var(--color-brand-600);
    --mktg-banner-title: var(--color-white);
    --mktg-banner-text: var(--color-brand-200);
    --mktg-banner-link: var(--color-white);
    --mktg-banner-link-decoration: color-mix(in srgb, transparent, oklch(93.0% 0.110 98) 60%);
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-link-decoration: color-mix(in oklch, transparent, var(--color-brand-200) 60%);
    }
    --mktg-banner-icon: var(--color-white);
    --mktg-banner-icon-bg: var(--bg-brand-solid);
    --mktg-banner-icon-ring: color-mix(in srgb, transparent, #fff 12%);
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-icon-ring: color-mix(in oklch, transparent, var(--color-white) 12%);
    }
    --mktg-banner-dismiss: color-mix(in srgb, transparent, #fff 70%);
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-dismiss: color-mix(in oklch, transparent, var(--color-white) 70%);
    }
    --mktg-banner-dismiss-hover: var(--color-white);
    --mktg-banner-dismiss-hover-bg: color-mix(in srgb, transparent, #fff 20%);
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-dismiss-hover-bg: color-mix(in oklch, transparent, var(--color-white) 20%);
    }
    --mktg-banner-count-bg: transparent;
    --mktg-banner-count-ring: var(--color-brand-500);
    --mktg-banner-count-value: var(--color-white);
    --mktg-banner-count-label: var(--color-brand-200);
    --mktg-banner-divider: color-mix(in srgb, transparent, #fff 20%);
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-divider: color-mix(in oklch, transparent, var(--color-white) 20%);
    }
  }
  .mktg-banner--brand .mktg-banner__icon {
    box-shadow: inset 0 0 0 1px var(--mktg-banner-icon-ring), var(--shadow-xs);
  }
  .mktg-banner--brand .btn-secondary {
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }
  .mktg-banner--brand .mktg-banner__form .form-control {
    --border-input: color-mix(in srgb, transparent, #fff 55%);
    @supports (color: color-mix(in lab, red, red)) {
      --border-input: color-mix(in oklch, transparent, var(--color-white) 55%);
    }
    background-color: color-mix(in srgb, transparent, #fff 10%);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, transparent, var(--color-white) 10%);
    }
    color: var(--color-white);
  }
  .mktg-banner--brand .mktg-banner__form .form-control::placeholder {
    color: var(--color-brand-200);
  }
  [data-theme="theme-dark"] .mktg-banner--brand, [data-theme="theme-mica-dark"] .mktg-banner--brand {
    --mktg-banner-bg: var(--color-neutral-950);
    --mktg-banner-border: var(--utility-neutral-700);
    --mktg-banner-text: var(--utility-neutral-400);
    --mktg-banner-link: var(--color-white);
    --mktg-banner-link-decoration: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-link-decoration: color-mix(in oklch, transparent, var(--utility-neutral-400) 60%);
    }
    --mktg-banner-count-ring: var(--utility-neutral-700);
    --mktg-banner-count-label: var(--utility-neutral-400);
    --mktg-banner-divider: color-mix(in srgb, transparent, #fff 12%);
    @supports (color: color-mix(in lab, red, red)) {
      --mktg-banner-divider: color-mix(in oklch, transparent, var(--color-white) 12%);
    }
  }
  .mktg-banner--full-width {
    margin: 0;
    display: block;
    padding: 0;
    border-radius: 0;
    background-color: var(--mktg-banner-bg);
    box-shadow: inset 0 -1px 0 0 var(--mktg-banner-border);
  }
  .mktg-banner__container {
    position: relative;
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    max-width: var(--mktg-banner-container);
  }
  @media (min-width: 768px) {
    .mktg-banner__container {
      flex-direction: row;
      align-items: center;
      padding: 0.75rem 2rem;
    }
  }
  .mktg-banner--dual-action .mktg-banner__glyph {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-leading: 1;
    line-height: 1;
    color: var(--mktg-banner-icon);
  }
  .mktg-banner--dual-action .mktg-banner__glyph > svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
  }
  .mktg-banner--dual-action .mktg-banner__lead {
    gap: calc(var(--spacing) * 3);
  }
  @media (min-width: 768px) {
    .mktg-banner--dual-action .mktg-banner__lead {
      gap: calc(var(--spacing) * 2);
    }
  }
  .mktg-banner--slim {
    align-items: center;
  }
  .mktg-banner--slim .mktg-banner__lead {
    width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  @media (min-width: 768px) {
    .mktg-banner--slim {
      padding-left: 3rem;
      padding-right: 3rem;
    }
    .mktg-banner--slim .mktg-banner__lead {
      flex-direction: row;
      justify-content: center;
      gap: calc(var(--spacing) * 1.5);
      text-align: center;
    }
  }
  .mktg-banner--slim .mktg-banner__title {
    padding-right: calc(var(--spacing) * 8);
  }
  @media (min-width: 768px) {
    .mktg-banner--slim .mktg-banner__title {
      padding-right: 0;
    }
  }
  @media (max-width: 767px) {
    .mktg-banner--text-field .mktg-banner__icon {
      display: none;
    }
  }
  .mktg-banner--text-field .mktg-banner__lead {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .mktg-banner--countdown {
    gap: calc(var(--spacing) * 3);
  }
  @media (min-width: 768px) {
    .mktg-banner--countdown {
      justify-content: center;
    }
  }
  .mktg-banner--countdown .mktg-banner__lead {
    flex: none;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  @media (min-width: 768px) {
    .mktg-banner--countdown .mktg-banner__lead {
      flex-direction: row;
      align-items: center;
      gap: calc(var(--spacing) * 2);
    }
    .mktg-banner--countdown .mktg-banner__title, .mktg-banner--countdown .mktg-banner__text {
      white-space: normal;
      overflow: visible;
    }
  }
  .mktg-banner__divider {
    display: none;
    height: calc(var(--spacing) * 4);
    width: 1px;
    flex-shrink: 0;
    --tw-border-style: none;
    border-style: none;
    background-color: var(--mktg-banner-divider);
  }
  @media (min-width: 768px) {
    .mktg-banner__divider {
      display: block;
    }
  }
  .mktg-banner__countdown {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .mktg-banner__count-unit {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .mktg-banner__count-value {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: calc(var(--spacing) * 7);
    align-items: center;
    justify-content: center;
    padding: var(--spacing);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    border-radius: var(--radius-md);
    color: var(--mktg-banner-count-value);
    background-color: var(--mktg-banner-count-bg);
    box-shadow: inset 0 0 0 1px var(--mktg-banner-count-ring);
  }
  .mktg-banner:not(.mktg-banner--brand) .mktg-banner__count-value {
    box-shadow: inset 0 0 0 1px var(--mktg-banner-count-ring), var(--shadow-xs);
  }
  .mktg-banner__count-label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--mktg-banner-count-label);
  }
  .mktg-banner.is-dismissing {
    transition: opacity var(--duration-fast, 150ms) var(--ease-in-out), transform var(--duration-fast, 150ms) var(--ease-in-out);
    opacity: 0;
    transform: translateY(-4px);
  }
  @media (prefers-reduced-motion: reduce) {
    .mktg-banner, .mktg-banner__dismiss, .mktg-banner__link, .mktg-banner.is-dismissing {
      transition: none;
    }
    .mktg-banner.is-dismissing {
      opacity: 0;
      transform: none;
    }
  }
}
@layer utilities {
  .footer {
    --footer-surface: var(--bg-primary);
    --footer-text-strong: var(--text-primary);
    --footer-text: var(--text-tertiary);
    --footer-heading: var(--text-quaternary);
    --footer-link: var(--text-tertiary);
    --footer-link-hover: var(--text-primary);
    --footer-muted: var(--text-quaternary);
    --footer-border: var(--border-secondary);
    --footer-accent: var(--color-brand-700);
    --footer-accent-hover: var(--color-brand-800);
    --footer-icon: var(--text-quaternary);
    --footer-icon-hover: var(--text-secondary);
    --footer-band: var(--bg-secondary-alt);
    display: block;
    width: 100%;
    padding-block: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 16);
    }
    background: var(--footer-surface);
    color: var(--footer-text);
  }
  .footer--flush {
    padding-block: 0;
  }
  .footer--brand {
    --footer-surface: linear-gradient(180deg, var(--color-brand-900), var(--color-brand-950));
    --footer-text-strong: var(--text-on-brand-section);
    --footer-text: var(--color-brand-200);
    --footer-heading: var(--color-brand-300);
    --footer-link: var(--color-brand-200);
    --footer-link-hover: var(--text-on-brand-section);
    --footer-muted: var(--color-brand-300);
    --footer-border: var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      --footer-border: color-mix(in oklch, var(--text-on-brand-section) 16%, transparent);
    }
    --footer-accent: var(--color-brand-100);
    --footer-accent-hover: var(--text-on-brand-section);
    --footer-icon: var(--color-brand-200);
    --footer-icon-hover: var(--text-on-brand-section);
    --footer-band: var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      --footer-band: color-mix(in oklch, var(--text-on-brand-section) 8%, transparent);
    }
  }
  .footer__container {
    margin-inline: auto;
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    max-width: 80rem;
  }
  .footer__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .footer__brand {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
  }
  .footer__brand--narrow {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .footer__brand--xs {
    @media (width >= 48rem) {
      max-width: var(--container-xs);
    }
  }
  .footer__blurb {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--footer-text);
  }
  .footer__logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
  }
  .footer__logo img {
    height: calc(var(--spacing) * 7);
    width: auto;
  }
  .footer--brand .footer__logo .logo-light {
    display: none;
  }
  .footer--brand .footer__logo .logo-dark {
    display: block;
  }
  .footer__logo-mark {
    display: inline-flex;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    background: var(--bg-brand-solid);
    color: var(--text-on-brand-section);
    box-shadow: var(--shadow-md, 0 4px 8px -2px rgb(16 24 40 / 0.1));
  }
  .footer--brand .footer__logo-mark {
    background: var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-on-brand-section) 14%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-on-brand-section) 24%, transparent);
    }
  }
  .footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 8);
  }
  .footer__nav--6col {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .footer__nav--5col {
    @media (width >= 48rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .footer__nav--3col {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .footer__nav--2col {
    @media (width >= 48rem) {
      max-width: var(--container-xs);
    }
  }
  .footer__col-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--footer-heading);
  }
  .footer__col-list {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .footer__link {
    display: inline-flex;
    max-height: calc(var(--spacing) * 5);
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-xs);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--footer-link);
    transition: color var(--duration-100, 100ms) var(--ease-linear, linear);
  }
  .footer__link:hover {
    color: var(--footer-link-hover);
  }
  .footer__link:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus, 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--border-focus));
  }
  .footer__link--color {
    color: var(--footer-accent);
  }
  .footer__link--color:hover {
    color: var(--footer-accent-hover);
  }
  .footer__inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 3);
  }
  @media (min-width: 640px) {
    .footer__inline {
      grid-template-columns: repeat(6, max-content);
    }
  }
  .footer__cta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .footer__cta--center {
    align-items: center;
    text-align: center;
  }
  .footer__cta--bordered {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-bottom: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 16);
    }
    border-color: var(--footer-border);
  }
  .footer__cta--split {
    gap: calc(var(--spacing) * 8);
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      align-items: flex-start;
    }
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .footer__cta-title {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 1.875rem;
      line-height: var(--tw-leading, 2.25rem);
      letter-spacing: var(--tw-tracking, -0.015em);
    }
    color: var(--footer-text-strong);
  }
  .footer__cta-text {
    margin-top: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 4);
    }
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
    color: var(--footer-text);
  }
  .footer__cta-actions {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column-reverse;
    gap: calc(var(--spacing) * 3);
    align-self: stretch;
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 12);
    }
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .footer__cta--center .footer__cta-actions {
    @media (width >= 48rem) {
      align-self: center;
    }
  }
  .footer__cta--split .footer__cta-actions {
    margin-top: calc(var(--spacing) * 8);
    align-self: stretch;
    @media (width >= 40rem) {
      flex-direction: row;
    }
    @media (width >= 40rem) {
      align-self: flex-start;
    }
    @media (width >= 64rem) {
      margin-top: 0;
    }
  }
  .footer__newsletter {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .footer__newsletter-label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--footer-text-strong);
  }
  .footer__newsletter-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .footer__newsletter-field {
    flex: 1;
  }
  .footer__newsletter-hint {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--footer-muted);
  }
  .footer__newsletter[data-state="error"] .footer__newsletter-hint {
    color: var(--text-error-primary, var(--text-danger, #d92d20));
  }
  .footer__newsletter[data-state="success"] .footer__newsletter-hint {
    color: var(--text-success-primary, var(--text-success, #067647));
  }
  .footer--brand .footer__newsletter .form-control {
    background: var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-on-brand-section) 10%, transparent);
    }
    color: var(--text-on-brand-section);
    box-shadow: inset 0 0 0 1px var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-on-brand-section) 30%, transparent);
    }
  }
  .footer--brand .footer__newsletter .form-control::placeholder {
    color: var(--color-brand-200);
  }
  .footer--brand .footer__newsletter .form-control:focus, .footer--brand .footer__newsletter .form-control:focus-visible {
    box-shadow: inset 0 0 0 2px var(--text-on-brand-section);
  }
  .footer--brand .footer__newsletter-hint {
    color: var(--color-brand-200);
  }
  .footer__band {
    width: 100%;
    padding-block: calc(var(--spacing) * 10);
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 12);
    }
    background: var(--footer-band);
  }
  .footer__band-inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .footer__band-copy {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .footer__band-title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
    color: var(--footer-text-strong);
  }
  .footer__band-title--display {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    @media (width >= 48rem) {
      font-size: 1.875rem;
      line-height: var(--tw-leading, 2.25rem);
      letter-spacing: var(--tw-tracking, -0.015em);
    }
  }
  .footer__band-text {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--footer-text);
  }
  .footer__band-text--display {
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
  }
  .footer__band-form {
    width: 100%;
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 100);
    }
  }
  .footer__app-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--footer-accent);
  }
  .footer__app-buttons {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: max-content;
    flex-direction: row;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }
  .footer__app-buttons--row-lg {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .footer__store {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2);
    text-decoration-line: none;
    width: 8.4375rem;
    background: var(--bg-secondary-solid, #1f242f);
    color: var(--text-on-brand-section);
    transition: filter var(--duration-100, 100ms) var(--ease-linear, linear);
  }
  .footer__store:hover {
    filter: brightness(1.12);
  }
  .footer__store:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus, 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--border-focus));
  }
  .footer__store--outline {
    background: transparent;
    color: var(--footer-text-strong);
    box-shadow: inset 0 0 0 1px var(--footer-border);
  }
  .footer--brand .footer__store--outline {
    color: var(--text-on-brand-section);
    box-shadow: inset 0 0 0 1px var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-on-brand-section) 30%, transparent);
    }
  }
  .footer__store-icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  .footer__store-text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .footer__store-text small {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 0.85;
  }
  .footer__store-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .footer__socialproof {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-full);
    padding-block: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 1.5);
    background: var(--bg-primary-alt);
    box-shadow: 0 0 0 1px var(--border-secondary), var(--shadow-xs, 0 1px 2px rgb(16 24 40 / 0.05));
    transition: background-color var(--duration-100, 100ms) var(--ease-linear, linear);
  }
  .footer__socialproof:hover {
    background: var(--bg-primary-hover, var(--bg-secondary));
  }
  .footer__socialproof:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus, 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--border-focus));
  }
  .footer--brand .footer__socialproof {
    background: var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-on-brand-section) 10%, transparent);
    }
    box-shadow: 0 0 0 1px var(--text-on-brand-section);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--text-on-brand-section) 20%, transparent);
    }
  }
  .footer__socialproof-avatars {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
  }
  .footer__socialproof-avatars > .avatar {
    margin-left: calc(var(--spacing) * -2);
    box-shadow: 0 0 0 2px var(--bg-primary-alt);
  }
  .footer__socialproof-avatars > .avatar:first-child {
    margin-left: 0;
  }
  .footer--brand .footer__socialproof-avatars > .avatar {
    box-shadow: 0 0 0 2px var(--color-brand-900);
  }
  .footer__socialproof-divider {
    height: calc(var(--spacing) * 4);
    width: 1px;
    border-radius: var(--radius-full);
    --tw-border-style: none;
    border-style: none;
    background: var(--footer-border);
  }
  .footer__socialproof-text {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--footer-text-strong);
  }
  .footer__socialproof-text > i {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--footer-muted);
  }
  .footer__divider {
    margin-top: calc(var(--spacing) * 12);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-top: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
    border-color: var(--footer-border);
  }
  .footer__bottom {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .footer__bottom--center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .footer__bottom--reverse {
    flex-direction: column-reverse;
  }
  .footer__copyright {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--footer-muted);
  }
  .footer__tagline-title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--footer-text-strong);
  }
  .footer__tagline-text {
    margin-top: var(--spacing);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--footer-text);
  }
  .footer__legal {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 3);
  }
  .footer__legal-link {
    border-radius: var(--radius-xs);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--footer-muted);
    transition: color var(--duration-100, 100ms) var(--ease-linear, linear);
  }
  .footer__legal-link:hover {
    color: var(--footer-text);
  }
  .footer__legal-link:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus, 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--border-focus));
  }
  .footer__socials {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 4);
  }
  .footer__social {
    display: inline-flex;
    border-radius: var(--radius-xs);
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    color: var(--footer-icon);
    transition: color var(--duration-100, 100ms) var(--ease-linear, linear);
  }
  .footer__social:hover {
    color: var(--footer-icon-hover);
  }
  .footer__social:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus, 0 0 0 2px var(--bg-body, #fff), 0 0 0 4px var(--border-focus));
  }
  .footer__split {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .footer__split--center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .footer__lead {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column-reverse;
    gap: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
    @media (width >= 80rem) {
      justify-content: flex-end;
    }
  }
  .footer__bordered-b {
    border-color: var(--footer-border);
  }
  @media (min-width: 768px) {
    .footer__bordered-b {
      border-bottom-width: 1px;
      padding-bottom: 4rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .footer *, .footer *::before, .footer *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}
@layer utilities {
  .mobile-header {
    background-color: transparent;
    color: var(--text-mobile-nav);
  }
  .mobile-nav {
    transition-property: none;
  }
  .mobile-nav-overlay {
    position: absolute;
    inset: 0;
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
    background-color: var(--bg-mobile-nav-overlay);
    pointer-events: none;
  }
  .mobile-nav-panel {
    position: absolute;
    inset-block: 0;
    left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    max-width: 100%;
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    flex-direction: column;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
    background-color: var(--bg-mobile-nav);
  }
  .mobile-nav.active {
    pointer-events: auto;
  }
  .mobile-nav.active .mobile-nav-overlay {
    opacity: 100%;
    pointer-events: auto;
  }
  .mobile-nav.active .mobile-nav-panel {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .mobile-nav-toggle {
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
  }
  .mobile-nav-toggle-bar {
    display: block;
    height: 2px;
    width: calc(var(--spacing) * 5);
    border-radius: var(--radius-full);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
    background-color: var(--bg-mobile-toggle-bar);
    transform-origin: center;
  }
  .mobile-nav-panel-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--text-mobile-nav-muted);
  }
  .mobile-nav .brand {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 28px;
    min-height: 28px;
    align-items: center;
    text-align: center;
  }
  .mobile-nav .brand-logo {
    height: 28px;
    min-height: 28px;
    width: auto;
    max-width: 100%;
  }
  .mobile-nav-close {
    margin-left: auto;
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--icon-mobile-nav);
  }
  .mobile-nav-close:hover {
    background-color: var(--bg-mobile-nav-item-hover);
  }
  .mobile-nav-panel-body {
    flex: 1;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .mobile-nav-list {
    margin: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    list-style-type: none;
    flex-direction: column;
    row-gap: var(--spacing);
    padding: 0;
  }
  .mobile-nav-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    white-space: nowrap;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    background-color: var(--bg-mobile-nav-item);
    color: var(--text-mobile-nav-item, var(--text-mobile-nav));
    text-align: left;
  }
  .mobile-nav-item:hover {
    background-color: var(--bg-mobile-nav-item-hover);
    color: var(--text-mobile-nav-item-hover, var(--text-mobile-nav));
  }
  .mobile-nav-item.active {
    background-color: var(--bg-mobile-nav-item-active);
    color: var(--text-mobile-nav-item-active);
  }
  .mobile-nav .app-icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 19px;
    width: 19px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: var(--icon-mobile-nav);
  }
  .mobile-nav .menu-title {
    margin-left: -1px;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    white-space: nowrap;
    color: var(--text-mobile-nav);
  }
  .mobile-nav .menu-icon {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    padding-inline: var(--spacing);
    white-space: nowrap;
    color: var(--icon-mobile-nav);
  }
  .mobile-nav .menu-label {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: var(--spacing);
    font-size: 0.563rem;
    line-height: var(--tw-leading, 1rem);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-mobile-nav-label, var(--text-mobile-nav-muted));
  }
  .mobile-nav .link-title {
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--text-mobile-subnav);
  }
  .mobile-nav .link-title:hover {
    color: var(--text-mobile-subnav-hover, var(--text-mobile-subnav));
  }
  .mobile-nav-group.active > .mobile-nav-item-parent .menu-icon i, .mobile-nav-group.active > .mobile-nav-item-parent .mobile-nav-chevron {
    transform: rotate(180deg);
  }
  .mobile-nav-chevron {
    display: inline-flex;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    font-size: 10px;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
    color: var(--icon-mobile-nav);
  }
  .mobile-nav-divider {
    margin-block: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-mobile-nav-divider);
  }
  .mobile-subnav {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
    margin-left: calc(var(--spacing) * 5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-right: calc(var(--spacing) * 3);
  }
  .mobile-subnav-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
  }
  .mobile-subnav-link {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 24px;
    width: 100%;
    border-radius: var(--radius-none);
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    padding-block: var(--spacing);
    padding-left: 17px;
    text-align: left;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    background-color: transparent;
    border-color: var(--border-mobile-menu-items);
    color: var(--text-mobile-subnav);
  }
  .mobile-subnav-link:hover {
    border-color: var(--border-mobile-subnav-hover);
    background-color: transparent;
    color: var(--text-mobile-subnav-hover, var(--text-mobile-subnav));
  }
  .mobile-subnav-link.active {
    border-color: var(--border-mobile-subnav-active);
    background-color: transparent;
    color: var(--text-mobile-subnav-active);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .mobile-subnav-item-danger {
    color: var(--text-mobile-danger);
  }
  .mobile-nav-group-profile {
    padding-top: calc(var(--spacing) * 2);
  }
  .mobile-nav-avatar {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background: radial-gradient(circle at 0% 0%, var(--color-accent-500), var(--color-accent-700));
    color: var(--text-mobile-avatar);
  }
  .mobile-nav-user-name {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-mobile-nav);
  }
  .mobile-nav-user-meta {
    font-size: 11px;
    color: var(--text-mobile-nav-muted);
  }
  .mob-drawer .mob-nav-i {
    width: 24px;
    flex: 0 0 auto;
    text-align: center;
    font-size: 18px;
    opacity: 0.7;
  }
  .mob-drawer .mob-list-group__row.active {
    color: var(--bg-sidebar-item-accent);
    font-weight: 600;
  }
  .mob-drawer .mob-list-group__row.active .mob-nav-i {
    color: var(--bg-sidebar-item-accent);
    opacity: 1;
  }
}
@layer utilities {
  .page-header-wrapper {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
    border-color: transparent;
    background-color: var(--bg-page-header);
    min-width: 0;
  }
  .page-header {
    display: inline-flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    min-width: 0;
  }
  .topbar-left > .campaign-switcher-cell {
    flex: 0 0 auto;
    margin-right: var(--space-3);
  }
  .topbar-left > .page-header-cell {
    flex: 1 1 auto;
    min-width: 0;
  }
  .page-header-title, .page-header-breadcrumb {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-header-back {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    transition: color 75ms ease-in-out, background-color 75ms ease-in-out, border-color 75ms ease-in-out;
    color: var(--text-breadcrumb);
    border-color: var(--border-breadcrumb);
    background-color: var(--bg-breadcrumb);
  }
  .page-header-back:hover {
    background-color: var(--bg-breadcrumb-hover);
  }
  .app-icon-active {
    display: inline-flex;
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    flex: none;
    align-items: center;
    justify-content: center;
    align-self: center;
    color: var(--text-info);
    background-color: transparent;
    font-size: 1.125rem;
  }
  .app-icon-active > i, .app-icon-active > [class*="fa-"] {
    font-weight: 900;
  }
  .app-shell[data-sidebar-state="pinned"] .app-icon-active {
    display: none;
  }
  .app-shell[data-sidebar-state="collapsed"] .topbar-left > .topbar-menu {
    order: -3;
  }
  .topbar-left > .topbar-navarrow:not(:empty) {
    order: -2;
    margin-right: 2px;
  }
  .app-shell[data-sidebar-state="collapsed"] .topbar-left > .campaign-switcher-cell {
    order: -1;
  }
  .app-shell[data-sidebar-state="collapsed"] .topbar-left > .app-icon-active {
    order: 0;
  }
  @media (max-width: 639px) {
    .topbar-left > .topbar-menu {
      order: -3;
      position: relative;
      z-index: 2;
    }
  }
  .app-shell.has-app-icon.has-app-icon-svg .page-header::after {
    content: '';
    order: 1;
    display: inline-flex;
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--app-icon-url) center / contain no-repeat;
  }
  .app-shell[data-sidebar-state="pinned"].has-app-icon-svg .page-header::after {
    display: none;
  }
  .logo-dark {
    display: none;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .logo-light {
    display: none;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .logo-dark {
    display: block;
  }
  .page-header-title {
    margin-top: calc(var(--spacing) * -0.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-page-title);
  }
  .page-header-breadcrumb {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    padding-top: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-breadcrumb);
  }
  .page-header-breadcrumb span + span::before {
    content: "›";
    margin: 0 0.25rem;
    display: inline-block;
    color: var(--text-breadcrumb-separator);
  }
  .campaign-switcher__toggle {
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .campaign-switcher__toggle .avatar {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    color: var(--text-secondary) !important;
    background-color: var(--bg-tertiary) !important;
    background-image: repeating-linear-gradient(45deg, var(--utility-gray-500) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, var(--utility-gray-500) 0 1px, transparent 1px 7px) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--utility-gray-500) 12%, transparent) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--utility-gray-500) 12%, transparent) 0 1px, transparent 1px 7px) !important;
    }
  }
  .campaign-switcher__thumb {
    color: var(--text-secondary) !important;
    background-color: var(--bg-tertiary) !important;
    background-image: repeating-linear-gradient(45deg, var(--utility-gray-500) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, var(--utility-gray-500) 0 1px, transparent 1px 7px) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--utility-gray-500) 12%, transparent) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--utility-gray-500) 12%, transparent) 0 1px, transparent 1px 7px) !important;
    }
    box-shadow: none;
  }
  .campaign-switcher__toggle:hover {
    background-color: var(--bg-sidebar-item-hover);
  }
  .campaign-switcher__toggle[aria-expanded="true"] {
    border-color: var(--border-input-active);
  }
  .campaign-switcher__toggle:focus, .campaign-switcher__toggle:focus-visible {
    outline: none;
    box-shadow: none;
  }
  .campaign-switcher__item {
    transition: background-color 0.1s ease;
  }
  .campaign-switcher__item:hover, .campaign-switcher__footer:hover {
    background-color: var(--bg-sidebar-item-hover);
  }
  .campaign-switcher__item.is-active {
    background-color: var(--bg-sidebar-item-active);
  }
  .campaign-switcher__check {
    color: var(--text-info);
  }
  @media (max-width: 639px) {
    .page-header-breadcrumb {
      display: none;
    }
    .topbar-left > .campaign-switcher-cell {
      flex: 0 1 auto;
      min-width: 0;
    }
    .campaign-switcher, .campaign-switcher__toggle {
      min-width: 0;
    }
  }
  @media (pointer: coarse) {
    .campaign-switcher__toggle {
      position: relative;
    }
    .campaign-switcher__toggle::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 44px;
    }
  }
  .breadcrumbs {
    min-width: 0;
  }
  .breadcrumbs__list {
    position: relative;
    margin: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding: 0;
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
    list-style: none;
  }
  .breadcrumbs__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .breadcrumbs__item:has(> .breadcrumb.is-current), .breadcrumbs__item:has(> .breadcrumb[aria-current="page"]) {
    overflow: hidden;
  }
  .breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: color 100ms linear, background-color 100ms linear;
  }
  .breadcrumb:not(.is-current):not([aria-current="page"]):not(.is-disabled) {
    cursor: pointer;
  }
  .breadcrumb__icon {
    color: var(--fg-breadcrumb-icon);
    font-size: 0.875rem;
    line-height: 1;
    transition: color 100ms linear;
  }
  .breadcrumb__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--text-breadcrumb-item);
    transition: color 100ms linear;
  }
  .breadcrumb:not(.is-current):not([aria-current="page"]):not(.is-disabled):hover .breadcrumb__label, .breadcrumb:not(.is-current):not([aria-current="page"]):not(.is-disabled):hover .breadcrumb__icon {
    color: var(--text-breadcrumb-item-hover);
  }
  .breadcrumb.is-current .breadcrumb__label, .breadcrumb[aria-current="page"] .breadcrumb__label {
    color: var(--text-breadcrumb-current);
  }
  .breadcrumb.is-current .breadcrumb__icon, .breadcrumb[aria-current="page"] .breadcrumb__icon {
    color: var(--fg-breadcrumb-icon-current);
  }
  .breadcrumb.is-current .breadcrumb__label, .breadcrumb[aria-current="page"] .breadcrumb__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .breadcrumb.is-disabled, .breadcrumb[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
  }
  .breadcrumb:focus-visible, .breadcrumb--avatar:focus-visible, .breadcrumb-account__toggle:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .breadcrumb:focus:not(:focus-visible) {
    outline: none;
  }
  .breadcrumbs__sep {
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--fg-breadcrumb-divider);
    border-right: 2px solid var(--fg-breadcrumb-divider);
    transform: rotate(45deg);
  }
  .breadcrumbs--slash .breadcrumbs__sep {
    width: 1px;
    height: 1rem;
    border: 0;
    background-color: var(--fg-breadcrumb-divider);
    transform: rotate(15deg);
  }
  .breadcrumbs--line .breadcrumbs__list {
    position: relative;
    padding-block: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 2);
  }
  .breadcrumbs--line .breadcrumbs__list::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-top: 1px solid var(--border-breadcrumb-line);
    border-bottom: 1px solid var(--border-breadcrumb-line);
  }
  .breadcrumbs--button .breadcrumbs__list {
    gap: calc(var(--spacing) * 0.5);
    @media (width >= 48rem) {
      gap: var(--spacing);
    }
  }
  .breadcrumbs--button .breadcrumbs__item {
    gap: calc(var(--spacing) * 0.5);
    @media (width >= 48rem) {
      gap: var(--spacing);
    }
  }
  .breadcrumbs--button .breadcrumb {
    padding: var(--spacing);
  }
  .breadcrumbs--button .breadcrumb__label {
    padding-inline: var(--spacing);
  }
  .breadcrumbs--button .breadcrumb:not(.is-current):not([aria-current="page"]):not(.is-disabled):hover {
    background-color: var(--bg-breadcrumb-item-hover);
  }
  .breadcrumbs--button .breadcrumb.is-current, .breadcrumbs--button .breadcrumb[aria-current="page"] {
    background-color: var(--bg-breadcrumb-item-hover);
  }
  .breadcrumbs--button .breadcrumb.is-current .breadcrumb__label, .breadcrumbs--button .breadcrumb[aria-current="page"] .breadcrumb__label, .breadcrumbs--button .breadcrumb.is-current .breadcrumb__icon, .breadcrumbs--button .breadcrumb[aria-current="page"] .breadcrumb__icon {
    color: var(--text-breadcrumb-item-hover);
  }
  .breadcrumbs__item--collapsed {
    display: none;
  }
  .breadcrumbs.is-expanded .breadcrumbs__item--collapsed {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .breadcrumbs--button.is-expanded .breadcrumbs__item--collapsed {
    gap: calc(var(--spacing) * 0.5);
    @media (width >= 48rem) {
      gap: var(--spacing);
    }
  }
  .breadcrumbs.is-expanded .breadcrumbs__item--ellipsis {
    display: none;
  }
  .breadcrumb--ellipsis {
    flex-shrink: 0;
  }
  .breadcrumb--ellipsis .breadcrumb__label {
    letter-spacing: 0.05em;
  }
  .breadcrumb--avatar {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
  }
  .breadcrumb__avatar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 0.5);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 0.5px var(--border-breadcrumb-avatar);
  }
  .breadcrumb__avatar > img, .breadcrumb__avatar > .avatar {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: var(--shadow-md);
  }
  .breadcrumb--avatar .breadcrumb__label {
    color: var(--text-breadcrumb-strong);
  }
  .breadcrumb-account {
    position: relative;
    display: inline-flex;
    min-width: 0;
    align-items: center;
  }
  .breadcrumb-account__toggle {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .breadcrumb-account__avatar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 0.5);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 0.5px var(--border-breadcrumb-avatar);
  }
  .breadcrumb-account__avatar > img, .breadcrumb-account__avatar > .avatar {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: var(--shadow-md);
  }
  .breadcrumb-account__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-breadcrumb-strong);
  }
  .breadcrumb-account__caret {
    flex-shrink: 0;
    color: var(--fg-breadcrumb-icon);
    font-size: 0.75rem;
    line-height: 1;
  }
  .breadcrumb-account__menu {
    position: absolute;
    left: 0;
    margin-top: calc(var(--spacing) * 1.5);
    padding: calc(var(--spacing) * 1.5);
    top: 100%;
    width: 16rem;
    background-color: var(--bg-popover, var(--bg-surface));
    border: 1px solid var(--border-popover, var(--border-primary));
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-popover, var(--shadow-lg));
    z-index: var(--z-popover, 60);
    display: none;
  }
  .breadcrumb-account.is-open .breadcrumb-account__menu {
    display: block;
  }
  .breadcrumb-account__option {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 100ms linear;
  }
  .breadcrumb-account__option:hover, .breadcrumb-account__option[aria-checked="true"] {
    background-color: var(--bg-breadcrumb-item-hover);
  }
  .breadcrumb-account__option:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .breadcrumb-account__option-avatar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 0.5);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 0.5px var(--border-breadcrumb-avatar);
  }
  .breadcrumb-account__option-avatar > img {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: var(--shadow-md);
  }
  .breadcrumb-account__option-body {
    min-width: 0;
    flex: 1;
  }
  .breadcrumb-account__option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-breadcrumb-strong);
  }
  .breadcrumb-account__option-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-breadcrumb-item-hover);
  }
  .breadcrumb-account__option-radio {
    position: relative;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 1rem;
    height: 1rem;
    box-shadow: inset 0 0 0 1px var(--border-input, var(--utility-neutral-300));
  }
  .breadcrumb-account__option[aria-checked="true"] .breadcrumb-account__option-radio {
    box-shadow: inset 0 0 0 5px var(--bg-brand-solid);
  }
  @media (prefers-reduced-motion: reduce) {
    .breadcrumb, .breadcrumb__icon, .breadcrumb__label, .breadcrumb-account__option {
      transition: none;
    }
  }
}
@layer utilities {
  .step-nav {
    --step-nav-marker-size: 2rem;
    --step-nav-marker-text: 0.875rem;
    --step-nav-label-size: 0.875rem;
    --step-nav-desc-size: 0.75rem;
    --step-nav-connector: 2px;
    --step-nav-gap: 0.625rem;
    --step-nav-item-gap: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .step-nav__item {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    text-align: center;
  }
  .step-nav__item + .step-nav__item::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--step-nav-marker-size) / 2);
    inset-inline-start: -50%;
    inset-inline-end: 50%;
    block-size: var(--step-nav-connector);
    margin-inline: calc(var(--step-nav-marker-size) / 2 + var(--step-nav-item-gap));
    transform: translateY(-50%);
    background-color: var(--border-secondary);
  }
  .step-nav__item.is-complete::before, .step-nav__item.is-current::before {
    background-color: var(--bg-brand-solid);
  }
  .step-nav__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--step-nav-marker-size);
    block-size: var(--step-nav-marker-size);
    border-radius: var(--radius-full);
    font-size: var(--step-nav-marker-text);
    font-weight: 600;
    line-height: 1;
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 var(--step-nav-connector) var(--border-secondary);
    color: var(--text-tertiary);
    transition: color 120ms linear, background-color 120ms linear, box-shadow 120ms linear;
  }
  .step-nav__item.is-complete .step-nav__marker, .step-nav__item.is-current .step-nav__marker {
    background-color: var(--bg-brand-solid);
    box-shadow: none;
    color: var(--text-on-brand);
  }
  .step-nav__item.is-current .step-nav__marker {
    box-shadow: 0 0 0 4px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-brand-solid) 22%, transparent);
    }
  }
  .step-nav__check {
    display: none !important;
  }
  .step-nav__item.is-complete .step-nav__num {
    display: none;
  }
  .step-nav__item.is-complete .step-nav__check {
    display: inline-flex !important;
  }
  .step-nav__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
  }
  .step-nav__label {
    font-size: var(--step-nav-label-size);
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-tertiary);
    transition: color 120ms linear;
  }
  .step-nav__item.is-complete .step-nav__label {
    color: var(--text-secondary);
  }
  .step-nav__item.is-current .step-nav__label {
    color: var(--text-brand-primary);
    font-weight: 600;
  }
  .step-nav__desc {
    font-size: var(--step-nav-desc-size);
    line-height: 1.3;
    color: var(--text-quaternary);
  }
  .step-nav-clickable .step-nav__item {
    display: block;
  }
  .step-nav__control {
    display: inline-flex;
    inline-size: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.5rem 0.5rem;
    margin: 0;
    text-align: center;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms linear;
  }
  .step-nav__control:hover {
    background-color: var(--bg-primary-hover);
  }
  .step-nav__control:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .step-nav__control:focus:not(:focus-visible) {
    outline: none;
  }
  .step-nav__control[aria-disabled="true"], .step-nav__control:disabled {
    cursor: default;
    pointer-events: none;
  }
  .step-nav-vertical {
    flex-direction: column;
    align-items: stretch;
  }
  .step-nav-vertical .step-nav__item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--step-nav-gap);
    padding-block-end: 1.5rem;
    text-align: start;
  }
  .step-nav-vertical .step-nav__item:last-child {
    padding-block-end: 0;
  }
  .step-nav-vertical .step-nav__control {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--step-nav-gap);
    padding: 0 0.5rem 0 0;
    text-align: start;
  }
  .step-nav-vertical .step-nav__item + .step-nav__item::before {
    content: none;
  }
  .step-nav-vertical .step-nav__item::after {
    content: "";
    position: absolute;
    inset-block-start: var(--step-nav-marker-size);
    inset-block-end: 0;
    inset-inline-start: calc(var(--step-nav-marker-size) / 2);
    inline-size: var(--step-nav-connector);
    transform: translateX(-50%);
    background-color: var(--border-secondary);
  }
  .step-nav-vertical .step-nav__item:last-child::after {
    content: none;
  }
  .step-nav-vertical .step-nav__item.is-complete::after {
    background-color: var(--bg-brand-solid);
  }
  .step-nav-simple {
    --step-nav-marker-size: 0.75rem;
  }
  .step-nav-simple .step-nav__marker {
    background-color: var(--border-secondary);
    box-shadow: none;
  }
  .step-nav-simple .step-nav__num, .step-nav-simple .step-nav__check {
    display: none !important;
  }
  .step-nav-simple .step-nav__item.is-complete .step-nav__marker, .step-nav-simple .step-nav__item.is-current .step-nav__marker {
    background-color: var(--bg-brand-solid);
  }
  .step-nav-simple .step-nav__item.is-current .step-nav__marker {
    box-shadow: 0 0 0 4px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-brand-solid) 22%, transparent);
    }
  }
  .step-nav-sm {
    --step-nav-marker-size: 1.5rem;
    --step-nav-marker-text: 0.75rem;
    --step-nav-label-size: 0.75rem;
    --step-nav-desc-size: 0.6875rem;
  }
  .step-nav-lg {
    --step-nav-marker-size: 2.5rem;
    --step-nav-marker-text: 1rem;
    --step-nav-label-size: 1rem;
    --step-nav-desc-size: 0.8125rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .step-nav__marker, .step-nav__label, .step-nav__control {
      transition: none;
    }
  }
}
@layer utilities {
  .nav-list {
    --nav-list-gap: 0.125rem;
    --nav-list-pad-block: 0.375rem;
    --nav-list-pad-inline: 0.625rem;
    --nav-list-font: 0.875rem;
    --nav-list-icon: 1.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nav-list-gap);
  }
  .nav-list-compact {
    --nav-list-gap: 0.0625rem;
    --nav-list-pad-block: 0.25rem;
    --nav-list-pad-inline: 0.5rem;
  }
  .nav-list-comfortable {
    --nav-list-gap: 0.25rem;
    --nav-list-pad-block: 0.5rem;
    --nav-list-pad-inline: 0.75rem;
  }
  .nav-list-md {
    --nav-list-gap: 0.25rem;
    --nav-list-pad-block: 0.5rem;
    --nav-list-pad-inline: 0.75rem;
    --nav-list-font: 1rem;
    --nav-list-icon: 1.25rem;
  }
  .nav-list-sm {
    --nav-list-gap: 0.125rem;
    --nav-list-pad-block: 0.375rem;
    --nav-list-pad-inline: 0.625rem;
    --nav-list-font: 0.875rem;
    --nav-list-icon: 1.125rem;
  }
  .nav-list-xs {
    --nav-list-gap: 0.0625rem;
    --nav-list-pad-block: 0.25rem;
    --nav-list-pad-inline: 0.5rem;
    --nav-list-font: 0.75rem;
    --nav-list-icon: 1rem;
  }
  .nav-list__group + .nav-list__group {
    margin-block-start: 1rem;
  }
  .nav-list__label {
    margin: 0;
    padding-block: 0.25rem 0.375rem;
    padding-inline: var(--nav-list-pad-inline, 0.625rem);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-quaternary);
  }
  .nav-list__item {
    list-style: none;
  }
  .nav-list__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    padding-block: var(--nav-list-pad-block);
    padding-inline: var(--nav-list-pad-inline);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--nav-list-font, 0.875rem);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .nav-list__link:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .nav-list__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .nav-list__link.is-active {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
  }
  .nav-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--nav-list-icon, 1.125rem);
    block-size: var(--nav-list-icon, 1.125rem);
    font-size: var(--nav-list-icon, 1.125rem);
    line-height: 1;
    color: var(--text-tertiary);
  }
  .nav-list__icon > svg, .nav-list__icon > img {
    inline-size: 100%;
    block-size: 100%;
  }
  .nav-list__link:hover .nav-list__icon, .nav-list__link.is-active .nav-list__icon {
    color: inherit;
  }
  .nav-list__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    min-inline-size: 1.25rem;
    min-block-size: 1.25rem;
    padding-inline: 0.375rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
  }
  .nav-list__badge--accent {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .nav-list__badge--dot {
    margin-inline-start: auto;
    min-inline-size: 0;
    min-block-size: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    padding: 0;
    background-color: var(--bg-brand-solid);
  }
  .nav-list-bordered .nav-list__link.is-active {
    background-color: var(--bg-secondary);
  }
  .nav-list-bordered .nav-list__link.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    inline-size: 3px;
    block-size: 60%;
    transform: translateY(-50%);
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
    background-color: var(--bg-brand-solid);
  }
  .nav-list-pill .nav-list__link.is-active {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .nav-list-pill .nav-list__link.is-active:hover {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .nav-list-pill .nav-list__link.is-active .nav-list__icon {
    color: var(--text-on-brand);
  }
  .nav-list-pill .nav-list__link.is-active .nav-list__badge {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  .nav-list__link[data-demo-state~="hover"] {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .nav-list__link[data-demo-state~="focus"] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-list__link {
      transition: none;
    }
  }
}
@layer utilities {
  .pill-nav {
    --pill-nav-gap: 0.375rem;
    --pill-nav-pad-block: 0.375rem;
    --pill-nav-pad-inline: 0.625rem;
    --pill-nav-font: 0.8125rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pill-nav-gap);
  }
  .pill-nav-sm {
    --pill-nav-gap: 0.375rem;
    --pill-nav-pad-block: 0.375rem;
    --pill-nav-pad-inline: 0.625rem;
    --pill-nav-font: 0.8125rem;
  }
  .pill-nav-md {
    --pill-nav-gap: 0.5rem;
    --pill-nav-pad-block: 0.5rem;
    --pill-nav-pad-inline: 0.875rem;
    --pill-nav-font: 0.875rem;
  }
  .pill-nav-lg {
    --pill-nav-gap: 0.625rem;
    --pill-nav-pad-block: 0.6875rem;
    --pill-nav-pad-inline: 1.125rem;
    --pill-nav-font: 1rem;
  }
  .pill-nav__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding-block: var(--pill-nav-pad-block);
    padding-inline: var(--pill-nav-pad-inline);
    font-size: var(--pill-nav-font);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-secondary);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  }
  .pill-nav__item:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .pill-nav__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .pill-nav__item.is-active {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    box-shadow: var(--shadow-xs);
  }
  .pill-nav__item:disabled, .pill-nav__item.is-disabled, .pill-nav__item[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-quaternary);
    background-color: transparent;
    box-shadow: none;
  }
  .pill-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.25rem;
    padding-inline: 0.375rem;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
  }
  .pill-nav__item.is-active .pill-nav__count {
    color: var(--text-on-brand);
    background-color: transparent;
  }
  .pill-nav-solid .pill-nav__item.is-active {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    box-shadow: var(--shadow-xs);
  }
  .pill-nav-soft .pill-nav__item.is-active {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
  }
  .pill-nav-soft .pill-nav__item.is-active .pill-nav__count {
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
  }
  .pill-nav-block {
    inline-size: 100%;
  }
  .pill-nav-block .pill-nav__item {
    flex: 1 1 0%;
  }
  .pill-nav-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-block-end: 0.5rem;
    scroll-padding-inline: 0.25rem;
  }
  .pill-nav-scroll .pill-nav__item {
    flex: 0 0 auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .pill-nav__item {
      transition: none;
    }
  }
}
@layer utilities {
  .filter-tabs {
    --filter-tabs-gap: 1rem;
    --filter-tabs-tab-pad-block: 0.625rem;
    --filter-tabs-font: 0.875rem;
    --filter-tabs-count-font: 0.75rem;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--filter-tabs-gap);
  }
  .filter-tabs__tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    border: 0;
    background-color: transparent;
    color: var(--text-tertiary);
    font-size: var(--filter-tabs-font);
    line-height: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: color 100ms ease, background-color 100ms ease, border-color 100ms ease;
  }
  .filter-tabs__tab:hover {
    color: var(--text-secondary);
  }
  .filter-tabs__tab:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
  }
  .filter-tabs__tab.is-active {
    color: var(--text-primary);
  }
  .filter-tabs__tab:disabled, .filter-tabs__tab.is-disabled, .filter-tabs__tab[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-quaternary);
    opacity: 0.55;
  }
  .filter-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.25rem;
    padding-inline: 0.4375rem;
    padding-block: 0.0625rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-badge);
    color: var(--text-secondary);
    font-size: var(--filter-tabs-count-font);
    line-height: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: background-color 100ms ease, color 100ms ease;
  }
  .filter-tabs__tab:hover .filter-tabs__count {
    background-color: var(--bg-badge-hover);
  }
  .filter-tabs__tab.is-active .filter-tabs__count {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .filter-tabs:not(.filter-tabs-pill)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 1px;
    background-color: var(--border-divider);
    pointer-events: none;
  }
  .filter-tabs:not(.filter-tabs-pill) .filter-tabs__tab {
    padding-inline: 0.125rem;
    padding-block: 0 var(--filter-tabs-tab-pad-block);
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
  }
  .filter-tabs:not(.filter-tabs-pill) .filter-tabs__tab.is-active {
    border-block-end-color: var(--bg-brand-solid);
  }
  .filter-tabs-pill {
    --filter-tabs-gap: 0.25rem;
  }
  .filter-tabs-pill .filter-tabs__tab {
    padding-inline: 0.625rem;
    padding-block: 0.375rem;
    border-radius: var(--radius-md);
  }
  .filter-tabs-pill .filter-tabs__tab:hover {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
  }
  .filter-tabs-pill .filter-tabs__tab.is-active {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
  }
  .filter-tabs-scroll {
    overflow-x: auto;
    scroll-snap-type: inline proximity;
  }
  .filter-tabs-scroll .filter-tabs__tab {
    scroll-snap-align: start;
  }
  .filter-tabs-sm {
    --filter-tabs-gap: 0.75rem;
    --filter-tabs-tab-pad-block: 0.5rem;
    --filter-tabs-font: 0.8125rem;
    --filter-tabs-count-font: 0.6875rem;
  }
  .filter-tabs-lg {
    --filter-tabs-gap: 1.25rem;
    --filter-tabs-tab-pad-block: 0.75rem;
    --filter-tabs-font: 1rem;
    --filter-tabs-count-font: 0.8125rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .filter-tabs__tab, .filter-tabs__count {
      transition: none;
    }
  }
}
@layer utilities {
  .skip-link {
    position: absolute;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    inline-size: 1px;
    block-size: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity var(--duration-normal, 200ms) var(--ease-out), transform var(--duration-normal, 200ms) var(--ease-out);
  }
  .skip-link:focus, .skip-link:focus-visible {
    position: fixed;
    inset-block-start: var(--skip-link-inset, 0.75rem);
    inset-inline-start: var(--skip-link-inset, 0.75rem);
    z-index: var(--z-max, 9999);
    overflow: visible;
    margin: 0;
    padding-block: var(--skip-link-pad-block, 0.625rem);
    padding-inline: var(--skip-link-pad-inline, 1rem);
    inline-size: auto;
    block-size: auto;
    clip: auto;
    clip-path: none;
    color: var(--text-on-brand);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    opacity: 1;
    transform: translateY(0);
  }
  .skip-links {
    display: contents;
  }
  @media (prefers-reduced-motion: reduce) {
    .skip-link {
      transition: none;
      transform: none;
    }
  }
}
@layer utilities {
  .back-nav {
    --back-nav-gap: 0.5rem;
    --back-nav-font: 0.875rem;
    --back-nav-icon: 0.875rem;
    --back-nav-pad-block: 0.5rem;
    --back-nav-pad-inline: 0.875rem;
    --back-nav-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    gap: var(--back-nav-gap);
    min-inline-size: 0;
    font-size: var(--back-nav-font);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  }
  .back-nav:hover {
    color: var(--text-primary);
  }
  .back-nav:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--back-nav-radius);
  }
  .back-nav:disabled, .back-nav.is-disabled, .back-nav[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
  }
  .back-nav__icon {
    flex: none;
    font-size: var(--back-nav-icon);
    line-height: 1;
    transition: transform 120ms ease;
  }
  .back-nav:hover .back-nav__icon {
    transform: translateX(-0.125rem);
  }
  [dir="rtl"] .back-nav__icon {
    transform: scaleX(-1);
  }
  [dir="rtl"] .back-nav:hover .back-nav__icon {
    transform: scaleX(-1) translateX(-0.125rem);
  }
  .back-nav__label {
    min-inline-size: 0;
    white-space: nowrap;
  }
  .back-nav__context {
    min-inline-size: 0;
    color: var(--text-tertiary);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .back-nav-plain {
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .back-nav-button {
    padding-block: var(--back-nav-pad-block);
    padding-inline: var(--back-nav-pad-inline);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--back-nav-radius);
    box-shadow: var(--shadow-xs);
  }
  .back-nav-button:hover {
    background-color: var(--bg-primary-hover);
    border-color: var(--border-secondary);
  }
  .back-nav-block {
    display: flex;
    inline-size: 100%;
    align-items: center;
    padding-block: var(--back-nav-pad-block);
    padding-inline: var(--back-nav-pad-inline);
    background-color: var(--bg-secondary);
    border-radius: var(--back-nav-radius);
    cursor: default;
  }
  .back-nav__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
  }
  .back-nav-sm {
    --back-nav-gap: 0.375rem;
    --back-nav-font: 0.8125rem;
    --back-nav-icon: 0.8125rem;
    --back-nav-pad-block: 0.375rem;
    --back-nav-pad-inline: 0.625rem;
  }
  .back-nav-lg {
    --back-nav-gap: 0.625rem;
    --back-nav-font: 1rem;
    --back-nav-icon: 1rem;
    --back-nav-pad-block: 0.6875rem;
    --back-nav-pad-inline: 1.125rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .back-nav, .back-nav__icon {
      transition: none;
    }
    .back-nav:hover .back-nav__icon, [dir="rtl"] .back-nav:hover .back-nav__icon {
      transform: none;
    }
    [dir="rtl"] .back-nav__icon {
      transform: scaleX(-1);
    }
  }
}
@layer utilities {
  .sub-nav {
    --sub-nav-gap: 0.25rem;
    --sub-nav-pad-block: 0.625rem;
    --sub-nav-pad-inline: 0.625rem;
    --sub-nav-font: 0.875rem;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    background-color: var(--bg-primary);
    border-block-end: 1px solid var(--border-divider);
  }
  .sub-nav__title {
    display: inline-flex;
    align-items: center;
    font-size: var(--sub-nav-font);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-primary);
  }
  .sub-nav__list {
    display: flex;
    align-items: stretch;
    gap: var(--sub-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sub-nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-block: var(--sub-nav-pad-block);
    padding-inline: var(--sub-nav-pad-inline);
    font-size: var(--sub-nav-font);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-secondary);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
  .sub-nav__item:hover {
    color: var(--text-primary);
    border-block-end-color: var(--border-secondary);
  }
  .sub-nav__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .sub-nav__item.is-active {
    color: var(--text-brand);
    border-block-end-color: var(--bg-brand-solid);
  }
  .sub-nav__item:disabled, .sub-nav__item.is-disabled, .sub-nav__item[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
    border-block-end-color: transparent;
  }
  .sub-nav__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
  }
  .sub-nav__actions :is(.combobox__control, .form-control, .btn, [class*="btn-"]) {
    min-height: 2rem;
  }
  .sub-nav__actions .combobox {
    align-self: stretch;
    display: inline-flex;
  }
  .sub-nav__actions .combobox__control {
    height: 100%;
  }
  .sub-nav-underline .sub-nav__item.is-active {
    color: var(--text-brand);
    border-block-end-color: var(--bg-brand-solid);
  }
  .sub-nav-pill {
    align-items: center;
    padding: 0.25rem;
  }
  .sub-nav-pill .sub-nav__list {
    align-items: center;
  }
  .sub-nav-pill .sub-nav__item {
    border-block-end: 0;
    margin-block-end: 0;
    border-radius: var(--radius-md);
  }
  .sub-nav-pill .sub-nav__item:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .sub-nav-pill .sub-nav__item.is-active {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-xs);
  }
  .sub-nav-bordered {
    align-items: center;
    padding-inline: 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
  }
  .sub-nav-bordered .sub-nav__item {
    margin-block-end: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .sub-nav__item {
      transition: none;
    }
  }
}
@layer utilities {
  .footer-nav {
    --footer-nav-col-min: 12rem;
    --footer-nav-col-gap: 2rem;
    --footer-nav-row-gap: 2.5rem;
    --footer-nav-link-gap: 0.625rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--footer-nav-col-min), 1fr));
    column-gap: var(--footer-nav-col-gap);
    row-gap: var(--footer-nav-row-gap);
    color: var(--text-secondary);
  }
  .footer-nav__brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
  }
  .footer-nav__col {
    display: flex;
    flex-direction: column;
    gap: var(--footer-nav-link-gap);
    min-inline-size: 0;
  }
  .footer-nav__heading {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .footer-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--footer-nav-link-gap);
  }
  .footer-nav__item {
    list-style: none;
  }
  .footer-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: color 120ms ease;
  }
  .footer-nav__link:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .footer-nav__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .footer-nav__meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 0.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--border-divider);
  }
  .footer-nav__copyright {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-quaternary);
  }
  .footer-nav__meta-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
  }
  .footer-nav-bordered {
    padding-block-start: 2.5rem;
    border-block-start: 1px solid var(--border-primary);
  }
  .footer-nav-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
  }
  .footer-nav-compact .footer-nav__copyright {
    margin-inline-start: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .footer-nav__link {
      transition: none;
    }
  }
}
@layer utilities {
  .nav-rail {
    --nav-rail-width: 3.5rem;
    --nav-rail-item: 2.5rem;
    --nav-rail-icon: 1.25rem;
    --nav-rail-gap: 0.25rem;
    --nav-rail-pad: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nav-rail-gap);
    inline-size: var(--nav-rail-width);
    block-size: 100%;
    flex: none;
    padding-block: var(--nav-rail-pad);
    padding-inline: var(--nav-rail-pad);
    background-color: var(--bg-secondary);
    border-inline-end: 1px solid var(--border-divider);
  }
  .nav-rail-sm {
    --nav-rail-width: 3rem;
    --nav-rail-item: 2.25rem;
    --nav-rail-icon: 1.125rem;
  }
  .nav-rail-lg {
    --nav-rail-width: 4rem;
    --nav-rail-item: 3rem;
    --nav-rail-icon: 1.375rem;
  }
  .nav-rail-plain {
    background-color: transparent;
    border-inline-end: 0;
  }
  .nav-rail__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--nav-rail-item);
    block-size: var(--nav-rail-item);
    margin-block-end: var(--nav-rail-gap);
    font-size: var(--nav-rail-icon);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
  }
  .nav-rail__brand > img, .nav-rail__brand > svg {
    inline-size: var(--nav-rail-item);
    block-size: var(--nav-rail-item);
    border-radius: var(--radius-md);
  }
  .nav-rail__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--nav-rail-item);
    block-size: var(--nav-rail-item);
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .nav-rail__item:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .nav-rail__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 1;
  }
  .nav-rail__item.is-active {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
  }
  .nav-rail__item.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--nav-rail-pad) * -1);
    inset-block: 25%;
    inline-size: 3px;
    background-color: var(--bg-brand-solid);
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
  }
  .nav-rail__item:disabled, .nav-rail__item.is-disabled, .nav-rail__item[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
    background-color: transparent;
  }
  .nav-rail__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--nav-rail-icon);
    block-size: var(--nav-rail-icon);
    font-size: var(--nav-rail-icon);
    line-height: 1;
  }
  .nav-rail__icon > img, .nav-rail__icon > svg {
    inline-size: 100%;
    block-size: 100%;
  }
  .nav-rail__badge {
    position: absolute;
    inset-block-start: 0.125rem;
    inset-inline-end: 0.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.125rem;
    block-size: 1.125rem;
    padding-inline: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-full);
  }
  .nav-rail__badge.is-dot {
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
    min-inline-size: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    padding-inline: 0;
  }
  .nav-rail__tip {
    position: absolute;
    inset-inline-start: calc(100% + 0.5rem);
    inset-block-start: 50%;
    z-index: 20;
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-divider);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-50%) scale(0.96);
    transform-origin: left center;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
  }
  .nav-rail__item:hover .nav-rail__tip, .nav-rail__item:focus-visible .nav-rail__tip {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .nav-rail__spacer {
    margin-block-start: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-rail__item, .nav-rail__tip {
      transition: none;
    }
  }
}
@layer utilities {
  .command-launcher {
    --command-launcher-block-size: 2.5rem;
    --command-launcher-pad-inline: 0.75rem;
    --command-launcher-gap: 0.5rem;
    --command-launcher-font: 0.875rem;
    --command-launcher-icon-size: 1rem;
    --command-launcher-radius: var(--radius-md);
    --command-launcher-width: 18rem;
    display: inline-flex;
    align-items: center;
    gap: var(--command-launcher-gap);
    inline-size: 100%;
    max-inline-size: var(--command-launcher-width);
    block-size: var(--command-launcher-block-size);
    padding-inline: var(--command-launcher-pad-inline);
    font-size: var(--command-launcher-font);
    line-height: 1.25rem;
    color: var(--text-placeholder);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--command-launcher-radius);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  }
  .command-launcher:hover {
    background-color: var(--bg-primary-hover);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-xs);
  }
  .command-launcher:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .command-launcher:disabled, .command-launcher.is-disabled, .command-launcher[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
  }
  .command-launcher__icon {
    flex: 0 0 auto;
    inline-size: var(--command-launcher-icon-size);
    font-size: var(--command-launcher-icon-size);
    line-height: 1;
    text-align: center;
    color: var(--text-tertiary);
    pointer-events: none;
  }
  .command-launcher__label {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
    font-weight: 400;
    color: var(--text-placeholder);
  }
  .command-launcher:hover .command-launcher__label {
    color: var(--text-secondary);
  }
  .command-launcher__kbd {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-inline-size: 1.5rem;
    padding-block: 0.0625rem;
    padding-inline: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    pointer-events: none;
  }
  .command-launcher-block {
    --command-launcher-width: none;
    max-inline-size: none;
  }
  .command-launcher-compact {
    --command-launcher-pad-inline: 0;
    --command-launcher-width: none;
    inline-size: var(--command-launcher-block-size);
    max-inline-size: none;
    justify-content: center;
  }
  .command-launcher-compact .command-launcher__label, .command-launcher-compact .command-launcher__kbd {
    display: none;
  }
  .command-launcher-pill {
    --command-launcher-radius: var(--radius-full);
  }
  .command-launcher-sm {
    --command-launcher-block-size: 2rem;
    --command-launcher-pad-inline: 0.625rem;
    --command-launcher-gap: 0.375rem;
    --command-launcher-font: 0.8125rem;
    --command-launcher-icon-size: 0.875rem;
  }
  .command-launcher-lg {
    --command-launcher-block-size: 2.75rem;
    --command-launcher-pad-inline: 0.875rem;
    --command-launcher-gap: 0.625rem;
    --command-launcher-font: 1rem;
    --command-launcher-icon-size: 1.125rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .command-launcher {
      transition: none;
    }
  }
}
@layer utilities {
  .anchor-nav {
    --anchor-nav-gap: 0.125rem;
    --anchor-nav-pad-block: 0.375rem;
    --anchor-nav-pad-inline: 0.75rem;
    --anchor-nav-marker: 2px;
    --anchor-nav-font: 0.875rem;
    --anchor-nav-sticky-top: 1.5rem;
    position: sticky;
    inset-block-start: var(--anchor-nav-sticky-top);
    display: flex;
    flex-direction: column;
    gap: var(--anchor-nav-gap);
  }
  .anchor-nav-sm {
    --anchor-nav-gap: 0.0625rem;
    --anchor-nav-pad-block: 0.25rem;
    --anchor-nav-pad-inline: 0.625rem;
    --anchor-nav-font: 0.8125rem;
  }
  .anchor-nav-lg {
    --anchor-nav-gap: 0.25rem;
    --anchor-nav-pad-block: 0.5rem;
    --anchor-nav-pad-inline: 1rem;
    --anchor-nav-font: 1rem;
  }
  .anchor-nav__title {
    margin: 0;
    padding-block: 0.25rem 0.375rem;
    padding-inline: var(--anchor-nav-pad-inline);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .anchor-nav__link {
    position: relative;
    display: block;
    padding-block: var(--anchor-nav-pad-block);
    padding-inline: var(--anchor-nav-pad-inline);
    font-size: var(--anchor-nav-font);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .anchor-nav__link:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .anchor-nav__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .anchor-nav__link.is-active {
    color: var(--text-brand);
    font-weight: 600;
  }
  .anchor-nav__link.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    inline-size: var(--anchor-nav-marker);
    block-size: 60%;
    transform: translateY(-50%);
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
    background-color: var(--bg-brand-solid);
  }
  .anchor-nav__sublist {
    display: flex;
    flex-direction: column;
    gap: var(--anchor-nav-gap);
    padding-inline-start: 0.75rem;
  }
  .anchor-nav__sublist .anchor-nav__link {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .anchor-nav__sublist .anchor-nav__link:hover {
    color: var(--text-primary);
  }
  .anchor-nav__sublist .anchor-nav__link.is-active {
    color: var(--text-brand);
  }
  .anchor-nav-bar {
    inset-block-start: 0;
    flex-direction: row;
    align-items: stretch;
    gap: 0.25rem;
    overflow-x: auto;
    border-block-end: 1px solid var(--border-divider);
  }
  .anchor-nav-bar .anchor-nav__title {
    display: flex;
    align-items: center;
    padding-block: 0.625rem;
    white-space: nowrap;
  }
  .anchor-nav-bar .anchor-nav__link {
    flex: none;
    padding-block: 0.625rem;
    border-radius: 0;
    white-space: nowrap;
  }
  .anchor-nav-bar .anchor-nav__link.is-active::before {
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: 0;
    inline-size: auto;
    block-size: var(--anchor-nav-marker);
    transform: none;
    border-radius: var(--radius-sm);
  }
  .anchor-nav-bar .anchor-nav__sublist {
    flex-direction: row;
    gap: 0.25rem;
    padding-inline-start: 0;
  }
  .anchor-nav-pill .anchor-nav__link {
    border-radius: var(--radius-full);
  }
  .anchor-nav-pill .anchor-nav__link.is-active {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .anchor-nav-pill .anchor-nav__link.is-active::before {
    content: none;
  }
  .anchor-nav-numbered {
    counter-reset: anchor-nav;
  }
  .anchor-nav-numbered .anchor-nav__link {
    counter-increment: anchor-nav;
  }
  .anchor-nav-numbered .anchor-nav__link::before {
    content: counter(anchor-nav) ".";
    position: static;
    display: inline-block;
    inline-size: 1.5em;
    block-size: auto;
    margin-inline-end: 0.5rem;
    transform: none;
    background-color: transparent;
    color: var(--text-tertiary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  .anchor-nav-numbered .anchor-nav__link.is-active::before {
    color: var(--text-brand);
  }
  .anchor-nav__link[data-demo-state~="hover"] {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .anchor-nav__link[data-demo-state~="focus"] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  @media (prefers-reduced-motion: reduce) {
    .anchor-nav__link {
      transition: none;
    }
  }
}
@layer utilities {
  .progress-nav {
    --progress: 0;
    --progress-nav-thickness: 4px;
    --progress-nav-radius: var(--radius-full);
    --progress-nav-dot-size: 0.625rem;
    --progress-nav-dot-gap: 0.5rem;
    position: relative;
    overflow: hidden;
    inline-size: 100%;
    block-size: var(--progress-nav-thickness);
    background-color: var(--bg-tertiary);
    border-radius: var(--progress-nav-radius);
  }
  .progress-nav__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: clamp(0%, calc(var(--progress, 0) * 100%), 100%);
    background-color: var(--bg-brand-solid);
    border-radius: inherit;
    transition: inline-size 80ms linear;
  }
  .progress-nav-sm {
    --progress-nav-thickness: 2px;
  }
  .progress-nav-md {
    --progress-nav-thickness: 4px;
  }
  .progress-nav-lg {
    --progress-nav-thickness: 6px;
  }
  .progress-nav-inline {
    position: relative;
  }
  .progress-nav-top {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    border-radius: 0;
  }
  .progress-nav-dots {
    display: inline-flex;
    align-items: center;
    gap: var(--progress-nav-dot-gap);
    overflow: visible;
    inline-size: auto;
    block-size: auto;
    background-color: transparent;
    border-radius: 0;
  }
  .progress-nav__dot {
    position: relative;
    inline-size: var(--progress-nav-dot-size);
    block-size: var(--progress-nav-dot-size);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
  }
  .progress-nav__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-brand-solid);
    border-radius: inherit;
    opacity: clamp(0, calc((var(--progress, 0) - var(--progress-nav-dot-at, 0)) * 100), 1);
    transition: opacity 120ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .progress-nav__fill, .progress-nav__dot::after {
      transition: none;
    }
  }
}
@layer utilities {
  .nav-dropdown {
    --nav-dropdown-panel-inline-size: 15rem;
    --nav-dropdown-panel-offset: 0.375rem;
    --nav-dropdown-panel-pad: 0.375rem;
    --nav-dropdown-item-pad-block: 0.5rem;
    --nav-dropdown-item-pad-inline: 0.75rem;
    position: relative;
    display: inline-flex;
  }
  .nav-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .nav-dropdown__trigger:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .nav-dropdown__trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .nav-dropdown__trigger[aria-expanded="true"] {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .nav-dropdown__trigger:disabled, .nav-dropdown__trigger.is-disabled, .nav-dropdown__trigger[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
    background-color: transparent;
  }
  .nav-dropdown__caret {
    font-size: 0.75em;
    transition: transform 150ms ease;
  }
  .nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__caret {
    transform: rotate(180deg);
  }
  .nav-dropdown__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--nav-dropdown-panel-offset));
    inset-inline-start: 0;
    z-index: 50;
    min-inline-size: var(--nav-dropdown-panel-inline-size);
    padding: var(--nav-dropdown-panel-pad);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  }
  .nav-dropdown__trigger[aria-expanded="true"] + .nav-dropdown__panel, .nav-dropdown:not([data-nav-dropdown-ready]):focus-within .nav-dropdown__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
  }
  .nav-dropdown__group + .nav-dropdown__group {
    margin-block-start: 0.25rem;
    padding-block-start: 0.25rem;
    border-block-start: 1px solid var(--border-divider);
  }
  .nav-dropdown__label {
    padding-block: 0.375rem;
    padding-inline: var(--nav-dropdown-item-pad-inline);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .nav-dropdown__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-block: var(--nav-dropdown-item-pad-block);
    padding-inline: var(--nav-dropdown-item-pad-inline);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--text-secondary);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .nav-dropdown__item:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .nav-dropdown__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .nav-dropdown__item.is-active, .nav-dropdown__item[aria-current="page"] {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .nav-dropdown__item:disabled, .nav-dropdown__item.is-disabled, .nav-dropdown__item[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
  }
  .nav-dropdown__desc {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
    color: var(--text-tertiary);
  }
  .nav-dropdown__item:hover .nav-dropdown__desc, .nav-dropdown__item.is-active .nav-dropdown__desc, .nav-dropdown__item[aria-current="page"] .nav-dropdown__desc {
    color: var(--text-secondary);
  }
  .nav-dropdown-end .nav-dropdown__panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .nav-dropdown-sm {
    --nav-dropdown-panel-inline-size: 13rem;
    --nav-dropdown-panel-offset: 0.25rem;
    --nav-dropdown-panel-pad: 0.25rem;
    --nav-dropdown-item-pad-block: 0.375rem;
    --nav-dropdown-item-pad-inline: 0.625rem;
  }
  .nav-dropdown-sm .nav-dropdown__trigger {
    gap: 0.25rem;
    padding-block: 0.375rem;
    padding-inline: 0.625rem;
    font-size: 0.8125rem;
  }
  .nav-dropdown-sm .nav-dropdown__item {
    font-size: 0.8125rem;
  }
  .nav-dropdown-lg {
    --nav-dropdown-panel-inline-size: 17rem;
    --nav-dropdown-panel-offset: 0.5rem;
    --nav-dropdown-panel-pad: 0.5rem;
    --nav-dropdown-item-pad-block: 0.625rem;
    --nav-dropdown-item-pad-inline: 0.875rem;
  }
  .nav-dropdown-lg .nav-dropdown__trigger {
    gap: 0.5rem;
    padding-block: 0.625rem;
    padding-inline: 0.875rem;
    font-size: 0.9375rem;
  }
  .nav-dropdown-lg .nav-dropdown__item {
    font-size: 0.9375rem;
  }
  .nav-dropdown-wide {
    --nav-dropdown-panel-inline-size: 22rem;
  }
  .nav-dropdown-split .nav-dropdown__panel {
    --nav-dropdown-panel-inline-size: 26rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem;
    align-content: start;
  }
  .nav-dropdown-split .nav-dropdown__group {
    grid-column: 1 / -1;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-dropdown__panel, .nav-dropdown__caret {
      transition: none;
    }
  }
}
@layer utilities {
  .jump-to {
    --jump-to-gap: 0.375rem;
    --jump-to-label-gap: 0.5rem;
    --jump-to-font: 0.875rem;
    --jump-to-pad-block: 0.5rem;
    --jump-to-pad-inline: 0.75rem;
    --jump-to-caret: 0.25rem;
    --jump-to-radius: var(--radius-md);
    display: inline-flex;
    flex-direction: column;
    gap: var(--jump-to-gap);
    min-inline-size: 0;
  }
  .jump-to__label {
    font-size: var(--jump-to-font);
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-secondary);
  }
  .jump-to__field {
    position: relative;
    display: block;
    min-inline-size: 0;
  }
  .jump-to__icon {
    position: absolute;
    inset-inline-start: var(--jump-to-pad-inline);
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: var(--jump-to-font);
    line-height: 1;
    color: var(--text-tertiary);
    pointer-events: none;
  }
  .jump-to__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    inline-size: auto;
    max-inline-size: 100%;
    font-size: var(--jump-to-font);
    font-family: inherit;
    line-height: 1.25;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--jump-to-radius);
    box-shadow: var(--shadow-xs);
    padding-block: var(--jump-to-pad-block);
    padding-inline-start: var(--jump-to-pad-inline);
    padding-inline-end: calc(var(--jump-to-pad-inline) + 1rem);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
    background-position: calc(100% - var(--jump-to-pad-inline) - var(--jump-to-caret)) center, calc(100% - var(--jump-to-pad-inline)) center;
    background-size: var(--jump-to-caret) var(--jump-to-caret), var(--jump-to-caret) var(--jump-to-caret);
    background-repeat: no-repeat;
  }
  .jump-to__select option {
    color: var(--text-primary);
    background-color: var(--bg-primary);
  }
  .jump-to__select:hover {
    background-color: var(--bg-primary-hover);
  }
  .jump-to__select:focus, .jump-to__select:focus-visible {
    outline: none;
    background-color: var(--bg-primary);
    border-color: var(--border-focus);
    box-shadow: inset 0 0 0 1px var(--border-focus), var(--shadow-xs);
    background-image: linear-gradient(45deg, var(--text-primary) 50%, transparent 50%), linear-gradient(135deg, transparent 50%, var(--text-primary) 50%);
  }
  .jump-to__select:invalid, .jump-to__select option[disabled][selected] {
    color: var(--text-placeholder);
  }
  .jump-to__select:disabled, .jump-to__select[disabled] {
    color: var(--text-placeholder);
    background-color: var(--bg-secondary);
    cursor: not-allowed;
    opacity: 0.75;
  }
  .jump-to__field:has(.jump-to__icon) > .jump-to__select {
    padding-inline-start: calc(var(--jump-to-pad-inline) + var(--jump-to-font) + 0.5rem);
  }
  .jump-to-inline {
    flex-direction: row;
    align-items: center;
    gap: var(--jump-to-label-gap);
  }
  .jump-to-inline .jump-to__label {
    white-space: nowrap;
  }
  .jump-to-block {
    display: flex;
  }
  .jump-to-block .jump-to__field {
    inline-size: 100%;
  }
  .jump-to-block .jump-to__select {
    inline-size: 100%;
  }
  .jump-to-sm {
    --jump-to-font: 0.75rem;
    --jump-to-pad-block: 0.375rem;
    --jump-to-pad-inline: 0.625rem;
    --jump-to-radius: var(--radius-sm);
  }
  .jump-to-md {
    --jump-to-font: 0.875rem;
    --jump-to-pad-block: 0.5rem;
    --jump-to-pad-inline: 0.75rem;
    --jump-to-radius: var(--radius-md);
  }
  .jump-to-lg {
    --jump-to-font: 1rem;
    --jump-to-pad-block: 0.625rem;
    --jump-to-pad-inline: 0.875rem;
    --jump-to-radius: var(--radius-lg);
  }
  @media (prefers-reduced-motion: reduce) {
    .jump-to__select {
      transition: none;
    }
  }
}
@layer utilities {
  .context-switcher {
    --context-switcher-panel-inline-size: 18rem;
    --context-switcher-panel-offset: 0.375rem;
    --context-switcher-panel-pad: 0.375rem;
    --context-switcher-avatar-size: 1.75rem;
    --context-switcher-list-max-block: 16rem;
    --context-switcher-item-pad-block: 0.5rem;
    --context-switcher-item-pad-inline: 0.625rem;
    position: relative;
    display: inline-flex;
  }
  .context-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    min-inline-size: 0;
    padding-block: 0.375rem;
    padding-inline: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: start;
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
  .context-switcher__trigger:hover {
    background-color: var(--bg-primary-hover);
  }
  .context-switcher__trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .context-switcher__trigger[aria-expanded="true"] {
    background-color: var(--bg-primary-hover);
    border-color: var(--border-focus);
  }
  .context-switcher__trigger:disabled, .context-switcher__trigger.is-disabled, .context-switcher__trigger[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
    background-color: transparent;
  }
  .context-switcher__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--context-switcher-avatar-size);
    block-size: var(--context-switcher-avatar-size);
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-md);
  }
  .context-switcher__avatar > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .context-switcher__current {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    line-height: 1.2;
  }
  .context-switcher__name {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-primary);
  }
  .context-switcher__meta {
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-tertiary);
  }
  .context-switcher__caret {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline-start: 0.25rem;
    font-size: 0.75em;
    color: var(--text-tertiary);
    transition: transform 150ms ease;
  }
  .context-switcher__trigger[aria-expanded="true"] .context-switcher__caret {
    transform: rotate(180deg);
  }
  .context-switcher__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--context-switcher-panel-offset));
    inset-inline-start: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    inline-size: var(--context-switcher-panel-inline-size);
    max-inline-size: calc(100vw - 2rem);
    padding: var(--context-switcher-panel-pad);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  }
  .context-switcher__trigger[aria-expanded="true"] + .context-switcher__panel, .context-switcher:not([data-context-switcher-ready]):focus-within .context-switcher__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
  }
  .context-switcher__search {
    display: block;
    inline-size: 100%;
    margin-block-end: var(--context-switcher-panel-pad);
    padding-block: 0.375rem;
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
  }
  .context-switcher__search::placeholder {
    color: var(--text-tertiary);
  }
  .context-switcher__search:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .context-switcher__list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-block-size: var(--context-switcher-list-max-block);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }
  .context-switcher__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    padding-block: var(--context-switcher-item-pad-block);
    padding-inline: var(--context-switcher-item-pad-inline);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: start;
    color: var(--text-secondary);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .context-switcher__option:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .context-switcher__option:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .context-switcher__option.is-selected, .context-switcher__option[aria-selected="true"] {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .context-switcher__option:disabled, .context-switcher__option.is-disabled, .context-switcher__option[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
  }
  .context-switcher__option-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--context-switcher-avatar-size);
    block-size: var(--context-switcher-avatar-size);
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-md);
  }
  .context-switcher__option-avatar > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .context-switcher__option-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.0625rem;
    min-inline-size: 0;
  }
  .context-switcher__option-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .context-switcher__option-meta {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-tertiary);
  }
  .context-switcher__option:hover .context-switcher__option-meta, .context-switcher__option.is-selected .context-switcher__option-meta, .context-switcher__option[aria-selected="true"] .context-switcher__option-meta {
    color: var(--text-secondary);
  }
  .context-switcher__check {
    flex: 0 0 auto;
    margin-inline-start: auto;
    font-size: 0.875rem;
    color: var(--text-brand);
    opacity: 0;
  }
  .context-switcher__option.is-selected .context-switcher__check, .context-switcher__option[aria-selected="true"] .context-switcher__check {
    opacity: 1;
  }
  .context-switcher__empty {
    padding-block: var(--context-switcher-item-pad-block);
    padding-inline: var(--context-switcher-item-pad-inline);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .context-switcher__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    margin-block-start: var(--context-switcher-panel-pad);
    padding-block: var(--context-switcher-item-pad-block);
    padding-inline: var(--context-switcher-item-pad-inline);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-block-start: 1px solid var(--border-divider);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .context-switcher__footer:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .context-switcher__footer:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .context-switcher-end .context-switcher__panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .context-switcher-block {
    --context-switcher-panel-inline-size: 100%;
    display: flex;
  }
  .context-switcher-compact .context-switcher__current, .context-switcher-compact .context-switcher__caret {
    display: none;
  }
  .context-switcher-compact .context-switcher__trigger {
    gap: 0;
    padding-inline: 0.375rem;
  }
  .context-switcher-sm {
    --context-switcher-avatar-size: 1.5rem;
    --context-switcher-item-pad-block: 0.375rem;
    --context-switcher-item-pad-inline: 0.5rem;
  }
  .context-switcher-sm .context-switcher__trigger {
    padding-block: 0.25rem;
  }
  .context-switcher-sm .context-switcher__trigger, .context-switcher-sm .context-switcher__option {
    font-size: 0.8125rem;
  }
  .context-switcher-sm .context-switcher__avatar, .context-switcher-sm .context-switcher__option-avatar {
    font-size: 0.625rem;
  }
  .context-switcher-lg {
    --context-switcher-avatar-size: 2.25rem;
    --context-switcher-item-pad-block: 0.625rem;
    --context-switcher-item-pad-inline: 0.75rem;
    --context-switcher-panel-inline-size: 20rem;
  }
  .context-switcher-lg .context-switcher__trigger {
    padding-block: 0.5rem;
  }
  .context-switcher-lg .context-switcher__trigger, .context-switcher-lg .context-switcher__option {
    font-size: 0.9375rem;
  }
  .context-switcher-lg .context-switcher__avatar, .context-switcher-lg .context-switcher__option-avatar {
    font-size: 0.8125rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .context-switcher__panel, .context-switcher__caret {
      transition: none;
    }
  }
}
@layer utilities {
  .mega-nav {
    --mega-nav-panel-offset: 0.5rem;
    --mega-nav-panel-pad: 1.5rem;
    --mega-nav-col-min: 12rem;
    --mega-nav-col-gap: 2rem;
    --mega-nav-row-gap: 0.125rem;
    --mega-nav-featured-size: 18rem;
    display: inline-flex;
  }
  .mega-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .mega-nav__trigger:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .mega-nav__trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .mega-nav__trigger[aria-expanded="true"] {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .mega-nav__trigger:disabled, .mega-nav__trigger.is-disabled, .mega-nav__trigger[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
    background-color: transparent;
  }
  .mega-nav__caret {
    font-size: 0.75em;
    transition: transform 150ms ease;
  }
  .mega-nav__trigger[aria-expanded="true"] .mega-nav__caret {
    transform: rotate(180deg);
  }
  .mega-nav__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--mega-nav-panel-offset));
    inset-inline: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mega-nav-col-gap);
    padding: var(--mega-nav-panel-pad);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  }
  .mega-nav__trigger[aria-expanded="true"] + .mega-nav__panel, .mega-nav:not([data-mega-nav-ready]):focus-within .mega-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
  }
  .mega-nav__grid {
    flex: 1 1 60%;
    min-inline-size: min(100%, var(--mega-nav-col-min));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mega-nav-col-min), 1fr));
    gap: var(--mega-nav-col-gap);
  }
  .mega-nav__group {
    display: flex;
    flex-direction: column;
    gap: var(--mega-nav-row-gap);
  }
  .mega-nav__group-title {
    padding-block: 0.375rem;
    padding-inline: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .mega-nav__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.625rem;
    row-gap: 0.125rem;
    align-items: center;
    padding-block: 0.5rem;
    padding-inline: 0.625rem;
    color: var(--text-secondary);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .mega-nav__link:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .mega-nav__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .mega-nav__link.is-active, .mega-nav__link[aria-current="page"] {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .mega-nav__link:disabled, .mega-nav__link.is-disabled, .mega-nav__link[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
  }
  .mega-nav__icon {
    grid-row: 1 / -1;
    align-self: center;
    font-size: 1rem;
    color: var(--text-tertiary);
    transition: color 120ms ease;
  }
  .mega-nav__link:hover .mega-nav__icon, .mega-nav__link.is-active .mega-nav__icon, .mega-nav__link[aria-current="page"] .mega-nav__icon {
    color: var(--text-secondary);
  }
  .mega-nav__link-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
  }
  .mega-nav__desc {
    grid-column: 2;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-tertiary);
  }
  .mega-nav__link:hover .mega-nav__desc, .mega-nav__link.is-active .mega-nav__desc, .mega-nav__link[aria-current="page"] .mega-nav__desc {
    color: var(--text-secondary);
  }
  .mega-nav__featured {
    display: flex;
    flex: 1 1 var(--mega-nav-featured-size);
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .mega-nav__featured[href]:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
  }
  .mega-nav__featured:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .mega-nav__featured-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    font-size: 0.875rem;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-md);
  }
  .mega-nav__featured-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .mega-nav__featured-desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .mega-nav__panel, .mega-nav__caret {
      transition: none;
    }
  }
  .mega-nav-cols-2 {
    --mega-nav-cols: 2;
  }
  .mega-nav-cols-3 {
    --mega-nav-cols: 3;
  }
  .mega-nav-cols-4 {
    --mega-nav-cols: 4;
  }
  .mega-nav-cols-2 .mega-nav__grid, .mega-nav-cols-3 .mega-nav__grid, .mega-nav-cols-4 .mega-nav__grid {
    grid-template-columns: repeat(var(--mega-nav-cols), minmax(0, 1fr));
  }
  .mega-nav-contained {
    --mega-nav-max-inline: 40rem;
    --mega-nav-panel-pad: 1.75rem;
    --mega-nav-col-gap: 2.25rem;
    --mega-nav-row-gap: 0.375rem;
    position: relative;
  }
  .mega-nav-contained .mega-nav__panel {
    inset-inline: auto;
    inset-inline-start: 0;
    max-inline-size: var(--mega-nav-max-inline);
  }
  .mega-nav-contained.mega-nav-end .mega-nav__panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}
@layer utilities {
  .nav-tree {
    --nav-tree-indent: 1.25rem;
    --nav-tree-depth: 0;
    --nav-tree-gap: 0.0625rem;
    --nav-tree-pad-block: 0.375rem;
    --nav-tree-pad-inline: 0.5rem;
    --nav-tree-toggle-size: 1.25rem;
    color: var(--text-secondary);
  }
  .nav-tree__branch {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nav-tree-gap);
  }
  .nav-tree__branch {
    --nav-tree-depth: 0;
  }
  .nav-tree__branch .nav-tree__branch {
    --nav-tree-depth: 1;
  }
  .nav-tree__branch .nav-tree__branch .nav-tree__branch {
    --nav-tree-depth: 2;
  }
  .nav-tree__branch .nav-tree__branch .nav-tree__branch .nav-tree__branch {
    --nav-tree-depth: 3;
  }
  .nav-tree__branch .nav-tree__branch .nav-tree__branch .nav-tree__branch .nav-tree__branch {
    --nav-tree-depth: 4;
  }
  .nav-tree__branch .nav-tree__branch .nav-tree__branch .nav-tree__branch .nav-tree__branch .nav-tree__branch {
    --nav-tree-depth: 5;
  }
  .nav-tree__group {
    margin: 0;
  }
  .nav-tree__group > summary {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
  }
  .nav-tree__group > summary::-webkit-details-marker {
    display: none;
  }
  .nav-tree__group > summary::marker {
    content: "";
  }
  .nav-tree__item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    inline-size: 100%;
    padding-block: var(--nav-tree-pad-block);
    padding-inline-start: calc(var(--nav-tree-pad-inline) + var(--nav-tree-depth, 0) * var(--nav-tree-indent));
    padding-inline-end: var(--nav-tree-pad-inline);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .nav-tree__item:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .nav-tree__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .nav-tree__item.is-active {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
  }
  .nav-tree__toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--nav-tree-toggle-size);
    block-size: var(--nav-tree-toggle-size);
    color: var(--text-tertiary);
    transition: transform var(--duration-fast) var(--ease-out, ease);
  }
  .nav-tree__group > summary .nav-tree__toggle::before {
    content: "";
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    transform-origin: center;
  }
  .nav-tree__group[open] > summary .nav-tree__toggle {
    transform: rotate(90deg);
  }
  .nav-tree__item:hover .nav-tree__toggle, .nav-tree__item.is-active .nav-tree__toggle {
    color: inherit;
  }
  .nav-tree__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--text-tertiary);
  }
  .nav-tree__icon > svg, .nav-tree__icon > img {
    inline-size: 100%;
    block-size: 100%;
  }
  .nav-tree__item:hover .nav-tree__icon, .nav-tree__item.is-active .nav-tree__icon {
    color: inherit;
  }
  .nav-tree__label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-tree__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    min-inline-size: 1.25rem;
    min-block-size: 1.25rem;
    padding-inline: 0.375rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
  }
  .nav-tree__badge--accent {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .nav-tree-guides .nav-tree__branch .nav-tree__branch {
    position: relative;
  }
  .nav-tree-guides .nav-tree__branch .nav-tree__branch::before {
    content: "";
    position: absolute;
    inset-block: 0.125rem;
    inset-inline-start: calc(var(--nav-tree-pad-inline) + (var(--nav-tree-depth) - 1) * var(--nav-tree-indent) + 0.625rem);
    inline-size: 1px;
    background-color: var(--border-divider);
  }
  .nav-tree__item[data-demo-state~="hover"] {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .nav-tree__item[data-demo-state~="focus"] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-tree__item, .nav-tree__toggle {
      transition: none;
    }
  }
  .nav-tree__item {
    min-block-size: var(--nav-tree-row-min, auto);
  }
  .nav-tree-compact {
    --nav-tree-pad-block: 0.1875rem;
    --nav-tree-gap: 0;
    --nav-tree-row-min: 1.5rem;
  }
  .nav-tree-comfortable {
    --nav-tree-pad-block: 0.5rem;
    --nav-tree-gap: 0.125rem;
    --nav-tree-row-min: 2.25rem;
  }
  .nav-tree-sm {
    --nav-tree-indent: 1rem;
    --nav-tree-toggle-size: 1rem;
    font-size: 0.8125rem;
  }
  .nav-tree-sm .nav-tree__icon {
    inline-size: 1rem;
    block-size: 1rem;
    font-size: 1rem;
  }
  .nav-tree-lg {
    --nav-tree-indent: 1.5rem;
    --nav-tree-toggle-size: 1.5rem;
    font-size: 1rem;
  }
  .nav-tree-lg .nav-tree__icon {
    inline-size: 1.375rem;
    block-size: 1.375rem;
    font-size: 1.375rem;
  }
  .nav-tree-flush {
    --nav-tree-indent: 0rem;
  }
  .nav-tree-flush.nav-tree-guides .nav-tree__branch .nav-tree__branch::before {
    display: none;
  }
}
@layer utilities {
  .overflow-menu {
    --overflow-menu-gap: 0.25rem;
    --overflow-menu-item-pad-block: 0.5rem;
    --overflow-menu-item-pad-inline: 0.75rem;
    --overflow-menu-panel-inline-size: 14rem;
    --overflow-menu-panel-offset: 0.375rem;
    --overflow-menu-panel-pad: 0.375rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--overflow-menu-gap);
  }
  .overflow-menu[data-overflow-menu-ready] {
    flex-wrap: nowrap;
  }
  .overflow-menu__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    padding-block: var(--overflow-menu-item-pad-block);
    padding-inline: var(--overflow-menu-item-pad-inline);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .overflow-menu__item:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .overflow-menu__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .overflow-menu__item.is-active, .overflow-menu__item[aria-current="page"] {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .overflow-menu__item:disabled, .overflow-menu__item.is-disabled, .overflow-menu__item[aria-disabled="true"] {
    pointer-events: none;
    color: var(--text-tertiary);
  }
  .overflow-menu__item-priority {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .overflow-menu__item.overflow-menu__item-priority:hover, .overflow-menu__item.overflow-menu__item-priority.is-active, .overflow-menu__item.overflow-menu__item-priority[aria-current="page"] {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .overflow-menu__item.overflow-menu__item-priority:hover {
    box-shadow: var(--shadow-md);
  }
  .overflow-menu__more {
    display: none;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    padding-block: var(--overflow-menu-item-pad-block);
    padding-inline: var(--overflow-menu-item-pad-inline);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .overflow-menu[data-overflow-menu-ready] .overflow-menu__more:not([hidden]) {
    display: inline-flex;
  }
  .overflow-menu__more:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .overflow-menu__more:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .overflow-menu__more[aria-expanded="true"] {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
  .overflow-menu__more-caret {
    font-size: 0.75em;
    transition: transform 150ms ease;
  }
  .overflow-menu__more[aria-expanded="true"] .overflow-menu__more-caret {
    transform: rotate(180deg);
  }
  .overflow-menu__more-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--overflow-menu-panel-offset));
    inset-inline-end: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: var(--overflow-menu-panel-inline-size);
    padding: var(--overflow-menu-panel-pad);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  }
  .overflow-menu__more[aria-expanded="true"] + .overflow-menu__more-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
  }
  .overflow-menu__more-panel .overflow-menu__item {
    display: flex;
    inline-size: 100%;
    justify-content: flex-start;
  }
  @media (prefers-reduced-motion: reduce) {
    .overflow-menu__more-panel, .overflow-menu__more-caret {
      transition: none;
    }
  }
  .overflow-menu-sm {
    --overflow-menu-gap: 0.125rem;
    --overflow-menu-item-pad-block: 0.375rem;
    --overflow-menu-item-pad-inline: 0.5rem;
    --overflow-menu-panel-pad: 0.25rem;
  }
  .overflow-menu-sm .overflow-menu__item, .overflow-menu-sm .overflow-menu__more {
    font-size: 0.8125rem;
  }
  .overflow-menu-lg {
    --overflow-menu-gap: 0.375rem;
    --overflow-menu-item-pad-block: 0.625rem;
    --overflow-menu-item-pad-inline: 1rem;
    --overflow-menu-panel-inline-size: 16rem;
    --overflow-menu-panel-pad: 0.5rem;
  }
  .overflow-menu-lg .overflow-menu__item, .overflow-menu-lg .overflow-menu__more {
    font-size: 1rem;
  }
  .overflow-menu-fill > .overflow-menu__item {
    flex: 1 0 auto;
  }
  .overflow-menu-ghost .overflow-menu__item:not(.overflow-menu__item-priority):not(.is-active):not([aria-current="page"]) {
    color: var(--text-tertiary);
  }
  .overflow-menu-ghost .overflow-menu__item:not(.overflow-menu__item-priority):not(.is-active):not([aria-current="page"]):hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
}
@layer utilities {
  .offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    width: 400px;
    background-color: var(--bg-drawer);
    color: var(--text-drawer);
    border-left: 1px solid var(--border-drawer);
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    will-change: transform;
    z-index: 50;
  }
  .offcanvas.offcanvas-start {
    right: auto;
    left: 0;
    transform: translate3d(-100%, 0, 0);
    border-left: 0;
    border-right: 1px solid var(--border-drawer);
  }
  .offcanvas.offcanvas-end {
    right: 0;
    left: auto;
    transform: translate3d(100%, 0, 0);
  }
  .offcanvas.offcanvas-top {
    top: 0;
    bottom: auto;
    height: 30%;
    width: 100%;
    transform: translate3d(0, -100%, 0);
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-drawer);
  }
  .offcanvas.offcanvas-bottom {
    top: auto;
    bottom: 0;
    height: 30%;
    width: 100%;
    transform: translate3d(0, 100%, 0);
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--border-drawer);
  }
  .offcanvas.show {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .offcanvas-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--border-drawer);
  }
  .offcanvas-title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-drawer);
  }
  .offcanvas-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--spacing) * 4);
  }
  .offcanvas.offcanvas-sm {
    width: 280px;
  }
  .offcanvas.offcanvas-md {
    width: 400px;
  }
  .offcanvas.offcanvas-lg {
    width: 560px;
  }
  .offcanvas.offcanvas-xl {
    width: 720px;
  }
  .offcanvas.offcanvas-top.offcanvas-sm, .offcanvas.offcanvas-bottom.offcanvas-sm {
    height: 20%;
    width: 100%;
  }
  .offcanvas.offcanvas-top.offcanvas-lg, .offcanvas.offcanvas-bottom.offcanvas-lg {
    height: 50%;
    width: 100%;
  }
  .offcanvas.offcanvas-full {
    height: 100%;
    width: 100%;
  }
  .offcanvas-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-color: var(--border-divider, var(--border-primary));
  }
  .offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .offcanvas-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-color: var(--border-divider, var(--border-primary));
  }
  @media (prefers-reduced-motion: reduce) {
    .offcanvas {
      transition: none;
    }
  }
}
@layer utilities {
  .mkt-header, .mkt-header * {
    box-sizing: border-box;
  }
  .mkt-header {
    --mkt-container: 80rem;
  }
  .mkt-header {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 4rem;
    background-color: transparent;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .mkt-header {
      height: 4.5rem;
    }
  }
  .mkt-header.is-menu-open {
    background-color: var(--bg-surface);
  }
  .mkt-header--floating {
    height: 4rem;
  }
  @media (min-width: 768px) {
    .mkt-header--floating {
      height: 4.75rem;
      padding-top: 0.75rem;
    }
  }
  .mkt-header__container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    width: 100%;
    flex: 1;
    align-items: center;
    max-width: var(--mkt-container);
    padding-right: 0.75rem;
    padding-left: 1rem;
  }
  @media (min-width: 768px) {
    .mkt-header__container {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }
  .mkt-header__bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  @media (min-width: 768px) {
    .mkt-header--floating .mkt-header__bar {
      border-radius: var(--radius-2xl);
      background-color: var(--bg-surface);
      padding: 0.75rem 0.75rem 0.75rem 1rem;
      box-shadow: inset 0 0 0 1px var(--border-secondary-alt), var(--shadow-xs);
    }
  }
  .mkt-header__left {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    align-items: center;
    gap: 1.25rem;
  }
  .mkt-header__logo {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    color: var(--text-primary);
  }
  .mkt-header__logo svg, .mkt-header__logo img {
    height: 1.75rem;
    width: auto;
  }
  .mkt-header__logo .mkt-logo-mark {
    fill: var(--color-brand-600);
  }
  .mkt-header__logo .mkt-logo-glyph {
    stroke: var(--text-on-brand, oklch(100% 0 0));
  }
  .mkt-header__logo .mkt-logo-word {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .mkt-header__logo--full {
    display: inline-flex;
  }
  .mkt-header__logo--mini {
    display: none;
  }
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .mkt-header__logo--full {
      display: none;
    }
    .mkt-header__logo--mini {
      display: inline-flex;
    }
  }
  .mkt-nav {
    display: none;
  }
  @media (min-width: 768px) {
    .mkt-nav {
      display: block;
    }
  }
  .mkt-nav__list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: 0.125rem;
  }
  .mkt-nav__item {
    position: relative;
  }
  .mkt-nav__trigger, .mkt-nav__link {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    gap: 0.125rem;
    padding: 0.25rem 0.375rem;
    color: var(--text-secondary);
    background-color: transparent;
    transition: color 100ms linear;
  }
  .mkt-nav__trigger > span, .mkt-nav__link > span {
    padding-inline: 0.125rem;
  }
  .mkt-nav__trigger:hover, .mkt-nav__link:hover, .mkt-nav__item.is-open > .mkt-nav__trigger {
    color: var(--text-secondary-hover);
  }
  .mkt-nav__trigger:focus-visible, .mkt-nav__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .mkt-nav__chevron {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--text-quaternary);
    transition: transform 100ms linear;
  }
  .mkt-nav__trigger[aria-expanded="true"] .mkt-nav__chevron {
    transform: rotate(-180deg);
  }
  .mkt-header__actions {
    display: none;
    align-items: center;
    gap: 0.75rem;
  }
  @media (min-width: 768px) {
    .mkt-header__actions {
      display: flex;
      &.collapse.show {
        display: flex;
      }
    }
  }
  .mkt-header__mobile-toggle {
    margin-left: auto;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    color: var(--text-secondary);
    background-color: transparent;
    transition: background-color 100ms linear;
  }
  .mkt-header__mobile-toggle:hover {
    background-color: var(--bg-primary-hover);
  }
  .mkt-header__mobile-toggle:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  @media (min-width: 768px) {
    .mkt-header__mobile-toggle {
      display: none;
    }
  }
  .mkt-header__mobile-toggle .mkt-icon-close {
    display: none;
  }
  .mkt-header__mobile-toggle[aria-expanded="true"] .mkt-icon-close {
    display: block;
  }
  .mkt-header__mobile-toggle[aria-expanded="true"] .mkt-icon-open {
    display: none;
  }
  .mkt-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    transform-origin: top;
    padding-top: 0.5rem;
    display: none;
  }
  .mkt-popover.is-open {
    display: block;
  }
  .mkt-popover--full {
    right: 0;
    left: 0;
    padding-top: 0.5rem;
  }
  .mkt-header--full-width .mkt-nav__item {
    position: static;
  }
  .mkt-header--floating .mkt-popover {
    padding-top: 0.25rem;
  }
  .mkt-popover.is-open {
    animation: mkt-pop-in 200ms ease-out;
  }
  .mkt-popover.is-closing {
    display: block;
    animation: mkt-pop-out 150ms ease-in forwards;
    pointer-events: none;
  }
  @keyframes mkt-pop-in {
    from {
      opacity: 0;
      transform: translateY(-0.25rem) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes mkt-pop-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(-0.25rem) scale(0.98);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mkt-popover.is-open, .mkt-popover.is-closing {
      animation: none;
    }
    .mkt-nav__chevron, .mkt-nav__trigger, .mkt-nav__link, .mkt-header__mobile-toggle {
      transition: none;
    }
  }
  .mkt-menu {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background-color: var(--bg-surface);
    box-shadow: inset 0 0 0 1px var(--border-secondary-alt), var(--shadow-lg);
  }
  .mkt-menu--framed {
    background-color: var(--bg-primary-subtle);
  }
  .mkt-menu__body {
    background-color: var(--bg-surface);
  }
  .mkt-menu__list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.125rem;
  }
  .mkt-nav-item {
    display: inline-flex;
    width: 100%;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    color: inherit;
    transition: background-color 100ms linear;
  }
  .mkt-nav-item:hover {
    background-color: var(--bg-primary-hover);
  }
  .mkt-nav-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .mkt-nav-item__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--text-link);
  }
  .mkt-nav-item__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-nav-item__text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
  }
  .mkt-nav-item__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .mkt-nav-item__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .mkt-nav-item__subtitle {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .mkt-menu__heading {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
  }
  .mkt-menu__section-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .mkt-menu__section-subtitle {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .mkt-menu__footer {
    background-color: var(--bg-primary-subtle);
  }
  .mkt-menu__divider {
    border-top: 1px solid var(--border-secondary);
  }
  .mkt-link {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
    background: transparent;
    transition: color 100ms linear;
  }
  .mkt-link:hover {
    color: var(--text-link-hover);
  }
  .mkt-link--gray {
    color: var(--text-secondary);
  }
  .mkt-link--gray:hover {
    color: var(--text-secondary-hover);
  }
  .mkt-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .mkt-link__icon {
    font-size: 1rem;
    line-height: 1;
  }
  .mkt-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    color: inherit;
    transition: background-color 150ms linear;
  }
  .mkt-card:hover {
    background-color: var(--bg-primary-hover);
  }
  .mkt-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .mkt-card__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-card__text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
  }
  .mkt-card__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mkt-card__desc {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .mkt-card__media {
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary-subtle);
  }
  .mkt-card--h {
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .mkt-card--h .mkt-card__title {
    -webkit-line-clamp: 2;
  }
  @media (min-width: 640px) {
    .mkt-card--h {
      flex-direction: row;
      gap: calc(var(--spacing) * 3);
    }
  }
  .mkt-card--v {
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .mkt-card--v .mkt-card__title {
    -webkit-line-clamp: 1;
  }
  .mkt-card--image.mkt-card--h .mkt-card__media {
    height: 12.5rem;
    width: 100%;
  }
  @media (min-width: 640px) {
    .mkt-card--image.mkt-card--h .mkt-card__media {
      height: 5.5rem;
      width: 9rem;
    }
  }
  .mkt-card--image.mkt-card--v .mkt-card__media {
    height: 12.5rem;
    width: 100%;
  }
  @media (min-width: 640px) {
    .mkt-card--image.mkt-card--v .mkt-card__media {
      height: 8.5rem;
      max-width: 15rem;
    }
  }
  .mkt-card--feature.mkt-card--h .mkt-card__media {
    height: 12.5rem;
  }
  @media (min-width: 640px) {
    .mkt-card--feature.mkt-card--h .mkt-card__media {
      height: 6.5rem;
      width: 11rem;
    }
  }
  .mkt-card--feature.mkt-card--v .mkt-card__media {
    height: 12.5rem;
    width: 100%;
  }
  @media (min-width: 640px) {
    .mkt-card--feature.mkt-card--v .mkt-card__media {
      height: 10rem;
    }
  }
  .mkt-card--video .mkt-card__media-wrap {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    width: 15rem;
  }
  @media (min-width: 640px) {
    .mkt-card--video .mkt-card__media-wrap {
      width: 11rem;
    }
  }
  .mkt-card--video .mkt-card__media {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
  .mkt-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: oklch(0% 0 0 / 0.10);
    box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.10);
    color: var(--color-white, oklch(100% 0 0));
    font-size: 1.25rem;
  }
  .mkt-menu-shell {
    padding: 0 0.75rem 0.5rem;
  }
  @media (min-width: 768px) {
    .mkt-menu-shell {
      padding: 0;
    }
  }
  .mkt-menu--simple {
    padding-block: 0.5rem;
  }
  @media (min-width: 768px) {
    .mkt-menu--simple {
      padding: 0.5rem;
      max-width: 21rem;
    }
  }
  .mkt-menu--simple-footer > .mkt-menu__list {
    padding-block: 0.5rem;
  }
  @media (min-width: 768px) {
    .mkt-menu--simple-footer {
      max-width: 21rem;
    }
    .mkt-menu--simple-footer > .mkt-menu__list {
      padding: 0.5rem;
    }
  }
  .mkt-menu__footer-center {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    justify-content: center;
    text-align: center;
    padding: 1.25rem 1rem;
  }
  .mkt-menu--two-col > .mkt-menu__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.125rem;
    padding-block: 0.5rem;
  }
  @media (min-width: 768px) {
    .mkt-menu--two-col {
      max-width: 40rem;
    }
    .mkt-menu--two-col > .mkt-menu__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 0.5rem;
    }
  }
  .mkt-menu--two-col-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .mkt-menu--two-col-footer {
      width: 40rem;
      gap: 1rem;
      padding: 0.5rem;
    }
  }
  .mkt-menu--two-col-footer .mkt-menu__cols {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 5);
    padding: 1rem 0 1.25rem;
  }
  @media (min-width: 768px) {
    .mkt-menu--two-col-footer .mkt-menu__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: calc(var(--spacing) * 3);
      padding: 0.75rem 0.75rem 0;
    }
  }
  .mkt-menu__cta-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 5);
    background-color: var(--bg-primary-subtle);
    padding: 1rem;
  }
  @media (min-width: 768px) {
    .mkt-menu__cta-row {
      flex-direction: row;
      align-items: center;
      gap: calc(var(--spacing) * 4);
      border-radius: var(--radius-lg);
      padding: 1rem 1.5rem;
    }
  }
  .mkt-menu--split {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .mkt-menu--split {
      flex-direction: row;
      width: max-content;
    }
  }
  .mkt-menu--split .mkt-menu__links {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0 0.75rem;
  }
  @media (min-width: 768px) {
    .mkt-menu--split .mkt-menu__links {
      padding: 0.5rem;
    }
  }
  .mkt-menu__side {
    background-color: var(--bg-primary-subtle);
    padding: 0.5rem 0.25rem 0.75rem;
  }
  @media (min-width: 768px) {
    .mkt-menu__side {
      max-width: 19rem;
      padding: 0.5rem;
    }
  }
  .mkt-menu--posts {
    max-width: 48rem;
  }
  .mkt-menu--posts .mkt-menu__links {
    padding: 1rem 0 1.25rem;
  }
  @media (min-width: 768px) {
    .mkt-menu--posts .mkt-menu__links {
      padding: 1.25rem;
    }
  }
  .mkt-menu--posts .mkt-menu__side {
    flex-shrink: 0;
    padding: 1.25rem 0;
  }
  @media (min-width: 768px) {
    .mkt-menu--posts .mkt-menu__side {
      max-width: 28rem;
      padding: 1.25rem;
      padding-bottom: 1.5rem;
    }
  }
  .mkt-menu--sections {
    max-width: 50rem;
  }
  .mkt-menu--sections .mkt-menu__intro {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .mkt-menu--sections .mkt-menu__intro {
      padding: 0;
    }
  }
  .mkt-menu--sections .mkt-menu__inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
    border-radius: var(--radius-2xl);
    background-color: var(--bg-surface);
    padding: 1rem 0 1.25rem;
  }
  @media (min-width: 768px) {
    .mkt-menu--sections .mkt-menu__inner {
      gap: 1.5rem;
      padding: 1.5rem;
      padding-top: 1.25rem;
    }
  }
  .mkt-menu--sections .mkt-menu__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
  }
  @media (min-width: 768px) {
    .mkt-menu--sections .mkt-menu__row {
      flex-direction: row;
      gap: 2rem;
    }
  }
  .mkt-menu__linklist {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-mega {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--bg-surface);
  }
  @media (min-width: 768px) {
    .mkt-mega {
      box-shadow: var(--shadow-lg);
    }
  }
  .mkt-mega--floating {
    border-radius: 0;
  }
  @media (min-width: 768px) {
    .mkt-mega--floating {
      border-radius: var(--radius-2xl);
      box-shadow: inset 0 0 0 1px var(--border-secondary-alt), var(--shadow-lg);
    }
  }
  .mkt-mega__inner {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    max-width: var(--mkt-container);
  }
  @media (min-width: 768px) {
    .mkt-mega__inner {
      padding-inline: 2rem;
    }
  }
  .mkt-mega__cols {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 5);
    padding: 1rem 0 1.25rem;
  }
  @media (min-width: 768px) {
    .mkt-mega__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-block: 1.5rem;
    }
  }
  @media (min-width: 1280px) {
    .mkt-mega__cols--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .mkt-mega__cols--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .mkt-mega__sidebar {
    position: relative;
    z-index: 10;
    width: 100%;
    flex-shrink: 0;
    background-color: var(--bg-primary-subtle);
    padding: 1.25rem 0 1.5rem;
  }
  @media (min-width: 768px) {
    .mkt-mega__sidebar {
      border-radius: var(--radius-2xl);
      padding: 1.5rem;
    }
  }
  .mkt-mega__row {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    max-width: var(--mkt-container);
  }
  @media (min-width: 1024px) {
    .mkt-mega__row--lg {
      flex-direction: row;
    }
  }
  @media (min-width: 1280px) {
    .mkt-mega__row--xl {
      flex-direction: row;
    }
  }
  .mkt-mega__aside-links {
    position: relative;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    background-color: var(--bg-primary-subtle);
    padding: 1.25rem 1rem 1.5rem;
  }
  @media (min-width: 768px) {
    .mkt-mega__aside-links {
      padding: 1.5rem 2rem;
    }
  }
  .mkt-mega__footer {
    background-color: var(--bg-primary-subtle);
  }
  @media (min-width: 768px) {
    .mkt-mega__footer--inset {
      margin: 0 0.5rem 0.5rem;
      border-radius: var(--radius-lg);
    }
  }
  .mkt-mega__footer-inner {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    max-width: var(--mkt-container);
    padding: 1.5rem;
  }
  @media (min-width: 768px) {
    .mkt-mega__footer-inner {
      justify-content: space-between;
      padding: 1.25rem 2rem;
    }
  }
  .mkt-mega__footer-actions {
    display: none;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  @media (min-width: 768px) {
    .mkt-mega__footer-actions {
      display: flex;
      &.collapse.show {
        display: flex;
      }
    }
  }
  .mkt-mega__posts {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--spacing);
    padding: 0.5rem 0 1.5rem;
  }
  @media (min-width: 768px) {
    .mkt-mega__posts {
      padding-top: 1.25rem;
    }
  }
  @media (min-width: 1024px) {
    .mkt-mega__posts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1280px) {
    .mkt-mega__posts--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .mkt-mega__slim {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 0.5);
    padding: 0.5rem 0 1rem;
  }
  @media (min-width: 768px) {
    .mkt-mega__slim {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.25rem;
      padding-block: 1.5rem;
    }
  }
  @media (min-width: 1280px) {
    .mkt-mega__slim {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .mkt-mobile {
    position: absolute;
    left: 0;
    z-index: 40;
    width: 100%;
    overflow-y: auto;
    top: 4rem;
    height: calc(100dvh - 4rem);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .mkt-mobile.is-open {
    display: block;
  }
  .mkt-body-lock {
    position: fixed;
    inset-inline: 0;
    width: 100%;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .mkt-mobile {
      display: none !important;
    }
  }
  .mkt-mobile__list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    padding-block: 1.25rem;
  }
  .mkt-mobile__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .mkt-mobile__link, .mkt-mobile__trigger {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    background: transparent;
    transition: background-color 100ms linear;
  }
  .mkt-mobile__link:hover, .mkt-mobile__trigger:hover {
    background-color: var(--bg-primary-hover);
  }
  .mkt-mobile__link:focus-visible, .mkt-mobile__trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .mkt-mobile__chevron {
    font-size: 0.875rem;
    color: var(--text-quaternary);
    transition: transform 100ms linear;
  }
  .mkt-mobile__trigger[aria-expanded="true"] .mkt-mobile__chevron {
    transform: rotate(-180deg);
  }
  .mkt-mobile__panel {
    display: none;
  }
  .mkt-mobile__item.is-open > .mkt-mobile__panel {
    display: block;
  }
  .mkt-mobile__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 8);
    border-top: 1px solid var(--border-secondary);
    padding: 1.5rem 1rem;
  }
  .mkt-mobile__footer-links {
    display: grid;
    column-gap: calc(var(--spacing) * 6);
    row-gap: calc(var(--spacing) * 3);
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .mkt-mobile__footer-actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  @media (prefers-reduced-motion: reduce) {
    .mkt-mobile__chevron, .mkt-mobile__link, .mkt-mobile__trigger, .mkt-nav-item, .mkt-card, .mkt-link {
      transition: none;
    }
  }
  .mkt-demo-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    background-color: var(--bg-body);
    min-height: 26rem;
  }
  .mkt-demo-hero {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: 3rem 2rem;
  }
  .mkt-demo-hero__eyebrow {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
  }
  .mkt-demo-hero__title {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
  }
  .mkt-demo-hero__sub {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
    max-width: 34rem;
  }
  .mkt-demo-label {
    color: var(--text-secondary);
  }
  .mkt-demo-swatch {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    justify-content: center;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    background-color: var(--bg-body);
    padding: 1.5rem;
  }
}
@layer utilities {
  .menu {
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg-menu);
    color: var(--text-menu);
    border-color: var(--border-menu);
  }
  .menu--collapsed {
    width: calc(var(--spacing) * 16);
  }
  .menu--collapsed .menu-scroll {
    padding-inline: var(--spacing);
  }
  .menu--collapsed .menu-link {
    justify-content: center;
    padding-inline: calc(var(--spacing) * 2);
  }
  .menu--collapsed .menu-link .flex-1 {
    display: none;
  }
  .menu--collapsed .menu-badge, .menu--collapsed .menu-badge-muted {
    display: none;
  }
  .menu-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-color: var(--border-menu);
  }
  .menu-brand {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    flex-shrink: 0;
    border-radius: var(--radius-md);
  }
  .menu-scroll {
    width: 100%;
    overflow-y: auto;
    padding: calc(var(--spacing) * 2);
  }
  .menu-list {
    width: 100%;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .menu-item {
    position: relative;
    width: 100%;
  }
  .menu-link {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    -webkit-user-select: none;
    user-select: none;
    background: transparent;
    outline: 0;
  }
  .menu-link:hover {
    background: var(--bg-menu-hover);
    color: var(--text-menu-hover);
  }
  .menu-link:focus-visible {
    outline: 2px solid var(--focus-menu);
    outline-offset: 2px;
  }
  .menu-toggle {
    width: 100%;
    text-align: left;
  }
  .menu-link[aria-current="page"] {
    background: var(--bg-menu-active);
  }
  .menu-icon {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--icon-menu);
  }
  .menu-app {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
    border-radius: var(--radius-sm);
  }
  .menu-chevron {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    color: var(--icon-menu-muted);
  }
  .menu-badge {
    margin-left: auto;
    display: inline-flex;
    min-width: calc(var(--spacing) * 6);
    justify-content: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--bg-badge);
    color: var(--text-badge);
  }
  .menu-badge-muted {
    margin-right: calc(var(--spacing) * 2);
    display: inline-flex;
    min-width: calc(var(--spacing) * 6);
    justify-content: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--bg-badge-muted);
    color: var(--text-badge-muted);
  }
  .menu-group.is-open > .menu-toggle .menu-chevron, .menu-subgroup.is-open > .menu-toggle .menu-chevron {
    rotate: calc(90deg * -1);
  }
  .menu-group.is-open > .menu-toggle, .menu-subgroup.is-open > .menu-toggle {
    background: var(--bg-menu-open);
  }
  .menu-children {
    margin-top: var(--spacing);
    width: 100%;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .menu-children.level-1 {
    padding-left: calc(var(--spacing) * 10);
  }
  .menu-children.level-2 {
    padding-left: calc(var(--spacing) * 8);
  }
  .menu-panel {
    margin-top: var(--spacing);
    width: 100%;
  }
  .menu-sublink {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .menu-sublink:hover {
    background: var(--bg-menu-hover);
  }
  .menu-subitem {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .menu-subitem:hover {
    background: var(--bg-menu-hover);
  }
  .menu-dot {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    background: var(--bg-menu-dot);
  }
  .menu-dot-sm {
    width: var(--spacing);
    height: var(--spacing);
    border-radius: var(--radius-full);
    background: var(--bg-menu-dot-muted);
  }
  .menu-link.active, .menu-sublink.active, .menu-subitem.active {
    background: var(--bg-menu-active);
  }
  .menu-link.active:hover, .menu-sublink.active:hover, .menu-subitem.active:hover {
    background: var(--bg-menu-active);
  }
  .menu-sublink.active .menu-dot, .menu-subitem.active .menu-dot-sm {
    background: var(--bg-menu-dot-active);
  }
  .menu-sublink[aria-current="page"] .menu-dot, .menu-subitem[aria-current="page"] .menu-dot-sm {
    background: var(--bg-menu-dot-active);
  }
  .menu-group.has-active > .menu-toggle, .menu-subgroup.has-active > .menu-toggle {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--bg-menu-open);
  }
  .menu-group.has-active > .menu-toggle .menu-chevron, .menu-subgroup.has-active > .menu-toggle .menu-chevron {
    color: var(--icon-menu);
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-chevron {
      transition-property: none;
    }
  }
  [dir="rtl"] .menu-badge {
    margin-right: auto;
    margin-left: 0;
  }
  [dir="rtl"] .menu-badge-muted {
    margin-right: 0;
    margin-left: calc(var(--spacing) * 2);
  }
  .menu-sublink.active .menu-dot-sm, .menu-subitem.active .menu-dot-sm {
    background: var(--bg-menu-dot-active);
  }
  .menu-sublink[aria-current="page"] .menu-dot-sm, .menu-subitem[aria-current="page"] .menu-dot-sm {
    background: var(--bg-menu-dot-active);
  }
}
@layer utilities {
  .top-bar {
    min-height: 40px;
  }
}
@layer utilities {
  [data-sidebar-role="toggle"] {
    display: inline-flex;
  }
  .app-shell[data-sidebar-state="pinned"] [data-sidebar-role="toggle"] {
    display: none;
  }
  .app-shell {
    --bg-sidebar-panel: var(--bg-sidebar);
  }
  .app-shell[data-sidebar-state="overlay-open"] {
    --bg-sidebar-panel: var(--bg-sidebar-hover);
  }
  .sidebar-edge-hitbox {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: calc(var(--spacing) * 2.5);
    z-index: 40;
  }
  .app-shell[data-sidebar-state="pinned"] .sidebar-edge-hitbox, .app-shell[data-sidebar-state="overlay-open"] .sidebar-edge-hitbox {
    display: none;
  }
  .app-sidebar {
    position: relative;
    height: 100%;
    flex: none;
    width: 0;
    transition: width var(--duration-collapse) var(--ease-collapse);
  }
  .app-shell[data-sidebar-state="pinned"] .app-sidebar {
    width: var(--width-sidebar-expanded);
  }
  .app-shell[data-sidebar-state="collapsed"] .app-sidebar, .app-shell[data-sidebar-state="overlay-open"] .app-sidebar {
    width: 0;
  }
  .sidebar-panel {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    width: var(--width-sidebar-expanded);
    background: var(--bg-sidebar-panel);
    border-right: 1px solid var(--border-sidebar);
    color: var(--text-sidebar);
    transition: transform var(--duration-collapse) var(--ease-collapse), opacity var(--duration-normal) var(--ease-collapse), box-shadow var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default);
    min-height: 0;
    --sb-item-h: 2rem;
    --sb-icon: 1rem;
    --sb-gap: 0.5rem;
    --sb-row-py: 0.375rem;
    --sb-row-px: 0.5rem;
    --sb-body-p: 0.625rem;
    --sb-body-px: 0.375rem;
    --sb-section-gap: 0.875rem;
    --sb-li-gap: 0.125rem;
    --sb-label-weight: 500;
    --sb-label-weight-active: 600;
  }
  .sidebar-panel--compact, .sidebar-density-compact, [data-density="compact"] .sidebar-panel {
    --sb-item-h: 1.75rem;
    --sb-icon: 0.875rem;
    --sb-gap: 0.5rem;
    --sb-row-py: 0.25rem;
    --sb-body-p: 0.5rem;
    --sb-body-px: 0.25rem;
    --sb-section-gap: 0.625rem;
    --sb-li-gap: 0.0625rem;
  }
  .app-shell[data-sidebar-state="collapsed"] .sidebar-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(calc(var(--width-sidebar-expanded) * -1));
    opacity: 0;
    pointer-events: none;
    z-index: 60;
  }
  .app-shell[data-sidebar-state="overlay-open"] .sidebar-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 60;
  }
  .app-shell[data-sidebar-state="pinned"] .sidebar-panel {
    position: relative;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    min-height: 0;
  }
  .sidebar-top {
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    background: var(--bg-sidebar-header);
    border-bottom: 1px solid var(--border-sidebar-divider);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--height-chrome, 51px) + 1px);
    box-sizing: border-box;
  }
  .sidebar-top-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 8);
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .sidebar-workspace {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 2);
  }
  .sidebar-workspace-avatar {
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background: var(--bg-sidebar-avatar);
    color: var(--text-sidebar);
  }
  .sidebar-workspace-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-sidebar);
  }
  .sidebar-top-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .sidebar-icon-btn {
    position: relative;
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background: transparent;
    color: var(--text-sidebar-muted);
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .sidebar-icon-btn:hover {
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar);
  }
  .sidebar-icon-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  [data-sidebar-role="pin"], [data-sidebar-role="collapse"] {
    display: none;
  }
  .app-shell[data-sidebar-state="overlay-open"] [data-sidebar-role="pin"], .app-shell[data-sidebar-state="overlay-open"] [data-sidebar-role="collapse"] {
    display: inline-flex;
  }
  .app-shell[data-sidebar-state="pinned"] [data-sidebar-role="collapse"] {
    display: inline-flex;
  }
  .sidebar-body {
    flex: 1;
    overflow-y: auto;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    padding: var(--sb-body-p, 0.75rem) var(--sb-body-px, 0.375rem);
    min-height: 0;
  }
  .sidebar-section {
    margin-bottom: var(--sb-section-gap, 1.25rem);
  }
  .sidebar-section-title {
    padding-inline: calc(var(--spacing) * 3);
    padding-bottom: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .sidebar-divider {
    margin-inline: calc(var(--spacing) * 3);
    margin-block: calc(var(--spacing) * 2);
    height: 1px;
    --tw-border-style: none;
    border-style: none;
    background: var(--border-sidebar-divider);
  }
  .sidebar-list, .sidebar-sublist {
    margin: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    list-style-type: none;
    flex-direction: column;
    padding-inline: 0;
    gap: var(--sb-li-gap, 0.125rem);
  }
  .sidebar-item {
    position: relative;
    display: grid;
    width: 100%;
    align-items: center;
    border-radius: var(--radius-md);
    white-space: nowrap;
    text-decoration-line: none;
    grid-template-columns: 1.25rem 1fr auto;
    column-gap: var(--sb-gap, 0.5rem);
    min-height: var(--sb-item-h, 2.25rem);
    padding: var(--sb-row-py, 0.375rem) var(--sb-row-px, 0.5rem);
    font-weight: var(--sb-label-weight, 500);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-sidebar-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .sidebar-item:hover {
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar);
  }
  .sidebar-item:hover .sidebar-item-icon {
    color: var(--text-sidebar-muted);
  }
  .sidebar-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .sidebar-item.active, .sidebar-item[aria-current="page"] {
    background: var(--bg-sidebar-item-active);
    color: var(--text-sidebar);
    font-weight: var(--sb-label-weight-active, 600);
  }
  .sidebar-item.active:hover, .sidebar-item[aria-current="page"]:hover {
    background: var(--bg-sidebar-item-active-hover, var(--bg-sidebar-item-active));
  }
  .sidebar-item.active .sidebar-item-icon, .sidebar-item[aria-current="page"] .sidebar-item-icon {
    color: var(--text-sidebar);
  }
  .sidebar-item.disabled, .sidebar-item[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .sidebar-item.disabled:hover, .sidebar-item[aria-disabled="true"]:hover {
    background: transparent;
    color: var(--text-sidebar-muted);
  }
  .sidebar-sublist {
    margin-top: var(--spacing);
  }
  .sidebar-subitem {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    padding-right: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 6);
    white-space: nowrap;
    text-decoration-line: none;
    min-height: 2rem;
    color: var(--text-sidebar-muted);
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .sidebar-subitem:hover {
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar);
  }
  .sidebar-subitem:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .sidebar-subitem.active, .sidebar-subitem[aria-current="page"] {
    background: var(--bg-sidebar-item-active);
    color: var(--text-sidebar);
    font-weight: var(--sb-label-weight-active, 600);
  }
  .sidebar-subitem.active:hover, .sidebar-subitem[aria-current="page"]:hover {
    background: var(--bg-sidebar-item-active-hover, var(--bg-sidebar-item-active));
  }
  .sidebar-subitem.active .sidebar-subitem-dot, .sidebar-subitem[aria-current="page"] .sidebar-subitem-dot {
    background: var(--bg-sidebar-dot-active);
  }
  .sidebar-subitem-inner {
    display: grid;
    height: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    grid-template-columns: 0.625rem 1fr;
  }
  .sidebar-item-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: var(--sb-icon, 1rem);
    line-height: 1;
    color: var(--text-sidebar-subtle);
  }
  .sidebar-item-icon > img, .sidebar-item-icon > svg {
    height: 100%;
    width: 100%;
  }
  .sidebar-item-label, .sidebar-subitem-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-height: 1.25rem;
    min-width: 1.25rem;
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar-muted);
  }
  .sidebar-item-badge.is-accent {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .sidebar-item-badge.is-dot {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
    padding: 0;
    min-height: 0;
    min-width: 0;
    background: var(--bg-brand-solid);
  }
  .sidebar-item-dot {
    width: var(--spacing);
    height: var(--spacing);
    border-radius: var(--radius-full);
    background: var(--bg-sidebar-dot-muted);
  }
  .sidebar-subitem-dot {
    width: var(--spacing);
    height: var(--spacing);
    justify-self: center;
    border-radius: var(--radius-full);
    background: var(--bg-sidebar-dot-muted);
  }
  .dot-muted {
    background: var(--bg-sidebar-dot-muted);
  }
  .dot-active {
    background: var(--bg-sidebar-dot-active);
  }
  .sidebar-group-toggle {
    width: 100%;
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    text-align: left;
    background: transparent;
  }
  .sidebar-item-end {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: 1rem;
    min-width: 1rem;
    margin-left: 0.25rem;
    color: var(--text-sidebar-subtle);
  }
  .sidebar-item-external {
    font-size: 1rem;
    color: var(--text-sidebar-subtle);
  }
  .sidebar-caret {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    transform: rotate(0deg);
  }
  .sidebar-group-toggle[aria-expanded="true"] .sidebar-caret {
    transform: rotate(180deg);
  }
  .sidebar-submenu {
    margin-top: var(--spacing);
  }
  .sidebar-submenu-label {
    padding-inline: calc(var(--spacing) * 9);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-sidebar-subtle);
  }
  .sidebar-nav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    text-decoration-line: none;
    height: 2.25rem;
    width: 2.25rem;
    color: var(--text-sidebar-subtle);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .sidebar-nav-btn:hover {
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar);
  }
  .sidebar-nav-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .sidebar-nav-btn.active, .sidebar-nav-btn[aria-current="page"] {
    background: var(--bg-sidebar-item-active);
    color: var(--text-sidebar);
  }
  .sidebar-nav-btn.active:hover, .sidebar-nav-btn[aria-current="page"]:hover {
    background: var(--bg-sidebar-item-active-hover, var(--bg-sidebar-item-active));
  }
  .sidebar-nav-btn-icon {
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
  }
  .sidebar-account {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3);
    box-shadow: inset 0 0 0 1px var(--border-sidebar-divider);
  }
  .sidebar-account-avatar {
    display: inline-flex;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background: var(--bg-sidebar-avatar);
    color: var(--text-sidebar);
  }
  .sidebar-account-body {
    min-width: 0;
    flex: 1;
  }
  .sidebar-account-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-sidebar);
  }
  .sidebar-account-email {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-sidebar-subtle);
  }
  .sidebar-account-menu {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background: transparent;
    color: var(--text-sidebar-subtle);
    cursor: pointer;
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .sidebar-account-menu:hover {
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar);
  }
  .sidebar-account-menu:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .sidebar-featured-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    background: var(--bg-sidebar-avatar);
    box-shadow: inset 0 0 0 1px var(--border-sidebar-divider);
    color: var(--text-sidebar-muted);
  }
  .sidebar-featured-main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .sidebar-featured-copy {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing);
  }
  .sidebar-featured-title {
    margin: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-sidebar);
  }
  .sidebar-featured-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-sidebar-subtle);
  }
  .sidebar-featured-actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .sidebar-featured-meter {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .sidebar-featured-meter-value {
    color: var(--text-sidebar-subtle);
    font-variant-numeric: tabular-nums;
  }
  .sidebar-featured-dismiss {
    position: absolute;
    top: calc(var(--spacing) * 1.5);
    right: calc(var(--spacing) * 1.5);
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background: transparent;
    color: var(--text-sidebar-subtle);
    cursor: pointer;
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .sidebar-featured-dismiss:hover {
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar);
  }
  .sidebar-featured-dismiss:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .sidebar-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    border-top: 1px solid var(--border-sidebar-divider);
  }
  .sidebar-footer:empty {
    display: none;
  }
  .sidebar-item[data-demo-state~="hover"], .sidebar-subitem[data-demo-state~="hover"], .sidebar-nav-btn[data-demo-state~="hover"] {
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar);
  }
  .sidebar-item[data-demo-state~="hover"] .sidebar-item-icon {
    color: var(--text-sidebar-muted);
  }
  .sidebar-item[data-demo-state~="focus"], .sidebar-subitem[data-demo-state~="focus"], .sidebar-nav-btn[data-demo-state~="focus"] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .sidebar-body::-webkit-scrollbar {
    width: 8px;
  }
  .sidebar-body::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 8px;
  }
  .sidebar-body::-webkit-scrollbar-track {
    background: transparent;
  }
  .sidebar-scrim {
    display: none;
  }
  @media (max-width: 639px) {
    .app-shell[data-sidebar-state="pinned"] [data-sidebar-role="toggle"] {
      display: inline-flex;
    }
    .app-shell[data-sidebar-state="overlay-open"] [data-sidebar-role="pin"] {
      display: none;
    }
    .app-shell[data-sidebar-state="pinned"] .app-sidebar {
      width: 0;
    }
    .app-shell[data-sidebar-state="pinned"] .sidebar-panel {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      transform: translateX(calc(var(--width-sidebar-expanded) * -1));
      opacity: 0;
      pointer-events: none;
      box-shadow: none;
    }
    .app-shell[data-sidebar-state="overlay-open"] .sidebar-panel {
      width: min(var(--width-sidebar-expanded), 84vw);
    }
    .sidebar-scrim {
      position: fixed;
      inset: 0;
      display: block;
      background: var(--bg-modal-overlay);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--duration-normal) var(--ease-collapse);
      z-index: 59;
    }
    .app-shell[data-sidebar-state="overlay-open"] .sidebar-scrim {
      opacity: 1;
      pointer-events: auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .app-sidebar, .sidebar-panel, .sidebar-item, .sidebar-subitem, .sidebar-icon-btn, .sidebar-nav-btn, .sidebar-account-menu, .sidebar-featured-dismiss, .sidebar-caret, .sidebar-scrim {
      transition: none;
    }
  }
  .sidebar-panel--floating {
    border-right: 0;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-sidebar), var(--shadow-xs);
  }
  .sidebar-panel--simple {
    width: 280px;
  }
  .sidebar-panel--dividers {
    width: 276px;
  }
  .sidebar-panel--dual {
    width: 280px;
  }
  .sidebar-search {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    height: 2rem;
    padding: 0 0.625rem;
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar-subtle);
    font-size: 0.875rem;
  }
  .sidebar-hr {
    margin-block: calc(var(--spacing) * 2);
    width: 100%;
    border-style: var(--tw-border-style);
    border-width: 0px;
    height: 1px;
    background: var(--border-sidebar-divider);
  }
  .sidebar-childlink {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    text-decoration-line: none;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    color: var(--text-sidebar-muted);
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  .sidebar-childlink:hover {
    background: var(--bg-sidebar-item-hover);
    color: var(--text-sidebar);
  }
  .sidebar-childlink:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    z-index: 10;
  }
  .sidebar-childlink.active, .sidebar-childlink[aria-current="page"] {
    background: var(--bg-sidebar-item-active);
    color: var(--text-sidebar);
    font-weight: var(--sb-label-weight-active, 600);
  }
  .sidebar-childlink.active:hover, .sidebar-childlink[aria-current="page"]:hover {
    background: var(--bg-sidebar-item-active-hover, var(--bg-sidebar-item-active));
  }
  .sidebar-rail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    width: 68px;
    padding-top: 1.25rem;
    background: var(--bg-sidebar);
  }
  .sidebar-rail-logo {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    justify-content: center;
    padding-inline: 0.75rem;
  }
  .sidebar-rail-list {
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    padding-inline: 0.875rem;
  }
  .sidebar-rail-foot {
    margin-top: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    padding-inline: 0.75rem;
  }
  .sidebar-flyout {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-shrink: 0;
    flex-direction: column;
    overflow-y: auto;
    width: 256px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-sidebar);
    padding: 1.25rem 1rem 0;
  }
  .sidebar-flyout-title {
    margin-bottom: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-sidebar);
  }
}
@layer utilities {
  .nav-tabs {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-width: auto;
    &::-webkit-scrollbar {
      display: block;
      width: var(--scrollbar-width, 16px);
      height: var(--scrollbar-height, 16px);
    }
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
    display: flex;
    &.collapse.show {
      display: flex;
    }
    scrollbar-width: thin;
    align-items: stretch;
    overflow-x: auto;
    gap: 0.75rem;
    background-color: var(--bg-tab);
  }
  .nav-tabs > .nav-item {
    background-color: transparent;
  }
  .nav-tabs .nav-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    height: max-content;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    text-decoration-line: none;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: linear;
    transition-timing-function: linear;
    -webkit-user-select: none;
    user-select: none;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-tab-rest);
    background-color: transparent;
    border: 0;
  }
  .nav-tabs .nav-link > i, .nav-tabs .nav-link .tab-icon {
    font-size: 0.75rem;
    line-height: 1;
  }
  .nav-tabs .nav-link:hover {
    cursor: pointer;
    color: var(--text-tab-rest-hover);
  }
  .nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--ring-tab-focus);
    outline-offset: -2px;
  }
  .nav-tabs .nav-link .badge, .nav-tabs .badge {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    margin-left: 0.125rem;
    padding: 0.125rem 0.4375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--text-tab-badge);
  }
  .nav-tabs[data-tabs-size="md"] .nav-link {
    font-size: 1rem;
    line-height: 1.5rem;
    gap: 0.375rem;
  }
  .nav-tabs[data-tabs-size="md"] .nav-link > i, .nav-tabs[data-tabs-size="md"] .nav-link .tab-icon {
    font-size: 0.875rem;
  }
  .nav-tabs[data-tabs-fluid] {
    width: 100%;
  }
  .nav-tabs[data-tabs-fluid] .nav-link {
    flex: 1 1 0%;
  }
  .nav-tabs[data-tabs-vertical] {
    flex-direction: column;
    width: max-content;
    overflow-x: visible;
  }
  .nav-tabs[data-tabs-vertical] .nav-link {
    justify-content: flex-start;
  }
  .nav-tabs[data-tabs-vertical][data-tabs-fluid] {
    width: 100%;
  }
  .nav-tabs:not([data-tabs-type]), .nav-tabs[data-tabs-type="underline"] {
    position: relative;
    gap: 0.75rem;
  }
  .nav-tabs:not([data-tabs-type])[data-tabs-fluid], .nav-tabs[data-tabs-type="underline"][data-tabs-fluid] {
    gap: 1rem;
  }
  .nav-tabs:not([data-tabs-type])::after, .nav-tabs[data-tabs-type="underline"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--border-tab-hairline);
    pointer-events: none;
  }
  .nav-tabs:not([data-tabs-type]) .nav-link, .nav-tabs[data-tabs-type="underline"] .nav-link {
    border-radius: var(--radius-none);
    padding: 0 0.125rem 0.625rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .nav-tabs:not([data-tabs-type]) .nav-link:hover, .nav-tabs:not([data-tabs-type]) .nav-link.active, .nav-tabs[data-tabs-type="underline"] .nav-link:hover, .nav-tabs[data-tabs-type="underline"] .nav-link.active {
    color: var(--text-tab-accent);
    border-bottom-color: var(--border-tab-accent);
  }
  .nav-tabs[data-tabs-type="button-brand"] {
    gap: 0.25rem;
  }
  .nav-tabs[data-tabs-type="button-brand"] .nav-link {
    padding: 0.5rem 0.625rem;
  }
  .nav-tabs[data-tabs-type="button-brand"][data-tabs-size="md"] .nav-link {
    padding: 0.625rem 0.625rem;
  }
  .nav-tabs[data-tabs-type="button-brand"] .nav-link:hover, .nav-tabs[data-tabs-type="button-brand"] .nav-link.active {
    background-color: var(--bg-tab-accent-active);
    color: var(--text-tab-accent);
  }
  .nav-tabs[data-tabs-type="button-gray"] {
    gap: 0.25rem;
  }
  .nav-tabs[data-tabs-type="button-gray"] .nav-link {
    padding: 0.5rem 0.625rem;
  }
  .nav-tabs[data-tabs-type="button-gray"][data-tabs-size="md"] .nav-link {
    padding: 0.625rem 0.625rem;
  }
  .nav-tabs[data-tabs-type="button-gray"] .nav-link:hover, .nav-tabs[data-tabs-type="button-gray"] .nav-link.active {
    background-color: var(--bg-tab-neutral-active);
    color: var(--text-tab-neutral-active);
  }
  .nav-tabs[data-tabs-type="button-border"] {
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 10px;
    background-color: var(--bg-tab-track);
    box-shadow: inset 0 0 0 1px var(--border-tab-track);
  }
  .nav-tabs[data-tabs-type="button-border"][data-tabs-size="md"] {
    padding: 0.375rem;
    border-radius: 0.75rem;
  }
  .nav-tabs[data-tabs-type="button-border"] .nav-link {
    padding: 0.5rem 0.625rem;
  }
  .nav-tabs[data-tabs-type="button-border"][data-tabs-size="md"] .nav-link {
    padding: 0.625rem 0.625rem;
  }
  .nav-tabs[data-tabs-type="button-border"] .nav-link:hover, .nav-tabs[data-tabs-type="button-border"] .nav-link.active {
    background-color: var(--bg-tab-raised-active);
    color: var(--text-tab-neutral-active);
    box-shadow: var(--shadow-sm);
  }
  .nav-tabs[data-tabs-type="button-minimal"] {
    gap: 0.125rem;
    border-radius: 0.5rem;
    background-color: var(--bg-tab-track);
    box-shadow: inset 0 0 0 1px var(--border-tab-track);
  }
  .nav-tabs[data-tabs-type="button-minimal"] .nav-link {
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.625rem;
  }
  .nav-tabs[data-tabs-type="button-minimal"][data-tabs-size="md"] .nav-link {
    padding: 0.625rem 0.625rem;
  }
  .nav-tabs[data-tabs-type="button-minimal"] .nav-link:hover, .nav-tabs[data-tabs-type="button-minimal"] .nav-link.active {
    background-color: var(--bg-tab-raised-active);
    color: var(--text-tab-neutral-active);
    box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--border-tab-track);
  }
  .nav-tabs[data-tabs-type="line"] {
    flex-direction: column;
    width: max-content;
    overflow-x: visible;
    gap: 0.5rem;
  }
  .nav-tabs[data-tabs-type="line"][data-tabs-fluid] {
    width: 100%;
  }
  .nav-tabs[data-tabs-type="line"] .nav-link {
    border-radius: var(--radius-none);
    justify-content: flex-start;
    padding: 0.125rem 0.75rem 0.125rem 0.625rem;
    border-left: 2px solid transparent;
  }
  .nav-tabs[data-tabs-type="line"][data-tabs-size="md"] .nav-link {
    padding: 0.25rem 0.875rem 0.25rem 0.75rem;
  }
  .nav-tabs[data-tabs-type="line"] .nav-link:hover, .nav-tabs[data-tabs-type="line"] .nav-link.active {
    color: var(--text-tab-accent);
    border-left-color: var(--border-tab-accent);
  }
  .nav-tabs:not([data-tabs-type]) .nav-link.active .badge, .nav-tabs[data-tabs-type="underline"] .nav-link.active .badge, .nav-tabs[data-tabs-type="line"] .nav-link.active .badge, .nav-tabs[data-tabs-type="button-brand"] .nav-link.active .badge {
    color: var(--text-tab-accent);
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-tabs .nav-link {
      transition: none;
    }
  }
  .nav-tabs-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: 3px;
    max-width: 100%;
    background-color: var(--bg-tab-ribbon);
    border-color: var(--border-tab-ribbon);
  }
  .nav-tabs-ribbon > .nav-tabs, .nav-tabs-ribbon .nav-tabs {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-width: auto;
    &::-webkit-scrollbar {
      display: block;
      width: var(--scrollbar-width, 16px);
      height: var(--scrollbar-height, 16px);
    }
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
    display: flex;
    &.collapse.show {
      display: flex;
    }
    scrollbar-width: thin;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
  }
  .nav-tabs-ribbon .nav-tabs::after, .tab-browser .nav-tabs::after {
    content: none;
  }
  .nav-tabs-ribbon .nav-tabs .nav-link, .tab-browser .nav-tabs .nav-link {
    border-bottom: 0;
    margin-bottom: 0;
  }
  .nav-tabs-ribbon > .nav-tabs > * + *, .nav-tabs-ribbon .nav-tabs > * + * {
    margin-left: 0;
  }
  .nav-tabs-ribbon .nav-item {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--radius-md);
    padding: 0;
    flex: 1 1 0%;
    background-color: transparent;
    min-width: 0;
  }
  .nav-tabs-ribbon .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    width: 100%;
    height: 28px;
    padding: 0 12px;
    color: var(--text-tab);
    background-color: transparent;
    border: 0;
    margin: 0;
  }
  .nav-tabs-ribbon .nav-link:hover {
    color: var(--text-tab-ribbon);
    background-color: var(--bg-tab-ribbon-hover);
    border-color: transparent;
  }
  .nav-tabs-ribbon .nav-link.active {
    border-radius: var(--radius-md);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    color: var(--text-tab-ribbon-active);
    background-color: var(--bg-tab-ribbon-active);
    box-shadow: var(--shadow-sm);
    border: 0;
  }
  .nav-tabs-ribbon .nav-link .badge {
    margin-block: 0;
    margin-left: calc(var(--spacing) * 0.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tab-badge);
  }
  .nav-tabs-ribbon--pill {
    border-radius: var(--radius-full);
  }
  .nav-tabs-ribbon--pill .nav-item {
    border-radius: var(--radius-full);
  }
  .nav-tabs-ribbon--pill .nav-link {
    border-radius: var(--radius-full);
  }
  .nav-tabs-ribbon--pill .nav-link.active {
    border-radius: var(--radius-full);
  }
  .view-switcher {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: 2px;
    background-color: var(--bg-tab-ribbon);
    border-color: var(--border-tab-ribbon);
  }
  .view-switcher__btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: 1;
    line-height: 1;
    text-decoration-line: none;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    width: 26px;
    height: 26px;
    color: var(--text-tab);
  }
  .view-switcher__btn:hover {
    color: var(--text-tab-ribbon);
    background-color: var(--bg-tab-ribbon-hover);
  }
  .view-switcher__btn.is-active {
    color: var(--text-tab-ribbon-active);
    background-color: var(--bg-tab-ribbon-active);
    box-shadow: var(--shadow-sm);
  }
  .nav-tabs-menu {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    flex-wrap: wrap;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .nav-tabs-menu > .nav-item {
    background-color: var(--alpha-0);
  }
  .nav-tabs-menu .nav-link {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    color: var(--text-tab-menu);
  }
  .nav-tabs-menu .nav-link > i, .nav-tabs-menu .nav-link .tab-icon {
    font-size: 0.875rem;
    line-height: 1;
  }
  .nav-tabs-menu .nav-link:hover {
    cursor: pointer;
    color: var(--text-tab-menu-hover);
    background-color: var(--bg-tab-menu-hover);
  }
  .nav-tabs-menu .nav-link.active {
    color: var(--text-tab-menu-active);
    background-color: var(--bg-tab-menu-active);
  }
  .nav-tabs-menu .badge {
    margin-block: calc(var(--spacing) * -1);
    margin-left: calc(var(--spacing) * 0.5);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: 3px;
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    color: var(--text-tab-badge);
  }
  .tab-content > .tab-pane {
    display: none;
  }
  .tab-content > .tab-pane.active {
    display: block;
  }
  .tab-content.panel-body {
    display: flex;
    flex-direction: column;
  }
  .tab-content.panel-body > .tab-pane.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .tab-browser {
    width: 100%;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-tab-browser);
    border-bottom: 1px solid var(--border-tab-browser);
  }
  .tab-browser .tab-browser-inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
    padding: 5px 6px 0;
    gap: 6px;
  }
  .tab-browser .tab-browser-scroll {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-width: auto;
    &::-webkit-scrollbar {
      display: block;
      width: var(--scrollbar-width, 16px);
      height: var(--scrollbar-height, 16px);
    }
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
    flex: 1;
    scrollbar-width: thin;
    overflow-x: auto;
    min-width: 0;
  }
  .tab-browser .tab-browser-strip {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    align-items: flex-end;
  }
  .tab-browser .nav-tabs {
    display: inline-flex;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    gap: 2px;
  }
  .tab-browser .nav-tabs > * + * {
    margin-left: 0;
  }
  .tab-browser .nav-item {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    background-color: transparent;
    padding: 0;
    min-width: 128px;
    max-width: 232px;
  }
  .tab-browser .nav-item--pinned {
    min-width: 40px;
    max-width: 40px;
  }
  .tab-browser .nav-item--pinned .tab-browser__label, .tab-browser .nav-item--pinned .tab-browser__close {
    display: none;
  }
  .tab-browser .nav-item--pinned .nav-link {
    justify-content: center;
    padding: 0;
  }
  .tab-browser .tab-browser-group-divider {
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: 18px;
    margin: 0 4px 7px;
    background-color: var(--bg-tab-browser-divider, var(--border-tab-browser));
  }
  .tab-browser .nav-link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    height: 34px;
    padding: 0 6px 0 11px;
    min-width: 0;
    color: var(--text-tab-browser);
    background-color: transparent;
    border: 0;
    border-radius: 8px 8px 0 0;
    position: relative;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .tab-browser .nav-link:hover {
    color: var(--text-tab-browser-hover);
    background-color: var(--bg-tab-browser-hover);
  }
  .tab-browser .nav-link.active {
    color: var(--text-tab-browser-active);
    background-color: var(--bg-tab-browser-active);
  }
  .tab-browser .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background-color: var(--bg-tab-browser-active);
  }
  .tab-browser .nav-item + .nav-item .nav-link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: var(--bg-tab-browser-divider, var(--border-tab-browser));
    opacity: 0.6;
    transition: opacity 120ms ease;
  }
  .tab-browser .nav-link:hover::before, .tab-browser .nav-link.active::before, .tab-browser .nav-item:has(.nav-link:hover) + .nav-item .nav-link::before, .tab-browser .nav-item:has(.nav-link.active) + .nav-item .nav-link::before {
    opacity: 0;
  }
  .tab-browser__favicon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-tab-browser);
    font-size: 13px;
  }
  .tab-browser .nav-link.active .tab-browser__favicon {
    color: var(--text-tab-browser-active);
  }
  .tab-browser__label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tab-browser__close {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 20px;
    height: 20px;
    border: 0;
    background-color: transparent;
    color: var(--text-tab-browser);
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
  }
  .tab-browser__close i {
    font-size: 11px;
    line-height: 1;
  }
  .tab-browser .nav-link:hover .tab-browser__close, .tab-browser .nav-link.active .tab-browser__close {
    opacity: 1;
  }
  .tab-browser__close:hover {
    background-color: var(--bg-tab-browser-hover);
    color: var(--text-tab-browser-active, var(--text-primary));
  }
  .tab-browser .nav-link[data-tab-state="unsaved"] .tab-browser__close {
    opacity: 1;
  }
  .tab-browser .nav-link[data-tab-state="unsaved"] .tab-browser__close i {
    opacity: 0;
  }
  .tab-browser .nav-link[data-tab-state="unsaved"] .tab-browser__close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background-color: var(--text-tab-browser-active, var(--text-info));
    transition: opacity 120ms ease;
  }
  .tab-browser .nav-link[data-tab-state="unsaved"]:hover .tab-browser__close i {
    opacity: 1;
  }
  .tab-browser .nav-link[data-tab-state="unsaved"]:hover .tab-browser__close::before {
    opacity: 0;
  }
  .tab-browser .nav-link[draggable="true"] {
    cursor: grab;
  }
  .tab-browser .nav-link.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
  }
  .tab-browser-actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    align-self: center;
    flex-shrink: 0;
  }
  .tab-browser .badge {
    margin-left: calc(var(--spacing) * 0.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tab-badge);
  }
  @media (prefers-reduced-motion: reduce) {
    .tab-browser .nav-link, .tab-browser__close, .tab-browser .nav-item + .nav-item .nav-link::before {
      transition: none;
    }
  }
  .tab-indicator {
    pointer-events: none;
    position: absolute;
    z-index: 0;
    opacity: 0;
    transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1), top 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1), height 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease;
  }
  .tab-indicator--pill {
    border-radius: var(--radius-md);
    background-color: var(--bg-tab-indicator, var(--bg-tab-ribbon-active));
    box-shadow: var(--shadow-tab-indicator, var(--shadow-sm));
  }
  .nav-tabs-ribbon--pill > .tab-indicator--pill {
    border-radius: var(--radius-full);
  }
  .view-switcher > .tab-indicator--pill {
    border-radius: var(--radius-full);
    background-color: var(--bg-tab-indicator, var(--bg-tab-ribbon-active));
  }
  .nav-tabs-ribbon:has(> .tab-indicator--pill) .nav-link.active, .nav-tabs-ribbon--pill:has(> .tab-indicator--pill) .nav-link.active {
    background-color: transparent;
    box-shadow: none;
  }
  .view-switcher:has(> .tab-indicator--pill) .view-switcher__btn.is-active {
    background-color: transparent;
    box-shadow: none;
  }
  .tab-browser .nav-tabs:has(> .tab-indicator--pill) .nav-link.active {
    background-color: transparent;
    box-shadow: none;
  }
  .nav-tabs-ribbon .nav-link, .nav-tabs-ribbon .nav-item, .view-switcher .view-switcher__btn, .tab-browser .nav-link, .tab-browser .nav-item {
    position: relative;
    z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .tab-indicator {
      transition: none;
    }
  }
  .tab-content > .tab-pane.fade {
    opacity: 0;
    transition: opacity 100ms ease;
  }
  .tab-content > .tab-pane.fade.show {
    opacity: 1;
  }
  .tab-content > .tab-pane.slide {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 100ms ease, transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .tab-content > .tab-pane.slide.show {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .tab-content > .tab-pane.fade, .tab-content > .tab-pane.slide {
      transition: none;
      transform: none;
    }
  }
  .nav-tabs .nav-link.disabled, .nav-tabs .nav-link[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.45;
    color: var(--text-disabled);
    border-color: transparent;
  }
  .nav-tabs-ribbon .nav-link.disabled, .nav-tabs-ribbon .nav-link[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.45;
    color: var(--text-disabled);
    background-color: transparent;
  }
  .nav-tabs-menu .nav-link.disabled, .nav-tabs-menu .nav-link[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.45;
    color: var(--text-disabled);
  }
  .nav-tabs--compact .nav-link, .nav-tabs-ribbon.nav-tabs--compact .nav-link {
    font-size: 11px;
    height: 24px;
    padding: 0 8px;
  }
  .nav-tabs--comfortable .nav-link, .nav-tabs-ribbon.nav-tabs--comfortable .nav-link {
    font-size: 13px;
    height: 34px;
    padding: 6px 16px;
  }
  .nav-tabs-boxed {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-width: auto;
    &::-webkit-scrollbar {
      display: block;
      width: var(--scrollbar-width, 16px);
      height: var(--scrollbar-height, 16px);
    }
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
    display: flex;
    &.collapse.show {
      display: flex;
    }
    scrollbar-width: thin;
    align-items: stretch;
    overflow-x: auto;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--border-tab);
    background-color: transparent;
    gap: 4px;
    padding: 0 4px;
    margin-bottom: -1px;
  }
  .nav-tabs-boxed > * + * {
    margin-left: 0;
  }
  .nav-tabs-boxed .nav-item {
    background-color: transparent;
    padding: 0;
  }
  .nav-tabs-boxed .nav-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    height: 32px;
    padding: 0 14px;
    color: var(--text-tab);
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    position: relative;
  }
  .nav-tabs-boxed .nav-link:hover {
    color: var(--text-tab-hover);
    background-color: var(--bg-tab-ribbon-hover);
  }
  .nav-tabs-boxed .nav-link.active {
    color: var(--text-tab-active);
    background-color: var(--bg-panel, var(--alpha-white-100));
    border-color: var(--border-tab);
  }
  .nav-tabs-boxed .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-color: var(--bg-panel, var(--alpha-white-100));
  }
  .nav-tabs-boxed .nav-link .badge {
    margin-left: calc(var(--spacing) * 0.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tab-badge);
  }
  .nav-tabs-ribbon--equal > .nav-tabs, .nav-tabs-ribbon--equal .nav-tabs {
    width: 100%;
  }
  .nav-tabs-ribbon--equal .nav-item {
    flex: 1 1 0%;
  }
  .nav-tabs-ribbon--equal .nav-link {
    width: 100%;
  }
  .nav-tabs-menu--inset .nav-link {
    position: relative;
    padding-left: 14px;
  }
  .nav-tabs-menu--inset .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 999px;
    background-color: transparent;
    transition: background-color 150ms ease;
  }
  .nav-tabs-menu--inset .nav-link.active::before {
    background-color: var(--text-tab-menu-active, var(--text-info));
  }
  .nav-tabs .nav-link .tab-icon, .nav-tabs-ribbon .nav-link .tab-icon, .nav-tabs-boxed .nav-link .tab-icon {
    opacity: 0.75;
  }
  .nav-tabs-boxed .nav-link > i, .nav-tabs-boxed .nav-link .tab-icon {
    font-size: 0.75rem;
  }
  .nav-tabs .nav-link.active .tab-icon, .nav-tabs-ribbon .nav-link.active .tab-icon, .nav-tabs-boxed .nav-link.active .tab-icon {
    opacity: 1;
  }
  .nav-link[data-tab-loading="true"] {
    pointer-events: none;
    opacity: 0.7;
  }
  .nav-link[data-tab-loading="true"] .tab-icon {
    animation: tab-spin 0.7s linear infinite;
  }
  @keyframes tab-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .nav-tabs-scrollable {
    position: relative;
  }
  .nav-tabs-scrollable > .nav-tabs {
    padding-right: calc(var(--spacing) * 8);
  }
  .nav-tabs-scrollable::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: calc(var(--spacing) * 8);
    background: linear-gradient(to right, transparent, var(--bg-tab, var(--bg-surface)));
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
  }
  .nav-tabs-scrollable.has-overflow::after {
    opacity: 1;
  }
  @media (pointer: coarse) {
    .nav-tabs .nav-link {
      min-height: 44px;
      min-width: 44px;
    }
  }
}
@layer utilities {
  .toolbar {
    --tb-pad-x: 0.75rem;
    --tb-pad-y: 0.5rem;
    --tb-gap: 0.5rem;
    --tb-ctl-h: 2rem;
    --tb-ctl-px: 0.5rem;
    --tb-ctl-gap: 0.5rem;
    --tb-font: 0.875rem;
    --tb-icon: 0.875rem;
    --tb-title: 0.875rem;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    gap: var(--tb-gap);
    padding: var(--tb-pad-y) var(--tb-pad-x);
    background: var(--bg-toolbar);
    border-color: var(--border-toolbar);
    color: var(--text-toolbar);
  }
  .toolbar--xs {
    --tb-pad-x: 0.5rem;
    --tb-pad-y: 0.25rem;
    --tb-gap: 0.25rem;
    --tb-ctl-h: 1.5rem;
    --tb-ctl-px: 0.375rem;
    --tb-ctl-gap: 0.375rem;
    --tb-font: 0.75rem;
    --tb-icon: 0.75rem;
    --tb-title: 0.75rem;
  }
  .toolbar--sm {
    --tb-pad-x: 0.625rem;
    --tb-pad-y: 0.375rem;
    --tb-gap: 0.375rem;
    --tb-ctl-h: 1.75rem;
    --tb-ctl-px: 0.5rem;
    --tb-ctl-gap: 0.375rem;
    --tb-font: 0.8125rem;
    --tb-icon: 0.8125rem;
    --tb-title: 0.8125rem;
  }
  .toolbar--md {
    --tb-pad-x: 0.75rem;
    --tb-pad-y: 0.5rem;
    --tb-gap: 0.5rem;
    --tb-ctl-h: 2rem;
    --tb-ctl-px: 0.5rem;
    --tb-ctl-gap: 0.5rem;
    --tb-font: 0.875rem;
    --tb-icon: 0.875rem;
    --tb-title: 0.875rem;
  }
  .toolbar--lg {
    --tb-pad-x: 1rem;
    --tb-pad-y: 0.75rem;
    --tb-gap: 0.625rem;
    --tb-ctl-h: 2.5rem;
    --tb-ctl-px: 0.75rem;
    --tb-ctl-gap: 0.625rem;
    --tb-font: 0.9375rem;
    --tb-icon: 1rem;
    --tb-title: 1rem;
  }
  .toolbar--xl {
    --tb-pad-x: 1.25rem;
    --tb-pad-y: 1rem;
    --tb-gap: 0.75rem;
    --tb-ctl-h: 3rem;
    --tb-ctl-px: 1rem;
    --tb-ctl-gap: 0.75rem;
    --tb-font: 1rem;
    --tb-icon: 1.125rem;
    --tb-title: 1.125rem;
  }
  .toolbar--dense {
    --tb-pad-x: 0.5rem;
    --tb-pad-y: 0.375rem;
  }
  .toolbar--sticky {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 20);
  }
  .toolbar-left, .toolbar-center, .toolbar-right {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--tb-gap);
  }
  .toolbar-center {
    flex: 1;
    justify-content: center;
  }
  .toolbar-right {
    justify-content: flex-end;
  }
  .toolbar-title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .toolbar-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-size: var(--tb-title);
    color: var(--text-toolbar-strong);
  }
  .toolbar-title-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-toolbar-muted);
  }
  .toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .toolbar-group--pills {
    border-radius: var(--radius-lg);
    padding: var(--spacing);
    background: var(--bg-toolbar-group);
    border: 1px solid var(--border-toolbar-group);
  }
  .toolbar-divider {
    margin-inline: var(--spacing);
    width: 1px;
    align-self: stretch;
    background: var(--border-toolbar-divider);
  }
  .toolbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    -webkit-user-select: none;
    user-select: none;
    height: var(--tb-ctl-h);
    padding-inline: var(--tb-ctl-px);
    gap: var(--tb-ctl-gap);
    font-size: var(--tb-font);
    background: var(--bg-toolbar-btn);
    color: var(--text-toolbar);
    border: 1px solid var(--border-toolbar-btn);
  }
  .toolbar-btn:hover {
    background: var(--bg-toolbar-btn-hover);
    color: var(--text-toolbar-hover);
    border-color: var(--border-toolbar-btn-hover);
  }
  .toolbar-btn:active {
    background: var(--bg-toolbar-btn-active);
  }
  .toolbar-btn:focus-visible {
    outline: 2px solid var(--focus-toolbar);
    outline-offset: 2px;
  }
  .toolbar-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    height: var(--tb-ctl-h);
    width: var(--tb-ctl-h);
    font-size: var(--tb-icon);
    background: var(--bg-toolbar-btn);
    color: var(--icon-toolbar);
    border: 1px solid var(--border-toolbar-btn);
  }
  .toolbar-iconbtn:hover {
    background: var(--bg-toolbar-btn-hover);
    color: var(--icon-toolbar-hover);
    border-color: var(--border-toolbar-btn-hover);
  }
  .toolbar-iconbtn:active {
    background: var(--bg-toolbar-btn-active);
  }
  .toolbar-iconbtn:focus-visible {
    outline: 2px solid var(--focus-toolbar);
    outline-offset: 2px;
  }
  .toolbar-btn[aria-pressed="true"], .toolbar-iconbtn[aria-pressed="true"] {
    background: var(--bg-toolbar-btn-selected);
    border-color: var(--border-toolbar-btn-selected);
    color: var(--text-toolbar-strong);
  }
  .toolbar-btn:disabled, .toolbar-iconbtn:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .toolbar-btn--primary, .toolbar-iconbtn--primary {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    border-color: transparent;
  }
  .toolbar-btn--primary:hover, .toolbar-iconbtn--primary:hover {
    background: var(--bg-brand-solid-hover);
    color: var(--text-on-brand);
    border-color: transparent;
  }
  .toolbar-btn--primary:active, .toolbar-iconbtn--primary:active {
    background: var(--bg-brand-solid-active);
  }
  .toolbar-btn--danger, .toolbar-iconbtn--danger {
    background: var(--bg-button-danger, var(--bg-danger-solid));
    color: var(--text-button-danger, var(--alpha-white-100));
    border-color: transparent;
  }
  .toolbar-btn--danger:hover, .toolbar-iconbtn--danger:hover {
    background: var(--bg-button-danger-hover);
    color: var(--text-button-danger, var(--alpha-white-100));
    border-color: transparent;
  }
  .toolbar-btn--danger:active, .toolbar-iconbtn--danger:active {
    background: var(--bg-button-danger-active);
  }
  .toolbar-btn-label {
    white-space: nowrap;
  }
  .toolbar-overflow {
    position: relative;
  }
  .toolbar-overflow__trigger {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
  }
  .toolbar-search {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
  }
  .toolbar-search__input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 7);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    height: var(--tb-ctl-h);
    font-size: var(--tb-font);
    background-color: var(--bg-toolbar-btn, transparent);
    border-color: var(--border-toolbar-btn, transparent);
    color: var(--text-toolbar);
    width: 160px;
  }
  .toolbar-search__input:focus {
    width: 240px;
    background-color: var(--bg-input);
    border-color: var(--border-input-active);
    outline: none;
  }
  .toolbar-search__icon {
    pointer-events: none;
    position: absolute;
    left: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-toolbar-muted, var(--text-tertiary));
  }
  .toolbar-separator {
    margin-inline: var(--spacing);
    width: 1px;
    align-self: stretch;
    background-color: var(--border-toolbar-divider, var(--border-primary-subtle));
  }
  .toolbar-btn .toolbar-badge, .toolbar-iconbtn .toolbar-badge {
    position: absolute;
    top: calc(var(--spacing) * -1);
    right: calc(var(--spacing) * -1);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 4);
    min-width: 16px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    padding-inline: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    background-color: var(--bg-danger-solid);
    color: var(--alpha-white-100);
  }
  .toolbar-badge {
    display: inline-flex;
    min-width: calc(var(--spacing) * 5);
    justify-content: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background: var(--bg-toolbar-badge);
    color: var(--text-toolbar-badge);
  }
  .toolbar-input {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    height: var(--tb-ctl-h);
    font-size: var(--tb-font);
    background: var(--bg-toolbar-input);
    border-color: var(--border-toolbar-input);
    color: var(--text-toolbar);
  }
  .toolbar-input::placeholder {
    color: var(--text-toolbar-muted);
  }
  .toolbar-input:focus-visible {
    outline: 2px solid var(--focus-toolbar);
    outline-offset: 2px;
  }
  .toolbar-select {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    height: var(--tb-ctl-h);
    font-size: var(--tb-font);
    background: var(--bg-toolbar-input);
    border-color: var(--border-toolbar-input);
    color: var(--text-toolbar);
  }
  .toolbar-icon {
    font-size: var(--tb-icon);
    color: currentColor;
  }
  .toolbar--wrap {
    flex-wrap: wrap;
  }
  .toolbar--pill {
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border-toolbar, var(--border-divider));
    background-color: var(--bg-primary);
    padding: 6px 10px;
    width: auto;
    display: inline-flex;
    gap: 4px;
  }
  .toolbar--pill .toolbar-btn, .toolbar--pill .toolbar-iconbtn {
    border-radius: var(--radius-full);
    border-color: transparent;
    background-color: transparent;
  }
  .toolbar--pill .toolbar-btn:hover, .toolbar--pill .toolbar-iconbtn:hover {
    background-color: var(--bg-secondary);
    border-color: transparent;
  }
  .toolbar--pill .toolbar-divider, .toolbar--pill .toolbar-separator {
    height: 18px;
    margin: 0 2px;
  }
  .toolbar--bordered {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border-toolbar, var(--border-divider));
    background-color: var(--bg-primary);
  }
  .toolbar--elevated {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-divider);
    background-color: var(--bg-primary);
  }
  .toolbar--glass {
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 70%, transparent);
    }
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--border-divider);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--border-divider) 50%, transparent);
    }
    box-shadow: var(--shadow-lg);
  }
  .toolbar--ghost {
    background-color: transparent;
    border: 0;
  }
  .toolbar--compact {
    --tb-pad-x: 0.375rem;
    --tb-pad-y: 0.25rem;
    --tb-gap: 0.25rem;
    --tb-ctl-h: 1.625rem;
  }
  .toolbar--floating {
    position: absolute;
    z-index: var(--z-fixed, 30);
    width: auto;
    pointer-events: auto;
  }
  .toolbar--floating-fixed {
    position: fixed;
  }
  .toolbar--anchor-top {
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
  }
  .toolbar--anchor-bottom {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
  }
  .toolbar--anchor-top-left {
    top: 16px;
    left: 16px;
  }
  .toolbar--anchor-top-right {
    top: 16px;
    right: 16px;
  }
  .toolbar--anchor-bottom-left {
    bottom: 16px;
    left: 16px;
  }
  .toolbar--anchor-bottom-right {
    bottom: 16px;
    right: 16px;
  }
  .toolbar--anchor-left {
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    flex-direction: column;
    width: auto;
    height: auto;
  }
  .toolbar--anchor-right {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    flex-direction: column;
    width: auto;
    height: auto;
  }
  .toolbar--anchor-left .toolbar-divider, .toolbar--anchor-right .toolbar-divider, .toolbar--vertical .toolbar-divider {
    align-self: stretch;
    width: auto;
    height: 1px;
    margin: 2px 0;
  }
  .toolbar--vertical {
    flex-direction: column;
    width: auto;
  }
  .toolbar--floating {
    animation: toolbar-float-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes toolbar-float-in {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
  .toolbar--anchor-top {
    animation-name: toolbar-float-in-top;
  }
  .toolbar--anchor-top-left, .toolbar--anchor-top-right, .toolbar--anchor-bottom-left, .toolbar--anchor-bottom-right {
    animation: toolbar-float-in-corner 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .toolbar--anchor-left {
    animation: toolbar-float-in-left 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .toolbar--anchor-right {
    animation: toolbar-float-in-right 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes toolbar-float-in-top {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }
  @keyframes toolbar-float-in-corner {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes toolbar-float-in-left {
    from {
      opacity: 0;
      transform: translateY(-50%) translateX(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
  }
  @keyframes toolbar-float-in-right {
    from {
      opacity: 0;
      transform: translateY(-50%) translateX(8px);
    }
    to {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .toolbar--floating {
      animation: none;
    }
  }
  .toolbar--selection {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    background-color: var(--text-primary);
    color: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    border: 0;
  }
  .toolbar--selection .toolbar-btn, .toolbar--selection .toolbar-iconbtn {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
  }
  .toolbar--selection .toolbar-btn:hover, .toolbar--selection .toolbar-iconbtn:hover {
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 18%, transparent);
    }
    border-color: transparent;
    color: inherit;
  }
  .toolbar--selection .toolbar-divider, .toolbar--selection .toolbar-separator {
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 24%, transparent);
    }
    height: 18px;
  }
  .toolbar--selection .toolbar-badge {
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 22%, transparent);
    }
    color: inherit;
  }
}
@layer utilities {
  .tray {
    pointer-events: none;
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 50;
  }
  .tray-overlay {
    position: absolute;
    inset: 0;
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
    background-color: var(--bg-tray-overlay);
    pointer-events: none;
  }
  .tray-panel {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-none);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    background-color: var(--bg-tray);
    color: var(--text-tray);
    box-shadow: 0 0 0 1px var(--border-tray);
    --tray-translate-x: 0%;
    --tray-translate-y: 0%;
    transform: translateX(var(--tray-translate-x)) translateY(var(--tray-translate-y));
  }
  .tray.active {
    pointer-events: auto;
    visibility: visible;
  }
  .tray.active .tray-overlay {
    opacity: 100%;
    pointer-events: auto;
  }
  .tray.active .tray-panel {
    box-shadow: 0 0 0 1px var(--border-tray), var(--shadow-xl);
    --tray-translate-x: 0%;
    --tray-translate-y: 0%;
  }
  .tray-left .tray-panel {
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--radius-none);
    --tray-translate-x: -100%;
    --tray-translate-y: 0%;
  }
  .tray-right .tray-panel {
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-none);
    --tray-translate-x: 100%;
    --tray-translate-y: 0%;
  }
  .tray-top .tray-panel {
    top: 0;
    right: 0;
    left: 0;
    border-radius: var(--radius-none);
    --tray-translate-x: 0%;
    --tray-translate-y: -100%;
  }
  .tray-bottom .tray-panel {
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--radius-none);
    --tray-translate-x: 0%;
    --tray-translate-y: 100%;
  }
  .tray-left .tray-panel, .tray-right .tray-panel {
    width: 100%;
    max-width: 100%;
  }
  .tray-full .tray-panel {
    border-radius: var(--radius-none);
  }
  .tray-full.tray-left .tray-panel, .tray-full.tray-right .tray-panel {
    width: 100%;
  }
  .tray-full.tray-top .tray-panel, .tray-full.tray-bottom .tray-panel {
    height: 100%;
  }
  .tray-sm.tray-top .tray-panel, .tray-sm.tray-bottom .tray-panel {
    height: calc(var(--spacing) * 48);
  }
  .tray-md.tray-top .tray-panel, .tray-md.tray-bottom .tray-panel {
    height: calc(var(--spacing) * 72);
  }
  .tray-lg.tray-top .tray-panel, .tray-lg.tray-bottom .tray-panel {
    height: calc(var(--spacing) * 96);
  }
  @media (min-width: 640px) {
    .tray-sm.tray-left .tray-panel, .tray-sm.tray-right .tray-panel {
      width: calc(var(--spacing) * 72);
    }
    .tray-md.tray-left .tray-panel, .tray-md.tray-right .tray-panel {
      width: calc(var(--spacing) * 96);
    }
    .tray-lg.tray-left .tray-panel, .tray-lg.tray-right .tray-panel {
      width: var(--container-lg);
    }
    .tray-left:not(.tray-full) .tray-panel {
      border-radius: var(--radius-none);
    }
    .tray-right:not(.tray-full) .tray-panel {
      border-radius: var(--radius-none);
    }
  }
  .tray.tray-contained {
    position: absolute;
    z-index: 30;
  }
  .tray-no-overlay .tray-overlay {
    background-color: transparent;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .tray-no-overlay.active {
    pointer-events: none;
  }
  .tray-no-overlay.active .tray-panel {
    pointer-events: auto;
  }
  .tray-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-tray-header);
    border-bottom: 1px solid var(--border-tray-divider);
  }
  .tray-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tray-heading);
  }
  .tray-subtitle {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tray-muted);
  }
  .tray-body {
    flex: 1;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    background-color: var(--bg-tray-body, var(--bg-tray));
  }
  .tray-body--surface {
    background-color: var(--bg-tray);
  }
  .tray-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-tray-footer);
    border-top: 1px solid var(--border-tray-divider);
  }
  .tray-close, .tray-nav {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: linear;
    transition-timing-function: linear;
    color: var(--icon-tray-close);
  }
  .tray-close:hover, .tray-nav:hover {
    background-color: var(--bg-tray-close-hover);
  }
  .tray-nav:disabled {
    pointer-events: none;
    opacity: 30%;
  }
  .tray-close:focus-visible, .tray-nav:focus-visible, .tray-pin:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .tray-pin {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    color: var(--icon-tray-pin, var(--icon-tray-close));
  }
  .tray-pin:hover {
    background-color: var(--bg-tray-pin-hover, var(--bg-tray-close-hover));
  }
  .tray-pin i, .tray-pin svg {
    transition: transform 200ms ease, color 150ms ease;
    transform: rotate(45deg);
  }
  .tray-pin.is-pinned i, .tray-pin.is-pinned svg {
    transform: rotate(0deg);
  }
  .tray-pin.is-pinned {
    color: var(--icon-tray-pin-active, var(--color-info));
    background-color: var(--bg-tray-pin-active, var(--bg-info-subtle));
  }
  .tray.tray-pinned .tray-overlay {
    pointer-events: none !important;
    opacity: 0 !important;
  }
  .tray.tray-pinned {
    pointer-events: none;
  }
  .tray.tray-pinned .tray-panel {
    pointer-events: auto;
  }
  .tray-open {
    overflow: hidden;
  }
  .modal-content > .tray {
    position: absolute;
    z-index: 10;
    overflow: hidden;
  }
  .tray-no-drag {
    user-select: text;
  }
  .tray[data-eno-resizable].tray-left .tray-panel, .tray[data-eno-resizable].tray-right .tray-panel {
    width: var(--tray-width);
    overflow: visible;
  }
  .tray[data-eno-resizable].tray-top .tray-panel, .tray[data-eno-resizable].tray-bottom .tray-panel {
    height: var(--tray-height);
    overflow: visible;
  }
  .tray-resize {
    position: absolute;
    z-index: 30;
    background-color: var(--border-split, var(--border-secondary));
    transition: background-color 100ms ease;
  }
  .tray-resize::after {
    content: "";
    position: absolute;
  }
  .tray-right .tray-resize {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--split-divider-width, 1px);
    cursor: col-resize;
  }
  .tray-right .tray-resize::after {
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
  }
  .tray-left .tray-resize {
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--split-divider-width, 1px);
    cursor: col-resize;
  }
  .tray-left .tray-resize::after {
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
  }
  .tray-top .tray-resize {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--split-divider-width, 1px);
    cursor: row-resize;
  }
  .tray-top .tray-resize::after {
    right: 0;
    left: 0;
    top: -3px;
    bottom: -3px;
  }
  .tray-bottom .tray-resize {
    left: 0;
    right: 0;
    top: 0;
    height: var(--split-divider-width, 1px);
    cursor: row-resize;
  }
  .tray-bottom .tray-resize::after {
    right: 0;
    left: 0;
    top: -3px;
    bottom: -3px;
  }
  .tray-resize:hover, .tray-resize.is-active, .tray.is-actions-nearby .tray-resize {
    background-color: var(--border-split-hover, var(--color-brand-500));
  }
  .tray-right .tray-resize:hover, .tray-right .tray-resize.is-active, .tray-right.is-actions-nearby .tray-resize {
    width: var(--split-divider-width-active, 3px);
    margin-left: -1px;
  }
  .tray-left .tray-resize:hover, .tray-left .tray-resize.is-active, .tray-left.is-actions-nearby .tray-resize {
    width: var(--split-divider-width-active, 3px);
    margin-right: -1px;
  }
  .tray-top .tray-resize:hover, .tray-top .tray-resize.is-active, .tray-top.is-actions-nearby .tray-resize {
    height: var(--split-divider-width-active, 3px);
    margin-bottom: -1px;
  }
  .tray-bottom .tray-resize:hover, .tray-bottom .tray-resize.is-active, .tray-bottom.is-actions-nearby .tray-resize {
    height: var(--split-divider-width-active, 3px);
    margin-top: -1px;
  }
  .tray-resize__actions {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: calc(var(--z-sticky, 10) + 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease 100ms;
  }
  .tray-left .tray-resize__actions, .tray-right .tray-resize__actions {
    flex-direction: column;
  }
  .tray-top .tray-resize__actions, .tray-bottom .tray-resize__actions {
    flex-direction: row;
  }
  .tray-resize:hover .tray-resize__actions, .tray.is-actions-nearby .tray-resize__actions {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 150ms ease;
  }
  .tray.tray-resizing .tray-resize__actions {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .tray-resize__action {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 20px;
    height: 20px;
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
    font-size: 10px;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .tray-resize__action:hover {
    background-color: var(--bg-primary-subtle);
    border-color: var(--border-brand);
    color: var(--text-primary);
  }
  .tray-resize__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .tray-resize__action:disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }
  .tray.tray-resizing .tray-panel {
    transition: none !important;
  }
  .tray.tray-resizing {
    user-select: none;
  }
  .tray.tray-snapping .tray-panel {
    transition: width 200ms ease, height 200ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .tray.tray-snapping .tray-panel {
      transition: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tray-pin i, .tray-pin svg {
      transition: none;
    }
  }
  .tray.tray-dragging .tray-panel, .tray.tray-dragging .tray-overlay {
    transition: none !important;
  }
  .tray.tray-dragging {
    touch-action: none;
    user-select: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .tray-overlay, .tray-panel {
      transition: none;
    }
  }
}
@layer utilities {
  .slideout-menu {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    flex-direction: column;
    color: var(--text-tray, var(--text-primary));
  }
  .slideout-menu__header {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    z-index: 1;
    padding: 1.5rem 1rem 0;
  }
  @media (min-width: 768px) {
    .slideout-menu__header {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
  .slideout-menu__eyebrow {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tray-muted, var(--text-tertiary));
  }
  .slideout-menu__title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding-right: 2.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--text-tray-heading, var(--text-primary));
  }
  .slideout-menu__subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-tray-muted, var(--text-tertiary));
  }
  .slideout-menu__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }
  .slideout-menu__content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    gap: 1.5rem;
    overscroll-behavior: auto;
    padding: 1.5rem 1rem;
  }
  @media (min-width: 768px) {
    .slideout-menu__content {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
  .slideout-menu__header + .slideout-menu__content {
    padding-top: 1.5rem;
  }
  .slideout-menu__section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.75rem;
  }
  .slideout-menu__section-title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-tray-heading, var(--text-primary));
  }
  .slideout-menu__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    box-shadow: inset 0 1px 0 0 var(--border-tray-divider, var(--border-secondary));
  }
  @media (min-width: 768px) {
    .slideout-menu__footer {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
  .slideout-menu__footer--end {
    justify-content: flex-end;
  }
  .slideout-menu__footer--split {
    justify-content: space-between;
  }
  .slideout-menu__footer--stacked {
    flex-direction: column;
    align-items: stretch;
  }
  .slideout-menu__footer--stacked > * {
    width: 100%;
  }
}
@layer utilities {
  .dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .dropdown-toggle, .dropdown-toggle.show {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .dropdown-menu.show, .dropdown-menu-glass.show {
    display: block;
  }
  .dropdown-menu-base {
    position: absolute;
    z-index: 9999;
    display: none;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: var(--spacing);
    min-width: 10rem;
    width: max-content;
    max-width: var(--dropdown-menu-max-w, min(20rem, calc(100vw - 2rem)));
    top: 100%;
    right: 0;
    left: auto;
    border: 0;
    background-color: var(--bg-dropdown);
    color: var(--text-dropdown);
    backdrop-filter: var(--blur-dropdown-backdrop);
    box-shadow: 0 0 0 1px var(--border-dropdown), var(--shadow-dropdown);
  }
  .dropdown-menu-base::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='1'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: var(--opacity-dropdown-grain, 0);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .dropdown-menu-base > * {
    position: relative;
    z-index: 1;
  }
  .dropdown-menu {
    position: absolute;
    z-index: 9999;
    display: none;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: var(--spacing);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    min-width: 10rem;
    right: 0;
    left: auto;
    background-color: var(--bg-dropdown);
    border-color: var(--border-dropdown);
    color: var(--text-dropdown);
    backdrop-filter: var(--blur-dropdown-backdrop);
    box-shadow: var(--shadow-dropdown);
    top: 100%;
    width: max-content;
    max-width: var(--dropdown-menu-max-w, min(20rem, calc(100vw - 2rem)));
  }
  .dropdown-menu-glass {
    position: absolute;
    z-index: 9999;
    display: none;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: var(--spacing);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    min-width: 10rem;
    right: 0;
    left: auto;
    background-color: var(--bg-dropdown);
    border-color: var(--border-dropdown);
    color: var(--text-dropdown);
    backdrop-filter: var(--blur-dropdown-backdrop);
    box-shadow: var(--shadow-dropdown);
    top: 100%;
    width: max-content;
    max-width: var(--dropdown-menu-max-w, min(20rem, calc(100vw - 2rem)));
    background-color: var(--bg-dropdown-glass);
    color: var(--text-dropdown-glass);
    backdrop-filter: var(--blur-dropdown-glass);
    box-shadow: 0 0 0 1px var(--border-dropdown-glass), var(--shadow-dropdown-glass);
  }
  .dropdown-menu-glass::after {
    opacity: var(--opacity-dropdown-glass-grain, 0);
  }
  .dropdown-title {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-dropdown-title);
  }
  .dropdown-hint {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-dropdown-hint);
  }
  .dropdown-divider {
    margin-inline: var(--spacing);
    margin-block: var(--spacing);
    height: 1px;
    border: 0;
    background-color: var(--border-dropdown-divider);
  }
  .dropdown-item {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-dropdown-item);
    white-space: nowrap;
  }
  .dropdown-item:hover {
    cursor: pointer;
    background-color: var(--bg-dropdown-hover);
  }
  .dropdown-item:active {
    background-color: var(--bg-dropdown-active);
  }
  .dropdown-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .dropdown-menu-glass .dropdown-item {
    color: var(--text-dropdown-item-glass);
  }
  .dropdown-menu-glass .dropdown-item:hover {
    background-color: var(--bg-dropdown-glass-hover);
  }
  .dropdown-menu-glass .dropdown-item:active {
    background-color: var(--bg-dropdown-glass-active);
  }
  .dropdown-icon {
    display: inline-flex;
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--text-dropdown-icon);
  }
  .dropdown-menu-glass .dropdown-icon {
    color: var(--text-dropdown-icon-glass);
  }
  .dropdown-end {
    margin-left: auto;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 70%;
    color: var(--text-dropdown-end);
  }
  .dropdown-menu-glass .dropdown-end {
    color: var(--text-dropdown-end-glass);
  }
  .dropdown-item.is-active, .dropdown-item[aria-current="true"], .dropdown-item[aria-selected="true"] {
    background-color: var(--bg-dropdown-selected);
    color: var(--text-dropdown-selected);
  }
  .dropdown-menu-glass .dropdown-item.is-active, .dropdown-menu-glass .dropdown-item[aria-current="true"], .dropdown-menu-glass .dropdown-item[aria-selected="true"] {
    background-color: var(--bg-dropdown-selected-glass);
    color: var(--text-dropdown-selected-glass);
  }
  .dropdown-item.is-disabled, .dropdown-item:disabled, .dropdown-item[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 50%;
  }
  .dropdown-item.is-danger {
    color: var(--text-dropdown-danger);
  }
  .dropdown-item.is-danger:hover {
    background-color: var(--bg-dropdown-danger-hover);
  }
  .dropdown-menu-glass .dropdown-item.is-danger {
    color: var(--text-dropdown-danger-glass);
  }
  .dropdown-menu-glass .dropdown-item.is-danger:hover {
    background-color: var(--bg-dropdown-danger-hover-glass);
  }
  .dropdown-sm .dropdown-menu, .dropdown-sm .dropdown-menu-glass {
    border-radius: var(--radius-md);
    padding: var(--spacing);
  }
  .dropdown-sm .dropdown-item {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .dropdown-md .dropdown-menu, .dropdown-md .dropdown-menu-glass {
    border-radius: var(--radius-lg);
    padding: var(--spacing);
  }
  .dropdown-lg .dropdown-menu, .dropdown-lg .dropdown-menu-glass {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 2);
  }
  .dropdown-lg .dropdown-item {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .dropdown-lg .dropdown-end {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .dropdown-w-auto {
    width: max-content;
    min-width: 0;
  }
  .dropdown-w-sm {
    min-width: 10rem;
  }
  .dropdown-w-md {
    min-width: 12rem;
  }
  .dropdown-w-lg {
    min-width: 14rem;
  }
  .dropdown-w-xl {
    min-width: 18rem;
  }
  .dropdown-w-full {
    width: 100%;
    max-width: none;
  }
  .dropdown-menu-start, .dropdown-menu-glass.dropdown-menu-start {
    left: 0 !important;
    right: auto !important;
  }
  .dropdown-menu-end, .dropdown-menu-glass.dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
  }
  .dropdown-menu-start[data-bs-popper], .dropdown-menu-glass.dropdown-menu-start[data-bs-popper] {
    left: 0 !important;
    right: auto !important;
  }
  .dropdown-menu-end[data-bs-popper], .dropdown-menu-glass.dropdown-menu-end[data-bs-popper] {
    right: 0 !important;
    left: auto !important;
  }
  .dropdown-menu-offset-sm {
    margin-top: .25rem;
  }
  .dropdown-menu-offset-md {
    margin-top: .5rem;
  }
  .dropdown-menu-offset-lg {
    margin-top: .75rem;
  }
  .dropdown-item.is-success {
    color: var(--text-success);
  }
  .dropdown-item.is-success:hover {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 10%, transparent);
    }
  }
  .dropdown-item.is-warning {
    color: var(--text-warning);
  }
  .dropdown-item.is-warning:hover {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 10%, transparent);
    }
  }
  .dropdown-item.is-info {
    color: var(--text-info);
  }
  .dropdown-item.is-info:hover {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 10%, transparent);
    }
  }
  .dropdown-item--has-description {
    align-items: flex-start;
    padding-block: calc(var(--spacing) * 2.5);
  }
  .dropdown-item--has-description .dropdown-icon {
    margin-top: 1px;
  }
  .dropdown-item__content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 1px;
  }
  .dropdown-item__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    opacity: 70%;
    color: var(--text-dropdown-hint, var(--text-tertiary));
  }
  .dropdown-item__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    width: 22px;
    height: 22px;
    background-color: var(--bg-secondary);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .dropdown-item__avatar > img, .dropdown-item__avatar > svg {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .dropdown-item__trailing {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .dropdown-shortcut {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 60%;
    color: var(--text-dropdown-end, var(--text-tertiary));
  }
  .dropdown-shortcut > kbd {
    display: inline-block;
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: var(--spacing);
    min-width: 14px;
    text-align: center;
    line-height: 1.4;
    color: inherit;
    background-color: transparent;
    border-color: var(--border-divider);
    font-family: inherit;
    font-size: inherit;
  }
  .dropdown-item--checkable::before {
    content: "";
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    width: 14px;
    height: 14px;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--border-checkbox, var(--border-divider));
    margin-right: 4px;
    transition: background-color 100ms ease, box-shadow 100ms ease;
  }
  .dropdown-item--checkable[aria-checked="true"]::before {
    background-color: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
  }
  .dropdown-item[aria-selected="true"]::after {
    content: "\f00c";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
    font-weight: 600;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 11px;
    color: var(--border-focus);
    flex-shrink: 0;
  }
  .dropdown-item[aria-selected="true"]:has(.dropdown-end)::after, .dropdown-item[aria-selected="true"]:has(.dropdown-shortcut)::after, .dropdown-item[aria-selected="true"]:has(.dropdown-item__trailing)::after {
    display: none;
  }
  .dropdown-item--submenu::after {
    content: "\f054";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
    font-weight: 400;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 10px;
    color: var(--text-dropdown-icon);
    transition: transform 120ms ease;
    flex-shrink: 0;
  }
  .dropdown-item--submenu:hover::after, .dropdown-item--submenu[aria-expanded="true"]::after {
    transform: translateX(2px);
  }
  .dropdown-submenu {
    position: absolute;
    z-index: 10000;
    display: none;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: var(--spacing);
    min-width: 10rem;
    width: max-content;
    max-width: var(--dropdown-menu-max-w, min(20rem, calc(100vw - 2rem)));
    top: 0;
    left: 100%;
    margin-left: 4px;
    border: 0;
    background-color: var(--bg-dropdown);
    color: var(--text-dropdown);
    box-shadow: 0 0 0 1px var(--border-dropdown), var(--shadow-dropdown);
  }
  .dropdown-item--submenu:hover > .dropdown-submenu, .dropdown-item--submenu[aria-expanded="true"] > .dropdown-submenu {
    display: block;
  }
  .dropdown-search {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-inline: calc(var(--spacing) * -1);
    margin-top: calc(var(--spacing) * -1);
    margin-bottom: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    background-color: inherit;
    border-color: var(--border-dropdown-divider, var(--border-divider));
  }
  .dropdown-search .form-control, .dropdown-search .form-control-soft, .dropdown-search input[type="text"], .dropdown-search input[type="search"] {
    width: 100%;
  }
  .dropdown-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-inline: calc(var(--spacing) * -1);
    margin-top: var(--spacing);
    margin-bottom: calc(var(--spacing) * -1);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    background-color: inherit;
    border-color: var(--border-dropdown-divider, var(--border-divider));
  }
  .dropdown-footer--between {
    justify-content: space-between;
  }
  .dropdown-footer--end {
    justify-content: flex-end;
  }
  .dropdown-scroll {
    margin-inline: calc(var(--spacing) * -1);
    overflow-y: auto;
    padding-inline: var(--spacing);
    max-height: var(--dropdown-scroll-max, 18rem);
    scrollbar-width: thin;
    scrollbar-color: var(--border-divider) transparent;
  }
  .dropdown-scroll::-webkit-scrollbar {
    width: 6px;
  }
  .dropdown-scroll::-webkit-scrollbar-thumb {
    background-color: var(--border-divider);
    border-radius: 9999px;
  }
  .dropdown-empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
    color: var(--text-tertiary);
  }
  .dropdown-empty__icon {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    opacity: 50%;
  }
  .dropdown-empty__title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .dropdown-empty__description {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    opacity: 70%;
  }
  .dropdown-loading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .dropdown-loading::before {
    content: "";
    display: inline-block;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: currentcolor;
    width: 12px;
    height: 12px;
    border-top-color: transparent;
    animation: dropdown-spin 0.7s linear infinite;
  }
  @keyframes dropdown-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .dropdown-group {
    padding-block: var(--spacing);
  }
  .dropdown-group + .dropdown-group {
    margin-top: var(--spacing);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-top: calc(var(--spacing) * 2);
    border-color: var(--border-dropdown-divider, var(--border-divider));
  }
  .dropdown-group__label {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-dropdown-title, var(--text-tertiary));
  }
  .dropdown-menu--compact .dropdown-item {
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .dropdown-menu--compact .dropdown-title, .dropdown-menu--compact .dropdown-hint, .dropdown-menu--compact .dropdown-group__label {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
  }
  .dropdown-menu--filled {
    box-shadow: 0 12px 32px -8px var(--text-primary), 0 4px 12px -4px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 32px -8px color-mix(in oklch, var(--text-primary) 18%, transparent), 0 4px 12px -4px color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
  }
  .dropdown-menu--floating {
    box-shadow: 0 0 0 1px var(--border-dropdown), 0 20px 48px -12px var(--text-primary), 0 8px 16px -6px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px var(--border-dropdown), 0 20px 48px -12px color-mix(in oklch, var(--text-primary) 24%, transparent), 0 8px 16px -6px color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
  }
  .dropdown-menu--top, .dropdown-menu-glass.dropdown-menu--top {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: .5rem;
  }
  .dropdown-menu--arrow {
    overflow: visible;
  }
  .dropdown-menu--arrow::before {
    content: "";
    position: absolute;
    top: -5px;
    width: 10px;
    height: 10px;
    background-color: inherit;
    border-left: 1px solid var(--border-dropdown);
    border-top: 1px solid var(--border-dropdown);
    transform: rotate(45deg);
    z-index: 2;
  }
  .dropdown-menu--arrow.dropdown-menu-start::before {
    left: 14px;
  }
  .dropdown-menu--arrow.dropdown-menu-end::before {
    right: 14px;
  }
  .dropdown-menu--arrow:not(.dropdown-menu-start):not(.dropdown-menu-end)::before {
    right: 14px;
  }
  .dropdown-menu--arrow.dropdown-menu--top::before {
    top: auto;
    bottom: -5px;
    transform: rotate(225deg);
  }
  .dropdown-caret {
    transition: transform 150ms ease;
    font-size: 9px;
  }
  [aria-expanded="true"] > .dropdown-caret, .dropdown.show > .dropdown-toggle > .dropdown-caret {
    transform: rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .dropdown-item, .dropdown-caret, .dropdown-item--submenu::after, .dropdown-item--checkable::before, .dropdown-loading::before {
      transition: none;
      animation: none;
    }
  }
  .dropdown-item[hidden], .dropdown-empty[hidden], .dropdown-title[hidden], .dropdown-divider[hidden] {
    display: none !important;
  }
  .dropdown-dots {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    width: 2.25rem;
    height: 2.25rem;
    color: var(--text-dropdown-icon, var(--text-quaternary));
    background-color: transparent;
  }
  .dropdown-dots:hover {
    color: var(--text-quaternary-hover, var(--text-secondary));
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .dropdown-dots:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .dropdown-dots > i, .dropdown-dots > svg {
    font-size: 1.125rem;
    line-height: 1;
  }
  .dropdown-dots.dropdown-dots--sm {
    width: 1.75rem;
    height: 1.75rem;
  }
  .dropdown-dots--sm > i, .dropdown-dots--sm > svg {
    font-size: 1rem;
  }
  .dropdown-link-trigger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-tertiary);
    background-color: transparent;
  }
  .dropdown-link-trigger:hover {
    color: var(--text-secondary);
  }
  .dropdown-link-trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .dropdown-link-trigger > i, .dropdown-link-trigger > svg {
    font-size: 0.6875rem;
    color: var(--text-dropdown-icon, var(--text-quaternary));
  }
  .dropdown-breadcrumb {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    text-align: left;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    background-color: transparent;
  }
  .dropdown-breadcrumb:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .dropdown-breadcrumb__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .dropdown-breadcrumb > i.dropdown-selector, .dropdown-breadcrumb > svg.dropdown-selector {
    font-size: 0.6875rem;
    color: var(--text-dropdown-icon, var(--text-quaternary));
  }
  .dropdown-account-card {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-lg);
    text-align: left;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    padding: 0.5rem;
    background-color: var(--bg-primary-alt, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .dropdown-account-card:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .dropdown-account-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .dropdown-account-card__chevron {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-dropdown-icon, var(--text-quaternary));
    font-size: 0.875rem;
  }
  .dropdown-account-card--md {
    min-width: 15rem;
  }
  .dropdown-account-card--sm {
    min-width: 13rem;
  }
  .dropdown-account-card--xs {
    min-width: 11rem;
  }
  .dropdown-account-card--sm, .dropdown-account-card--xs {
    padding: 0.375rem 0.5rem;
  }
  .dropdown-account {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .dropdown-account__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .dropdown-account__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .dropdown-account__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-dropdown-hint, var(--text-tertiary));
  }
  .dropdown-account--compact {
    gap: calc(var(--spacing) * 2);
  }
  .dropdown-account--compact .dropdown-account__name {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .dropdown-title--section {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--text-icon-brand, var(--border-focus));
  }
  .dropdown-dot {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
  }
  .dropdown-dot::before {
    content: "";
    display: inline-block;
    border-radius: var(--radius-full);
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--text-dropdown-icon, var(--text-quaternary));
  }
  .dropdown-dot.is-online::before {
    background-color: var(--bg-success-solid, var(--text-success));
  }
  .dropdown-dot.is-away::before {
    background-color: var(--text-warning);
  }
  .dropdown-dot.is-busy::before {
    background-color: var(--text-danger);
  }
  .dropdown-dot.is-offline::before {
    background-color: var(--text-quaternary);
  }
  .dropdown-icon--brand {
    color: var(--text-dropdown-item, var(--text-secondary));
  }
  .dropdown-icon--brand.dropdown-icon--grayscale > img, .dropdown-icon--brand.dropdown-icon--grayscale > svg {
    filter: grayscale(1);
  }
  .dropdown-header {
    margin-inline: calc(var(--spacing) * -1);
    margin-top: calc(var(--spacing) * -1);
    margin-bottom: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-color: var(--border-dropdown-divider, var(--border-divider));
    background-color: inherit;
  }
  .dropdown-header__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .dropdown-header__meta {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-dropdown-hint, var(--text-tertiary));
  }
  .dropdown-footer--static {
    position: static;
    z-index: auto;
  }
  .dropdown-footer--roomy {
    padding: 0.75rem 1rem;
  }
  .dropdown-footer--meta {
    justify-content: space-between;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-dropdown-hint, var(--text-tertiary));
  }
  .dropdown-footer--meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dropdown-footer--action {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 3);
  }
  .dropdown-menu--flush-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  @media (pointer: coarse) {
    .dropdown-item {
      min-height: 44px;
    }
    .dropdown-sm .dropdown-item, .dropdown-lg .dropdown-item {
      min-height: 44px;
    }
    .dropdown-dots, .dropdown-link-trigger {
      position: relative;
    }
    .dropdown-dots::before, .dropdown-link-trigger::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 44px;
    }
    .dropdown-toggle {
      min-height: 44px;
      min-width: 44px;
    }
  }
}
@layer utilities {
  .modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100dvh;
    width: 100dvw;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing) * 4);
    --modal-pad-x: 1rem;
    --modal-pad-y: 1rem;
    --modal-radius: var(--radius-2xl);
    --modal-shadow: var(--shadow-modal, var(--shadow-xl));
    --modal-scrim-blur: var(--blur-modal-scrim, 6px);
    --modal-scrim-bg: var(--bg-modal-overlay);
    padding-bottom: calc( var(--modal-pad-y) + max(env(safe-area-inset-bottom, 0px), var(--viewport-ui-bottom, 0px)) );
    padding-top: calc(var(--modal-pad-y) + env(safe-area-inset-top, 0px));
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .modal.show {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 200ms ease, visibility 0s;
  }
  .modal.hiding {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 150ms ease, visibility 0s linear 150ms;
  }
  .modal-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--modal-scrim-bg, var(--bg-modal-overlay));
    backdrop-filter: blur(var(--modal-scrim-blur, 6px));
    -webkit-backdrop-filter: blur(var(--modal-scrim-blur, 6px));
    z-index: 80;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .modal.show .modal-overlay {
    opacity: 1;
  }
  .modal.hiding .modal-overlay {
    opacity: 0;
  }
  .modal--overlay-suppressed .modal-overlay {
    opacity: 0 !important;
  }
  .modal-backdrop {
    display: none !important;
  }
  @media (min-width: 1025px) {
    .app-frame .modal {
      block-size: 100%;
      inline-size: 100%;
    }
    .app-frame .modal-content {
      max-block-size: calc(100% - (var(--modal-pad-y) * 2));
      max-inline-size: calc(100% - (var(--modal-pad-x) * 2));
    }
  }
  .modal-overlay--blur-lg {
    --modal-scrim-blur: var(--blur-lg);
  }
  .modal-overlay--blur-md {
    --modal-scrim-blur: var(--blur-md);
  }
  .modal-overlay--blur-sm {
    --modal-scrim-blur: var(--blur-sm);
  }
  .modal-overlay--blur-xs {
    --modal-scrim-blur: var(--blur-xs);
  }
  .modal-overlay--no-blur {
    --modal-scrim-blur: 0px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal-overlay--dim-strong {
    --modal-scrim-bg: var(--alpha-neutral-950-50);
  }
  .modal-overlay--dim-soft {
    --modal-scrim-bg: var(--alpha-neutral-950-10);
  }
  .modal-overlay--clear {
    --modal-scrim-blur: 0px;
    --modal-scrim-bg: var(--alpha-neutral-950-5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal-overlay--solid {
    --modal-scrim-blur: 0px;
    --modal-scrim-bg: var(--alpha-neutral-950-90);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal-dialog, .modal-dialog-panel {
    display: block;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    @media (width >= 40rem) {
      border-radius: var(--radius-none);
    }
    @media (width >= 40rem) {
      padding: 0;
    }
    z-index: 90;
  }
  .modal-block {
    display: none !important;
  }
  .modal-content {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    text-align: left;
    @media (width >= 40rem) {
      width: auto;
    }
    @media (width >= 40rem) {
      vertical-align: middle;
    }
    background-color: var(--bg-modal);
    color: var(--text-modal);
    border-color: var(--border-modal);
    border-radius: var(--modal-radius, var(--radius-2xl));
    box-shadow: var(--modal-shadow, var(--shadow-xl));
    backdrop-filter: var(--modal-backdrop-blur, none);
    z-index: 100;
    --border-divider: var(--border-modal-divider, var(--border-secondary));
    --border-split: var(--border-modal-divider, var(--border-secondary));
    --border-shell-toolbar: var(--border-modal-divider, var(--border-secondary));
    --border-shell-footer: var(--border-modal-divider, var(--border-secondary));
    --border-panel: var(--border-modal-divider, var(--border-secondary));
    opacity: 0;
    transform: scale(0.95);
    transform-origin: center;
    transition: opacity 200ms ease, transform 200ms ease;
    will-change: transform;
    max-height: calc( 100dvh - (var(--modal-pad-y) * 2) - env(safe-area-inset-top, 0px) - max(env(safe-area-inset-bottom, 0px), var(--viewport-ui-bottom, 0px)) );
    max-width: calc(100dvw - (var(--modal-pad-x) * 2));
  }
  .modal.show .modal-content {
    opacity: 1;
    transform: scale(1);
  }
  .modal.hiding .modal-content {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 150ms ease, transform 150ms ease;
  }
  .modal-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='1'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: var(--modal-grain-opacity, 0);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .modal-content > * {
    position: relative;
    z-index: 1;
  }
  .modal-fullscreen {
    position: fixed;
    inset: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: 100dvw;
    max-width: 100dvw;
    border-radius: var(--radius-none);
  }
  .modal-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-modal-header, var(--bg-modal));
  }
  .modal-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-modal-heading, var(--text-primary));
    letter-spacing: -0.005em;
    min-width: 0;
    flex: 1 1 auto;
  }
  .modal-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--text-modal-muted, var(--text-tertiary));
  }
  .modal-title-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 1px;
  }
  .modal-header__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 28px;
    height: 28px;
    font-size: 13px;
    color: var(--text-secondary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 6%, transparent);
    }
  }
  .modal-actions {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .modal-close, .modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    width: 28px;
    height: 28px;
    font-size: 12px;
    color: var(--icon-modal-close, var(--text-tertiary));
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .modal-close:hover, .modal-action:hover {
    background-color: var(--bg-modal-close-hover, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-modal-close-hover, color-mix(in oklch, var(--text-primary) 8%, transparent));
    }
    color: var(--text-primary);
  }
  .modal-close:focus-visible, .modal-action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
    color: var(--text-primary);
  }
  .modal-close:disabled, .modal-action:disabled {
    pointer-events: none;
    opacity: 30%;
  }
  .modal-close--danger:hover {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 12%, transparent);
    }
    color: var(--text-danger);
  }
  .modal-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    width: 28px;
    height: 28px;
    font-size: 12px;
    color: var(--icon-modal-pin, var(--text-tertiary));
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .modal-pin:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    color: var(--text-primary);
  }
  .modal-pin:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .modal-pin i, .modal-pin svg {
    transition: transform 200ms ease, color 150ms ease;
    transform: rotate(45deg);
  }
  .modal-pin.is-pinned i, .modal-pin.is-pinned svg {
    transform: rotate(0deg);
  }
  .modal-pin.is-pinned {
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .modal-pin i, .modal-pin svg {
      transition: none;
    }
  }
  .modal-minimize i, .modal-minimize svg, .modal-maximize i, .modal-maximize svg {
    font-size: 10px;
  }
  .modal-toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-modal-divider, var(--border-secondary));
    background-color: var(--bg-modal-toolbar, var(--bg-modal));
  }
  .modal-content.modal--draggable .modal-header {
    cursor: grab;
    user-select: none;
  }
  .modal-content.modal--draggable .modal-header:active {
    cursor: grabbing;
  }
  .modal-content.modal--draggable .modal-header::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 16px;
    flex-shrink: 0;
    background-image: radial-gradient(circle at center, currentColor 1.1px, transparent 1.3px);
    background-size: 4px 4px;
    background-position: 0 1px;
    background-repeat: round;
    color: var(--text-tertiary);
    opacity: 0.4;
    margin-right: 4px;
    transition: opacity 120ms ease;
  }
  .modal-content.modal--draggable .modal-header:hover::before {
    opacity: 1;
    color: var(--text-secondary);
  }
  .modal-content.modal--draggable .modal-header :is(.modal-title, .modal-subtitle, .modal-header__icon) {
    user-select: none;
    pointer-events: none;
  }
  .modal-content.modal--draggable .modal-header :is(.modal-actions, .modal-actions *) {
    pointer-events: auto;
  }
  .modal-no-drag {
    user-select: text;
    pointer-events: auto;
  }
  .modal--dragging .modal-content {
    transition: none !important;
    cursor: grabbing;
  }
  .modal-content.modal--minimized {
    position: fixed;
    bottom: 16px;
    right: 16px;
    top: auto;
    left: auto;
    width: min(360px, calc(100dvw - 32px));
    height: auto;
    max-height: none;
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px var(--text-primary), 0 4px 12px -4px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 32px -8px color-mix(in oklch, var(--text-primary) 24%, transparent), 0 4px 12px -4px color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
    transform: none !important;
  }
  .modal-content.modal--minimized > :not(.modal-header):not(.modal-actions) {
    display: none !important;
  }
  .modal-content.modal--minimized .modal-header {
    border-bottom: 0;
    border-radius: 12px;
  }
  .modal-content.modal--minimized.modal--anchor-bl {
    right: auto;
    left: 16px;
  }
  .modal-content.modal--minimized.modal--anchor-tr {
    bottom: auto;
    top: 16px;
  }
  .modal-content.modal--minimized.modal--anchor-tl {
    bottom: auto;
    top: 16px;
    right: auto;
    left: 16px;
  }
  .modal:has(.modal-content.modal--minimized) .modal-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .modal:has(.modal-content.modal--minimized) {
    pointer-events: none;
  }
  .modal:has(.modal-content.modal--minimized) .modal-content {
    pointer-events: auto;
  }
  .modal-content.modal--maximized {
    position: fixed;
    inset: 0;
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: 100dvw;
    max-height: 100dvh;
    border-radius: 0;
    transform: none !important;
  }
  .modal:has(.modal-pin.is-pinned) .modal-overlay, .modal.modal--pinned .modal-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .modal:has(.modal-pin.is-pinned), .modal.modal--pinned {
    pointer-events: none;
  }
  .modal:has(.modal-pin.is-pinned) .modal-content, .modal.modal--pinned .modal-content {
    pointer-events: auto;
  }
  .modal--no-overlay .modal-overlay {
    display: none;
  }
  .modal--no-overlay {
    pointer-events: none;
  }
  .modal--no-overlay .modal-content {
    pointer-events: auto;
    box-shadow: 0 12px 32px -8px var(--text-primary), 0 4px 12px -4px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 12px 32px -8px color-mix(in oklch, var(--text-primary) 24%, transparent), 0 4px 12px -4px color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
  }
  .modal-content.modal--floating {
    border-radius: 12px;
    box-shadow: 0 16px 40px -10px var(--text-primary), 0 6px 16px -6px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 16px 40px -10px color-mix(in oklch, var(--text-primary) 26%, transparent), 0 6px 16px -6px color-mix(in oklch, var(--text-primary) 14%, transparent);
    }
  }
  .modal-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--border-modal-divider, var(--border-secondary));
    padding-bottom: calc( 1rem + max(env(safe-area-inset-bottom, 0px), var(--viewport-ui-bottom, 0px)) );
    z-index: 1;
    background: var(--bg-modal);
  }
  .modal-body {
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    min-height: 0;
  }
  .modal-container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
  }
  .modal-h-xs {
    height: 100dvh;
    @media (width >= 40rem) {
      height: 95dvh;
    }
    @media (width >= 48rem) {
      height: 75dvh;
    }
    @media (width >= 64rem) {
      height: 50dvh;
    }
    @media (width >= 80rem) {
      height: 25dvh;
    }
    @media (width >= 96rem) {
      height: 20dvh;
    }
  }
  .modal-h-sm {
    height: 100dvh;
    @media (width >= 40rem) {
      height: 95dvh;
    }
    @media (width >= 48rem) {
      height: 80dvh;
    }
    @media (width >= 64rem) {
      height: 60dvh;
    }
    @media (width >= 80rem) {
      height: 35dvh;
    }
    @media (width >= 96rem) {
      height: 30dvh;
    }
  }
  .modal-h-md {
    height: 100dvh;
    @media (width >= 40rem) {
      height: 95dvh;
    }
    @media (width >= 48rem) {
      height: 85dvh;
    }
    @media (width >= 64rem) {
      height: 70dvh;
    }
    @media (width >= 80rem) {
      height: 50dvh;
    }
    @media (width >= 96rem) {
      height: 40dvh;
    }
  }
  .modal-h-lg {
    height: 100dvh;
    @media (width >= 40rem) {
      height: 95dvh;
    }
    @media (width >= 48rem) {
      height: 90dvh;
    }
    @media (width >= 64rem) {
      height: 80dvh;
    }
    @media (width >= 80rem) {
      height: 65dvh;
    }
    @media (width >= 96rem) {
      height: 55dvh;
    }
  }
  .modal-h-xl {
    height: 100dvh;
    @media (width >= 40rem) {
      height: 100dvh;
    }
    @media (width >= 48rem) {
      height: 95dvh;
    }
    @media (width >= 64rem) {
      height: 85dvh;
    }
    @media (width >= 80rem) {
      height: 75dvh;
    }
    @media (width >= 96rem) {
      height: 70dvh;
    }
  }
  .modal-h-2xl {
    height: 100dvh;
    @media (width >= 40rem) {
      height: 100dvh;
    }
    @media (width >= 48rem) {
      height: 100dvh;
    }
    @media (width >= 64rem) {
      height: 90dvh;
    }
    @media (width >= 80rem) {
      height: 85dvh;
    }
    @media (width >= 96rem) {
      height: 80dvh;
    }
  }
  .modal-h-3xl {
    height: 100dvh;
    @media (width >= 40rem) {
      height: 100dvh;
    }
    @media (width >= 48rem) {
      height: 100dvh;
    }
    @media (width >= 64rem) {
      height: 95dvh;
    }
    @media (width >= 80rem) {
      height: 95dvh;
    }
    @media (width >= 96rem) {
      height: 90dvh;
    }
  }
  .modal-w-xs {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 95dvw;
    }
    @media (width >= 48rem) {
      width: 70dvw;
    }
    @media (width >= 64rem) {
      width: 45dvw;
    }
    @media (width >= 80rem) {
      width: 30dvw;
    }
    @media (width >= 96rem) {
      width: 25dvw;
    }
  }
  .modal-w-sm {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 95dvw;
    }
    @media (width >= 48rem) {
      width: 75dvw;
    }
    @media (width >= 64rem) {
      width: 60dvw;
    }
    @media (width >= 80rem) {
      width: 45dvw;
    }
    @media (width >= 96rem) {
      width: 35dvw;
    }
  }
  .modal-w-md {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 95dvw;
    }
    @media (width >= 48rem) {
      width: 80dvw;
    }
    @media (width >= 64rem) {
      width: 70dvw;
    }
    @media (width >= 80rem) {
      width: 60dvw;
    }
    @media (width >= 96rem) {
      width: 50dvw;
    }
  }
  .modal-w-lg {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 100dvw;
    }
    @media (width >= 48rem) {
      width: 90dvw;
    }
    @media (width >= 64rem) {
      width: 80dvw;
    }
    @media (width >= 80rem) {
      width: 70dvw;
    }
    @media (width >= 96rem) {
      width: 65dvw;
    }
  }
  .modal-w-xl {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 100dvw;
    }
    @media (width >= 48rem) {
      width: 95dvw;
    }
    @media (width >= 64rem) {
      width: 90dvw;
    }
    @media (width >= 80rem) {
      width: 80dvw;
    }
    @media (width >= 96rem) {
      width: 75dvw;
    }
  }
  .modal-w-2xl {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 100dvw;
    }
    @media (width >= 48rem) {
      width: 100dvw;
    }
    @media (width >= 64rem) {
      width: 95dvw;
    }
    @media (width >= 80rem) {
      width: 90dvw;
    }
    @media (width >= 96rem) {
      width: 85dvw;
    }
  }
  .modal-w-3xl {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 100dvw;
    }
    @media (width >= 48rem) {
      width: 100dvw;
    }
    @media (width >= 64rem) {
      width: 100dvw;
    }
    @media (width >= 80rem) {
      width: 95dvw;
    }
    @media (width >= 96rem) {
      width: 90dvw;
    }
  }
  .modal-h-fixed-xs {
    @media (width >= 40rem) {
      height: 240px;
    }
    @media (width >= 48rem) {
      height: 200px;
    }
    @media (width >= 64rem) {
      height: 180px;
    }
    @media (width >= 80rem) {
      height: 160px;
    }
    @media (width >= 96rem) {
      height: 140px;
    }
    max-height: 100dvh;
  }
  .modal-h-fixed-sm {
    @media (width >= 40rem) {
      height: 320px;
    }
    @media (width >= 48rem) {
      height: 280px;
    }
    @media (width >= 64rem) {
      height: 240px;
    }
    @media (width >= 80rem) {
      height: 200px;
    }
    @media (width >= 96rem) {
      height: 180px;
    }
    max-height: 100dvh;
  }
  .modal-h-fixed-md {
    @media (width >= 40rem) {
      height: 480px;
    }
    @media (width >= 48rem) {
      height: 420px;
    }
    @media (width >= 64rem) {
      height: 360px;
    }
    @media (width >= 80rem) {
      height: 300px;
    }
    @media (width >= 96rem) {
      height: 260px;
    }
    max-height: 100dvh;
  }
  .modal-h-fixed-lg {
    @media (width >= 40rem) {
      height: 640px;
    }
    @media (width >= 48rem) {
      height: 560px;
    }
    @media (width >= 64rem) {
      height: 480px;
    }
    @media (width >= 80rem) {
      height: 400px;
    }
    @media (width >= 96rem) {
      height: 340px;
    }
    max-height: 100dvh;
  }
  .modal-h-fixed-xl {
    @media (width >= 40rem) {
      height: 800px;
    }
    @media (width >= 48rem) {
      height: 720px;
    }
    @media (width >= 64rem) {
      height: 640px;
    }
    @media (width >= 80rem) {
      height: 560px;
    }
    @media (width >= 96rem) {
      height: 480px;
    }
    max-height: 100dvh;
  }
  .modal-h-fixed-2xl {
    @media (width >= 40rem) {
      height: 920px;
    }
    @media (width >= 48rem) {
      height: 840px;
    }
    @media (width >= 64rem) {
      height: 720px;
    }
    @media (width >= 80rem) {
      height: 640px;
    }
    @media (width >= 96rem) {
      height: 560px;
    }
    max-height: 100dvh;
  }
  .modal-h-fixed-3xl {
    @media (width >= 40rem) {
      height: 1000px;
    }
    @media (width >= 48rem) {
      height: 960px;
    }
    @media (width >= 64rem) {
      height: 840px;
    }
    @media (width >= 80rem) {
      height: 720px;
    }
    @media (width >= 96rem) {
      height: 640px;
    }
    max-height: 100dvh;
  }
  .modal-w-fixed-xs {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 320px;
    }
    @media (width >= 48rem) {
      width: 280px;
    }
    @media (width >= 64rem) {
      width: 240px;
    }
    @media (width >= 80rem) {
      width: 200px;
    }
    @media (width >= 96rem) {
      width: 180px;
    }
  }
  .modal-w-fixed-sm {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 480px;
    }
    @media (width >= 48rem) {
      width: 400px;
    }
    @media (width >= 64rem) {
      width: 360px;
    }
    @media (width >= 80rem) {
      width: 320px;
    }
    @media (width >= 96rem) {
      width: 280px;
    }
  }
  .modal-w-fixed-md {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 624px;
    }
    @media (width >= 48rem) {
      width: 520px;
    }
    @media (width >= 64rem) {
      width: 480px;
    }
    @media (width >= 80rem) {
      width: 400px;
    }
    @media (width >= 96rem) {
      width: 360px;
    }
  }
  .modal-w-fixed-lg {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 768px;
    }
    @media (width >= 48rem) {
      width: 640px;
    }
    @media (width >= 64rem) {
      width: 560px;
    }
    @media (width >= 80rem) {
      width: 480px;
    }
    @media (width >= 96rem) {
      width: 440px;
    }
  }
  .modal-w-fixed-xl {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 1024px;
    }
    @media (width >= 48rem) {
      width: 800px;
    }
    @media (width >= 64rem) {
      width: 720px;
    }
    @media (width >= 80rem) {
      width: 640px;
    }
    @media (width >= 96rem) {
      width: 600px;
    }
  }
  .modal-w-fixed-2xl {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 1280px;
    }
    @media (width >= 48rem) {
      width: 1024px;
    }
    @media (width >= 64rem) {
      width: 880px;
    }
    @media (width >= 80rem) {
      width: 720px;
    }
    @media (width >= 96rem) {
      width: 680px;
    }
  }
  .modal-w-fixed-3xl {
    width: 100dvw;
    @media (width >= 40rem) {
      width: 1440px;
    }
    @media (width >= 48rem) {
      width: 1280px;
    }
    @media (width >= 64rem) {
      width: 1024px;
    }
    @media (width >= 80rem) {
      width: 880px;
    }
    @media (width >= 96rem) {
      width: 800px;
    }
  }
  .modal-h-full {
    height: 100dvh;
  }
  .modal-w-full {
    width: 100dvw;
  }
  .modal-h-full .modal-dialog, .modal-w-full .modal-dialog, .modal-force-full .modal-dialog {
    position: fixed;
    inset: 0;
    margin: 0;
    z-index: 80;
  }
  .modal-h-full .modal-content, .modal-w-full .modal-content, .modal-force-full .modal-content, .modal-content.modal-h-full, .modal-content.modal-w-full, .modal-content.modal-force-full {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    border-radius: 0 !important;
    height: 100dvh;
    max-height: 100dvh;
    width: 100dvw;
    max-width: 100dvw;
  }
  @media (max-width: 1024px) {
    .modal-dialog {
      position: fixed;
      inset: 0;
      margin: 0;
      z-index: 80;
    }
    .modal-content {
      border-radius: 0 !important;
      height: 100dvh;
      max-height: 100dvh;
      width: 100dvw;
      max-width: 100dvw;
      z-index: 90;
      position: fixed;
      top: 0;
      left: 0;
    }
    .modal-container {
      display: flex;
      &.collapse.show {
        display: flex;
      }
      height: 100%;
      flex-direction: column;
    }
    .modal-body {
      flex-grow: 1;
      overflow-y: auto;
      min-height: 0;
    }
  }
  @media (max-width: 640px) {
    .modal-content {
      border-radius: 0 !important;
    }
  }
  @supports not (height: 100dvh) {
    .modal {
      height: 100vh;
      width: 100vw;
    }
    .modal-content {
      max-height: calc(100vh - (var(--modal-pad-y) * 2));
      max-width: calc(100vw - (var(--modal-pad-x) * 2));
    }
    .modal-fullscreen, .modal-h-full .modal-content, .modal-w-full .modal-content, .modal-content.modal-h-full, .modal-content.modal-w-full {
      height: 100vh;
      width: 100vw;
      max-height: 100vh;
      max-width: 100vw;
    }
  }
  .modal-body:has(> .split-pane), .modal-body:has(> .page-filtered) {
    display: flex;
    flex-direction: column;
  }
  .modal-body > .split-pane, .modal-body > .page-filtered {
    flex: 1;
    min-height: 0;
  }
  .modal-content.modal-confirm .modal-body {
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
  }
  .modal-content.modal-confirm .modal-body .modal-confirm__icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .modal-content.modal-confirm .modal-body .modal-confirm__title {
    margin-bottom: var(--spacing);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .modal-content.modal-confirm .modal-body .modal-confirm__message {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .modal-content.modal-confirm .modal-footer {
    justify-content: center;
    gap: calc(var(--spacing) * 3);
  }
  .modal-content.modal-confirm--warning .modal-confirm__icon {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .modal-content.modal-confirm--info .modal-confirm__icon {
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .modal-content.is-loading, .modal-content.modal--loading {
    cursor: progress;
  }
  .modal-content.is-loading > :is(.modal-container, .modal-header, .modal-body, .modal-footer), .modal-content.modal--loading > :is(.modal-container, .modal-header, .modal-body, .modal-footer) {
    pointer-events: none;
  }
  .modal-content.is-loading::before, .modal-content.modal--loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: var(--bg-modal);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-modal) 55%, transparent);
    }
    backdrop-filter: blur(1px);
    border-radius: inherit;
    pointer-events: auto;
  }
  .modal-content.is-invalid, .modal-content.modal--form-invalid {
    box-shadow: var(--modal-shadow, var(--shadow-xl)), inset 0 0 0 1px var(--border-danger);
  }
  @media (prefers-reduced-motion: reduce) {
    .modal, .modal-overlay, .modal-content {
      transition: none !important;
    }
  }
}
@layer utilities {
  .popover {
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--bg-popover, var(--bg-dropdown));
    color: var(--text-popover, var(--text-primary));
    border-color: var(--border-popover, var(--border-primary));
    box-shadow: var(--shadow-popover, var(--shadow-lg));
    border-radius: var(--radius-popover, var(--radius-lg, 0.5rem));
    z-index: var(--z-popover, 60);
    display: none;
    overflow: hidden;
    --popover-anim-from-x: 0;
    --popover-anim-from-y: -6px;
  }
  .popover.is-open {
    display: block;
    transition: opacity 150ms ease;
  }
  .popover.is-open.is-anchor-hidden {
    opacity: 0;
    pointer-events: none;
  }
  .modal-content .popover, .popover--modal {
    background-color: var(--bg-popover-modal, var(--bg-popover, var(--bg-dropdown)));
  }
  .popover__arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--bg-popover-arrow, var(--bg-dropdown));
    border-color: var(--border-popover-arrow, var(--border-primary));
    transform: rotate(45deg);
  }
  .popover[data-placement^="top"] .popover__arrow {
    bottom: calc(var(--spacing) * -1);
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .popover[data-placement^="bottom"] .popover__arrow {
    top: calc(var(--spacing) * -1);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .popover[data-placement^="left"] .popover__arrow {
    right: calc(var(--spacing) * -1);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .popover[data-placement^="right"] .popover__arrow {
    left: calc(var(--spacing) * -1);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .popover--no-arrow .popover__arrow {
    display: none;
  }
  .popover--lg-arrow .popover__arrow {
    width: 10px;
    height: 10px;
  }
  .popover__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-popover-divider, var(--border-popover));
    background-color: var(--bg-popover-header);
  }
  .popover__header-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-popover-title);
  }
  .popover__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-popover-title);
    line-height: 1.3;
  }
  .popover__subtitle {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-popover-subtitle);
    line-height: 1.4;
    margin-top: 1px;
  }
  .popover__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-md, 0.375rem);
    color: var(--text-popover-subtitle);
    flex: 0 0 auto;
  }
  .popover__header > .popover__title, .popover__header > .popover__header-title, .popover__header > .popover__icon + .popover__title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .popover__header-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .popover__header-close, .popover__close, [data-popover-close].popover__btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: var(--radius-sm, 0.25rem);
    background: transparent;
    color: var(--text-popover-muted, var(--text-tertiary));
    transition: background-color 120ms ease, color 120ms ease;
  }
  .popover__header-close:hover, .popover__close:hover {
    background-color: var(--bg-popover-menu-hover, var(--bg-hover));
    color: var(--text-popover-title, var(--text-primary));
  }
  .popover__pin {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: var(--radius-sm, 0.25rem);
    background: transparent;
    color: var(--text-popover-pin);
    transition: background-color 120ms ease, color 120ms ease;
  }
  .popover__pin:hover {
    background-color: var(--bg-popover-pin-hover);
    color: var(--text-popover-title);
  }
  .popover.is-pinned .popover__pin {
    color: var(--text-popover-pin-active);
    background-color: var(--bg-popover-pin-hover);
  }
  .popover__header-close:focus-visible, .popover__close:focus-visible, .popover__pin:focus-visible, [data-popover-close].popover__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .popover__search {
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
  }
  .popover__search .controls {
    position: relative;
  }
  .popover__search .input-clear {
    position: absolute;
    top: calc(1 / 2 * 100%);
    right: calc(var(--spacing) * 1.5);
    display: none;
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: 0;
    background: none;
    color: var(--text-tertiary);
    font-size: 0.625rem;
    line-height: 1;
  }
  .popover__search .controls.has-clear-value .input-clear {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
  }
  .popover__body {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--text-popover);
  }
  .popover__divider {
    margin-inline: calc(var(--spacing) * 3);
    margin-block: var(--spacing);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-popover-divider);
  }
  .popover__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-popover-divider, var(--border-popover));
    background-color: var(--bg-popover-footer);
  }
  .popover__footer-info {
    margin-right: auto;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-popover-muted, var(--text-tertiary));
  }
  .popover__actions {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .popover__menu {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .popover__menu-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    background: transparent;
    color: var(--text-popover);
    line-height: 1.4;
    text-align: left;
    transition: background-color 100ms ease, color 100ms ease;
  }
  .popover__menu-item:hover, .popover__menu-item.is-focused {
    background-color: var(--bg-popover-menu-hover);
  }
  .popover__menu-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    background-color: var(--bg-popover-menu-hover);
  }
  .popover__menu-item.is-active, .popover__menu-item[aria-current="true"] {
    background-color: var(--bg-popover-menu-active);
    color: var(--text-popover-title);
  }
  .popover__menu-item.is-danger {
    color: var(--utility-red-600);
  }
  .popover__menu-item.is-danger:hover {
    background-color: var(--utility-red-50);
    color: var(--utility-red-700);
  }
  .popover__menu-item.is-danger:focus-visible {
    outline-color: var(--border-danger, var(--utility-red-600));
  }
  .popover__menu-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-popover-muted);
    font-size: 12px;
  }
  .popover__menu-item:hover .popover__menu-icon, .popover__menu-item.is-focused .popover__menu-icon, .popover__menu-item.is-active .popover__menu-icon {
    color: var(--text-popover);
  }
  .popover__menu-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .popover__menu-meta {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--text-popover-muted);
    font-family: 'Space Mono', monospace;
  }
  .popover__menu-sticky {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: inherit;
    border-bottom: 1px solid var(--border-popover-divider);
  }
  .popover kbd, .popover__kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 0.25rem);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-popover-kbd);
    background-color: var(--bg-popover-kbd);
    border: 1px solid var(--border-popover-kbd);
    line-height: 1;
  }
  .popover--p-flush > .popover__body {
    padding: 0;
  }
  .popover--p-flush > form > .popover__body {
    padding: 0;
  }
  .popover--p-xs > .popover__body {
    padding-inline: var(--spacing);
    padding-block: var(--spacing);
  }
  .popover--p-xs > form > .popover__body {
    padding-inline: var(--spacing);
    padding-block: var(--spacing);
  }
  .popover--p-xs > .popover__header {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
  }
  .popover--p-xs > .popover__footer {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
  }
  .popover--p-sm > .popover__body {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
  }
  .popover--p-sm > form > .popover__body {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
  }
  .popover--p-sm > .popover__header {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
  }
  .popover--p-sm > .popover__footer {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
  }
  .popover--p-lg > .popover__body {
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .popover--p-lg > form > .popover__body {
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .popover--p-lg > .popover__header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .popover--p-lg > .popover__footer {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .popover--p-xl > .popover__body {
    padding-inline: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .popover--p-xl > form > .popover__body {
    padding-inline: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .popover--p-xl > .popover__header {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .popover--p-xl > .popover__footer {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .popover--xs {
    width: 160px;
  }
  .popover--sm {
    width: 200px;
  }
  .popover--md {
    width: 280px;
  }
  .popover--lg {
    width: 400px;
  }
  .popover--xl {
    width: 520px;
  }
  .popover--auto-width {
    width: auto;
  }
  .popover--fit-content {
    width: max-content;
    max-width: 480px;
  }
  .popover--soft {
    background-color: var(--bg-popover-soft);
    border-color: var(--border-popover-soft);
    box-shadow: var(--shadow-popover-soft);
  }
  .popover--soft .popover__arrow {
    background-color: var(--bg-popover-soft);
    border-color: transparent;
  }
  .popover--glass {
    background-color: var(--bg-popover-glass);
    border-color: var(--border-popover-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .popover--glass .popover__arrow {
    background-color: var(--bg-popover-glass);
    border-color: var(--border-popover-glass);
  }
  .popover--dark {
    background-color: var(--bg-popover-dark);
    color: var(--text-popover-dark);
    border-color: var(--border-popover-dark);
  }
  .popover--dark .popover__title, .popover--dark .popover__header-title {
    color: var(--text-popover-dark);
  }
  .popover--dark .popover__subtitle, .popover--dark .popover__menu-meta, .popover--dark .popover__footer-info {
    color: oklch(100% 0 0 / 0.7);
  }
  .popover--dark .popover__divider, .popover--dark .popover__header, .popover--dark .popover__footer {
    border-color: oklch(100% 0 0 / 0.1);
  }
  .popover--dark .popover__menu-item:hover, .popover--dark .popover__menu-item.is-focused {
    background-color: oklch(100% 0 0 / 0.08);
  }
  .popover--dark .popover__arrow {
    background-color: var(--bg-popover-dark-arrow);
    border-color: var(--border-popover-dark);
  }
  .popover--dark kbd, .popover--dark .popover__kbd {
    background-color: oklch(100% 0 0 / 0.1);
    color: oklch(100% 0 0 / 0.9);
    border-color: oklch(100% 0 0 / 0.15);
  }
  .popover--card {
    background-color: var(--bg-popover-card);
    box-shadow: var(--shadow-popover-card);
  }
  .popover--menu {
    padding: 0;
  }
  .popover--menu > .popover__body {
    padding: 0;
  }
  .popover--success, .popover--warning, .popover--danger, .popover--info {
    position: relative;
  }
  .popover--success::before, .popover--warning::before, .popover--danger::before, .popover--info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }
  .popover--success::before {
    background-color: var(--border-popover-intent-success);
  }
  .popover--warning::before {
    background-color: var(--border-popover-intent-warning);
  }
  .popover--danger::before {
    background-color: var(--border-popover-intent-danger);
  }
  .popover--info::before {
    background-color: var(--border-popover-intent-info);
  }
  .popover.is-loading .popover__body {
    position: relative;
    min-height: 60px;
  }
  .popover.is-loading .popover__body::before, .popover.is-loading .popover__body::after {
    content: "";
    display: block;
    background-color: var(--bg-popover-skeleton);
    border-radius: var(--radius-sm, 0.25rem);
    background-image: linear-gradient( 90deg, var(--bg-popover-skeleton) 0%, var(--bg-popover-skeleton) 50%, var(--bg-popover-skeleton) 100% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient( 90deg, var(--bg-popover-skeleton) 0%, color-mix(in oklch, var(--bg-popover-skeleton) 60%, var(--bg-primary)) 50%, var(--bg-popover-skeleton) 100% );
    }
    background-size: 200% 100%;
    animation: popover-skeleton 1.4s ease-in-out infinite;
  }
  .popover.is-loading .popover__body::before {
    height: 12px;
    width: 80%;
    margin: 6px 0;
  }
  .popover.is-loading .popover__body::after {
    height: 12px;
    width: 55%;
  }
  .popover.is-loading .popover__body > * {
    visibility: hidden;
  }
  @keyframes popover-skeleton {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .popover.is-loading .popover__body::before, .popover.is-loading .popover__body::after {
      animation: none;
    }
  }
  .popover.is-error .popover__body {
    color: var(--utility-red-700);
  }
  .popover.is-open {
    animation: popover-in var(--duration-fast, 120ms) var(--ease-out, ease-out);
  }
  .popover[data-placement^="top"].is-open {
    --popover-anim-from-y: 6px;
  }
  .popover[data-placement^="bottom"].is-open {
    --popover-anim-from-y: -6px;
  }
  .popover[data-placement^="left"].is-open {
    --popover-anim-from-x: 6px;
    --popover-anim-from-y: 0;
  }
  .popover[data-placement^="right"].is-open {
    --popover-anim-from-x: -6px;
    --popover-anim-from-y: 0;
  }
  @keyframes popover-in {
    from {
      opacity: 0;
      transform: translate(var(--popover-anim-from-x, 0), var(--popover-anim-from-y, -6px)) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translate(0, 0) scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .popover.is-open {
      animation: none;
    }
  }
  .notes-clamp {
    position: relative;
  }
  .notes-clamp.is-clamped .notes-clamp__text {
    cursor: pointer;
  }
  .notes-clamp__more {
    margin-top: calc(var(--spacing) * 0.5);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-link);
  }
  .notes-clamp__more:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
  }
  .notes-clamp__more:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 0.25rem);
  }
  .notes-clamp__full-wrapper {
    padding: 0;
  }
  .popover .notes-clamp__full {
    padding: calc(var(--spacing) * 4);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    white-space: pre-wrap;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
@layer utilities {
  .context-menu {
    position: fixed;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: var(--spacing);
    z-index: var(--z-max);
    min-width: 10rem;
    border: 0;
    background-color: var(--bg-dropdown);
    color: var(--text-dropdown);
    backdrop-filter: var(--blur-dropdown-backdrop);
    box-shadow: 0 0 0 1px var(--border-dropdown), var(--shadow-dropdown);
    display: none;
  }
  .context-menu.is-open {
    display: block;
    animation: context-menu-in var(--duration-fast) var(--ease-out);
  }
  .context-menu::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='1'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: var(--opacity-dropdown-grain, 0);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .context-menu > * {
    position: relative;
    z-index: 1;
  }
  .context-menu--glass {
    background-color: var(--bg-dropdown-glass);
    color: var(--text-dropdown-glass);
    backdrop-filter: var(--blur-dropdown-glass);
    box-shadow: 0 0 0 1px var(--border-dropdown-glass), var(--shadow-dropdown-glass);
  }
  .context-menu--glass::after {
    opacity: var(--opacity-dropdown-glass-grain, 0);
  }
  .context-menu--glass .dropdown-item {
    color: var(--text-dropdown-item-glass);
  }
  .context-menu--glass .dropdown-item:hover {
    background-color: var(--bg-dropdown-glass-hover);
  }
  .context-menu--glass .dropdown-item:active {
    background-color: var(--bg-dropdown-glass-active);
  }
  .context-menu--xs {
    width: 8rem;
  }
  .context-menu--sm {
    width: 10rem;
  }
  .context-menu--md {
    width: 12rem;
  }
  .context-menu--lg {
    width: 14rem;
  }
  .context-menu--xl {
    width: 18rem;
  }
  .context-menu--compact .dropdown-item {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    min-height: 1.5rem;
  }
  .context-menu--compact .dropdown-icon {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .context-menu--compact .dropdown-divider {
    margin-top: 2px;
    margin-bottom: 2px;
  }
  .context-menu__header {
    margin-bottom: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-dropdown-divider);
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    margin-top: -0.25rem;
  }
  .context-menu__header-title {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 60%;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
  }
  .context-menu__header-target {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .context-menu__header-meta {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 70%;
    color: var(--text-tertiary);
  }
  .context-menu__header--row {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .context-menu__header--row .context-menu__header-icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary-subtle);
    color: var(--text-primary-solid);
  }
  .context-menu__header--row .context-menu__header-content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .context-menu__footer {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    border-top: 1px solid var(--border-dropdown-divider);
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    margin-bottom: -0.25rem;
    color: var(--text-tertiary);
  }
  .context-menu__footer-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--text-primary-solid);
  }
  .context-menu__footer-link:hover {
    opacity: 0.8;
  }
  .context-menu__section + .context-menu__section {
    border-top: 1px solid var(--border-dropdown-divider);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
  }
  .context-menu__section-title {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-tertiary);
    opacity: 0.7;
    letter-spacing: 0.05em;
  }
  .dropdown-item--submenu.is-open, .dropdown-item--submenu[aria-expanded="true"] {
    background-color: var(--bg-dropdown-hover);
  }
  .context-menu__empty, .context-menu__loading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
    text-align: center;
    color: var(--text-tertiary);
  }
  .context-menu__empty-icon, .context-menu__loading-icon {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    opacity: 50%;
  }
  .context-menu__empty-message, .context-menu__loading-message {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .context-menu .dropdown-end kbd, .context-menu kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    min-width: 1.25rem;
    height: 1.125rem;
    background-color: var(--bg-kbd);
    color: var(--text-kbd);
    border: 1px solid var(--border-kbd);
    letter-spacing: 0.025em;
  }
  @keyframes context-menu-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .context-menu.is-open {
      animation: none;
    }
    .context-menu__footer-link {
      transition: none;
    }
  }
}
@layer utilities {
  .lightbox-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    z-index: var(--z-lightbox, var(--z-max));
    background-color: var(--bg-lightbox);
    color: var(--text-lightbox);
    display: none;
    opacity: 0;
    transition: opacity var(--duration-normal, 200ms) var(--ease-default, ease);
  }
  .lightbox-backdrop.is-open {
    display: flex;
    opacity: 1;
  }
  .lightbox-backdrop [hidden] {
    display: none !important;
  }
  .lightbox__live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .lightbox-backdrop.is-dim::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient( ellipse at center, transparent 30%, var(--bg-lightbox-overlay) 100% );
    pointer-events: none;
  }
  .lightbox__chrome {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    z-index: 3;
    color: var(--text-lightbox);
    transition: opacity var(--duration-normal, 200ms) var(--ease-default, ease), transform var(--duration-normal, 200ms) var(--ease-default, ease);
  }
  .lightbox__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    flex: 1 1 0%;
    min-width: 0;
    color: var(--text-lightbox);
  }
  .lightbox__counter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    text-transform: uppercase;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    background-color: var(--bg-lightbox-surface);
    color: var(--text-lightbox-muted);
    letter-spacing: 0.05em;
    pointer-events: none;
  }
  .lightbox__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    margin-left: auto;
  }
  .lightbox__btn, .lightbox__close, .lightbox__prev, .lightbox__next, .lightbox__zoom-btn, .lightbox__toolbar > button {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    background-color: var(--bg-lightbox-control);
    color: var(--text-lightbox);
    border: 1px solid var(--border-lightbox);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
  }
  .lightbox__btn:hover, .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover, .lightbox__zoom-btn:hover, .lightbox__toolbar > button:hover {
    background-color: var(--bg-lightbox-control-hover);
  }
  .lightbox__btn:active, .lightbox__close:active, .lightbox__prev:active, .lightbox__next:active, .lightbox__zoom-btn:active, .lightbox__toolbar > button:active {
    background-color: var(--bg-lightbox-control-active);
    transform: scale(0.95);
  }
  .lightbox__btn:focus-visible, .lightbox__close:focus-visible, .lightbox__prev:focus-visible, .lightbox__next:focus-visible, .lightbox__zoom-btn:focus-visible, .lightbox__toolbar > button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .lightbox__btn[disabled], .lightbox__zoom-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .lightbox__nav {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: contents;
    pointer-events: none;
  }
  .lightbox__prev, .lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    z-index: 2;
    pointer-events: auto;
  }
  .lightbox__prev {
    left: 1rem;
  }
  .lightbox__next {
    right: 1rem;
  }
  .lightbox__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: zoom-in;
  }
  .lightbox-backdrop.is-zoomed .lightbox__stage {
    cursor: grab;
  }
  .lightbox-backdrop.is-panning .lightbox__stage {
    cursor: grabbing;
  }
  .lightbox__image {
    -webkit-user-select: none;
    user-select: none;
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    transform-origin: center center;
    transition: transform var(--duration-fast, 150ms) var(--ease-default, ease), opacity 200ms ease;
    will-change: transform;
  }
  .lightbox-backdrop.is-panning .lightbox__image {
    transition: none;
  }
  .lightbox__image.is-loading {
    opacity: 0;
  }
  .lightbox__image.is-exiting-next, .lightbox__image.is-exiting-prev {
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .lightbox__image.is-entering-next, .lightbox__image.is-entering-prev {
    opacity: 0;
  }
  .lightbox__shimmer {
    position: absolute;
    border-radius: var(--radius-lg);
    width: 60vw;
    height: 50vh;
    max-width: 600px;
    max-height: 400px;
    background: linear-gradient( 90deg, var(--bg-lightbox-surface) 25%, var(--bg-lightbox-control-hover) 37%, var(--bg-lightbox-surface) 63% );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .lightbox__error {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 0.5rem;
    background-color: var(--bg-lightbox-surface);
    color: var(--text-lightbox-muted);
    border: 1px dashed var(--border-lightbox);
    min-width: 16rem;
    max-width: 28rem;
    z-index: 2;
  }
  .lightbox__error-icon {
    margin-bottom: var(--spacing);
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    opacity: 60%;
  }
  .lightbox__error-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-lightbox);
  }
  .lightbox__error-message {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .lightbox__caption-bar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    max-width: min(80vw, 56rem);
    padding: 0.75rem 1rem 1.25rem;
    text-align: center;
    transition: opacity var(--duration-normal, 200ms) var(--ease-default, ease);
  }
  .lightbox__caption {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--text-lightbox);
  }
  .lightbox__meta {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    text-transform: uppercase;
    color: var(--text-lightbox-muted);
    letter-spacing: 0.05em;
  }
  .lightbox__meta-dot {
    opacity: 50%;
  }
  .lightbox__zoom-controls {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-lightbox-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-lightbox);
    z-index: 3;
    transition: opacity var(--duration-normal, 200ms) ease;
  }
  .lightbox__zoom-btn {
    width: 32px;
    height: 32px;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: transparent;
  }
  .lightbox__zoom-btn:hover {
    background-color: var(--bg-lightbox-control-hover);
  }
  .lightbox__zoom-level {
    padding-inline: calc(var(--spacing) * 2);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-lightbox-muted);
    min-width: 3rem;
    text-align: center;
  }
  .lightbox__thumbs {
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    max-width: min(80vw, 56rem);
    overflow-x: auto;
    border-radius: var(--radius-xl);
    background-color: var(--bg-lightbox-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-lightbox);
    z-index: 3;
    scrollbar-width: thin;
    transition: opacity var(--duration-normal, 200ms) ease;
  }
  .lightbox__thumbs::-webkit-scrollbar {
    height: 6px;
  }
  .lightbox__thumbs::-webkit-scrollbar-thumb {
    background-color: var(--border-lightbox);
    border-radius: 3px;
  }
  .lightbox__thumb {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-md);
    width: 48px;
    height: 48px;
    background-color: var(--bg-lightbox-thumbnail);
    border: 2px solid transparent;
    opacity: 0.6;
    transition: opacity 150ms ease, border-color 150ms ease, transform 150ms ease;
  }
  .lightbox__thumb:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
  .lightbox__thumb.is-active {
    opacity: 1;
    border-color: var(--border-lightbox-thumbnail-active);
    background-color: var(--bg-lightbox-thumbnail-active);
  }
  .lightbox__thumb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .lightbox__thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .lightbox__thumb img.is-loaded {
    opacity: 1;
  }
  .lightbox__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22rem;
    max-width: 90vw;
    padding: 4rem 1.5rem 1.5rem;
    overflow-y: auto;
    background-color: var(--bg-lightbox-surface);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-left: 1px solid var(--border-lightbox);
    color: var(--text-lightbox);
    z-index: 2;
    transform: translateX(0);
    transition: transform var(--duration-normal, 200ms) var(--ease-default, ease);
  }
  .lightbox__panel-section {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .lightbox__panel-section-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-lightbox-muted);
    letter-spacing: 0.06em;
  }
  .lightbox__panel-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-bottom: 1px solid var(--border-lightbox);
  }
  .lightbox__panel-row:last-child {
    border-bottom: 0;
  }
  .lightbox__panel-label {
    color: var(--text-lightbox-muted);
  }
  .lightbox__panel-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-lightbox);
  }
  .lightbox-backdrop.lightbox--minimal .lightbox__chrome {
    display: none;
  }
  .lightbox-backdrop.lightbox--minimal .lightbox__nav {
    display: none;
  }
  .lightbox-backdrop.lightbox--minimal .lightbox__caption-bar {
    display: none;
  }
  .lightbox-backdrop.lightbox--minimal .lightbox__thumbs {
    display: none;
  }
  .lightbox-backdrop.lightbox--minimal .lightbox__zoom-controls {
    display: none;
  }
  .lightbox-backdrop.lightbox--minimal .lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
  }
  .lightbox-backdrop.lightbox--immersive.is-focus .lightbox__chrome, .lightbox-backdrop.lightbox--immersive.is-focus .lightbox__caption-bar, .lightbox-backdrop.lightbox--immersive.is-focus .lightbox__thumbs, .lightbox-backdrop.lightbox--immersive.is-focus .lightbox__zoom-controls, .lightbox-backdrop.lightbox--immersive.is-focus .lightbox__prev, .lightbox-backdrop.lightbox--immersive.is-focus .lightbox__next {
    opacity: 0;
    pointer-events: none;
  }
  .lightbox-backdrop.lightbox--immersive.is-focus .lightbox__chrome {
    transform: translateY(-100%);
  }
  .lightbox-backdrop.lightbox--evidence .lightbox__stage {
    padding-right: 22rem;
  }
  .lightbox-backdrop.lightbox--evidence .lightbox__image {
    max-width: calc(90vw - 22rem);
  }
  .lightbox-backdrop.lightbox--metadata .lightbox__stage {
    padding-right: 22rem;
  }
  .lightbox-backdrop.lightbox--metadata .lightbox__image {
    max-width: calc(90vw - 22rem);
  }
  .lightbox-backdrop.lightbox--presentation .lightbox__thumbs {
    display: none;
  }
  .lightbox-backdrop.lightbox--presentation .lightbox__caption {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .lightbox-backdrop.lightbox--compact {
    position: relative;
    inset: auto;
    min-height: 28rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-lightbox);
    overflow: hidden;
  }
  .lightbox-backdrop.lightbox--compact .lightbox__image {
    max-width: 100%;
    max-height: 24rem;
  }
  .lightbox-backdrop.lightbox--compare .lightbox__stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 4rem 1rem 1rem;
  }
  .lightbox-backdrop.lightbox--compare .lightbox__compare-pane {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .lightbox-backdrop.lightbox--compare .lightbox__compare-pane img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
  }
  .lightbox-backdrop.lightbox--compare .lightbox__compare-label {
    margin-top: calc(var(--spacing) * 2);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    text-transform: uppercase;
    background-color: var(--bg-lightbox-surface);
    color: var(--text-lightbox-muted);
    letter-spacing: 0.05em;
  }
  .lightbox-backdrop.is-open .lightbox__image {
    animation: lightbox-img-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes lightbox-img-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .lightbox__image.is-swiping {
    transition: none !important;
    animation: none !important;
  }
  @media (pointer: coarse) {
    .lightbox__prev, .lightbox__next {
      width: 48px;
      height: 48px;
    }
    .lightbox__close {
      width: 44px;
      height: 44px;
    }
    .lightbox__thumb {
      width: 56px;
      height: 56px;
    }
    .lightbox__prev, .lightbox__next {
      top: auto;
      bottom: 5.5rem;
      transform: none;
    }
    .lightbox-backdrop.lightbox--metadata .lightbox__stage, .lightbox-backdrop.lightbox--evidence .lightbox__stage {
      padding-right: 0;
    }
    .lightbox-backdrop.lightbox--metadata .lightbox__image, .lightbox-backdrop.lightbox--evidence .lightbox__image {
      max-width: 90vw;
      max-height: 60vh;
    }
    .lightbox-backdrop.lightbox--metadata .lightbox__panel, .lightbox-backdrop.lightbox--evidence .lightbox__panel {
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-height: 40vh;
      border-left: 0;
      border-top: 1px solid var(--border-lightbox);
      padding: 1rem 1.25rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .lightbox-backdrop, .lightbox__chrome, .lightbox__caption-bar, .lightbox__panel, .lightbox__thumbs, .lightbox__zoom-controls {
      transition: none;
    }
    .lightbox-backdrop.is-open .lightbox__image {
      animation: none;
    }
    .lightbox__image, .lightbox__image.is-exiting-next, .lightbox__image.is-exiting-prev, .lightbox__image.is-entering-next, .lightbox__image.is-entering-prev {
      transition: opacity 0ms;
    }
    .lightbox__shimmer {
      animation: none;
      background: var(--bg-lightbox-surface);
    }
  }
}
@layer utilities {
  .command-palette {
    position: fixed;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 1rem;
    padding-top: clamp(3.5rem, 12vh, 15rem);
    z-index: var(--z-command-palette, var(--z-modal, 50));
    background-color: var(--bg-command-palette-backdrop, oklch(0% 0 0 / 0.4));
    backdrop-filter: blur(var(--blur-command-palette-scrim, var(--blur-modal-scrim, 6px)));
    -webkit-backdrop-filter: blur(var(--blur-command-palette-scrim, var(--blur-modal-scrim, 6px)));
    display: none;
  }
  .command-palette.is-open {
    display: flex;
  }
  .command-palette__dialog {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: var(--command-palette-width, 640px);
    max-height: min(37.5rem, calc(100dvh - 7rem));
    background-color: var(--bg-command-palette, var(--bg-surface));
    box-shadow: var(--shadow-command-palette, var(--shadow-xl));
    border-radius: var(--radius-command-palette, var(--radius-xl, 0.75rem));
  }
  .command-palette__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
  }
  .command-palette__search {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 1rem;
  }
  .command-palette__search::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--border-command-palette-divider, var(--border-secondary));
  }
  .command-palette__search:focus-within {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    border-radius: var(--radius-command-palette, var(--radius-xl, 0.75rem)) var(--radius-command-palette, var(--radius-xl, 0.75rem)) 0 0;
  }
  .command-palette__search-icon {
    pointer-events: none;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.25rem;
    text-align: center;
    color: var(--text-command-palette-icon, var(--text-quaternary));
  }
  .command-palette__input {
    min-width: 0;
    flex: 1;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    padding: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-command-palette, var(--text-primary));
  }
  .command-palette__input::placeholder {
    color: var(--text-command-palette-placeholder, var(--text-placeholder, var(--text-tertiary)));
  }
  .command-palette__search-affordances {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .command-palette__help {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1rem;
    height: 1rem;
    color: var(--text-command-palette-icon, var(--text-quaternary));
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .command-palette__help:hover, .command-palette__help:focus-visible {
    color: var(--text-command-palette, var(--text-secondary));
  }
  .command-palette__help:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .command-palette__results {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    gap: 0.125rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    scroll-padding-block: 2.5rem;
  }
  .command-palette__group, .command-palette__section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-bottom: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-command-palette-divider, var(--border-secondary));
  }
  .command-palette__group:last-child, .command-palette__section:last-child {
    border-bottom-color: transparent;
    padding-bottom: 0;
  }
  .command-palette__group-label, .command-palette__section-title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0.5rem 1.125rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-command-palette-heading, var(--text-tertiary));
  }
  .command-palette__item {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    min-height: 2.5rem;
    margin: 0 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-command-palette-item, var(--radius-lg, 0.5rem));
    color: var(--text-command-palette, var(--text-primary));
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .command-palette__item:hover, .command-palette__item--active, .command-palette__item[aria-selected="true"] {
    background-color: var(--bg-command-palette-item-hover, var(--bg-primary-hover, var(--bg-hover)));
  }
  .command-palette__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .command-palette__item[aria-disabled="true"], .command-palette__item.is-disabled {
    pointer-events: none;
    opacity: var(--opacity-command-palette-disabled, 0.5);
  }
  .command-palette__item-icon {
    flex-shrink: 0;
    text-align: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.25rem;
    color: var(--text-command-palette-icon, var(--text-quaternary));
  }
  .command-palette__item-avatar {
    flex-shrink: 0;
  }
  .command-palette__item-dot {
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--text-command-palette-dot, var(--text-success));
  }
  .command-palette__item-dot--warning {
    background-color: var(--text-warning);
  }
  .command-palette__item-dot--danger {
    background-color: var(--text-error, var(--text-danger));
  }
  .command-palette__item-dot--info {
    background-color: var(--text-info, var(--text-brand-secondary));
  }
  .command-palette__item-dot--neutral {
    background-color: var(--text-quaternary);
  }
  .command-palette__item-content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 0.375rem;
  }
  .command-palette__item-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--text-command-palette, var(--text-primary));
  }
  .command-palette__item-description {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-command-palette-muted, var(--text-tertiary));
  }
  .command-palette__item--stacked {
    align-items: flex-start;
    padding: 0.625rem;
  }
  .command-palette__item--stacked .command-palette__item-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }
  .command-palette__item--stacked .command-palette__item-dot {
    margin-top: 0.5rem;
  }
  .command-palette__shortcut {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
  }
  .command-palette__shortcut-sep {
    display: inline-flex;
    align-items: center;
    color: var(--text-command-palette-icon, var(--text-quaternary));
  }
  .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    min-width: 1.5rem;
    padding: 0.125rem 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
    border-radius: 4px;
    background-color: var(--bg-kbd, var(--bg-secondary-alt, var(--bg-tertiary)));
    color: var(--text-kbd, var(--text-tertiary, var(--text-secondary)));
    box-shadow: inset 0 0 0 1px var(--border-kbd, var(--border-secondary));
  }
  .kbd-sm {
    min-width: 1.25rem;
    padding: 0 0.1875rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .command-palette__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem 2.5rem;
    font-size: 0.875rem;
    color: var(--text-command-palette-muted, var(--text-tertiary));
  }
  .command-palette__preview {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    overflow-y: auto;
    width: 22.5rem;
    border-left: 1px solid var(--border-command-palette-divider, var(--border-secondary));
    background-color: var(--bg-command-palette, var(--bg-surface));
  }
  .command-palette--with-preview .command-palette__dialog {
    max-width: var(--command-palette-width-preview, 800px);
  }
  .command-palette__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding: 0.5rem 0.5rem 0.5rem 1.125rem;
    background-color: var(--bg-command-palette-footer, var(--bg-command-palette, var(--bg-surface)));
    border-top: 1px solid var(--border-command-palette-divider, var(--border-secondary));
    color: var(--text-command-palette-muted, var(--text-quaternary));
  }
  .command-palette__footer-hints {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .command-palette__nav-hint {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-command-palette-hint, var(--text-quaternary));
  }
  .command-palette__nav-keys {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .command-palette__kbd-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0.375rem;
    font-size: 0.875rem;
    line-height: 1;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-command-palette, var(--bg-surface));
    color: var(--text-command-palette-icon, var(--text-quaternary));
    box-shadow: inset 0 0 0 1px var(--border-command-palette-divider, var(--border-secondary));
  }
  .command-palette__footer-action {
    flex-shrink: 0;
  }
  @media (max-width: 767px) {
    .command-palette__footer {
      display: none;
    }
    .command-palette__preview {
      display: none;
    }
  }
  .command-palette.is-open {
    animation: command-palette-overlay-in var(--duration-fast, 150ms) var(--ease-out, ease-out);
  }
  .command-palette.is-open .command-palette__dialog {
    animation: command-palette-in var(--duration-normal, 200ms) var(--ease-out, ease-out);
  }
  @keyframes command-palette-overlay-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes command-palette-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .command-palette.is-open, .command-palette.is-open .command-palette__dialog {
      animation: none;
    }
  }
}
@layer utilities {
  .command-menu {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: var(--command-menu-width, 640px);
    max-height: var(--command-menu-max-height, 30rem);
    background-color: var(--bg-command-palette, var(--bg-surface));
    border-radius: var(--radius-command-palette, var(--radius-xl, 0.75rem));
    box-shadow: inset 0 0 0 1px var(--border-command-palette-divider, var(--border-secondary)), var(--shadow-command-menu, var(--shadow-lg));
  }
  .command-menu__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
  }
  .command-menu--with-preview {
    max-width: var(--command-menu-width-preview, 800px);
  }
  .command-menu--flush {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
  .command-menu__preview-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1.25rem;
  }
  .command-menu__preview-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }
  .command-menu__preview-media {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    font-size: 2.5rem;
    line-height: 4rem;
    text-align: center;
    color: var(--text-command-palette-icon, var(--text-quaternary));
  }
  .command-menu__preview-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--text-command-palette, var(--text-primary));
  }
  .command-menu__preview-desc {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-command-palette-muted, var(--text-tertiary));
  }
  .command-menu__preview-actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.75rem;
  }
  @media (max-width: 767px) {
    .command-menu__body .command-palette__preview {
      display: none;
    }
    .command-menu--with-preview {
      max-width: var(--command-menu-width, 640px);
    }
  }
}
@layer utilities {
  .drawer {
    --drawer-size: 30rem;
    --drawer-radius: var(--radius-2xl);
    --drawer-surface: var(--bg-primary);
    --drawer-border: var(--border-default);
    --drawer-shadow: var(--shadow-2xl);
    --drawer-scrim: var(--bg-modal-overlay);
    --drawer-scrim-blur: 6px;
    --drawer-pad: 1.25rem;
    --drawer-focus: var(--border-focus);
    --drawer-duration: var(--duration-normal, 220ms);
    --drawer-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--drawer-duration) var(--drawer-ease), visibility 0s linear var(--drawer-duration);
  }
  .drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--drawer-duration) var(--drawer-ease), visibility 0s;
  }
  .drawer__scrim {
    position: absolute;
    inset: 0;
    background: var(--drawer-scrim);
    -webkit-backdrop-filter: blur(var(--drawer-scrim-blur));
    backdrop-filter: blur(var(--drawer-scrim-blur));
    opacity: 0;
    transition: opacity var(--drawer-duration) var(--drawer-ease);
  }
  .drawer.is-open .drawer__scrim {
    opacity: 1;
  }
  .drawer--no-scrim {
    pointer-events: none;
  }
  .drawer--no-scrim .drawer__scrim {
    display: none;
  }
  .drawer--no-scrim .drawer__panel {
    pointer-events: auto;
    box-shadow: var(--drawer-shadow);
  }
  .drawer__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--drawer-surface);
    box-shadow: var(--drawer-shadow);
    max-height: 100%;
    max-width: 100%;
    transition: transform var(--drawer-duration) var(--drawer-ease);
    will-change: transform;
  }
  .drawer {
    align-items: stretch;
    justify-content: flex-end;
  }
  .drawer__panel {
    width: var(--drawer-size);
    height: 100%;
    border-left: 1px solid var(--drawer-border);
    border-top-left-radius: var(--drawer-radius);
    border-bottom-left-radius: var(--drawer-radius);
    transform: translateX(100%);
  }
  .drawer.is-open .drawer__panel {
    transform: translateX(0);
  }
  .drawer--left {
    justify-content: flex-start;
  }
  .drawer--left .drawer__panel {
    border-left: 0;
    border-right: 1px solid var(--drawer-border);
    border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
    transform: translateX(-100%);
  }
  .drawer--left.is-open .drawer__panel {
    transform: translateX(0);
  }
  .drawer--top {
    align-items: flex-start;
    justify-content: stretch;
  }
  .drawer--top .drawer__panel {
    width: 100%;
    height: auto;
    max-height: 85%;
    border: 0;
    border-bottom: 1px solid var(--drawer-border);
    border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);
    transform: translateY(-100%);
  }
  .drawer--top.is-open .drawer__panel {
    transform: translateY(0);
  }
  .drawer--bottom {
    align-items: flex-end;
    justify-content: stretch;
  }
  .drawer--bottom .drawer__panel {
    width: 100%;
    height: auto;
    max-height: 85%;
    border: 0;
    border-top: 1px solid var(--drawer-border);
    border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;
    transform: translateY(100%);
  }
  .drawer--bottom.is-open .drawer__panel {
    transform: translateY(0);
  }
  .drawer--xs {
    --drawer-size: 20rem;
  }
  .drawer--sm {
    --drawer-size: 24rem;
  }
  .drawer--md {
    --drawer-size: 30rem;
  }
  .drawer--lg {
    --drawer-size: 38rem;
  }
  .drawer--xl {
    --drawer-size: 48rem;
  }
  .drawer--full .drawer__panel {
    width: 100%;
    border-radius: 0;
  }
  .drawer--top.drawer--xs .drawer__panel, .drawer--bottom.drawer--xs .drawer__panel {
    max-height: 40%;
  }
  .drawer--top.drawer--sm .drawer__panel, .drawer--bottom.drawer--sm .drawer__panel {
    max-height: 55%;
  }
  .drawer--rounded {
    padding: 0.75rem;
  }
  .drawer--rounded .drawer__panel {
    border-radius: var(--drawer-radius);
    border-width: 1px;
  }
  .drawer--glass .drawer__panel {
    background: var(--drawer-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--drawer-surface) 82%, transparent);
    }
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  .drawer__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: var(--drawer-pad);
    border-bottom: 1px solid var(--border-default);
    background: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }
  .drawer__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-size: 1rem;
  }
  .drawer__titles {
    min-width: 0;
    flex: 1 1 auto;
  }
  .drawer__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
  }
  .drawer__subtitle {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-tertiary);
  }
  .drawer__header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
  }
  .drawer__close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .drawer__close:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-secondary);
  }
  .drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--drawer-pad);
    color: var(--text-secondary);
    -webkit-overflow-scrolling: touch;
  }
  .drawer--flush .drawer__body {
    padding: 0;
  }
  .drawer__footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: var(--drawer-pad);
    border-top: 1px solid var(--border-default);
    background: inherit;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
  .drawer__footer--between {
    justify-content: space-between;
  }
  .drawer__close:focus-visible, .drawer__panel :focus-visible {
    outline: 2px solid var(--drawer-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .drawer.is-loading .drawer__panel {
    cursor: progress;
  }
  .drawer__loader {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    background: var(--drawer-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--drawer-surface) 60%, transparent);
    }
    border-radius: inherit;
  }
  .drawer.is-loading .drawer__loader {
    display: grid;
  }
  .drawer__spinner {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-default);
    border-top-color: var(--border-focus);
    animation: drawer-spin 0.7s linear infinite;
  }
  @keyframes drawer-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (max-width: 30rem) {
    .drawer:not(.drawer--top):not(.drawer--bottom) .drawer__panel {
      width: 100%;
    }
    .drawer--rounded {
      padding: 0;
    }
    .drawer--rounded .drawer__panel {
      border-radius: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .drawer, .drawer__scrim, .drawer__panel {
      transition-duration: 0.01ms;
    }
    .drawer__panel {
      transform: none !important;
    }
    .drawer__spinner {
      animation-duration: 1.5s;
    }
  }
}
@layer utilities {
  .confirm {
    --confirm-radius: var(--radius-2xl);
    --confirm-surface: var(--bg-primary);
    --confirm-shadow: var(--shadow-xl);
    --confirm-scrim: var(--bg-modal-overlay);
    --confirm-accent-bg: var(--bg-danger-subtle);
    --confirm-accent-fg: var(--text-danger);
    --confirm-focus: var(--border-focus);
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-normal, 200ms) var(--ease-out), visibility 0s linear 200ms;
  }
  .confirm.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--duration-normal, 200ms) var(--ease-out), visibility 0s;
  }
  .confirm.is-closing {
    opacity: 0;
    pointer-events: none;
  }
  .confirm__scrim {
    position: absolute;
    inset: 0;
    background: var(--confirm-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .confirm__dialog {
    position: relative;
    width: 100%;
    max-width: 25rem;
    background: var(--confirm-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--confirm-radius);
    box-shadow: var(--confirm-shadow);
    padding: 1.5rem;
    transform: translateY(0.5rem) scale(0.98);
    opacity: 0;
    transition: transform var(--duration-normal, 200ms) var(--ease-out), opacity var(--duration-normal, 200ms) var(--ease-out);
  }
  .confirm.is-open .confirm__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .confirm--sm .confirm__dialog {
    max-width: 22rem;
    padding: 1.25rem;
  }
  .confirm__featured {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: var(--confirm-accent-bg);
    color: var(--confirm-accent-fg);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 0 6px var(--confirm-accent-bg);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--confirm-accent-bg) 55%, transparent);
    }
  }
  .confirm--center .confirm__featured {
    margin-inline: auto;
  }
  .confirm--center .confirm__title, .confirm--center .confirm__body {
    text-align: center;
  }
  .confirm__title {
    margin: 0 0 0.375rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
  }
  .confirm__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-tertiary);
  }
  .confirm__footer {
    display: flex;
    gap: 0.625rem;
    margin-top: 1.5rem;
  }
  .confirm__footer > * {
    flex: 1 1 0;
    justify-content: center;
  }
  .confirm--start .confirm__footer {
    justify-content: flex-end;
  }
  .confirm--start .confirm__footer > * {
    flex: 0 0 auto;
  }
  .confirm--danger {
    --confirm-accent-bg: var(--bg-danger-subtle);
    --confirm-accent-fg: var(--text-danger);
  }
  .confirm--warning {
    --confirm-accent-bg: var(--bg-warning-subtle);
    --confirm-accent-fg: var(--text-warning);
  }
  .confirm--info {
    --confirm-accent-bg: var(--bg-info-subtle);
    --confirm-accent-fg: var(--text-info);
  }
  .confirm--success {
    --confirm-accent-bg: var(--bg-success-subtle);
    --confirm-accent-fg: var(--text-success);
  }
  .confirm.is-loading .confirm__footer button[data-confirm-go] {
    pointer-events: none;
    opacity: 0.75;
  }
  .confirm__dialog :focus-visible {
    outline: 2px solid var(--confirm-focus);
    outline-offset: 2px;
    border-radius: var(--radius-md);
  }
  @media (prefers-reduced-motion: reduce) {
    .confirm, .confirm__dialog {
      transition-duration: 0.01ms;
    }
    .confirm__dialog {
      transform: none !important;
    }
  }
}
@layer utilities {
  .scrim {
    --scrim-fill: var(--bg-modal-overlay);
    --scrim-blur: 0px;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--scrim-fill);
    -webkit-backdrop-filter: blur(var(--scrim-blur));
    backdrop-filter: blur(var(--scrim-blur));
    opacity: 0;
    transition: opacity var(--duration-normal, 200ms) var(--ease-out);
  }
  .scrim.is-shown, .scrim--static {
    opacity: 1;
  }
  .scrim--fixed {
    position: fixed;
    z-index: 60;
  }
  .scrim--dim {
    --scrim-fill: var(--bg-modal-overlay);
    --scrim-blur: 0px;
  }
  .scrim--blur {
    --scrim-fill: var(--alpha-black-20);
    --scrim-blur: 8px;
  }
  .scrim--frost {
    --scrim-fill: var(--bg-modal-overlay);
    --scrim-blur: 6px;
  }
  .scrim--tint-brand {
    --scrim-fill: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --scrim-fill: color-mix(in srgb, var(--bg-brand-solid) 32%, transparent);
    }
    --scrim-blur: 2px;
  }
  .scrim--tint-danger {
    --scrim-fill: var(--bg-danger-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --scrim-fill: color-mix(in srgb, var(--bg-danger-solid) 30%, transparent);
    }
    --scrim-blur: 2px;
  }
  .scrim--gradient-b {
    background: linear-gradient(to top, var(--alpha-black-70), transparent 65%);
  }
  .scrim--gradient-t {
    background: linear-gradient(to bottom, var(--alpha-black-70), transparent 65%);
  }
  .scrim--clear {
    --scrim-fill: transparent;
    --scrim-blur: 0px;
  }
  .scrim--soft {
    --scrim-fill: var(--alpha-black-20);
  }
  .scrim--strong {
    --scrim-fill: var(--alpha-black-70);
  }
  .scrim--interactive {
    pointer-events: none;
  }
  .scrim--gradient-b.scrim--soft, .scrim--gradient-t.scrim--soft {
    opacity: 0.6;
  }
  @media (prefers-reduced-motion: reduce) {
    .scrim {
      transition-duration: 0.01ms;
    }
  }
}
@layer utilities {
  .bottom-sheet {
    --bs-radius: var(--radius-2xl);
    --bs-surface: var(--bg-primary);
    --bs-border: var(--border-default);
    --bs-shadow: var(--shadow-2xl);
    --bs-scrim: var(--bg-modal-overlay);
    --bs-pad: 1.25rem;
    --bs-focus: var(--border-focus);
    --bs-height: 92vh;
    --bs-offset: 100%;
    --bs-duration: var(--duration-normal, 260ms);
    --bs-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--bs-duration) var(--bs-ease), visibility 0s linear var(--bs-duration);
  }
  .bottom-sheet.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--bs-duration) var(--bs-ease), visibility 0s;
  }
  .bottom-sheet__scrim {
    position: absolute;
    inset: 0;
    background: var(--bs-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--bs-duration) var(--bs-ease);
  }
  .bottom-sheet.is-open .bottom-sheet__scrim {
    opacity: 1;
  }
  .bottom-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 40rem;
    height: var(--bs-height);
    background: var(--bs-surface);
    border: 1px solid var(--bs-border);
    border-bottom: 0;
    border-top-left-radius: var(--bs-radius);
    border-top-right-radius: var(--bs-radius);
    box-shadow: var(--bs-shadow);
    transform: translateY(var(--bs-offset));
    transition: transform var(--bs-duration) var(--bs-ease);
    will-change: transform;
    touch-action: none;
  }
  .bottom-sheet.is-dragging .bottom-sheet__panel {
    transition: none;
  }
  .bottom-sheet--glass .bottom-sheet__panel {
    background: var(--bs-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--bs-surface) 82%, transparent);
    }
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  .bottom-sheet__grabber {
    flex: none;
    align-self: center;
    width: 2.25rem;
    height: 0.3125rem;
    margin: 0.625rem 0 0.25rem;
    border-radius: var(--radius-full);
    background: var(--bg-quaternary);
    cursor: grab;
  }
  .bottom-sheet.is-dragging .bottom-sheet__grabber {
    cursor: grabbing;
  }
  .bottom-sheet--no-grabber .bottom-sheet__grabber {
    display: none;
  }
  .bottom-sheet__header {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem var(--bs-pad) 0.75rem;
    border-bottom: 1px solid var(--border-default);
    cursor: grab;
  }
  .bottom-sheet.is-dragging .bottom-sheet__header {
    cursor: grabbing;
  }
  .bottom-sheet__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .bottom-sheet__header-actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
  }
  .bottom-sheet__close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
  }
  .bottom-sheet__close:hover {
    background: var(--bg-secondary-hover);
    color: var(--text-secondary);
  }
  .bottom-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--bs-pad);
    color: var(--text-secondary);
    -webkit-overflow-scrolling: touch;
  }
  .bottom-sheet--flush .bottom-sheet__body {
    padding: 0;
  }
  .bottom-sheet__footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: var(--bs-pad);
    border-top: 1px solid var(--border-default);
    padding-bottom: calc(var(--bs-pad) + env(safe-area-inset-bottom, 0px));
  }
  .bottom-sheet__panel :focus-visible, .bottom-sheet__grabber:focus-visible {
    outline: 2px solid var(--bs-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (min-width: 40rem) {
    .bottom-sheet__panel {
      margin: 0 auto;
      border-radius: var(--bs-radius);
      border-bottom: 1px solid var(--bs-border);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bottom-sheet, .bottom-sheet__scrim, .bottom-sheet__panel {
      transition-duration: 0.01ms;
    }
  }
}
@layer utilities {
  .hover-card {
    --hc-surface: var(--bg-primary);
    --hc-border: var(--border-default);
    --hc-radius: var(--radius-lg);
    --hc-shadow: var(--shadow-lg);
    --hc-width: 20rem;
    --hc-gap: 0.625rem;
    --hc-focus: var(--border-focus);
    --hc-duration: var(--duration-fast, 150ms);
    --hc-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
    position: relative;
    display: inline-flex;
  }
  .hover-card__panel {
    position: absolute;
    z-index: 60;
    width: var(--hc-width);
    max-width: min(92vw, 24rem);
    padding: 1rem;
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow);
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(0.25rem) scale(0.98);
    pointer-events: none;
    transition: opacity var(--hc-duration) var(--hc-ease), transform var(--hc-duration) var(--hc-ease);
  }
  .hover-card.is-open > .hover-card__panel, .hover-card:hover > .hover-card__panel, .hover-card:focus-within > .hover-card__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .hover-card:hover > .hover-card__panel {
    transition-delay: 350ms;
  }
  .hover-card.is-open > .hover-card__panel {
    transition-delay: 0s;
  }
  .hover-card__panel {
    top: calc(100% + var(--hc-gap));
    left: 50%;
    transform-origin: top center;
    translate: -50% 0;
  }
  .hover-card--top > .hover-card__panel {
    top: auto;
    bottom: calc(100% + var(--hc-gap));
    transform-origin: bottom center;
  }
  .hover-card--left > .hover-card__panel {
    top: 50%;
    left: auto;
    right: calc(100% + var(--hc-gap));
    translate: 0 -50%;
    transform-origin: center right;
  }
  .hover-card--right > .hover-card__panel {
    top: 50%;
    left: calc(100% + var(--hc-gap));
    translate: 0 -50%;
    transform-origin: center left;
  }
  .hover-card__arrow {
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    transform: rotate(45deg);
  }
  .hover-card:not(.hover-card--top):not(.hover-card--left):not(.hover-card--right) .hover-card__arrow {
    top: -0.34rem;
    left: 50%;
    margin-left: -0.3125rem;
    border-right: 0;
    border-bottom: 0;
  }
  .hover-card--top .hover-card__arrow {
    bottom: -0.34rem;
    left: 50%;
    margin-left: -0.3125rem;
    border-left: 0;
    border-top: 0;
  }
  .hover-card--left .hover-card__arrow {
    right: -0.34rem;
    top: 50%;
    margin-top: -0.3125rem;
    border-left: 0;
    border-bottom: 0;
  }
  .hover-card--right .hover-card__arrow {
    left: -0.34rem;
    top: 50%;
    margin-top: -0.3125rem;
    border-right: 0;
    border-top: 0;
  }
  .hover-card--sm {
    --hc-width: 16rem;
  }
  .hover-card--md {
    --hc-width: 20rem;
  }
  .hover-card--lg {
    --hc-width: 26rem;
  }
  .hover-card--soft {
    --hc-surface: var(--bg-secondary);
  }
  .hover-card--glass > .hover-card__panel {
    background: var(--hc-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hc-surface) 82%, transparent);
    }
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
  }
  .hover-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .hover-card__subtitle {
    margin: 0.0625rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .hover-card__body {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .hover-card__stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .hover-card__stat b {
    color: var(--text-primary);
  }
  .hover-card__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.875rem;
  }
  .hover-card__panel :focus-visible {
    outline: 2px solid var(--hc-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .hover-card__panel {
      transition-duration: 0.01ms;
      transform: none;
    }
    .hover-card:hover > .hover-card__panel {
      transition-delay: 0s;
    }
  }
}
@layer utilities {
  .action-sheet {
    --sheet-max: 28rem;
    --sheet-radius: var(--radius-2xl);
    --sheet-surface: var(--bg-primary);
    --sheet-border: var(--border-default);
    --sheet-shadow: var(--shadow-2xl);
    --sheet-scrim: var(--bg-modal-overlay);
    --sheet-scrim-blur: 6px;
    --sheet-gap: 0.5rem;
    --sheet-pad: 0.75rem;
    --sheet-item-pad-x: 1rem;
    --sheet-item-min-h: 3.25rem;
    --sheet-focus: var(--border-focus);
    --sheet-danger: var(--text-danger);
    --sheet-duration: var(--duration-normal, 220ms);
    --sheet-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sheet-duration) var(--sheet-ease), visibility 0s linear var(--sheet-duration);
  }
  .action-sheet.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--sheet-duration) var(--sheet-ease), visibility 0s;
  }
  .action-sheet__scrim {
    position: absolute;
    inset: 0;
    background: var(--sheet-scrim);
    -webkit-backdrop-filter: blur(var(--sheet-scrim-blur));
    backdrop-filter: blur(var(--sheet-scrim-blur));
    opacity: 0;
    transition: opacity var(--sheet-duration) var(--sheet-ease);
  }
  .action-sheet.is-open .action-sheet__scrim {
    opacity: 1;
  }
  .action-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sheet-gap);
    width: 100%;
    max-width: var(--sheet-max);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--sheet-pad);
    padding-bottom: calc(var(--sheet-pad) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform var(--sheet-duration) var(--sheet-ease);
    will-change: transform;
  }
  .action-sheet.is-open .action-sheet__panel {
    transform: translateY(0);
  }
  .action-sheet__group {
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--sheet-surface);
    border: 1px solid var(--sheet-border);
    border-radius: var(--sheet-radius);
    box-shadow: var(--sheet-shadow);
    overflow: hidden;
  }
  .action-sheet__header {
    padding: 0.875rem var(--sheet-item-pad-x) 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--sheet-border);
  }
  .action-sheet__header-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
  }
  .action-sheet__header-desc {
    margin: 0.1875rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-tertiary);
  }
  .action-sheet__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: var(--sheet-item-min-h);
    margin: 0;
    padding: 0.75rem var(--sheet-item-pad-x);
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .action-sheet__item + .action-sheet__item {
    border-top: 1px solid var(--sheet-border);
  }
  .action-sheet__item:hover {
    background: var(--bg-secondary-hover);
  }
  .action-sheet__item:active {
    background: var(--bg-active);
  }
  .action-sheet__item[disabled], .action-sheet__item[aria-disabled="true"] {
    color: var(--text-placeholder);
    cursor: not-allowed;
    pointer-events: none;
  }
  .action-sheet__item-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    font-size: 1rem;
    color: var(--text-tertiary);
  }
  .action-sheet__item-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
  }
  .action-sheet__item-desc {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-tertiary);
  }
  .action-sheet__item--danger, .action-sheet__item--danger .action-sheet__item-icon {
    color: var(--sheet-danger);
  }
  .action-sheet__item--danger:hover {
    background: var(--bg-danger-subtle);
  }
  .action-sheet__cancel .action-sheet__item {
    justify-content: center;
    font-weight: 600;
    color: var(--text-primary);
  }
  .action-sheet__cancel .action-sheet__item-label {
    flex: none;
  }
  .action-sheet--sm {
    --sheet-max: 22rem;
  }
  .action-sheet__item:focus-visible {
    outline: 2px solid var(--sheet-focus);
    outline-offset: -2px;
  }
  .action-sheet__panel a:focus-visible, .action-sheet__panel input:focus-visible, .action-sheet__panel [tabindex]:focus-visible {
    outline: 2px solid var(--sheet-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (max-width: 30rem) {
    .action-sheet__panel {
      max-width: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .action-sheet, .action-sheet__scrim, .action-sheet__panel {
      transition-duration: 0.01ms;
    }
    .action-sheet__panel {
      transform: none !important;
    }
  }
}
@layer utilities {
  .popconfirm {
    --popconfirm-width: 16rem;
    --popconfirm-surface: var(--bg-primary);
    --popconfirm-border: var(--border-default);
    --popconfirm-radius: var(--radius-lg);
    --popconfirm-shadow: var(--shadow-lg);
    --popconfirm-pad: 0.875rem;
    --popconfirm-gap: 0.625rem;
    --popconfirm-arrow-size: 0.5rem;
    --popconfirm-arrow-radius: var(--radius-xs);
    --popconfirm-icon-bg: var(--bg-tertiary);
    --popconfirm-icon-fg: var(--text-tertiary);
    --popconfirm-focus: var(--border-focus);
    --popconfirm-duration: var(--duration-fast, 150ms);
    --popconfirm-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
    position: relative;
    display: inline-flex;
  }
  .popconfirm__bubble {
    position: absolute;
    z-index: 50;
    width: var(--popconfirm-width);
    max-width: calc(100vw - 2rem);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.625rem;
    align-items: start;
    padding: var(--popconfirm-pad);
    background: var(--popconfirm-surface);
    border: 1px solid var(--popconfirm-border);
    border-radius: var(--popconfirm-radius);
    box-shadow: var(--popconfirm-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--popconfirm-duration) var(--popconfirm-ease), transform var(--popconfirm-duration) var(--popconfirm-ease), visibility 0s linear var(--popconfirm-duration);
    bottom: calc(100% + var(--popconfirm-gap));
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) scale(0.96);
  }
  .popconfirm__bubble.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
    transition: opacity var(--popconfirm-duration) var(--popconfirm-ease), transform var(--popconfirm-duration) var(--popconfirm-ease), visibility 0s;
  }
  .popconfirm__arrow {
    position: absolute;
    width: var(--popconfirm-arrow-size);
    height: var(--popconfirm-arrow-size);
    background: var(--popconfirm-surface);
    border: 0 solid var(--popconfirm-border);
    transform: rotate(45deg);
    pointer-events: none;
  }
  .popconfirm__arrow {
    bottom: calc(var(--popconfirm-arrow-size) / -2);
    left: 50%;
    margin-left: calc(var(--popconfirm-arrow-size) / -2);
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-bottom-right-radius: var(--popconfirm-arrow-radius);
  }
  .popconfirm--bottom .popconfirm__bubble {
    top: calc(100% + var(--popconfirm-gap));
    bottom: auto;
    transform-origin: top center;
  }
  .popconfirm--bottom .popconfirm__arrow {
    top: calc(var(--popconfirm-arrow-size) / -2);
    bottom: auto;
    left: 50%;
    margin-left: calc(var(--popconfirm-arrow-size) / -2);
    border-width: 0;
    border-top-width: 1px;
    border-left-width: 1px;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--popconfirm-arrow-radius);
  }
  .popconfirm--left .popconfirm__bubble {
    right: calc(100% + var(--popconfirm-gap));
    left: auto;
    bottom: auto;
    top: 50%;
    transform-origin: right center;
    transform: translateY(-50%) scale(0.96);
  }
  .popconfirm--left .popconfirm__bubble.is-open {
    transform: translateY(-50%) scale(1);
  }
  .popconfirm--left .popconfirm__arrow {
    right: calc(var(--popconfirm-arrow-size) / -2);
    left: auto;
    bottom: auto;
    top: 50%;
    margin-left: 0;
    margin-top: calc(var(--popconfirm-arrow-size) / -2);
    border-width: 0;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-right-radius: 0;
    border-top-right-radius: var(--popconfirm-arrow-radius);
  }
  .popconfirm--right .popconfirm__bubble {
    left: calc(100% + var(--popconfirm-gap));
    right: auto;
    bottom: auto;
    top: 50%;
    transform-origin: left center;
    transform: translateY(-50%) scale(0.96);
  }
  .popconfirm--right .popconfirm__bubble.is-open {
    transform: translateY(-50%) scale(1);
  }
  .popconfirm--right .popconfirm__arrow {
    left: calc(var(--popconfirm-arrow-size) / -2);
    right: auto;
    bottom: auto;
    top: 50%;
    margin-left: 0;
    margin-top: calc(var(--popconfirm-arrow-size) / -2);
    border-width: 0;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--popconfirm-arrow-radius);
  }
  .popconfirm__icon {
    grid-column: 1;
    grid-row: 1;
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--popconfirm-icon-bg);
    color: var(--popconfirm-icon-fg);
    font-size: 0.8125rem;
  }
  .popconfirm__message {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .popconfirm__bubble:not(:has(.popconfirm__icon)) .popconfirm__message {
    grid-column: 1 / -1;
  }
  .popconfirm__error {
    grid-column: 1 / -1;
    display: none;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-danger);
  }
  .popconfirm__bubble.is-error .popconfirm__error {
    display: block;
  }
  .popconfirm__actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.375rem;
  }
  .popconfirm--danger {
    --popconfirm-icon-bg: var(--bg-danger-subtle);
    --popconfirm-icon-fg: var(--text-danger);
  }
  .popconfirm--warning {
    --popconfirm-icon-bg: var(--bg-warning-subtle);
    --popconfirm-icon-fg: var(--text-warning);
  }
  .popconfirm__bubble.is-loading [data-popconfirm-confirm] {
    pointer-events: none;
    opacity: 0.7;
  }
  .popconfirm__bubble.is-loading [data-popconfirm-cancel] {
    pointer-events: none;
    opacity: 0.7;
  }
  .popconfirm__spinner {
    display: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-default);
    border-top-color: var(--border-focus);
    animation: popconfirm-spin 0.7s linear infinite;
  }
  .popconfirm__bubble.is-loading .popconfirm__spinner {
    display: inline-block;
  }
  @keyframes popconfirm-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .popconfirm__bubble :focus-visible {
    outline: 2px solid var(--popconfirm-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (max-width: 22rem) {
    .popconfirm__bubble {
      width: min(var(--popconfirm-width), calc(100vw - 1.5rem));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .popconfirm__bubble {
      transition-duration: 0.01ms;
    }
    .popconfirm__spinner {
      animation-duration: 1.5s;
    }
  }
}
@layer utilities {
  .speed-dial {
    --sd-fab-size: 3.5rem;
    --sd-action-size: 2.75rem;
    --sd-gap: 0.875rem;
    --sd-fab-bg: var(--bg-brand-solid);
    --sd-fab-bg-hover: var(--bg-brand-solid-hover);
    --sd-fab-bg-active: var(--bg-brand-solid-active);
    --sd-fab-fg: var(--text-on-brand);
    --sd-fab-shadow: var(--shadow-lg);
    --sd-fab-shadow-hover: var(--shadow-xl);
    --sd-action-bg: var(--bg-primary);
    --sd-action-bg-hover: var(--bg-primary-hover);
    --sd-action-fg: var(--text-secondary);
    --sd-action-border: var(--border-default);
    --sd-action-shadow: var(--shadow-md);
    --sd-label-bg: var(--bg-primary);
    --sd-label-fg: var(--text-primary);
    --sd-label-border: var(--border-default);
    --sd-label-shadow: var(--shadow-sm);
    --sd-focus: var(--border-focus);
    --sd-radius: var(--radius-full);
    --sd-label-radius: var(--radius-md);
    --sd-duration: var(--duration-normal, 220ms);
    --sd-duration-fast: var(--duration-fast, 140ms);
    --sd-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
    --sd-ease-bounce: var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
    --sd-stagger: 40ms;
    position: relative;
    display: inline-flex;
    width: var(--sd-fab-size);
    height: var(--sd-fab-size);
    z-index: 40;
  }
  .speed-dial.is-open {
    z-index: 60;
  }
  .speed-dial__catcher {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: none;
    background: transparent;
    border: 0;
    cursor: default;
  }
  .speed-dial.is-open .speed-dial__catcher {
    display: block;
  }
  .speed-dial__fab {
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: var(--sd-fab-size);
    height: var(--sd-fab-size);
    padding: 0;
    border: 0;
    border-radius: var(--sd-radius);
    background: var(--sd-fab-bg);
    color: var(--sd-fab-fg);
    box-shadow: var(--sd-fab-shadow);
    font-size: calc(var(--sd-fab-size) * 0.36);
    line-height: 1;
    cursor: pointer;
    transition: background var(--sd-duration-fast) var(--sd-ease), box-shadow var(--sd-duration-fast) var(--sd-ease), transform var(--sd-duration-fast) var(--sd-ease);
  }
  .speed-dial__fab:hover {
    background: var(--sd-fab-bg-hover);
    box-shadow: var(--sd-fab-shadow-hover);
  }
  .speed-dial__fab:active {
    background: var(--sd-fab-bg-active);
    transform: scale(0.96);
  }
  .speed-dial__fab-icon {
    display: block;
    transition: transform var(--sd-duration) var(--sd-ease-bounce);
  }
  .speed-dial.is-open .speed-dial__fab-icon {
    transform: rotate(45deg);
  }
  .speed-dial__menu {
    position: absolute;
    z-index: 2;
    display: flex;
    gap: var(--sd-gap);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sd-duration-fast) var(--sd-ease), visibility 0s linear var(--sd-duration-fast);
  }
  .speed-dial.is-open .speed-dial__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--sd-duration-fast) var(--sd-ease), visibility 0s;
  }
  .speed-dial__menu {
    left: 50%;
    bottom: calc(100% + var(--sd-gap));
    transform: translateX(-50%);
    flex-direction: column-reverse;
    align-items: center;
  }
  .speed-dial--down .speed-dial__menu {
    bottom: auto;
    top: calc(100% + var(--sd-gap));
    flex-direction: column;
  }
  .speed-dial--left .speed-dial__menu {
    left: auto;
    bottom: auto;
    right: calc(100% + var(--sd-gap));
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row-reverse;
    align-items: center;
  }
  .speed-dial--right .speed-dial__menu {
    left: calc(100% + var(--sd-gap));
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row;
    align-items: center;
  }
  .speed-dial__action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-action-size);
    height: var(--sd-action-size);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity var(--sd-duration-fast) var(--sd-ease), transform var(--sd-duration-fast) var(--sd-ease-bounce);
  }
  .speed-dial.is-open .speed-dial__action {
    opacity: 1;
    transform: scale(1);
  }
  .speed-dial.is-open .speed-dial__action:nth-child(1) {
    transition-delay: calc(var(--sd-stagger) * 0);
  }
  .speed-dial.is-open .speed-dial__action:nth-child(2) {
    transition-delay: calc(var(--sd-stagger) * 1);
  }
  .speed-dial.is-open .speed-dial__action:nth-child(3) {
    transition-delay: calc(var(--sd-stagger) * 2);
  }
  .speed-dial.is-open .speed-dial__action:nth-child(4) {
    transition-delay: calc(var(--sd-stagger) * 3);
  }
  .speed-dial.is-open .speed-dial__action:nth-child(5) {
    transition-delay: calc(var(--sd-stagger) * 4);
  }
  .speed-dial.is-open .speed-dial__action:nth-child(6) {
    transition-delay: calc(var(--sd-stagger) * 5);
  }
  .speed-dial__action-btn {
    display: inline-grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 1px solid var(--sd-action-border);
    border-radius: var(--sd-radius);
    background: var(--sd-action-bg);
    color: var(--sd-action-fg);
    box-shadow: var(--sd-action-shadow);
    font-size: calc(var(--sd-action-size) * 0.4);
    line-height: 1;
    cursor: pointer;
    transition: background var(--sd-duration-fast) var(--sd-ease), border-color var(--sd-duration-fast) var(--sd-ease), transform var(--sd-duration-fast) var(--sd-ease);
  }
  .speed-dial__action-btn:hover {
    background: var(--sd-action-bg-hover);
    transform: scale(1.06);
  }
  .speed-dial__action-btn:active {
    transform: scale(0.94);
  }
  .speed-dial__action-btn:disabled, .speed-dial__action-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
  .speed-dial__action-label {
    position: absolute;
    z-index: 1;
    white-space: nowrap;
    padding: 0.3125rem 0.625rem;
    border: 1px solid var(--sd-label-border);
    border-radius: var(--sd-label-radius);
    background: var(--sd-label-bg);
    color: var(--sd-label-fg);
    box-shadow: var(--sd-label-shadow);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    right: calc(100% + 0.625rem);
    top: 50%;
    transform: translateY(-50%) scale(0.92);
    transition: opacity var(--sd-duration-fast) var(--sd-ease), transform var(--sd-duration-fast) var(--sd-ease);
  }
  .speed-dial__action:hover .speed-dial__action-label, .speed-dial__action:focus-within .speed-dial__action-label {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .speed-dial--left .speed-dial__action-label, .speed-dial--right .speed-dial__action-label {
    right: auto;
    top: auto;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) scale(0.92);
  }
  .speed-dial--left .speed-dial__action:hover .speed-dial__action-label, .speed-dial--left .speed-dial__action:focus-within .speed-dial__action-label, .speed-dial--right .speed-dial__action:hover .speed-dial__action-label, .speed-dial--right .speed-dial__action:focus-within .speed-dial__action-label {
    transform: translateX(-50%) scale(1);
  }
  .speed-dial--sm {
    --sd-fab-size: 3rem;
    --sd-action-size: 2.5rem;
  }
  .speed-dial--md {
    --sd-fab-size: 3.5rem;
    --sd-action-size: 2.75rem;
  }
  .speed-dial--lg {
    --sd-fab-size: 4rem;
    --sd-action-size: 3rem;
  }
  .speed-dial__action--danger {
    --sd-action-fg: var(--text-danger);
  }
  .speed-dial__action--warning {
    --sd-action-fg: var(--text-warning);
  }
  .speed-dial__action--info {
    --sd-action-fg: var(--text-info);
  }
  .speed-dial__action--success {
    --sd-action-fg: var(--text-success);
  }
  .speed-dial__fab:focus-visible, .speed-dial__action-btn:focus-visible {
    outline: 2px solid var(--sd-focus);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .speed-dial__fab-icon {
      transition-duration: 0.01ms;
    }
    .speed-dial.is-open .speed-dial__fab-icon {
      transform: none;
    }
    .speed-dial__action {
      transition-duration: 0.01ms;
      transform: none;
    }
    .speed-dial.is-open .speed-dial__action {
      transform: none;
    }
    .speed-dial.is-open .speed-dial__action:nth-child(1), .speed-dial.is-open .speed-dial__action:nth-child(2), .speed-dial.is-open .speed-dial__action:nth-child(3), .speed-dial.is-open .speed-dial__action:nth-child(4), .speed-dial.is-open .speed-dial__action:nth-child(5), .speed-dial.is-open .speed-dial__action:nth-child(6) {
      transition-delay: 0ms;
    }
    .speed-dial__menu {
      transition-duration: 0.01ms;
    }
    .speed-dial__action-label {
      transition-duration: 0.01ms;
    }
  }
}
@layer utilities {
  .audio-player {
    --ap-surface: var(--bg-primary);
    --ap-border: var(--border-default);
    --ap-radius: var(--radius-xl);
    --ap-track: var(--bg-tertiary);
    --ap-buffered: var(--bg-quaternary);
    --ap-fill: var(--bg-brand-solid);
    --ap-thumb: var(--bg-brand-solid);
    --ap-fg: var(--text-primary);
    --ap-muted: var(--text-tertiary);
    --ap-focus: var(--border-focus);
    --ap-progress: 0%;
    --ap-buffered-pct: 0%;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--shadow-xs);
    color: var(--ap-fg);
    min-width: 0;
  }
  .audio-player__audio {
    display: none;
  }
  .audio-player:not(.is-enhanced) .audio-player__audio {
    display: block;
    width: 100%;
  }
  .audio-player__btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ap-fg);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .audio-player__btn:hover {
    background: var(--bg-secondary-hover);
  }
  .audio-player__btn--play {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .audio-player__btn--play:hover {
    background: var(--bg-brand-solid-hover);
  }
  .audio-player__glyph--pause {
    display: none;
  }
  .audio-player.is-playing .audio-player__glyph--play {
    display: none;
  }
  .audio-player.is-playing .audio-player__glyph--pause {
    display: inline;
  }
  .audio-player__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .audio-player__meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
  }
  .audio-player__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ap-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .audio-player__artist {
    font-size: 0.75rem;
    color: var(--ap-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .audio-player__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .audio-player__scrubber {
    position: relative;
    flex: 1 1 auto;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--ap-track);
    cursor: pointer;
    touch-action: none;
  }
  .audio-player__buffered {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--ap-buffered-pct);
    background: var(--ap-buffered);
    border-radius: inherit;
  }
  .audio-player__played {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--ap-progress);
    background: var(--ap-fill);
    border-radius: inherit;
  }
  .audio-player__thumb {
    position: absolute;
    top: 50%;
    left: var(--ap-progress);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-full);
    background: var(--ap-thumb);
    box-shadow: 0 0 0 3px var(--ap-surface);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .audio-player__scrubber:hover .audio-player__thumb, .audio-player__scrubber:focus-visible .audio-player__thumb, .audio-player.is-playing .audio-player__thumb {
    opacity: 1;
  }
  .audio-player__time {
    flex: none;
    font-size: 0.75rem;
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
  }
  .audio-player__wave {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 2rem;
    cursor: pointer;
    touch-action: none;
  }
  .audio-player__wave-bar {
    flex: 1 1 auto;
    height: var(--h, 40%);
    min-height: 3px;
    border-radius: var(--radius-full);
    background: var(--ap-track);
  }
  .audio-player__wave-fill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    width: var(--ap-progress);
    overflow: hidden;
    pointer-events: none;
  }
  .audio-player__wave-fill .audio-player__wave-bar {
    background: var(--ap-fill);
  }
  .audio-player__volume {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }
  .audio-player__volume input[type="range"] {
    width: 4.5rem;
    accent-color: var(--ap-fill);
  }
  .audio-player.is-muted .audio-player__glyph--vol {
    display: none;
  }
  .audio-player__glyph--mute {
    display: none;
  }
  .audio-player.is-muted .audio-player__glyph--mute {
    display: inline;
  }
  .audio-player__speed {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
  }
  .audio-player--card {
    align-items: center;
  }
  .audio-player__art {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background: var(--bg-tertiary);
  }
  .audio-player--mini {
    padding: 0.375rem 0.5rem;
    gap: 0.5rem;
  }
  .audio-player--mini .audio-player__btn {
    width: 2rem;
    height: 2rem;
  }
  .audio-player--sm {
    padding: 0.5rem 0.75rem;
  }
  .audio-player--sm .audio-player__btn {
    width: 2rem;
    height: 2rem;
  }
  .audio-player--lg {
    padding: 1rem 1.25rem;
    gap: 1rem;
  }
  .audio-player--lg .audio-player__btn {
    width: 2.75rem;
    height: 2.75rem;
  }
  .audio-player__playlist {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--border-default);
  }
  .audio-player__track {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .audio-player__track:hover {
    background: var(--bg-secondary-hover);
  }
  .audio-player__track.is-current {
    color: var(--text-primary);
    font-weight: 600;
  }
  .audio-player__track.is-current .audio-player__track-index {
    color: var(--text-brand, var(--text-info));
  }
  .audio-player__track-index {
    flex: none;
    width: 1.25rem;
    text-align: center;
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
  }
  .audio-player__track-dur {
    margin-left: auto;
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
  }
  .audio-player.is-loading .audio-player__btn--play {
    position: relative;
    color: transparent;
  }
  .audio-player.is-loading .audio-player__btn--play::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--alpha-white-40);
    border-top-color: var(--text-on-brand);
    animation: ap-spin 0.7s linear infinite;
  }
  .audio-player.is-error .audio-player__title {
    color: var(--text-danger);
  }
  @keyframes ap-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .audio-player :focus-visible {
    outline: 2px solid var(--ap-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .audio-player__btn--play:focus-visible {
    outline-offset: 3px;
  }
  @media (max-width: 30rem) {
    .audio-player__volume input[type="range"], .audio-player__speed {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .audio-player__thumb, .audio-player__btn {
      transition-duration: 0.01ms;
    }
    .audio-player.is-loading .audio-player__btn--play::after {
      animation-duration: 1.5s;
    }
  }
}
@layer utilities {
  .file-preview {
    --fp-accent: var(--text-tertiary);
    --fp-accent-bg: var(--bg-tertiary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    min-width: 0;
  }
  .file-preview__thumb {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--fp-accent-bg);
    color: var(--fp-accent);
  }
  .file-preview__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .file-preview__glyph {
    font-size: 1.125rem;
  }
  .file-preview__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1px 2px;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-on-brand);
    background: var(--fp-accent);
  }
  .file-preview__info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .file-preview__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .file-preview__meta {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .file-preview__meta > * + *::before {
    content: "·";
    margin: 0 0.375rem;
  }
  .file-preview__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }
  .file-preview__progress {
    width: 100%;
    height: 0.25rem;
    margin-top: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    overflow: hidden;
  }
  .file-preview__progress-fill {
    height: 100%;
    width: var(--fp-progress, 0%);
    background: var(--bg-brand-solid);
    border-radius: inherit;
    transition: width var(--duration-normal) var(--ease-out);
  }
  .file-preview:not(.is-loading) .file-preview__progress {
    display: none;
  }
  .file-preview[data-file-type="pdf"] {
    --fp-accent: var(--text-danger);
    --fp-accent-bg: var(--bg-danger-subtle);
  }
  .file-preview[data-file-type="doc"] {
    --fp-accent: var(--text-info);
    --fp-accent-bg: var(--bg-info-subtle);
  }
  .file-preview[data-file-type="sheet"] {
    --fp-accent: var(--text-success);
    --fp-accent-bg: var(--bg-success-subtle);
  }
  .file-preview[data-file-type="slides"] {
    --fp-accent: var(--text-warning);
    --fp-accent-bg: var(--bg-warning-subtle);
  }
  .file-preview[data-file-type="zip"] {
    --fp-accent: var(--text-tertiary);
    --fp-accent-bg: var(--bg-tertiary);
  }
  .file-preview[data-file-type="audio"] {
    --fp-accent: var(--text-info);
    --fp-accent-bg: var(--bg-info-subtle);
  }
  .file-preview[data-file-type="video"] {
    --fp-accent: var(--text-danger);
    --fp-accent-bg: var(--bg-danger-subtle);
  }
  .file-preview[data-file-type="code"] {
    --fp-accent: var(--text-info);
    --fp-accent-bg: var(--bg-info-subtle);
  }
  .file-preview[data-file-type="image"] {
    --fp-accent: var(--text-info);
    --fp-accent-bg: var(--bg-info-subtle);
  }
  .file-preview--tile {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem;
    text-align: center;
  }
  .file-preview--tile .file-preview__thumb {
    width: 100%;
    height: 6rem;
    border-radius: var(--radius-md);
  }
  .file-preview--tile .file-preview__glyph {
    font-size: 1.75rem;
  }
  .file-preview--tile .file-preview__info {
    text-align: left;
  }
  .file-preview--tile .file-preview__actions {
    justify-content: flex-end;
  }
  .file-preview--inline {
    display: inline-flex;
    padding: 0.25rem 0.5rem 0.25rem 0.375rem;
    border-radius: var(--radius-full);
    box-shadow: none;
  }
  .file-preview--inline .file-preview__thumb {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
  }
  .file-preview--inline .file-preview__glyph {
    font-size: 0.75rem;
  }
  .file-preview--inline .file-preview__meta {
    display: none;
  }
  .file-preview--sm {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .file-preview--sm .file-preview__thumb {
    width: 2rem;
    height: 2rem;
  }
  .file-preview--lg .file-preview__thumb {
    width: 3rem;
    height: 3rem;
  }
  .file-preview.is-selected {
    border-color: var(--border-brand);
    box-shadow: 0 0 0 1px var(--border-brand);
  }
  .file-preview.is-error .file-preview__name {
    color: var(--text-danger);
  }
  .file-preview[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
  }
  .file-preview :focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .file-preview__progress-fill {
      transition-duration: 0.01ms;
    }
  }
}
@layer utilities {
  .figure {
    --fig-media-bg: var(--bg-secondary);
    --fig-media-radius: var(--radius-lg);
    --fig-border: var(--border-default);
    --fig-caption: var(--text-tertiary);
    --fig-credit: var(--text-tertiary);
    --fig-mat: var(--bg-secondary);
    --fig-placeholder: var(--text-tertiary);
    --fig-shimmer-from: var(--bg-tertiary);
    --fig-shimmer-to: var(--bg-secondary);
    --fig-focus: var(--border-focus);
    --fig-bleed: 2rem;
    display: block;
    margin-block: 1.5rem;
    min-width: 0;
  }
  .figure__media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fig-border);
    border-radius: var(--fig-media-radius);
    background: var(--fig-media-bg);
  }
  .figure__media > img, .figure__media > video, .figure__media > iframe, .figure__media > picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .figure__media > iframe {
    border: 0;
  }
  .figure__caption {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--fig-caption);
    text-align: left;
  }
  .figure__credit {
    color: var(--fig-credit);
    font-weight: 600;
  }
  .figure__credit::before {
    content: "·";
    margin: 0 0.375rem;
    font-weight: 400;
  }
  .figure--16-9 .figure__media {
    aspect-ratio: 16 / 9;
  }
  .figure--4-3 .figure__media {
    aspect-ratio: 4 / 3;
  }
  .figure--3-2 .figure__media {
    aspect-ratio: 3 / 2;
  }
  .figure--1-1 .figure__media {
    aspect-ratio: 1 / 1;
  }
  .figure--caption-center .figure__caption {
    text-align: center;
  }
  .figure--wide {
    margin-inline: calc(-1 * var(--fig-bleed));
  }
  .figure--full {
    margin-inline: calc(-1 * var(--fig-bleed) - 0.5rem);
  }
  .figure--center {
    margin-inline: auto;
    max-width: 42rem;
  }
  .figure--float-left, .figure--float-right {
    max-width: min(50%, 20rem);
    margin-block: 0.25rem 1rem;
  }
  .figure--float-left {
    float: left;
    margin-inline: 0 1.5rem;
  }
  .figure--float-right {
    float: right;
    margin-inline: 1.5rem 0;
  }
  .figure--framed .figure__media {
    padding: 0.75rem;
    background: var(--fig-mat);
  }
  .figure--framed .figure__media > img, .figure--framed .figure__media > video, .figure--framed .figure__media > iframe, .figure--framed .figure__media > picture {
    border-radius: var(--radius-md);
  }
  .figure--plain .figure__media {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .figure__media--empty {
    display: grid;
    place-items: center;
    min-height: 10rem;
    color: var(--fig-placeholder);
    background: var(--fig-mat);
  }
  .figure__media--empty > i, .figure__media--empty > .figure__placeholder {
    font-size: 1.75rem;
    color: var(--fig-placeholder);
  }
  .figure.is-loading .figure__media {
    min-height: 10rem;
    background-image: linear-gradient( 90deg, var(--fig-shimmer-from) 25%, var(--fig-shimmer-to) 37%, var(--fig-shimmer-from) 63% );
    background-size: 200% 100%;
    animation: figure-shimmer 1.5s var(--ease-out) infinite;
  }
  .figure.is-loading .figure__media > * {
    visibility: hidden;
  }
  @keyframes figure-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .figure :focus-visible {
    outline: 2px solid var(--fig-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .figure.is-loading .figure__media {
      animation: none;
    }
  }
}
@layer utilities {
  .attachment-list {
    --al-surface: var(--bg-primary);
    --al-border: var(--border-default);
    --al-radius: var(--radius-xl);
    --al-band: var(--bg-secondary-subtle);
    --al-fg: var(--text-primary);
    --al-muted: var(--text-tertiary);
    --al-track: var(--bg-tertiary);
    --al-fill: var(--bg-brand-solid);
    --al-focus: var(--border-focus);
    --al-progress: 0%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--al-surface);
    border: 1px solid var(--al-border);
    border-radius: var(--al-radius);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    color: var(--al-fg);
  }
  .attachment-list__header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--al-band);
    border-bottom: 1px solid var(--al-border);
  }
  .attachment-list__heading {
    min-width: 0;
  }
  .attachment-list__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--al-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .attachment-list__count {
    font-size: 0.75rem;
    color: var(--al-muted);
    font-variant-numeric: tabular-nums;
  }
  .attachment-list__count > * + *::before {
    content: "·";
    margin: 0 0.375rem;
  }
  .attachment-list__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }
  .attachment-list__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0;
    list-style: none;
  }
  .attachment-list--grid .attachment-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
  }
  .attachment-list__items .file-preview.is-removing {
    animation: al-remove var(--duration-normal) var(--ease-out) forwards;
    pointer-events: none;
  }
  @keyframes al-remove {
    to {
      opacity: 0;
      transform: translateX(0.5rem);
    }
  }
  .attachment-list__empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--al-muted);
  }
  .attachment-list__empty-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: 1.125rem;
  }
  .attachment-list__empty-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .attachment-list__empty-text {
    font-size: 0.75rem;
    color: var(--al-muted);
  }
  .attachment-list.is-empty .attachment-list__items, .attachment-list.is-empty .attachment-list__footer {
    display: none;
  }
  .attachment-list.is-empty .attachment-list__empty {
    display: flex;
  }
  .attachment-list__footer {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 1rem 0.75rem;
    background: var(--al-band);
    border-top: 1px solid var(--al-border);
  }
  .attachment-list__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .attachment-list__status {
    font-size: 0.75rem;
    color: var(--al-muted);
    font-variant-numeric: tabular-nums;
  }
  .attachment-list__percent {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .attachment-list__progress {
    height: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--al-track);
    overflow: hidden;
  }
  .attachment-list__progress-fill {
    height: 100%;
    width: var(--al-progress, 0%);
    background: var(--al-fill);
    border-radius: inherit;
    transition: width var(--duration-normal) var(--ease-out);
  }
  .attachment-list__footer.is-error .attachment-list__status {
    color: var(--text-danger);
  }
  .attachment-list__footer.is-error .attachment-list__progress-fill {
    background: var(--bg-danger-solid);
  }
  .attachment-list :focus-visible {
    outline: 2px solid var(--al-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (max-width: 30rem) {
    .attachment-list__header {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }
    .attachment-list__actions {
      justify-content: flex-end;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .attachment-list__items .file-preview.is-removing {
      animation-duration: 0.01ms;
    }
    .attachment-list__progress-fill {
      transition-duration: 0.01ms;
    }
  }
}
@layer utilities {
  .cover-media {
    --cover-bg: var(--bg-secondary);
    --cover-radius: var(--radius-2xl);
    --cover-scrim-from: var(--alpha-black-80);
    --cover-scrim-mid: var(--alpha-black-40);
    --cover-solid: var(--alpha-black-60);
    --cover-eyebrow: var(--alpha-white-80);
    --cover-title: var(--alpha-white-100);
    --cover-subtitle: var(--alpha-white-90);
    --cover-text-shadow: var(--alpha-black-40);
    --cover-placeholder: var(--text-tertiary);
    --cover-shimmer-from: var(--bg-tertiary);
    --cover-shimmer-to: var(--bg-secondary);
    --cover-focus: var(--border-focus);
    --cover-zoom: 1.04;
    --cover-pad: clamp(1rem, 4%, 2rem);
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    min-width: 0;
    aspect-ratio: 21 / 9;
    border-radius: var(--cover-radius);
    background: var(--cover-bg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-out);
  }
  .cover-media:hover {
    box-shadow: var(--shadow-md);
  }
  .cover-media__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform var(--duration-normal) var(--ease-out);
  }
  .cover-media:not(.cover-media--ken-burns):hover .cover-media__img {
    transform: scale(var(--cover-zoom));
  }
  .cover-media__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient( to top, var(--cover-scrim-from) 0%, var(--cover-scrim-mid) 38%, transparent 72% );
  }
  .cover-media__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.5rem;
    padding: var(--cover-pad);
  }
  .cover-media__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cover-eyebrow);
    text-shadow: 0 1px 2px var(--cover-text-shadow);
  }
  .cover-media__title {
    margin: 0;
    font-size: clamp(1.25rem, 1rem + 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cover-title);
    text-wrap: balance;
    text-shadow: 0 1px 3px var(--cover-text-shadow);
  }
  .cover-media__subtitle {
    margin: 0;
    max-width: 48ch;
    font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
    line-height: 1.45;
    color: var(--cover-subtitle);
    text-shadow: 0 1px 2px var(--cover-text-shadow);
  }
  .cover-media__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.375rem;
  }
  .cover-media--21-9 {
    aspect-ratio: 21 / 9;
  }
  .cover-media--16-9 {
    aspect-ratio: 16 / 9;
  }
  .cover-media--3-1 {
    aspect-ratio: 3 / 1;
  }
  .cover-media--4-1 {
    aspect-ratio: 4 / 1;
  }
  .cover-media--h-sm {
    aspect-ratio: auto;
    height: 12rem;
  }
  .cover-media--h-md {
    aspect-ratio: auto;
    height: 18rem;
  }
  .cover-media--h-lg {
    aspect-ratio: auto;
    height: 26rem;
  }
  .cover-media--center .cover-media__content {
    justify-content: center;
  }
  .cover-media--top .cover-media__content {
    justify-content: flex-start;
  }
  .cover-media--center-x .cover-media__content {
    align-items: center;
    text-align: center;
  }
  .cover-media--center-x .cover-media__subtitle {
    margin-inline: auto;
  }
  .cover-media--center .cover-media__scrim {
    background: var(--cover-solid);
  }
  .cover-media--top .cover-media__scrim {
    background: linear-gradient( to bottom, var(--cover-scrim-from) 0%, var(--cover-scrim-mid) 38%, transparent 72% );
  }
  .cover-media--solid-overlay .cover-media__scrim {
    background: var(--cover-solid);
  }
  .cover-media--brand-overlay .cover-media__scrim {
    background: linear-gradient( to top, var(--bg-brand-solid) 0%, var(--bg-brand-solid) 55%, transparent 85% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( to top, color-mix(in srgb, var(--bg-brand-solid) 50%, var(--alpha-black-90)) 0%, color-mix(in srgb, var(--bg-brand-solid) 30%, transparent) 55%, transparent 85% );
    }
  }
  .cover-media--brand-overlay.cover-media--center .cover-media__scrim, .cover-media--brand-overlay.cover-media--solid-overlay .cover-media__scrim {
    background: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--bg-brand-solid) 45%, var(--alpha-black-80));
    }
  }
  .cover-media--rounded-none {
    --cover-radius: 0;
  }
  .cover-media--profile {
    aspect-ratio: auto;
    height: var(--cover-h-profile, 11rem);
    overflow: visible;
    margin-bottom: 2.5rem;
  }
  .cover-media__avatar-slot {
    position: absolute;
    left: var(--cover-pad);
    bottom: 0;
    z-index: 3;
    transform: translateY(45%);
  }
  .cover-media__actions :focus-visible, .cover-media a:focus-visible {
    outline: 2px solid var(--cover-focus);
    outline-offset: 2px;
    border-radius: var(--radius-md);
  }
  .cover-media.is-loading {
    background-image: linear-gradient( 90deg, var(--cover-shimmer-from) 25%, var(--cover-shimmer-to) 37%, var(--cover-shimmer-from) 63% );
    background-size: 200% 100%;
    animation: cover-media-shimmer 1.5s var(--ease-out) infinite;
  }
  .cover-media.is-loading .cover-media__img, .cover-media.is-loading .cover-media__scrim, .cover-media.is-loading .cover-media__content, .cover-media.is-loading .cover-media__placeholder {
    visibility: hidden;
  }
  @keyframes cover-media-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .cover-media--empty {
    background: var(--bg-tertiary);
  }
  .cover-media__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    border-radius: inherit;
    color: var(--cover-placeholder);
  }
  .cover-media__placeholder > i, .cover-media__placeholder > svg {
    font-size: 2rem;
  }
  .cover-media--ken-burns .cover-media__img {
    animation: cover-media-ken-burns 24s var(--ease-out) infinite alternate;
  }
  @keyframes cover-media-ken-burns {
    from {
      transform: scale(1) translate3d(0, 0, 0);
    }
    to {
      transform: scale(1.08) translate3d(1.5%, -1.5%, 0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cover-media, .cover-media__img {
      transition: none;
    }
    .cover-media:hover .cover-media__img {
      transform: none;
    }
    .cover-media--ken-burns .cover-media__img {
      animation: none;
    }
    .cover-media.is-loading {
      animation: none;
    }
  }
}
@layer utilities {
  .media-grid {
    --mg-gap: 0.125rem;
    --mg-radius: var(--radius-lg);
    --mg-seam: var(--bg-primary);
    --mg-cell-bg: var(--bg-secondary);
    --mg-scrim: var(--alpha-black-10);
    --mg-more-scrim: var(--alpha-black-50);
    --mg-more-text: var(--alpha-white-100);
    --mg-focus: var(--border-focus);
    --mg-placeholder: var(--text-tertiary);
    --mg-shimmer-from: var(--bg-tertiary);
    --mg-shimmer-to: var(--bg-secondary);
    display: grid;
    gap: var(--mg-gap);
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    aspect-ratio: 3 / 2;
    background: var(--mg-seam);
    min-width: 0;
  }
  .media-grid__cell {
    position: relative;
    overflow: hidden;
    min-width: 0;
    background: var(--mg-cell-bg);
  }
  .media-grid__cell > img, .media-grid__cell > video, .media-grid__cell > picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  a.media-grid__cell {
    cursor: pointer;
  }
  button.media-grid__cell {
    appearance: none;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
  }
  .media-grid__cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mg-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .media-grid__cell:not(.media-grid__cell--more):hover::after, .media-grid__cell:not(.media-grid__cell--more):focus-within::after {
    opacity: 1;
  }
  .media-grid--n1, .media-grid[data-count="1"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    aspect-ratio: 16 / 9;
  }
  .media-grid--n2, .media-grid[data-count="2"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    aspect-ratio: 2 / 1;
  }
  .media-grid--n3, .media-grid[data-count="3"] {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 2;
  }
  .media-grid--n3 > .media-grid__cell:first-child, .media-grid[data-count="3"] > .media-grid__cell:first-child {
    grid-row: span 2;
  }
  .media-grid--n4, .media-grid[data-count="4"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1 / 1;
  }
  .media-grid--n5, .media-grid[data-count="5"] {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 2;
  }
  .media-grid--n5 > .media-grid__cell:nth-child(1), .media-grid--n5 > .media-grid__cell:nth-child(2), .media-grid[data-count="5"] > .media-grid__cell:nth-child(1), .media-grid[data-count="5"] > .media-grid__cell:nth-child(2) {
    grid-column: span 3;
  }
  .media-grid--n5 > .media-grid__cell:nth-child(n + 3), .media-grid[data-count="5"] > .media-grid__cell:nth-child(n + 3) {
    grid-column: span 2;
  }
  .media-grid__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--mg-more-scrim);
    color: var(--mg-more-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
  }
  .media-grid--rounded {
    border-radius: var(--mg-radius);
    overflow: hidden;
  }
  .media-grid--gap-sm {
    --mg-gap: 0.0625rem;
  }
  .media-grid--gap-none {
    --mg-gap: 0;
  }
  .media-grid__cell:focus-visible, .media-grid__cell :focus-visible {
    outline: 2px solid var(--mg-focus);
    outline-offset: -2px;
    z-index: 1;
  }
  .media-grid.is-loading .media-grid__cell {
    background-image: linear-gradient( 90deg, var(--mg-shimmer-from) 25%, var(--mg-shimmer-to) 37%, var(--mg-shimmer-from) 63% );
    background-size: 200% 100%;
    animation: media-grid-shimmer 1.5s var(--ease-out) infinite;
  }
  .media-grid.is-loading .media-grid__cell > * {
    visibility: hidden;
  }
  @keyframes media-grid-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .media-grid--empty {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    aspect-ratio: 16 / 9;
  }
  .media-grid__cell--empty {
    display: grid;
    place-items: center;
    color: var(--mg-placeholder);
    background: var(--mg-cell-bg);
  }
  .media-grid__cell--empty::after {
    content: none;
  }
  .media-grid__cell--empty > i, .media-grid__cell--empty > .media-grid__placeholder {
    font-size: 1.75rem;
    color: var(--mg-placeholder);
  }
  @media (prefers-reduced-motion: reduce) {
    .media-grid__cell::after {
      transition: none;
    }
    .media-grid.is-loading .media-grid__cell {
      animation: none;
    }
  }
}
@layer utilities {
  .media-badge {
    --mb-fill: var(--alpha-black-70);
    --mb-fg: var(--alpha-white-100);
    --mb-radius: var(--radius-md);
    --mb-inset: 0.5rem;
    --mb-pad-y: 0.1875rem;
    --mb-pad-x: 0.4375rem;
    --mb-gap: 0.25rem;
    --mb-font: 0.6875rem;
    --mb-dot: 0.5rem;
    --mb-blur: 4px;
    --mb-duration: var(--duration-fast);
    --mb-ease: var(--ease-out);
    --mb-ring: var(--alpha-white-100);
    --mb-lift: 0 1px 2px var(--alpha-black-30);
    position: absolute;
    top: var(--mb-inset);
    right: var(--mb-inset);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--mb-gap);
    max-width: calc(100% - (var(--mb-inset) * 2));
    padding: var(--mb-pad-y) var(--mb-pad-x);
    border-radius: var(--mb-radius);
    font-size: var(--mb-font);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--mb-fg);
    background: var(--mb-fill);
    box-shadow: var(--mb-lift);
    -webkit-backdrop-filter: blur(var(--mb-blur));
    backdrop-filter: blur(var(--mb-blur));
    white-space: nowrap;
    text-shadow: 0 1px 2px var(--alpha-black-50);
    pointer-events: none;
    user-select: none;
  }
  .media-badge__icon {
    flex: none;
    font-size: 0.875em;
    line-height: 0;
  }
  .media-badge__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .media-badge__dot {
    flex: none;
    width: var(--mb-dot);
    height: var(--mb-dot);
    border-radius: var(--radius-full);
    background: currentColor;
  }
  .media-badge--duration {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .media-badge--type {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
  }
  .media-badge--count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  .media-badge--live {
    --mb-fill: var(--alpha-white-100);
    --mb-fg: var(--bg-danger-solid);
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
  }
  .media-badge--live .media-badge__dot {
    background: var(--bg-danger-solid);
    animation: media-badge-pulse 1.4s var(--mb-ease) infinite;
  }
  .media-badge--hd {
    --mb-fill: var(--bg-brand-solid);
    --mb-fg: var(--text-on-brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
  }
  .media-badge--new {
    --mb-fill: var(--bg-brand-solid);
    --mb-fg: var(--text-on-brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
  }
  .media-badge--dot {
    --mb-pad-y: 0;
    --mb-pad-x: 0;
    gap: 0;
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border-radius: var(--radius-full);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .media-badge--dot.media-badge--sm {
    width: 0.625rem;
    height: 0.625rem;
  }
  .media-badge--play {
    top: 50%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full);
    --mb-fill: var(--alpha-black-50);
    --mb-blur: 8px;
    box-shadow: 0 2px 8px var(--alpha-black-40);
    pointer-events: auto;
    cursor: pointer;
    transition: background var(--mb-duration) var(--mb-ease), transform var(--mb-duration) var(--mb-ease);
  }
  .media-badge--play .media-badge__icon {
    font-size: 1.125rem;
    margin-left: 0.125rem;
  }
  .media-badge--play:hover {
    --mb-fill: var(--alpha-black-60);
    transform: translate(-50%, -50%) scale(1.06);
  }
  .media-badge--play:active {
    transform: translate(-50%, -50%) scale(0.96);
  }
  .media-badge--play:focus-visible {
    outline: 2px solid var(--mb-ring);
    outline-offset: 2px;
  }
  .media-badge--play.media-badge--sm {
    width: 2.25rem;
    height: 2.25rem;
  }
  .media-badge--play.media-badge--sm .media-badge__icon {
    font-size: 0.875rem;
  }
  .media-badge--tl {
    top: var(--mb-inset);
    right: auto;
    bottom: auto;
    left: var(--mb-inset);
  }
  .media-badge--tr {
    top: var(--mb-inset);
    right: var(--mb-inset);
    bottom: auto;
    left: auto;
  }
  .media-badge--bl {
    top: auto;
    right: auto;
    bottom: var(--mb-inset);
    left: var(--mb-inset);
  }
  .media-badge--br {
    top: auto;
    right: var(--mb-inset);
    bottom: var(--mb-inset);
    left: auto;
  }
  .media-badge--center {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .media-badge--md {
    --mb-font: 0.6875rem;
    --mb-pad-y: 0.1875rem;
    --mb-pad-x: 0.4375rem;
    --mb-dot: 0.5rem;
  }
  .media-badge--sm {
    --mb-font: 0.625rem;
    --mb-pad-y: 0.125rem;
    --mb-pad-x: 0.375rem;
    --mb-gap: 0.1875rem;
    --mb-dot: 0.4375rem;
    --mb-inset: 0.375rem;
  }
  @keyframes media-badge-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.35;
      transform: scale(0.7);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .media-badge--live .media-badge__dot {
      animation: none;
      opacity: 1;
      transform: none;
    }
    .media-badge--play {
      transition-duration: 0.01ms;
    }
  }
  @media (forced-colors: active) {
    .media-badge {
      forced-color-adjust: none;
    }
    .media-badge--play:focus-visible {
      outline-color: Highlight;
    }
  }
}
@layer utilities {
  .masonry {
    --masonry-cols: 3;
    --masonry-gap: 1rem;
    --masonry-col-width: 16rem;
    --masonry-radius: var(--radius-lg);
    --masonry-item-bg: var(--bg-primary);
    --masonry-well-bg: var(--bg-secondary);
    --masonry-border: var(--border-default);
    --masonry-caption: var(--text-tertiary);
    --masonry-focus: var(--border-focus);
    --masonry-scrim: var(--alpha-black-60);
    --masonry-lift: 0 8px 20px -6px var(--alpha-black-20);
    --masonry-shimmer-from: var(--bg-tertiary);
    --masonry-shimmer-to: var(--bg-secondary);
    --masonry-empty: var(--text-tertiary);
    column-count: var(--masonry-cols);
    column-gap: var(--masonry-gap);
    min-width: 0;
  }
  .masonry--fluid {
    column-count: auto;
    column-width: var(--masonry-col-width);
  }
  .masonry__item {
    position: relative;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 var(--masonry-gap);
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
  }
  .masonry__item > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--masonry-radius);
    background: var(--masonry-well-bg);
  }
  .masonry__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--masonry-radius);
    background: var(--masonry-well-bg);
  }
  .masonry__media > img {
    display: block;
    width: 100%;
    height: auto;
  }
  .masonry__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--masonry-scrim) 0%, transparent 55%);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    pointer-events: none;
  }
  .masonry__caption {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--masonry-caption);
  }
  .masonry__item--card {
    background: var(--masonry-item-bg);
    border: 1px solid var(--masonry-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  .masonry__item--card > img, .masonry__item--card .masonry__media {
    border-radius: 0;
  }
  .masonry__item--card .masonry__caption {
    margin-top: 0;
    padding: 0.625rem 0.75rem;
  }
  .masonry--2 {
    --masonry-cols: 2;
  }
  .masonry--3 {
    --masonry-cols: 3;
  }
  .masonry--4 {
    --masonry-cols: 4;
  }
  .masonry--5 {
    --masonry-cols: 5;
  }
  .masonry--gap-sm {
    --masonry-gap: 0.5rem;
  }
  .masonry--gap-md {
    --masonry-gap: 1rem;
  }
  .masonry--gap-lg {
    --masonry-gap: 1.5rem;
  }
  .masonry__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--masonry-lift);
  }
  .masonry__item:hover .masonry__media::after, .masonry__item:focus-within .masonry__media::after {
    opacity: 1;
  }
  .masonry__item :focus-visible {
    outline: 2px solid var(--masonry-focus);
    outline-offset: 2px;
    border-radius: var(--radius-md);
  }
  .masonry__item--loading {
    min-height: 8rem;
    border-radius: var(--masonry-radius);
    background-color: var(--masonry-shimmer-from);
    background-image: linear-gradient( 90deg, var(--masonry-shimmer-from) 25%, var(--masonry-shimmer-to) 37%, var(--masonry-shimmer-from) 63% );
    background-size: 200% 100%;
    animation: masonry-shimmer 1.5s var(--ease-out) infinite;
  }
  .masonry__item--loading:hover {
    transform: none;
    box-shadow: none;
  }
  @keyframes masonry-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .masonry__empty {
    column-span: all;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--masonry-empty);
  }
  @media (max-width: 1024px) {
    .masonry--5 {
      --masonry-cols: 4;
    }
    .masonry--4 {
      --masonry-cols: 3;
    }
  }
  @media (max-width: 768px) {
    .masonry--5, .masonry--4, .masonry--3 {
      --masonry-cols: 2;
    }
  }
  @media (max-width: 480px) {
    .masonry--5, .masonry--4, .masonry--3, .masonry--2 {
      --masonry-cols: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .masonry__item {
      transition: none;
    }
    .masonry__item:hover {
      transform: none;
    }
    .masonry__media::after {
      transition: none;
    }
    .masonry__item--loading {
      animation: none;
    }
  }
}
@layer utilities {
  .thumbnail {
    --thumb-bg: var(--bg-tertiary);
    --thumb-border: var(--border-default);
    --thumb-radius: var(--radius-lg);
    --thumb-ring: var(--border-brand);
    --thumb-focus: var(--border-focus);
    --thumb-shadow: var(--shadow-xs);
    --thumb-shadow-hover: var(--shadow-md);
    --thumb-placeholder: var(--text-tertiary);
    --thumb-scrim: var(--alpha-black-30);
    --thumb-caption-fg: var(--alpha-white-100);
    --thumb-caption-scrim: var(--alpha-black-70);
    --thumb-check-bg: var(--alpha-white-70);
    --thumb-check-fg: var(--alpha-black-70);
    --thumb-check-border: var(--alpha-white-100);
    --thumb-play-bg: var(--alpha-black-50);
    --thumb-play-fg: var(--alpha-white-100);
    --thumb-check-on-bg: var(--bg-brand-solid);
    --thumb-check-on-fg: var(--text-on-brand);
    --thumb-shimmer-from: var(--bg-tertiary);
    --thumb-shimmer-to: var(--bg-secondary);
    --thumb-duration: var(--duration-fast);
    --thumb-ease: var(--ease-out);
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--thumb-border);
    border-radius: var(--thumb-radius);
    background: var(--thumb-bg);
    box-shadow: var(--thumb-shadow);
    color: var(--thumb-placeholder);
    transition: box-shadow var(--thumb-duration) var(--thumb-ease), border-color var(--thumb-duration) var(--thumb-ease);
  }
  button.thumbnail, a.thumbnail, label.thumbnail {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
  }
  .thumbnail__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--thumb-duration) var(--thumb-ease);
  }
  .thumbnail__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--thumb-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--thumb-duration) var(--thumb-ease);
  }
  .thumbnail__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 0.75rem 0.5rem 0.4375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--thumb-caption-fg);
    background: linear-gradient(to top, var(--thumb-caption-scrim), transparent);
    text-shadow: 0 1px 2px var(--alpha-black-50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }
  .thumbnail-caption {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .thumbnail-caption__meta {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .thumbnail__check {
    position: absolute;
    top: 0.4375rem;
    left: 0.4375rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1.5px solid var(--thumb-check-border);
    border-radius: var(--radius-full);
    background: var(--thumb-check-bg);
    color: var(--thumb-check-fg);
    box-shadow: 0 1px 2px var(--alpha-black-30);
    opacity: 0;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity var(--thumb-duration) var(--thumb-ease), background var(--thumb-duration) var(--thumb-ease), border-color var(--thumb-duration) var(--thumb-ease), transform var(--thumb-duration) var(--thumb-ease);
  }
  .thumbnail__check > i {
    font-size: 0.6875rem;
    line-height: 0;
    opacity: 0;
    color: var(--thumb-check-on-fg);
    transition: opacity var(--thumb-duration) var(--thumb-ease);
  }
  .thumbnail__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .thumbnail__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--thumb-play-bg);
    color: var(--thumb-play-fg);
    box-shadow: 0 2px 8px var(--alpha-black-40);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: background var(--thumb-duration) var(--thumb-ease), transform var(--thumb-duration) var(--thumb-ease);
  }
  .thumbnail__play > i {
    font-size: 1rem;
    margin-left: 0.125rem;
  }
  .thumbnail--video:where(a, button, label):hover .thumbnail__play, .thumbnail--video.is-interactive:hover .thumbnail__play {
    background: var(--alpha-black-60);
    transform: translate(-50%, -50%) scale(1.06);
  }
  .thumbnail__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--thumb-placeholder);
    background: var(--thumb-bg);
  }
  .thumbnail--empty, .thumbnail.is-error {
    color: var(--thumb-placeholder);
    background: var(--thumb-bg);
  }
  .thumbnail--1-1 {
    aspect-ratio: 1 / 1;
  }
  .thumbnail--4-3 {
    aspect-ratio: 4 / 3;
  }
  .thumbnail--16-9 {
    aspect-ratio: 16 / 9;
  }
  .thumbnail--3-4 {
    aspect-ratio: 3 / 4;
  }
  .thumbnail--xs {
    width: 4rem;
  }
  .thumbnail--sm {
    width: 6rem;
  }
  .thumbnail--md {
    width: 9rem;
  }
  .thumbnail--lg {
    width: 12rem;
  }
  .thumbnail--selectable {
    cursor: pointer;
  }
  .thumbnail--selectable:hover .thumbnail__check, .thumbnail--selectable:focus-visible .thumbnail__check, .thumbnail--selectable:has(.thumbnail__input:focus-visible) .thumbnail__check, .thumbnail.is-selected .thumbnail__check, .thumbnail:has(.thumbnail__input:checked) .thumbnail__check {
    opacity: 1;
  }
  .thumbnail--selectable:hover, .thumbnail:where(a, button, label):hover, .thumbnail.is-interactive:hover {
    box-shadow: var(--thumb-shadow-hover);
  }
  .thumbnail--selectable:hover .thumbnail__overlay, .thumbnail:where(a, button, label):hover .thumbnail__overlay, .thumbnail.is-interactive:hover .thumbnail__overlay {
    opacity: 1;
  }
  .thumbnail:focus-visible, .thumbnail:has(.thumbnail__input:focus-visible) {
    outline: 2px solid var(--thumb-focus);
    outline-offset: 2px;
  }
  .thumbnail.is-selected, .thumbnail:has(.thumbnail__input:checked) {
    border-color: var(--thumb-ring);
    box-shadow: 0 0 0 2px var(--thumb-ring);
  }
  .thumbnail.is-selected .thumbnail__img, .thumbnail:has(.thumbnail__input:checked) .thumbnail__img {
    transform: scale(0.9);
    border-radius: calc(var(--thumb-radius) - 0.125rem);
  }
  .thumbnail.is-selected .thumbnail__check, .thumbnail:has(.thumbnail__input:checked) .thumbnail__check {
    background: var(--thumb-check-on-bg);
    border-color: var(--thumb-check-on-bg);
  }
  .thumbnail.is-selected .thumbnail__check > i, .thumbnail:has(.thumbnail__input:checked) .thumbnail__check > i {
    opacity: 1;
  }
  .thumbnail.is-loading {
    background-image: linear-gradient( 90deg, var(--thumb-shimmer-from) 25%, var(--thumb-shimmer-to) 37%, var(--thumb-shimmer-from) 63% );
    background-size: 200% 100%;
    animation: thumbnail-shimmer 1.5s var(--thumb-ease) infinite;
  }
  .thumbnail.is-loading > * {
    visibility: hidden;
  }
  @keyframes thumbnail-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .thumbnail[aria-disabled="true"], .thumbnail:has(.thumbnail__input:disabled) {
    opacity: 0.55;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .thumbnail, .thumbnail__img, .thumbnail__overlay, .thumbnail__check, .thumbnail__play {
      transition-duration: 0.01ms;
    }
    .thumbnail.is-loading {
      animation: none;
    }
    .thumbnail.is-selected .thumbnail__img, .thumbnail:has(.thumbnail__input:checked) .thumbnail__img {
      transform: none;
    }
  }
  @media (forced-colors: active) {
    .thumbnail__check, .thumbnail__play {
      forced-color-adjust: none;
    }
    .thumbnail.is-selected, .thumbnail:has(.thumbnail__input:checked) {
      outline: 2px solid Highlight;
    }
    .thumbnail:focus-visible, .thumbnail:has(.thumbnail__input:focus-visible) {
      outline-color: Highlight;
    }
  }
}
@layer utilities {
  .filmstrip__scroll {
    --film-fade: var(--bg-primary);
    --film-fade-transparent: var(--alpha-0);
    --film-fade-size: 2rem;
    position: relative;
    min-width: 0;
  }
  .filmstrip {
    --film-item-h: 4rem;
    --film-aspect: 4 / 3;
    --film-gap: 0.5rem;
    --film-radius: var(--radius-md);
    --film-dim: 0.55;
    --film-item-bg: var(--bg-secondary);
    --film-border: var(--border-default);
    --film-ring: var(--border-brand);
    --film-focus: var(--border-focus);
    --film-note: var(--text-tertiary);
    --film-shimmer-from: var(--bg-tertiary);
    --film-shimmer-to: var(--bg-secondary);
    --film-label-bg: var(--alpha-black-60);
    --film-label-text: var(--alpha-white-100);
    --film-dot: var(--bg-tertiary);
    --film-dot-active: var(--bg-brand-solid);
    display: flex;
    align-items: center;
    gap: var(--film-gap);
    padding: 0.25rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filmstrip::-webkit-scrollbar {
    display: none;
  }
  .filmstrip__item {
    position: relative;
    flex: none;
    height: var(--film-item-h);
    aspect-ratio: var(--film-aspect);
    padding: 0;
    margin: 0;
    border: 1px solid var(--film-border);
    border-radius: var(--film-radius);
    background: var(--film-item-bg);
    overflow: hidden;
    cursor: pointer;
    opacity: var(--film-dim);
    scroll-snap-align: center;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .filmstrip__item > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .filmstrip__item:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: var(--shadow-xs);
  }
  .filmstrip__item:focus-visible {
    outline: 2px solid var(--film-focus);
    outline-offset: 2px;
  }
  .filmstrip__item.is-active, .filmstrip__item[aria-current="true"] {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--film-ring);
  }
  .filmstrip--numbered {
    counter-reset: filmstrip;
  }
  .filmstrip--numbered .filmstrip__item {
    counter-increment: filmstrip;
  }
  .filmstrip--numbered .filmstrip__item::after {
    content: counter(filmstrip);
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    min-width: 1.125rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
    color: var(--film-label-text);
    background: var(--film-label-bg);
    border-radius: var(--radius-full);
  }
  .filmstrip--dots {
    justify-content: center;
    gap: 0.375rem;
  }
  .filmstrip--dots .filmstrip__item {
    width: 0.5rem;
    height: 0.5rem;
    aspect-ratio: auto;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--film-dot);
    opacity: 1;
  }
  .filmstrip--dots .filmstrip__item > img {
    display: none;
  }
  .filmstrip--dots .filmstrip__item:hover {
    transform: none;
    box-shadow: none;
  }
  .filmstrip--dots .filmstrip__item.is-active, .filmstrip--dots .filmstrip__item[aria-current="true"] {
    width: 1.25rem;
    background: var(--film-dot-active);
    box-shadow: none;
  }
  .filmstrip--sm {
    --film-item-h: 3rem;
  }
  .filmstrip--lg {
    --film-item-h: 5.5rem;
  }
  .filmstrip--vertical {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    max-height: var(--film-vertical-h, 20rem);
  }
  .filmstrip.is-loading .filmstrip__item {
    cursor: default;
    opacity: 1;
    background-image: linear-gradient( 90deg, var(--film-shimmer-from) 25%, var(--film-shimmer-to) 37%, var(--film-shimmer-from) 63% );
    background-size: 200% 100%;
    animation: filmstrip-shimmer 1.5s var(--ease-out) infinite;
  }
  .filmstrip.is-loading .filmstrip__item > img {
    visibility: hidden;
  }
  @keyframes filmstrip-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .filmstrip.is-empty {
    justify-content: center;
  }
  .filmstrip__empty {
    flex: 1 1 auto;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--film-note);
  }
  .filmstrip__scroll--edge-fade::before, .filmstrip__scroll--edge-fade::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--film-fade-size);
    pointer-events: none;
    z-index: 1;
  }
  .filmstrip__scroll--edge-fade::before {
    left: 0;
    background: linear-gradient(to right, var(--film-fade), var(--film-fade-transparent));
  }
  .filmstrip__scroll--edge-fade::after {
    right: 0;
    background: linear-gradient(to left, var(--film-fade), var(--film-fade-transparent));
  }
  .filmstrip__scroll--edge-fade:has(.filmstrip--vertical)::before, .filmstrip__scroll--edge-fade:has(.filmstrip--vertical)::after {
    left: 0;
    right: 0;
    width: auto;
    height: var(--film-fade-size);
  }
  .filmstrip__scroll--edge-fade:has(.filmstrip--vertical)::before {
    top: 0;
    bottom: auto;
    background: linear-gradient(to bottom, var(--film-fade), var(--film-fade-transparent));
  }
  .filmstrip__scroll--edge-fade:has(.filmstrip--vertical)::after {
    top: auto;
    bottom: 0;
    background: linear-gradient(to top, var(--film-fade), var(--film-fade-transparent));
  }
  @media (prefers-reduced-motion: reduce) {
    .filmstrip {
      scroll-behavior: auto;
    }
    .filmstrip.is-loading .filmstrip__item {
      animation: none;
    }
    .filmstrip__item {
      transition: none;
    }
    .filmstrip__item:hover {
      transform: none;
    }
  }
}
@layer utilities {
  .waveform {
    --wf-track: var(--bg-tertiary);
    --wf-track-2: var(--bg-quaternary);
    --wf-fill: var(--bg-brand-solid);
    --wf-head: var(--bg-brand-solid);
    --wf-progress: 0%;
    --wf-gap: 2px;
    --wf-bar-w: 3px;
    --wf-height: 2.5rem;
    position: relative;
    display: flex;
    align-items: center;
    height: var(--wf-height);
    cursor: pointer;
    touch-action: none;
  }
  .waveform__bars, .waveform__fill {
    display: flex;
    align-items: center;
    gap: var(--wf-gap);
    height: 100%;
    width: 100%;
  }
  .waveform__bar {
    flex: 1 1 var(--wf-bar-w);
    min-width: var(--wf-bar-w);
    height: var(--h, 40%);
    border-radius: var(--radius-full);
    background: var(--wf-track);
  }
  .waveform__bar:nth-child(even) {
    background: var(--wf-track-2);
  }
  .waveform__fill {
    position: absolute;
    inset: 0;
    width: var(--wf-progress);
    overflow: hidden;
    pointer-events: none;
  }
  .waveform__fill .waveform__bar, .waveform__fill .waveform__bar:nth-child(even) {
    background: var(--wf-fill);
  }
  .waveform__head {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--wf-progress);
    width: 2px;
    border-radius: var(--radius-full);
    background: var(--wf-head);
    transform: translateX(-1px);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .waveform:hover .waveform__head, .waveform.is-playing .waveform__head {
    opacity: 1;
  }
  .waveform--mirror .waveform__bar {
    align-self: center;
  }
  .waveform--rounded {
    --wf-bar-w: 4px;
  }
  .waveform--rounded .waveform__bar {
    border-radius: var(--radius-sm);
  }
  .waveform--xs {
    --wf-height: 1.25rem;
    --wf-gap: 1px;
    --wf-bar-w: 2px;
  }
  .waveform--sm {
    --wf-height: 1.75rem;
    --wf-gap: 2px;
    --wf-bar-w: 2px;
  }
  .waveform--md {
    --wf-height: 2.5rem;
  }
  .waveform--lg {
    --wf-height: 4rem;
    --wf-gap: 3px;
    --wf-bar-w: 4px;
  }
  .waveform--neutral {
    --wf-fill: var(--text-secondary);
    --wf-head: var(--text-secondary);
  }
  .waveform--success {
    --wf-fill: var(--bg-success-solid);
    --wf-head: var(--bg-success-solid);
  }
  .waveform--info {
    --wf-fill: var(--bg-info-solid);
    --wf-head: var(--bg-info-solid);
  }
  .waveform--on-media {
    --wf-track: var(--alpha-white-30);
    --wf-track-2: var(--alpha-white-40);
    --wf-fill: var(--alpha-white-100);
    --wf-head: var(--alpha-white-100);
  }
  .waveform.is-loading .waveform__bar {
    animation: wf-shimmer 1.2s var(--ease-in-out) infinite;
  }
  .waveform.is-loading .waveform__bar:nth-child(3n) {
    animation-delay: 0.15s;
  }
  .waveform.is-loading .waveform__bar:nth-child(3n+1) {
    animation-delay: 0.3s;
  }
  .waveform[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }
  .waveform:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  @keyframes wf-shimmer {
    0%, 100% {
      background: var(--wf-track);
    }
    50% {
      background: var(--wf-track-2);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .waveform__head {
      transition-duration: 0.01ms;
    }
    .waveform.is-loading .waveform__bar {
      animation: none;
    }
  }
}
@layer utilities {
  .photo-stack {
    --stack-size: 8.5rem;
    --stack-reserve: 0.9rem;
    --stack-radius: var(--radius-lg);
    --stack-mat: var(--bg-primary);
    --stack-hairline: var(--border-default);
    --stack-card-shadow: var(--shadow-md);
    --stack-top-shadow: var(--shadow-lg);
    --stack-media-bg: var(--bg-secondary);
    --stack-frame-pad: 0.375rem;
    --stack-step: 0.3125rem;
    --stack-rot: 4deg;
    --stack-spread: 1;
    --stack-lift: 0.375rem;
    --stack-lift-y: 0rem;
    --stack-ring: var(--border-focus);
    --stack-placeholder: var(--text-tertiary);
    --stack-placeholder-border: var(--border-default);
    --stack-count-fill: var(--alpha-black-70);
    --stack-count-fg: var(--alpha-white-100);
    --stack-count-lift: 0 1px 2px var(--alpha-black-30);
    --stack-shimmer-from: var(--bg-tertiary);
    --stack-shimmer-to: var(--bg-secondary);
    --stack-dur: var(--duration-normal);
    --stack-ease: var(--ease-out);
    position: relative;
    display: inline-block;
    width: var(--stack-size);
    aspect-ratio: 1 / 1;
    vertical-align: middle;
  }
  button.photo-stack {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .photo-stack__top, .photo-stack__card {
    position: absolute;
    inset: var(--stack-reserve);
    border-radius: var(--stack-radius);
    background: var(--stack-mat);
    border: 1px solid var(--stack-hairline);
    box-shadow: var(--stack-card-shadow);
    overflow: hidden;
    transition: transform var(--stack-dur) var(--stack-ease), box-shadow var(--stack-dur) var(--stack-ease);
  }
  .photo-stack__top {
    z-index: 3;
    background: var(--stack-media-bg);
    box-shadow: var(--stack-top-shadow);
    transform: translateY(calc(-1 * var(--stack-lift-y)));
  }
  .photo-stack__top > img, .photo-stack__top > picture, .photo-stack__top > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .photo-stack__card {
    z-index: 2;
  }
  .photo-stack__card:nth-child(3) {
    z-index: 1;
  }
  .photo-stack__card:nth-child(4) {
    z-index: 0;
  }
  .photo-stack__card:nth-child(2) {
    transform: translate(calc(var(--stack-step) * var(--stack-spread)), calc(var(--stack-step) * var(--stack-spread))) rotate(calc(var(--stack-rot) * var(--stack-spread)));
  }
  .photo-stack__card:nth-child(3) {
    transform: translate(calc(var(--stack-step) * 2 * var(--stack-spread)), calc(var(--stack-step) * 2 * var(--stack-spread))) rotate(calc(var(--stack-rot) * 1.6 * var(--stack-spread)));
  }
  .photo-stack__card:nth-child(4) {
    transform: translate(calc(var(--stack-step) * 3 * var(--stack-spread)), calc(var(--stack-step) * 3 * var(--stack-spread))) rotate(calc(var(--stack-rot) * 2.2 * var(--stack-spread)));
  }
  .photo-stack--fan .photo-stack__top, .photo-stack--fan .photo-stack__card {
    transform-origin: 50% 92%;
  }
  .photo-stack--fan .photo-stack__card:nth-child(2) {
    transform: rotate(calc(var(--stack-rot) * -1.5 * var(--stack-spread)));
  }
  .photo-stack--fan .photo-stack__card:nth-child(3) {
    transform: rotate(calc(var(--stack-rot) * 1.5 * var(--stack-spread)));
  }
  .photo-stack--fan .photo-stack__card:nth-child(4) {
    transform: rotate(calc(var(--stack-rot) * -3 * var(--stack-spread)));
  }
  .photo-stack--pile .photo-stack__card:nth-child(2) {
    transform: translate(calc(var(--stack-step) * 0.5 * var(--stack-spread)), calc(var(--stack-step) * 0.4 * var(--stack-spread))) rotate(calc(var(--stack-rot) * 0.4 * var(--stack-spread)));
  }
  .photo-stack--pile .photo-stack__card:nth-child(3) {
    transform: translate(calc(var(--stack-step) * 1 * var(--stack-spread)), calc(var(--stack-step) * 0.8 * var(--stack-spread))) rotate(calc(var(--stack-rot) * -0.4 * var(--stack-spread)));
  }
  .photo-stack--pile .photo-stack__card:nth-child(4) {
    transform: translate(calc(var(--stack-step) * 1.5 * var(--stack-spread)), calc(var(--stack-step) * 1.2 * var(--stack-spread))) rotate(calc(var(--stack-rot) * 0.6 * var(--stack-spread)));
  }
  .photo-stack__count {
    position: absolute;
    z-index: 4;
    right: calc(var(--stack-reserve) + 0.4375rem);
    bottom: calc(var(--stack-reserve) + 0.4375rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.4375rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--stack-count-fg);
    background: var(--stack-count-fill);
    box-shadow: var(--stack-count-lift);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .photo-stack__count > i {
    font-size: 0.6875rem;
  }
  .photo-stack--framed .photo-stack__top {
    padding: var(--stack-frame-pad);
  }
  .photo-stack--framed .photo-stack__top > img, .photo-stack--framed .photo-stack__top > picture, .photo-stack--framed .photo-stack__top > video {
    border-radius: var(--radius-md);
  }
  .photo-stack--sm {
    --stack-size: 6rem;
    --stack-reserve: 0.625rem;
    --stack-step: 0.25rem;
    --stack-rot: 3.5deg;
    --stack-lift: 0.25rem;
  }
  .photo-stack--md {
    --stack-size: 8.5rem;
  }
  .photo-stack--lg {
    --stack-size: 12rem;
    --stack-reserve: 1.125rem;
    --stack-step: 0.4375rem;
    --stack-rot: 4.5deg;
    --stack-lift: 0.5rem;
  }
  .photo-stack.is-loading .photo-stack__top {
    background-image: linear-gradient( 90deg, var(--stack-shimmer-from) 25%, var(--stack-shimmer-to) 37%, var(--stack-shimmer-from) 63% );
    background-size: 200% 100%;
    animation: photo-stack-shimmer 1.5s var(--stack-ease) infinite;
  }
  .photo-stack.is-loading .photo-stack__top > * {
    visibility: hidden;
  }
  .photo-stack.is-loading .photo-stack__count {
    display: none;
  }
  @keyframes photo-stack-shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  .photo-stack--empty .photo-stack__card, .photo-stack--empty .photo-stack__count {
    display: none;
  }
  .photo-stack__empty {
    position: absolute;
    inset: var(--stack-reserve);
    z-index: 3;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.375rem;
    border: 1px dashed var(--stack-placeholder-border);
    border-radius: var(--stack-radius);
    background: var(--stack-mat);
    color: var(--stack-placeholder);
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.3;
  }
  .photo-stack__empty > i {
    font-size: 1.375rem;
  }
  @media (prefers-reduced-motion: no-preference) {
    @media (hover: hover) {
      .photo-stack:hover {
        --stack-spread: 1.35;
        --stack-lift-y: var(--stack-lift);
      }
    }
    .photo-stack:focus-visible {
      --stack-spread: 1.35;
      --stack-lift-y: var(--stack-lift);
    }
    .photo-stack.is-loading:hover, .photo-stack--empty:hover, .photo-stack.is-loading:focus-visible, .photo-stack--empty:focus-visible {
      --stack-spread: 1;
      --stack-lift-y: 0rem;
    }
  }
  .photo-stack:focus-visible {
    outline: 2px solid var(--stack-ring);
    outline-offset: 3px;
    border-radius: var(--stack-radius);
  }
  .photo-stack:focus:not(:focus-visible) {
    outline: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .photo-stack__top, .photo-stack__card {
      transition: none;
    }
    .photo-stack.is-loading .photo-stack__top {
      animation: none;
    }
  }
}
@layer utilities {
  .wizard {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
  }
  .wizard__steps {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .wizard__step {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    color: var(--text-tertiary);
  }
  .wizard__step:not(:last-child) {
    flex: 1;
  }
  .wizard__step:not(:last-child)::after {
    content: "";
    margin-inline: calc(var(--spacing) * 3);
    flex: 1;
    height: 2px;
    border-radius: var(--radius-full);
    background-color: var(--border-primary);
    transition: background-color var(--duration-normal) var(--ease-default);
  }
  .wizard__step.is-done:not(:last-child)::after {
    background-color: var(--bg-brand-solid);
  }
  .wizard__step-marker {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    background-color: var(--bg-primary);
    border: 2px solid var(--border-primary);
    transition: background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .wizard__step-label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .wizard__step-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
  }
  .wizard__step-sub {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-quaternary);
  }
  .wizard__step[aria-current="step"] {
    color: var(--text-primary);
  }
  .wizard__step[aria-current="step"] .wizard__step-marker {
    color: var(--text-brand);
    border-color: var(--border-focus);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 10%, transparent);
    }
  }
  .wizard__step[aria-current="step"] .wizard__step-title {
    color: var(--text-primary);
  }
  .wizard__step.is-done .wizard__step-marker {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    border-color: transparent;
  }
  .wizard__step.is-error .wizard__step-marker {
    color: var(--text-danger);
    border-color: var(--border-danger);
    background-color: var(--bg-danger-subtle);
  }
  .wizard__step.is-error .wizard__step-title {
    color: var(--text-danger);
  }
  .wizard__panel {
    width: 100%;
    padding: 4px 2px;
  }
  .wizard__panel[hidden] {
    display: none;
  }
  .wizard__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 4);
    border-top: 1px solid var(--border-divider);
  }
  .wizard__footer-spacer {
    flex: 1;
  }
  .wizard-vertical {
    display: grid;
    gap: calc(var(--spacing) * 6);
    grid-template-columns: minmax(180px, 240px) 1fr;
  }
  .wizard-vertical .wizard__steps {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing);
  }
  .wizard-vertical .wizard__step {
    align-items: flex-start;
  }
  .wizard-vertical .wizard__step:not(:last-child) {
    flex: none;
  }
  .wizard-vertical .wizard__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: -4px;
    width: 2px;
    height: auto;
    margin: 0;
    background-color: var(--border-primary);
  }
  .wizard-vertical .wizard__step {
    position: relative;
    padding-bottom: 12px;
  }
  .wizard-vertical .wizard__step.is-done:not(:last-child)::after {
    background-color: var(--bg-brand-solid);
  }
  @media (max-width: 40rem) {
    .wizard-vertical {
      grid-template-columns: 1fr;
    }
    .wizard-vertical .wizard__steps {
      flex-direction: row;
      align-items: center;
    }
    .wizard-vertical .wizard__step:not(:last-child)::after {
      position: static;
      width: auto;
      height: 2px;
    }
  }
  .process-tracker {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .process-tracker__step {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
  }
  .process-tracker__marker {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    background-color: var(--bg-primary);
    border: 2px solid var(--border-primary);
    z-index: 1;
  }
  .process-tracker__step:not(:last-child) {
    position: relative;
  }
  .process-tracker__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(50% + 13px);
    right: calc(-50% + 13px);
    height: 2px;
    background-color: var(--border-primary);
    z-index: 0;
  }
  .process-tracker__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
  }
  .process-tracker__meta {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-quaternary);
  }
  .process-tracker__step.is-done .process-tracker__marker {
    color: var(--text-on-success, var(--text-on-solid));
    background-color: var(--bg-success-solid);
    border-color: transparent;
  }
  .process-tracker__step.is-done:not(:last-child)::after {
    background-color: var(--bg-success-solid);
  }
  .process-tracker__step.is-done .process-tracker__label {
    color: var(--text-primary);
  }
  .process-tracker__step.is-active .process-tracker__marker {
    color: var(--text-brand);
    border-color: var(--border-focus);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 10%, transparent);
    }
    animation: wf-pulse 1.8s var(--ease-default) infinite;
  }
  .process-tracker__step.is-active .process-tracker__label {
    color: var(--text-primary);
  }
  .process-tracker__step.is-error .process-tracker__marker {
    color: var(--text-danger);
    border-color: var(--border-danger);
    background-color: var(--bg-danger-subtle);
  }
  .process-tracker__step.is-error .process-tracker__label {
    color: var(--text-danger);
  }
  .process-tracker__step.is-skipped .process-tracker__marker {
    border-style: dashed;
    color: var(--text-quaternary);
  }
  .process-tracker__step.is-skipped .process-tracker__label, .process-tracker__step.is-skipped .process-tracker__meta {
    color: var(--text-quaternary);
  }
  .process-tracker-vertical {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .process-tracker-vertical .process-tracker__step {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    text-align: left;
    flex: 0 0 auto;
    padding-bottom: 16px;
  }
  .process-tracker-vertical .process-tracker__step:not(:last-child)::after {
    top: 26px;
    left: 12px;
    right: auto;
    bottom: -4px;
    width: 2px;
    height: auto;
  }
  .process-tracker-vertical .process-tracker__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  @keyframes wf-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--bg-brand-solid) 32%, transparent);
    }
    50% {
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--bg-brand-solid) 0%, transparent);
    }
  }
  .milestone-rail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .milestone {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-bottom: 20px;
  }
  .milestone:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 18px;
    bottom: -2px;
    width: 2px;
    background-color: var(--border-primary);
  }
  .milestone__node {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: var(--radius-full);
    background-color: var(--bg-primary);
    border: 2px solid var(--border-primary);
    z-index: 1;
  }
  .milestone__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .milestone__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
  }
  .milestone__time {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-quaternary);
  }
  .milestone__desc {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .milestone.is-reached .milestone__node {
    background-color: var(--bg-brand-solid);
    border-color: transparent;
  }
  .milestone.is-reached:not(:last-child)::before {
    background-color: var(--bg-brand-solid);
  }
  .milestone.is-reached .milestone__label {
    color: var(--text-primary);
  }
  .milestone.is-current .milestone__node {
    border-color: var(--border-focus);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 14%, transparent);
    }
  }
  .milestone.is-current .milestone__label {
    color: var(--text-primary);
  }
  .wizard-summary {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .wizard-summary__section {
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    overflow: hidden;
  }
  .wizard-summary__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    border-bottom: 1px solid var(--border-divider);
  }
  .wizard-summary__section-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .wizard-summary__row {
    display: grid;
    align-items: baseline;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    grid-template-columns: minmax(120px, 200px) 1fr;
  }
  .wizard-summary__row:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .wizard-summary__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .wizard-summary__value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
  }
  @media (max-width: 40rem) {
    .wizard-summary__row {
      grid-template-columns: 1fr;
      gap: 2px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .wizard__step::after, .wizard__step-marker, .process-tracker__step.is-active .process-tracker__marker {
      transition: none;
      animation: none;
    }
  }
}
@layer utilities {
  .approval-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
  }
  .approval-card__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .approval-card__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .approval-card__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .approval-card__sub {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .approval-card__body {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-divider);
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--bg-secondary);
  }
  .approval-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .approval-card__footer-spacer {
    flex: 1;
  }
  .approval-card.is-approved {
    border-left: 3px solid var(--border-success);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .approval-card.is-rejected {
    border-left: 3px solid var(--border-danger);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .approval-chain {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .approval-chain__node {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
  }
  .approval-chain__node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background-color: var(--border-primary);
  }
  .approval-chain__avatar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    z-index: 1;
    border: 2px solid var(--border-primary);
    background-color: var(--bg-secondary);
  }
  .approval-chain__name {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
  }
  .approval-chain__role {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .approval-chain__node.is-approved .approval-chain__avatar {
    border-color: var(--border-success);
  }
  .approval-chain__node.is-approved:not(:last-child)::after {
    background-color: var(--border-success);
  }
  .approval-chain__node.is-rejected .approval-chain__avatar {
    border-color: var(--border-danger);
  }
  .approval-chain__node.is-current .approval-chain__avatar {
    border-color: var(--border-focus);
  }
  .approval-chain__node.is-current .approval-chain__name {
    color: var(--text-primary);
  }
  .approval-chain__flag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: calc(50% - 24px);
    top: 24px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    font-size: 9px;
    color: var(--text-on-solid);
    z-index: 2;
  }
  .approval-chain__node.is-approved .approval-chain__flag {
    background-color: var(--bg-success-solid);
  }
  .approval-chain__node.is-rejected .approval-chain__flag {
    background-color: var(--bg-danger-solid);
  }
  .approval-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .approval-bar__note {
    min-width: 0;
    flex: 1;
  }
  .approval-bar__spacer {
    flex: 1;
  }
  .approval-bar__outcome {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .approval-bar.is-approved .approval-bar__outcome {
    color: var(--text-success);
  }
  .approval-bar.is-rejected .approval-bar__outcome {
    color: var(--text-danger);
  }
  .approval-bar[data-resolved] .approval-bar__actions {
    display: none;
  }
  .approval-bar:not([data-resolved]) .approval-bar__outcome {
    display: none;
  }
  @media (max-width: 40rem) {
    .approval-bar {
      flex-direction: column;
      align-items: stretch;
    }
    .approval-bar__actions {
      display: flex;
      &.collapse.show {
        display: flex;
      }
    }
  }
  .signoff-matrix {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
  }
  .signoff-row {
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    grid-template-columns: 1fr auto auto;
    background-color: var(--bg-primary);
  }
  .signoff-row:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .signoff-row__who {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .signoff-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .signoff-row__role {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .signoff-row__time {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-quaternary);
  }
  .signoff-matrix__header {
    display: grid;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    grid-template-columns: 1fr auto auto;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-divider);
    letter-spacing: .04em;
  }
  @media (max-width: 40rem) {
    .signoff-row, .signoff-matrix__header {
      grid-template-columns: 1fr auto;
    }
    .signoff-row__time {
      display: none;
    }
  }
  .approval-inbox {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
  }
  .approval-inbox__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-divider);
  }
  .approval-inbox__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .approval-inbox__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-primary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default);
  }
  .approval-inbox__item:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .approval-inbox__item:hover {
    background-color: var(--bg-hover);
  }
  .approval-inbox__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .approval-inbox__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .approval-inbox__subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .approval-inbox__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .approval-inbox__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .approval-inbox__item.is-unread {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 4%, var(--bg-primary));
    }
  }
  .approval-inbox__item.is-unread .approval-inbox__subject::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: var(--radius-full);
    background-color: var(--bg-brand-solid);
    vertical-align: middle;
  }
  @media (prefers-reduced-motion: reduce) {
    .approval-inbox__item {
      transition: none;
    }
  }
}
@layer utilities {
  .task-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
  }
  .task-item {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    background-color: var(--bg-primary);
    transition: background-color var(--duration-fast) var(--ease-default);
  }
  .task-list > .task-item:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .task-item:hover {
    background-color: var(--bg-hover);
  }
  .task-item__check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--bg-brand-solid);
    cursor: pointer;
  }
  .task-item__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .task-item__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .task-item__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .task-item__trail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .task-item__due {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .task-item__due.is-overdue {
    color: var(--text-danger);
    font-weight: 600;
  }
  .task-item--high {
    border-left: 3px solid var(--border-danger);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .task-item--med {
    border-left: 3px solid var(--border-warning);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .task-item--low {
    border-left: 3px solid var(--border-primary);
  }
  .task-item.is-done .task-item__title {
    color: var(--text-quaternary);
    text-decoration: line-through;
  }
  .task-item.is-done {
    background-color: var(--bg-secondary);
  }
  .subtask-tree {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .subtask-tree__parent {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .subtask-tree__rollup {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .subtask-list {
    margin-top: var(--spacing);
    margin-left: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-left: calc(var(--spacing) * 4);
    border-left: 2px solid var(--border-divider);
  }
  .subtask {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .subtask__check {
    width: 16px;
    height: 16px;
    accent-color: var(--bg-brand-solid);
    cursor: pointer;
    flex-shrink: 0;
  }
  .subtask__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .subtask.is-done .subtask__title {
    color: var(--text-quaternary);
    text-decoration: line-through;
  }
  .task-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
  }
  .task-group__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-divider);
    cursor: pointer;
  }
  .task-group__caret {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform var(--duration-fast) var(--ease-default);
  }
  .task-group.is-collapsed .task-group__caret {
    transform: rotate(-90deg);
  }
  .task-group.is-collapsed .task-group__body {
    display: none;
  }
  .task-group__title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .task-group__count {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .task-group__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .task-group__body > .task-item:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .task-group__progress {
    height: 3px;
    background-color: var(--bg-tertiary);
  }
  .task-group__progress-fill {
    height: 100%;
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-out);
  }
  .task-inbox {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .task-inbox__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .task-inbox__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .task-inbox__groups {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  @media (prefers-reduced-motion: reduce) {
    .task-item, .task-group__caret, .task-group__progress-fill {
      transition: none;
    }
  }
}
@layer utilities {
  .pipeline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: stretch;
    gap: 3px;
  }
  .pipeline__stage {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
    transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .pipeline__stage:first-child {
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .pipeline__stage:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%);
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .pipeline__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .pipeline__count {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-quaternary);
  }
  .pipeline__stage.is-done {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 60%, transparent);
    }
  }
  .pipeline__stage.is-current {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .pipeline__stage.is-current .pipeline__count {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
  .status-flow {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .status-flow__node {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
  }
  .status-flow__arrow {
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  .status-flow__node.is-from {
    color: var(--text-tertiary);
  }
  .status-flow__node.is-to {
    color: var(--text-brand);
    border-color: var(--border-focus);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 10%, transparent);
    }
  }
  .status-flow__node.is-success {
    color: var(--text-success);
    border-color: var(--border-success);
    background-color: var(--bg-success-subtle);
  }
  .status-flow__node.is-danger {
    color: var(--text-danger);
    border-color: var(--border-danger);
    background-color: var(--bg-danger-subtle);
  }
  .stage-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .stage-bar__track {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    gap: 3px;
  }
  .stage-bar__seg {
    flex: 1;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    transition: background-color var(--duration-normal) var(--ease-out);
  }
  .stage-bar__seg.is-done {
    background-color: var(--bg-brand-solid);
  }
  .stage-bar__seg.is-current {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 55%, transparent);
    }
  }
  .stage-bar__labels {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .stage-bar__current {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .pipeline-board {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .pipeline-stage {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    border-radius: var(--radius-lg);
    width: 240px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
  }
  .pipeline-stage__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    border-bottom: 1px solid var(--border-divider);
  }
  .pipeline-stage__title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .pipeline-stage__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary);
  }
  .pipeline-stage__value {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
  }
  .pipeline-stage__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    min-height: 60px;
  }
  .pipeline-stage.is-active {
    border-color: var(--border-focus);
  }
  .pipeline-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast) var(--ease-default);
  }
  .pipeline-card:hover {
    border-color: var(--border-secondary);
  }
  .pipeline-card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .pipeline-card__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .pipeline-card__value {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
  }
  @media (prefers-reduced-motion: reduce) {
    .pipeline__stage, .stage-bar__seg, .pipeline-card {
      transition: none;
    }
  }
}
@layer utilities {
  .automation-rule {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
  }
  .automation-rule__section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .automation-rule__section:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .automation-rule__kicker {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-tertiary);
  }
  .automation-rule__section--when .automation-rule__kicker {
    color: var(--bg-brand-solid);
  }
  .automation-rule__section--if .automation-rule__kicker {
    color: var(--text-warning);
  }
  .automation-rule__section--then .automation-rule__kicker {
    color: var(--text-success);
  }
  .ta-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .ta-row__token {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
  }
  .ta-row__op {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--text-quaternary);
  }
  .ta-row__value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .ta-row__remove {
    margin-left: auto;
    flex-shrink: 0;
  }
  .condition-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 3);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
  }
  .condition-group__bool {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    align-self: flex-start;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 0.5);
    background-color: var(--bg-tertiary);
  }
  .condition-group__bool-opt {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    background-color: transparent;
    border: 0;
  }
  .condition-group__bool-opt[aria-pressed="true"] {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-xs);
  }
  .condition-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .condition-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
  }
  .condition-row__remove {
    margin-left: auto;
    flex-shrink: 0;
  }
  .condition-list .condition-row:not(:first-child)::before {
    content: attr(data-join);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--text-quaternary);
  }
  .automation-flow {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }
  .automation-flow__node {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
  }
  .automation-flow__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    color: var(--text-on-brand);
  }
  .automation-flow__node--trigger .automation-flow__icon {
    background-color: var(--bg-brand-solid);
  }
  .automation-flow__node--filter .automation-flow__icon {
    background-color: var(--bg-warning-solid);
    color: var(--text-on-solid);
  }
  .automation-flow__node--action .automation-flow__icon {
    background-color: var(--bg-success-solid);
    color: var(--text-on-solid);
  }
  .automation-flow__connector {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--text-quaternary);
  }
  .automation-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
  }
  .automation-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-primary);
  }
  .automation-item:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .automation-item__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
  }
  .automation-item__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .automation-item__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .automation-item__summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .automation-item__runs {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-quaternary);
  }
  .automation-item.is-paused {
    background-color: var(--bg-secondary);
  }
  .automation-item.is-paused .automation-item__name {
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .checklist {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .checklist__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .checklist__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .checklist__count {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .checklist__bar {
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .checklist__bar-fill {
    height: 100%;
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-out);
  }
  .checklist__items {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .checklist-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
  }
  .checklist-item__check {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--bg-brand-solid);
    cursor: pointer;
    flex-shrink: 0;
  }
  .checklist-item__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .checklist-item__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
  }
  .checklist-item__meta {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .checklist-item__note {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-quaternary);
  }
  .checklist-item.is-checked .checklist-item__label {
    color: var(--text-quaternary);
    text-decoration: line-through;
  }
  .checklist-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
  }
  .checklist-group__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-divider);
  }
  .checklist-group__title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .checklist-group__rollup {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .checklist-group__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
  }
  .checklist-group.is-complete .checklist-group__header {
    background-color: var(--bg-success-subtle);
  }
  .checklist-group.is-complete .checklist-group__rollup {
    color: var(--text-success);
  }
  .checklist-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
  }
  .checklist-card__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .checklist-card__ring {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    --pct: 0;
    background: conic-gradient(var(--bg-brand-solid) calc(var(--pct) * 1%), var(--bg-tertiary) 0);
  }
  .checklist-card__ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: var(--radius-full);
    background-color: var(--bg-primary);
  }
  .checklist-card__ring-label {
    position: relative;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
    z-index: 1;
  }
  .checklist-card__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .checklist-card__sub {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .checklist-inline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
  }
  .checklist-inline__item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .checklist-inline__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: var(--text-quaternary);
  }
  .checklist-inline__item.is-met {
    color: var(--text-success);
  }
  .checklist-inline__item.is-met .checklist-inline__icon {
    color: var(--text-success);
  }
  .checklist-inline__item.is-failed {
    color: var(--text-danger);
  }
  .checklist-inline__item.is-failed .checklist-inline__icon {
    color: var(--text-danger);
  }
  @media (prefers-reduced-motion: reduce) {
    .checklist__bar-fill {
      transition: none;
    }
  }
}
@layer utilities {
  .journey-tracker {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: stretch;
    gap: calc(var(--spacing) * 2);
    overflow-x: auto;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .journey-phase {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    min-width: 140px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-top: 3px solid var(--border-primary);
  }
  .journey-phase__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .journey-phase__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    background-color: var(--bg-tertiary);
    font-size: 11px;
  }
  .journey-phase__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
  }
  .journey-phase__meta {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-quaternary);
  }
  .journey-phase.is-done {
    border-top-color: var(--bg-success-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-start-end-radius: var(--radius-colored-edge);
  }
  .journey-phase.is-done .journey-phase__icon {
    color: var(--text-on-solid);
    background-color: var(--bg-success-solid);
  }
  .journey-phase.is-current {
    border-top-color: var(--bg-brand-solid);
    background-color: var(--bg-primary);
    border-start-start-radius: var(--radius-colored-edge);
    border-start-end-radius: var(--radius-colored-edge);
  }
  .journey-phase.is-current .journey-phase__icon {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .journey-phase.is-current .journey-phase__label {
    color: var(--text-primary);
  }
  .completion-summary {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
  }
  .completion-summary__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .completion-summary__value {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .completion-summary__pct {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-success);
  }
  .completion-summary__label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .completion-summary__bar {
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .completion-summary__bar-fill {
    height: 100%;
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-out);
  }
  .completion-summary.is-complete .completion-summary__bar-fill {
    background-color: var(--bg-success-solid);
  }
  .sla-tracker {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
  }
  .sla-tracker__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
  }
  .sla-tracker__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing);
  }
  .sla-tracker__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .sla-tracker__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .sla-tracker__remaining {
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-secondary);
  }
  .sla-tracker__bar {
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .sla-tracker__bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--bg-success-solid);
    transition: width var(--duration-normal) var(--ease-out);
  }
  .sla-tracker.is-ontrack .sla-tracker__icon {
    color: var(--text-success);
  }
  .sla-tracker.is-atrisk {
    border-color: var(--border-warning);
  }
  .sla-tracker.is-atrisk .sla-tracker__icon {
    color: var(--text-warning);
  }
  .sla-tracker.is-atrisk .sla-tracker__bar-fill {
    background-color: var(--bg-warning-solid);
  }
  .sla-tracker.is-atrisk .sla-tracker__remaining {
    color: var(--text-warning);
  }
  .sla-tracker.is-breached {
    border-color: var(--border-danger);
  }
  .sla-tracker.is-breached .sla-tracker__icon {
    color: var(--text-danger);
  }
  .sla-tracker.is-breached .sla-tracker__bar-fill {
    background-color: var(--bg-danger-solid);
  }
  .sla-tracker.is-breached .sla-tracker__remaining {
    color: var(--text-danger);
  }
  @media (prefers-reduced-motion: reduce) {
    .completion-summary__bar-fill, .sla-tracker__bar-fill {
      transition: none;
    }
  }
}
@layer utilities {
  .workflow-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
  }
  .workflow-header__top {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .workflow-header__titles {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing);
  }
  .workflow-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
  }
  .workflow-header__title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
  }
  .workflow-header__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .workflow-header__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .workflow-header__meta-item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .workflow-header__owner {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .workflow-header__owner-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
  }
  .workflow-header__stage {
    padding-top: var(--spacing);
  }
  .workflow-detail {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }
  .workflow-detail__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .workflow-detail__aside {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .workflow-section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
  }
  .workflow-section__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .workflow-section__title {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .workflow-section__count {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .workflow-section--muted {
    background-color: var(--bg-secondary);
  }
  @media (max-width: 64rem) {
    .workflow-detail {
      grid-template-columns: 1fr;
    }
  }
}
@layer utilities {
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes spinner-dash {
    0% {
      stroke-dasharray: 1 100;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 71 100;
      stroke-dashoffset: -28;
    }
    100% {
      stroke-dasharray: 71 100;
      stroke-dashoffset: -98;
    }
  }
  @keyframes spinner-pop {
    0% {
      opacity: 0;
      transform: translateY(2px) scale(0.98);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .spinner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1500;
    cursor: progress;
    overflow: hidden;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-spinner-overlay) var(--ease-spinner-overlay);
  }
  .spinner-overlay[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
  }
  .spinner-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    background: var(--bg-spinner-overlay);
    backdrop-filter: blur(var(--blur-spinner-overlay));
    pointer-events: none;
  }
  .spinner-container {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .spinner-content {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    z-index: 2;
    color: var(--text-secondary);
    animation: spinner-pop var(--duration-spinner-pop) var(--ease-spinner-pop) both;
  }
  .spinner {
    --spinner-ink: var(--color-brand-500);
    --spinner-track-color: var(--bg-tertiary);
    --spinner-arc: 65;
    width: var(--size-spinner);
    height: var(--size-spinner);
    display: block;
    transform-origin: 50% 50%;
    animation: rotate var(--duration-spinner-rotate) linear infinite;
  }
  .spinner-track {
    stroke: var(--spinner-track-color);
    stroke-width: var(--stroke-spinner);
    fill: none;
    shape-rendering: geometricPrecision;
  }
  .spinner-ring {
    stroke: var(--spinner-ink);
    stroke-width: var(--stroke-spinner);
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: var(--spinner-arc) 100;
    stroke-dashoffset: 0;
    animation: spinner-dash var(--duration-spinner-dash) var(--ease-spinner-dash) infinite;
    shape-rendering: geometricPrecision;
  }
  .spinner[data-size="sm"] {
    --size-spinner: var(--size-spinner-sm);
    --stroke-spinner: var(--stroke-spinner-sm);
  }
  .spinner[data-size="md"] {
    --size-spinner: var(--size-spinner-md);
    --stroke-spinner: var(--stroke-spinner-md);
  }
  .spinner[data-size="lg"] {
    --size-spinner: var(--size-spinner-lg);
    --stroke-spinner: var(--stroke-spinner-lg);
  }
  .spinner[data-size="xl"] {
    --size-spinner: var(--size-spinner-xl);
    --stroke-spinner: var(--stroke-spinner-xl);
  }
  .spinner[data-intent="success"] {
    --spinner-ink: var(--text-success);
  }
  .spinner[data-intent="info"] {
    --spinner-ink: var(--text-info);
  }
  .spinner[data-intent="warning"] {
    --spinner-ink: var(--text-warning);
  }
  .spinner[data-intent="danger"] {
    --spinner-ink: var(--text-danger);
  }
  .btn .spinner {
    --spinner-ink: currentColor;
    --spinner-track-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      --spinner-track-color: color-mix(in oklch, currentColor 22%, transparent);
    }
  }
  .spinner-inline {
    --spinner-inline-stroke: 2px;
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    color: inherit;
  }
  .spinner-inline::before, .spinner-inline::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    -webkit-mask: radial-gradient( circle closest-side, transparent 0, transparent calc(100% - var(--spinner-inline-stroke)), #000 calc(100% - var(--spinner-inline-stroke)), #000 100% );
    mask: radial-gradient( circle closest-side, transparent 0, transparent calc(100% - var(--spinner-inline-stroke)), #000 calc(100% - var(--spinner-inline-stroke)), #000 100% );
  }
  .spinner-inline::before {
    background: currentColor;
    opacity: var(--opacity-spinner-track, 0.14);
  }
  .spinner-inline::after {
    background: conic-gradient( from 0deg, currentColor 0deg, currentColor 270deg, transparent 270deg, transparent 360deg );
    animation: rotate var(--duration-spinner-rotate, 1.2s) linear infinite;
  }
  .spinner-inline--xs {
    width: 10px;
    height: 10px;
    --spinner-inline-stroke: 1.25px;
  }
  .spinner-inline--sm {
    width: 12px;
    height: 12px;
    --spinner-inline-stroke: 1.5px;
  }
  .spinner-inline--md {
    width: 16px;
    height: 16px;
    --spinner-inline-stroke: 2px;
  }
  .spinner-inline--lg {
    width: 22px;
    height: 22px;
    --spinner-inline-stroke: 2.5px;
  }
  .spinner-inline--xl {
    width: 28px;
    height: 28px;
    --spinner-inline-stroke: 3px;
  }
  .spinner-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
  }
  .spinner-dots > span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: currentColor;
    animation: spinner-dots-bounce 1.2s ease-in-out infinite both;
  }
  .spinner-dots > span:nth-child(1) {
    animation-delay: -0.32s;
  }
  .spinner-dots > span:nth-child(2) {
    animation-delay: -0.16s;
  }
  .spinner-dots--sm > span {
    width: 4px;
    height: 4px;
  }
  .spinner-dots--lg > span {
    width: 8px;
    height: 8px;
  }
  @keyframes spinner-dots-bounce {
    0%, 80%, 100% {
      transform: scale(0.4);
      opacity: 0.4;
    }
    40% {
      transform: scale(1);
      opacity: 1;
    }
  }
  .spinner-pulse {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background-color: currentColor;
    vertical-align: middle;
    animation: spinner-pulse 1.4s ease-in-out infinite;
  }
  .spinner-pulse--sm {
    width: 10px;
    height: 10px;
  }
  .spinner-pulse--lg {
    width: 20px;
    height: 20px;
  }
  @keyframes spinner-pulse {
    0%, 100% {
      transform: scale(0.6);
      opacity: 0.55;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
  }
  .spinner-overlay--transparent::before {
    background: transparent;
    backdrop-filter: none;
  }
  .spinner-overlay--solid::before {
    backdrop-filter: none;
    background: var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-card) 92%, transparent);
    }
  }
  .spinner-overlay--compact .spinner-content {
    padding: 0.5rem;
    gap: 0.375rem;
  }
  .spinner-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
  }
  .spinner-label--sm {
    font-size: 0.6875rem;
  }
  .spinner-label--lg {
    font-size: 0.875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .spinner, .spinner-ring, .spinner-content, .spinner-inline::after, .spinner-dots > span, .spinner-pulse {
      animation: none;
    }
  }
}
@layer utilities {
  .loading-indicator {
    --loading-indicator-ink: var(--bg-brand-solid);
    --loading-indicator-track: var(--bg-tertiary);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--loading-indicator-ink);
  }
  .loading-indicator__spinner {
    width: var(--loading-indicator-size, 3rem);
    height: var(--loading-indicator-size, 3rem);
    display: block;
    transform-origin: 50% 50%;
    animation: loading-indicator-spin var(--duration-spinner-rotate, 1.2s) linear infinite;
  }
  .loading-indicator__track {
    stroke: var(--loading-indicator-track);
    fill: none;
    shape-rendering: geometricPrecision;
  }
  .loading-indicator__arc {
    stroke: var(--loading-indicator-ink);
    stroke-linecap: round;
    fill: none;
    shape-rendering: geometricPrecision;
  }
  .loading-indicator--sm {
    --loading-indicator-size: 2rem;
  }
  .loading-indicator--md {
    --loading-indicator-size: 3rem;
  }
  .loading-indicator--lg {
    --loading-indicator-size: 3.5rem;
  }
  .loading-indicator--xl {
    --loading-indicator-size: 4rem;
    gap: 1.25rem;
  }
  .loading-indicator[data-intent="success"] {
    --loading-indicator-ink: var(--text-success);
  }
  .loading-indicator[data-intent="info"] {
    --loading-indicator-ink: var(--text-info);
  }
  .loading-indicator[data-intent="warning"] {
    --loading-indicator-ink: var(--text-warning);
  }
  .loading-indicator[data-intent="danger"] {
    --loading-indicator-ink: var(--text-danger);
  }
  .btn .loading-indicator, .loading-indicator[data-on-solid="true"] {
    --loading-indicator-ink: currentColor;
    --loading-indicator-track: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      --loading-indicator-track: color-mix(in oklch, currentColor 22%, transparent);
    }
  }
  .loading-indicator__label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
  }
  .loading-indicator--lg .loading-indicator__label, .loading-indicator--xl .loading-indicator__label {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  @keyframes loading-indicator-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .loading-indicator__spinner {
      animation: none;
    }
  }
}
@layer utilities {
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  @keyframes skeleton-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.55;
    }
  }
  .skeleton--text-2xs {
    height: calc(var(--spacing) * 1.5);
    width: calc(1 / 3 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton--text-xs {
    height: calc(var(--spacing) * 2);
    width: calc(1 / 2 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton--text-sm {
    height: calc(var(--spacing) * 2.5);
    width: calc(3 / 4 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton--text {
    height: calc(var(--spacing) * 3);
    width: 100%;
    border-radius: var(--radius-sm);
  }
  .skeleton--text-block {
    height: calc(var(--spacing) * 3);
    width: 100%;
    border-radius: var(--radius-sm);
  }
  .skeleton--text-lg {
    height: calc(var(--spacing) * 4);
    width: 100%;
    border-radius: var(--radius-sm);
  }
  .skeleton--heading {
    height: calc(var(--spacing) * 6);
    width: calc(2 / 3 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton--avatar {
    border-radius: var(--radius-full);
    width: 40px;
    height: 40px;
  }
  .skeleton--avatar-lg {
    border-radius: var(--radius-full);
    width: 48px;
    height: 48px;
  }
  .skeleton--circle {
    border-radius: var(--radius-full);
  }
  .skeleton--button {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 24);
    border-radius: var(--radius-lg);
  }
  .skeleton--card {
    height: calc(var(--spacing) * 40);
    width: 100%;
    border-radius: var(--radius-xl);
  }
  .skeleton--image {
    width: 100%;
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 9;
  }
  .skeleton--thumbnail {
    border-radius: var(--radius-lg);
    width: 100%;
    height: 100%;
  }
  .skeleton--thumbnail-sm {
    border-radius: var(--radius-lg);
    width: 32px;
    height: 32px;
  }
  .skeleton--table-row {
    height: calc(var(--spacing) * 10);
    width: 100%;
    border-radius: var(--radius-sm);
  }
  .skeleton--pulse {
    --skeleton-pulse-duration: 1.6s;
    background: var(--bg-skeleton);
    animation: skeleton-pulse var(--skeleton-pulse-duration) var(--ease-default) infinite;
  }
  .skeleton--static {
    background: var(--bg-skeleton);
    animation: none;
  }
  .skeleton-table {
    width: 100%;
  }
  .skeleton-table__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-primary-subtle, var(--border-primary));
  }
  .skeleton-table__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-block: calc(var(--spacing) * 3);
    border-color: var(--border-primary-subtle, var(--border-primary));
  }
  .skeleton-table__cell {
    flex: 1;
  }
  .skeleton-table__cell .skeleton {
    height: calc(var(--spacing) * 3);
    border-radius: var(--radius-sm);
  }
  .skeleton-table__header .skeleton {
    height: calc(var(--spacing) * 2.5);
    width: calc(2 / 3 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton-card {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-color: var(--border-card, var(--border-primary));
    background-color: var(--bg-card, var(--bg-surface));
  }
  .skeleton-card__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .skeleton-card__body {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .skeleton-field {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .skeleton-field__label {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 24);
    border-radius: var(--radius-sm);
  }
  .skeleton-field__input {
    height: calc(var(--spacing) * 9);
    width: 100%;
    border-radius: var(--radius-lg);
  }
  .skeleton-list-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
  }
  .skeleton-list-item__text {
    flex: 1;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .skeleton-detail {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .skeleton-detail__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
  }
  .skeleton-detail__section {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .skeleton-stat {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-color: var(--border-card, var(--border-primary));
    background-color: var(--bg-card, var(--bg-surface));
  }
  .skeleton-stat__label {
    height: calc(var(--spacing) * 2);
    width: calc(1 / 3 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton-stat__value {
    height: calc(var(--spacing) * 7);
    width: calc(2 / 3 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton-stat__delta {
    height: calc(var(--spacing) * 2);
    width: calc(1 / 4 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton-kanban-card {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-color: var(--border-card, var(--border-primary));
    background-color: var(--bg-card, var(--bg-surface));
  }
  .skeleton-kanban-card__title {
    height: calc(var(--spacing) * 3);
    width: calc(3 / 4 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton-kanban-card__meta {
    height: calc(var(--spacing) * 2);
    width: calc(1 / 2 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton-kanban-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-top: var(--spacing);
  }
  .skeleton-tile {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-radius: var(--radius-lg);
  }
  .skeleton-tile__media {
    border-radius: var(--radius-lg);
    aspect-ratio: 1 / 1;
    width: 100%;
  }
  .skeleton-tile__title {
    margin-inline: auto;
    height: calc(var(--spacing) * 2.5);
    width: calc(2 / 3 * 100%);
    border-radius: var(--radius-sm);
  }
  .skeleton-toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .skeleton-toolbar .skeleton {
    height: 32px;
  }
  .skeleton-page-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  .skeleton-page-header__title-group {
    flex: 1;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .skeleton-list {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .skeleton-list > * {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  [data-skeleton-image]:has(img), [data-product-thumb]:has(img) {
    overflow: hidden;
    background: linear-gradient( 90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63% );
    background-size: 200% 100%;
  }
  [data-skeleton-image]:has(img.is-loading), [data-product-thumb]:has(img.is-loading) {
    animation: shimmer var(--skeleton-shimmer-duration, 1.5s) var(--ease-default) infinite;
  }
  [data-skeleton-image] img, [data-product-thumb] img {
    transition: opacity var(--duration-normal, 200ms) var(--ease-default);
  }
  [data-skeleton-image] img.is-loading, [data-product-thumb] img.is-loading {
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton, .skeleton--pulse, [data-skeleton-image]:has(img.is-loading), [data-product-thumb]:has(img.is-loading) {
      animation: none;
    }
  }
}
@layer utilities {
  .alert {
    --bg-alert: var(--bg-surface);
    --border-alert: var(--border-primary);
    --text-alert: var(--text-tertiary);
    --text-alert-title: var(--text-secondary);
    --icon-alert: var(--text-tertiary);
    --bg-alert-icon: var(--bg-primary-subtle);
    --border-alert-icon: var(--border-primary);
    --text-alert-dismiss: var(--text-tertiary);
    --bg-alert-dismiss-hover: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-dismiss-hover: color-mix(in oklch, transparent, var(--text-alert-title) 8%);
    }
    --alert-progress-track: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --alert-progress-track: color-mix(in oklch, transparent, var(--text-alert-title) 10%);
    }
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    overflow: hidden;
    padding: calc(var(--spacing) * 4);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    border-radius: var(--radius-xl);
    color: var(--text-alert);
    background-color: var(--bg-alert);
    box-shadow: inset 0 0 0 1px var(--border-alert), var(--shadow-xs);
  }
  .alert__icon {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    --tw-leading: 1;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg);
    font-size: 1.125rem;
    color: var(--icon-alert);
    background-color: var(--bg-alert-icon);
    box-shadow: inset 0 0 0 1px var(--border-alert-icon);
  }
  .alert__icon > svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
  }
  .alert__content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .alert__title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-alert-title);
  }
  .alert__message {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-alert);
  }
  .alert__message a, .alert__message .alert__link {
    color: var(--icon-alert);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in oklch, transparent, currentColor 45%);
    }
  }
  .alert__actions {
    margin-top: calc(var(--spacing) * 2.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .alert__link {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--icon-alert);
    background: transparent;
    border: 0;
    transition: opacity var(--duration-fast) var(--ease-in-out);
  }
  .alert__link:hover {
    opacity: 0.82;
  }
  .alert__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .alert__link--muted {
    color: var(--text-alert);
  }
  .alert__trailing {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .alert__dismiss {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 1.5);
    color: var(--text-alert-dismiss);
    background: transparent;
    border: 0;
    transition: background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
  }
  .alert__dismiss:hover {
    background-color: var(--bg-alert-dismiss-hover);
    color: var(--text-alert-title);
  }
  .alert__dismiss:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .alert__progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--spacing);
    overflow: hidden;
    background-color: var(--alert-progress-track);
  }
  .alert__progress-fill {
    height: 100%;
    width: var(--progress, 0%);
    background-color: var(--icon-alert);
    transition: width var(--duration-normal, 300ms) var(--ease-out, ease-out);
  }
  .alert--info {
    --border-alert: var(--border-info-subtle);
    --icon-alert: var(--text-info);
    --bg-alert-icon: var(--bg-info-subtle);
    --border-alert-icon: var(--border-info-subtle);
  }
  .alert--success {
    --border-alert: var(--border-success-subtle);
    --icon-alert: var(--text-success);
    --bg-alert-icon: var(--bg-success-subtle);
    --border-alert-icon: var(--border-success-subtle);
  }
  .alert--warning {
    --border-alert: var(--border-warning-subtle);
    --icon-alert: var(--text-warning);
    --bg-alert-icon: var(--bg-warning-subtle);
    --border-alert-icon: var(--border-warning-subtle);
  }
  .alert--danger {
    --border-alert: var(--border-danger-subtle);
    --icon-alert: var(--text-danger);
    --bg-alert-icon: var(--bg-danger-subtle);
    --border-alert-icon: var(--border-danger-subtle);
  }
  .alert--info-solid, .alert--success-solid, .alert--warning-solid, .alert--danger-solid {
    --text-alert-title: var(--text-alert);
    --border-alert: transparent;
    --bg-alert-icon: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-icon: color-mix(in oklch, transparent, var(--text-alert) 16%);
    }
    --border-alert-icon: transparent;
    --text-alert-dismiss: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --text-alert-dismiss: color-mix(in oklch, transparent, var(--text-alert) 78%);
    }
    --bg-alert-dismiss-hover: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-dismiss-hover: color-mix(in oklch, transparent, var(--text-alert) 18%);
    }
    --alert-progress-track: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --alert-progress-track: color-mix(in oklch, transparent, var(--text-alert) 22%);
    }
  }
  .alert--info-solid {
    --bg-alert: var(--bg-info-solid);
    --text-alert: var(--text-on-brand);
    --icon-alert: var(--text-on-brand);
  }
  .alert--success-solid {
    --bg-alert: var(--bg-success-solid);
    --text-alert: var(--text-on-brand);
    --icon-alert: var(--text-on-brand);
  }
  .alert--warning-solid {
    --bg-alert: var(--bg-warning-solid);
    --text-alert: var(--utility-amber-950);
    --icon-alert: var(--utility-amber-950);
    --text-alert-dismiss: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --text-alert-dismiss: color-mix(in oklch, transparent, var(--utility-amber-950) 72%);
    }
    --bg-alert-dismiss-hover: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-dismiss-hover: color-mix(in oklch, transparent, var(--utility-amber-950) 12%);
    }
    --alert-progress-track: transparent;
    @supports (color: color-mix(in lab, red, red)) {
      --alert-progress-track: color-mix(in oklch, transparent, var(--utility-amber-950) 18%);
    }
  }
  .alert--danger-solid {
    --bg-alert: var(--bg-danger-solid);
    --text-alert: var(--text-on-brand);
    --icon-alert: var(--text-on-brand);
  }
  .alert--info-outline, .alert--success-outline, .alert--warning-outline, .alert--danger-outline {
    --bg-alert: transparent;
    box-shadow: inset 0 0 0 1px var(--border-alert);
  }
  .alert--info-outline {
    --border-alert: var(--border-info);
    --icon-alert: var(--text-info);
    --text-alert-title: var(--text-info-solid);
    --bg-alert-icon: var(--bg-info-subtle);
    --border-alert-icon: var(--border-info-subtle);
  }
  .alert--success-outline {
    --border-alert: var(--border-success);
    --icon-alert: var(--text-success);
    --text-alert-title: var(--text-success-solid);
    --bg-alert-icon: var(--bg-success-subtle);
    --border-alert-icon: var(--border-success-subtle);
  }
  .alert--warning-outline {
    --border-alert: var(--border-warning);
    --icon-alert: var(--text-warning);
    --text-alert-title: var(--text-warning-solid);
    --bg-alert-icon: var(--bg-warning-subtle);
    --border-alert-icon: var(--border-warning-subtle);
  }
  .alert--danger-outline {
    --border-alert: var(--border-danger);
    --icon-alert: var(--text-danger);
    --text-alert-title: var(--text-danger-solid);
    --bg-alert-icon: var(--bg-danger-subtle);
    --border-alert-icon: var(--border-danger-subtle);
  }
  .alert--info-glass, .alert--success-glass, .alert--warning-glass, .alert--danger-glass, .alert--glass, .alert--glass-dark {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--border-alert), inset 0 1px 0 0 color-mix(in srgb, transparent, #fff 15%), var(--shadow-sm);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px var(--border-alert), inset 0 1px 0 0 color-mix(in oklch, transparent, var(--color-white) 15%), var(--shadow-sm);
    }
  }
  .alert--info-glass {
    --bg-alert: var(--bg-info-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert: color-mix(in oklch, var(--bg-info-subtle) 72%, transparent);
    }
    --border-alert: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --border-alert: color-mix(in oklch, var(--text-info) 30%, transparent);
    }
    --text-alert-title: var(--text-info-solid);
    --icon-alert: var(--text-info);
    --bg-alert-icon: var(--bg-info-subtle);
    --border-alert-icon: var(--border-info-subtle);
  }
  .alert--success-glass {
    --bg-alert: var(--bg-success-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert: color-mix(in oklch, var(--bg-success-subtle) 72%, transparent);
    }
    --border-alert: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      --border-alert: color-mix(in oklch, var(--text-success) 30%, transparent);
    }
    --text-alert-title: var(--text-success-solid);
    --icon-alert: var(--text-success);
    --bg-alert-icon: var(--bg-success-subtle);
    --border-alert-icon: var(--border-success-subtle);
  }
  .alert--warning-glass {
    --bg-alert: var(--bg-warning-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert: color-mix(in oklch, var(--bg-warning-subtle) 72%, transparent);
    }
    --border-alert: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --border-alert: color-mix(in oklch, var(--text-warning) 30%, transparent);
    }
    --text-alert-title: var(--text-warning-solid);
    --icon-alert: var(--text-warning);
    --bg-alert-icon: var(--bg-warning-subtle);
    --border-alert-icon: var(--border-warning-subtle);
  }
  .alert--danger-glass {
    --bg-alert: var(--bg-danger-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert: color-mix(in oklch, var(--bg-danger-subtle) 72%, transparent);
    }
    --border-alert: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --border-alert: color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
    --text-alert-title: var(--text-danger-solid);
    --icon-alert: var(--text-danger);
    --bg-alert-icon: var(--bg-danger-subtle);
    --border-alert-icon: var(--border-danger-subtle);
  }
  .alert--glass {
    --bg-alert: var(--bg-surface);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert: color-mix(in oklch, var(--bg-surface) 78%, transparent);
    }
    --border-alert: var(--border-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --border-alert: color-mix(in oklch, var(--border-primary) 80%, transparent);
    }
    --bg-alert-icon: var(--bg-primary-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-icon: color-mix(in oklch, var(--bg-primary-subtle) 80%, transparent);
    }
  }
  .alert--glass-dark {
    --bg-alert: var(--alpha-black-50);
    --border-alert: color-mix(in srgb, transparent, #fff 14%);
    @supports (color: color-mix(in lab, red, red)) {
      --border-alert: color-mix(in oklch, transparent, var(--color-white) 14%);
    }
    --text-alert: var(--alpha-white-80);
    --text-alert-title: var(--alpha-white-100);
    --icon-alert: var(--alpha-white-100);
    --bg-alert-icon: color-mix(in srgb, transparent, #fff 14%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-icon: color-mix(in oklch, transparent, var(--color-white) 14%);
    }
    --border-alert-icon: transparent;
    --text-alert-dismiss: var(--alpha-white-80);
    --bg-alert-dismiss-hover: color-mix(in srgb, transparent, #fff 18%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-dismiss-hover: color-mix(in oklch, transparent, var(--color-white) 18%);
    }
  }
  .alert--info-strip, .alert--success-strip, .alert--warning-strip, .alert--danger-strip {
    --bg-alert: var(--bg-surface);
    --border-alert: var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-alert), var(--shadow-xs);
  }
  .alert--info-strip::before, .alert--success-strip::before, .alert--warning-strip::before, .alert--danger-strip::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-block: 0;
    left: 0;
    width: var(--spacing);
    background-color: var(--icon-alert);
  }
  .alert--info-strip {
    --icon-alert: var(--text-info);
    --bg-alert-icon: var(--bg-info-subtle);
    --border-alert-icon: var(--border-info-subtle);
  }
  .alert--success-strip {
    --icon-alert: var(--text-success);
    --bg-alert-icon: var(--bg-success-subtle);
    --border-alert-icon: var(--border-success-subtle);
  }
  .alert--warning-strip {
    --icon-alert: var(--text-warning);
    --bg-alert-icon: var(--bg-warning-subtle);
    --border-alert-icon: var(--border-warning-subtle);
  }
  .alert--danger-strip {
    --icon-alert: var(--text-danger);
    --bg-alert-icon: var(--bg-danger-subtle);
    --border-alert-icon: var(--border-danger-subtle);
  }
  .alert--banner {
    border-radius: var(--radius-none);
    box-shadow: inset 0 -1px 0 0 var(--border-alert);
  }
  .alert--toast {
    box-shadow: inset 0 0 0 1px var(--border-alert), var(--shadow-lg);
  }
  .alert--featured {
    --text-alert: var(--alpha-white-80);
    --text-alert-title: var(--alpha-white-100);
    --icon-alert: var(--alpha-white-100);
    --border-alert: transparent;
    --bg-alert-icon: color-mix(in srgb, transparent, #fff 16%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-icon: color-mix(in oklch, transparent, var(--color-white) 16%);
    }
    --border-alert-icon: transparent;
    --text-alert-dismiss: var(--alpha-white-80);
    --bg-alert-dismiss-hover: color-mix(in srgb, transparent, #fff 16%);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-alert-dismiss-hover: color-mix(in oklch, transparent, var(--color-white) 16%);
    }
    background-image: linear-gradient( 135deg, var(--utility-violet-600) 0%, var(--utility-indigo-600) 55%, var(--utility-blue-600) 100% );
    box-shadow: var(--shadow-sm);
  }
  .alert--compact {
    gap: calc(var(--spacing) * 2.5);
    padding: calc(var(--spacing) * 3);
  }
  .alert--compact .alert__icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
  }
  .alert--sm {
    gap: calc(var(--spacing) * 2.5);
    padding: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .alert--sm .alert__icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
  }
  .alert--sm .alert__message {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .alert--lg {
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 5);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .alert--lg .alert__icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.375rem;
  }
  .alert--lg .alert__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .alert--lg .alert__message {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .alert--inline {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .alert--inline .alert__icon {
    width: auto;
    height: auto;
    padding: 0;
    font-size: 1rem;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .alert--inline .alert__content {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .alert--inline .alert__title {
    margin-bottom: 0;
  }
  .alert--dismissible {
    padding-right: calc(var(--spacing) * 12);
  }
  .alert--dismissible > .alert__dismiss {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
  }
  .alert--loading .alert__icon {
    background: transparent;
    box-shadow: none;
  }
  .alert.is-dismissing {
    transition: opacity var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out);
    opacity: 0;
    transform: translateY(-4px);
  }
  @media (prefers-reduced-motion: reduce) {
    .alert, .alert__link, .alert__dismiss, .alert__progress-fill, .alert.is-dismissing {
      transition: none;
    }
    .alert.is-dismissing {
      opacity: 0;
      transform: none;
    }
    .alert--loading .alert__icon {
      animation: none;
    }
  }
}
@layer utilities {
  .feedback-prompt {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    max-width: 26rem;
  }
  .feedback-prompt__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .feedback-prompt__question {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .feedback-prompt__options {
    display: inline-flex;
    gap: 0.375rem;
  }
  .feedback-prompt__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .feedback-prompt__btn:hover {
    background-color: var(--bg-secondary-hover);
    color: var(--text-primary);
  }
  .feedback-prompt__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .feedback-prompt__btn[aria-pressed="true"] {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: inset 0 0 0 1px transparent;
  }
  .feedback-prompt.is-chosen .feedback-prompt__btn:not([aria-pressed="true"]) {
    opacity: 0.55;
  }
  .feedback-prompt__btn--up[aria-pressed="true"] {
    background-color: var(--bg-success-solid);
  }
  .feedback-prompt__btn--down[aria-pressed="true"] {
    background-color: var(--bg-danger-solid);
  }
  .feedback-prompt__followup {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
  }
  .feedback-prompt.is-chosen .feedback-prompt__followup {
    display: flex;
  }
  .feedback-prompt__textarea {
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8125rem;
    resize: vertical;
  }
  .feedback-prompt__textarea::placeholder {
    color: var(--text-placeholder);
  }
  .feedback-prompt__textarea:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .feedback-prompt__actions {
    display: flex;
    gap: 0.5rem;
  }
  .feedback-prompt.is-submitted .feedback-prompt__row, .feedback-prompt.is-submitted .feedback-prompt__followup {
    display: none;
  }
  .feedback-prompt__thanks {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-success);
    font-size: 0.875rem;
    font-weight: 600;
  }
  .feedback-prompt.is-submitted .feedback-prompt__thanks {
    display: flex;
    animation: feedback-prompt-in var(--duration-normal) var(--ease-out);
  }
  @keyframes feedback-prompt-in {
    from {
      opacity: 0;
      transform: translateY(0.25rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .feedback-prompt__btn {
      transition: none;
    }
    .feedback-prompt.is-submitted .feedback-prompt__thanks {
      animation: none;
    }
  }
}
@layer utilities {
  .health-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .health-status-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    margin-block-end: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-success);
  }
  .health-status-summary.is-degraded {
    color: var(--text-warning);
  }
  .health-status-summary.is-down {
    color: var(--text-danger);
  }
  .health-status {
    display: grid;
    grid-template-columns: 0.75rem 1fr auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.5rem;
    border-block-end: 1px solid var(--border-secondary);
  }
  .health-status:last-child {
    border-block-end: 0;
  }
  .health-status__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--text-success);
    position: relative;
  }
  .health-status.is-operational .health-status__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: inherit;
    animation: health-status-pulse var(--duration-slower, 1.6s) var(--ease-out) infinite;
  }
  .health-status.is-degraded .health-status__dot {
    background-color: var(--text-warning);
  }
  .health-status.is-partial .health-status__dot {
    background-color: var(--text-warning);
  }
  .health-status.is-down .health-status__dot {
    background-color: var(--text-danger);
  }
  .health-status.is-maintenance .health-status__dot {
    background-color: var(--text-info);
  }
  .health-status__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .health-status__state {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-success);
  }
  .health-status.is-degraded .health-status__state, .health-status.is-partial .health-status__state {
    color: var(--text-warning);
  }
  .health-status.is-down .health-status__state {
    color: var(--text-danger);
  }
  .health-status.is-maintenance .health-status__state {
    color: var(--text-info);
  }
  .health-status__meta {
    grid-column: 2 / span 2;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  @keyframes health-status-pulse {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(2.4);
      opacity: 0;
    }
  }
  .health-status-list--compact .health-status {
    padding: 0.375rem 0.375rem;
    gap: 0.5rem;
  }
  .health-status-list--compact .health-status__name {
    font-size: 0.8125rem;
  }
  .health-status-list--compact .health-status__state {
    font-size: 0.75rem;
  }
  .health-status-list--compact .health-status__meta {
    font-size: 0.6875rem;
  }
  .health-status-list--compact .health-status-summary {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .health-status.is-operational .health-status__dot::after {
      animation: none;
    }
  }
}
@layer utilities {
  .step-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .step-status-list__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
  }
  .step-status-list__count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .step-status-list__bar {
    flex: 1;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .step-status-list__bar-fill {
    height: 100%;
    transform-origin: left center;
    transform: scaleX(var(--checklist-progress, 0));
    background-color: var(--bg-brand-solid);
    border-radius: inherit;
    transition: transform var(--duration-normal) var(--ease-out);
  }
  [dir="rtl"] .step-status-list__bar-fill {
    transform-origin: right center;
  }
  .step-status-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .step-status-list__item {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    align-items: start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    background-color: var(--bg-surface, var(--bg-primary));
  }
  .step-status-list__marker {
    grid-row: 1 / span 2;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1.5px var(--border-secondary);
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  .step-status-list__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .step-status-list__desc {
    grid-column: 2;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-block-start: 0.0625rem;
  }
  .step-status-list__action {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
  }
  .step-status-list__item.is-active {
    box-shadow: inset 0 0 0 1.5px var(--border-brand, var(--bg-brand-solid));
  }
  .step-status-list__item.is-active .step-status-list__marker {
    box-shadow: inset 0 0 0 1.5px var(--bg-brand-solid);
    color: var(--bg-brand-solid);
  }
  .step-status-list__item.is-done .step-status-list__marker {
    background-color: var(--bg-success-solid);
    color: var(--text-on-brand);
    box-shadow: inset 0 0 0 1.5px transparent;
  }
  .step-status-list__item.is-done .step-status-list__label {
    color: var(--text-tertiary);
  }
  .step-status-list__item.is-error .step-status-list__marker {
    background-color: var(--bg-danger-solid);
    color: var(--text-on-brand);
    box-shadow: inset 0 0 0 1.5px transparent;
  }
  .step-status-list__item.is-error .step-status-list__label {
    color: var(--text-danger);
  }
  .step-status-list__item.is-optional .step-status-list__marker {
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1.5px var(--border-secondary);
  }
  .step-status-list__badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .step-status-list--compact .step-status-list__item {
    padding: 0.375rem 0.625rem;
    gap: 0.5rem;
  }
  .step-status-list--compact .step-status-list__marker {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.625rem;
  }
  .step-status-list--compact .step-status-list__item {
    grid-template-columns: 1.25rem 1fr auto;
  }
  .step-status-list--compact .step-status-list__label {
    font-size: 0.8125rem;
  }
  .step-status-list--compact .step-status-list__desc {
    font-size: 0.75rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .step-status-list__bar-fill {
      transition: none;
    }
  }
}
@layer utilities {
  .lazy-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-skeleton, var(--bg-tertiary));
    aspect-ratio: var(--lazy-ratio, 16 / 9);
  }
  .lazy-media__lqip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(12px);
    transform: scale(1.05);
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  .lazy-media:not(.has-lqip)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63%);
    background-size: 200% 100%;
    animation: lazy-media-shimmer var(--skeleton-shimmer-duration, 1.5s) var(--ease-default) infinite;
  }
  .lazy-media.is-loaded:not(.has-lqip)::before {
    animation: none;
    opacity: 0;
  }
  .lazy-media__img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  .lazy-media.is-loaded .lazy-media__img {
    opacity: 1;
  }
  .lazy-media.is-loaded .lazy-media__lqip {
    opacity: 0;
  }
  .lazy-media.is-error {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
    font-size: 1.5rem;
  }
  .lazy-media.is-error .lazy-media__img, .lazy-media.is-error .lazy-media__lqip {
    display: none;
  }
  @keyframes lazy-media-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .lazy-media:not(.has-lqip)::before {
      animation: none;
    }
    .lazy-media__img, .lazy-media__lqip {
      transition: none;
    }
  }
}
@layer utilities {
  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.625rem;
    min-height: 10rem;
    padding: 2rem 1.5rem;
    color: var(--text-tertiary);
  }
  .loading-state__spinner {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    border: 2.5px solid var(--border-secondary);
    border-top-color: var(--bg-brand-solid);
    animation: loading-state-spin var(--duration-spinner-rotate, 0.7s) linear infinite;
  }
  .loading-state__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .loading-state__hint {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    max-width: 22rem;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  .loading-state.is-slow .loading-state__hint {
    opacity: 1;
  }
  .loading-state--compact {
    min-height: 6rem;
    padding: 1.25rem 1rem;
  }
  .loading-state--compact .loading-state__spinner {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
  }
  .loading-state--inline {
    flex-direction: row;
    min-height: 0;
    padding: 0.75rem;
    gap: 0.5rem;
    justify-content: flex-start;
  }
  .loading-state--inline .loading-state__spinner {
    width: 1.125rem;
    height: 1.125rem;
    border-width: 2px;
  }
  @keyframes loading-state-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .loading-state__spinner {
      animation-duration: 1.4s;
    }
    .loading-state__hint {
      transition: none;
    }
  }
}
@layer utilities {
  .error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    max-width: 26rem;
    margin-inline: auto;
  }
  .error-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
    box-shadow: inset 0 0 0 1px var(--border-danger-subtle, var(--border-danger)), var(--shadow-xs);
    font-size: 1.25rem;
    margin-block-end: 0.25rem;
  }
  .error-state__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .error-state__message {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    line-height: 1.5;
  }
  .error-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-block-start: 0.5rem;
  }
  .error-state__detail {
    margin-block-start: 0.5rem;
    width: 100%;
    text-align: start;
  }
  .error-state__detail summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    list-style: none;
  }
  .error-state__detail summary::-webkit-details-marker {
    display: none;
  }
  .error-state__detail summary:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .error-state__detail pre {
    margin-block-start: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: 0.75rem;
    overflow-x: auto;
  }
  .error-state--neutral .error-state__icon {
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs);
  }
  .error-state--warning .error-state__icon {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
    box-shadow: inset 0 0 0 1px var(--border-warning-subtle, var(--border-warning)), var(--shadow-xs);
  }
  .error-state--compact {
    padding: 1.5rem 1rem;
    gap: 0.5rem;
  }
  .error-state--compact .error-state__icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
  .error-state--compact .error-state__title {
    font-size: 0.9375rem;
  }
}
@layer utilities {
  .result-flash-region {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline: 0;
    z-index: var(--z-toast, 70);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    padding-inline: 1rem;
  }
  .result-flash {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    max-width: min(32rem, 100%);
    padding: 0.75rem 2.5rem 0.75rem 0.875rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    overflow: hidden;
  }
  .result-flash__icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    margin-block-start: 0.05em;
  }
  .result-flash--sm {
    max-width: min(22rem, 100%);
    padding: 0.5rem 2rem 0.5rem 0.625rem;
    font-size: 0.8125rem;
    gap: 0.5rem;
  }
  .result-flash--sm .result-flash__icon {
    font-size: 1rem;
  }
  .result-flash--sm .result-flash__dismiss {
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
  }
  .result-flash__body {
    min-width: 0;
  }
  .result-flash__title {
    font-weight: 600;
    color: var(--text-primary);
  }
  .result-flash__message {
    color: var(--text-tertiary);
  }
  .result-flash__dismiss {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
  }
  .result-flash__dismiss:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary-hover);
  }
  .result-flash__dismiss:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .result-flash.is-success .result-flash__icon {
    color: var(--text-success);
  }
  .result-flash.is-error .result-flash__icon {
    color: var(--text-danger);
  }
  .result-flash.is-warning .result-flash__icon {
    color: var(--text-warning);
  }
  .result-flash.is-info .result-flash__icon {
    color: var(--text-info);
  }
  .result-flash__timer {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 2px;
    transform-origin: left center;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 30%, transparent);
    }
    animation: result-flash-timer var(--flash-duration, 5000ms) linear forwards;
  }
  [dir="rtl"] .result-flash__timer {
    transform-origin: right center;
  }
  .result-flash:hover .result-flash__timer, .result-flash:focus-within .result-flash__timer {
    animation-play-state: paused;
  }
  @keyframes result-flash-timer {
    from {
      transform: scaleX(1);
    }
    to {
      transform: scaleX(0);
    }
  }
  .result-flash {
    animation: result-flash-in var(--duration-normal) var(--ease-out);
  }
  .result-flash.is-leaving {
    animation: result-flash-out var(--duration-fast) var(--ease-in) forwards;
  }
  @keyframes result-flash-in {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes result-flash-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .result-flash, .result-flash.is-leaving {
      animation: none;
    }
    .result-flash__timer {
      animation: none;
      transform: scaleX(1);
    }
  }
}
@layer utilities {
  .connection-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
  }
  .connection-status--banner {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-sticky, 40);
    transform: translateY(-100%);
    transition: transform var(--duration-normal) var(--ease-out);
  }
  .connection-status--banner.is-shown {
    transform: translateY(0);
  }
  .connection-status.is-offline {
    background-color: var(--bg-warning-solid);
    color: var(--text-on-brand);
  }
  .connection-status.is-error {
    background-color: var(--bg-danger-solid);
    color: var(--text-on-brand);
  }
  .connection-status.is-online {
    background-color: var(--bg-success-solid);
    color: var(--text-on-brand);
  }
  .connection-status.is-reconnecting {
    background-color: var(--bg-secondary-solid, var(--bg-tertiary));
    color: var(--text-primary);
  }
  .connection-status__icon {
    display: inline-flex;
  }
  .connection-status.is-reconnecting .connection-status__icon i {
    animation: connection-status-spin var(--duration-spinner-rotate, 0.7s) linear infinite;
  }
  .connection-status--pill {
    display: inline-flex;
    padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    gap: 0.375rem;
  }
  .connection-status--pill.is-online {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .connection-status--pill.is-offline {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .connection-status--pill.is-error {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .connection-status--pill.is-reconnecting {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .connection-status--pill .connection-status__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
  }
  .connection-status--pill.is-online .connection-status__dot {
    box-shadow: 0 0 0 3px var(--bg-success-subtle);
  }
  .connection-status--inline {
    display: inline-flex;
    padding: 0;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: transparent;
    box-shadow: none;
  }
  .connection-status--inline.is-online {
    color: var(--text-success);
  }
  .connection-status--inline.is-offline {
    color: var(--text-warning);
  }
  .connection-status--inline.is-error {
    color: var(--text-danger);
  }
  .connection-status--inline.is-reconnecting {
    color: var(--text-secondary);
  }
  .connection-status--inline .connection-status__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
  }
  .connection-status--inline .connection-status__icon i {
    animation: connection-status-spin var(--duration-spinner-rotate, 0.7s) linear infinite;
  }
  @keyframes connection-status-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .connection-status--banner {
      transition: none;
    }
    .connection-status.is-reconnecting .connection-status__icon i {
      animation-duration: 1.4s;
    }
  }
}
@layer utilities {
  .save-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-tertiary);
    line-height: 1;
  }
  .save-status__icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
  }
  .save-status__label {
    white-space: nowrap;
  }
  .save-status.is-idle .save-status__icon::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: var(--radius-full);
    background-color: var(--border-secondary);
  }
  .save-status.is-saving {
    color: var(--text-secondary);
  }
  .save-status.is-saving .save-status__icon i {
    animation: save-status-spin var(--duration-spinner-rotate, 0.7s) linear infinite;
  }
  .save-status.is-saved {
    color: var(--text-success);
  }
  .save-status.is-error {
    color: var(--text-danger);
  }
  .save-status.is-offline {
    color: var(--text-warning);
  }
  button.save-status, .save-status[role="button"] {
    background: transparent;
    border: 0;
    cursor: default;
    border-radius: var(--radius-md);
    padding: 0.125rem 0.25rem;
  }
  button.save-status.is-error, .save-status.is-error[role="button"] {
    cursor: pointer;
  }
  button.save-status.is-error:hover {
    background-color: var(--bg-danger-subtle);
  }
  button.save-status:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  @keyframes save-status-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .save-status.is-saving .save-status__icon i {
      animation-duration: 1.4s;
    }
  }
}
@layer utilities {
  :is(.btn-primary, .btn-secondary, .btn-tertiary, .btn-ghost, .btn-danger, .btn-link, [class*="btn-"]).is-loading {
    position: relative;
    pointer-events: none;
    cursor: progress;
  }
  :is([class*="btn-"]).is-loading > * {
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .btn-loading__glyph {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    pointer-events: none;
  }
  .btn-loading__spinner {
    width: 1em;
    height: 1em;
    border-radius: var(--radius-full);
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: 0.9;
    animation: btn-loading-spin var(--duration-spinner-rotate, 0.7s) linear infinite;
  }
  @keyframes btn-loading-spin {
    to {
      transform: rotate(360deg);
    }
  }
  :is([class*="btn-"]).is-success .btn-loading__glyph {
    color: var(--text-success);
  }
  :is([class*="btn-"]).is-error .btn-loading__glyph {
    color: var(--text-danger);
  }
  :is([class*="btn-"]).is-success .btn-loading__glyph i, :is([class*="btn-"]).is-error .btn-loading__glyph i {
    animation: btn-loading-pop var(--duration-normal) var(--ease-bounce, var(--ease-out));
  }
  @keyframes btn-loading-pop {
    0% {
      transform: scale(0.4);
      opacity: 0;
    }
    70% {
      transform: scale(1.15);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  :is(.btn-primary, .btn-danger).is-success .btn-loading__glyph, :is(.btn-primary, .btn-danger).is-error .btn-loading__glyph {
    color: var(--text-on-brand);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-loading__spinner {
      animation-duration: 1.4s;
    }
    :is([class*="btn-"]).is-success .btn-loading__glyph i, :is([class*="btn-"]).is-error .btn-loading__glyph i {
      animation: none;
    }
    :is([class*="btn-"]).is-loading > * {
      transition: none;
    }
  }
}
@layer utilities {
  .top-loading-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    z-index: var(--z-max, 100);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .top-loading-bar.is-active {
    opacity: 1;
  }
  .top-loading-bar__fill {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(var(--top-progress, 0));
    background-color: var(--bg-brand-solid);
    transition: transform var(--duration-normal) var(--ease-out);
  }
  .top-loading-bar__peg {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 6rem;
    transform: translateX(0);
    box-shadow: 0 0 10px var(--bg-brand-solid), 0 0 5px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 10px color-mix(in oklch, var(--bg-brand-solid) 70%, transparent), 0 0 5px color-mix(in oklch, var(--bg-brand-solid) 90%, transparent);
    }
    opacity: 0.85;
  }
  .top-loading-bar.is-error .top-loading-bar__fill {
    background-color: var(--bg-danger-solid);
  }
  .top-loading-bar.is-error .top-loading-bar__peg {
    box-shadow: 0 0 10px var(--bg-danger-solid), 0 0 5px var(--bg-danger-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 10px color-mix(in oklch, var(--bg-danger-solid) 70%, transparent), 0 0 5px color-mix(in oklch, var(--bg-danger-solid) 90%, transparent);
    }
  }
  [dir="rtl"] .top-loading-bar__fill {
    transform-origin: right center;
  }
  .top-loading-bar.is-indeterminate .top-loading-bar__fill {
    animation: top-loading-trickle var(--duration-slower, 1.2s) var(--ease-in-out) infinite alternate;
  }
  @keyframes top-loading-trickle {
    from {
      transform: scaleX(0.15);
    }
    to {
      transform: scaleX(0.85);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .top-loading-bar__fill {
      transition: none;
    }
    .top-loading-bar.is-indeterminate .top-loading-bar__fill {
      animation: none;
      transform: scaleX(0.5);
    }
  }
}
@layer utilities {
  .progress-steps {
    --step-marker: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .progress-steps__step {
    position: relative;
    display: grid;
    grid-template-columns: var(--step-marker) 1fr;
    gap: 0.75rem;
    padding-block: 0.25rem 1rem;
  }
  .progress-steps__step:last-child {
    padding-block-end: 0;
  }
  .progress-steps__step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block: var(--step-marker) 0;
    inset-inline-start: calc(var(--step-marker) / 2 - 1px);
    width: 2px;
    background-color: var(--border-secondary);
  }
  .progress-steps__step.is-done:not(:last-child)::before {
    background-color: var(--bg-brand-solid);
  }
  .progress-steps__marker {
    grid-row: 1 / span 2;
    width: var(--step-marker);
    height: var(--step-marker);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .progress-steps__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: var(--step-marker);
  }
  .progress-steps__meta {
    grid-column: 2;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-block-start: 0.125rem;
  }
  .progress-steps__step.is-pending .progress-steps__label {
    color: var(--text-tertiary);
  }
  .progress-steps__step.is-running .progress-steps__marker {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: inset 0 0 0 1px transparent;
  }
  .progress-steps__step.is-running .progress-steps__marker i {
    animation: progress-steps-spin var(--duration-spinner-rotate, 0.7s) linear infinite;
  }
  .progress-steps__step.is-running .progress-steps__label {
    color: var(--text-primary);
  }
  .progress-steps__step.is-done .progress-steps__marker {
    background-color: var(--bg-success-solid);
    color: var(--text-on-brand);
    box-shadow: inset 0 0 0 1px transparent;
  }
  .progress-steps__step.is-done .progress-steps__label {
    color: var(--text-secondary);
  }
  .progress-steps__step.is-error .progress-steps__marker {
    background-color: var(--bg-danger-solid);
    color: var(--text-on-brand);
    box-shadow: inset 0 0 0 1px transparent;
  }
  .progress-steps__step.is-error .progress-steps__label {
    color: var(--text-danger);
  }
  .progress-steps__step.is-skipped .progress-steps__marker {
    color: var(--text-quaternary);
  }
  .progress-steps__step.is-skipped .progress-steps__label {
    color: var(--text-quaternary);
    text-decoration: line-through;
  }
  @keyframes progress-steps-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .progress-steps--sm {
    --step-marker: 1.375rem;
  }
  .progress-steps--sm .progress-steps__step {
    padding-block: 0.125rem 0.75rem;
  }
  .progress-steps--sm .progress-steps__marker {
    font-size: 0.625rem;
  }
  .progress-steps--sm .progress-steps__label {
    font-size: 0.8125rem;
  }
  .progress-steps--sm .progress-steps__meta {
    font-size: 0.75rem;
  }
  .progress-steps--horizontal {
    flex-direction: row;
  }
  .progress-steps--horizontal .progress-steps__step {
    grid-template-columns: none;
    grid-template-rows: var(--step-marker) auto;
    justify-items: center;
    text-align: center;
    flex: 1;
    padding-block-end: 0;
    padding-inline: 0.25rem;
  }
  .progress-steps--horizontal .progress-steps__step:not(:last-child)::before {
    inset-block: auto;
    inset-block-start: calc(var(--step-marker) / 2 - 1px);
    inset-inline: calc(50% + var(--step-marker) / 2) calc(-50% + var(--step-marker) / 2);
    width: auto;
    height: 2px;
  }
  .progress-steps--horizontal .progress-steps__marker {
    grid-row: 1;
  }
  .progress-steps--horizontal .progress-steps__label {
    line-height: 1.3;
    margin-block-start: 0.375rem;
  }
  .progress-steps--horizontal .progress-steps__meta {
    grid-column: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .progress-steps__step.is-running .progress-steps__marker i {
      animation: none;
    }
  }
}
@layer utilities {
  .upload-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .upload-progress__item {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.375rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .upload-progress__icon {
    grid-row: 1 / span 2;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    color: var(--text-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .upload-progress__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .upload-progress__meta {
    grid-column: 2;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .upload-progress__actions {
    grid-row: 1 / span 2;
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .upload-progress__action {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .upload-progress__action:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary-hover);
  }
  .upload-progress__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .upload-progress__bar {
    grid-column: 2;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .upload-progress__fill {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(var(--upload-progress, 0));
    background-color: var(--bg-brand-solid);
    border-radius: inherit;
    transition: transform var(--duration-normal) var(--ease-out);
  }
  [dir="rtl"] .upload-progress__fill {
    transform-origin: right center;
  }
  .upload-progress__item.is-queued .upload-progress__fill {
    background-color: var(--bg-tertiary-solid, var(--border-secondary));
  }
  .upload-progress__item.is-queued .upload-progress__icon i {
    opacity: 0.6;
  }
  .upload-progress__item.is-uploading .upload-progress__icon {
    color: var(--text-brand-secondary, var(--bg-brand-solid));
  }
  .upload-progress__item.is-done .upload-progress__fill {
    background-color: var(--bg-success-solid);
  }
  .upload-progress__item.is-done .upload-progress__icon {
    color: var(--text-success);
    background-color: var(--bg-success-subtle);
    box-shadow: inset 0 0 0 1px transparent;
  }
  .upload-progress__item.is-error .upload-progress__fill {
    background-color: var(--bg-danger-solid);
  }
  .upload-progress__item.is-error .upload-progress__icon {
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
    box-shadow: inset 0 0 0 1px transparent;
  }
  .upload-progress__item.is-error .upload-progress__meta {
    color: var(--text-danger);
  }
  .upload-progress__item.is-canceled {
    opacity: 0.6;
  }
  .upload-progress__item.is-canceled .upload-progress__name {
    text-decoration: line-through;
  }
  .upload-progress--compact .upload-progress__item {
    padding: 0.5rem 0.625rem;
    column-gap: 0.5rem;
  }
  .upload-progress--compact .upload-progress__icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }
  .upload-progress--compact .upload-progress__name {
    font-size: 0.8125rem;
  }
  .upload-progress--compact .upload-progress__meta {
    font-size: 0.6875rem;
  }
  .upload-progress--compact .upload-progress__bar {
    height: 0.25rem;
  }
  .upload-progress__item.is-uploading[data-indeterminate] .upload-progress__fill {
    width: 40%;
    transform: none;
    animation: upload-progress-indeterminate var(--duration-progress-indeterminate, 1.4s) var(--ease-in-out) infinite;
  }
  @keyframes upload-progress-indeterminate {
    0% {
      margin-inline-start: -40%;
    }
    100% {
      margin-inline-start: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .upload-progress__fill {
      transition: none;
    }
    .upload-progress__item.is-uploading[data-indeterminate] .upload-progress__fill {
      animation: none;
      width: 50%;
    }
  }
}
@layer utilities {
  .countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }
  .countdown__value {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
  }
  .countdown__label {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .countdown.is-warning .countdown__value {
    color: var(--text-warning);
  }
  .countdown.is-urgent .countdown__value {
    color: var(--text-danger);
  }
  .countdown.is-done .countdown__value {
    color: var(--text-success);
  }
  .countdown--sm {
    gap: 0.375rem;
  }
  .countdown--sm .countdown__value {
    font-size: 0.75rem;
  }
  .countdown--sm .countdown__label {
    font-size: 0.6875rem;
  }
  .countdown--sm {
    --countdown-ring-size: 2rem;
  }
  .countdown--sm .countdown__ring-value {
    font-size: 0.625rem;
  }
  .countdown--lg .countdown__value {
    font-size: 1.0625rem;
  }
  .countdown--lg .countdown__label {
    font-size: 0.875rem;
  }
  .countdown--lg {
    --countdown-ring-size: 3.25rem;
  }
  .countdown--lg .countdown__ring-value {
    font-size: 0.875rem;
  }
  .countdown--ring {
    gap: 0.625rem;
  }
  .countdown__ring {
    position: relative;
    width: var(--countdown-ring-size, 2.5rem);
    height: var(--countdown-ring-size, 2.5rem);
    flex-shrink: 0;
  }
  .countdown__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .countdown__ring-track {
    stroke: var(--border-secondary);
    fill: none;
  }
  .countdown__ring-fill {
    stroke: var(--bg-brand-solid);
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--countdown-remaining, 100));
    transition: stroke-dashoffset var(--duration-normal) linear, stroke var(--duration-fast) var(--ease-out);
  }
  .countdown.is-warning .countdown__ring-fill {
    stroke: var(--bg-warning-solid);
  }
  .countdown.is-urgent .countdown__ring-fill {
    stroke: var(--bg-danger-solid);
  }
  .countdown.is-done .countdown__ring-fill {
    stroke: var(--bg-success-solid);
  }
  .countdown__ring-value {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .countdown.is-paused {
    opacity: 0.7;
  }
  @media (prefers-reduced-motion: reduce) {
    .countdown__ring-fill {
      transition: stroke var(--duration-fast) var(--ease-out);
    }
  }
}
@layer utilities {
  .filter-sidebar {
    position: relative;
    width: 1px;
    min-width: 1px;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    flex-shrink: 0;
    transition: width var(--transition-panel, 200ms ease), min-width var(--transition-panel, 200ms ease);
  }
  .filter-sidebar > *:not(.filter-sidebar__resize):not(.filter-sidebar__actions) {
    width: var(--width-filter-sidebar, 280px);
    min-width: var(--width-filter-sidebar, 280px);
    opacity: 0;
    transition: opacity 150ms ease 50ms;
  }
  .filter-sidebar.is-open {
    display: flex;
    width: var(--width-filter-sidebar, 280px);
    min-width: var(--width-filter-sidebar, 280px);
    overflow: visible;
    background-color: var(--bg-panel);
  }
  .filter-sidebar.is-open > *:not(.filter-sidebar__resize):not(.filter-sidebar__actions) {
    opacity: 1;
    transition: opacity 180ms ease 80ms;
  }
  .filter-sidebar.is-resizing {
    transition: none;
  }
  .filter-sidebar.is-resizing > * {
    transition: none;
  }
  .filter-sidebar.is-open::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: var(--border-panel, var(--border-primary));
    pointer-events: none;
    z-index: 2;
  }
  .filter-sidebar.filter-sidebar--right.is-open::after {
    right: auto;
    left: 0;
  }
  .filter-sidebar__resize {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
    width: 4px;
    cursor: col-resize;
    z-index: 3;
    background: transparent;
    transition: background-color 150ms ease;
  }
  .filter-sidebar__resize:hover, .filter-sidebar__resize.is-active {
    background-color: var(--border-info, var(--color-primary-500));
    opacity: 0.5;
  }
  .filter-sidebar--right .filter-sidebar__resize {
    right: auto;
    left: -2px;
  }
  .filter-sidebar__actions {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease 75ms;
  }
  .filter-sidebar--right .filter-sidebar__actions {
    right: auto;
    left: 0;
    transform: translate(-50%, -50%);
  }
  .filter-sidebar.is-actions-nearby .filter-sidebar__actions, .filter-sidebar__actions:focus-within {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0ms;
  }
  .filter-sidebar.is-resizing .filter-sidebar__actions {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .filter-sidebar__action {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    width: 20px;
    height: 20px;
    background-color: var(--bg-surface, var(--canvas-secondary));
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
    font-size: 10px;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .filter-sidebar__action:hover {
    background-color: var(--bg-info-subtle);
    border-color: var(--border-info, var(--color-info));
    color: var(--text-info, var(--color-info));
  }
  .filter-sidebar__action:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 1px;
  }
  .filter-sidebar__action.is-disabled, .filter-sidebar__action:disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }
  @media (max-width: 639px) {
    .filter-sidebar.is-open {
      position: fixed;
      inset: 0;
      width: 100%;
      min-width: 100%;
      z-index: var(--z-tray, 50);
      background-color: var(--bg-surface, var(--canvas-secondary));
    }
    .filter-sidebar__resize, .filter-sidebar__actions {
      display: none;
    }
  }
  .filter-panel {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
  }
  .filter-sidebar .form-control, .filter-sidebar select.form-control, .filter-sidebar textarea.form-control {
    min-height: calc(var(--spacing) * 7);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .filter-sidebar .btn-soft {
    min-height: calc(var(--spacing) * 7);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .filter-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    column-gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-top: 4px;
    padding-bottom: 5px;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover {
      @media (hover: hover) {
        cursor: pointer;
      }
    }
    color: var(--text-filter, var(--text-primary));
    background-color: var(--bg-filter, var(--alpha-white-100));
  }
  .filter-item:hover {
    color: var(--text-filter-hover, var(--text-primary-hover));
    background-color: var(--bg-filter-hover, var(--bg-primary-subtle));
  }
  .filter-item.active {
    background-color: var(--bg-filter-active, var(--bg-secondary-subtle));
  }
  .filter-item.active:hover {
    color: var(--text-filter-hover, var(--text-primary-hover));
    background-color: var(--bg-filter-hover, var(--bg-primary-subtle));
  }
  .filter-item.selected, .filter-item[aria-selected="true"] {
    background-color: var(--bg-filter-selected, var(--bg-info-subtle));
  }
  .filter-item:active {
    background-color: var(--bg-filter-pressed, var(--bg-secondary-subtle));
  }
  .filter-item.is-disabled, .filter-item[aria-disabled="true"] {
    pointer-events: none;
    opacity: var(--opacity-filter-disabled, 0.65);
    color: var(--text-filter-disabled, var(--text-disabled));
    background-color: var(--bg-filter-disabled, var(--bg-primary-subtle));
  }
  .filter-panel.no-hover .filter-item:hover {
    color: var(--text-filter, var(--text-primary));
    background-color: var(--bg-filter, var(--alpha-white-100));
  }
  .filter-count-badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    white-space: nowrap;
    min-width: 1.25rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.125rem;
    color: var(--text-badge);
    background-color: var(--bg-badge);
    box-shadow: inset 0 0 0 1px var(--border-primary-subtle);
  }
  .filter-result {
    color: var(--text-tertiary, var(--text-secondary));
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
  }
  .filter-item.filter-toggle {
    position: sticky;
    top: 0;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--bg-filter-section, var(--bg-filter, var(--alpha-white-100)));
  }
  .filter-item .filter-chevron {
    flex: none;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-filter-chevron, var(--text-tertiary));
    transition: transform 160ms ease, opacity 160ms ease;
  }
  .filter-item.filter-toggle[aria-expanded="true"] .filter-chevron {
    transform: rotate(90deg);
    opacity: 1;
  }
  .filter-item.filter-toggle:hover {
    background-color: var(--bg-filter-section-hover, var(--bg-filter-hover, var(--bg-primary-subtle)));
  }
  .filter-item.filter-toggle:active {
    background-color: var(--bg-filter-section-pressed, var(--bg-filter-pressed, var(--bg-secondary-subtle)));
  }
  .filter-item.is-loading .filter-chevron {
    display: none;
  }
  .filter-item.is-loading::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-step-indicator, var(--border-tertiary));
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: filter-spin 0.6s linear infinite;
    flex-shrink: 0;
    order: -1;
  }
  @keyframes filter-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .filter-item.filter-toggle[aria-expanded="true"] {
    background-color: var(--bg-filter-section-open, var(--bg-filter, var(--alpha-white-100)));
  }
  .filter-section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .filter-section-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-bottom: calc(var(--spacing) * 2);
  }
  .filter-section-header {
    z-index: 1;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    top: var(--height-filter-toggle, 33px);
    background-color: var(--bg-panel);
    position: sticky;
  }
  .filter-search-wrap {
    position: relative;
  }
  .filter-search-clear {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    font-size: 10px;
    color: var(--text-tertiary);
    opacity: 0;
    pointer-events: none;
    border: none;
    background: none;
    padding: 0;
    border-radius: 50%;
    transition: opacity var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease;
  }
  .filter-search-wrap.has-value .filter-search-clear {
    opacity: 0.5;
    pointer-events: auto;
  }
  .filter-search-clear:hover {
    opacity: 1;
    color: var(--text-primary);
  }
  .filter-search-wrap.has-value > input {
    padding-right: 26px;
  }
  .filter-collapse {
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 3);
    background-color: var(--bg-filter-collapse, var(--bg-filter, var(--alpha-white-100)));
  }
  .filter-collapse-inner {
    margin-top: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 3);
    border-color: var(--border-filter-collapse, var(--border-filter, var(--border-primary-subtle)));
    background-color: var(--bg-filter-collapse-inner, var(--alpha-0));
  }
  .filter-collapse-inner.is-compact {
    padding: calc(var(--spacing) * 2);
  }
  .filter-collapse-inner.is-relaxed {
    padding: calc(var(--spacing) * 4);
  }
  .filter-fields {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .filter-collapse .filter-item {
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    background-color: var(--bg-filter-nested, var(--alpha-0));
  }
  .filter-collapse .filter-item:hover {
    background-color: var(--bg-filter-nested-hover, var(--bg-filter-hover, var(--bg-primary-subtle)));
  }
  .filter-collapse:focus-within .filter-collapse-inner {
    border-color: var(--border-filter-focus, var(--border-info-subtle));
    box-shadow: var(--ring-filter-focus, 0 0 0 2px var(--border-info-subtle));
  }
  .filter-group {
    border-color: transparent;
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-filter, var(--alpha-0));
  }
  .filter-group label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-filter-label, var(--text-tertiary));
  }
  .filter-menu {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover {
      @media (hover: hover) {
        cursor: pointer;
      }
    }
    color: var(--text-filter-menu, var(--text-secondary));
    background-color: var(--bg-filter-menu, var(--alpha-0));
    border-color: var(--border-filter, var(--alpha-0));
  }
  .filter-menu:hover {
    background-color: var(--bg-filter-hover, var(--bg-primary-subtle));
  }
  .filter-menu:active {
    background-color: var(--bg-filter-active, var(--bg-secondary-subtle));
  }
  .filter-item.is-success {
    background-color: var(--bg-filter-success, var(--bg-success-subtle));
  }
  .filter-item.is-warning {
    background-color: var(--bg-filter-warning, var(--bg-warning-subtle));
  }
  .filter-item.is-danger {
    background-color: var(--bg-filter-danger, var(--bg-danger-subtle));
  }
  .filter-item.is-info {
    background-color: var(--bg-filter-info, var(--bg-info-subtle));
  }
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
  }
  .filter-bar__content {
    display: flex;
    min-width: 0;
    flex: 1 1 0%;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
  }
  .filter-bar__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
  }
  .filter-row {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .filter-row__fields {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.75rem;
  }
  .filter-row__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-lg);
    color: var(--text-quaternary);
    cursor: pointer;
    transition: color var(--duration-fast, 100ms) linear;
  }
  .filter-row__remove:hover {
    color: var(--text-quaternary-hover, var(--text-tertiary));
  }
  .filter-row__remove:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .filter-row__remove i, .filter-row__remove svg {
    font-size: 1.25rem;
    line-height: 1;
  }
  .filter-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border-button-secondary);
    background-color: var(--bg-button-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    color: var(--text-quaternary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 100ms) linear, color var(--duration-fast, 100ms) linear;
  }
  .filter-icon-btn:hover {
    background-color: var(--bg-button-secondary-hover);
  }
  .filter-icon-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .filter-icon-btn i, .filter-icon-btn svg {
    font-size: 1.25rem;
    line-height: 1;
  }
  .filter-dropdown {
    position: relative;
    display: inline-flex;
  }
  .filter-count {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    box-shadow: var(--shadow-xs);
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 18px;
    font-weight: 500;
  }
  .filter-dropdown .filter-count.is-empty {
    visibility: hidden;
  }
  .filter-dropdown__panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: var(--z-dropdown, 30);
    display: none;
    width: 624px;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    box-shadow: 0 0 0 1px var(--border-secondary-alt), var(--shadow-lg);
  }
  .filter-dropdown--start .filter-dropdown__panel {
    right: auto;
    left: 0;
  }
  .filter-dropdown.is-empty .filter-dropdown__panel {
    width: 280px;
  }
  .filter-dropdown.is-open .filter-dropdown__panel {
    display: block;
    animation: filter-pop-in var(--duration-fast, 100ms) var(--ease-out, ease-out);
  }
  @keyframes filter-pop-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .filter-dropdown__empty {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  .filter-dropdown__empty-title {
    max-width: 352px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
  }
  .filter-dropdown__empty-text {
    max-width: 352px;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-weight: 400;
  }
  .filter-dropdown__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  .filter-dropdown__rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .filter-dropdown__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-secondary);
  }
  .filter-dropdown__footer-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .filter-dropdown:not(.is-empty) .filter-dropdown__empty {
    display: none;
  }
  .filter-dropdown.is-empty .filter-dropdown__body, .filter-dropdown.is-empty .filter-dropdown__footer {
    display: none;
  }
  @media (max-width: 767px) {
    .filter-dropdown__panel {
      width: min(624px, calc(100vw - 2rem));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .filter-dropdown.is-open .filter-dropdown__panel {
      animation: none;
    }
  }
  .docs-example:has(.filter-dropdown), .docs-stage:has(.filter-dropdown) {
    overflow: visible;
  }
  @media (pointer: coarse) {
    .filter-item {
      min-height: 44px;
    }
  }
}
@layer utilities {
  .fa-ellipsis-h, .fa-ellipsis-v {
    font-weight: 400 !important;
  }
  .icon {
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
  }
  .icon > svg, svg.icon {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
  }
  .icon-xs {
    font-size: 0.75rem;
  }
  .icon-sm {
    font-size: 0.875rem;
  }
  .icon-md {
    font-size: 1rem;
  }
  .icon-lg {
    font-size: 1.25rem;
  }
  .icon-xl {
    font-size: 1.5rem;
  }
  .icon-primary {
    color: var(--text-icon-primary, var(--text-primary));
  }
  .icon-secondary {
    color: var(--text-icon-secondary, var(--text-secondary));
  }
  .icon-tertiary {
    color: var(--text-icon-tertiary, var(--text-tertiary));
  }
  .icon-muted {
    color: var(--text-icon-quaternary, var(--text-quaternary));
  }
  .icon-light {
    color: var(--text-icon-light, var(--text-tertiary));
  }
  .icon-dark {
    color: var(--text-icon-dark, var(--text-primary));
  }
  .icon-disabled {
    color: var(--text-icon-disabled, var(--text-disabled));
  }
  .icon-brand {
    color: var(--text-icon-brand, var(--text-link));
  }
  .icon-success {
    color: var(--text-icon-success, var(--text-success));
  }
  .icon-warning {
    color: var(--text-icon-warning, var(--text-warning));
  }
  .icon-danger {
    color: var(--text-icon-danger, var(--text-danger));
  }
  .icon-info {
    color: var(--text-icon-info, var(--text-info));
  }
  .icon-purple {
    color: var(--text-icon-purple, var(--text-purple));
  }
  .icon-indigo {
    color: var(--text-icon-indigo, var(--text-indigo));
  }
  .icon-pink {
    color: var(--text-icon-pink, var(--text-pink));
  }
  .icon-teal {
    color: var(--text-icon-teal, var(--text-teal));
  }
  .icon-mint {
    color: var(--text-icon-mint, var(--text-mint));
  }
  .icon-dot {
    display: inline-block;
    width: 0.625em;
    height: 0.625em;
    border-radius: 9999px;
    background-color: currentColor;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .icon-dot-sm {
    width: 0.5em;
    height: 0.5em;
  }
  .icon-dot-lg {
    width: 0.75em;
    height: 0.75em;
  }
  .icon-ellipsis {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 0.75rem;
  }
  .icon-reveal {
    cursor: pointer;
  }
  .file-icon {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .file-icon img, .file-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .file-icon-xs {
    width: 1.5rem;
    height: 1.5rem;
  }
  .file-icon-sm {
    width: 2rem;
    height: 2rem;
  }
  .file-icon-md {
    width: 2.5rem;
    height: 2.5rem;
  }
  .file-icon-lg {
    width: 3rem;
    height: 3rem;
  }
  .file-icon-xl {
    width: 4rem;
    height: 4rem;
  }
  .file-icon .file-icon-dark {
    display: none;
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .file-icon .file-icon-light {
    display: none;
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .file-icon .file-icon-dark {
    display: block;
  }
  .flag-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    vertical-align: middle;
    object-fit: cover;
  }
  .flag-icon-sm {
    width: 1rem;
    height: 1rem;
  }
  .flag-icon-md {
    width: 1.25rem;
    height: 1.25rem;
  }
  .flag-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .flag-icon-square {
    border-radius: var(--radius-xs, 2px);
  }
  .folder-icon {
    display: inline-flex;
    height: 3rem;
    flex-shrink: 0;
    vertical-align: middle;
    --folder-front: var(--bg-brand-solid);
    --folder-back: var(--bg-brand-solid-hover);
  }
  .folder-icon > svg {
    display: block;
    height: 100%;
    width: auto;
  }
  .folder-icon-gray {
    --folder-front: var(--text-tertiary);
    --folder-back: var(--text-secondary);
  }
  .folder-icon-sm {
    height: 2rem;
  }
  .folder-icon-md {
    height: 3rem;
  }
  .folder-icon-lg {
    height: 4rem;
  }
  .folder-icon-xl {
    height: 5rem;
  }
  .star-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: currentColor;
    color: var(--text-warning);
    --star-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask: var(--star-glyph) center / contain no-repeat;
    mask: var(--star-glyph) center / contain no-repeat;
  }
  .star-icon-sm {
    width: 1rem;
    height: 1rem;
  }
  .star-icon-md {
    width: 1.25rem;
    height: 1.25rem;
  }
  .star-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .social-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--social-glyph) center / contain no-repeat;
    mask: var(--social-glyph) center / contain no-repeat;
  }
  .social-icon-sm {
    width: 1.25rem;
    height: 1.25rem;
  }
  .social-icon-md {
    width: 1.5rem;
    height: 1.5rem;
  }
  .social-icon-lg {
    width: 2rem;
    height: 2rem;
  }
  .social-icon--angel-list {
    --social-glyph: url("/img/foundations/social/angel-list.svg");
  }
  .social-icon--apple {
    --social-glyph: url("/img/foundations/social/apple.svg");
  }
  .social-icon--clubhouse {
    --social-glyph: url("/img/foundations/social/clubhouse.svg");
  }
  .social-icon--discord {
    --social-glyph: url("/img/foundations/social/discord.svg");
  }
  .social-icon--dribbble {
    --social-glyph: url("/img/foundations/social/dribbble.svg");
  }
  .social-icon--facebook {
    --social-glyph: url("/img/foundations/social/facebook.svg");
  }
  .social-icon--figma {
    --social-glyph: url("/img/foundations/social/figma.svg");
  }
  .social-icon--github {
    --social-glyph: url("/img/foundations/social/github.svg");
  }
  .social-icon--google {
    --social-glyph: url("/img/foundations/social/google.svg");
  }
  .social-icon--instagram {
    --social-glyph: url("/img/foundations/social/instagram.svg");
  }
  .social-icon--layers {
    --social-glyph: url("/img/foundations/social/layers.svg");
  }
  .social-icon--linkedin {
    --social-glyph: url("/img/foundations/social/linkedin.svg");
  }
  .social-icon--pinterest {
    --social-glyph: url("/img/foundations/social/pinterest.svg");
  }
  .social-icon--reddit {
    --social-glyph: url("/img/foundations/social/reddit.svg");
  }
  .social-icon--signal {
    --social-glyph: url("/img/foundations/social/signal.svg");
  }
  .social-icon--snapchat {
    --social-glyph: url("/img/foundations/social/snapchat.svg");
  }
  .social-icon--telegram {
    --social-glyph: url("/img/foundations/social/telegram.svg");
  }
  .social-icon--tiktok {
    --social-glyph: url("/img/foundations/social/tiktok.svg");
  }
  .social-icon--tumblr {
    --social-glyph: url("/img/foundations/social/tumblr.svg");
  }
  .social-icon--twitter {
    --social-glyph: url("/img/foundations/social/twitter.svg");
  }
  .social-icon--x {
    --social-glyph: url("/img/foundations/social/x.svg");
  }
  .social-icon--youtube {
    --social-glyph: url("/img/foundations/social/youtube.svg");
  }
  .integration-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .integration-icon img, .integration-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .integration-icon-sm {
    width: 1rem;
    height: 1rem;
  }
  .integration-icon-md {
    width: 1.25rem;
    height: 1.25rem;
  }
  .integration-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .integration-icon-xl {
    width: 2rem;
    height: 2rem;
  }
  .payment-icon {
    display: inline-block;
    width: 2.125rem;
    height: 1.5rem;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .payment-icon img, .payment-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .payment-icon-sm {
    width: 1.75rem;
    height: 1.2353rem;
  }
  .payment-icon-md {
    width: 2.125rem;
    height: 1.5rem;
  }
  .payment-icon-lg {
    width: 2.75rem;
    height: 1.9412rem;
  }
  .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    color: var(--text-primary);
  }
  .brand-logo__wordmark {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: currentColor;
  }
  .brand-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md, 0.375rem);
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .brand-logo-mark > i, .brand-logo-mark > svg {
    font-size: 0.875rem;
    width: 0.875rem;
    height: 0.875rem;
  }
  .brand-logo-sm {
    height: 1.5rem;
    gap: 0.375rem;
  }
  .brand-logo-sm .brand-logo-mark {
    width: 1.25rem;
    height: 1.25rem;
  }
  .brand-logo-sm .brand-logo__wordmark {
    font-size: 0.875rem;
  }
  .brand-logo-lg {
    height: 2.5rem;
    gap: 0.625rem;
  }
  .brand-logo-lg .brand-logo-mark {
    width: 2rem;
    height: 2rem;
  }
  .brand-logo-lg .brand-logo-mark > i, .brand-logo-lg .brand-logo-mark > svg {
    font-size: 1.125rem;
  }
  .brand-logo-lg .brand-logo__wordmark {
    font-size: 1.25rem;
  }
}
@layer utilities {
  .link, .link-secondary, .link-muted, .link-danger {
    display: inline;
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: from-font;
    text-underline-offset: 4px;
    border-radius: var(--radius-sm);
    transition-property: color, text-decoration-color, text-decoration-thickness;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-out);
  }
  :where(.doc-prose, .body, p) a {
    display: inline;
  }
  .link {
    color: var(--text-link);
  }
  .link:hover {
    color: var(--text-link-hover);
    text-decoration-color: currentColor;
  }
  .link-secondary {
    color: var(--text-link-secondary);
  }
  .link-secondary:hover {
    color: var(--text-link-secondary-hover);
    text-decoration-color: currentColor;
  }
  .link-muted {
    color: var(--text-link-muted);
  }
  .link-muted:hover {
    color: var(--text-link-muted-hover);
    text-decoration-color: currentColor;
  }
  .link-danger {
    color: var(--text-link-danger);
  }
  .link-danger:hover {
    color: var(--text-link-danger-hover);
    text-decoration-color: currentColor;
  }
  .link:focus-visible, .link-secondary:focus-visible, .link-muted:focus-visible, .link-danger:focus-visible {
    outline: 2px solid var(--border-link-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .link-underline {
    text-decoration-color: currentColor;
  }
  .link-underline:hover {
    text-decoration-thickness: 2px;
  }
  .link-xs {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    text-underline-offset: 3px;
  }
  .link-sm {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    text-underline-offset: 3px;
  }
  .link-md {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    text-underline-offset: 4px;
  }
  .link-lg {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    text-underline-offset: 4px;
  }
  .link-external::after {
    content: "\f08e";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
    font-weight: 300;
    margin-left: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 50%;
  }
  .link-truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .link[aria-disabled="true"], .link-secondary[aria-disabled="true"], .link-muted[aria-disabled="true"], .link-danger[aria-disabled="true"], .link.is-disabled, .link-secondary.is-disabled {
    pointer-events: none;
    opacity: 0.5;
    text-decoration-color: transparent;
    cursor: not-allowed;
  }
  .link.is-loading, .link-secondary.is-loading, .link-muted.is-loading, .link-danger.is-loading {
    pointer-events: none;
    opacity: 0.5;
  }
  @media (prefers-reduced-motion: reduce) {
    .link, .link-secondary, .link-muted, .link-danger {
      transition: none;
    }
  }
  .is-copied {
    background: var(--bg-success-subtle);
  }
  .is-copy-error {
    background: var(--bg-danger-subtle);
  }
}
@layer utilities {
  .notification-heading {
    width: 100%;
    padding: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
    background-color: var(--bg-notification-header);
  }
  .notification-card {
    margin-bottom: calc(var(--spacing) * 2);
    max-width: 100%;
    border-radius: var(--radius-md);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    background-color: var(--bg-notification-card);
  }
  .notification-card:hover {
    background-color: var(--bg-notification-card-hover);
  }
}
@layer utilities {
  .theme-swatch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 1px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out);
  }
  .theme-swatch:hover {
    box-shadow: var(--shadow-sm);
  }
  .theme-swatch:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .theme-swatch.is-selected, .theme-swatch[aria-pressed="true"] {
    box-shadow: var(--shadow-xs), 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--border-focus);
  }
  .theme-swatch[aria-disabled="true"], .theme-swatch.is-disabled {
    pointer-events: none;
    opacity: 50%;
  }
  .theme-swatch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }
  .theme-swatch-box {
    width: var(--spacing);
    height: var(--spacing);
    border-radius: var(--radius-xs);
  }
  .theme-label {
    color: var(--text-theme-label);
  }
  .theme-light {
    background-color: var(--bg-theme-light-swatch);
    border-color: var(--border-theme-light-swatch);
  }
  .theme-light .theme-base-swatch {
    background-color: var(--theme-light-base-swatch);
  }
  .theme-light .theme-primary-swatch {
    background-color: var(--theme-light-primary-swatch);
  }
  .theme-light .theme-secondary-swatch {
    background-color: var(--theme-light-secondary-swatch);
  }
  .theme-light .theme-accent-swatch {
    background-color: var(--theme-light-accent-swatch);
  }
  .theme-dark {
    background-color: var(--bg-theme-dark-swatch);
    border-color: var(--border-theme-dark-swatch);
  }
  .theme-dark .theme-base-swatch {
    background-color: var(--theme-dark-base-swatch);
  }
  .theme-dark .theme-primary-swatch {
    background-color: var(--theme-dark-primary-swatch);
  }
  .theme-dark .theme-secondary-swatch {
    background-color: var(--theme-dark-secondary-swatch);
  }
  .theme-dark .theme-accent-swatch {
    background-color: var(--theme-dark-accent-swatch);
  }
  .theme-mica-light {
    background-color: var(--bg-theme-mica-light-swatch);
    border-color: var(--border-theme-mica-light-swatch);
  }
  .theme-mica-light .theme-base-swatch {
    background-color: var(--theme-mica-light-base-swatch);
  }
  .theme-mica-light .theme-primary-swatch {
    background-color: var(--theme-mica-light-primary-swatch);
  }
  .theme-mica-light .theme-secondary-swatch {
    background-color: var(--theme-mica-light-secondary-swatch);
  }
  .theme-mica-light .theme-accent-swatch {
    background-color: var(--theme-mica-light-accent-swatch);
  }
  .theme-mica-dark {
    background-color: var(--bg-theme-dark-swatch);
    border-color: var(--border-theme-dark-swatch);
  }
  .theme-mica-dark .theme-base-swatch {
    background-color: var(--theme-dark-base-swatch);
  }
  .theme-mica-dark .theme-primary-swatch {
    background-color: var(--theme-dark-primary-swatch);
  }
  .theme-mica-dark .theme-secondary-swatch {
    background-color: var(--theme-dark-secondary-swatch);
  }
  .theme-mica-dark .theme-accent-swatch {
    background-color: var(--theme-dark-accent-swatch);
  }
  @media (prefers-reduced-motion: reduce) {
    .theme-swatch {
      transition: none;
    }
  }
}
@layer utilities {
  #toast-container > div {
    border-radius: var(--radius-lg);
    opacity: 95%;
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 10px 15px 10px 50px;
    width: 280px;
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 15px;
    color: var(--text-toast, var(--alpha-white-100));
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  #toast-container > div:hover {
    opacity: 100%;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .toast-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .toast-message {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  #toast-container > .toast-warning {
    --bg-toast: var(--bg-warning-solid, var(--utility-amber-500));
    --text-toast: var(--text-warning-solid, var(--utility-amber-950));
    --border-toast: var(--border-warning-solid, var(--utility-amber-600));
    background-color: var(--bg-toast);
    color: var(--text-toast);
  }
  #toast-container > .toast-danger {
    --bg-toast: var(--bg-danger-solid, var(--utility-red-600));
    --text-toast: var(--alpha-white-100);
    --border-toast: var(--border-danger-solid, var(--utility-red-700));
    background-color: var(--bg-toast);
    color: var(--text-toast);
  }
  #toast-container > .toast-success {
    --bg-toast: var(--bg-success-solid, var(--utility-green-600));
    --text-toast: var(--alpha-white-100);
    --border-toast: var(--border-success-solid, var(--utility-green-700));
    background-color: var(--bg-toast);
    color: var(--text-toast);
  }
  #toast-container > .toast-info {
    --bg-toast: var(--bg-info-solid, var(--utility-blue-600));
    --text-toast: var(--alpha-white-100);
    --border-toast: var(--border-info-solid, var(--utility-blue-700));
    background-color: var(--bg-toast);
    color: var(--text-toast);
  }
  #toast-container > .toast-error {
    --bg-toast: var(--bg-danger-solid, var(--utility-red-600));
    --text-toast: var(--alpha-white-100);
    --border-toast: var(--border-danger-solid, var(--utility-red-700));
    background-color: var(--bg-toast);
    color: var(--text-toast);
  }
  .toast-close-button {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    position: relative;
    right: -0.3em;
    top: -0.3em;
    float: right;
    font-size: 20px;
    color: currentColor;
    opacity: 0.7;
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .toast-close-button:hover {
    opacity: 1;
  }
  .toast-stack {
    position: fixed;
    z-index: var(--z-toast, 80);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 2rem));
    width: max-content;
  }
  .toast-stack--bottom-center, .toast-stack--bottom-left, .toast-stack--bottom-right {
    flex-direction: column-reverse;
  }
  .toast-stack--bottom-right {
    right: 1rem;
    bottom: 1rem;
    align-items: flex-end;
  }
  .toast-stack--bottom-left {
    left: 1rem;
    bottom: 1rem;
    align-items: flex-start;
  }
  .toast-stack--bottom-center {
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    align-items: center;
  }
  .toast-stack--top-right {
    right: 1rem;
    top: 1rem;
    align-items: flex-end;
  }
  .toast-stack--top-left {
    left: 1rem;
    top: 1rem;
    align-items: flex-start;
  }
  .toast-stack--top-center {
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    align-items: center;
  }
  .toast {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6875rem 0.875rem;
    min-height: 44px;
    max-width: 100%;
    font-size: 0.8125rem;
    line-height: 1.4;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 12px -2px var(--text-primary), 0 2px 4px -1px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px -2px color-mix(in oklch, var(--text-primary) 12%, transparent), 0 2px 4px -1px color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .toast.is-leaving {
    animation: toast-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
  }
  .toast__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 14px;
    color: var(--text-tertiary);
    line-height: 1;
  }
  .toast__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .toast__title {
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-primary);
  }
  .toast__description {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.9;
  }
  .toast__action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-info);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .toast__action:hover {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 10%, transparent);
    }
  }
  .toast__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .toast__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    font-size: 11px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 100ms ease, background-color 100ms ease, color 100ms ease;
  }
  .toast__close:hover {
    opacity: 1;
    color: var(--text-primary);
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  .toast__close:focus-visible {
    opacity: 1;
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .toast__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 10%, transparent);
    }
    transform-origin: left center;
    animation: toast-progress var(--duration, 4000ms) linear forwards;
  }
  .toast:hover .toast__progress, .toast:focus-within .toast__progress {
    animation-play-state: paused;
  }
  .toast--success {
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 28%, var(--border-divider));
    }
  }
  .toast--success .toast__icon {
    color: var(--text-success);
  }
  .toast--success .toast__progress {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 22%, transparent);
    }
  }
  .toast--info {
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 28%, var(--border-divider));
    }
  }
  .toast--info .toast__icon {
    color: var(--text-info);
  }
  .toast--info .toast__progress {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 22%, transparent);
    }
  }
  .toast--warning {
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 28%, var(--border-divider));
    }
  }
  .toast--warning .toast__icon {
    color: var(--text-warning);
  }
  .toast--warning .toast__progress {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 22%, transparent);
    }
  }
  .toast--danger, .toast--error {
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-danger) 28%, var(--border-divider));
    }
  }
  .toast--danger .toast__icon, .toast--error .toast__icon {
    color: var(--text-danger);
  }
  .toast--danger .toast__progress, .toast--error .toast__progress {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 22%, transparent);
    }
  }
  .toast--loading .toast__icon {
    color: var(--text-info);
    animation: toast-spin 0.8s linear infinite;
  }
  .toast--filled.toast--success {
    background-color: var(--text-success);
    border-color: transparent;
    color: var(--alpha-white-100);
  }
  .toast--filled.toast--info {
    background-color: var(--text-info);
    border-color: transparent;
    color: var(--alpha-white-100);
  }
  .toast--filled.toast--warning {
    background-color: var(--text-warning);
    border-color: transparent;
    color: var(--alpha-white-100);
  }
  .toast--filled.toast--danger, .toast--filled.toast--error {
    background-color: var(--text-danger);
    border-color: transparent;
    color: var(--alpha-white-100);
  }
  .toast--filled :is(.toast__icon, .toast__title, .toast__description, .toast__close) {
    color: inherit;
  }
  .toast--filled .toast__description {
    opacity: 0.85;
  }
  .toast--filled .toast__action {
    color: var(--alpha-white-100);
  }
  .toast--filled .toast__action:hover {
    background-color: var(--alpha-white-100);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--alpha-white-100) 18%, transparent);
    }
  }
  .toast--filled :is(.toast__action, .toast__close):focus-visible {
    outline-color: currentColor;
  }
  .toast--sm {
    padding: 0.5rem 0.625rem;
    min-height: 36px;
    font-size: 0.75rem;
  }
  .toast--sm .toast__icon {
    width: 16px;
    height: 16px;
    font-size: 12px;
  }
  .toast--sm .toast__close {
    width: 18px;
    height: 18px;
  }
  .toast--lg {
    padding: 0.875rem 1rem;
    min-height: 56px;
    font-size: 0.875rem;
  }
  .toast--lg .toast__icon {
    width: 22px;
    height: 22px;
    font-size: 17px;
  }
  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .toast-stack--top-left .toast, .toast-stack--top-center .toast, .toast-stack--top-right .toast {
    animation-name: toast-in-top;
  }
  @keyframes toast-in-top {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes toast-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(-4px) scale(0.96);
    }
  }
  @keyframes toast-progress {
    from {
      transform: scaleX(1);
    }
    to {
      transform: scaleX(0);
    }
  }
  @keyframes toast-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .toast {
      animation: none;
    }
    .toast.is-leaving {
      animation: none;
      opacity: 0;
    }
    .toast__progress {
      animation: none;
      transform: scaleX(0);
    }
    .toast--loading .toast__icon {
      animation: none;
    }
  }
}
@layer utilities {
  .live-announcer {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@layer utilities {
  .toast-region {
    --toast-region-gap: 0.625rem;
    --toast-region-peek: 0.5rem;
    --toast-region-scale: 0.04;
    gap: var(--toast-region-gap);
  }
  .toast-region.is-collapsed .toast {
    transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
  }
  .toast-region.is-collapsed .toast {
    transform: translateY(calc(var(--toast-region-peek) * var(--toast-depth, 0) * -1)) scale(calc(1 - var(--toast-region-scale) * var(--toast-depth, 0)));
    transform-origin: bottom center;
  }
  .toast-stack--bottom-left.toast-region.is-collapsed .toast, .toast-stack--bottom-center.toast-region.is-collapsed .toast, .toast-stack--bottom-right.toast-region.is-collapsed .toast {
    transform-origin: top center;
    transform: translateY(calc(var(--toast-region-peek) * var(--toast-depth, 0))) scale(calc(1 - var(--toast-region-scale) * var(--toast-depth, 0)));
  }
  .toast-region .toast[data-toast-overflow] {
    opacity: 0;
    pointer-events: none;
  }
  .toast-region:not(.is-collapsed) .toast, .toast-region.is-collapsed:hover .toast, .toast-region.is-collapsed:focus-within .toast {
    transform: none;
    opacity: 1;
  }
  .toast-region.is-collapsed:hover .toast[data-toast-overflow], .toast-region.is-collapsed:focus-within .toast[data-toast-overflow] {
    opacity: 1;
    pointer-events: auto;
  }
  .toast-region__count {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    pointer-events: auto;
    cursor: pointer;
  }
  .toast-region__count:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary-hover);
  }
  .toast-region__count:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .toast-region:not(.is-collapsed) .toast-region__count {
    display: none;
  }
  .toast-region .toast.is-entering {
    animation: toast-region-in var(--duration-normal) var(--ease-out);
  }
  .toast-region .toast.is-leaving {
    animation: toast-region-out var(--duration-fast) var(--ease-in) forwards;
  }
  @keyframes toast-region-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes toast-region-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: scale(0.96);
    }
  }
  .toast-region .toast.is-swiping {
    transition: none;
    transform: translateX(var(--toast-swipe, 0));
    opacity: calc(1 - min(1, abs(var(--toast-swipe, 0)) / 220px));
    cursor: grab;
    touch-action: pan-y;
  }
  .toast-region .toast.is-swiping:active {
    cursor: grabbing;
  }
  .toast-region .toast.is-paused .toast__progress {
    animation-play-state: paused;
  }
  .toast__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    margin-left: -0.5rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .toast-region .toast, .toast-region.is-collapsed .toast {
      transform: none !important;
      transition: none;
      animation: none;
    }
    .toast-region .toast.is-swiping {
      transition: none;
    }
  }
}
@layer utilities {
  .toast.is-settling .toast__icon {
    animation: promise-toast-icon var(--duration-normal) var(--ease-out);
  }
  @keyframes promise-toast-icon {
    0% {
      opacity: 0;
      transform: scale(0.6);
    }
    60% {
      opacity: 1;
      transform: scale(1.12);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .toast.is-settling {
    animation: promise-toast-settle var(--duration-slow) var(--ease-out);
  }
  @keyframes promise-toast-settle {
    0% {
      box-shadow: var(--shadow-lg), 0 0 0 0 var(--border-focus);
    }
    100% {
      box-shadow: var(--shadow-lg), 0 0 0 0 transparent;
    }
  }
  .toast--loading .toast__description {
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .toast.is-settling, .toast.is-settling .toast__icon {
      animation: none;
    }
  }
}
@layer utilities {
  .loading-dots {
    --dot-size: 0.375rem;
    --dot-gap: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: var(--dot-gap);
    color: currentColor;
    vertical-align: middle;
  }
  .loading-dots__dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: var(--radius-full);
    background-color: currentColor;
    opacity: 0.35;
    animation: loading-dots-bounce var(--duration-slower, 1.2s) var(--ease-in-out) infinite;
  }
  .loading-dots__dot:nth-child(2) {
    animation-delay: 0.16s;
  }
  .loading-dots__dot:nth-child(3) {
    animation-delay: 0.32s;
  }
  @keyframes loading-dots-bounce {
    0%, 80%, 100% {
      opacity: 0.35;
      transform: translateY(0) scale(0.85);
    }
    40% {
      opacity: 1;
      transform: translateY(-2px) scale(1);
    }
  }
  .loading-dots--brand {
    color: var(--text-brand-secondary, var(--bg-brand-solid));
  }
  .loading-dots--muted {
    color: var(--text-tertiary);
  }
  .loading-dots--success {
    color: var(--text-success);
  }
  .loading-dots--danger {
    color: var(--text-danger);
  }
  .loading-dots--warning {
    color: var(--text-warning);
  }
  .loading-dots--info {
    color: var(--text-info);
  }
  .loading-dots--sm {
    --dot-size: 0.25rem;
    --dot-gap: 0.1875rem;
  }
  .loading-dots--lg {
    --dot-size: 0.5rem;
    --dot-gap: 0.3125rem;
  }
  .loading-dots--typing {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
  }
  .loading-dots--bar {
    --dot-size: 0.5rem;
    gap: 0;
    width: 3.5rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
    position: relative;
  }
  .loading-dots--bar .loading-dots__dot {
    position: absolute;
    inset-block: 0;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    opacity: 1;
    background-color: var(--bg-brand-solid);
    animation: loading-dots-marquee var(--duration-progress-indeterminate, 1.4s) var(--ease-in-out) infinite;
  }
  .loading-dots--bar .loading-dots__dot:nth-child(2), .loading-dots--bar .loading-dots__dot:nth-child(3) {
    display: none;
  }
  @keyframes loading-dots-marquee {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(250%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .loading-dots__dot {
      animation: none;
      opacity: 0.6;
      transform: none;
    }
    .loading-dots--bar .loading-dots__dot {
      animation: none;
      transform: translateX(0);
      width: 50%;
      opacity: 0.8;
    }
  }
}
@layer utilities {
  .line-toast-host {
    position: relative;
    overflow: hidden;
  }
  .line-toast {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--line-toast-height, 3px);
    pointer-events: none;
    z-index: var(--z-toast, 70);
    opacity: 0;
  }
  .line-toast.is-active {
    animation: lt-fade-in var(--duration-normal, 250ms) var(--ease-default, ease) forwards;
  }
  .line-toast.is-leaving {
    animation: lt-fade-out var(--duration-normal, 250ms) var(--ease-default, ease) forwards;
  }
  .line-toast__bar {
    position: absolute;
    inset: 0;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
  }
  .line-toast.is-active .line-toast__bar {
    animation: lt-sweep var(--line-toast-duration, 2.4s) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) infinite;
  }
  .line-toast--determinate.is-active .line-toast__bar {
    animation: lt-fill var(--line-toast-duration, 2.4s) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
  }
  .line-toast--success .line-toast__bar {
    background: linear-gradient( 90deg, transparent 0%, var(--bg-line-toast-success, var(--bg-success-solid)) 30%, var(--bg-line-toast-success, var(--bg-success-solid)) 70%, transparent 100% );
  }
  .line-toast--error .line-toast__bar {
    background: linear-gradient( 90deg, transparent 0%, var(--bg-line-toast-error, var(--bg-danger-solid)) 30%, var(--bg-line-toast-error, var(--bg-danger-solid)) 70%, transparent 100% );
  }
  .line-toast--warning .line-toast__bar {
    background: linear-gradient( 90deg, transparent 0%, var(--bg-line-toast-warning, var(--bg-warning-solid)) 30%, var(--bg-line-toast-warning, var(--bg-warning-solid)) 70%, transparent 100% );
  }
  .line-toast--info .line-toast__bar {
    background: linear-gradient( 90deg, transparent 0%, var(--bg-line-toast-info, var(--bg-info-solid)) 30%, var(--bg-line-toast-info, var(--bg-info-solid)) 70%, transparent 100% );
  }
  .line-toast--loading .line-toast__bar {
    background: linear-gradient( 90deg, transparent 0%, var(--bg-line-toast-loading, var(--bg-primary-solid, var(--bg-info-solid))) 25%, var(--bg-line-toast-loading, var(--bg-primary-solid, var(--bg-info-solid))) 50%, transparent 100% );
  }
  .line-toast__message {
    position: absolute;
    left: 50%;
    top: var(--line-toast-height, 3px);
    transform: translateX(-50%) translateY(6px);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    font-size: var(--text-xs, 0.6875rem);
    line-height: 1.4;
    font-weight: 500;
    opacity: 0;
    transition: opacity var(--duration-normal, 250ms) var(--ease-default, ease);
    border-radius: var(--radius-lg);
    padding: 0.375rem 0.75rem;
    max-width: min(480px, 80vw);
    background-color: var(--bg-badge);
    color: var(--text-badge);
  }
  .line-toast--success .line-toast__message {
    background-color: var(--bg-badge-success);
    color: var(--text-badge-success);
  }
  .line-toast--error .line-toast__message {
    background-color: var(--bg-badge-danger);
    color: var(--text-badge-danger);
  }
  .line-toast--warning .line-toast__message {
    background-color: var(--bg-badge-warning);
    color: var(--text-badge-warning);
  }
  .line-toast--info .line-toast__message {
    background-color: var(--bg-badge-info);
    color: var(--text-badge-info);
  }
  .line-toast--loading .line-toast__message {
    background-color: var(--bg-badge-info);
    color: var(--text-badge-info);
  }
  .line-toast__message:has(ul, ol, br) {
    white-space: normal;
    text-align: left;
  }
  .line-toast__message:has(ul, ol, br) ul {
    margin: 0;
    padding-left: 1.2em;
  }
  .line-toast__message:has(ul, ol, br) li {
    margin-bottom: 0.125rem;
  }
  .line-toast--bottom .line-toast__message {
    top: auto;
    bottom: var(--line-toast-height, 3px);
    transform: translateX(-50%) translateY(-6px);
  }
  .line-toast--glow .line-toast__message {
    transform: translateX(-50%) translateY(14px);
  }
  .line-toast--glow.line-toast--bottom .line-toast__message {
    transform: translateX(-50%) translateY(-14px);
  }
  .line-toast.is-active .line-toast__message {
    opacity: 1;
  }
  .line-toast.is-leaving .line-toast__message {
    opacity: 0;
  }
  .line-toast--glow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    border-radius: 0 0 50% 50%;
    filter: blur(6px);
    opacity: 0.4;
    pointer-events: none;
  }
  .line-toast--glow.line-toast--success::after {
    background: var(--bg-line-toast-success, var(--bg-success-solid));
  }
  .line-toast--glow.line-toast--error::after {
    background: var(--bg-line-toast-error, var(--bg-danger-solid));
  }
  .line-toast--glow.line-toast--warning::after {
    background: var(--bg-line-toast-warning, var(--bg-warning-solid));
  }
  .line-toast--glow.line-toast--info::after {
    background: var(--bg-line-toast-info, var(--bg-info-solid));
  }
  .line-toast--glow.line-toast--loading::after {
    background: var(--bg-line-toast-loading, var(--bg-primary-solid, var(--bg-info-solid)));
  }
  .line-toast--thin {
    --line-toast-height: 2px;
  }
  .line-toast--thick {
    --line-toast-height: 4px;
  }
  .line-toast--xthick {
    --line-toast-height: 6px;
  }
  .line-toast--fast {
    --line-toast-duration: 1s;
  }
  .line-toast--slow {
    --line-toast-duration: 3.6s;
  }
  .line-toast--bottom {
    top: auto;
    bottom: 0;
  }
  .line-toast--bottom .line-toast__bar {
    border-radius: var(--radius-full) var(--radius-full) 0 0;
  }
  .line-toast--fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: var(--z-fixed, 1050);
  }
  @keyframes lt-sweep {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  @keyframes lt-fill {
    0% {
      transform: scaleX(0);
      transform-origin: left center;
      opacity: 1;
    }
    100% {
      transform: scaleX(1);
      transform-origin: left center;
      opacity: 1;
    }
  }
  @keyframes lt-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes lt-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .line-toast--with-label {
    height: auto;
    padding-top: 4px;
  }
  .line-toast--with-label .line-toast__bar {
    top: auto;
    bottom: 0;
  }
  .line-toast__label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0 8px 4px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    text-align: center;
  }
  .line-toast--with-label.line-toast--success .line-toast__label {
    color: var(--text-success);
  }
  .line-toast--with-label.line-toast--error .line-toast__label, .line-toast--with-label.line-toast--danger .line-toast__label {
    color: var(--text-danger);
  }
  .line-toast--with-label.line-toast--warning .line-toast__label {
    color: var(--text-warning);
  }
  .line-toast--with-label.line-toast--info .line-toast__label {
    color: var(--text-info);
  }
  .line-toast--solid .line-toast__bar {
    background: var(--bg-line-toast-solid, var(--text-info));
  }
  .line-toast--solid.line-toast--success .line-toast__bar {
    background: var(--text-success);
  }
  .line-toast--solid.line-toast--error .line-toast__bar, .line-toast--solid.line-toast--danger .line-toast__bar {
    background: var(--text-danger);
  }
  .line-toast--solid.line-toast--warning .line-toast__bar {
    background: var(--text-warning);
  }
  .line-toast--solid.line-toast--info .line-toast__bar {
    background: var(--text-info);
  }
  @media (prefers-reduced-motion: reduce) {
    .line-toast.is-active .line-toast__bar, .line-toast--determinate.is-active .line-toast__bar {
      animation: none;
      transform: none;
      opacity: 1;
    }
  }
}
@layer utilities {
  .signal-pill-stack {
    position: fixed;
    z-index: var(--z-toast, 70);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 2rem));
    width: max-content;
  }
  .signal-pill-stack--bottom-center, .signal-pill-stack--bottom-left, .signal-pill-stack--bottom-right {
    flex-direction: column-reverse;
  }
  .signal-pill-stack--bottom-center {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }
  .signal-pill-stack--bottom-left {
    left: calc(1rem + env(safe-area-inset-left, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }
  .signal-pill-stack--bottom-right {
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
  .signal-pill-stack--top-center {
    left: 50%;
    transform: translateX(-50%);
    top: calc(1rem + env(safe-area-inset-top, 0px));
    align-items: center;
  }
  .signal-pill-stack--top-left {
    left: calc(1rem + env(safe-area-inset-left, 0px));
    top: calc(1rem + env(safe-area-inset-top, 0px));
    align-items: flex-start;
  }
  .signal-pill-stack--top-right {
    right: calc(1rem + env(safe-area-inset-right, 0px));
    top: calc(1rem + env(safe-area-inset-top, 0px));
    align-items: flex-end;
  }
  .signal-pill-card {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    max-width: min(420px, calc(100vw - 2rem));
    width: max-content;
  }
  .signal-pill-card > .signal-pill {
    align-self: flex-start;
  }
  .signal-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem 0.5rem 0.75rem;
    border-radius: var(--radius-signal-pill, 9999px);
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 500;
    max-width: 100%;
    min-height: 36px;
    background-color: var(--bg-signal-pill-solid);
    color: var(--text-signal-pill-solid);
    border: 1px solid var(--border-signal-pill-solid);
    box-shadow: var(--shadow-signal-pill);
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-fast, 100ms) var(--ease-out, ease-out);
    will-change: transform, opacity;
  }
  .signal-pill:hover {
    transform: translateY(-1px);
  }
  .signal-pill__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--icon-signal-pill-solid);
  }
  .signal-pill__body {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0.0625rem;
  }
  .signal-pill__title {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: -0.005em;
  }
  .signal-pill__text {
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.75;
    color: var(--text-signal-pill-solid-muted);
  }
  .signal-pill__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .signal-pill__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.125rem;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-full, 9999px);
    color: inherit;
    font-size: 0.625rem;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease), background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .signal-pill__close:hover {
    opacity: 1;
    background-color: rgb(from currentColor r g b / 0.12);
  }
  .signal-pill__close:focus-visible {
    opacity: 1;
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .signal-pill__details-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .signal-pill__details-toggle:hover {
    color: var(--text-primary);
    background-color: rgb(from currentColor r g b / 0.08);
  }
  .signal-pill__details-toggle:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .signal-pill__details-toggle > i {
    font-size: 0.625rem;
    transition: transform var(--duration-normal, 200ms) var(--ease-out, ease-out);
  }
  .signal-pill-card.is-expanded .signal-pill__details-toggle > i {
    transform: rotate(180deg);
  }
  .signal-pill__details {
    pointer-events: auto;
    align-self: stretch;
    padding: 0 0.875rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-signal-pill-solid);
    color: var(--text-signal-pill-solid);
    border: 1px solid var(--border-signal-pill-solid);
    box-shadow: var(--shadow-signal-pill);
    font-size: 0.75rem;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height var(--duration-normal, 200ms) var(--ease-out, ease-out), opacity var(--duration-fast, 100ms) var(--ease-default, ease), transform var(--duration-normal, 200ms) var(--ease-out, ease-out), padding var(--duration-normal, 200ms) var(--ease-out, ease-out);
  }
  .signal-pill-card.is-expanded .signal-pill__details {
    max-height: 320px;
    opacity: 1;
    transform: translateY(0);
    padding: 0.625rem 0.875rem;
    overflow-y: auto;
  }
  .signal-pill__details > * + * {
    margin-top: 0.375rem;
  }
  .signal-pill__details code, .signal-pill__details pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    background-color: rgb(from currentColor r g b / 0.06);
    padding: 0.0625rem 0.25rem;
    border-radius: 3px;
  }
  .signal-pill__details pre {
    padding: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .signal-pill__action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 0.375rem);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-signal-pill-action-label);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease), background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .signal-pill__action:hover {
    color: var(--text-signal-pill-action-label-hover);
    background-color: rgb(from currentColor r g b / 0.08);
  }
  .signal-pill__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .signal-pill__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: rgb(from currentColor r g b / 0.18);
    overflow: hidden;
    pointer-events: none;
  }
  .signal-pill__progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(from currentColor r g b / 0.9);
    transform-origin: left center;
    transform: scaleX(var(--sp-progress, 1));
    transition: transform var(--sp-progress-duration, 3000ms) linear;
  }
  .signal-pill--solid {
    background-color: var(--bg-signal-pill-solid);
    color: var(--text-signal-pill-solid);
    border-color: var(--border-signal-pill-solid);
    box-shadow: var(--shadow-signal-pill);
  }
  .signal-pill--solid .signal-pill__icon {
    color: var(--icon-signal-pill-solid);
  }
  .signal-pill--solid .signal-pill__text {
    color: var(--text-signal-pill-solid-muted);
  }
  .signal-pill--glass {
    background-color: var(--bg-signal-pill-glass);
    color: var(--text-signal-pill-glass);
    border-color: var(--border-signal-pill-glass);
    box-shadow: var(--shadow-signal-pill-glass);
    -webkit-backdrop-filter: var(--blur-signal-pill-glass);
    backdrop-filter: var(--blur-signal-pill-glass);
  }
  .signal-pill--glass .signal-pill__icon {
    color: var(--icon-signal-pill-glass);
  }
  .signal-pill--glass .signal-pill__text {
    color: var(--text-signal-pill-glass-muted);
  }
  .signal-pill--success {
    background-color: var(--bg-signal-pill-success);
    color: var(--text-signal-pill-success);
  }
  .signal-pill--success .signal-pill__icon {
    color: var(--icon-signal-pill-success);
  }
  .signal-pill--danger {
    background-color: var(--bg-signal-pill-danger);
    color: var(--text-signal-pill-danger);
  }
  .signal-pill--danger .signal-pill__icon {
    color: var(--icon-signal-pill-danger);
  }
  .signal-pill--warning {
    background-color: var(--bg-signal-pill-warning);
    color: var(--text-signal-pill-warning);
  }
  .signal-pill--warning .signal-pill__icon {
    color: var(--icon-signal-pill-warning);
  }
  .signal-pill--info {
    background-color: var(--bg-signal-pill-info);
    color: var(--text-signal-pill-info);
  }
  .signal-pill--info .signal-pill__icon {
    color: var(--icon-signal-pill-info);
  }
  .signal-pill--neutral {
    background-color: var(--bg-signal-pill-neutral);
    color: var(--text-signal-pill-neutral);
  }
  .signal-pill--neutral .signal-pill__icon {
    color: var(--icon-signal-pill-neutral);
  }
  .signal-pill--loading {
    background-color: var(--bg-signal-pill-loading);
    color: var(--text-signal-pill-loading);
  }
  .signal-pill--loading .signal-pill__icon {
    color: var(--icon-signal-pill-loading);
  }
  .signal-pill--action {
    background-color: var(--bg-signal-pill-action);
    color: var(--text-signal-pill-action);
  }
  .signal-pill--action .signal-pill__icon {
    color: var(--icon-signal-pill-action);
  }
  .signal-pill--glass.signal-pill--success .signal-pill__icon {
    color: var(--icon-signal-pill-success);
  }
  .signal-pill--glass.signal-pill--danger .signal-pill__icon {
    color: var(--icon-signal-pill-danger);
  }
  .signal-pill--glass.signal-pill--warning .signal-pill__icon {
    color: var(--icon-signal-pill-warning);
  }
  .signal-pill--glass.signal-pill--info .signal-pill__icon {
    color: var(--icon-signal-pill-info);
  }
  .signal-pill--glass.signal-pill--neutral .signal-pill__icon {
    color: var(--icon-signal-pill-neutral);
  }
  .signal-pill--glass.signal-pill--loading .signal-pill__icon {
    color: var(--icon-signal-pill-loading);
  }
  .signal-pill--glass.signal-pill--action .signal-pill__icon {
    color: var(--icon-signal-pill-action);
  }
  .signal-pill--glass.signal-pill--success, .signal-pill--glass.signal-pill--danger, .signal-pill--glass.signal-pill--warning, .signal-pill--glass.signal-pill--info, .signal-pill--glass.signal-pill--neutral, .signal-pill--glass.signal-pill--loading, .signal-pill--glass.signal-pill--action {
    background-color: var(--bg-signal-pill-glass);
    color: var(--text-signal-pill-glass);
  }
  .signal-pill--loading .signal-pill__icon > i, .signal-pill--loading .signal-pill__icon > svg {
    animation: sp-spin 900ms linear infinite;
  }
  .signal-pill--compact {
    padding: 0.3125rem 0.625rem 0.3125rem 0.5rem;
    font-size: 0.75rem;
    min-height: 28px;
    gap: 0.4375rem;
  }
  .signal-pill--compact .signal-pill__icon {
    width: 0.8125rem;
    height: 0.8125rem;
    font-size: 0.75rem;
  }
  .signal-pill--compact .signal-pill__close {
    width: 1rem;
    height: 1rem;
  }
  .signal-pill--expanded {
    padding: 0.75rem 1rem 0.75rem 0.875rem;
    font-size: 0.875rem;
    min-height: 48px;
    gap: 0.75rem;
    border-radius: var(--radius-2xl, 1rem);
    max-width: 360px;
  }
  .signal-pill--expanded .signal-pill__icon {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1rem;
  }
  .signal-pill.is-entering, .signal-pill.is-leaving, .signal-pill-card.is-entering, .signal-pill-card.is-leaving {
    pointer-events: none;
  }
  .signal-pill-stack--bottom-center > .is-entering, .signal-pill-stack--bottom-left > .is-entering, .signal-pill-stack--bottom-right > .is-entering {
    animation: sp-rise-in var(--duration-slow, 300ms) var(--ease-out, ease-out) both;
  }
  .signal-pill-stack--bottom-center > .is-leaving, .signal-pill-stack--bottom-left > .is-leaving, .signal-pill-stack--bottom-right > .is-leaving {
    animation: sp-rise-out var(--duration-normal, 200ms) var(--ease-in, ease-in) both;
  }
  .signal-pill-stack--top-center > .is-entering, .signal-pill-stack--top-left > .is-entering, .signal-pill-stack--top-right > .is-entering {
    animation: sp-drop-in var(--duration-slow, 300ms) var(--ease-out, ease-out) both;
  }
  .signal-pill-stack--top-center > .is-leaving, .signal-pill-stack--top-left > .is-leaving, .signal-pill-stack--top-right > .is-leaving {
    animation: sp-drop-out var(--duration-normal, 200ms) var(--ease-in, ease-in) both;
  }
  .signal-pill-stack--bottom-left > .is-entering, .signal-pill-stack--top-left > .is-entering {
    animation: sp-slide-in-left var(--duration-slow, 300ms) var(--ease-out, ease-out) both;
  }
  .signal-pill-stack--bottom-left > .is-leaving, .signal-pill-stack--top-left > .is-leaving {
    animation: sp-slide-out-left var(--duration-normal, 200ms) var(--ease-in, ease-in) both;
  }
  .signal-pill-stack--bottom-right > .is-entering, .signal-pill-stack--top-right > .is-entering {
    animation: sp-slide-in-right var(--duration-slow, 300ms) var(--ease-out, ease-out) both;
  }
  .signal-pill-stack--bottom-right > .is-leaving, .signal-pill-stack--top-right > .is-leaving {
    animation: sp-slide-out-right var(--duration-normal, 200ms) var(--ease-in, ease-in) both;
  }
  @keyframes sp-rise-in {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes sp-rise-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
  }
  @keyframes sp-drop-in {
    from {
      opacity: 0;
      transform: translateY(-16px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes sp-drop-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(-8px) scale(0.98);
    }
  }
  @keyframes sp-slide-in-left {
    from {
      opacity: 0;
      transform: translateX(-12px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }
  @keyframes sp-slide-out-left {
    from {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateX(-8px) scale(0.98);
    }
  }
  @keyframes sp-slide-in-right {
    from {
      opacity: 0;
      transform: translateX(12px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }
  @keyframes sp-slide-out-right {
    from {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateX(8px) scale(0.98);
    }
  }
  @keyframes sp-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (max-width: 480px) {
    .signal-pill-stack {
      max-width: calc(100vw - 1rem);
    }
    .signal-pill-stack--bottom-center, .signal-pill-stack--top-center {
      left: 0.5rem;
      right: 0.5rem;
      transform: none;
      width: auto;
      max-width: none;
      align-items: stretch;
    }
    .signal-pill-stack--bottom-left, .signal-pill-stack--bottom-right, .signal-pill-stack--top-left, .signal-pill-stack--top-right {
      left: 0.5rem;
      right: 0.5rem;
      width: auto;
      max-width: none;
      align-items: stretch;
    }
    .signal-pill, .signal-pill--expanded {
      max-width: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .signal-pill, .signal-pill:hover {
      transform: none;
      transition: none;
    }
    .signal-pill.is-entering, .signal-pill.is-leaving {
      animation: sp-fade-in var(--duration-fast, 100ms) linear both;
    }
    .signal-pill.is-leaving {
      animation-name: sp-fade-out;
    }
    .signal-pill--loading .signal-pill__icon > i, .signal-pill--loading .signal-pill__icon > svg {
      animation: none;
    }
    .signal-pill__progress::after {
      transition: none;
    }
  }
  @keyframes sp-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes sp-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .signal-pill-demo-bg {
    background-image: radial-gradient(at 20% 20%, var(--utility-blue-300) 0, transparent 45%), radial-gradient(at 80% 30%, var(--utility-purple-300) 0, transparent 45%), radial-gradient(at 50% 80%, var(--utility-green-300) 0, transparent 45%), linear-gradient(135deg, var(--utility-neutral-200), var(--utility-neutral-50));
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .signal-pill-demo-bg {
    background-image: radial-gradient(at 20% 20%, var(--utility-blue-700) 0, transparent 45%), radial-gradient(at 80% 30%, var(--utility-purple-700) 0, transparent 45%), radial-gradient(at 50% 80%, var(--utility-green-700) 0, transparent 45%), linear-gradient(135deg, var(--utility-neutral-800), var(--utility-neutral-950));
  }
}
@layer utilities {
  .tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-tooltip, 80);
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(var(--tt-from-x, 0), var(--tt-from-y, 0.125rem)) scale(0.95);
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
    will-change: transform, opacity;
  }
  .tooltip.show {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  .tooltip[data-placement^="top"] {
    --tt-from-y: 0.125rem;
    --tt-from-x: 0;
  }
  .tooltip[data-placement^="bottom"] {
    --tt-from-y: -0.125rem;
    --tt-from-x: 0;
  }
  .tooltip[data-placement^="left"] {
    --tt-from-x: 0.125rem;
    --tt-from-y: 0;
  }
  .tooltip[data-placement^="right"] {
    --tt-from-x: -0.125rem;
    --tt-from-y: 0;
  }
  .tooltip-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    max-width: 20rem;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-tooltip, var(--alpha-white-100));
    background-color: var(--bg-tooltip, var(--utility-neutral-900));
    box-shadow: var(--shadow-lg);
    text-align: left;
    overflow-wrap: break-word;
  }
  .tooltip-inner:not(:has(.tooltip-text)) {
    white-space: normal;
  }
  .tooltip-inner:has(.tooltip-text) {
    padding-block: calc(var(--spacing) * 3);
  }
  .tooltip-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tooltip, var(--alpha-white-100));
  }
  .tooltip-text {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tooltip, var(--alpha-white-100));
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--text-tooltip, var(--alpha-white-100)) 74%, transparent);
    }
    white-space: pre-line;
  }
  .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
  }
  .tooltip--no-arrow .tooltip-arrow {
    display: none;
  }
  .tooltip[data-placement^="top"] .tooltip-arrow {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-bottom-width: 0;
    border-top-color: var(--bg-tooltip, var(--utility-neutral-900));
  }
  .tooltip[data-placement^="bottom"] .tooltip-arrow {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: var(--bg-tooltip, var(--utility-neutral-900));
  }
  .tooltip[data-placement^="left"] .tooltip-arrow {
    right: -6px;
    top: 50%;
    margin-top: -6px;
    border-right-width: 0;
    border-left-color: var(--bg-tooltip, var(--utility-neutral-900));
  }
  .tooltip[data-placement^="right"] .tooltip-arrow {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left-width: 0;
    border-right-color: var(--bg-tooltip, var(--utility-neutral-900));
  }
  [data-tooltip-position] {
    position: relative;
  }
  [data-tooltip-position]::after {
    content: attr(data-tooltip);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    position: absolute;
    z-index: var(--z-tooltip, 80);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-tooltip, var(--alpha-white-100));
    background-color: var(--bg-tooltip, var(--utility-neutral-900));
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  [data-tooltip-position]::before {
    content: "";
    position: absolute;
    z-index: var(--z-tooltip, 80);
    pointer-events: none;
    opacity: 0;
    border: 6px solid transparent;
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  [data-tooltip-position]:hover::after, [data-tooltip-position]:hover::before, [data-tooltip-position]:focus-visible::after, [data-tooltip-position]:focus-visible::before {
    opacity: 1;
    transform: scale(1);
  }
  [data-tooltip-position="top"]::after {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    transform-origin: bottom center;
  }
  [data-tooltip-position="top"]:hover::after, [data-tooltip-position="top"]:focus-visible::after {
    transform: translateX(-50%) scale(1);
  }
  [data-tooltip-position="top"]::before {
    bottom: calc(100% + 2px);
    left: 50%;
    margin-left: -6px;
    border-bottom-width: 0;
    border-top-color: var(--bg-tooltip, var(--utility-neutral-900));
  }
  [data-tooltip-position="bottom"]::after {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    transform-origin: top center;
  }
  [data-tooltip-position="bottom"]:hover::after, [data-tooltip-position="bottom"]:focus-visible::after {
    transform: translateX(-50%) scale(1);
  }
  [data-tooltip-position="bottom"]::before {
    top: calc(100% + 2px);
    left: 50%;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: var(--bg-tooltip, var(--utility-neutral-900));
  }
  [data-tooltip-position="left"]::after {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    transform-origin: right center;
  }
  [data-tooltip-position="left"]:hover::after, [data-tooltip-position="left"]:focus-visible::after {
    transform: translateY(-50%) scale(1);
  }
  [data-tooltip-position="left"]::before {
    right: calc(100% + 2px);
    top: 50%;
    margin-top: -6px;
    border-right-width: 0;
    border-left-color: var(--bg-tooltip, var(--utility-neutral-900));
  }
  [data-tooltip-position="right"]::after {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    transform-origin: left center;
  }
  [data-tooltip-position="right"]:hover::after, [data-tooltip-position="right"]:focus-visible::after {
    transform: translateY(-50%) scale(1);
  }
  [data-tooltip-position="right"]::before {
    left: calc(100% + 2px);
    top: 50%;
    margin-top: -6px;
    border-left-width: 0;
    border-right-color: var(--bg-tooltip, var(--utility-neutral-900));
  }
  @media (prefers-reduced-motion: reduce) {
    .tooltip {
      transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
      transform: none;
    }
    .tooltip.show {
      transform: none;
    }
    [data-tooltip-position]::after {
      transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
    }
    [data-tooltip-position="top"]::after, [data-tooltip-position="top"]:hover::after, [data-tooltip-position="top"]:focus-visible::after, [data-tooltip-position="bottom"]::after, [data-tooltip-position="bottom"]:hover::after, [data-tooltip-position="bottom"]:focus-visible::after {
      transform: translateX(-50%);
    }
    [data-tooltip-position="left"]::after, [data-tooltip-position="left"]:hover::after, [data-tooltip-position="left"]:focus-visible::after, [data-tooltip-position="right"]::after, [data-tooltip-position="right"]:hover::after, [data-tooltip-position="right"]:focus-visible::after {
      transform: translateY(-50%);
    }
  }
}
@layer utilities {
  .photo-viewer {
    --pv-main-max-h: 32rem;
    --pv-main-aspect: auto;
    --pv-transition-duration: 250ms;
    --pv-zoom: 1;
    position: relative;
    display: grid;
    width: 100%;
    gap: calc(var(--spacing) * 3);
    color: var(--text-photo-viewer, var(--text-primary));
  }
  .photo-viewer.pv-flat {
    gap: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-photo-viewer-flat, var(--border-primary-subtle));
  }
  .photo-viewer.pv-flat .pv-main {
    border-radius: var(--radius-none);
    box-shadow: none;
  }
  .photo-viewer.pv-flat .pv-strip {
    border-radius: var(--radius-none);
    box-shadow: none;
  }
  .photo-viewer.pv-flat .pv-thumb {
    border-radius: var(--radius-lg);
  }
  .photo-viewer.pv-sm {
    --pv-main-max-h: 18rem;
    gap: calc(var(--spacing) * 2);
  }
  .photo-viewer.pv-sm .pv-thumb {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
  }
  .photo-viewer.pv-sm .pv-bar {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .photo-viewer.pv-sm .pv-content {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .photo-viewer.pv-sm .pv-nav {
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
  }
  .photo-viewer.pv-md .pv-thumb {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
  }
  .photo-viewer.pv-lg {
    --pv-main-max-h: 36rem;
    gap: calc(var(--spacing) * 4);
  }
  .photo-viewer.pv-lg .pv-thumb {
    height: calc(var(--spacing) * 20);
    width: calc(var(--spacing) * 20);
  }
  .photo-viewer.pv-lg .pv-bar {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .photo-viewer.pv-lg .pv-content {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .photo-viewer.pv-xl {
    --pv-main-max-h: 42rem;
    gap: calc(var(--spacing) * 5);
  }
  .photo-viewer.pv-xl .pv-thumb {
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
  }
  .photo-viewer.pv-xl .pv-bar {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
  }
  .photo-viewer.pv-xl .pv-content {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
  }
  .photo-viewer.pv-2xl {
    --pv-main-max-h: 48rem;
    gap: calc(var(--spacing) * 6);
  }
  .photo-viewer.pv-2xl .pv-thumb {
    height: calc(var(--spacing) * 28);
    width: calc(var(--spacing) * 28);
  }
  .photo-viewer.pv-2xl .pv-bar {
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 4);
  }
  .photo-viewer.pv-2xl .pv-content {
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 6);
  }
  .photo-viewer.pv-thumbs-bottom {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-areas: "main" "strip";
  }
  .photo-viewer.pv-thumbs-top {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-areas: "strip" "main";
  }
  .photo-viewer.pv-thumbs-left {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: stretch;
    @media (width >= 48rem) {
      grid-template-columns: auto 1fr;
    }
    grid-template-areas: "strip main";
  }
  .photo-viewer.pv-thumbs-right {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: stretch;
    @media (width >= 48rem) {
      grid-template-columns: 1fr auto;
    }
    grid-template-areas: "main strip";
  }
  .photo-viewer .pv-main {
    grid-area: main;
  }
  .photo-viewer .pv-strip {
    grid-area: strip;
  }
  .pv-main {
    position: relative;
    display: grid;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    grid-template-rows: auto 1fr auto;
    background-color: var(--bg-photo-viewer-main, var(--alpha-white-100));
    box-shadow: inset 0 0 0 1px var(--border-photo-viewer-main, var(--border-primary)), var(--shadow-photo-viewer-main, var(--shadow-xs));
    max-height: var(--pv-main-max-h);
    aspect-ratio: var(--pv-main-aspect);
  }
  .pv-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
  }
  .pv-stage:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .pv-image {
    height: 100%;
    width: 100%;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--bg-photo-viewer-image, var(--bg-primary-subtle));
    transition: opacity var(--pv-transition-duration) ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    will-change: transform;
  }
  .pv-image.is-loading {
    opacity: 0;
  }
  .photo-viewer.is-zoomed .pv-stage {
    cursor: grab;
  }
  .photo-viewer.is-zoomed .pv-stage:active {
    cursor: grabbing;
  }
  .photo-viewer.is-zoomed .pv-stage .pv-image {
    transition: none;
  }
  .pv-video {
    height: 100%;
    width: 100%;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    background-color: oklch(0% 0 0);
  }
  .pv-video-controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-video-controls);
    backdrop-filter: blur(8px);
    color: var(--text-photo-viewer-toolbar);
    z-index: 3;
  }
  .pv-video-controls__btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background-color: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pv-video-controls__progress {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-video-progress);
    overflow: hidden;
  }
  .pv-video-controls__progress-fill {
    height: 100%;
    width: 0;
    background-color: var(--bg-photo-viewer-video-progress-fill);
    transition: width 100ms linear;
  }
  .pv-video-controls__time {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-photo-viewer-toolbar);
  }
  .pv-caption-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 18px;
    background: var(--bg-photo-viewer-caption-overlay);
    color: var(--text-photo-viewer-caption-overlay);
    z-index: 2;
    pointer-events: none;
  }
  .pv-caption-overlay__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 2px oklch(0% 0 0 / 0.4);
  }
  .pv-caption-overlay__text {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 3px;
  }
  .pv-caption-overlay__meta {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    opacity: 0.6;
    margin-top: 6px;
    display: inline-flex;
    gap: 6px;
  }
  .pv-caption-overlay__meta > * + *::before {
    content: "·";
    margin-right: 6px;
    opacity: 0.6;
  }
  .pv-stage-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-status);
    color: var(--text-photo-viewer-status);
    font-size: 10.5px;
    font-weight: 500;
    backdrop-filter: blur(6px);
  }
  .pv-stage-badge--success {
    background-color: var(--utility-green-600);
  }
  .pv-stage-badge--warning {
    background-color: var(--utility-amber-600);
  }
  .pv-stage-badge--danger {
    background-color: var(--utility-red-600);
  }
  .pv-stage-badge--info {
    background-color: var(--utility-blue-600);
  }
  .pv-nav {
    position: absolute;
    top: calc(1 / 2 * 100%);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    background-color: var(--bg-photo-viewer-nav);
    color: var(--text-photo-viewer-nav);
    border: 1px solid var(--border-photo-viewer-nav);
    backdrop-filter: blur(4px);
    transition: opacity 160ms ease, background-color 140ms ease, transform 130ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    will-change: transform;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
  }
  .pv-main:hover .pv-nav, .pv-nav:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .pv-nav:hover {
    background-color: var(--bg-photo-viewer-nav-hover);
  }
  .pv-nav:active {
    background-color: var(--bg-photo-viewer-nav-active);
    transform: translateY(-50%) scale(0.94);
  }
  .pv-nav:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .pv-nav[data-pv-prev] {
    left: 0.75rem;
  }
  .pv-nav[data-pv-next] {
    right: 0.75rem;
  }
  .pv-nav[disabled] {
    opacity: 0.3 !important;
    cursor: not-allowed;
    pointer-events: none;
  }
  @media (pointer: coarse) {
    .pv-nav {
      opacity: 1;
      pointer-events: auto;
      width: 44px;
      height: 44px;
    }
  }
  .pv-counter {
    position: absolute;
    top: calc(var(--spacing) * 3);
    left: calc(1 / 2 * 100%);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    max-width: calc(100% - 7rem);
    white-space: nowrap;
    text-align: center;
    background-color: var(--bg-photo-viewer-counter);
    color: var(--text-photo-viewer-counter);
    backdrop-filter: blur(8px);
    z-index: 3;
    pointer-events: none;
  }
  .pv-counter[data-position="bottom-center"] {
    top: auto;
    bottom: 0.75rem;
  }
  .pv-counter[data-position="top-right"] {
    top: 0.75rem;
    bottom: auto;
    left: auto;
    right: 0.75rem;
    transform: none;
  }
  .pv-counter[data-position="top-left"] {
    top: 0.75rem;
    bottom: auto;
    left: 0.75rem;
    transform: none;
  }
  .pv-counter[data-position="bottom-right"] {
    top: auto;
    bottom: 0.75rem;
    left: auto;
    right: 0.75rem;
    transform: none;
  }
  .pv-counter[data-position="bottom-left"] {
    top: auto;
    bottom: 0.75rem;
    left: 0.75rem;
    right: auto;
    transform: none;
  }
  .pv-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-toolbar);
    color: var(--text-photo-viewer-toolbar);
    border: 1px solid var(--border-photo-viewer-toolbar);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .pv-main:hover .pv-toolbar, .pv-stage:focus-within .pv-toolbar, .photo-viewer.is-fullscreen .pv-toolbar {
    opacity: 1;
  }
  .pv-toolbar__btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-zoom-btn);
    color: var(--text-photo-viewer-zoom-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 120ms ease, transform 120ms ease;
  }
  .pv-toolbar__btn:hover {
    background-color: var(--bg-photo-viewer-zoom-btn-hover);
  }
  .pv-toolbar__btn:active {
    background-color: var(--bg-photo-viewer-zoom-btn-active);
    transform: scale(0.94);
  }
  .pv-toolbar__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .pv-toolbar__btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
  .pv-toolbar__divider {
    width: 1px;
    height: 16px;
    margin: 0 2px;
    background-color: var(--border-photo-viewer-toolbar);
  }
  .photo-viewer.pv-controls-bottom .pv-toolbar, .photo-viewer.pv-fullscreen .pv-toolbar {
    top: auto;
    right: auto;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
  }
  .photo-viewer.pv-controls-bottom .pv-toolbar__btn, .photo-viewer.pv-fullscreen .pv-toolbar__btn {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .photo-viewer.pv-controls-bottom .pv-toolbar__divider, .photo-viewer.pv-fullscreen .pv-toolbar__divider {
    height: 20px;
  }
  .photo-viewer.pv-controls-bottom.is-zoomed .pv-zoom-bar, .photo-viewer.pv-fullscreen.is-zoomed .pv-zoom-bar {
    bottom: 62px;
  }
  .pv-zoom-bar {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-toolbar);
    color: var(--text-photo-viewer-zoom-level);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }
  .photo-viewer.is-zoomed .pv-zoom-bar {
    opacity: 1;
  }
  .pv-bar {
    position: relative;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    background-color: var(--bg-photo-viewer-bar, var(--alpha-0));
    border-color: var(--border-photo-viewer-bar, var(--border-primary-subtle));
    color: var(--text-photo-viewer-bar, var(--text-secondary));
  }
  .pv-bar-left {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .pv-bar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-photo-viewer-title, var(--text-primary));
  }
  .pv-bar-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-photo-viewer-meta, var(--text-tertiary));
  }
  .pv-bar-actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .pv-content {
    position: relative;
    z-index: 10;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    background-color: var(--bg-photo-viewer-content, var(--alpha-0));
    border-color: var(--border-photo-viewer-content, var(--border-primary-subtle));
    color: var(--text-photo-viewer-content, var(--text-secondary));
  }
  .pv-content .pv-content-meta {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-photo-viewer-content-meta, var(--text-tertiary));
  }
  .pv-content .pv-content-body {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-photo-viewer-content-body, var(--text-primary));
  }
  .pv-strip {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
    display: flex;
    &.collapse.show {
      display: flex;
    }
    scrollbar-width: thin;
    gap: calc(var(--spacing) * 2);
    scroll-behavior: smooth;
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 2);
    min-width: 0;
    background-color: var(--bg-photo-viewer-strip, var(--alpha-0));
    box-shadow: inset 0 0 0 1px var(--border-photo-viewer-strip, var(--border-primary-subtle));
  }
  .photo-viewer.pv-thumbs-top .pv-strip, .photo-viewer.pv-thumbs-bottom .pv-strip {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .photo-viewer.pv-thumbs-left .pv-strip, .photo-viewer.pv-thumbs-right .pv-strip {
    flex-direction: row;
    overflow-x: auto;
    @media (width >= 48rem) {
      flex-direction: column;
    }
    @media (width >= 48rem) {
      overflow-x: hidden;
    }
    @media (width >= 48rem) {
      overflow-y: auto;
    }
    max-height: var(--pv-main-max-h);
  }
  .pv-strip-header {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 8px 6px;
  }
  .pv-strip-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    border: 1px solid var(--border-photo-viewer-strip);
    color: var(--text-photo-viewer-meta);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  .pv-strip-chip:hover {
    color: var(--text-photo-viewer-title);
  }
  .pv-strip-chip.is-active {
    background-color: var(--bg-photo-viewer-thumb-active);
    color: var(--text-photo-viewer-title);
    border-color: var(--border-brand);
  }
  .pv-thumb {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    &:hover {
      @media (hover: hover) {
        cursor: pointer;
      }
    }
    background-color: var(--bg-photo-viewer-thumb, var(--alpha-0));
    box-shadow: inset 0 0 0 1px var(--border-photo-viewer-thumb, var(--border-primary-subtle));
    opacity: var(--opacity-photo-viewer-thumb, 0.92);
    transition: opacity 150ms ease-in-out, box-shadow 150ms ease-in-out;
  }
  .pv-thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .pv-thumb:hover {
    opacity: 100%;
  }
  .pv-thumb.active, .pv-thumb[aria-selected="true"] {
    opacity: 1;
    box-shadow: var(--ring-photo-viewer-thumb-selected);
  }
  .pv-thumb:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .pv-thumb.is-disabled, .pv-thumb[aria-disabled="true"], .pv-thumb:disabled {
    pointer-events: none;
    opacity: var(--opacity-photo-viewer-thumb-disabled, 0.6);
    filter: var(--filter-photo-viewer-thumb-disabled, none);
  }
  .pv-thumb-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--utility-amber-500);
    box-shadow: 0 0 0 2px var(--color-white);
  }
  .pv-thumb-badge--success {
    background-color: var(--utility-green-500);
  }
  .pv-thumb-badge--danger {
    background-color: var(--utility-red-500);
  }
  .pv-thumb-badge--info {
    background-color: var(--utility-blue-500);
  }
  .photo-viewer.pv-snap .pv-strip {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    --tw-scroll-snap-strictness: mandatory;
  }
  .photo-viewer.pv-snap.pv-thumbs-left .pv-strip, .photo-viewer.pv-snap.pv-thumbs-right .pv-strip {
    @media (width >= 48rem) {
      scroll-snap-type: y var(--tw-scroll-snap-strictness);
    }
  }
  .photo-viewer.pv-snap .pv-thumb {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .photo-viewer.pv-aspect-square {
    --pv-main-aspect: 1 / 1;
  }
  .photo-viewer.pv-aspect-4-3 {
    --pv-main-aspect: 4 / 3;
  }
  .photo-viewer.pv-aspect-16-9 {
    --pv-main-aspect: 16 / 9;
  }
  .pv-empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--bg-photo-viewer-image, var(--bg-primary-subtle));
    color: var(--text-tertiary);
  }
  .pv-empty-icon {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    opacity: 40%;
  }
  .pv-empty-text {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 50%;
  }
  .pv-loading {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, var(--bg-skeleton, var(--bg-tertiary)) 25%, var(--bg-skeleton-highlight, var(--bg-secondary)) 37%, var(--bg-skeleton, var(--bg-tertiary)) 63% );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    z-index: 1;
  }
  .pv-thumb .skeleton {
    position: absolute;
    inset: 0;
  }
  .pv-thumb img {
    transition: opacity 200ms ease;
  }
  .pv-thumb img.is-loading {
    opacity: 0;
  }
  .pv-strip.is-sorting {
    gap: calc(var(--spacing) * 3);
  }
  .pv-strip.is-sorting .pv-thumb {
    transition: transform 150ms ease, opacity 150ms ease;
  }
  .pv-thumb.is-dragging {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    opacity: 40%;
    z-index: 10;
  }
  .pv-thumb.is-drag-over {
    transform: scale(1.05);
    box-shadow: inset 0 0 0 2px var(--border-brand);
  }
  .pv-thumb.is-drop-before::before, .pv-thumb.is-drop-after::after {
    content: "";
    position: absolute;
    top: var(--spacing);
    bottom: var(--spacing);
    width: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-full);
    background-color: var(--border-brand);
    z-index: 11;
  }
  .pv-thumb.is-drop-before::before {
    left: -5px;
  }
  .pv-thumb.is-drop-after::after {
    right: -5px;
  }
  .photo-viewer.pv-thumbs-left .pv-thumb.is-drop-before::before, .photo-viewer.pv-thumbs-left .pv-thumb.is-drop-after::after, .photo-viewer.pv-thumbs-right .pv-thumb.is-drop-before::before, .photo-viewer.pv-thumbs-right .pv-thumb.is-drop-after::after {
    top: auto;
    right: var(--spacing);
    bottom: auto;
    left: var(--spacing);
    height: calc(var(--spacing) * 0.5);
    width: auto;
  }
  .photo-viewer.pv-thumbs-left .pv-thumb.is-drop-before::before, .photo-viewer.pv-thumbs-right .pv-thumb.is-drop-before::before {
    top: -5px;
  }
  .photo-viewer.pv-thumbs-left .pv-thumb.is-drop-after::after, .photo-viewer.pv-thumbs-right .pv-thumb.is-drop-after::after {
    bottom: -5px;
  }
  .pv-annotation {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  .pv-annotation__pin {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-annotation);
    color: var(--text-photo-viewer-annotation);
    border: 0;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ring-photo-viewer-annotation);
    transition: transform 140ms ease, background-color 140ms ease;
  }
  .pv-annotation__pin:hover {
    transform: scale(1.08);
  }
  .pv-annotation.is-active .pv-annotation__pin {
    background-color: var(--bg-photo-viewer-annotation-active);
    transform: scale(1.15);
  }
  .pv-annotation__note {
    position: absolute;
    left: 28px;
    top: -8px;
    width: 220px;
    padding: 8px 10px;
    background-color: var(--bg-photo-viewer-info);
    color: var(--text-photo-viewer-info);
    border: 1px solid var(--border-photo-viewer-info);
    border-radius: 8px;
    font-size: 12px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
    transform: translateX(-4px);
  }
  .pv-annotation:hover .pv-annotation__note, .pv-annotation.is-active .pv-annotation__note, .pv-annotation:focus-within .pv-annotation__note {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
  .pv-annotation.is-flip .pv-annotation__note {
    left: auto;
    right: 28px;
    transform: translateX(4px);
  }
  .pv-annotation.is-flip:hover .pv-annotation__note, .pv-annotation.is-flip.is-active .pv-annotation__note, .pv-annotation.is-flip:focus-within .pv-annotation__note {
    transform: translateX(0);
  }
  .pv-annotation[hidden] {
    display: none;
  }
  .photo-viewer.is-annotating .pv-stage {
    cursor: crosshair;
  }
  .photo-viewer.is-annotating .pv-annotation {
    cursor: default;
  }
  .pv-annotation--editable .pv-annotation__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 220px;
  }
  .pv-annotation__text {
    flex: 1 1 auto;
    min-width: 0;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.35;
  }
  .pv-annotation__text:empty::before {
    content: attr(data-placeholder);
    color: var(--text-photo-viewer-info-muted);
  }
  .pv-annotation__delete {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    color: var(--text-photo-viewer-info-muted);
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .pv-annotation__delete:hover {
    background-color: var(--bg-photo-viewer-thumb-hover);
    color: var(--utility-red-500);
  }
  .pv-annotation__delete:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .pv-toolbar__btn[aria-pressed="true"] {
    background-color: var(--bg-photo-viewer-zoom-btn-active);
    color: var(--text-photo-viewer-zoom-btn);
  }
  .pv-annotate-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    background-color: var(--bg-photo-viewer-toolbar);
    color: var(--text-photo-viewer-toolbar);
    backdrop-filter: blur(6px);
    pointer-events: none;
    white-space: nowrap;
  }
  .photo-viewer.pv-info {
    grid-template-areas: "main info" "strip strip";
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  @media (max-width: 768px) {
    .photo-viewer.pv-info {
      grid-template-areas: "main" "info" "strip";
      grid-template-columns: 1fr;
    }
  }
  .pv-info-panel {
    grid-area: info;
    background-color: var(--bg-photo-viewer-info);
    box-shadow: inset 0 0 0 1px var(--border-photo-viewer-info);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: var(--pv-main-max-h);
    color: var(--text-photo-viewer-info);
  }
  .pv-info-panel__header {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    background-color: var(--bg-photo-viewer-info-header);
    border-bottom: 1px solid var(--border-photo-viewer-info);
  }
  .pv-info-panel__body {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(80px, 110px) 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: 12px;
    overflow-y: auto;
  }
  .pv-info-panel__body dt {
    color: var(--text-photo-viewer-info-muted);
    font-weight: 500;
  }
  .pv-info-panel__body dd {
    margin: 0;
    color: var(--text-photo-viewer-info);
  }
  .pv-info-panel__section {
    grid-column: 1 / -1;
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-photo-viewer-info-muted);
    margin-top: 6px;
  }
  .pv-info-panel__footer {
    margin-top: auto;
    padding: 10px 14px;
    border-top: 1px solid var(--border-photo-viewer-info);
    display: flex;
    gap: 6px;
  }
  .pv-compare-stage {
    position: relative;
    overflow: hidden;
    --pv-compare-x: 50%;
    cursor: ew-resize;
    touch-action: none;
  }
  .pv-compare-before, .pv-compare-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: var(--bg-photo-viewer-image, var(--bg-primary-subtle));
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }
  .pv-compare-after {
    clip-path: inset(0 0 0 var(--pv-compare-x));
  }
  .pv-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pv-compare-x);
    width: 2px;
    background-color: var(--line-photo-viewer-compare);
    z-index: 3;
    cursor: ew-resize;
    transform: translateX(-1px);
  }
  .pv-compare-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-compare-handle);
    box-shadow: var(--shadow-photo-viewer-compare-handle);
    transform: translate(-50%, -50%);
  }
  .pv-compare-handle:focus-visible {
    outline: none;
  }
  .pv-compare-handle:focus-visible::after {
    box-shadow: var(--shadow-photo-viewer-compare-handle), 0 0 0 3px var(--border-focus);
  }
  .pv-compare-handle::before {
    content: "\f0dc";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    font-size: 12px;
    color: oklch(0% 0 0 / 0.6);
    z-index: 1;
  }
  .pv-compare-label {
    position: absolute;
    bottom: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-counter);
    color: var(--text-photo-viewer-counter);
    font-size: 11px;
    z-index: 3;
    backdrop-filter: blur(6px);
  }
  .pv-compare-label--before {
    left: 12px;
  }
  .pv-compare-label--after {
    right: 12px;
  }
  .photo-viewer.pv-fullscreen, .product-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 100);
    background: var(--bg-photo-viewer-fullscreen);
    backdrop-filter: var(--backdrop-photo-viewer-fullscreen);
    -webkit-backdrop-filter: var(--backdrop-photo-viewer-fullscreen);
  }
  .photo-viewer.pv-fullscreen .pv-main {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    max-height: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: none;
  }
  .photo-viewer.pv-fullscreen .pv-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 4rem;
  }
  .photo-viewer.pv-fullscreen .pv-image {
    background: transparent;
    max-height: 100%;
  }
  .photo-viewer.pv-fullscreen .pv-strip {
    background-color: transparent;
    box-shadow: none;
    border-top: 1px solid var(--border-photo-viewer-toolbar);
    border-radius: 0;
    max-width: 100%;
    margin: 0 auto;
    padding: 12px 24px;
  }
  .photo-viewer.pv-fullscreen .pv-thumb {
    background-color: var(--bg-photo-viewer-fullscreen-toolbar);
    box-shadow: inset 0 0 0 1px var(--border-photo-viewer-toolbar);
  }
  .photo-viewer.pv-fullscreen .pv-thumb.active {
    box-shadow: var(--ring-photo-viewer-thumb-selected);
  }
  .photo-viewer.pv-fullscreen .pv-counter, .photo-viewer.pv-fullscreen .pv-zoom-bar {
    color: var(--text-photo-viewer-counter);
  }
  .pv-fullscreen-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: var(--bg-photo-viewer-fullscreen-toolbar);
    color: var(--text-photo-viewer-nav);
    border: 1px solid var(--border-photo-viewer-toolbar);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background-color 120ms ease;
  }
  .pv-fullscreen-close:hover {
    background-color: var(--bg-photo-viewer-zoom-btn-hover);
  }
  .product-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: oklch(0% 0 0 / 0.85);
    backdrop-filter: blur(8px);
  }
  .product-lightbox__container {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    padding: 3rem 4rem;
  }
  .product-lightbox__close {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: var(--bg-photo-viewer-fullscreen-toolbar);
    color: var(--text-photo-viewer-nav);
    border: 1px solid oklch(100% 0 0 / 0.15);
    font-size: 1.25rem;
    z-index: 2;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .product-lightbox__close:hover {
    background: oklch(100% 0 0 / 0.16);
    color: #fff;
  }
  .product-lightbox__stage {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    width: 100%;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
  .product-lightbox__image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 200ms ease;
  }
  .product-lightbox__image.is-loading {
    opacity: 0;
  }
  .product-lightbox__loading {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, oklch(100% 0 0 / 0.04) 25%, oklch(100% 0 0 / 0.08) 37%, oklch(100% 0 0 / 0.04) 63% );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
  }
  .product-lightbox__nav {
    position: absolute;
    top: calc(1 / 2 * 100%);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 44px;
    height: 44px;
    background: var(--bg-photo-viewer-nav);
    color: var(--text-photo-viewer-nav);
    border: 1px solid var(--border-photo-viewer-nav);
    font-size: 1.125rem;
    z-index: 2;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .product-lightbox__nav:hover {
    background: var(--bg-photo-viewer-nav-hover);
    color: #fff;
  }
  .product-lightbox__prev {
    left: 1rem;
  }
  .product-lightbox__next {
    right: 1rem;
  }
  .product-lightbox__footer {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .product-lightbox__counter {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: oklch(100% 0 0 / 0.5);
  }
  .product-lightbox__strip {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    max-width: 100%;
    gap: calc(var(--spacing) * 2);
    overflow-x: auto;
    padding-inline: var(--spacing);
    padding-block: var(--spacing);
    scrollbar-width: thin;
  }
  .product-lightbox__thumb {
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 2px;
    width: 56px;
    height: 56px;
    border-color: transparent;
    opacity: 0.6;
    transition: opacity 150ms ease, border-color 150ms ease;
  }
  .product-lightbox__thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .product-lightbox__thumb:hover {
    opacity: 0.85;
  }
  .product-lightbox__thumb.active {
    opacity: 1;
    border-color: var(--border-brand);
  }
  .product-lightbox[data-count="1"] .product-lightbox__nav, .product-lightbox[data-count="1"] .product-lightbox__counter, .product-lightbox[data-count="1"] .product-lightbox__strip, .product-lightbox[data-count="0"] .product-lightbox__nav, .product-lightbox[data-count="0"] .product-lightbox__counter, .product-lightbox[data-count="0"] .product-lightbox__strip {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .pv-image, .pv-nav, .pv-toolbar, .pv-toolbar__btn, .pv-thumb, .pv-strip-chip, .pv-fullscreen-close, .pv-annotation__pin, .pv-annotation__note, .pv-annotation__delete {
      transition: none;
    }
    .pv-loading, .pv-thumb .skeleton {
      animation: none;
    }
  }
}
@layer utilities {
  .tag {
    display: inline-flex;
    align-items: center;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    gap: 6px;
    padding: var(--padding-tag-y, 4px) var(--padding-tag-x, 10px);
    font-size: var(--text-tag-md, 12px);
    border: 0;
    border-radius: var(--radius-tag, 9999px);
    background-color: var(--bg-tag-neutral);
    color: var(--text-tag-neutral);
    box-shadow: inset 0 0 0 1px var(--border-tag-neutral);
    transition-property: background-color, color, box-shadow, transform;
    transition-duration: var(--duration-tag, 140ms);
    transition-timing-function: var(--ease-tag, cubic-bezier(.2, 0, .2, 1));
  }
  .tag--pill {
    border-radius: var(--radius-tag, 9999px);
  }
  .tag--rounded {
    border-radius: var(--radius-md, 0.375rem);
  }
  .tag--square {
    border-radius: var(--radius-none, 0);
  }
  .tag--xs {
    padding: 1px 6px;
    font-size: 0.625rem;
    gap: 3px;
  }
  .tag--xs .tag__icon {
    width: 9px;
    height: 9px;
    font-size: 0.5625rem;
  }
  .tag--xs .tag__dot {
    width: 5px;
    height: 5px;
  }
  .tag--xs .tag__dismiss {
    width: 12px;
    height: 12px;
    font-size: 8px;
    margin-right: -2px;
  }
  .tag--xs .tag__count {
    min-width: 14px;
    height: 12px;
    font-size: 0.5rem;
    padding: 0 3px;
  }
  .tag--xs .tag__avatar {
    width: 14px;
    height: 14px;
    font-size: 7px;
    margin-left: -3px;
  }
  .tag--sm {
    padding: var(--padding-tag-sm-y, 3px) var(--padding-tag-sm-x, 8px);
    font-size: var(--text-tag-sm, 11px);
    gap: 4px;
  }
  .tag--sm .tag__icon {
    width: 10px;
    height: 10px;
    font-size: 0.625rem;
  }
  .tag--sm .tag__dot {
    width: 6px;
    height: 6px;
  }
  .tag--sm .tag__dismiss {
    width: 14px;
    height: 14px;
    font-size: 9px;
    margin-right: -3px;
  }
  .tag--sm .tag__count {
    min-width: 16px;
    height: 13px;
    font-size: 0.5rem;
    padding: 0 4px;
  }
  .tag--sm .tag__avatar {
    width: 16px;
    height: 16px;
    font-size: 8px;
    margin-left: -3px;
  }
  .tag--lg {
    padding: var(--padding-tag-lg-y, 6px) var(--padding-tag-lg-x, 12px);
    font-size: var(--text-tag-lg, 13px);
    gap: 6px;
  }
  .tag--lg .tag__icon {
    width: 14px;
    height: 14px;
    font-size: 0.8125rem;
  }
  .tag--lg .tag__dot {
    width: 8px;
    height: 8px;
  }
  .tag--lg .tag__dismiss {
    width: 20px;
    height: 20px;
    font-size: 11px;
    margin-right: -4px;
  }
  .tag--lg .tag__count {
    min-width: 20px;
    height: 16px;
    font-size: 0.625rem;
    padding: 0 5px;
  }
  .tag--lg .tag__avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
    margin-left: -4px;
  }
  .tag--xl {
    padding: 7px 16px;
    font-size: 0.875rem;
    gap: 8px;
  }
  .tag--xl .tag__icon {
    width: 16px;
    height: 16px;
    font-size: 0.875rem;
  }
  .tag--xl .tag__dot {
    width: 9px;
    height: 9px;
  }
  .tag--xl .tag__dismiss {
    width: 22px;
    height: 22px;
    font-size: 12px;
    margin-right: -5px;
  }
  .tag--xl .tag__count {
    min-width: 22px;
    height: 18px;
    font-size: 0.6875rem;
    padding: 0 6px;
  }
  .tag--xl .tag__avatar {
    width: 26px;
    height: 26px;
    font-size: 11px;
    margin-left: -5px;
  }
  .tag__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-tag-icon, 14px);
    height: var(--size-tag-icon, 14px);
    font-size: var(--text-tag-icon, 12px);
    line-height: 1;
    opacity: var(--opacity-tag-icon, 0.9);
  }
  .tag__dot {
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 7px;
    height: 7px;
    background-color: currentColor;
  }
  .tag__dot--pulse {
    animation: tag-dot-pulse 1.6s ease-in-out infinite;
  }
  @keyframes tag-dot-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.45;
      transform: scale(0.72);
    }
  }
  .tag__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: -4px;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 14%, transparent);
    }
    box-shadow: inset 0 0 0 0.5px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 0.5px color-mix(in oklch, var(--text-primary) 16%, transparent);
    }
    color: inherit;
    font-size: 8.5px;
    line-height: 1;
  }
  .tag__avatar > img, .tag__avatar > svg {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .tag__count {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 18px;
    height: 14px;
    padding: 0 5px;
    border-radius: var(--radius-sm, 0.25rem);
    font-size: 0.5625rem;
    line-height: 1;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 16%, transparent);
    }
    color: inherit;
    font-variant-numeric: tabular-nums;
  }
  .tag__dismiss {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding: 0;
    width: var(--size-tag-dismiss, 18px);
    height: var(--size-tag-dismiss, 18px);
    margin-right: -3px;
    color: inherit;
    opacity: 0.7;
    font-size: 10px;
    line-height: 1;
    transition: background-color var(--duration-tag, 140ms) var(--ease-tag, ease), opacity var(--duration-tag, 140ms) var(--ease-tag, ease), color var(--duration-tag, 140ms) var(--ease-tag, ease);
  }
  .tag__dismiss:hover {
    opacity: 1;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 18%, transparent);
    }
  }
  .tag__dismiss:focus-visible {
    opacity: 1;
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .tag--neutral {
    background-color: var(--bg-tag-neutral);
    color: var(--text-tag-neutral);
    box-shadow: inset 0 0 0 1px var(--border-tag-neutral);
  }
  .tag--primary {
    background-color: var(--bg-tag-primary);
    color: var(--text-tag-primary);
    box-shadow: inset 0 0 0 1px var(--border-tag-primary);
  }
  .tag--success {
    background-color: var(--bg-tag-success);
    color: var(--text-tag-success);
    box-shadow: inset 0 0 0 1px var(--border-tag-success);
  }
  .tag--warning {
    background-color: var(--bg-tag-warning);
    color: var(--text-tag-warning);
    box-shadow: inset 0 0 0 1px var(--border-tag-warning);
  }
  .tag--danger {
    background-color: var(--bg-tag-danger);
    color: var(--text-tag-danger);
    box-shadow: inset 0 0 0 1px var(--border-tag-danger);
  }
  .tag--info {
    background-color: var(--text-tag-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-tag-info) 12%, transparent);
    }
    color: var(--text-tag-info);
    box-shadow: inset 0 0 0 1px var(--text-tag-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-tag-info) 20%, transparent);
    }
  }
  .tag--outline {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
  }
  .tag--outline.tag--neutral {
    box-shadow: inset 0 0 0 1px var(--border-tag-outline);
  }
  .tag--ghost {
    background-color: transparent;
    box-shadow: none;
  }
  .tag--ghost:hover, .tag--ghost.tag--clickable:hover, .tag--ghost.tag--filter:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 12%, transparent);
    }
  }
  .tag--solid {
    background-color: var(--text-primary);
    box-shadow: none;
  }
  .tag--solid.tag--primary {
    background-color: var(--text-tag-primary);
  }
  .tag--solid.tag--success {
    background-color: var(--text-tag-success);
  }
  .tag--solid.tag--warning {
    background-color: var(--text-tag-warning);
  }
  .tag--solid.tag--danger {
    background-color: var(--text-tag-danger);
  }
  .tag--solid.tag--info {
    background-color: var(--text-tag-info);
  }
  .tag--solid, .tag--solid :is(.tag__icon, .tag__dot, .tag__avatar, .tag__count, .tag__dismiss) {
    color: var(--alpha-white-100, #fff);
  }
  .tag--solid .tag__avatar {
    background-color: var(--alpha-white-100, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--alpha-white-100, #fff) 22%, transparent);
    }
    box-shadow: none;
  }
  .tag--solid .tag__count {
    background-color: var(--alpha-white-100, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--alpha-white-100, #fff) 22%, transparent);
    }
  }
  .tag--solid .tag__dismiss:hover {
    background-color: var(--alpha-white-100, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--alpha-white-100, #fff) 22%, transparent);
    }
  }
  .tag--muted {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
    box-shadow: none;
    color: var(--text-tertiary);
  }
  .tag--tonal {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 12%, transparent);
    }
    box-shadow: none;
    color: var(--text-primary);
  }
  .tag--tonal.tag--neutral {
    background-color: var(--text-tag-neutral);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-tag-neutral) 16%, transparent);
    }
    color: var(--text-tag-neutral);
  }
  .tag--tonal.tag--primary {
    background-color: var(--text-tag-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-tag-primary) 22%, transparent);
    }
    color: var(--text-tag-primary);
  }
  .tag--tonal.tag--success {
    background-color: var(--text-tag-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-tag-success) 22%, transparent);
    }
    color: var(--text-tag-success);
  }
  .tag--tonal.tag--warning {
    background-color: var(--text-tag-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-tag-warning) 22%, transparent);
    }
    color: var(--text-tag-warning);
  }
  .tag--tonal.tag--danger {
    background-color: var(--text-tag-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-tag-danger) 22%, transparent);
    }
    color: var(--text-tag-danger);
  }
  .tag--tonal.tag--info {
    background-color: var(--text-tag-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-tag-info) 22%, transparent);
    }
    color: var(--text-tag-info);
  }
  .tag--clickable {
    cursor: pointer;
  }
  .tag--clickable:not(.tag--solid):hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 18%, transparent);
    }
  }
  .tag--clickable.tag--solid:hover {
    filter: brightness(1.08);
  }
  .tag--clickable.tag--outline:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 8%, transparent);
    }
  }
  .tag--clickable:active {
    transform: scale(0.97);
  }
  .tag--filter {
    cursor: pointer;
  }
  .tag--filter:not(.tag--solid):hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 18%, transparent);
    }
  }
  .tag--selected {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 22%, transparent);
    }
    box-shadow: inset 0 0 0 1px currentColor;
  }
  .tag--solid.tag--selected {
    box-shadow: inset 0 0 0 1.5px var(--alpha-white-100, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--alpha-white-100, #fff) 55%, transparent);
    }
  }
  .tag--removable {
    padding-right: 6px;
  }
  .tag--xs.tag--removable {
    padding-right: 4px;
  }
  .tag--lg.tag--removable {
    padding-right: 8px;
  }
  .tag--xl.tag--removable {
    padding-right: 10px;
  }
  .tag:disabled, .tag.is-disabled, .tag--disabled {
    pointer-events: none;
    opacity: var(--opacity-tag-disabled, 0.5);
    filter: saturate(0.6);
  }
  .tag:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .tag[data-popover-target] {
    cursor: help;
  }
  .tag-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .tag-group--gap-sm {
    gap: 2px;
  }
  .tag-group--gap-md {
    gap: 6px;
  }
  .tag-group--gap-lg {
    gap: 10px;
  }
  .tag--enter {
    animation: tag-enter var(--duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes tag-enter {
    from {
      opacity: 0;
      transform: scale(0.85);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) {
    .tag--solid {
      background-color: var(--utility-neutral-700);
    }
    .tag--solid.tag--primary {
      background-color: var(--utility-blue-600);
    }
    .tag--solid.tag--success {
      background-color: var(--utility-green-600);
    }
    .tag--solid.tag--warning {
      background-color: var(--utility-amber-700);
    }
    .tag--solid.tag--danger {
      background-color: var(--utility-red-600);
    }
    .tag--solid.tag--info {
      background-color: var(--utility-blue-600);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tag, .tag__dismiss, .tag__dot--pulse, .tag--clickable:active, .tag--enter {
      transition: none;
      animation: none;
      transform: none;
    }
  }
}
@layer utilities {
  .chip {
    --chip-font: 0.625rem;
    --chip-gap: 3px;
    --chip-pad-y: 1px;
    --chip-pad-x: 6px;
    --chip-min-h: 0;
    --chip-icon: 9px;
    --chip-dismiss: 12px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    --tw-leading: 1;
    line-height: 1;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    gap: var(--chip-gap);
    padding: var(--chip-pad-y) var(--chip-pad-x);
    min-height: var(--chip-min-h);
    font-size: var(--chip-font);
    font-weight: 500;
    background-color: var(--bg-tag-neutral);
    color: var(--text-tag-neutral);
    border: 1px solid var(--border-tag-neutral, transparent);
    transition-property: background-color, color, border-color, box-shadow, transform;
    transition-duration: var(--duration-tag, 140ms);
    transition-timing-function: var(--ease-tag, cubic-bezier(.2, 0, .2, 1));
  }
  .chip__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--chip-icon);
    height: var(--chip-icon);
    font-size: calc(var(--chip-icon) - 1px);
    line-height: 1;
    opacity: 0.85;
  }
  .chip__dismiss {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding: 0;
    width: var(--chip-dismiss);
    height: var(--chip-dismiss);
    margin-right: -2px;
    color: inherit;
    opacity: 0.55;
    font-size: calc(var(--chip-dismiss) - 4px);
    line-height: 1;
    transition: background-color var(--duration-tag, 140ms) var(--ease-tag, ease), opacity var(--duration-tag, 140ms) var(--ease-tag, ease);
  }
  .chip__dismiss:hover {
    opacity: 1;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 18%, transparent);
    }
  }
  .chip__dismiss:focus-visible {
    opacity: 1;
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .chip--md {
    --chip-font: 0.8125rem;
    --chip-gap: 5px;
    --chip-pad-y: 4px;
    --chip-pad-x: 10px;
    --chip-min-h: 1.75rem;
    --chip-icon: 12px;
    --chip-dismiss: 16px;
  }
  .chip--lg {
    --chip-font: 0.875rem;
    --chip-gap: 6px;
    --chip-pad-y: 6px;
    --chip-pad-x: 12px;
    --chip-min-h: 2rem;
    --chip-icon: 14px;
    --chip-dismiss: 18px;
  }
  .chip--filter {
    --chip-font: 0.8125rem;
    --chip-gap: 5px;
    --chip-pad-y: 4px;
    --chip-pad-x: 10px;
    --chip-min-h: 1.75rem;
    --chip-icon: 12px;
    --chip-dismiss: 16px;
    font-weight: 500;
  }
  .chip--filter.chip--selected, .chip--filter[aria-pressed="true"] {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 26%, transparent);
    }
    box-shadow: inset 0 0 0 1.5px currentColor;
    font-weight: 600;
  }
  .chip--primary {
    background-color: var(--bg-tag-primary);
    color: var(--text-tag-primary);
    border-color: var(--border-tag-primary, transparent);
  }
  .chip--success {
    background-color: var(--bg-tag-success);
    color: var(--text-tag-success);
    border-color: var(--border-tag-success, transparent);
  }
  .chip--warning {
    background-color: var(--bg-tag-warning);
    color: var(--text-tag-warning);
    border-color: var(--border-tag-warning, transparent);
  }
  .chip--danger {
    background-color: var(--bg-tag-danger);
    color: var(--text-tag-danger);
    border-color: var(--border-tag-danger, transparent);
  }
  .chip--info {
    background-color: var(--bg-tag-info, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-tag-info, color-mix(in oklch, var(--text-info) 12%, transparent));
    }
    color: var(--text-tag-info, var(--text-info));
    border-color: var(--border-tag-info, transparent);
  }
  .chip--outline {
    background-color: transparent;
    border-color: var(--border-divider);
  }
  .chip--outline.chip--primary, .chip--outline.chip--success, .chip--outline.chip--warning, .chip--outline.chip--danger, .chip--outline.chip--info {
    border-color: currentColor;
  }
  .chip--clickable, .chip--filter {
    cursor: pointer;
  }
  .chip--clickable:hover, .chip--filter:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 18%, transparent);
    }
  }
  .chip--clickable:active, .chip--filter:active {
    transform: scale(0.97);
  }
  .chip--selected, .chip[aria-pressed="true"] {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 22%, transparent);
    }
    box-shadow: inset 0 0 0 1px currentColor;
  }
  .chip:disabled, .chip.is-disabled, .chip--disabled {
    pointer-events: none;
    opacity: 0.5;
    filter: saturate(0.6);
  }
  .chip:focus-visible, .chip--clickable:focus-visible, .chip--filter:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: none;
  }
  .chip--danger:focus-visible {
    outline-color: var(--border-danger, var(--text-danger));
  }
  .chip--removable {
    padding-right: calc(var(--chip-pad-x) - 2px);
  }
  .chip--enter {
    animation: chip-enter 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes chip-enter {
    from {
      opacity: 0;
      transform: scale(0.85);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .chip, .chip__dismiss, .chip--clickable:active, .chip--filter:active, .chip--enter {
      transition: none;
      animation: none;
      transform: none;
    }
  }
}
@layer utilities {
  .signals {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-signals, var(--spacing));
  }
  .signals--tight {
    gap: var(--gap-signals-tight, 2px);
  }
  .signals--end {
    justify-content: flex-end;
  }
  .signal {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    --tw-leading: calc(var(--spacing) * 3);
    line-height: calc(var(--spacing) * 3);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    gap: var(--gap-signal-inner, var(--spacing));
    padding: var(--padding-signal-y, 2px) var(--padding-signal-x, 6px);
    font-size: var(--text-signal-size, var(--text-xxs));
    font-weight: 500;
    background-color: var(--bg-signal, var(--bg-badge));
    color: var(--text-signal, var(--text-badge));
    border: 1px solid var(--border-signal, transparent);
    font-variant-numeric: tabular-nums;
  }
  .signal > i, .signal > [class*="fa-"] {
    font-size: var(--text-signal-icon, 0.75em);
    color: currentColor;
    opacity: var(--opacity-signal-icon, 0.85);
    line-height: 1;
  }
  .signal__count {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .signal--success {
    background-color: var(--bg-signal-success, var(--bg-badge-success));
    color: var(--text-signal-success, var(--text-badge-success));
  }
  .signal--danger {
    background-color: var(--bg-signal-danger, var(--bg-badge-danger));
    color: var(--text-signal-danger, var(--text-badge-danger));
  }
  .signal--warning {
    background-color: var(--bg-signal-warning, var(--bg-badge-warning));
    color: var(--text-signal-warning, var(--text-badge-warning));
  }
  .signal--info {
    background-color: var(--bg-signal-info, var(--bg-badge-info));
    color: var(--text-signal-info, var(--text-badge-info));
  }
  .signal--teal {
    background-color: var(--bg-signal-teal, var(--bg-badge-teal));
    color: var(--text-signal-teal, var(--text-badge-teal));
  }
  .signal--outline {
    background-color: transparent;
    border-color: var(--border-signal-outline, var(--border-divider));
    color: var(--text-signal-outline, var(--text-secondary));
  }
  .signal--icon {
    justify-content: center;
    min-width: var(--size-signal-icon, 1.25rem);
    padding: var(--padding-signal-icon, 2px);
  }
  .signal--clickable {
    cursor: pointer;
    transition: background-color var(--duration-signal, 120ms) ease, color var(--duration-signal, 120ms) ease, border-color var(--duration-signal, 120ms) ease;
  }
  .signal--clickable:hover {
    background-color: var(--bg-signal-hover, var(--bg-badge-hover));
  }
  .signal--clickable:focus-visible {
    outline: 2px solid var(--border-signal-focus, var(--border-info-subtle));
    outline-offset: 2px;
  }
  .signal--sm {
    font-size: 0.625rem;
    padding: 1px 5px;
    gap: 3px;
  }
  .signal--sm > i, .signal--sm > [class*="fa-"] {
    font-size: 0.65em;
  }
  .signal--lg {
    font-size: 0.8125rem;
    padding: 3px 8px;
    gap: 5px;
    font-weight: 600;
  }
  .signal--lg > i, .signal--lg > [class*="fa-"] {
    font-size: 0.85em;
  }
  .signal--live::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: currentColor;
    margin-right: 4px;
    flex-shrink: 0;
    animation: signal-pulse 1.6s ease-in-out infinite;
  }
  @keyframes signal-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.45;
      transform: scale(0.72);
    }
  }
  .signal--tonal-success {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 12%, transparent);
    }
    color: var(--text-success);
  }
  .signal--tonal-danger {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 12%, transparent);
    }
    color: var(--text-danger);
  }
  .signal--tonal-warning {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 12%, transparent);
    }
    color: var(--text-warning);
  }
  .signal--tonal-info {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, transparent);
    }
    color: var(--text-info);
  }
  @media (prefers-reduced-motion: reduce) {
    .signal--clickable {
      transition: none;
    }
    .signal--live::before {
      animation: none;
    }
  }
}
@layer utilities {
  .shortcut-help {
    position: fixed;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing) * 4);
    z-index: var(--z-modal, 50);
    background-color: var(--bg-modal-overlay);
    backdrop-filter: blur(var(--shortcut-help-scrim-blur, var(--blur-modal-scrim, 6px)));
    -webkit-backdrop-filter: blur(var(--shortcut-help-scrim-blur, var(--blur-modal-scrim, 6px)));
    display: none;
  }
  .shortcut-help.is-open {
    display: flex;
  }
  .shortcut-help__dialog {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    width: 100%;
    max-width: 640px;
    max-height: min(80vh, 640px);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-primary);
    border-radius: var(--radius-shortcut-help, var(--radius-xl, 0.75rem));
    box-shadow: var(--shadow-xl);
  }
  .shortcut-help.is-open .shortcut-help__dialog {
    animation: shortcut-help-in var(--duration-normal, 200ms) var(--ease-out, ease-out);
  }
  @keyframes shortcut-help-in {
    from {
      opacity: 0;
      transform: scale(0.97);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .shortcut-help__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    border-color: var(--border-secondary);
  }
  .shortcut-help__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    letter-spacing: -0.005em;
  }
  .shortcut-help__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    width: 28px;
    height: 28px;
    font-size: 12px;
    color: var(--text-tertiary);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .shortcut-help__close:hover {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
    color: var(--text-primary);
  }
  .shortcut-help__close:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
    color: var(--text-primary);
  }
  .shortcut-help__body {
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .shortcut-help__group {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .shortcut-help__group:last-child {
    margin-bottom: 0;
  }
  .shortcut-help__group-label {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .shortcut-help__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .shortcut-help__description {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-secondary);
  }
  .shortcut-help__keys {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
  }
  .shortcut-help__sep {
    padding-inline: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .shortcut-help__empty {
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .shortcut-help.is-open .shortcut-help__dialog {
      animation: none;
    }
  }
}
@layer utilities {
  .blog-section {
    padding-block: calc(var(--spacing) * 16);
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 24);
    }
    background-color: var(--bg-primary);
  }
  .blog-section--carousel {
    overflow: hidden;
  }
  .blog-section__container {
    margin-inline: auto;
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    max-width: var(--blog-section-max-w, 80rem);
  }
  .blog-section--split .blog-section__container {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    column-gap: calc(var(--spacing) * 16);
    row-gap: calc(var(--spacing) * 12);
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .blog-section__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .blog-section--center .blog-section__header {
    margin-inline: auto;
    max-width: var(--container-3xl);
    text-align: center;
  }
  .blog-section--left .blog-section__header, .blog-section--carousel .blog-section__header {
    align-items: flex-start;
    justify-content: space-between;
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .blog-section--split .blog-section__header {
    width: 100%;
    max-width: 25rem;
  }
  .blog-section__header-copy {
    max-width: var(--container-3xl);
  }
  .blog-section__eyebrow {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
    color: var(--text-link);
  }
  .blog-section__title {
    margin-top: calc(var(--spacing) * 3);
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.625rem);
      letter-spacing: var(--tw-tracking, -0.02em);
    }
    color: var(--text-primary);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .blog-section__title:first-child {
    margin-top: 0;
  }
  .blog-section__lead {
    margin-top: calc(var(--spacing) * 4);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 5);
    }
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
    color: var(--text-tertiary);
    text-wrap: pretty;
  }
  .blog-section--split .blog-section__lead {
    @media (width >= 48rem) {
      font-size: 1.125rem;
      line-height: var(--tw-leading, 1.6875rem);
    }
  }
  .blog-section__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .blog-section--center .blog-section__actions {
    margin-top: calc(var(--spacing) * 12);
    justify-content: center;
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .blog-section__actions--inline {
    display: none;
    @media (width >= 64rem) {
      display: flex;
    }
    @media (width >= 64rem) {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .blog-section__actions--stacked {
    margin-top: calc(var(--spacing) * 12);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    @media (width >= 64rem) {
      display: none;
    }
  }
  .blog-section__actions--ruled {
    margin-top: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
    @media (width >= 48rem) {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 4);
    }
    border-color: var(--border-secondary);
  }
  .blog-section--split .blog-section__actions--inline {
    margin-top: calc(var(--spacing) * 8);
    display: none;
    @media (width >= 48rem) {
      display: flex;
    }
    @media (width >= 48rem) {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .blog-section--split .blog-section__actions--stacked {
    margin-top: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    @media (width >= 48rem) {
      display: none;
    }
  }
  .blog-section__grid {
    margin-top: calc(var(--spacing) * 12);
    display: grid;
    list-style-type: none;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 12);
    padding: 0;
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .blog-section__grid--3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .blog-section__grid--2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .blog-section--split .blog-section__grid {
    margin-top: 0;
    row-gap: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .blog-section--split .blog-section__grid--stacked {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .blog-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .blog-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.1);
  }
  .blog-card__media--flush {
    border-radius: 0;
  }
  .blog-card__img {
    display: block;
    aspect-ratio: 3/2;
    width: 100%;
    object-fit: cover;
    transition: transform var(--duration-fast, 100ms) linear;
  }
  .blog-card__media:hover .blog-card__img {
    transform: scale(1.05);
  }
  .blog-card__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
  }
  .blog-card__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .blog-card__category {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
  }
  .blog-card__meta-line {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
  }
  .blog-card__titles {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: var(--spacing);
  }
  .blog-card__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    justify-content: space-between;
    column-gap: calc(var(--spacing) * 4);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    border-radius: var(--radius-md);
  }
  .blog-card__title--lg {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    @media (width >= 80rem) {
      font-size: 1.125rem;
      line-height: var(--tw-leading, 1.6875rem);
    }
  }
  .blog-card__title-arrow {
    margin-top: calc(var(--spacing) * 0.5);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) linear;
  }
  .blog-card__title:hover .blog-card__title-arrow, .blog-card:hover .blog-card__title-arrow {
    color: var(--text-tertiary);
  }
  .blog-card__summary {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 2);
  }
  .blog-card__author {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
  }
  .blog-card__author-name {
    display: block;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    border-radius: var(--radius-xs);
  }
  .blog-card__author-date {
    display: block;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .blog-card__tags {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .blog-card__tag {
    display: inline-flex;
    border-radius: var(--radius-xl);
  }
  .blog-card--meta .blog-card__body {
    gap: calc(var(--spacing) * 6);
  }
  .blog-card--badge .blog-card__head {
    gap: calc(var(--spacing) * 3);
  }
  .blog-card__badge-group {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    padding-right: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 0.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    background-color: var(--bg-primary);
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .blog-card__badge-group .badge {
    color: var(--text-link);
    background-color: var(--text-link);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-link) 12%, transparent);
    }
    box-shadow: none;
  }
  .blog-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
    border-radius: var(--radius-xs);
    transition: color var(--duration-fast, 100ms) var(--ease-out, ease);
    cursor: pointer;
  }
  .blog-link:hover {
    color: var(--text-link-hover, var(--text-primary));
  }
  .blog-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .blog-link--lg {
    gap: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .blog-link i {
    pointer-events: none;
  }
  .blog-card--overlay .blog-card__media {
    border-radius: 0;
    box-shadow: none;
  }
  .blog-card__media-wrap {
    position: relative;
    overflow: hidden;
  }
  .blog-card__overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    overflow: hidden;
    background-image: linear-gradient(to bottom, transparent, oklch(0% 0 0 / 0.4));
  }
  .blog-card__overlay-bar {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: space-between;
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 5);
    }
    background-color: oklch(100% 0 0 / 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .blog-card__overlay-bar::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background-color: oklch(100% 0 0 / 0.3);
  }
  .blog-card__overlay-name, .blog-card__overlay-date, .blog-card__overlay-category {
    display: block;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #fff;
    border-radius: var(--radius-xs);
  }
  .blog-card__overlay-date {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .blog-card--overlay .blog-card__body {
    align-items: flex-start;
    gap: calc(var(--spacing) * 5);
  }
  .blog-card--horizontal {
    gap: calc(var(--spacing) * 4);
    @media (width >= 80rem) {
      flex-direction: row;
    }
    @media (width >= 80rem) {
      align-items: flex-start;
    }
  }
  .blog-card--horizontal-lg {
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .blog-card--horizontal .blog-card__media, .blog-card--horizontal-lg .blog-card__media {
    width: 100%;
    flex-shrink: 0;
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .blog-card--horizontal-lg .blog-card__media {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .blog-section__carousel {
    margin-top: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .blog-section__track {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 8);
    }
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-section__track::-webkit-scrollbar {
    display: none;
  }
  .blog-section__slide {
    width: 100%;
    max-width: var(--container-xs);
    flex-shrink: 0;
    flex-grow: 0;
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 96);
    }
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .blog-section__carousel-nav {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .blog-section__round-btn {
    display: inline-flex;
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), color var(--duration-fast, 100ms) var(--ease-out, ease);
    cursor: pointer;
  }
  .blog-section__round-btn:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .blog-section__round-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .blog-section__round-btn:disabled {
    cursor: not-allowed;
    opacity: 50%;
  }
  .blog-section__round-btn i {
    pointer-events: none;
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .blog-card a:focus-visible, .blog-section__eyebrow a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  @media (prefers-reduced-motion: reduce) {
    .blog-card__img, .blog-card__title-arrow, .blog-section__round-btn {
      transition: none;
    }
    .blog-card__media:hover .blog-card__img {
      transform: none;
    }
    .blog-section__track {
      scroll-behavior: auto;
    }
  }
  .blog-header__signup {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 10);
    }
    max-width: 28rem;
  }
  .blog-header__signup .form-control {
    flex: 1;
  }
  .blog-header__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: space-between;
    }
    border-bottom: 1px solid var(--border-secondary);
  }
  .blog-header__search {
    width: 100%;
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 64);
    }
  }
  .blog-header--sidebar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .blog-header--sidebar .blog-section__header {
    flex: 1;
  }
  .blog-header__sidebar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 64);
    }
    @media (width >= 48rem) {
      flex: none;
    }
  }
  .blog-header__cat {
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
  }
  .blog-header__cat.is-active {
    color: var(--text-link);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-brand-solid) 10%, transparent);
    }
  }
  .blog-header__cat:hover:not(.is-active) {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .blog-header__featured {
    width: 100%;
  }
}
@layer utilities {
  :root {
    --ease-ai: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-ai-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-ai-shimmer: 1800ms;
    --duration-ai-pulse: 2400ms;
    --duration-ai-gradient: 6s;
    --duration-ai-glow: 2800ms;
    --duration-ai-reveal: 360ms;
    --duration-ai-cursor: 1100ms;
    --duration-ai-thinking: 1400ms;
    --duration-ai-aurora: 8s;
    --duration-ai-voice: 1400ms;
    --duration-ai-orb-swirl: 9s;
  }
  .ai-surface {
    background-color: var(--bg-ai-surface);
    color: var(--text-ai-primary);
    border: 1px solid var(--border-ai-surface);
    border-radius: var(--radius-xl);
  }
  .ai-surface--subtle {
    background-color: var(--bg-ai-surface-subtle);
    border-color: var(--border-ai-subtle);
  }
  .ai-surface--active {
    background-color: var(--bg-ai-surface-active);
    border-color: var(--border-ai-panel);
  }
  .ai-ambient {
    position: relative;
    background-color: var(--bg-ai-surface);
    color: var(--text-ai-primary);
    border-radius: var(--radius-xl);
    isolation: isolate;
  }
  .ai-ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    padding: 1px;
    background: var(--gradient-ai-border);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .ai-ambient > * {
    position: relative;
    z-index: 2;
  }
  .ai-ambient.is-thinking::before {
    background-image: var(--gradient-ai-thinking);
    animation: ai-gradient-pan var(--duration-ai-gradient) linear infinite;
  }
  .ai-ambient.is-streaming::before {
    background-image: var(--gradient-ai-streaming);
    animation: ai-gradient-pan calc(var(--duration-ai-gradient) * 0.66) linear infinite;
  }
  .ai-ambient.is-generating::before {
    background-image: var(--gradient-ai-generated);
    animation: ai-gradient-pan calc(var(--duration-ai-gradient) * 0.8) linear infinite;
  }
  .ai-ambient.is-thinking {
    box-shadow: var(--shadow-ai-thinking);
  }
  .ai-ambient.is-streaming {
    box-shadow: var(--shadow-ai-active);
  }
  .ai-ambient.is-generating {
    box-shadow: var(--shadow-ai-generated);
  }
  .ai-glow {
    position: relative;
  }
  .ai-glow::after {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    border-radius: inherit;
    background: var(--gradient-ai-glow);
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
    transition: opacity var(--transition-panel);
  }
  .ai-glow.is-active::after, .ai-glow.is-thinking::after {
    opacity: 1;
    animation: ai-glow-breathe var(--duration-ai-glow) ease-in-out infinite;
  }
  .ai-aura {
    position: relative;
    isolation: isolate;
  }
  .ai-aura::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--gradient-ai-aurora);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.85;
    animation: ai-aurora-pan var(--duration-ai-aurora) linear infinite;
    pointer-events: none;
  }
  .ai-aura--soft::after {
    padding: 1px;
    opacity: 0.6;
  }
  .ai-aura--strong::after {
    padding: 2px;
    opacity: 1;
  }
  .ai-anim-shimmer {
    background-image: var(--gradient-ai-skeleton);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: ai-shimmer var(--duration-ai-shimmer) linear infinite;
  }
  .ai-anim-pulse {
    animation: ai-pulse var(--duration-ai-pulse) ease-in-out infinite;
  }
  .ai-anim-glow {
    animation: ai-glow-pulse var(--duration-ai-glow) ease-in-out infinite;
  }
  .ai-anim-gradient {
    background-image: var(--gradient-ai-thinking);
    background-size: 200% 200%;
    animation: ai-gradient-pan var(--duration-ai-gradient) linear infinite;
  }
  .ai-anim-reveal {
    animation: ai-reveal var(--duration-ai-reveal) var(--ease-ai-spring) both;
  }
  .ai-cursor {
    display: inline-block;
    width: 0.5rem;
    height: 1.05em;
    vertical-align: text-bottom;
    background-color: currentColor;
    animation: ai-cursor-blink var(--duration-ai-cursor) steps(1, end) infinite;
  }
  .ai-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 9999px;
    background-color: var(--bg-ai-surface-subtle);
    color: var(--text-ai-secondary);
    border: 1px solid var(--border-ai-subtle);
    white-space: nowrap;
  }
  .ai-status__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: currentColor;
    flex: none;
  }
  .ai-status__label {
    color: var(--text-ai-primary);
  }
  .ai-status i {
    font-size: 0.8rem;
  }
  .ai-status--idle {
    color: var(--text-ai-muted);
  }
  .ai-status--listening {
    color: var(--text-ai-streaming);
  }
  .ai-status--complete {
    color: var(--text-ai-success);
    background-color: var(--bg-ai-success-subtle);
    border-color: var(--border-ai-success);
  }
  .ai-status--cancelled {
    color: var(--text-ai-muted);
  }
  .ai-status--thinking, .ai-status--reasoning, .ai-status--planning {
    color: var(--text-ai-thinking);
    background-color: var(--bg-ai-thinking);
    border-color: var(--border-ai-thinking);
  }
  .ai-status--using-tool {
    color: var(--text-ai-accent);
    background-color: var(--bg-ai-tool);
    border-color: var(--border-ai-tool);
  }
  .ai-status--generating {
    color: var(--text-ai-accent);
    background-color: var(--bg-ai-generated);
    border-color: var(--border-ai-generated);
  }
  .ai-status--streaming {
    color: var(--text-ai-streaming);
    background-color: var(--bg-ai-streaming);
    border-color: var(--border-ai-streaming);
  }
  .ai-status--waiting {
    color: var(--text-ai-streaming);
    background-color: var(--bg-ai-streaming);
    border-color: var(--border-ai-streaming);
  }
  .ai-status--approval {
    color: var(--text-ai-warning);
    background-color: var(--bg-ai-approval);
    border-color: var(--border-ai-approval);
  }
  .ai-status--interrupted {
    color: var(--text-ai-warning);
    background-color: var(--bg-ai-warning-subtle);
    border-color: var(--border-ai-warning);
  }
  .ai-status--failed {
    color: var(--text-ai-error);
    background-color: var(--bg-ai-error-subtle);
    border-color: var(--border-ai-error);
  }
  .ai-status--listening .ai-status__dot, .ai-status--thinking .ai-status__dot, .ai-status--reasoning .ai-status__dot, .ai-status--planning .ai-status__dot, .ai-status--using-tool .ai-status__dot, .ai-status--generating .ai-status__dot, .ai-status--streaming .ai-status__dot, .ai-status--waiting .ai-status__dot {
    animation: ai-pulse var(--duration-ai-pulse) ease-in-out infinite;
  }
  .ai-thinking {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-ai-thinking);
    font-size: 0.8125rem;
  }
  .ai-thinking__dots {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
  }
  .ai-thinking__dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: currentColor;
    animation: ai-thinking-bounce var(--duration-ai-thinking) ease-in-out infinite;
  }
  .ai-thinking__dot:nth-child(2) {
    animation-delay: 160ms;
  }
  .ai-thinking__dot:nth-child(3) {
    animation-delay: 320ms;
  }
  .ai-thinking__label {
    color: var(--text-ai-secondary);
  }
  .ai-thinking--bars .ai-thinking__dots {
    align-items: flex-end;
    gap: 0.14rem;
    height: 0.85rem;
  }
  .ai-thinking--bars .ai-thinking__dot {
    width: 0.2rem;
    height: 100%;
    border-radius: 2px;
    transform-origin: bottom;
    animation: ai-bars var(--duration-ai-thinking) ease-in-out infinite;
  }
  .ai-thinking--wave .ai-thinking__dot {
    animation-name: ai-wave;
  }
  .ai-status--sm {
    padding: 0.12rem 0.45rem 0.12rem 0.4rem;
    font-size: 0.6875rem;
  }
  .ai-status--sm .ai-status__dot {
    width: 0.4rem;
    height: 0.4rem;
  }
  .ai-status--solid {
    color: var(--text-ai-on-accent);
    background: var(--gradient-ai-accent);
    border-color: transparent;
  }
  .ai-status--solid .ai-status__label {
    color: var(--text-ai-on-accent);
  }
  .ai-status--dot-only {
    padding: 0;
    border: 0;
    background: transparent;
    gap: 0;
  }
  .ai-status--dot-only .ai-status__dot {
    width: 0.6rem;
    height: 0.6rem;
  }
  .ai-status--dot-only .ai-status__label, .ai-status--dot-only > i {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  @keyframes ai-gradient-pan {
    to {
      background-position: 200% 50%;
    }
  }
  @keyframes ai-shimmer {
    from {
      background-position: -100% 0;
    }
    to {
      background-position: 200% 0;
    }
  }
  @keyframes ai-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.45;
    }
  }
  @keyframes ai-thinking-bounce {
    0%, 80%, 100% {
      transform: translateY(0);
      opacity: 0.4;
    }
    40% {
      transform: translateY(-3px);
      opacity: 1;
    }
  }
  @keyframes ai-reveal {
    from {
      opacity: 0;
      transform: translateY(4px) scale(0.99);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes ai-cursor-blink {
    0%, 49% {
      opacity: 1;
    }
    50%, 100% {
      opacity: 0;
    }
  }
  @keyframes ai-glow-breathe {
    0%, 100% {
      opacity: 0.55;
    }
    50% {
      opacity: 1;
    }
  }
  @keyframes ai-glow-pulse {
    0%, 100% {
      box-shadow: 0 0 0 1px var(--glow-ai-thinking), 0 0 8px -4px var(--glow-ai-thinking);
    }
    50% {
      box-shadow: 0 0 0 1px var(--glow-ai-thinking), 0 0 28px -2px var(--glow-ai-thinking);
    }
  }
  @keyframes ai-bars {
    0%, 100% {
      transform: scaleY(0.35);
    }
    50% {
      transform: scaleY(1);
    }
  }
  @keyframes ai-wave {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-4px);
    }
  }
  @keyframes ai-aurora-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes ai-aurora-pan {
    to {
      background-position: 200% 50%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ai-ambient::before, .ai-glow::after, .ai-anim-shimmer, .ai-anim-pulse, .ai-anim-glow, .ai-anim-gradient, .ai-anim-reveal, .ai-aura::after, .ai-status__dot, .ai-thinking__dot {
      animation: none !important;
    }
    .ai-glow.is-active::after, .ai-glow.is-thinking::after {
      opacity: 0.85;
    }
    .ai-cursor {
      animation: none !important;
      opacity: 1;
    }
  }
}
@layer utilities {
  .ai-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 9999px;
    background: var(--gradient-ai-accent);
    color: var(--text-ai-on-accent);
    font-size: 0.875rem;
  }
  .ai-avatar--sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6875rem;
  }
  .ai-avatar--lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
  }
  .ai-avatar.is-thinking {
    animation: ai-glow-pulse var(--duration-ai-glow) ease-in-out infinite;
  }
  .ai-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-ai-panel);
    border: 1px solid var(--border-ai-panel);
    border-radius: var(--rounded-card, 12px);
    box-shadow: var(--shadow-ai-panel);
    overflow: hidden;
  }
  .ai-panel__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border-ai-subtle);
    background-color: var(--bg-ai-surface-subtle);
  }
  .ai-panel__title {
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-panel__subtitle {
    color: var(--text-ai-muted);
    font-size: 0.75rem;
  }
  .ai-panel__body {
    padding: 0.875rem;
    color: var(--text-ai-secondary);
    overflow-y: auto;
  }
  .ai-panel__footer {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border-ai-subtle);
    background-color: var(--bg-ai-surface-subtle);
  }
  .ai-panel--sm .ai-panel__body {
    padding: 0.625rem;
  }
  .ai-panel--lg .ai-panel__body {
    padding: 1.25rem;
  }
  .ai-dock {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-ai-dock);
    box-shadow: var(--shadow-ai-dock);
    border: 1px solid var(--border-ai-panel);
  }
  .ai-dock--right {
    width: 360px;
    max-width: 100%;
    border-radius: var(--rounded-card, 12px) 0 0 var(--rounded-card, 12px);
    border-right: 0;
  }
  .ai-dock--bottom {
    width: 100%;
    border-radius: var(--rounded-card, 12px) var(--rounded-card, 12px) 0 0;
    border-bottom: 0;
  }
  .ai-dock__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--border-ai-subtle);
  }
  .ai-dock__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.875rem;
  }
  .ai-dock__composer {
    border-top: 1px solid var(--border-ai-subtle);
    padding: 0.75rem;
  }
  .ai-assistant-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--bg-ai-surface-subtle);
    border: 1px solid var(--border-ai-subtle);
    border-radius: var(--rounded-card, 12px);
  }
  .ai-assistant-card__body {
    min-width: 0;
  }
  .ai-assistant-card__name {
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-assistant-card__meta {
    font-size: 0.75rem;
    color: var(--text-ai-muted);
  }
  .ai-agent-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    background-color: var(--bg-ai-surface);
    border: 1px solid var(--border-ai-surface);
    border-radius: var(--rounded-card, 12px);
    transition: box-shadow var(--transition-panel), border-color var(--transition-panel);
  }
  .ai-agent-card.is-active {
    border-color: var(--border-ai-thinking);
    box-shadow: var(--shadow-ai-thinking);
  }
  .ai-agent-card__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .ai-agent-card__name {
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-agent-card__role {
    font-size: 0.75rem;
    color: var(--text-ai-muted);
  }
  .ai-agent-card__body {
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .ai-agent-card__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .ai-agent-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-ai-subtle);
  }
  .ai-message {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
  }
  .ai-message__bubble {
    position: relative;
    padding: 0.625rem 0.75rem;
    border-radius: 0 0.75rem 0.75rem 0.75rem;
    background-color: var(--bg-ai-message);
    color: var(--text-ai-primary);
    border: 1px solid var(--border-ai-subtle);
    max-width: 46ch;
  }
  .ai-message__content {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .ai-message__meta {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
  }
  .ai-message--user {
    flex-direction: row-reverse;
  }
  .ai-message--user .ai-message__bubble {
    background-color: var(--bg-ai-message-user);
    border-radius: 0.75rem 0 0.75rem 0.75rem;
  }
  .ai-message--user .ai-avatar {
    background: none;
    background-color: var(--bg-ai-surface-active);
    color: var(--text-ai-secondary);
  }
  .ai-message.is-streaming .ai-message__bubble {
    border-color: var(--border-ai-streaming);
  }
  .ai-message.is-streaming .ai-message__content::after {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background-color: var(--text-ai-streaming);
    animation: ai-cursor-blink var(--duration-ai-cursor) steps(1, end) infinite;
  }
  .ai-response {
    border: 1px solid var(--border-ai-subtle);
    border-radius: var(--rounded-card, 12px);
    background-color: var(--bg-ai-surface);
    overflow: hidden;
  }
  .ai-response__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-ai-subtle);
    background-color: var(--bg-ai-surface-subtle);
    font-size: 0.75rem;
    color: var(--text-ai-muted);
  }
  .ai-response__body {
    padding: 0.875rem;
    color: var(--text-ai-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
  }
  .ai-response__body > * + * {
    margin-top: 0.6rem;
  }
  .ai-response__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-ai-subtle);
  }
  .ai-context {
    border: 1px solid var(--border-ai-context);
    border-radius: var(--rounded-card, 12px);
    background-color: var(--bg-ai-context);
    overflow: hidden;
  }
  .ai-context__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-ai-subtle);
  }
  .ai-context__title {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-ai-primary);
  }
  .ai-context__body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .ai-context__item {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .ai-context__item i {
    color: var(--text-ai-citation);
    margin-top: 0.15rem;
  }
  .ai-context__footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-ai-subtle);
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
  }
  .ai-memory {
    display: flex;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background-color: var(--bg-ai-memory);
    border: 1px solid var(--border-ai-subtle);
    border-left: 3px solid var(--text-ai-accent);
    border-radius: 0 var(--rounded-card, 10px) var(--rounded-card, 10px) 0;
  }
  .ai-memory__icon {
    color: var(--text-ai-accent);
    margin-top: 0.1rem;
  }
  .ai-memory__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-ai-muted);
  }
  .ai-memory__value {
    font-size: 0.8125rem;
    color: var(--text-ai-primary);
  }
  .ai-memory__meta {
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
    margin-top: 0.15rem;
  }
  .ai-tool {
    border: 1px solid var(--border-ai-tool);
    border-radius: var(--rounded-card, 10px);
    background-color: var(--bg-ai-tool);
    overflow: hidden;
    animation: ai-reveal var(--duration-ai-reveal) var(--ease-ai-spring) both;
  }
  .ai-tool__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
  }
  .ai-tool__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem;
    background-color: var(--bg-ai-surface-active);
    color: var(--text-ai-accent);
    flex: none;
  }
  .ai-tool__name {
    font-weight: 600;
    color: var(--text-ai-primary);
    font-family: var(--font-mono, ui-monospace, monospace);
  }
  .ai-tool__status {
    margin-left: auto;
    font-size: 0.6875rem;
  }
  .ai-tool__args {
    margin: 0 0.625rem 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.4rem;
    background-color: var(--bg-ai-console);
    color: var(--text-ai-console);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    overflow-x: auto;
    white-space: pre;
  }
  .ai-tool__body {
    padding: 0 0.625rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .ai-tool.is-running {
    border-color: var(--border-ai-thinking);
  }
  .ai-tool.is-running .ai-tool__status {
    color: var(--text-ai-thinking);
  }
  .ai-tool.is-complete .ai-tool__status {
    color: var(--text-ai-success);
  }
  .ai-tool.is-failed {
    border-color: var(--border-ai-error);
    background-color: var(--bg-ai-error-subtle);
  }
  .ai-tool.is-failed .ai-tool__status {
    color: var(--text-ai-error);
  }
  .ai-tool--result {
    border-color: var(--border-ai-success);
    background-color: var(--bg-ai-tool-result);
  }
  .ai-tool--result .ai-tool__icon {
    background-color: var(--bg-ai-surface-active);
    color: var(--text-ai-success);
  }
  .ai-reasoning {
    display: flex;
    flex-direction: column;
  }
  .ai-reasoning__step {
    position: relative;
    display: flex;
    gap: 0.625rem;
    padding-bottom: 0.75rem;
  }
  .ai-reasoning__step:last-child {
    padding-bottom: 0;
  }
  .ai-reasoning__marker {
    position: relative;
    flex: none;
    width: 0.75rem;
    display: flex;
    justify-content: center;
  }
  .ai-reasoning__marker::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.3rem;
    border-radius: 9999px;
    background-color: var(--text-ai-accent);
    z-index: 1;
  }
  .ai-reasoning__step:not(:last-child) .ai-reasoning__marker::after {
    content: "";
    position: absolute;
    top: 0.7rem;
    bottom: -0.75rem;
    width: 1px;
    background-color: var(--border-ai-panel);
  }
  .ai-reasoning__body {
    min-width: 0;
  }
  .ai-reasoning__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-reasoning__detail {
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .ai-run {
    display: flex;
    flex-direction: column;
  }
  .ai-run__step {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 0.875rem;
  }
  .ai-run__step:last-child {
    padding-bottom: 0;
  }
  .ai-run__marker {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: var(--bg-ai-surface);
    border: 1px solid var(--border-ai-panel);
    color: var(--text-ai-muted);
    font-size: 0.75rem;
    z-index: 1;
  }
  .ai-run__step:not(:last-child) .ai-run__marker::after {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: -0.875rem;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background-color: var(--border-ai-panel);
  }
  .ai-run__body {
    min-width: 0;
    padding-top: 0.15rem;
  }
  .ai-run__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-run__meta {
    font-size: 0.75rem;
    color: var(--text-ai-muted);
  }
  .ai-run__step.is-complete .ai-run__marker {
    background-color: var(--bg-ai-success-subtle);
    border-color: var(--border-ai-success);
    color: var(--text-ai-success);
  }
  .ai-run__step.is-active .ai-run__marker {
    background-color: var(--bg-ai-thinking);
    border-color: var(--border-ai-thinking);
    color: var(--text-ai-thinking);
    animation: ai-glow-pulse var(--duration-ai-glow) ease-in-out infinite;
  }
  .ai-run__step.is-failed .ai-run__marker {
    background-color: var(--bg-ai-error-subtle);
    border-color: var(--border-ai-error);
    color: var(--text-ai-error);
  }
  .ai-run__step.is-pending .ai-run__marker {
    opacity: 0.65;
  }
  .ai-approval {
    border: 1px solid var(--border-ai-approval);
    border-radius: var(--rounded-card, 12px);
    background-color: var(--bg-ai-approval);
    box-shadow: var(--shadow-ai-approval);
    overflow: hidden;
  }
  .ai-approval__header {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
  }
  .ai-approval__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 9999px;
    background-color: var(--bg-ai-surface-active);
    color: var(--text-ai-warning);
  }
  .ai-approval__title {
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-approval__detail {
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .ai-approval__preview {
    margin: 0 0.875rem 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--bg-ai-surface);
    border: 1px solid var(--border-ai-subtle);
    font-size: 0.8125rem;
    color: var(--text-ai-primary);
  }
  .ai-approval__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border-ai-subtle);
    background-color: var(--bg-ai-surface);
  }
  .ai-approval--confirm {
    border-color: var(--border-ai-streaming);
    background-color: var(--bg-ai-streaming);
    box-shadow: none;
  }
  .ai-approval--confirm .ai-approval__icon {
    background-color: var(--bg-ai-surface-active);
    color: var(--text-ai-streaming);
  }
  .ai-interrupt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px dashed var(--border-ai-warning);
    border-radius: var(--rounded-card, 12px);
    background-color: var(--bg-ai-warning-subtle);
  }
  .ai-interrupt__icon {
    color: var(--text-ai-warning);
    font-size: 1.1rem;
    flex: none;
  }
  .ai-interrupt__body {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .ai-interrupt__actions {
    display: flex;
    gap: 0.5rem;
    flex: none;
  }
  .ai-error {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--border-ai-error);
    border-radius: var(--rounded-card, 12px);
    background-color: var(--bg-ai-error-subtle);
  }
  .ai-error__icon {
    color: var(--text-ai-error);
    font-size: 1.1rem;
    flex: none;
    margin-top: 0.1rem;
  }
  .ai-error__title {
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-error__detail {
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .ai-error__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
  }
  .ai-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--text-ai-muted);
  }
  .ai-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--gradient-ai-glow);
    color: var(--text-ai-accent);
    font-size: 1.25rem;
  }
  .ai-empty__title {
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-empty__body {
    font-size: 0.8125rem;
    max-width: 32ch;
  }
  .ai-empty__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .ai-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .ai-skeleton__line {
    height: 0.7rem;
    border-radius: 9999px;
    background-color: var(--bg-ai-skeleton);
    background-image: var(--gradient-ai-skeleton);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: ai-shimmer var(--duration-ai-shimmer) linear infinite;
  }
  .ai-skeleton__line--title {
    height: 1rem;
    width: 45%;
  }
  .ai-skeleton__line--short {
    width: 65%;
  }
  .ai-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 140px;
    padding: 1.5rem;
    text-align: center;
    border-radius: var(--rounded-card, 12px);
    background-color: var(--bg-ai-canvas);
    color: var(--text-ai-muted);
    position: relative;
  }
  .ai-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--gradient-ai-generated);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ai-gradient-pan var(--duration-ai-gradient) linear infinite;
    pointer-events: none;
  }
  .ai-canvas__icon {
    color: var(--text-ai-accent);
    font-size: 1.5rem;
  }
  .ai-canvas__label {
    font-weight: 600;
    color: var(--text-ai-primary);
    font-size: 0.875rem;
  }
  .ai-canvas__hint {
    font-size: 0.75rem;
  }
  .ai-prompt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem;
    background-color: var(--bg-ai-input);
    border: 0;
    border-radius: var(--rounded-card, 12px);
    box-shadow: inset 0 0 0 1px var(--border-ai-input), var(--shadow-xs);
    transition: background-color var(--transition-panel), box-shadow var(--transition-panel);
  }
  .ai-prompt:hover {
    box-shadow: inset 0 0 0 1px var(--border-ai-input-hover), var(--shadow-xs);
  }
  .ai-prompt:focus-within, .ai-prompt.is-focused {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .ai-prompt__field {
    width: 100%;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--text-ai-primary);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    max-height: 9rem;
    overflow-y: auto;
  }
  .ai-prompt__field:focus {
    outline: none;
    border: 0;
    box-shadow: none;
  }
  .ai-prompt__field::placeholder {
    color: var(--text-ai-placeholder);
  }
  .ai-prompt__toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .ai-prompt__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
  }
  .ai-prompt__hint {
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
  }
  .ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .ai-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-ai-accent);
    background-color: var(--bg-ai-chip);
    border: 1px solid var(--border-ai-subtle);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color var(--transition-panel), border-color var(--transition-panel);
  }
  .ai-suggestion:hover {
    background-color: var(--bg-ai-chip-hover);
    border-color: var(--border-ai-panel);
  }
  .ai-suggestion i {
    font-size: 0.7rem;
    opacity: 0.8;
  }
  .ai-suggestion:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .ai-actionbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .ai-actionbar__spacer {
    flex: 1;
  }
  .ai-actionbar__hint {
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
  }
  .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 9999px;
    color: var(--text-ai-accent);
    background-color: var(--bg-ai-badge);
    border: 1px solid var(--border-ai-subtle);
    white-space: nowrap;
  }
  .ai-badge i {
    font-size: 0.65rem;
  }
  .ai-badge--generated {
    color: var(--text-ai-accent-strong);
  }
  .ai-badge--solid {
    color: var(--text-ai-on-accent);
    background: var(--gradient-ai-accent);
    border-color: transparent;
  }
  .ai-badge--thinking {
    background-image: var(--gradient-ai-thinking);
    background-size: 200% 200%;
    color: var(--text-ai-on-accent);
    border-color: transparent;
    animation: ai-gradient-pan var(--duration-ai-gradient) linear infinite;
  }
  .ai-badge--beta {
    color: var(--text-ai-warning);
    background-color: var(--bg-ai-warning-subtle);
  }
  .ai-confidence {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-ai-muted);
  }
  .ai-confidence__bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 0.8rem;
  }
  .ai-confidence__bar {
    width: 3px;
    border-radius: 1px;
    background-color: var(--text-ai-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-ai-muted) 35%, transparent);
    }
  }
  .ai-confidence__bar:nth-child(1) {
    height: 40%;
  }
  .ai-confidence__bar:nth-child(2) {
    height: 70%;
  }
  .ai-confidence__bar:nth-child(3) {
    height: 100%;
  }
  .ai-confidence--high {
    color: var(--text-ai-confidence-high);
  }
  .ai-confidence--high .ai-confidence__bar {
    background-color: var(--text-ai-confidence-high);
  }
  .ai-confidence--med {
    color: var(--text-ai-confidence-med);
  }
  .ai-confidence--med .ai-confidence__bar:nth-child(-n+2) {
    background-color: var(--text-ai-confidence-med);
  }
  .ai-confidence--low {
    color: var(--text-ai-confidence-low);
  }
  .ai-confidence--low .ai-confidence__bar:nth-child(1) {
    background-color: var(--text-ai-confidence-low);
  }
  .ai-citation {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-ai-citation);
    background-color: var(--bg-ai-surface-subtle);
    border: 1px solid var(--border-ai-context);
    border-radius: 0.4rem;
    text-decoration: none;
  }
  .ai-citation:hover {
    background-color: var(--bg-ai-surface-active);
  }
  .ai-citation__ref {
    font-weight: 600;
  }
  .ai-citation__source {
    color: var(--text-ai-secondary);
  }
  .ai-citation:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .ai-command {
    border-top: 1px solid var(--border-ai-subtle);
    background-color: var(--bg-ai-surface-subtle);
    padding: 0.625rem;
  }
  .ai-command__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-ai-accent);
    margin-bottom: 0.4rem;
  }
  .ai-command__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    color: var(--text-ai-primary);
    cursor: pointer;
  }
  .ai-command__row:hover, .ai-command__row.is-active {
    background-color: var(--bg-ai-surface-active);
  }
  .ai-command__row i {
    color: var(--text-ai-accent);
  }
  .ai-command__row kbd {
    margin-left: auto;
  }
  .ai-tool__duration {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
    font-variant-numeric: tabular-nums;
  }
  .ai-tool__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--text-ai-muted);
    cursor: pointer;
  }
  .ai-tool__toggle::before {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 0.6rem;
    transition: transform var(--transition-panel);
  }
  .ai-tool.is-collapsed .ai-tool__toggle::before {
    transform: rotate(-90deg);
  }
  .ai-tool.is-collapsed .ai-tool__args, .ai-tool.is-collapsed .ai-tool__body, .ai-tool.is-collapsed .ai-tool__subtools, .ai-tool.is-collapsed .ai-tool__metrics {
    display: none;
  }
  .ai-tool--compact .ai-tool__header {
    padding: 0.4rem 0.55rem;
  }
  .ai-tool__subtools {
    margin: 0 0.625rem 0.625rem 1.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border-ai-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .ai-tool__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0 0.625rem 0.5rem;
  }
  .ai-tool__metric {
    font-size: 0.6875rem;
    padding: 0.1rem 0.45rem;
    border-radius: 0.3rem;
    background-color: var(--bg-ai-surface-active);
    color: var(--text-ai-secondary);
  }
  .ai-tool__metric strong {
    color: var(--text-ai-primary);
  }
  .ai-message--compact {
    gap: 0.4rem;
  }
  .ai-message--compact .ai-message__bubble {
    padding: 0.4rem 0.6rem;
  }
  .ai-message__actions {
    display: flex;
    gap: 0.15rem;
    margin-top: 0.25rem;
    opacity: 0;
    transition: opacity var(--transition-panel);
  }
  .ai-message:hover .ai-message__actions, .ai-message:focus-within .ai-message__actions {
    opacity: 1;
  }
  .ai-message__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.35rem;
    border: 0;
    background: transparent;
    color: var(--text-ai-muted);
    cursor: pointer;
    font-size: 0.7rem;
  }
  .ai-message__action:hover {
    background-color: var(--bg-ai-surface-active);
    color: var(--text-ai-accent);
  }
  .ai-message__action:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .ai-run__elapsed {
    margin-left: 0.4rem;
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
    font-variant-numeric: tabular-nums;
  }
  .ai-run--compact .ai-run__step {
    padding-bottom: 0.55rem;
    gap: 0.5rem;
  }
  .ai-run--compact .ai-run__marker {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.625rem;
  }
  .ai-run--compact .ai-run__step:not(:last-child) .ai-run__marker::after {
    top: 1.25rem;
    bottom: -0.55rem;
  }
  .ai-run--horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
  .ai-run--horizontal .ai-run__step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.4rem;
  }
  .ai-run--horizontal .ai-run__marker {
    margin-bottom: 0.45rem;
  }
  .ai-run--horizontal .ai-run__body {
    padding-top: 0;
  }
  .ai-run--horizontal .ai-run__step:not(:last-child) .ai-run__marker::after {
    top: 0.875rem;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 1px;
    transform: translateX(0);
  }
  .ai-prompt__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .ai-prompt__counter {
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
    font-variant-numeric: tabular-nums;
  }
  .ai-prompt__counter.is-over {
    color: var(--text-ai-error);
  }
  .ai-prompt__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .ai-attach {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    background-color: var(--bg-ai-surface-active);
    border: 1px solid var(--border-ai-subtle);
    font-size: 0.6875rem;
    color: var(--text-ai-secondary);
  }
  .ai-attach i {
    color: var(--text-ai-accent);
  }
  .ai-attach__remove {
    border: 0;
    background: transparent;
    color: var(--text-ai-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }
  .ai-attach__remove:hover {
    color: var(--text-ai-error);
  }
  .ai-prompt__mode {
    display: inline-flex;
    border: 1px solid var(--border-ai-subtle);
    border-radius: 9999px;
    padding: 2px;
  }
  .ai-prompt__mode-btn {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 9999px;
    color: var(--text-ai-muted);
    cursor: pointer;
  }
  .ai-prompt__mode-btn.is-active {
    background-color: var(--bg-ai-surface-active);
    color: var(--text-ai-accent);
  }
  .ai-prompt--minimal {
    border-radius: 9999px;
    padding: 0.25rem 0.35rem 0.25rem 0.85rem;
    flex-direction: row;
    align-items: center;
  }
  .ai-prompt--minimal .ai-prompt__toolbar {
    margin-left: auto;
  }
  .ai-prompt.is-loading {
    opacity: 0.85;
  }
  .ai-prompt.is-loading .ai-prompt__field {
    color: var(--text-ai-muted);
  }
  .ai-model-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    border: 1px solid var(--border-ai-subtle);
    background-color: var(--bg-ai-surface-subtle);
    font-size: 0.6875rem;
    color: var(--text-ai-secondary);
    cursor: pointer;
  }
  .ai-model-pill i {
    color: var(--text-ai-accent);
  }
  .ai-model-pill__name {
    font-weight: 600;
    color: var(--text-ai-primary);
    font-family: var(--font-mono, ui-monospace, monospace);
  }
  .ai-model-pill:hover {
    background-color: var(--bg-ai-surface-active);
  }
  .ai-model-pill:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .ai-suggestion--sm {
    padding: 0.2rem 0.55rem;
    font-size: 0.6875rem;
  }
  .ai-suggestion--ghost {
    background-color: transparent;
  }
  .ai-suggestion--ghost:hover {
    background-color: var(--bg-ai-chip);
  }
  .ai-badge--sm {
    padding: 0.05rem 0.35rem;
    font-size: 0.625rem;
  }
  .ai-badge--model {
    font-family: var(--font-mono, ui-monospace, monospace);
    text-transform: none;
    letter-spacing: 0;
  }
  .ai-badge__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background-color: currentColor;
    flex: none;
  }
  .ai-badge--live .ai-badge__dot {
    animation: ai-pulse var(--duration-ai-pulse) ease-in-out infinite;
  }
  .ai-confidence__value {
    font-variant-numeric: tabular-nums;
  }
  .ai-confidence--inline {
    font-size: 0.6875rem;
    gap: 0.3rem;
  }
  .ai-confidence--ring {
    gap: 0.4rem;
  }
  .ai-confidence__ring {
    --ai-pct: 70;
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    border-radius: 9999px;
    background: conic-gradient(currentColor calc(var(--ai-pct) * 1%), var(--bg-ai-confidence-track) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent 55%, #000 57%);
    mask: radial-gradient(farthest-side, transparent 55%, #000 57%);
  }
  .ai-citation--inline {
    padding: 0;
    background: transparent;
    border: 0;
    gap: 0;
    vertical-align: super;
    font-size: 0.625rem;
    font-weight: 700;
  }
  .ai-citation--inline:hover {
    background: transparent;
    text-decoration: underline;
  }
  .ai-sources {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .ai-source {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-ai-subtle);
    border-radius: 0.5rem;
    background-color: var(--bg-ai-surface);
    text-decoration: none;
    color: var(--text-ai-primary);
    transition: background-color var(--transition-panel);
  }
  .ai-source:hover {
    background-color: var(--bg-ai-surface-subtle);
  }
  .ai-source:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .ai-source__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    border-radius: 9999px;
    background-color: var(--bg-ai-badge);
    color: var(--text-ai-accent);
    font-size: 0.625rem;
    font-weight: 700;
  }
  .ai-source__title {
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .ai-source__meta {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
  }
  .ai-diff {
    border: 1px solid var(--border-ai-subtle);
    border-radius: var(--rounded-card, 10px);
    overflow: hidden;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
  }
  .ai-diff__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.625rem;
    background-color: var(--bg-ai-surface-subtle);
    border-bottom: 1px solid var(--border-ai-subtle);
    color: var(--text-ai-secondary);
  }
  .ai-diff__file {
    font-weight: 600;
    color: var(--text-ai-primary);
  }
  .ai-diff__stat {
    margin-left: auto;
    display: inline-flex;
    gap: 0.5rem;
  }
  .ai-diff__stat-add {
    color: var(--text-ai-diff-add);
  }
  .ai-diff__stat-del {
    color: var(--text-ai-diff-del);
  }
  .ai-diff__line {
    display: flex;
    padding: 0 0.5rem;
    border-left: 3px solid transparent;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .ai-diff__gutter {
    flex: none;
    width: 2.25rem;
    padding-right: 0.6rem;
    text-align: right;
    color: var(--text-ai-diff-gutter);
    user-select: none;
  }
  .ai-diff__code {
    flex: 1;
    min-width: 0;
    color: var(--text-ai-primary);
  }
  .ai-diff__line--add {
    background-color: var(--bg-ai-diff-add);
    border-left-color: var(--border-ai-diff-add);
  }
  .ai-diff__line--add .ai-diff__code {
    color: var(--text-ai-diff-add);
  }
  .ai-diff__line--add .ai-diff__code::before {
    content: "+ ";
  }
  .ai-diff__line--del {
    background-color: var(--bg-ai-diff-del);
    border-left-color: var(--border-ai-diff-del);
  }
  .ai-diff__line--del .ai-diff__code {
    color: var(--text-ai-diff-del);
  }
  .ai-diff__line--del .ai-diff__code::before {
    content: "- ";
  }
  .ai-diff__line--ctx .ai-diff__code::before {
    content: "\00a0\00a0";
  }
  .ai-diff__line--hunk {
    background-color: var(--bg-ai-diff-hunk);
  }
  .ai-diff__line--hunk .ai-diff__code {
    color: var(--text-ai-diff-hunk);
  }
  .ai-diff__word--add {
    background-color: var(--bg-ai-diff-add-word);
    border-radius: 2px;
  }
  .ai-diff__word--del {
    background-color: var(--bg-ai-diff-del-word);
    border-radius: 2px;
    text-decoration: line-through;
  }
  .ai-diff--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
  }
  .ai-diff__was {
    color: var(--text-ai-diff-del);
    text-decoration: line-through;
  }
  .ai-diff__arrow {
    color: var(--text-ai-muted);
  }
  .ai-diff__now {
    color: var(--text-ai-diff-add);
    font-weight: 600;
  }
  .ai-progress {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .ai-progress__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-ai-secondary);
  }
  .ai-progress__value {
    color: var(--text-ai-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .ai-progress__track {
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--bg-ai-progress-track);
    overflow: hidden;
  }
  .ai-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-ai-progress);
    background-size: 200% 100%;
    transition: width var(--transition-panel);
  }
  .ai-progress--shimmer .ai-progress__bar {
    animation: ai-shimmer var(--duration-ai-shimmer) linear infinite;
  }
  .ai-progress.is-indeterminate .ai-progress__bar {
    width: 40% !important;
    animation: ai-progress-indeterminate 1.4s ease-in-out infinite;
  }
  .ai-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    background-color: var(--bg-ai-inline);
    border: 1px solid var(--border-ai-inline);
    color: var(--text-ai-accent);
    font-size: 0.8125rem;
  }
  .ai-inline__icon {
    color: var(--text-ai-accent);
    font-size: 0.7rem;
  }
  .ai-ghost-field {
    display: inline-flex;
    align-items: baseline;
    padding: 0.4rem 0.625rem;
    border: 1px solid var(--border-ai-input);
    border-radius: 0.5rem;
    background-color: var(--bg-ai-input);
    font-size: 0.875rem;
    color: var(--text-ai-primary);
  }
  .ai-ghost {
    color: var(--text-ai-ghost);
  }
  .ai-ghost-field .ai-cursor {
    margin: 0 1px;
    height: 1.05em;
  }
  .ai-ghost__hint {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
  }
  .ai-ghost__hint kbd {
    font-size: 0.625rem;
  }
  @keyframes ai-progress-indeterminate {
    0% {
      margin-left: -40%;
    }
    100% {
      margin-left: 100%;
    }
  }
  .ai-voice {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 3.5rem;
    height: 3.5rem;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    background: var(--gradient-ai-orb);
    box-shadow: 0 0 16px -5px var(--glow-ai-active);
  }
  .ai-voice--sm {
    width: 2.5rem;
    height: 2.5rem;
  }
  .ai-voice--lg {
    width: 5rem;
    height: 5rem;
  }
  .ai-voice::before, .ai-voice__orb {
    content: "";
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: var(--gradient-ai-aurora);
    background-size: 160% 160%;
    filter: blur(7px) saturate(1.25);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: ai-orb-swirl var(--duration-ai-orb-swirl) linear infinite;
  }
  .ai-voice::before {
    opacity: 0.55;
  }
  .ai-voice__orb {
    opacity: 0.42;
    animation-name: ai-orb-swirl-rev;
    animation-duration: calc(var(--duration-ai-orb-swirl) * 1.35);
  }
  .ai-voice::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: radial-gradient(circle at 33% 27%, var(--bg-ai-orb-sheen), transparent 48%);
    pointer-events: none;
  }
  .ai-voice--listening::before {
    opacity: 0.72;
    animation-duration: calc(var(--duration-ai-orb-swirl) * 0.8);
  }
  .ai-voice--listening .ai-voice__orb {
    opacity: 0.55;
    animation-duration: calc(var(--duration-ai-orb-swirl) * 1.05);
  }
  .ai-voice--processing::before {
    animation-duration: calc(var(--duration-ai-orb-swirl) * 0.5);
    opacity: 0.72;
  }
  .ai-voice--processing .ai-voice__orb {
    animation-duration: calc(var(--duration-ai-orb-swirl) * 0.65);
    opacity: 0.6;
  }
  .ai-voice--idle::before {
    animation-duration: calc(var(--duration-ai-orb-swirl) * 1.8);
    opacity: 0.4;
  }
  .ai-voice--idle .ai-voice__orb {
    animation-duration: calc(var(--duration-ai-orb-swirl) * 2.2);
    opacity: 0.32;
  }
  @keyframes ai-orb-swirl {
    0% {
      transform: translate(0%, 0%) rotate(0deg) scale(1.12);
      background-position: 0% 50%;
    }
    30% {
      transform: translate(5%, -4%) rotate(108deg) scale(1.27);
      background-position: 60% 25%;
    }
    60% {
      transform: translate(-4%, 5%) rotate(230deg) scale(1.2);
      background-position: 35% 78%;
    }
    100% {
      transform: translate(0%, 0%) rotate(360deg) scale(1.12);
      background-position: 0% 50%;
    }
  }
  @keyframes ai-orb-swirl-rev {
    0% {
      transform: translate(0%, 0%) rotate(360deg) scale(1.2);
      background-position: 100% 50%;
    }
    35% {
      transform: translate(-5%, 4%) rotate(236deg) scale(1.33);
      background-position: 25% 68%;
    }
    70% {
      transform: translate(4%, -5%) rotate(118deg) scale(1.23);
      background-position: 72% 30%;
    }
    100% {
      transform: translate(0%, 0%) rotate(0deg) scale(1.2);
      background-position: 100% 50%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ai-avatar.is-thinking, .ai-message.is-streaming .ai-message__content::after, .ai-tool, .ai-run__step.is-active .ai-run__marker, .ai-skeleton__line, .ai-canvas::before, .ai-badge--thinking, .ai-badge--live .ai-badge__dot, .ai-progress--shimmer .ai-progress__bar, .ai-progress.is-indeterminate .ai-progress__bar, .ai-voice, .ai-voice::before, .ai-voice__orb {
      animation: none !important;
    }
  }
}
@layer utilities {
  .ai-console {
    position: relative;
    border-radius: var(--rounded-card, 12px);
    background-color: var(--bg-ai-console);
    border: 1px solid var(--border-ai-console);
    box-shadow: var(--shadow-ai-console);
    overflow: hidden;
  }
  .ai-console__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-ai-console-header);
    border-bottom: 1px solid var(--border-ai-console);
  }
  .ai-console__dots {
    display: inline-flex;
    gap: 0.3rem;
  }
  .ai-console__dots span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background-color: var(--text-ai-console-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-ai-console-muted) 60%, transparent);
    }
  }
  .ai-console__title {
    font-size: 0.75rem;
    color: var(--text-ai-console-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
  }
  .ai-console__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
  }
  .ai-console__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.35rem;
    border: 0;
    background: transparent;
    color: var(--text-ai-console-muted);
    cursor: pointer;
    font-size: 0.75rem;
  }
  .ai-console__action:hover {
    background-color: var(--bg-ai-console-active);
    color: var(--text-ai-console);
  }
  .ai-console__action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .ai-console__body {
    padding: 0.75rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--text-ai-console);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 26rem;
  }
  .ai-console__body ::selection {
    background-color: var(--bg-ai-console-selection);
  }
  .ai-console__body::selection {
    background-color: var(--bg-ai-console-selection);
  }
  .ai-console__line {
    display: block;
  }
  .ai-console__line--in {
    color: var(--text-ai-console);
  }
  .ai-console__line--in::before {
    content: "$ ";
    color: var(--text-ai-console-prompt);
  }
  .ai-console__line--in[data-prefix]::before {
    content: attr(data-prefix);
  }
  .ai-console__line--out {
    color: var(--text-ai-console-muted);
  }
  .ai-console__line--out::before {
    content: "› ";
    color: var(--text-ai-console-sys);
  }
  .ai-console__line--ok {
    color: var(--text-ai-console-cmt);
  }
  .ai-console__line--ok::before {
    content: "✓ ";
  }
  .ai-console__line--err {
    color: var(--utility-red-400);
  }
  .ai-console__line--err::before {
    content: "✗ ";
  }
  .ai-console__line--warn {
    color: var(--text-ai-console-warn);
  }
  .ai-console__line--warn::before {
    content: "! ";
  }
  .ai-console__line--info {
    color: var(--text-ai-console-info);
  }
  .ai-console__line--info::before {
    content: "ℹ ";
  }
  .ai-console__line--debug {
    color: var(--text-ai-console-debug);
  }
  .ai-console__line--debug::before {
    content: "· ";
  }
  .ai-console__line--sys {
    color: var(--text-ai-console-sys);
  }
  .ai-console__line--cmt {
    color: var(--text-ai-console-sys);
    font-style: italic;
  }
  .ai-console__line--cmt::before {
    content: "# ";
  }
  .ai-console__line--tool {
    color: var(--text-ai-console-tool);
  }
  .ai-console__line--tool::before {
    content: "⚙ ";
  }
  .ai-console__time {
    display: inline-block;
    margin-right: 0.6rem;
    color: var(--text-ai-console-gutter);
    user-select: none;
  }
  .ai-console--numbered .ai-console__body {
    counter-reset: ai-cline;
  }
  .ai-console--numbered .ai-console__line {
    counter-increment: ai-cline;
    position: relative;
    padding-left: 2.75rem;
  }
  .ai-console--numbered .ai-console__line::after {
    content: counter(ai-cline);
    position: absolute;
    left: 0;
    width: 2rem;
    text-align: right;
    color: var(--text-ai-console-gutter);
    user-select: none;
  }
  .ai-console__spinner {
    display: inline-block;
    color: var(--text-ai-console-prompt);
    width: 1ch;
  }
  .ai-console__spinner::before {
    content: "⠋";
    animation: ai-braille 800ms steps(1, end) infinite;
  }
  .ai-console__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.35rem;
    margin: 0 0.15rem;
    border-radius: 0.3rem;
    font-size: 0.6875rem;
    background-color: var(--bg-ai-console-active);
    color: var(--text-ai-console-muted);
  }
  .ai-console__badge--ok {
    color: var(--text-ai-console-cmt);
  }
  .ai-console__badge--warn {
    color: var(--text-ai-console-warn);
  }
  .ai-console__badge--err {
    color: var(--utility-red-400);
  }
  .ai-console__progress {
    display: inline-block;
    vertical-align: middle;
    width: 10rem;
    max-width: 100%;
    height: 0.4rem;
    margin: 0 0.4rem;
    border-radius: 9999px;
    background-color: var(--text-ai-console-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-ai-console-muted) 25%, transparent);
    }
    overflow: hidden;
  }
  .ai-console__progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-ai-streaming);
  }
  .ai-console__group {
    display: block;
  }
  .ai-console__summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-ai-console-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ai-console__summary::before {
    content: "▾";
    display: inline-block;
    transition: transform var(--transition-panel);
    color: var(--text-ai-console-sys);
  }
  .ai-console__group.is-collapsed > .ai-console__summary::before {
    transform: rotate(-90deg);
  }
  .ai-console__group.is-collapsed > .ai-console__line, .ai-console__group.is-collapsed > .ai-console__group {
    display: none;
  }
  .ai-console__summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .ai-console__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0.75rem 0.75rem;
    padding: 0.35rem 0.85rem;
    background-color: var(--bg-ai-console-footer);
    border: 1px solid var(--border-ai-console);
    border-radius: 9999px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    color: var(--text-ai-console-muted);
  }
  .ai-console__seg {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .ai-console__seg--ok {
    color: var(--text-ai-console-cmt);
  }
  .ai-console__seg--err {
    color: var(--utility-red-400);
  }
  .ai-console__seg--right {
    margin-left: auto;
  }
  .ai-console__cursor {
    display: inline-block;
    width: 0.5rem;
    height: 1em;
    vertical-align: text-bottom;
    background-color: var(--text-ai-console-prompt);
    animation: ai-cursor-blink var(--duration-ai-cursor) steps(1, end) infinite;
  }
  .ai-console.is-running::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    background: var(--gradient-ai-streaming);
    background-size: 200% 100%;
    animation: ai-shimmer var(--duration-ai-shimmer) linear infinite;
  }
  .ai-console.is-complete .ai-console__title {
    color: var(--text-ai-console-cmt);
  }
  .ai-console.is-failed .ai-console__title {
    color: var(--utility-red-400);
  }
  .ai-console.is-failed {
    border-color: var(--utility-red-400);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--utility-red-400) 40%, var(--border-ai-console));
    }
  }
  .ai-console--sm .ai-console__body {
    font-size: 0.6875rem;
    line-height: 1.6;
    padding: 0.5rem 0.625rem;
  }
  .ai-console--lg .ai-console__body {
    font-size: 0.8125rem;
    line-height: 1.8;
    padding: 1rem;
  }
  .ai-console--minimal {
    border: 0;
    box-shadow: none;
    border-radius: 0.5rem;
  }
  .ai-console--minimal .ai-console__header, .ai-console--minimal .ai-console__footer {
    display: none;
  }
  .ai-console--light {
    background-color: var(--bg-ai-console-light);
    border-color: var(--border-ai-console-light);
    --text-ai-console: var(--text-ai-console-light);
    --text-ai-console-muted: var(--text-ai-muted);
    --bg-ai-console-header: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-console-header: color-mix(in oklch, var(--text-primary) 4%, var(--bg-ai-console-light));
    }
    --bg-ai-console-footer: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --bg-ai-console-footer: color-mix(in oklch, var(--text-primary) 4%, var(--bg-ai-console-light));
    }
    --text-ai-console-prompt: var(--text-ai-accent);
    --text-ai-console-sys: var(--text-ai-muted);
  }
  .ai-console--inline {
    display: inline-flex;
    align-items: center;
    box-shadow: none;
    border-radius: 0.5rem;
  }
  .ai-console--inline .ai-console__header, .ai-console--inline .ai-console__footer {
    display: none;
  }
  .ai-console--inline .ai-console__body {
    padding: 0.4rem 0.7rem;
    max-height: none;
    white-space: nowrap;
    overflow-x: auto;
  }
  @keyframes ai-braille {
    0% {
      content: "⠋";
    }
    10% {
      content: "⠙";
    }
    20% {
      content: "⠹";
    }
    30% {
      content: "⠸";
    }
    40% {
      content: "⠼";
    }
    50% {
      content: "⠴";
    }
    60% {
      content: "⠦";
    }
    70% {
      content: "⠧";
    }
    80% {
      content: "⠇";
    }
    90% {
      content: "⠏";
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ai-console__cursor, .ai-console__spinner::before, .ai-console.is-running::before {
      animation: none !important;
    }
    .ai-console__spinner::before {
      content: "⠿";
    }
  }
}
@layer utilities {
  .ai-genui {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-ai-generated);
    border: 1px solid var(--border-ai-generated);
    border-radius: var(--rounded-card, 12px);
    box-shadow: var(--shadow-ai-generated);
    overflow: hidden;
    animation: ai-reveal var(--duration-ai-reveal) var(--ease-ai-spring) both;
  }
  .ai-genui__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-ai-subtle);
    background-color: var(--bg-ai-surface-subtle);
  }
  .ai-genui__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .ai-genui__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-ai-primary);
  }
  .ai-genui__source {
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
  }
  .ai-genui__header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
  }
  .ai-genui__body {
    padding: 0.875rem;
    background-color: var(--bg-ai-surface);
  }
  .ai-genui__validation {
    display: none;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0.875rem 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    background-color: var(--bg-ai-warning-subtle);
    border: 1px solid var(--border-ai-warning);
    color: var(--text-ai-secondary);
  }
  .ai-genui__validation i {
    color: var(--text-ai-warning);
    margin-top: 0.1rem;
  }
  .ai-genui.has-validation .ai-genui__validation {
    display: flex;
  }
  .ai-genui__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border-ai-subtle);
    background-color: var(--bg-ai-surface);
  }
  .ai-genui__footer-spacer {
    flex: 1;
  }
  .ai-genui.is-generating {
    border-color: transparent;
  }
  .ai-genui.is-generating::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--gradient-ai-generated);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ai-gradient-pan var(--duration-ai-gradient) linear infinite;
    pointer-events: none;
  }
  .ai-genui.is-editable {
    border-style: dashed;
    border-color: var(--border-ai-generated);
  }
  .ai-genui.is-editable .ai-genui__title::after {
    content: "Draft";
    margin-left: 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-ai-accent);
  }
  .ai-genui.is-saved {
    border-color: var(--border-ai-success);
    box-shadow: none;
  }
  .ai-genui.is-saved .ai-genui__header {
    background-color: var(--bg-ai-success-subtle);
  }
  .ai-genui.is-discarded {
    opacity: 0.6;
    box-shadow: none;
    border-style: dashed;
    border-color: var(--border-ai-subtle);
  }
  .ai-genui.is-discarded .ai-genui__body, .ai-genui.is-discarded .ai-genui__footer {
    display: none;
  }
  .ai-genui.is-discarded .ai-genui__title {
    text-decoration: line-through;
    color: var(--text-ai-muted);
  }
  .ai-genui.is-error {
    border-color: var(--border-ai-error);
  }
  .ai-genui.is-error .ai-genui__header {
    background-color: var(--bg-ai-error-subtle);
  }
  .ai-genform {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .ai-genform__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  @media (max-width: 640px) {
    .ai-genform__row {
      grid-template-columns: 1fr;
    }
  }
  .ai-genform__field--full {
    grid-column: 1 / -1;
  }
  .ai-genform .is-ai-filled > .label::after, .ai-genform .is-ai-filled > label::after {
    content: "\f0eb";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    margin-left: 0.35rem;
    font-size: 0.7rem;
    color: var(--text-ai-accent);
  }
  .ai-gentable {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--border-ai-subtle);
  }
  .ai-gentable__caption {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.625rem;
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
    background-color: var(--bg-ai-surface-subtle);
    border-bottom: 1px solid var(--border-ai-subtle);
  }
  .ai-gentable table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
  }
  .ai-gentable th, .ai-gentable td {
    padding: 0.45rem 0.625rem;
    text-align: left;
    border-bottom: 1px solid var(--border-ai-subtle);
  }
  .ai-gentable th {
    color: var(--text-ai-muted);
    font-weight: 600;
    background-color: var(--bg-ai-surface-subtle);
  }
  .ai-gentable tr:last-child td {
    border-bottom: 0;
  }
  .ai-genchart {
    position: relative;
    min-height: 160px;
    border-radius: 0.5rem;
    background-color: var(--bg-ai-canvas);
    border: 1px solid var(--border-ai-subtle);
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.875rem;
    overflow: hidden;
  }
  .ai-genchart__bar {
    flex: 1;
    border-radius: 0.25rem 0.25rem 0 0;
    background: var(--gradient-ai-accent);
    opacity: 0.85;
    min-height: 8px;
  }
  .ai-genchart__label {
    position: absolute;
    top: 0.5rem;
    left: 0.625rem;
    font-size: 0.6875rem;
    color: var(--text-ai-muted);
  }
  .ai-genchart.is-loading {
    align-items: stretch;
  }
  .ai-genchart.is-loading .ai-genchart__bar {
    background: var(--bg-ai-skeleton);
    background-image: var(--gradient-ai-skeleton);
    background-size: 200% 100%;
    animation: ai-shimmer var(--duration-ai-shimmer) linear infinite;
  }
  .ai-genui.is-regenerating {
    position: relative;
  }
  .ai-genui.is-regenerating .ai-genui__body {
    opacity: 0.5;
  }
  .ai-genui.is-regenerating::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--text-ai-accent), transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--text-ai-accent) 14%, transparent), transparent);
    }
    background-size: 200% 100%;
    animation: ai-shimmer var(--duration-ai-shimmer) linear infinite;
    pointer-events: none;
  }
  .ai-genui__version {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    background-color: var(--bg-ai-surface-active);
    border: 1px solid var(--border-ai-subtle);
    font-size: 0.6875rem;
    color: var(--text-ai-secondary);
    font-variant-numeric: tabular-nums;
  }
  .ai-genui__version button, .ai-genui__version a {
    border: 0;
    background: transparent;
    color: var(--text-ai-accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
  }
  .ai-genui__version button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  @media (prefers-reduced-motion: reduce) {
    .ai-genui, .ai-genui.is-generating::before, .ai-genui.is-regenerating::after, .ai-genchart.is-loading .ai-genchart__bar {
      animation: none !important;
    }
  }
}
@layer utilities {
  .a2ui-shell {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr) 18rem;
    background-color: var(--bg-a2ui);
    border: 1px solid var(--border-a2ui);
    border-radius: var(--rounded-card, 12px);
    overflow: hidden;
    min-height: 34rem;
    transition: grid-template-columns var(--transition-layout);
  }
  .a2ui-shell.is-context-collapsed {
    grid-template-columns: 16rem minmax(0, 1fr) 2.75rem;
  }
  .a2ui-shell.is-rail-collapsed {
    grid-template-columns: 2.75rem minmax(0, 1fr) 18rem;
  }
  .a2ui-shell.is-rail-collapsed.is-context-collapsed {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  }
  .a2ui-shell--page {
    height: calc(100vh - var(--height-app-header, 56px) - var(--height-app-footer, 0px));
    min-height: 600px;
    border: 0;
    border-radius: 0;
  }
  .a2ui-rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background-color: var(--bg-a2ui-panel);
    border-right: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-rail__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-rail__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-a2ui);
  }
  .a2ui-rail__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-panel), color var(--transition-panel);
  }
  .a2ui-rail__toggle:hover {
    background-color: var(--bg-a2ui-hover);
    color: var(--text-a2ui);
  }
  .a2ui-rail__toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .a2ui-rail__toggle > i {
    transition: transform var(--transition-panel);
  }
  .a2ui-shell.is-rail-collapsed .a2ui-rail__search, .a2ui-shell.is-rail-collapsed .a2ui-rail__body, .a2ui-shell.is-rail-collapsed .a2ui-rail__title, .a2ui-shell.is-rail-collapsed .a2ui-rail__header > i {
    display: none;
  }
  .a2ui-shell.is-rail-collapsed .a2ui-rail__header {
    justify-content: center;
    border-bottom: 0;
  }
  .a2ui-shell.is-rail-collapsed .a2ui-rail__toggle {
    margin-left: 0;
  }
  .a2ui-shell.is-rail-collapsed .a2ui-rail__toggle > i {
    transform: rotate(180deg);
  }
  .a2ui-rail__search {
    position: relative;
    padding: 0.5rem 0.625rem 0.25rem;
  }
  .a2ui-rail__search i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-25%);
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
    pointer-events: none;
  }
  .a2ui-rail__search-field {
    width: 100%;
    padding: 0.375rem 0.625rem 0.375rem 1.85rem;
    font-size: 0.8125rem;
    color: var(--text-a2ui);
    background-color: var(--bg-a2ui-surface);
    border: 0;
    border-radius: var(--radius-lg, 8px);
    transition: box-shadow var(--transition-panel), background-color var(--transition-panel);
  }
  .a2ui-rail__search-field::placeholder {
    color: var(--text-ai-placeholder);
  }
  .a2ui-rail__search-field:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .a2ui-rail__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0.5rem 0.75rem;
  }
  .a2ui-rail__group {
    margin-top: 0.625rem;
  }
  .a2ui-rail__group.is-hidden {
    display: none;
  }
  .a2ui-rail__group-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .a2ui-rail__group-label {
    padding: 0 0.25rem 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-a2ui-muted);
  }
  .a2ui-rail__empty {
    display: none;
    padding: 1rem 0.5rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--text-a2ui-muted);
  }
  .a2ui-rail.is-empty .a2ui-rail__empty {
    display: block;
  }
  .a2ui-method-item {
    position: relative;
    list-style: none;
  }
  .a2ui-method-item.is-hidden {
    display: none;
  }
  .a2ui-method {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1.9rem 0.5rem 0.55rem;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-a2ui);
    cursor: pointer;
    transition: background-color var(--transition-panel), border-color var(--transition-panel);
  }
  .a2ui-method:hover {
    background-color: var(--bg-a2ui-hover);
  }
  .a2ui-method:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .a2ui-method.is-active {
    background-color: var(--bg-a2ui-active);
    border-color: var(--border-ai-panel);
  }
  .a2ui-method.is-hidden {
    display: none;
  }
  .a2ui-method__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    color: var(--text-ai-accent);
    background-color: var(--bg-a2ui-surface);
    border: 1px solid var(--border-a2ui-subtle);
    border-radius: 8px;
  }
  .a2ui-method.is-active .a2ui-method__icon {
    border-color: var(--border-ai-panel);
  }
  .a2ui-method__meta {
    min-width: 0;
    flex: 1;
  }
  .a2ui-method__name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-a2ui);
  }
  .a2ui-method__desc {
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--text-a2ui-muted);
  }
  .a2ui-method__fav {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-panel), color var(--transition-panel);
  }
  .a2ui-method-item:hover .a2ui-method__fav, .a2ui-method-item:focus-within .a2ui-method__fav, .a2ui-method__fav.is-favorite {
    opacity: 1;
  }
  .a2ui-method__fav:hover {
    color: var(--text-a2ui);
  }
  .a2ui-method__fav.is-favorite {
    color: var(--text-ai-warning);
  }
  .a2ui-method__fav:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .a2ui-workspace {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background-color: var(--bg-a2ui);
  }
  .a2ui-session-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--bg-a2ui-panel);
    border-bottom: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-session-header__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-a2ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .a2ui-session-header__meta {
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
    white-space: nowrap;
  }
  .a2ui-session-header__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
  }
  .a2ui-workspace__canvas {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem;
    overflow-y: auto;
  }
  .a2ui-workspace__composer {
    padding: 0.75rem 0.875rem 0.875rem;
    background-color: var(--bg-a2ui-panel);
    border-top: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-composer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .a2ui-quick-actions, .a2ui-composer__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .a2ui-agent-state {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
  }
  .a2ui-agent-state__elapsed {
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .a2ui-timeline {
    display: flex;
    flex-direction: column;
    padding: 0.875rem;
    background-color: var(--bg-a2ui-panel);
    border: 1px solid var(--border-a2ui-subtle);
    border-radius: var(--rounded-card, 12px);
  }
  .a2ui-timeline__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.3rem 0;
    opacity: 0.55;
    transition: opacity var(--transition-panel);
  }
  .a2ui-timeline__marker {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.625rem;
    color: var(--text-a2ui-muted);
    background-color: var(--bg-a2ui-surface);
    border: 1px solid var(--border-a2ui);
    border-radius: 9999px;
    z-index: 1;
    transition: border-color var(--transition-panel), color var(--transition-panel);
  }
  .a2ui-timeline__step:not(:last-child) .a2ui-timeline__marker::after {
    content: "";
    position: absolute;
    top: 1.35rem;
    bottom: -0.95rem;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background-color: var(--border-a2ui-subtle);
  }
  .a2ui-timeline__body {
    min-width: 0;
    padding-top: 0.05rem;
  }
  .a2ui-timeline__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-a2ui);
  }
  .a2ui-timeline__meta {
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
  }
  .a2ui-timeline__step.is-active {
    opacity: 1;
  }
  .a2ui-timeline__step.is-active .a2ui-timeline__marker {
    border-color: var(--border-ai-thinking);
    color: var(--text-ai-thinking);
    animation: ai-glow-pulse var(--duration-ai-glow) ease-in-out infinite;
  }
  .a2ui-timeline__step.is-complete {
    opacity: 1;
  }
  .a2ui-timeline__step.is-complete .a2ui-timeline__marker {
    border-color: var(--border-ai-success);
    color: var(--text-ai-success);
  }
  .a2ui-timeline__step.is-failed {
    opacity: 1;
  }
  .a2ui-timeline__step.is-failed .a2ui-timeline__marker {
    border-color: var(--border-ai-error);
    color: var(--text-ai-error);
  }
  .a2ui-timeline--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
  }
  .a2ui-timeline--horizontal .a2ui-timeline__step {
    flex: none;
    align-items: center;
    padding: 0;
  }
  .a2ui-timeline--horizontal .a2ui-timeline__step:not(:last-child)::after {
    content: "";
    width: 1.25rem;
    height: 1px;
    margin: 0 0.25rem;
    background-color: var(--border-a2ui-subtle);
  }
  .a2ui-timeline--horizontal .a2ui-timeline__marker::after {
    display: none;
  }
  .a2ui-timeline--horizontal .a2ui-timeline__body {
    padding-top: 0;
  }
  .a2ui-timeline--horizontal .a2ui-timeline__label {
    font-size: 0.6875rem;
    white-space: nowrap;
  }
  .a2ui-timeline--horizontal .a2ui-timeline__meta {
    display: none;
  }
  .a2ui-timeline--bare {
    padding: 0;
    background: transparent;
    border: 0;
  }
  .a2ui-activity {
    position: sticky;
    top: 0;
    z-index: 20;
    align-self: center;
    max-width: 100%;
  }
  .a2ui-activity[hidden] {
    display: none;
  }
  .a2ui-activity__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-a2ui);
    background-color: var(--bg-a2ui-panel);
    border: 1px solid var(--border-ai-panel);
    border-radius: 9999px;
    box-shadow: var(--shadow-a2ui);
    cursor: pointer;
    animation: ai-reveal var(--duration-ai-reveal) var(--ease-ai-spring) both;
    transition: border-color var(--transition-panel), box-shadow var(--transition-panel);
  }
  .a2ui-activity__pill:hover {
    box-shadow: var(--shadow-a2ui-hover);
  }
  .a2ui-activity__pill:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .a2ui-activity__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    font-size: 0.7rem;
    color: var(--text-ai-thinking);
  }
  .a2ui-activity__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: currentColor;
  }
  .a2ui-activity__label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: ai-reveal var(--duration-ai-reveal) var(--ease-ai) both;
  }
  .a2ui-activity__elapsed {
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
    font-variant-numeric: tabular-nums;
  }
  .a2ui-activity__chevron {
    font-size: 0.625rem;
    color: var(--text-a2ui-muted);
    padding: 0.2rem 0.35rem;
    transition: transform var(--transition-panel);
  }
  .a2ui-activity.is-open .a2ui-activity__chevron {
    transform: rotate(180deg);
  }
  .a2ui-activity.is-running .a2ui-activity__pill {
    border-color: var(--border-ai-thinking);
  }
  .a2ui-activity.is-running .a2ui-activity__dot {
    animation: ai-glow-pulse var(--duration-ai-glow) ease-in-out infinite;
  }
  .a2ui-activity.is-complete .a2ui-activity__pill {
    border-color: var(--border-ai-success);
  }
  .a2ui-activity.is-complete .a2ui-activity__indicator {
    color: var(--text-ai-success);
  }
  .a2ui-activity.is-failed .a2ui-activity__pill {
    border-color: var(--border-ai-error);
  }
  .a2ui-activity.is-failed .a2ui-activity__indicator {
    color: var(--text-ai-error);
  }
  .a2ui-activity__sheet {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 21;
    min-width: 19rem;
    max-width: 24rem;
    padding: 0.75rem 0.875rem;
    background-color: var(--bg-a2ui-panel);
    border: 1px solid var(--border-a2ui-subtle);
    border-radius: var(--rounded-card, 12px);
    box-shadow: var(--shadow-a2ui-hover);
    animation: ai-reveal var(--duration-ai-reveal) var(--ease-ai-spring) both;
  }
  .a2ui-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
    background-color: var(--bg-a2ui-panel);
    border: 1px solid var(--border-a2ui-subtle);
    border-radius: var(--rounded-card, 12px);
  }
  .a2ui-summary > i {
    flex: none;
    margin-top: 0.15rem;
    color: var(--text-ai-accent);
  }
  .a2ui-artifact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.875rem;
  }
  .a2ui-artifact {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-ai-generated);
    border: 1px solid var(--border-ai-generated);
    border-radius: var(--rounded-card, 12px);
    box-shadow: var(--shadow-a2ui);
    overflow: hidden;
    animation: ai-reveal var(--duration-ai-reveal) var(--ease-ai-spring) both;
    transition: box-shadow var(--transition-panel), border-color var(--transition-panel);
  }
  .a2ui-artifact:hover {
    box-shadow: var(--shadow-a2ui-hover);
  }
  .a2ui-artifact__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background-color: var(--bg-a2ui-surface);
    border-bottom: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-artifact__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    color: var(--text-ai-accent);
    background-color: var(--bg-a2ui-panel);
    border: 1px solid var(--border-ai-panel);
    border-radius: 8px;
  }
  .a2ui-artifact__meta {
    min-width: 0;
    flex: 1;
  }
  .a2ui-artifact__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-a2ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .a2ui-artifact__type {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-a2ui-muted);
  }
  .a2ui-artifact__header-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
  }
  .a2ui-artifact__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .a2ui-artifact__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: auto;
    padding: 0.5rem 0.625rem;
    background-color: var(--bg-a2ui-panel);
    border-top: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-artifact__action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-panel), color var(--transition-panel);
  }
  .a2ui-artifact__action:hover {
    background-color: var(--bg-a2ui-hover);
    color: var(--text-a2ui);
  }
  .a2ui-artifact__action:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .a2ui-artifact__hint {
    margin-left: auto;
    font-size: 0.625rem;
    color: var(--text-a2ui-muted);
  }
  .a2ui-artifact.is-applied {
    border-color: var(--border-ai-success);
  }
  .a2ui-artifact.is-editing {
    border-color: var(--border-ai-focus);
    box-shadow: var(--ring-a2ui);
  }
  .a2ui-artifact.is-editing [contenteditable="true"] {
    padding: 0.1rem 0.25rem;
    background-color: var(--bg-a2ui-surface);
    border-radius: 4px;
    outline: 1px dashed var(--border-ai-focus);
  }
  .a2ui-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.5rem;
  }
  .a2ui-kpi {
    padding: 0.5rem 0.625rem;
    background-color: var(--bg-a2ui-surface);
    border: 1px solid var(--border-a2ui-subtle);
    border-radius: 8px;
  }
  .a2ui-kpi__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-a2ui);
    font-variant-numeric: tabular-nums;
  }
  .a2ui-kpi__label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-a2ui-muted);
  }
  .a2ui-kpi__delta {
    font-size: 0.6875rem;
    font-weight: 600;
  }
  .a2ui-kpi__delta--up {
    color: var(--text-ai-success);
  }
  .a2ui-kpi__delta--down {
    color: var(--text-ai-error);
  }
  .a2ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
  }
  .a2ui-table th {
    padding: 0.3rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-a2ui-muted);
    border-bottom: 1px solid var(--border-a2ui);
  }
  .a2ui-table td {
    padding: 0.35rem 0.5rem;
    color: var(--text-ai-secondary);
    border-bottom: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-table tr:last-child td {
    border-bottom: 0;
  }
  .a2ui-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .a2ui-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .a2ui-checklist__item > i {
    flex: none;
    margin-top: 0.18rem;
    font-size: 0.75rem;
    color: var(--text-a2ui-muted);
  }
  .a2ui-checklist__item.is-done > i {
    color: var(--text-ai-success);
  }
  .a2ui-recs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .a2ui-rec {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    background-color: var(--bg-a2ui-surface);
    border: 1px solid var(--border-a2ui-subtle);
    border-left: 3px solid var(--border-ai-panel);
    border-radius: 8px;
  }
  .a2ui-rec--high {
    border-left-color: var(--border-ai-error);
  }
  .a2ui-rec--medium {
    border-left-color: var(--border-ai-warning);
  }
  .a2ui-rec--low {
    border-left-color: var(--border-ai-success);
  }
  .a2ui-rec__meta {
    min-width: 0;
    flex: 1;
  }
  .a2ui-rec__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-a2ui);
  }
  .a2ui-rec__detail {
    font-size: 0.75rem;
    color: var(--text-ai-secondary);
  }
  .a2ui-rec__impact {
    flex: none;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-a2ui-muted);
  }
  .a2ui-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
  }
  .a2ui-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .a2ui-list li::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    margin-top: 0.45rem;
    border-radius: 9999px;
    background-color: var(--text-ai-accent);
  }
  .a2ui-text {
    font-size: 0.8125rem;
    color: var(--text-ai-secondary);
    white-space: pre-wrap;
  }
  .a2ui-layout-preview {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 2.6rem;
    gap: 0.375rem;
  }
  .a2ui-layout-preview__region {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    font-size: 0.625rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-a2ui-muted);
    background-color: var(--bg-a2ui-surface);
    border: 1px dashed var(--border-ai-panel);
    border-radius: 6px;
  }
  .a2ui-context-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background-color: var(--bg-a2ui-panel);
    border-left: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-context-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-a2ui-subtle);
  }
  .a2ui-context-panel__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-a2ui);
    white-space: nowrap;
  }
  .a2ui-context-panel__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--text-a2ui-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-panel), color var(--transition-panel);
  }
  .a2ui-context-panel__toggle:hover {
    background-color: var(--bg-a2ui-hover);
    color: var(--text-a2ui);
  }
  .a2ui-context-panel__toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .a2ui-context-panel__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.75rem;
    overflow-y: auto;
  }
  .a2ui-shell.is-context-collapsed .a2ui-context-panel__body, .a2ui-shell.is-context-collapsed .a2ui-context-panel__title {
    display: none;
  }
  .a2ui-shell.is-context-collapsed .a2ui-context-panel__header {
    justify-content: center;
    border-bottom: 0;
  }
  .a2ui-shell.is-context-collapsed .a2ui-context-panel__toggle {
    margin-left: 0;
  }
  .a2ui-context-section__heading {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-a2ui-muted);
  }
  .a2ui-context-section__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-ai-secondary);
  }
  .a2ui-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .a2ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-ai-secondary);
    background-color: var(--bg-ai-chip);
    border: 1px solid var(--border-a2ui-subtle);
    border-radius: 9999px;
  }
  .a2ui-chip > i {
    font-size: 0.625rem;
    color: var(--text-ai-accent);
  }
  .a2ui-context-artifact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
    text-align: left;
    color: var(--text-ai-secondary);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-panel);
  }
  .a2ui-context-artifact:hover {
    background-color: var(--bg-a2ui-hover);
  }
  .a2ui-context-artifact:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .a2ui-context-artifact > i {
    flex: none;
    color: var(--text-ai-accent);
    font-size: 0.6875rem;
  }
  .a2ui-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6875rem;
  }
  .a2ui-meta-row dt {
    color: var(--text-a2ui-muted);
  }
  .a2ui-meta-row dd {
    margin: 0;
    color: var(--text-ai-secondary);
    font-variant-numeric: tabular-nums;
  }
  .a2ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    max-width: 26rem;
    margin: auto;
    padding: 3rem 1.5rem;
    text-align: center;
  }
  .a2ui-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    color: var(--text-ai-accent);
    background-color: var(--bg-a2ui-surface);
    border: 1px solid var(--border-ai-panel);
    border-radius: 12px;
    box-shadow: var(--shadow-a2ui);
  }
  .a2ui-empty__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-a2ui);
  }
  .a2ui-empty__hint {
    font-size: 0.8125rem;
    color: var(--text-a2ui-muted);
  }
  @media (max-width: 1200px) {
    .a2ui-shell, .a2ui-shell.is-context-collapsed {
      grid-template-columns: 14rem minmax(0, 1fr);
    }
    .a2ui-shell.is-rail-collapsed, .a2ui-shell.is-rail-collapsed.is-context-collapsed {
      grid-template-columns: 2.75rem minmax(0, 1fr);
    }
    .a2ui-context-panel {
      display: none;
    }
  }
  @media (max-width: 860px) {
    .a2ui-shell, .a2ui-shell.is-context-collapsed, .a2ui-shell.is-rail-collapsed, .a2ui-shell.is-rail-collapsed.is-context-collapsed {
      grid-template-columns: minmax(0, 1fr);
    }
    .a2ui-rail {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .a2ui-artifact, .a2ui-activity__pill, .a2ui-activity__label, .a2ui-activity__sheet, .a2ui-activity.is-running .a2ui-activity__dot {
      animation: none !important;
    }
    .a2ui-timeline__step.is-active .a2ui-timeline__marker {
      animation: none !important;
    }
    .a2ui-shell, .a2ui-method, .a2ui-method__fav, .a2ui-timeline__step, .a2ui-timeline__marker, .a2ui-artifact, .a2ui-artifact__action, .a2ui-context-artifact, .a2ui-context-panel__toggle, .a2ui-rail__toggle, .a2ui-rail__toggle > i, .a2ui-activity__chevron, .a2ui-rail__search-field {
      transition: none !important;
    }
  }
}
@layer utilities {
  .mkt {
    --mkt-text-primary: var(--text-primary);
    --mkt-text-secondary: var(--text-secondary);
    --mkt-text-tertiary: var(--text-tertiary);
    --mkt-accent: var(--color-brand-700);
    --mkt-decor: color-mix(in srgb, oklch(81.0% 0.163 87) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --mkt-decor: color-mix(in oklch, var(--color-brand-500) 55%, transparent);
    }
    --mkt-brand-gradient: linear-gradient(135deg, var(--color-brand-800), var(--color-brand-950));
    --mkt-bezel: var(--utility-neutral-950);
    --mkt-mockup-frame: var(--bg-primary);
    --mkt-mockup-ring: var(--border-primary);
    --mkt-mockup-screen: var(--bg-secondary);
    --mkt-stage: var(--bg-tertiary);
    --mkt-dot: color-mix(in srgb, oklch(84.5% 0.165 91) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --mkt-dot: color-mix(in oklch, var(--color-brand-400) 40%, transparent);
    }
    position: relative;
    isolation: isolate;
    background-color: var(--bg-primary);
    color: var(--mkt-text-primary);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .mkt {
    --mkt-accent: var(--color-brand-300);
    --mkt-dot: color-mix(in srgb, oklch(84.5% 0.165 91) 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --mkt-dot: color-mix(in oklch, var(--color-brand-400) 22%, transparent);
    }
  }
  .mkt--secondary {
    background-color: var(--bg-secondary);
  }
  .mkt--brand-soft {
    --mkt-text-primary: var(--color-brand-900);
    --mkt-text-secondary: var(--color-brand-800);
    --mkt-text-tertiary: var(--color-brand-700);
    --mkt-accent: var(--color-brand-700);
    background-color: var(--color-brand-50);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .mkt--brand-soft {
    --mkt-text-primary: var(--color-brand-50);
    --mkt-text-secondary: var(--color-brand-200);
    --mkt-text-tertiary: var(--color-brand-300);
    --mkt-accent: var(--color-brand-300);
    background-color: color-mix(in srgb, oklch(28.0% 0.062 58), black 45%);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--color-brand-950), black 45%);
    }
  }
  .mkt--brand {
    --mkt-text-primary: var(--color-white);
    --mkt-text-secondary: var(--color-brand-200);
    --mkt-text-tertiary: color-mix(in srgb, #fff 82%, oklch(93.0% 0.110 98));
    @supports (color: color-mix(in lab, red, red)) {
      --mkt-text-tertiary: color-mix(in oklch, var(--color-white) 82%, var(--color-brand-200));
    }
    --mkt-accent: var(--color-brand-200);
    --mkt-mockup-ring: color-mix(in srgb, #fff 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --mkt-mockup-ring: color-mix(in oklch, var(--color-white) 22%, transparent);
    }
    color: var(--color-white);
    background: var(--mkt-brand-gradient);
  }
  .mkt-container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .mkt-container {
      padding-inline: 2rem;
    }
  }
  .mkt-pad {
    padding-block: 4rem;
  }
  @media (min-width: 768px) {
    .mkt-pad {
      padding-block: 6rem;
    }
  }
  .mkt-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mkt-accent);
  }
  @media (min-width: 768px) {
    .mkt-eyebrow {
      font-size: 1rem;
    }
  }
  .mkt-title {
    color: var(--mkt-text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
    font-size: 2.25rem;
  }
  .mkt-title--medium {
    font-weight: 500;
  }
  @media (min-width: 768px) {
    .mkt-title {
      font-size: 2.75rem;
    }
  }
  @media (min-width: 1024px) {
    .mkt-title--xl {
      font-size: 3.5rem;
    }
  }
  @media (min-width: 1024px) {
    .mkt-title--2xl {
      font-size: 4rem;
      letter-spacing: -0.025em;
    }
  }
  .mkt-supporting {
    margin-top: 1rem;
    color: var(--mkt-text-tertiary);
    font-size: 1.125rem;
    line-height: 1.6;
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .mkt-supporting {
      margin-top: 1.5rem;
      font-size: 1.25rem;
    }
  }
  .mkt-highlight {
    color: var(--mkt-text-secondary);
  }
  .mkt-highlight--underline {
    position: relative;
    text-decoration: underline;
    text-decoration-color: var(--mkt-accent);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.22em;
  }
  .mkt-swoosh {
    color: var(--mkt-accent);
  }
  .mkt-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
  }
  @media (min-width: 640px) {
    .mkt-actions {
      flex-direction: row;
    }
  }
  @media (min-width: 768px) {
    .mkt-actions {
      margin-top: 3rem;
    }
  }
  .mkt-actions--center {
    align-items: center;
  }
  @media (min-width: 640px) {
    .mkt-actions--center {
      justify-content: center;
    }
  }
  .mkt-badge-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.3rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mkt-text-secondary);
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 70%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .mkt-badge-group__addon {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    color: var(--color-brand-700);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .mkt-badge-group__arrow {
    color: var(--color-brand-700);
    transition: transform 120ms ease;
  }
  .mkt-badge-group:hover .mkt-badge-group__arrow {
    transform: translateX(2px);
  }
  .mkt-badge-group--light {
    color: var(--color-brand-700);
    background-color: var(--color-brand-50);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, oklch(78.0% 0.157 84) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-brand-600) 20%, transparent);
    }
  }
  .mkt-badge-group--light .mkt-badge-group__addon {
    color: var(--color-brand-700);
    background-color: var(--color-white);
    box-shadow: none;
  }
  .mkt-badge-group--success .mkt-badge-group__addon, .mkt-badge-group--success .mkt-badge-group__arrow {
    color: var(--text-success);
  }
  .mkt-badge-group--success.mkt-badge-group--light {
    color: var(--text-success);
    background-color: var(--bg-success);
    box-shadow: inset 0 0 0 1px var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-success) 20%, transparent);
    }
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .mkt-badge-group, .mkt--brand .mkt-badge-group {
    color: var(--color-white);
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--color-white) 10%, transparent);
    }
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-white) 22%, transparent);
    }
  }
  .mkt--brand .mkt-badge-group__addon {
    color: var(--color-brand-800);
    background-color: var(--color-white);
    box-shadow: none;
  }
  .mkt--brand .mkt-badge-group__arrow {
    color: var(--color-white);
  }
  .mkt-badge-link {
    display: inline-block;
    border-radius: var(--radius-full);
    outline: none;
  }
  .mkt-badge-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .mkt-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4.5rem;
  }
  .mkt-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--mkt-text-primary);
  }
  .mkt-nav__brand i {
    color: var(--mkt-accent);
  }
  .mkt-nav__links {
    display: none;
    align-items: center;
    gap: 2rem;
  }
  @media (min-width: 768px) {
    .mkt-nav__links {
      display: flex;
    }
  }
  .mkt-nav__links a {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mkt-text-secondary);
    text-decoration: none;
  }
  .mkt-nav__links a:hover {
    color: var(--mkt-text-primary);
  }
  .mkt-nav__actions {
    display: none;
    align-items: center;
    gap: 0.75rem;
  }
  @media (min-width: 768px) {
    .mkt-nav__actions {
      display: flex;
    }
  }
  .mkt--brand .mkt-nav__links a {
    color: var(--color-brand-200);
  }
  .mkt--brand .mkt-nav__links a:hover {
    color: var(--color-white);
  }
  .mkt-grid-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--mkt-dot) 1px, transparent 1.5px);
    background-size: 26px 26px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  }
  .mkt-grid-pattern--lines {
    background-image: linear-gradient(to right, var(--mkt-dot) 1px, transparent 1px), linear-gradient(to bottom, var(--mkt-dot) 1px, transparent 1px);
    background-size: 52px 52px;
  }
  .mkt-stripes {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 20rem;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
  .mkt-stripes__inner {
    position: absolute;
    inset-inline: -10%;
    top: 3rem;
    height: 100%;
    transform: skewY(-7deg);
    display: grid;
    grid-template-rows: repeat(3, 3rem);
    grid-auto-flow: column;
  }
  @media (min-width: 1024px) {
    .mkt-stripes__inner {
      grid-template-rows: repeat(3, 4.5rem);
    }
  }
  .mkt-stripes__bar {
    height: 100%;
  }
  .mkt-stripes__bar--1 {
    grid-row: 2;
    grid-column: 1 / span 6;
    background: color-mix(in srgb, oklch(93.0% 0.110 98) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--color-brand-200) 70%, transparent);
    }
  }
  .mkt-stripes__bar--2 {
    grid-row: 3;
    grid-column: 1 / span 5;
    background: color-mix(in srgb, oklch(84.5% 0.165 91) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--color-brand-400) 55%, transparent);
    }
  }
  .mkt-stripes__bar--3 {
    grid-row: 1;
    grid-column: 8 / span 6;
    background: color-mix(in srgb, oklch(84.5% 0.165 91) 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--color-brand-400) 45%, transparent);
    }
  }
  .mkt-stripes__bar--4 {
    grid-row: 2;
    grid-column: 9 / span 5;
    background: color-mix(in srgb, oklch(93.0% 0.110 98) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--color-brand-200) 60%, transparent);
    }
  }
  .mkt-glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 40rem;
    height: 40rem;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, color-mix(in srgb, oklch(84.5% 0.165 91) 55%, transparent) 0%, transparent 65%);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle, color-mix(in oklch, var(--color-brand-400) 55%, transparent) 0%, transparent 65%);
    }
    mix-blend-mode: screen;
    opacity: 0.7;
  }
  .mkt-flow {
    color: var(--mkt-decor);
  }
  .mkt-media {
    position: relative;
    z-index: 1;
  }
  .mkt-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
  }
  .mkt-image--square-tr {
    border-radius: 0 2rem 0 2rem;
  }
  .mkt-screenshot {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius-xl);
    background-color: var(--mkt-mockup-screen);
    box-shadow: 0 0 0 4px var(--mkt-mockup-ring), var(--shadow-2xl);
  }
  .mkt-frame {
    background-color: var(--mkt-mockup-frame);
    border-radius: var(--radius-3xl);
    padding: 0.375rem;
    box-shadow: inset 0 0 0 1.75px var(--mkt-mockup-ring), var(--shadow-2xl);
  }
  .mkt-frame__screen {
    overflow: hidden;
    border-radius: calc(var(--radius-3xl) - 0.375rem);
    background-color: var(--mkt-mockup-screen);
    box-shadow: inset 0 0 0 1px var(--mkt-mockup-ring);
  }
  .mkt-frame__screen img {
    display: block;
    width: 100%;
  }
  .mkt-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--mkt-stage);
    border-radius: var(--radius-2xl);
  }
  .mkt-stage--brand {
    background: var(--mkt-brand-gradient);
  }
  .mkt-stage--plain {
    background: transparent;
  }
  .mkt-stage--bottom {
    align-items: flex-end;
  }
  .mkt-card {
    position: relative;
    width: 19.75rem;
    height: 11.875rem;
    border-radius: var(--radius-2xl);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    color: var(--color-white);
    box-shadow: var(--shadow-xl);
    font-size: 0.875rem;
  }
  .mkt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 28%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-white) 28%, transparent);
    }
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%);
    mask-image: linear-gradient(135deg, #000, transparent 70%);
    pointer-events: none;
  }
  .mkt-card--brand-dark {
    background: linear-gradient(to top right, var(--color-brand-900), var(--color-brand-700));
    color: var(--text-on-brand-section);
  }
  .mkt-card--brand-light {
    background: linear-gradient(to top right, var(--color-brand-500), var(--color-brand-300));
    color: var(--color-brand-950);
  }
  .mkt-card--gray-dark {
    background: linear-gradient(to top right, var(--utility-neutral-900), var(--utility-neutral-700));
  }
  .mkt-card--transparent {
    background: color-mix(in srgb, #fff 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--color-white) 14%, transparent);
    }
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-xl), inset 0 0 0 1px color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-xl), inset 0 0 0 1px color-mix(in oklch, var(--color-white) 20%, transparent);
    }
  }
  .mkt-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mkt-card__brand {
    font-weight: 600;
  }
  .mkt-card__wave {
    opacity: 0.85;
  }
  .mkt-card__number {
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
  }
  .mkt-card__holder {
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.6px;
  }
  .mkt-card__chip {
    width: 2.5rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, #fff 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--color-white) 22%, transparent);
    }
  }
  .mkt-card-arr {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mkt-card-arr .mkt-card {
    transform: scale(0.62);
  }
  @media (min-width: 768px) {
    .mkt-card-arr .mkt-card {
      transform: scale(0.82);
    }
  }
  @media (min-width: 1024px) {
    .mkt-card-arr .mkt-card {
      transform: none;
    }
  }
  .mkt-card-pair .mkt-card {
    position: absolute;
  }
  .mkt-card-pair .mkt-card:nth-child(1) {
    transform: scale(0.62) rotate(-6deg) translate(-14%, 8%);
  }
  .mkt-card-pair .mkt-card:nth-child(2) {
    transform: scale(0.62) rotate(8deg) translate(14%, -8%);
  }
  @media (min-width: 1024px) {
    .mkt-card-pair .mkt-card:nth-child(1) {
      transform: rotate(-6deg) translate(-22%, 10%);
    }
    .mkt-card-pair .mkt-card:nth-child(2) {
      transform: rotate(10deg) translate(22%, -10%);
    }
  }
  .mkt-card-fan .mkt-card {
    position: absolute;
    transform-origin: bottom center;
  }
  .mkt-card-fan .mkt-card:nth-child(1) {
    transform: scale(0.6) rotate(-24deg) translateY(-6%);
  }
  .mkt-card-fan .mkt-card:nth-child(2) {
    transform: scale(0.6) rotate(-12deg) translateY(-3%);
  }
  .mkt-card-fan .mkt-card:nth-child(3) {
    transform: scale(0.6) rotate(0deg);
  }
  .mkt-card-fan .mkt-card:nth-child(4) {
    transform: scale(0.6) rotate(12deg) translateY(-3%);
  }
  .mkt-card-fan .mkt-card:nth-child(5) {
    transform: scale(0.6) rotate(24deg) translateY(-6%);
  }
  @media (min-width: 768px) {
    .mkt-card-fan .mkt-card:nth-child(1) {
      transform: scale(0.85) rotate(-24deg) translateY(-8%);
    }
    .mkt-card-fan .mkt-card:nth-child(2) {
      transform: scale(0.85) rotate(-12deg) translateY(-4%);
    }
    .mkt-card-fan .mkt-card:nth-child(3) {
      transform: scale(0.85) rotate(0deg);
    }
    .mkt-card-fan .mkt-card:nth-child(4) {
      transform: scale(0.85) rotate(12deg) translateY(-4%);
    }
    .mkt-card-fan .mkt-card:nth-child(5) {
      transform: scale(0.85) rotate(24deg) translateY(-8%);
    }
  }
  .mkt-card-stack .mkt-card {
    position: absolute;
  }
  .mkt-card-stack .mkt-card:nth-child(1) {
    transform: scale(0.62) translate(-8%, 20%);
  }
  .mkt-card-stack .mkt-card:nth-child(2) {
    transform: scale(0.62) translate(0, 0);
  }
  .mkt-card-stack .mkt-card:nth-child(3) {
    transform: scale(0.62) translate(8%, -20%);
  }
  @media (min-width: 768px) {
    .mkt-card-stack .mkt-card:nth-child(1) {
      transform: translate(-10%, 28%);
    }
    .mkt-card-stack .mkt-card:nth-child(2) {
      transform: translate(0, 0);
    }
    .mkt-card-stack .mkt-card:nth-child(3) {
      transform: translate(10%, -28%);
    }
  }
  .mkt-phone {
    position: relative;
    width: 15rem;
    aspect-ratio: 314 / 640;
    border-radius: 2.75rem;
    padding: 0.5rem;
    background: var(--mkt-bezel);
    box-shadow: var(--shadow-2xl);
  }
  .mkt-phone__screen {
    position: relative;
    height: 100%;
    border-radius: 2.25rem;
    overflow: hidden;
    background-color: var(--mkt-mockup-screen);
  }
  .mkt-phone__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mkt-phone__notch {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background: var(--mkt-bezel);
    z-index: 2;
  }
  .mkt-blob {
    position: absolute;
    border-radius: 320px 320px 24px 24px;
    background-color: var(--bg-tertiary);
    z-index: 0;
  }
  .mkt-analytics {
    width: 100%;
    max-width: 30rem;
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-2xl), inset 0 0 0 1px var(--border-secondary);
    color: var(--text-primary);
  }
  .mkt-analytics__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .mkt-chart {
    color: var(--color-brand-500);
  }
  .mkt-donut {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: var(--radius-full);
    background: conic-gradient(var(--color-brand-500) 0 62%, color-mix(in srgb, oklch(81.0% 0.163 87) 16%, transparent) 62% 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background: conic-gradient(var(--color-brand-500) 0 62%, color-mix(in oklch, var(--color-brand-500) 16%, transparent) 62% 100%);
    }
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
    mask: radial-gradient(circle, transparent 54%, #000 55%);
  }
  .mkt-color-card {
    border-radius: var(--radius-3xl);
    overflow: hidden;
  }
  .mkt-float-card {
    border-radius: var(--radius-lg);
    padding: 1rem;
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 90%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    backdrop-filter: blur(12px);
  }
  .mkt-review {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }
  .mkt-review__avatars {
    display: inline-flex;
  }
  .mkt-review__avatars img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    margin-left: -0.75rem;
    box-shadow: 0 0 0 1.5px var(--bg-primary), 0 0 0 2.5px var(--bg-overlay);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1.5px var(--bg-primary), 0 0 0 2.5px color-mix(in oklch, var(--bg-overlay) 12%, transparent);
    }
    background-color: var(--bg-secondary);
  }
  .mkt-review__avatars img:first-child {
    margin-left: 0;
  }
  .mkt-review__stars {
    color: var(--star-filled);
  }
  .mkt-review__score {
    color: var(--mkt-text-secondary);
    font-weight: 600;
  }
  .mkt-review__meta {
    color: var(--mkt-text-tertiary);
    font-weight: 500;
  }
  .mkt-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
  }
  .mkt-logos span {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    color: var(--mkt-text-tertiary);
    opacity: 0.85;
  }
  .mkt-logos__label {
    color: var(--mkt-text-tertiary);
    font-size: 0.875rem;
    font-weight: 500;
  }
  .mkt-header-body {
    display: flex;
    flex-direction: column;
    max-width: 48rem;
  }
  .mkt-header-body--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .mkt-header-body .mkt-title {
    margin-top: 0.75rem;
  }
  .mkt-header-between {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 1024px) {
    .mkt-header-between {
      flex-direction: row;
      gap: 4rem;
    }
  }
  .mkt-header-between .mkt-title {
    flex: 1;
    margin-top: 0;
  }
  .mkt-header-between .mkt-supporting {
    width: 100%;
    margin-top: 1rem;
  }
  @media (min-width: 1024px) {
    .mkt-header-between .mkt-supporting {
      margin-top: 0.75rem;
      max-width: 30rem;
    }
  }
  .mkt-inline-form {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  @media (min-width: 640px) {
    .mkt-inline-form {
      margin-top: 3rem;
      flex-direction: row;
      max-width: 30rem;
    }
  }
  .mkt-inline-form--center {
    margin-inline: auto;
  }
  .mkt-inline-form .form-control {
    flex: 1;
  }
  .mkt-inline-hint {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--mkt-text-tertiary);
    text-align: left;
  }
  .mkt-inline-hint a {
    color: inherit;
    text-underline-offset: 3px;
  }
  .mkt-hero-body {
    position: relative;
    z-index: 1;
  }
  .mkt-hero-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .mkt-hero-col--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .mkt-hero-col .mkt-title {
    margin-top: 1rem;
  }
  .mkt-hero-col--eyebrow-first .mkt-title {
    margin-top: 0.75rem;
  }
  .mkt-split {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 4rem;
  }
  @media (min-width: 1024px) {
    .mkt-split {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    .mkt-split--wide-gap {
      gap: 4rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mkt-badge-group__arrow {
      transition: none;
    }
    .mkt-badge-group:hover .mkt-badge-group__arrow {
      transform: none;
    }
  }
  .mkt a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .mkt-only-dark {
    display: none;
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .mkt-only-light {
    display: none;
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .mkt-only-dark {
    display: revert;
  }
}
@layer utilities {
  .cta-section {
    --cta-max: 80rem;
    --cta-gutter: 1rem;
    --cta-gutter-md: 2rem;
    --cta-title-tracking: -0.02em;
    --cta-eyebrow: var(--color-brand-700);
    --cta-check: var(--bg-brand-solid);
    --cta-check-fg: var(--text-on-brand-section);
    --cta-brand-surface: var(--color-brand-800);
    --cta-brand-fg: var(--color-white);
    --cta-brand-fg-muted: var(--color-brand-200);
    --cta-brand-eyebrow: var(--color-brand-300);
    --cta-shadow-device: 0 24px 48px -12px oklch(0% 0 0 / 0.35);
    --cta-shadow-screen: 0 40px 60px -15px oklch(0% 0 0 / 0.3);
    --cta-bezel: #121515;
    --cta-bezel-edge: #303030;
    position: relative;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding-block: 4rem;
  }
  @media (min-width: 768px) {
    .cta-section {
      padding-block: 6rem;
    }
  }
  [data-theme="theme-dark"] .cta-section, [data-theme="theme-mica-dark"] .cta-section {
    --cta-eyebrow: var(--color-brand-400);
  }
  .cta-container {
    max-width: var(--cta-max);
    margin-inline: auto;
    padding-inline: var(--cta-gutter);
  }
  @media (min-width: 768px) {
    .cta-container {
      padding-inline: var(--cta-gutter-md);
    }
  }
  .cta-copy {
    max-width: 48rem;
  }
  .cta-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cta-eyebrow);
  }
  @media (min-width: 768px) {
    .cta-eyebrow {
      font-size: 1rem;
    }
  }
  .cta-title {
    font-size: 1.875rem;
    line-height: 2.375rem;
    font-weight: 600;
    letter-spacing: var(--cta-title-tracking);
    color: var(--text-primary);
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .cta-title {
      font-size: 2.25rem;
      line-height: 2.75rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-title--lg {
      font-size: 3rem;
      line-height: 3.75rem;
    }
  }
  .cta-subtitle {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .cta-subtitle {
      margin-top: 1.25rem;
      font-size: 1.25rem;
    }
  }
  .cta-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    align-self: stretch;
  }
  @media (min-width: 640px) {
    .cta-actions {
      flex-direction: row;
      align-self: flex-start;
    }
  }
  .cta-actions .btn-primary, .cta-actions .btn-secondary {
    justify-content: center;
  }
  .cta-actions--center {
    align-items: center;
  }
  @media (min-width: 640px) {
    .cta-actions--center {
      align-self: center;
    }
  }
  .cta-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2rem;
  }
  @media (min-width: 768px) {
    .cta-logos--start {
      justify-content: flex-start;
    }
  }
  .cta-logo-slot {
    display: inline-flex;
    align-items: center;
  }
  .cta-logo {
    height: 2.25rem;
    width: auto;
  }
  @media (min-width: 768px) {
    .cta-logo {
      height: 2.5rem;
    }
  }
  .cta-logo--muted {
    opacity: 0.85;
  }
  .cta-logo--wide {
    display: none;
  }
  @media (min-width: 768px) {
    .cta-logo--wide {
      display: inline-flex;
    }
  }
  .cta-swap--dark {
    display: none;
  }
  [data-theme="theme-dark"] .cta-swap--light, [data-theme="theme-mica-dark"] .cta-swap--light {
    display: none;
  }
  [data-theme="theme-dark"] .cta-swap--dark, [data-theme="theme-mica-dark"] .cta-swap--dark {
    display: block;
  }
  .cta-checklist {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
  }
  @media (min-width: 768px) {
    .cta-checklist {
      gap: 1.25rem;
      padding-left: 1rem;
    }
  }
  .cta-check-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .cta-check-item__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--cta-check);
  }
  .cta-check-item__icon--contained {
    border-radius: var(--radius-full);
    background-color: var(--cta-check);
    color: var(--cta-check-fg);
  }
  .cta-check-item__icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .cta-check-item__icon--contained svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .cta-check-item__text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .cta-check-item__text {
      font-size: 1.125rem;
    }
  }
  .cta-section--brand {
    background-color: var(--cta-brand-surface);
  }
  .cta-section--brand .cta-title, .cta-on-brand .cta-title {
    color: var(--cta-brand-fg);
  }
  .cta-section--brand .cta-subtitle, .cta-on-brand .cta-subtitle {
    color: var(--cta-brand-fg-muted);
  }
  .cta-section--brand .cta-eyebrow, .cta-on-brand .cta-eyebrow {
    color: var(--cta-brand-eyebrow);
  }
  .cta-on-brand .btn-secondary {
    color: var(--color-neutral-900, #111);
    background-color: var(--color-white);
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }
  .cta-on-brand .btn-secondary:hover {
    background-color: color-mix(in srgb, #fff 92%, #000);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--color-white) 92%, #000);
    }
  }
  .cta-on-brand .btn-secondary:active {
    background-color: color-mix(in srgb, #fff 86%, #000);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--color-white) 86%, #000);
    }
  }
  .cta-simple--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .cta-simple--center .cta-subtitle {
    margin-inline: auto;
  }
  .cta-simple--left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  @media (min-width: 1024px) {
    .cta-simple--left {
      flex-direction: row;
      align-items: flex-end;
    }
  }
  .cta-simple--left .cta-actions {
    margin-top: 2rem;
  }
  @media (min-width: 1024px) {
    .cta-simple--left .cta-actions {
      margin-top: 0;
    }
  }
  .cta-logos-01 {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 3rem;
  }
  @media (min-width: 1024px) {
    .cta-logos-01 {
      grid-template-columns: 1fr max-content;
      column-gap: 2rem;
    }
    .cta-logos-01 .cta-logos-01__logos {
      grid-column: 1 / -1;
    }
    .cta-logos-01 .cta-actions {
      margin-top: 0;
    }
  }
  .cta-logos-01__logos {
    margin-top: 1rem;
    max-width: 48rem;
  }
  .cta-logos-02 {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3rem;
  }
  @media (min-width: 1024px) {
    .cta-logos-02 {
      grid-template-columns: 1fr 1fr;
      column-gap: 4rem;
    }
  }
  .cta-logos-02__text {
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 1024px) {
    .cta-logos-02 .cta-actions {
      flex-direction: row-reverse;
      justify-content: flex-end;
      margin-top: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-logos-02__logos {
      margin-top: 0;
    }
  }
  .cta-card {
    border-radius: var(--radius-2xl);
    padding: 2.5rem 1.5rem;
  }
  @media (min-width: 1024px) {
    .cta-card {
      padding: 4rem;
    }
  }
  .cta-card--secondary {
    background-color: var(--bg-secondary);
  }
  .cta-card--brand {
    background-color: var(--cta-brand-surface);
  }
  .cta-card--row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .cta-card--row {
      flex-direction: row;
      column-gap: 2rem;
    }
  }
  .cta-card--row .cta-copy {
    flex: 1 1 auto;
  }
  .cta-card--row .cta-actions {
    margin-top: 0;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  @media (min-width: 640px) {
    .cta-card--row .cta-actions {
      flex-direction: row;
      align-items: flex-start;
    }
  }
  .cta-card--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cta-card--center .cta-actions--center {
    align-self: stretch;
  }
  @media (min-width: 640px) {
    .cta-card--center .cta-actions--center {
      align-self: center;
    }
  }
  .cta-title__short {
    display: inline;
  }
  .cta-title__long {
    display: none;
  }
  @media (min-width: 768px) {
    .cta-title__short {
      display: none;
    }
    .cta-title__long {
      display: inline;
    }
  }
  .cta-abstract {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .cta-abstract {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  }
  .cta-abstract__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 48rem;
  }
  .cta-abstract__copy .cta-actions {
    width: 100%;
  }
  .cta-collage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 0.5rem;
    height: 30.5rem;
    width: 150%;
    justify-self: center;
  }
  @media (min-width: 640px) {
    .cta-collage {
      height: 31rem;
      width: 120%;
    }
  }
  @media (min-width: 768px) {
    .cta-collage {
      width: auto;
      gap: 1rem;
    }
  }
  .cta-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }
  .cta-collage__1 {
    grid-area: 3 / 3 / 7 / 7;
  }
  .cta-collage__2 {
    grid-area: 1 / 7 / 7 / 11;
  }
  .cta-collage__3 {
    grid-area: 7 / 5 / 13 / 9;
  }
  .cta-collage__4 {
    grid-area: 7 / 9 / 10 / 13;
  }
  .cta-collage__5 {
    grid-area: 7 / 1 / 10 / 5;
  }
  .cta-split {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 3rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .cta-split {
      grid-template-columns: 1fr 1fr;
    }
  }
  .cta-split-01 {
    padding-block: 0;
  }
  .cta-split-01__copy-wrap {
    display: flex;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .cta-split-01__copy-wrap {
      justify-content: flex-end;
      padding-block: 6rem;
    }
  }
  .cta-split-01__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 48rem;
    padding-inline: var(--cta-gutter);
  }
  @media (min-width: 768px) {
    .cta-split-01__copy {
      padding-inline: var(--cta-gutter-md);
    }
  }
  @media (min-width: 1024px) {
    .cta-split-01__copy {
      max-width: 40rem;
    }
  }
  .cta-split-01__media {
    height: 17.5rem;
    width: 100%;
  }
  @media (min-width: 768px) {
    .cta-split-01__media {
      height: 23.75rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-split-01__media {
      height: 45rem;
    }
  }
  .cta-split-01__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-inline: var(--cta-gutter);
  }
  @media (min-width: 768px) {
    .cta-split-01__media img {
      padding-inline: var(--cta-gutter-md);
    }
  }
  @media (min-width: 1024px) {
    .cta-split-01__media img {
      padding-inline: 0;
    }
  }
  .cta-split-02__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  @media (min-width: 768px) {
    .cta-split-02__grid {
      gap: 4rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-split-02__grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  .cta-split-02__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 48rem;
  }
  .cta-split-02__media {
    height: 17.5rem;
    width: 100%;
    object-fit: cover;
  }
  @media (min-width: 768px) {
    .cta-split-02__media {
      height: 23.75rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-split-02__media {
      height: 37rem;
    }
  }
  .cta-split-03 {
    padding-block: 0;
    background-color: var(--bg-primary);
  }
  .cta-split-03__band {
    background-color: var(--bg-secondary);
    padding-top: 4rem;
    padding-bottom: 7rem;
  }
  @media (min-width: 768px) {
    .cta-split-03__band {
      padding-top: 6rem;
      padding-bottom: 10rem;
    }
  }
  .cta-split-03__head {
    margin-inline: auto;
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cta-split-03__head .cta-title {
    margin-top: 0.75rem;
  }
  .cta-split-03__media-wrap {
    margin-inline: auto;
    max-width: var(--cta-max);
    padding-inline: var(--cta-gutter);
    margin-top: -4rem;
    padding-bottom: 4rem;
  }
  @media (min-width: 768px) {
    .cta-split-03__media-wrap {
      padding-inline: var(--cta-gutter-md);
      margin-top: -6rem;
      padding-bottom: 6rem;
    }
  }
  .cta-split-03__media {
    height: 17.5rem;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  @media (min-width: 768px) {
    .cta-split-03__media {
      height: 32rem;
    }
  }
  .cta-split-04__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background-color: var(--cta-brand-surface);
    box-shadow: var(--shadow-xl);
  }
  @media (min-width: 768px) {
    .cta-split-04__card {
      flex-direction: row;
      align-items: center;
      border-radius: var(--radius-3xl);
    }
  }
  .cta-split-04__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1.5rem 3rem;
  }
  @media (min-width: 1024px) {
    .cta-split-04__body {
      padding: 4rem;
    }
  }
  .cta-split-04__media {
    height: 17.5rem;
    width: 100%;
    object-fit: cover;
  }
  @media (min-width: 768px) {
    .cta-split-04__media {
      height: 25rem;
      width: 23.75rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-split-04__media {
      width: 30rem;
    }
  }
  .cta-quote {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 3rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .cta-quote {
      grid-template-columns: 1fr 1fr;
    }
  }
  .cta-quote__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 48rem;
  }
  .cta-carousel {
    position: relative;
    height: 42.5rem;
    width: 100%;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .cta-carousel {
      height: 45rem;
    }
  }
  .cta-carousel--media-first {
    order: 0;
  }
  @media (min-width: 1024px) {
    .cta-carousel--media-first {
      order: -1;
    }
  }
  .cta-carousel__track {
    position: absolute;
    inset: 0;
  }
  .cta-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms var(--ease-in-out, cubic-bezier(0.8, 0, 0.2, 1));
  }
  .cta-carousel__slide[data-active] {
    opacity: 1;
    visibility: visible;
  }
  .cta-carousel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cta-carousel__overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: 1rem;
    padding-top: 4rem;
    background-image: linear-gradient(to top, oklch(0% 0 0 / 0.45), oklch(0% 0 0 / 0));
  }
  @media (min-width: 768px) {
    .cta-carousel__overlay {
      padding: 2rem;
      padding-top: 5rem;
    }
  }
  .cta-quote-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 1.5rem 1rem;
    background-color: oklch(from var(--color-white) l c h / 0.18);
    box-shadow: inset 0 0 0 1px oklch(from var(--color-white) l c h / 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-white);
  }
  @media (min-width: 768px) {
    .cta-quote-card {
      padding-inline: 1.25rem;
    }
  }
  .cta-quote-card q {
    quotes: none;
  }
  .cta-quote-card__quote {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: balance;
    color: var(--color-white);
  }
  @media (min-width: 768px) {
    .cta-quote-card__quote {
      font-size: 1.875rem;
      line-height: 2.375rem;
    }
  }
  .cta-quote-card__row {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .cta-quote-card__row {
      margin-top: 2rem;
      flex-direction: row;
    }
  }
  .cta-quote-card__name {
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-white);
  }
  @media (min-width: 768px) {
    .cta-quote-card__name {
      font-size: 1.5rem;
    }
  }
  .cta-quote-card__stars {
    display: none;
    gap: 0.25rem;
  }
  @media (min-width: 768px) {
    .cta-quote-card__stars {
      display: flex;
    }
  }
  .cta-quote-card__stars svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-white);
  }
  .cta-quote-card__foot {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
  }
  @media (min-width: 768px) {
    .cta-quote-card__foot {
      margin-top: 0.75rem;
      flex-direction: row;
      gap: 0.75rem;
    }
  }
  .cta-quote-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .cta-quote-card__company {
    font-size: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-white);
  }
  @media (min-width: 768px) {
    .cta-quote-card__company {
      font-size: 1rem;
    }
  }
  .cta-quote-card__title {
    font-size: 1rem;
    white-space: nowrap;
    color: var(--color-white);
  }
  @media (min-width: 768px) {
    .cta-quote-card__title {
      font-size: 0.875rem;
    }
  }
  .cta-carousel__nav {
    display: flex;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .cta-carousel__nav {
      gap: 2rem;
    }
  }
  .cta-carousel__btn {
    --cta-nav-ring: oklch(from var(--color-white) l c h / 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--cta-nav-ring);
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition: border-color 100ms linear, opacity 100ms linear;
  }
  @media (min-width: 768px) {
    .cta-carousel__btn {
      width: 3.5rem;
      height: 3.5rem;
    }
  }
  .cta-carousel__btn:hover {
    border-color: oklch(from var(--color-white) l c h / 0.4);
  }
  .cta-carousel__btn:hover svg {
    opacity: 0.7;
  }
  .cta-carousel__btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }
  .cta-carousel__btn svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: opacity 100ms linear;
  }
  @media (min-width: 768px) {
    .cta-carousel__btn svg {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
  .cta-carousel--sheet .cta-carousel__overlay {
    display: flex;
    align-items: flex-end;
    height: 27.5rem;
    padding: 0;
    background-image: linear-gradient(to top, oklch(0% 0 0 / 0.45), oklch(0% 0 0 / 0));
  }
  .cta-carousel--sheet .cta-quote-card {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid oklch(from var(--color-white) l c h / 0.3);
    padding: 1.5rem 1.25rem 2rem;
  }
  @media (min-width: 768px) {
    .cta-carousel--sheet .cta-quote-card {
      padding: 2rem;
    }
  }
  .device-iphone {
    position: relative;
    width: 100%;
    max-width: 17.75rem;
    aspect-ratio: 314 / 640;
    border-radius: 2.75rem;
    padding: 0.5rem;
    background: var(--cta-bezel);
    box-shadow: inset 0 0 0 2px var(--cta-bezel-edge), var(--cta-shadow-device);
  }
  .device-iphone__screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2.25rem;
    overflow: hidden;
    background: var(--bg-primary);
  }
  .device-iphone__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .device-iphone__notch {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    height: 1.15rem;
    border-radius: var(--radius-full);
    background: var(--cta-bezel);
    z-index: 3;
  }
  .screen-mockup {
    border-radius: 9px;
    background: var(--bg-primary);
    padding: 1px;
    box-shadow: var(--shadow-lg);
    --sm-ring: var(--utility-neutral-300);
    --sm-ring-inner: var(--utility-neutral-200);
    box-shadow: inset 0 0 0 0.56px var(--sm-ring), var(--shadow-lg);
  }
  @media (min-width: 768px) {
    .screen-mockup {
      border-radius: 27px;
      padding: 3.5px;
      box-shadow: inset 0 0 0 1.68px var(--sm-ring), var(--shadow-lg);
    }
  }
  .screen-mockup__inner {
    border-radius: 8px;
    background: var(--bg-primary);
    padding: 2px;
    box-shadow: inset 0 0 1px oklch(0% 0 0 / 0.1);
  }
  @media (min-width: 768px) {
    .screen-mockup__inner {
      border-radius: 23.5px;
      padding: 4px;
    }
  }
  .screen-mockup__screen {
    position: relative;
    overflow: hidden;
    border-radius: 6.7px;
    background: var(--utility-neutral-50);
    box-shadow: inset 0 0 0 0.56px var(--sm-ring-inner);
  }
  @media (min-width: 768px) {
    .screen-mockup__screen {
      border-radius: 20px;
      box-shadow: inset 0 0 0 1.68px var(--sm-ring-inner);
    }
  }
  .screen-mockup__screen img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: left top;
  }
  .cta-appmockup {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  @media (min-width: 1024px) {
    .cta-appmockup {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  }
  .cta-appmockup__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 48rem;
  }
  .cta-appmockup__stores {
    margin-top: 2rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  @media (min-width: 768px) {
    .cta-appmockup__stores {
      margin-top: 3rem;
    }
  }
  .cta-appmockup__stage {
    position: relative;
    min-height: 22.5rem;
  }
  @media (min-width: 768px) {
    .cta-appmockup__stage {
      min-height: 25rem;
      width: 100%;
    }
  }
  .cta-appmockup__blob {
    position: absolute;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 33rem;
    max-width: none;
    color: var(--bg-secondary);
  }
  .cta-appmockup__stage .device-iphone {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 17.75rem;
  }
  @media (min-width: 768px) {
    .cta-appmockup__stage .device-iphone {
      max-width: 19.6rem;
    }
  }
  .cta-appmockup__stage--band {
    position: relative;
    min-height: 22.5rem;
    overflow: hidden;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
  }
  @media (min-width: 768px) {
    .cta-appmockup__stage--band {
      min-height: 35rem;
    }
  }
  .cta-appmockup__stage--band .device-iphone {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 17.75rem;
  }
  @media (min-width: 768px) {
    .cta-appmockup__stage--band .device-iphone {
      top: 4rem;
      max-width: 19.75rem;
    }
  }
  .cta-appmockup__stage--duo {
    position: relative;
    min-height: 22.5rem;
    overflow: hidden;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
  }
  @media (min-width: 768px) {
    .cta-appmockup__stage--duo {
      min-height: 32rem;
    }
  }
  .cta-appmockup__stage--duo .device-iphone {
    position: absolute;
    max-width: 16.75rem;
  }
  .cta-appmockup__stage--duo .device-iphone:nth-of-type(1) {
    top: 3.5rem;
    left: 47%;
    transform: translateX(-60%);
  }
  .cta-appmockup__stage--duo .device-iphone:nth-of-type(2) {
    top: 1.5rem;
    right: 47%;
    transform: translateX(60%);
  }
  @media (min-width: 768px) {
    .cta-appmockup__stage--duo .device-iphone {
      max-width: 18rem;
    }
    .cta-appmockup__stage--duo .device-iphone:nth-of-type(1) {
      top: 7rem;
    }
    .cta-appmockup__stage--duo .device-iphone:nth-of-type(2) {
      top: 3rem;
    }
  }
  .cta-appmockup-04 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--cta-brand-surface);
  }
  @media (min-width: 768px) {
    .cta-appmockup-04 {
      border-radius: var(--radius-3xl);
      box-shadow: var(--shadow-xl);
    }
  }
  @media (min-width: 1024px) {
    .cta-appmockup-04 {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      min-height: 30rem;
    }
  }
  .cta-appmockup-04__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1.5rem 3rem;
  }
  @media (min-width: 640px) {
    .cta-appmockup-04__body {
      padding: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-appmockup-04__body {
      padding: 4rem;
    }
  }
  .cta-appmockup-04 .device-iphone {
    justify-self: center;
    max-width: 16.75rem;
  }
  @media (min-width: 1024px) {
    .cta-appmockup-04 .device-iphone {
      position: absolute;
      top: 2.5rem;
      right: 4rem;
      max-width: 19.6rem;
    }
  }
  .cta-notifs {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
  }
  @media (min-width: 1024px) {
    .cta-notifs {
      display: flex;
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-3rem);
      z-index: 3;
    }
  }
  .cta-notif {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    max-width: 20rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background-color: oklch(from var(--color-white) l c h / 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .cta-notif--dim-1 {
    opacity: 0.75;
  }
  .cta-notif--dim-2 {
    opacity: 0.5;
  }
  .cta-notif__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    object-fit: cover;
    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.1);
  }
  .cta-notif__text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-neutral-600, #52525b);
  }
  .cta-notif__text strong {
    font-weight: 500;
    color: var(--color-brand-700);
  }
  .cta-notif__handle {
    font-size: 0.875rem;
    color: var(--color-neutral-600, #52525b);
  }
  .cta-screen {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 4rem;
  }
  @media (min-width: 1024px) {
    .cta-screen {
      grid-template-columns: 1fr 1fr;
    }
  }
  .cta-screen__copy {
    display: flex;
    flex-direction: column;
    max-width: 48rem;
  }
  .cta-screen__copy .cta-actions {
    width: 100%;
  }
  @media (min-width: 640px) {
    .cta-screen__copy .cta-actions {
      width: auto;
    }
  }
  .cta-screen-01__stage {
    position: relative;
    margin-inline: auto;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .cta-screen-01__stage {
      height: 32rem;
    }
  }
  .cta-screen-01__stage .screen-mockup {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 64rem;
  }
  @media (min-width: 1024px) {
    .cta-screen-01__stage .screen-mockup {
      position: absolute;
      width: max-content;
    }
  }
  .cta-screen-02__stage {
    position: relative;
    margin-inline: auto;
    min-height: 22.5rem;
  }
  @media (min-width: 768px) {
    .cta-screen-02__stage {
      min-height: 25rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-screen-02__stage {
      margin-inline: 0;
      min-height: 35.5rem;
    }
  }
  .cta-screen-02__desktop {
    width: 100%;
    max-width: 64rem;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--cta-shadow-screen);
    outline: 4px solid var(--bg-secondary);
    outline-offset: -1px;
  }
  @media (min-width: 768px) {
    .cta-screen-02__desktop {
      margin-left: 6rem;
      height: 22.5rem;
      width: auto;
      border-radius: var(--radius-xl);
    }
  }
  @media (min-width: 1024px) {
    .cta-screen-02__desktop {
      position: absolute;
      inset: 0;
      left: 6rem;
      margin-left: 0;
      height: 32rem;
    }
  }
  .cta-screen-02__phone {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 17.75rem;
  }
  @media (min-width: 768px) {
    .cta-screen-02__phone {
      top: 3rem;
      left: 0;
      transform: none;
      max-width: 11.25rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-screen-02__phone {
      top: 4.5rem;
      max-width: 15.25rem;
    }
  }
  .cta-screen-03 {
    overflow: hidden;
    padding-bottom: 0;
  }
  .cta-screen-03__head {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .cta-screen-03__head .cta-subtitle {
    margin-inline: auto;
  }
  .cta-screen-03__media {
    margin-inline: auto;
    margin-top: 4rem;
    width: 100%;
    max-width: var(--cta-max);
    padding-inline: var(--cta-gutter);
  }
  @media (min-width: 768px) {
    .cta-screen-03__media {
      max-height: 25rem;
      overflow: hidden;
      padding-inline: var(--cta-gutter-md);
    }
  }
  .cta-screen-04__card {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: var(--radius-3xl);
    background: var(--bg-secondary);
  }
  @media (min-width: 1024px) {
    .cta-screen-04__card {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  }
  .cta-screen-04__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 1.5rem 3rem;
  }
  @media (min-width: 640px) {
    .cta-screen-04__body {
      padding: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-screen-04__body {
      padding: 4rem;
    }
  }
  .cta-screen-04__stage {
    height: 13rem;
    width: 100%;
    transform: translateX(1.5rem);
  }
  @media (min-width: 640px) {
    .cta-screen-04__stage {
      height: 22.5rem;
      transform: translate(3rem, 3rem);
    }
  }
  @media (min-width: 768px) {
    .cta-screen-04__stage {
      height: 30rem;
    }
  }
  @media (min-width: 1024px) {
    .cta-screen-04__stage {
      width: auto;
    }
  }
  .cta-screen-04__stage .screen-mockup {
    width: max-content;
    max-width: 100%;
  }
  @media (min-width: 1024px) {
    .cta-screen-04__stage .screen-mockup {
      max-width: 48rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cta-carousel__slide {
      transition: none;
    }
    .cta-carousel__btn, .cta-carousel__btn svg {
      transition: none;
    }
  }
}
@layer utilities {
  .newsletter-cta {
    --nl-brand-bg: var(--color-brand-800);
    --nl-on-brand-primary: var(--color-white);
    --nl-on-brand-tertiary: var(--color-brand-200);
    --nl-on-brand-hairline: color-mix(in srgb, #fff 18%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --nl-on-brand-hairline: color-mix(in oklch, var(--color-white) 18%, transparent);
    }
    --nl-text-brand: var(--color-brand-700);
    --nl-bezel-outer: var(--utility-neutral-300);
    --nl-bezel-inner: var(--utility-neutral-200);
    --nl-screen-bg: var(--utility-neutral-50);
    display: block;
    background-color: var(--bg-primary);
    padding-block: 4rem;
  }
  @media (min-width: 768px) {
    .newsletter-cta {
      padding-block: 6rem;
    }
  }
  :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .newsletter-cta {
    --nl-brand-bg: var(--color-brand-900);
    --nl-text-brand: var(--color-brand-300);
    --nl-bezel-outer: var(--utility-neutral-700);
    --nl-bezel-inner: var(--utility-neutral-800);
    --nl-screen-bg: var(--utility-neutral-800);
  }
  .newsletter-cta--brand {
    background-color: var(--nl-brand-bg);
  }
  .newsletter-cta__container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .newsletter-cta__container {
      padding-inline: 2rem;
    }
  }
  .newsletter-cta__title {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 1.875rem;
    line-height: 2.375rem;
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .newsletter-cta__title {
      font-size: 2.25rem;
      line-height: 2.75rem;
    }
  }
  @media (min-width: 1024px) {
    .newsletter-cta__title--lg {
      font-size: 3rem;
      line-height: 3.75rem;
    }
  }
  .newsletter-cta__lead {
    margin-top: 1rem;
    color: var(--text-tertiary);
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-wrap: pretty;
  }
  @media (min-width: 768px) {
    .newsletter-cta__lead {
      margin-top: 1.25rem;
      font-size: 1.25rem;
      line-height: 1.875rem;
    }
  }
  .newsletter-cta--brand, .newsletter-cta__panel--brand {
    color: var(--nl-on-brand-primary);
  }
  :is(.newsletter-cta--brand, .newsletter-cta__panel--brand) .newsletter-cta__title {
    color: var(--nl-on-brand-primary);
  }
  :is(.newsletter-cta--brand, .newsletter-cta__panel--brand) .newsletter-cta__lead {
    color: var(--nl-on-brand-tertiary);
  }
  :is(.newsletter-cta--brand, .newsletter-cta__panel--brand) .newsletter-cta__hint {
    color: var(--nl-on-brand-tertiary);
  }
  :is(.newsletter-cta--brand, .newsletter-cta__panel--brand) .newsletter-cta__hint-link {
    color: inherit;
  }
  .newsletter-cta__body--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-inline: auto;
    max-width: 48rem;
  }
  .newsletter-cta__body--start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .newsletter-cta__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  @media (min-width: 768px) {
    .newsletter-cta__form {
      flex-direction: row;
      max-width: 30rem;
    }
  }
  .newsletter-cta__form--top {
    margin-top: 2rem;
  }
  @media (min-width: 768px) {
    .newsletter-cta__form--top-lg {
      margin-top: 3rem;
    }
  }
  .newsletter-cta__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }
  @media (min-width: 768px) {
    .newsletter-cta__field {
      max-width: 21.5625rem;
    }
  }
  .newsletter-cta__field > .form-control {
    width: 100%;
  }
  .newsletter-cta__hint {
    margin-top: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .newsletter-cta__hint-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: var(--radius-xs, 0.125rem);
  }
  .newsletter-cta__hint-link:hover {
    text-decoration-thickness: 2px;
  }
  .newsletter-cta__hint-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .newsletter-cta__form > .btn-primary, .newsletter-cta__form > .btn-secondary {
    flex: none;
  }
  .newsletter-cta__card {
    border-radius: var(--radius-2xl);
    background-color: var(--bg-secondary);
    padding: 2.5rem 1.5rem;
  }
  @media (min-width: 1024px) {
    .newsletter-cta__card {
      padding: 4rem;
    }
  }
  .newsletter-cta__card--brand {
    background-color: var(--nl-brand-bg);
  }
  .newsletter-cta__card--horizontal {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .newsletter-cta__card--horizontal {
      flex-direction: row;
      justify-content: space-between;
      gap: 4rem;
      align-items: flex-start;
    }
  }
  .newsletter-cta__card--horizontal .newsletter-cta__copy {
    max-width: 48rem;
  }
  .newsletter-cta__card--vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .newsletter-cta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .newsletter-cta__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .newsletter-cta__col-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  @media (min-width: 768px) {
    .newsletter-cta__col-copy {
      max-width: 36rem;
      padding-right: 4.5rem;
    }
  }
  .newsletter-cta__features {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0.5rem;
    list-style: none;
  }
  @media (min-width: 768px) {
    .newsletter-cta__features {
      gap: 1.25rem;
      padding-left: 1rem;
    }
  }
  .newsletter-cta__feature {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--text-tertiary);
    font-size: 1rem;
    line-height: 1.5rem;
  }
  @media (min-width: 768px) {
    .newsletter-cta__feature {
      font-size: 1.125rem;
    }
  }
  .newsletter-cta__check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 14%, transparent);
    }
    color: var(--text-brand);
  }
  .newsletter-cta__check svg {
    width: 0.9375rem;
    height: 0.8125rem;
  }
  .newsletter-cta__mockup {
    width: 100%;
    border-radius: 1rem;
    background-color: var(--bg-primary);
    padding: 0.25rem;
    box-shadow: var(--shadow-lg, 0 12px 16px -4px oklch(0% 0 0 / 0.08));
    outline: 1px solid var(--nl-bezel-outer);
    outline-offset: -1px;
  }
  @media (min-width: 768px) {
    .newsletter-cta__mockup {
      border-radius: 1.75rem;
      padding: 0.4rem;
    }
  }
  .newsletter-cta__mockup-inner {
    border-radius: 0.75rem;
    background-color: var(--bg-primary);
    padding: 0.25rem;
    box-shadow: inset 0 0 0.5px 0.5px oklch(0% 0 0 / 0.08), inset 0 -2px 4px oklch(0% 0 0 / 0.06);
  }
  @media (min-width: 768px) {
    .newsletter-cta__mockup-inner {
      border-radius: 1.5rem;
    }
  }
  .newsletter-cta__screen {
    position: relative;
    overflow: hidden;
    border-radius: 0.625rem;
    background-color: var(--nl-screen-bg);
    outline: 1px solid var(--nl-bezel-inner);
    outline-offset: -1px;
    aspect-ratio: 3 / 2;
  }
  @media (min-width: 768px) {
    .newsletter-cta__screen {
      border-radius: 1.25rem;
    }
  }
  .newsletter-cta__screen-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }
  .newsletter-cta__screen-faux {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--bg-brand-solid), transparent 40%), repeating-linear-gradient(180deg, transparent 0 22px, var(--text-primary) 22px 23px), linear-gradient(135deg, var(--nl-screen-bg), var(--bg-brand-solid));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, color-mix(in oklch, var(--bg-brand-solid) 6%, transparent), transparent 40%), repeating-linear-gradient(180deg, transparent 0 22px, color-mix(in oklch, var(--text-primary) 4%, transparent) 22px 23px), linear-gradient(135deg, var(--nl-screen-bg), color-mix(in oklch, var(--bg-brand-solid) 4%, var(--nl-screen-bg)));
    }
  }
  .newsletter-cta__screen-faux::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 26%;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
    border-right: 1px solid var(--nl-bezel-inner);
  }
  .newsletter-cta__screen-faux::after {
    content: "";
    position: absolute;
    left: 26%;
    right: 0;
    top: 0;
    height: 14%;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 3%, transparent);
    }
    border-bottom: 1px solid var(--nl-bezel-inner);
  }
  .newsletter-cta__iphone {
    position: relative;
    width: 100%;
    max-width: 17.75rem;
    aspect-ratio: 314 / 640;
    border-radius: 2.75rem;
    background: linear-gradient(160deg, #3a3a3c, #1c1c1e 55%, #2c2c2e);
    padding: 0.5rem;
    box-shadow: 0 30px 60px -20px oklch(0% 0 0 / 0.45), inset 0 0 0 1.5px #0c0c0d, inset 0 0 0 5px #48484a;
  }
  @media (min-width: 768px) {
    .newsletter-cta__iphone {
      max-width: 19.625rem;
    }
  }
  .newsletter-cta__iphone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2.25rem;
    background: linear-gradient(180deg, var(--bg-brand-solid), #0b0b0f 45%), linear-gradient(160deg, #14141b, #0b0b0f);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, color-mix(in oklch, var(--bg-brand-solid) 22%, #0b0b0f), #0b0b0f 45%), linear-gradient(160deg, #14141b, #0b0b0f);
    }
  }
  .newsletter-cta__iphone-screen > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .newsletter-cta__iphone::after {
    content: "";
    position: absolute;
    top: 1.15rem;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 1.15rem;
    border-radius: 9999px;
    background-color: #0c0c0d;
    z-index: 2;
  }
  .newsletter-cta__iphone--overlay {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    max-width: 10rem;
    z-index: 2;
  }
  @media (min-width: 768px) {
    .newsletter-cta__iphone--overlay {
      left: auto;
      right: 0;
      transform: none;
      max-width: 12rem;
    }
  }
  .newsletter-cta__blob {
    position: absolute;
    z-index: 0;
    color: var(--bg-secondary);
    pointer-events: none;
  }
  .newsletter-cta__media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .newsletter-cta__media > .newsletter-cta__iphone {
    position: relative;
    z-index: 1;
  }
  .newsletter-cta__media--duo {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  .newsletter-cta__media--duo > .newsletter-cta__iphone {
    max-width: 16.75rem;
  }
  .newsletter-cta__media--duo > .newsletter-cta__iphone:first-child {
    margin-top: 2rem;
  }
  @media (min-width: 768px) {
    .newsletter-cta__media--duo > .newsletter-cta__iphone {
      max-width: 19.625rem;
    }
  }
  .newsletter-cta__notif-stack {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
  }
  @media (min-width: 1024px) {
    .newsletter-cta__notif-stack {
      display: flex;
    }
    .newsletter-cta__media .newsletter-cta__notif-stack {
      position: absolute;
      left: 0;
      bottom: 1.5rem;
      z-index: 10;
      max-width: 20rem;
    }
  }
  .newsletter-cta__notif {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    max-width: 20rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 90%, transparent);
    }
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg, 0 8px 24px oklch(0% 0 0 / 0.12));
  }
  .newsletter-cta__notif--dim-1 {
    opacity: 0.75;
  }
  .newsletter-cta__notif--dim-2 {
    opacity: 0.5;
  }
  .newsletter-cta__notif-avatar {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full, 9999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .newsletter-cta__notif-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-tertiary);
  }
  .newsletter-cta__notif-name {
    font-weight: 500;
    color: var(--nl-text-brand);
  }
  @media (prefers-reduced-motion: reduce) {
    .newsletter-cta__hint-link {
      transition: none;
    }
  }
}
@layer utilities {
  .labs-shell {
    --labs-rail-track: var(--labs-rail-width, 16rem);
    --labs-inspector-track: var(--labs-inspector-width, 18rem);
    --labs-notes-track: 0px;
    --text-accent: var(--utility-teal-500);
    display: grid;
    grid-template-columns: var(--labs-rail-track) minmax(0, 1fr) var(--labs-inspector-track) var(--labs-notes-track);
    position: relative;
    background-color: var(--bg-labs);
    border: 1px solid var(--border-labs);
    border-radius: var(--rounded-card, 12px);
    overflow: hidden;
    min-height: 34rem;
    transition: grid-template-columns var(--transition-layout);
  }
  .labs-shell.is-rail-resizing, .labs-shell.is-inspector-resizing, .labs-shell.is-notes-resizing {
    transition: none;
  }
  .labs-shell[data-labs-rail-state="collapsed"], .labs-shell[data-labs-rail-state="overlay"] {
    --labs-rail-track: 0px;
  }
  .labs-shell[data-labs-inspector-state="collapsed"], .labs-shell[data-labs-inspector-state="overlay"] {
    --labs-inspector-track: 0px;
  }
  .labs-shell.is-notes-open {
    --labs-notes-track: var(--labs-notes-width, min(22rem, 88vw));
  }
  .labs-shell--page {
    height: 100vh;
    min-height: 600px;
    border: 0;
    border-radius: 0;
  }
  body.is-docs-fullbleed .docs-sidebar, body.is-docs-fullbleed .docs-toc {
    display: none;
  }
  body.is-docs-fullbleed .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'header' 'main';
  }
  body.is-docs-fullbleed .docs-main {
    overflow: hidden;
  }
  body.is-docs-fullbleed .docs-canvas {
    max-width: none;
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .labs-shell--fill {
    height: 100%;
    min-height: 600px;
    border: 0;
    border-radius: 0;
  }
  .labs-shell .is-hidden {
    display: none !important;
  }
  .labs-shell [hidden] {
    display: none !important;
  }
  .labs-rail {
    position: relative;
    min-height: 0;
    min-width: 0;
  }
  .labs-rail__panel {
    position: absolute;
    inset-block: 0;
    left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    width: var(--labs-rail-width, 16rem);
    background-color: var(--bg-labs-panel);
    border-right: 1px solid var(--border-labs-subtle);
    transform: translateX(0);
    opacity: 1;
    transition: transform var(--transition-panel, 220ms cubic-bezier(0.4, 0, 0.2, 1)), opacity 180ms ease, box-shadow 180ms ease;
  }
  .labs-shell[data-labs-rail-state="collapsed"] .labs-rail__panel {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }
  .labs-shell[data-labs-rail-state="overlay"] .labs-rail__panel {
    z-index: 30;
    box-shadow: var(--shadow-popover-card);
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-rail__panel {
      transition: none;
    }
  }
  .labs-rail__edge {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 0.625rem;
    z-index: 20;
    cursor: pointer;
  }
  .labs-shell[data-labs-rail-state="pinned"] .labs-rail__edge, .labs-shell[data-labs-rail-state="overlay"] .labs-rail__edge {
    display: none;
  }
  @media (max-width: 768px) {
    .labs-shell[data-labs-rail-state="pinned"] {
      --labs-rail-track: 0px;
    }
    .labs-shell[data-labs-rail-state="pinned"] .labs-rail__panel {
      z-index: 30;
      box-shadow: var(--shadow-popover-card);
    }
    .labs-shell[data-labs-rail-state="pinned"] [data-labs-rail-role="toggle"] {
      display: inline-flex;
    }
  }
  .labs-rail__resize {
    position: absolute;
    inset-block: 0;
    right: -0.1875rem;
    width: 0.375rem;
    cursor: col-resize;
    z-index: 5;
  }
  .labs-rail__resize::after {
    content: "";
    position: absolute;
    inset-block: 0;
    right: 0.125rem;
    width: 2px;
    background-color: transparent;
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-rail__resize:hover::after, .labs-rail__resize:focus-visible::after, .labs-shell.is-rail-resizing .labs-rail__resize::after {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 55%, transparent);
    }
  }
  .labs-rail__resize:focus-visible {
    outline: none;
  }
  .labs-shell:not([data-labs-rail-state="pinned"]) .labs-rail__resize {
    display: none;
  }
  .labs-rail__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    height: 2.75rem;
    border-bottom: 1px solid var(--border-labs-subtle);
    color: var(--text-labs);
  }
  .labs-rail__logo {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
  }
  .labs-rail__title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .labs-rail__actions {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .labs-rail__icon-btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-labs-muted);
    transition: background-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-rail__icon-btn:hover {
    background-color: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  [data-labs-rail-role="pin"], [data-labs-rail-role="collapse"] {
    display: none;
  }
  .labs-shell[data-labs-rail-state="overlay"] [data-labs-rail-role="pin"], .labs-shell[data-labs-rail-state="overlay"] [data-labs-rail-role="collapse"], .labs-shell[data-labs-rail-state="pinned"] [data-labs-rail-role="collapse"] {
    display: inline-flex;
  }
  .labs-shell[data-labs-rail-state="pinned"] [data-labs-rail-role="toggle"] {
    display: none;
  }
  .labs-rail__search {
    position: relative;
    flex-shrink: 0;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  .labs-rail__search > i {
    pointer-events: none;
    position: absolute;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    left: 1.45rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-labs-muted);
  }
  .labs-rail__search-field {
    width: 100%;
    border-radius: var(--radius-md);
    padding-block: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 7);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs);
  }
  .labs-rail__search-field:focus {
    outline: none;
    border-color: var(--border-input-active, var(--border-labs));
    box-shadow: var(--ring-labs-soft);
  }
  .labs-rail__home {
    flex-shrink: 0;
    padding-inline: calc(var(--spacing) * 2);
    padding-top: var(--spacing);
  }
  .labs-rail__home-link {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    text-align: left;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    height: 1.75rem;
    color: var(--text-labs);
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-rail__home-link:hover {
    background-color: var(--bg-labs-hover);
  }
  .labs-rail__home-link:focus-visible {
    outline: none;
    box-shadow: var(--ring-labs-soft);
  }
  .labs-rail__home-link.is-active {
    background-color: var(--bg-labs-active);
  }
  .labs-rail__home-link i {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    width: 1rem;
    text-align: center;
    color: var(--text-labs-muted);
  }
  .labs-rail__home-link.is-active i {
    color: var(--text-labs-accent);
  }
  .labs-rail__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }
  .labs-rail__section {
    min-height: 0;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
  }
  .labs-rail__section--apps {
    flex: 1 1 auto;
  }
  .labs-rail__section--blueprints {
    flex: 0 0 var(--labs-rail-bp-height, 11rem);
  }
  .labs-rail__divider {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 0.75rem;
    cursor: row-resize;
    color: var(--text-labs-muted);
  }
  .labs-rail__divider::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    background-color: var(--border-labs-subtle);
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-rail__divider i {
    position: relative;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    padding: 0 0.375rem;
    background-color: var(--bg-labs-panel);
  }
  .labs-rail__divider:hover::before, .labs-rail__divider:focus-visible::before, .labs-shell.is-rail-splitting .labs-rail__divider::before {
    height: 2px;
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 55%, transparent);
    }
  }
  .labs-rail__divider:focus-visible {
    outline: none;
  }
  .labs-rail__tree {
    --bg-tree-row-hover: var(--bg-labs-hover);
    --bg-tree-row-active: var(--bg-labs-active);
    --bg-tree-line: var(--border-labs);
    color: var(--text-labs);
  }
  .labs-rail__tree .tree-row {
    cursor: pointer;
  }
  .labs-rail__tree.tree--chevron details.tree-group > summary .tree-toggle::before {
    content: "";
    display: block;
    width: 0.3125rem;
    height: 0.3125rem;
    border-style: solid;
    border-width: 0 1.5px 1.5px 0;
    border-color: currentColor;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    transition: transform 150ms ease;
  }
  .labs-rail__tree.tree--chevron details.tree-group[open] > summary .tree-toggle::before {
    transform: rotate(45deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-rail__tree.tree--chevron details.tree-group > summary .tree-toggle::before {
      transition: none;
    }
  }
  .labs-rail__tree .tree-label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs);
  }
  .labs-rail__tree .tree-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1rem;
    color: var(--text-labs-muted);
  }
  .labs-rail__tree .tree-icon img {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .labs-rail__tree .tree-row.is-active .tree-icon {
    color: var(--text-labs-accent);
  }
  .labs-rail__section--apps .tree-row[data-labs-area-toggle] .tree-icon {
    color: var(--bg-sidebar-item-accent);
  }
  .labs-rail__tree .tree-badge {
    color: var(--text-labs-muted);
    background-color: var(--bg-labs-surface);
  }
  .labs-rail__tree .labs-rail__phase .tree-label {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-labs-muted);
  }
  .labs-rail__tree .tree-row.is-blueprinted .tree-icon {
    color: var(--text-info);
  }
  .labs-rail__tree .tree-row.is-starred .tree-icon {
    color: var(--text-warning);
  }
  .labs-rail__tree .tree-row.is-starred .tree-label {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .labs-rail__tree summary:focus-visible {
    outline: none;
  }
  .labs-rail__tree summary:focus-visible .tree-row {
    box-shadow: var(--ring-labs-soft);
  }
  .labs-rail__group-hint {
    padding-block: var(--spacing);
    padding-right: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    padding-left: 2rem;
    color: var(--text-labs-muted);
    opacity: 0.75;
  }
  .labs-rail__empty {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs-muted);
  }
  .labs-rail__bp {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-info);
  }
  .labs-rail__tree .labs-rail__publish {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-labs-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease), background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .labs-rail__tree .tree-row:hover .labs-rail__publish, .labs-rail__tree summary:focus-within .labs-rail__publish, .labs-rail__tree .labs-rail__publish:focus-visible {
    opacity: 1;
  }
  .labs-rail__tree .labs-rail__publish:hover {
    color: var(--text-info);
    background-color: var(--bg-labs-surface);
  }
  .labs-rail__tree .labs-rail__publish:focus-visible {
    outline: 2px solid var(--text-info);
    outline-offset: 1px;
  }
  .labs-stage {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    min-width: 0;
    flex-direction: column;
  }
  .labs-toolbar {
    display: grid;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    grid-template-columns: 1fr auto 1fr;
    height: 2.75rem;
    background-color: var(--bg-labs-panel);
    border-bottom: 1px solid var(--border-labs-subtle);
  }
  .labs-toolbar__lead {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: var(--spacing);
  }
  .labs-toolbar__crumbs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .labs-toolbar__crumb {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    white-space: nowrap;
    color: var(--text-labs-muted);
  }
  .labs-toolbar__crumb--current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 0.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
  }
  .labs-toolbar__crumb--current[contenteditable="true"] {
    background-color: var(--bg-labs-surface);
    box-shadow: var(--ring-labs-soft);
    outline: none;
    cursor: text;
    min-width: 6rem;
  }
  .labs-toolbar__crumb-sep {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
    opacity: 0.6;
  }
  .labs-toolbar__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
    justify-self: center;
  }
  .labs-toolbar__end {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
    justify-self: end;
  }
  .labs-toolbar__divider {
    margin-inline: var(--spacing);
    width: 1px;
    height: 1rem;
    background-color: var(--border-labs-subtle);
  }
  .labs-toolbar__btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-labs-muted);
    transition: background-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-toolbar__btn:hover {
    background-color: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  .labs-toolbar__btn[aria-pressed="true"], .labs-toolbar__btn[aria-expanded="true"] {
    color: var(--text-labs-accent);
  }
  .labs-toolbar__zoom {
    border-radius: var(--radius-md);
    padding-inline: var(--spacing);
    padding-block: var(--spacing);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    min-width: 3.25rem;
    color: var(--text-labs);
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-toolbar__zoom:hover {
    background-color: var(--bg-labs-hover);
  }
  .labs-toolbar__seg {
    margin-right: var(--spacing);
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 0.5);
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-toolbar__seg-btn {
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-labs-muted);
    transition: background-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-toolbar__seg-btn:hover {
    color: var(--text-labs);
  }
  .labs-toolbar__seg-btn.is-active {
    background-color: var(--bg-labs-active);
    color: var(--text-labs);
  }
  .labs-viewport {
    position: relative;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    background-color: var(--bg-labs-canvas);
    background-image: radial-gradient(circle, var(--dot-labs) 1px, transparent 1.5px);
    background-size: calc(24px * var(--labs-zoom, 1)) calc(24px * var(--labs-zoom, 1));
    background-position: var(--labs-pan-x, 0px) var(--labs-pan-y, 0px);
    touch-action: none;
    cursor: grab;
  }
  .labs-viewport:focus-visible {
    outline: none;
    box-shadow: inset var(--ring-labs-soft);
  }
  .labs-viewport.is-grid-hidden {
    background-image: none;
  }
  .labs-viewport:not(.is-panning):not(.is-pan-mode):not(.is-anno-pin-drag) .labs-frame {
    cursor: auto;
  }
  .labs-viewport.is-pan-mode {
    cursor: grab;
  }
  .labs-viewport.is-pan-mode .labs-world, .labs-viewport.is-panning .labs-world, .labs-viewport.is-selecting .labs-world {
    pointer-events: none;
  }
  .labs-viewport.is-pan-mode, .labs-viewport.is-panning, .labs-viewport.is-selecting {
    user-select: none;
  }
  .labs-viewport.is-panning {
    cursor: grabbing;
  }
  .labs-viewport.is-anno-pin-drag, .labs-viewport.is-anno-pin-drag .labs-frame {
    cursor: grabbing;
  }
  .labs-viewport.is-anno-pin-drag {
    user-select: none;
  }
  .labs-world {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    transform-origin: 0 0;
    will-change: transform;
  }
  .labs-canvas {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 6rem;
    padding: 4rem;
    width: max-content;
  }
  .labs-page {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 4rem;
    width: max-content;
  }
  .labs-page__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 2.5);
    margin-bottom: 0.5rem;
    width: max-content;
    max-width: 100%;
  }
  .labs-page__icon {
    align-self: center;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--text-labs-accent);
  }
  .labs-page__title {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--text-labs);
  }
  .labs-page__count {
    align-self: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    background-color: var(--bg-labs-surface);
    color: var(--text-labs-muted);
  }
  .labs-page__desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    max-width: 48rem;
    color: var(--text-labs-muted);
  }
  .labs-page__bp {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    align-self: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, var(--bg-labs-surface));
    }
    border: 1px solid var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-info) 40%, transparent);
    }
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-page__bp:hover {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 22%, var(--bg-labs-surface));
    }
  }
  .labs-page__bp-state {
    --labs-bp-accent: var(--text-labs-muted);
    flex-shrink: 0;
    align-self: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--labs-bp-accent);
    background-color: var(--labs-bp-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--labs-bp-accent) 12%, var(--bg-labs-surface));
    }
    border: 1px solid var(--labs-bp-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--labs-bp-accent) 36%, transparent);
    }
  }
  .labs-page__bp-state--in-build {
    --labs-bp-accent: var(--text-info);
  }
  .labs-page__bp-state--built {
    --labs-bp-accent: var(--text-success);
  }
  .labs-page__bp-state--blocked {
    --labs-bp-accent: var(--text-danger);
  }
  .labs-page__bp-state--on-hold {
    --labs-bp-accent: var(--text-warning);
  }
  .labs-page__bp-state--superseded {
    text-decoration: line-through;
  }
  .labs-page__bp-progress {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    align-self: center;
  }
  .labs-page__bp-progress-track {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-full);
    width: 6rem;
    height: 0.375rem;
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-page__bp-progress-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(to right, var(--text-success), var(--text-success));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to right, color-mix(in oklch, var(--text-success) 70%, transparent), var(--text-success));
    }
    transition: width var(--duration-normal, 200ms) ease;
  }
  .labs-page__bp-progress-count {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-labs-muted);
  }
  .labs-page__bp-tokens {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    align-self: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-labs-muted);
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-section__label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    margin-bottom: 3.75rem;
    width: max-content;
    max-width: 100%;
    cursor: grab;
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-section__heading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 1.5);
  }
  .labs-section__label:hover {
    background-color: var(--bg-labs-hover);
  }
  .labs-section__label.is-dragging {
    cursor: grabbing;
    background-color: var(--bg-labs-active);
    box-shadow: var(--ring-labs-soft);
  }
  .labs-section__grip {
    align-self: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 0%;
    color: var(--text-labs-muted);
    transition: opacity var(--duration-fast, 120ms) ease;
  }
  .labs-section__label:hover .labs-section__grip, .labs-section__label.is-dragging .labs-section__grip {
    opacity: 100%;
  }
  .labs-section__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--text-labs);
  }
  .labs-section__desc {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs-muted);
    max-width: 30rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .labs-section__progress {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-labs-muted);
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-section__progress.is-complete {
    color: var(--text-success);
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 10%, var(--bg-labs-surface));
    }
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 36%, transparent);
    }
  }
  .labs-section__label.is-hidden-section {
    display: none;
  }
  .labs-section__label.is-marked-del {
    box-shadow: 0 0 0 1px var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--text-danger) 50%, transparent);
    }
  }
  .labs-section__label.is-marked-del .labs-section__title {
    color: var(--text-danger);
    text-decoration: line-through;
  }
  .labs-section__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: 3rem;
    width: max-content;
  }
  .labs-frame-stack {
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
  }
  .labs-frame-stack__children {
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
    margin-left: 2.5rem;
  }
  .labs-frame {
    position: relative;
    flex-shrink: 0;
  }
  .labs-frame__chrome {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    white-space: nowrap;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.375rem;
    transform: scale(calc(1 / max(var(--labs-zoom, 1), 0.5)));
    transform-origin: bottom left;
    cursor: grab;
  }
  .labs-frame.is-dragging .labs-frame__chrome {
    cursor: grabbing;
  }
  .labs-frame__chrome-end {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    white-space: nowrap;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.375rem;
    transform: scale(calc(1 / max(var(--labs-zoom, 1), 0.5)));
    transform-origin: bottom right;
    cursor: grab;
  }
  .labs-frame.is-dragging .labs-frame__chrome-end {
    cursor: grabbing;
  }
  .labs-frame--device .labs-frame__chrome-end {
    bottom: calc(100% + 1.65rem);
  }
  .labs-frame__grip {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 0%;
    color: var(--text-labs-muted);
    transition: opacity var(--duration-fast, 120ms) ease;
  }
  .labs-frame__name {
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-labs-muted);
    transition: color var(--duration-fast, 120ms) ease;
  }
  .labs-frame__name:hover {
    color: var(--text-labs-accent);
  }
  .labs-frame--device .labs-frame__name {
    min-width: 0;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .labs-frame__name[contenteditable="true"] {
    max-width: none;
    overflow: visible;
    background-color: var(--bg-labs-panel);
    color: var(--text-labs);
    box-shadow: var(--ring-labs-soft);
    outline: none;
    cursor: text;
    min-width: 3rem;
  }
  .labs-frame.is-selected .labs-frame__name {
    color: var(--text-labs-accent);
  }
  .labs-frame__controls {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    opacity: 0%;
    transition: opacity var(--duration-fast, 120ms) ease;
    cursor: default;
  }
  .labs-frame:hover .labs-frame__grip, .labs-frame.is-selected .labs-frame__grip, .labs-frame:hover .labs-frame__controls, .labs-frame.is-selected .labs-frame__controls, .labs-frame__chrome:focus-within .labs-frame__controls {
    opacity: 100%;
  }
  .labs-chrome__select {
    border-radius: var(--radius-sm);
    padding-block: 0;
    padding-right: calc(var(--spacing) * 5);
    padding-left: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    height: 1.375rem;
    max-width: 10.5rem;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs-muted);
    cursor: pointer;
  }
  .labs-chrome__select:hover {
    color: var(--text-labs);
  }
  .labs-frame__theme {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1.375rem;
    height: 1.375rem;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs-muted);
    transition: color var(--duration-fast, 120ms) ease;
  }
  .labs-frame__theme:hover {
    color: var(--text-labs);
  }
  .labs-frame__theme[data-labs-theme-state="theme-light"], .labs-frame__theme[data-labs-theme-state="theme-dark"] {
    color: var(--text-labs-accent);
  }
  .labs-frame__star {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 0%;
    width: 1.375rem;
    height: 1.375rem;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs-muted);
    transition: color var(--duration-fast, 120ms) ease, opacity var(--duration-fast, 120ms) ease;
  }
  .labs-frame:hover .labs-frame__star, .labs-frame.is-selected .labs-frame__star, .labs-frame__chrome-end:focus-within .labs-frame__star {
    opacity: 100%;
  }
  .labs-frame__star:hover {
    color: var(--text-warning);
  }
  .labs-frame.is-starred .labs-frame__star {
    opacity: 100%;
    color: var(--text-warning);
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 12%, var(--bg-labs-panel));
    }
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 45%, transparent);
    }
  }
  .labs-frame__bpmark {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    opacity: 0%;
    width: 1.375rem;
    height: 1.375rem;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs-muted);
    transition: color var(--duration-fast, 120ms) ease, opacity var(--duration-fast, 120ms) ease;
  }
  .labs-frame:hover .labs-frame__bpmark, .labs-frame.is-selected .labs-frame__bpmark, .labs-frame__chrome-end:focus-within .labs-frame__bpmark {
    opacity: 100%;
  }
  .labs-frame__bpmark:hover {
    color: var(--text-info);
  }
  .labs-frame.is-bp-candidate .labs-frame__bpmark {
    opacity: 100%;
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, var(--bg-labs-panel));
    }
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 45%, transparent);
    }
  }
  .labs-frame.is-bp-candidate .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), 0 0 0 2px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-labs-frame), 0 0 0 2px color-mix(in oklch, var(--text-info) 32%, transparent);
    }
  }
  .labs-frame.is-bp-candidate.is-selected .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), 0 0 0 2px var(--text-info), var(--ring-labs);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-labs-frame), 0 0 0 2px color-mix(in oklch, var(--text-info) 32%, transparent), var(--ring-labs);
    }
  }
  .labs-frame__bp {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1.375rem;
    height: 1.375rem;
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, var(--bg-labs-panel));
    }
    border: 1px solid var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-info) 40%, transparent);
    }
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-frame__bp:hover {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 22%, var(--bg-labs-panel));
    }
  }
  .labs-frame__lock {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1.375rem;
    height: 1.375rem;
    color: var(--text-labs-muted);
  }
  .labs-frame.is-starred .labs-frame__name {
    color: var(--text-labs);
  }
  .labs-frame.is-blueprinted .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), 0 0 0 2px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-labs-frame), 0 0 0 2px color-mix(in oklch, var(--text-info) 55%, transparent);
    }
  }
  .labs-frame.is-blueprinted.is-selected .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), 0 0 0 2px var(--text-info), var(--ring-labs);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-labs-frame), 0 0 0 2px color-mix(in oklch, var(--text-info) 55%, transparent), var(--ring-labs);
    }
  }
  .labs-frame.is-starred .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), 0 0 0 2px var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-labs-frame), 0 0 0 2px color-mix(in oklch, var(--text-warning) 55%, transparent);
    }
  }
  .labs-frame.is-starred.is-selected .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), 0 0 0 2px var(--text-warning), var(--ring-labs);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-labs-frame), 0 0 0 2px color-mix(in oklch, var(--text-warning) 55%, transparent), var(--ring-labs);
    }
  }
  .labs-frame__body {
    width: 100%;
    overflow: hidden;
    background-color: var(--bg-labs-frame);
    border-radius: 0.375rem;
    box-shadow: var(--shadow-labs-frame);
  }
  .labs-frame__body--viewport {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    content-visibility: auto;
  }
  .labs-frame--no-clip .labs-frame__body {
    overflow: visible;
  }
  .labs-frame.is-selected .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), var(--ring-labs);
  }
  .labs-frame.is-dragging, .labs-frame.is-resizing {
    z-index: 10;
  }
  .labs-frame.is-dragging .labs-frame__body, .labs-frame.is-resizing .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), var(--ring-labs);
  }
  .labs-frame.is-hidden-frame {
    display: none;
  }
  .labs-frame__handle {
    position: absolute;
    opacity: 0%;
    width: calc(0.625rem / max(var(--labs-zoom, 1), 0.5));
    height: calc(0.625rem / max(var(--labs-zoom, 1), 0.5));
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--text-labs-accent);
    border-radius: 2px;
    transition: opacity var(--duration-fast, 120ms) ease;
    z-index: 5;
  }
  .labs-frame:hover .labs-frame__handle, .labs-frame.is-selected .labs-frame__handle, .labs-frame.is-resizing .labs-frame__handle {
    opacity: 100%;
  }
  .labs-frame__handle--nw {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    cursor: nwse-resize;
  }
  .labs-frame__handle--ne {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    cursor: nesw-resize;
  }
  .labs-frame__handle--sw {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    cursor: nesw-resize;
  }
  .labs-frame__handle--se {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
    cursor: nwse-resize;
  }
  .labs-frame__handle--e {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    cursor: ew-resize;
    border-radius: 999px;
  }
  .labs-frame__handle--s {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    cursor: ns-resize;
    border-radius: 999px;
  }
  .labs-empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    min-width: 24rem;
    min-height: 12rem;
    color: var(--text-labs-muted);
  }
  .labs-empty i {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  .labs-empty p {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .labs-proto-tray {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 12;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-default);
    box-shadow: var(--shadow-mobile-sheet);
    transform: translateY(102%);
    visibility: hidden;
    transition: transform var(--transition-panel, 200ms ease), visibility 0s linear var(--transition-panel, 200ms);
  }
  .labs-proto-tray.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--transition-panel, 200ms ease);
  }
  .labs-proto-tray--right {
    inset-block: 0;
    right: 0;
    left: auto;
    border-top: 0;
    border-left: 1px solid var(--border-default);
    box-shadow: -8px 0 28px var(--alpha-black-20);
    transform: translateX(102%);
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .labs-proto-tray--right {
    box-shadow: -10px 0 32px var(--alpha-black-50);
  }
  .labs-proto-tray--right.is-open {
    transform: translateX(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-proto-tray {
      transition: none;
    }
  }
  .labs-frame.is-reloading {
    outline: 2px solid var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 2px solid color-mix(in oklch, var(--text-info) 55%, transparent);
    }
    outline-offset: -1px;
  }
  .labs-frame__reload {
    position: absolute;
    inset: 0;
    z-index: 14;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-card) 30%, transparent);
    }
  }
  .labs-frame__reload::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(100deg, transparent 35%, var(--text-info) 50%, transparent 65%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(100deg, transparent 35%, color-mix(in oklch, var(--text-info) 16%, transparent) 50%, transparent 65%);
    }
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: labs-reload-shimmer 1.1s ease-in-out infinite;
  }
  .labs-frame__reload-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    z-index: 1;
    padding: 0.375rem 0.75rem;
    color: var(--text-info);
    background-color: var(--bg-card);
    border: 1px solid var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-info) 35%, transparent);
    }
    box-shadow: var(--shadow-card);
  }
  .labs-frame__reload-spin {
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in oklch, var(--text-info) 25%, transparent);
    }
    border-top-color: var(--text-info);
    animation: labs-reload-spin 0.7s linear infinite;
  }
  @keyframes labs-reload-shimmer {
    from {
      background-position: 140% 0;
    }
    to {
      background-position: -40% 0;
    }
  }
  @keyframes labs-reload-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-frame__reload::after, .labs-frame__reload-spin {
      animation: none;
    }
  }
  .labs-frame.is-new-frame {
    outline: 2px solid var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 2px solid color-mix(in oklch, var(--text-success) 55%, transparent);
    }
    outline-offset: -1px;
  }
  .labs-frame__reload--new::after {
    background-image: linear-gradient(100deg, transparent 35%, var(--text-success) 50%, transparent 65%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(100deg, transparent 35%, color-mix(in oklch, var(--text-success) 18%, transparent) 50%, transparent 65%);
    }
  }
  .labs-frame__reload--new .labs-frame__reload-card {
    color: var(--text-success);
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 35%, transparent);
    }
  }
  .labs-frame.is-recently-updated {
    outline: 2px solid var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 2px solid color-mix(in oklch, var(--text-info) 42%, transparent);
    }
    outline-offset: -1px;
  }
  .labs-frame.is-recently-updated.is-recently-new {
    outline-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      outline-color: color-mix(in oklch, var(--text-success) 42%, transparent);
    }
  }
  .labs-frame__updated-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 16;
    padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
    font-size: 0.6875rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text-info);
    background-color: var(--bg-card);
    border: 1px solid var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-info) 38%, transparent);
    }
    box-shadow: var(--shadow-card);
    animation: labs-updated-pulse 2.4s ease-in-out infinite;
    transition: transform var(--duration-fast, 100ms) var(--ease-out, ease-out), filter var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .labs-frame__updated-pin > i {
    font-size: 0.75rem;
  }
  .labs-frame__updated-pin:hover {
    transform: scale(1.04);
    filter: brightness(1.03);
  }
  .labs-frame__updated-pin:focus-visible {
    outline: 2px solid var(--text-info);
    outline-offset: 1px;
  }
  .labs-frame.is-recently-new .labs-frame__updated-pin {
    color: var(--text-success);
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 38%, transparent);
    }
    animation-name: labs-updated-pulse-new;
  }
  @keyframes labs-updated-pulse {
    0% {
      box-shadow: var(--shadow-card), 0 0 0 0 color-mix(in oklch, var(--text-info) 30%, transparent);
    }
    70% {
      box-shadow: var(--shadow-card), 0 0 0 6px color-mix(in oklch, var(--text-info) 0%, transparent);
    }
    100% {
      box-shadow: var(--shadow-card), 0 0 0 0 color-mix(in oklch, var(--text-info) 0%, transparent);
    }
  }
  @keyframes labs-updated-pulse-new {
    0% {
      box-shadow: var(--shadow-card), 0 0 0 0 color-mix(in oklch, var(--text-success) 30%, transparent);
    }
    70% {
      box-shadow: var(--shadow-card), 0 0 0 6px color-mix(in oklch, var(--text-success) 0%, transparent);
    }
    100% {
      box-shadow: var(--shadow-card), 0 0 0 0 color-mix(in oklch, var(--text-success) 0%, transparent);
    }
  }
  .labs-update-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .labs-update-link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding: 0.3125rem 0.5rem;
    text-align: left;
    cursor: pointer;
    color: inherit;
    background-color: transparent;
    border: 0;
    font-size: 0.75rem;
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .labs-update-link:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 8%, transparent);
    }
  }
  .labs-update-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -1px;
  }
  .labs-update-link__icon {
    flex-shrink: 0;
    opacity: 0.75;
  }
  .labs-update-link__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labs-update-link__go {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.6875rem;
    opacity: 0.8;
  }
  .labs-minimap__frame.is-updated {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 55%, transparent);
    }
    box-shadow: 0 0 0 1.5px var(--text-info);
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-frame__updated-pin {
      animation: none;
    }
  }
  .labs-flow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .labs-viewport.is-flow-hidden .labs-flow {
    display: none;
  }
  .labs-flow__edge {
    fill: none;
    stroke-width: 2;
  }
  .labs-flow__edge--flow {
    stroke: var(--text-labs);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in oklch, var(--text-labs) 42%, transparent);
    }
  }
  .labs-flow__edge--decision {
    stroke: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in oklch, var(--text-info) 55%, transparent);
    }
  }
  .labs-flow__edge--system {
    stroke: var(--text-labs-muted);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in oklch, var(--text-labs-muted) 60%, transparent);
    }
    stroke-dasharray: 2 5;
    stroke-linecap: round;
  }
  .labs-flow__edge--gap {
    stroke: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in oklch, var(--text-warning) 65%, transparent);
    }
    stroke-dasharray: 7 5;
  }
  .labs-flow__head {
    stroke: none;
  }
  .labs-flow__head--flow {
    fill: var(--text-labs);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--text-labs) 42%, transparent);
    }
  }
  .labs-flow__head--decision {
    fill: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--text-info) 55%, transparent);
    }
  }
  .labs-flow__head--system {
    fill: var(--text-labs-muted);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--text-labs-muted) 60%, transparent);
    }
  }
  .labs-flow__head--gap {
    fill: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--text-warning) 65%, transparent);
    }
  }
  .labs-flow__label text {
    font-size: 0.6875rem;
    font-weight: 500;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: var(--text-labs-muted);
  }
  .labs-flow__label rect {
    fill: var(--bg-labs-panel);
    stroke: var(--border-labs);
    stroke-width: 1;
  }
  .labs-flow__label--decision text {
    fill: var(--text-info);
  }
  .labs-flow__label--decision rect {
    stroke: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in oklch, var(--text-info) 35%, transparent);
    }
  }
  .labs-flow__label--system text {
    font-style: italic;
  }
  .labs-flow__label--gap text {
    fill: var(--text-warning);
  }
  .labs-flow__label--gap rect {
    fill: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--text-warning) 8%, var(--bg-labs-panel));
    }
    stroke: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      stroke: color-mix(in oklch, var(--text-warning) 45%, transparent);
    }
  }
  .labs-frame--note .labs-frame__body {
    background-color: transparent;
    box-shadow: none;
  }
  .labs-frame--note.is-selected .labs-frame__body, .labs-frame--note.is-dragging .labs-frame__body {
    box-shadow: var(--ring-labs);
  }
  .labs-note {
    --labs-note-accent: var(--text-secondary);
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    overflow: hidden;
    border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-labs);
    box-shadow: var(--shadow-card);
  }
  .labs-note__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--labs-note-accent);
  }
  .labs-note__header i {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-labs-muted);
    background-color: var(--bg-labs-surface);
  }
  .labs-note__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
  }
  .labs-note__text {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    white-space: pre-line;
    color: var(--text-labs-muted);
    line-height: 1.55;
  }
  .labs-note--insight {
    --labs-note-accent: var(--text-info);
  }
  .labs-note--gap {
    --labs-note-accent: var(--text-warning);
  }
  .labs-note--risk {
    --labs-note-accent: var(--text-danger);
  }
  .labs-frame--step .labs-frame__body {
    background-color: transparent;
    box-shadow: none;
  }
  .labs-step {
    --labs-step-accent: var(--text-secondary);
    --labs-step-bg: var(--text-labs-muted);
    @supports (color: color-mix(in lab, red, red)) {
      --labs-step-bg: color-mix(in oklch, var(--text-labs-muted) 3%, var(--bg-card));
    }
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    overflow: hidden;
    border-radius: var(--radius-md);
    padding: 0.875rem 0.875rem 0.875rem 1.125rem;
    background-color: var(--labs-step-bg);
    border: 1px solid var(--labs-step-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--labs-step-accent) 26%, var(--border-labs));
    }
    box-shadow: 0 4px 12px -4px var(--text-primary), 0 2px 4px -2px var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 4px 12px -4px color-mix(in oklch, var(--text-primary) 14%, transparent), 0 2px 4px -2px color-mix(in oklch, var(--text-primary) 8%, transparent);
    }
  }
  .labs-step::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--labs-step-accent), var(--labs-step-accent));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, var(--labs-step-accent), color-mix(in oklch, var(--labs-step-accent) 30%, transparent));
    }
  }
  .labs-step__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--labs-step-accent);
  }
  .labs-step__header i {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--labs-step-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--labs-step-accent) 12%, transparent);
    }
  }
  .labs-step__status {
    margin-left: auto;
    border-radius: var(--radius-full);
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    padding: 0.125rem 0.5rem;
    background-color: var(--labs-step-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--labs-step-accent) 12%, transparent);
    }
  }
  .labs-step__tokens {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    padding: 0.125rem 0.5rem;
    color: var(--text-labs-muted);
    background-color: var(--bg-labs-surface);
  }
  .labs-step__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
  }
  .labs-step__text {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    white-space: pre-line;
    color: var(--text-labs-muted);
    line-height: 1.55;
  }
  .labs-step__prompt {
    margin-top: var(--spacing);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    align-self: flex-start;
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0.25rem 0.625rem;
    color: var(--labs-step-accent);
    background-color: var(--labs-step-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--labs-step-accent) 10%, transparent);
    }
    border: 1px solid var(--labs-step-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--labs-step-accent) 30%, transparent);
    }
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-step__prompt:hover {
    background-color: var(--labs-step-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--labs-step-accent) 18%, transparent);
    }
  }
  .labs-step__prompt.is-copied {
    color: var(--text-success);
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 40%, transparent);
    }
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 10%, transparent);
    }
  }
  .labs-step--in-progress {
    --labs-step-accent: var(--text-info);
    --labs-step-bg: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      --labs-step-bg: color-mix(in oklch, var(--text-info) 4%, var(--bg-card));
    }
  }
  .labs-step--done {
    --labs-step-accent: var(--text-success);
    --labs-step-bg: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      --labs-step-bg: color-mix(in oklch, var(--text-success) 4%, var(--bg-card));
    }
  }
  .labs-step--done .labs-step__title, .labs-step--done .labs-step__text {
    opacity: 0.65;
  }
  .labs-step--blocked {
    --labs-step-accent: var(--text-danger);
    --labs-step-bg: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --labs-step-bg: color-mix(in oklch, var(--text-danger) 4%, var(--bg-card));
    }
  }
  .labs-inspector__prompt {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: var(--spacing);
  }
  .labs-inspector__prompt code {
    flex: 1;
    border-radius: var(--radius-sm);
    padding: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-height: 14rem;
    overflow-y: auto;
    background-color: var(--bg-labs-surface);
    color: var(--text-labs);
  }
  .labs-frame--decision .labs-frame__body {
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .labs-frame--decision.is-selected .labs-frame__body, .labs-frame--decision.is-dragging .labs-frame__body {
    box-shadow: var(--ring-labs);
  }
  .labs-decision {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    min-height: 7rem;
    filter: drop-shadow(0 4px 10px var(--text-info)) drop-shadow(0 1px 3px var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 4px 10px color-mix(in oklch, var(--text-info) 22%, transparent)) drop-shadow(0 1px 3px color-mix(in oklch, var(--text-primary) 12%, transparent));
    }
    transition: filter var(--duration-fast, 120ms) ease;
  }
  .labs-frame--decision:hover .labs-decision, .labs-frame--decision.is-selected .labs-decision {
    filter: drop-shadow(0 6px 14px var(--text-info)) drop-shadow(0 1px 3px var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 6px 14px color-mix(in oklch, var(--text-info) 30%, transparent)) drop-shadow(0 1px 3px color-mix(in oklch, var(--text-primary) 12%, transparent));
    }
  }
  .labs-decision::before, .labs-decision::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }
  .labs-decision::before {
    background: linear-gradient(160deg, var(--text-info), var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(160deg, color-mix(in oklch, var(--text-info) 62%, var(--border-labs)), color-mix(in oklch, var(--text-info) 28%, var(--border-labs)));
    }
  }
  .labs-decision::after {
    inset: 1px;
    background: linear-gradient(160deg, var(--text-info), var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(160deg, color-mix(in oklch, var(--text-info) 11%, var(--bg-card)), color-mix(in oklch, var(--text-info) 3%, var(--bg-card)));
    }
  }
  .labs-decision__icon {
    position: relative;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    z-index: 1;
    margin-bottom: 0.25rem;
    color: var(--text-info);
  }
  .labs-decision__text {
    position: relative;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    z-index: 1;
    max-width: 62%;
    color: var(--text-labs);
  }
  .labs-marquee {
    pointer-events: none;
    position: absolute;
    border: 1px solid var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-info) 70%, transparent);
    }
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 10%, transparent);
    }
    border-radius: 2px;
    z-index: 15;
  }
  .labs-canvas-empty {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--text-labs-muted);
  }
  .labs-canvas-empty img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
  }
  .labs-canvas-empty p {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    max-width: 32rem;
  }
  .labs-canvas-loading {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    text-align: center;
    background-color: var(--bg-labs-canvas);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-labs-canvas) 55%, transparent);
    }
    color: var(--text-labs-muted);
    z-index: 12;
  }
  .labs-canvas-loading__ring {
    animation: var(--animate-spin);
    border-radius: var(--radius-full);
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--border-labs);
    border-top-color: var(--text-labs-accent);
  }
  .labs-canvas-loading p {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .labs-canvas-error {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    min-width: 24rem;
    min-height: 12rem;
    color: var(--text-labs-muted);
  }
  .labs-canvas-error i {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    color: var(--text-warning);
  }
  .labs-canvas-error p {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .labs-canvas-error__detail {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem !important;
    line-height: var(--tw-leading, 1rem) !important;
    letter-spacing: var(--tw-tracking, 0.01em) !important;
    color: var(--text-labs-muted);
  }
  .labs-canvas-error__retry {
    margin-top: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs);
    color: var(--text-labs);
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-canvas-error__retry:hover {
    background-color: var(--bg-labs-hover);
  }
  .labs-home {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-labs-canvas);
  }
  .labs-home__inner {
    margin-inline: auto;
    width: 100%;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    max-width: 64rem;
  }
  .labs-home__hero {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .labs-home__hero > img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
  }
  .labs-home__intro {
    min-width: 0;
  }
  .labs-home__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
  }
  .labs-home__tagline {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs-muted);
  }
  .labs-home__stats {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .labs-home__stat {
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    white-space: nowrap;
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs-muted);
  }
  .labs-home__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.875rem;
  }
  .labs-home__card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    border-radius: var(--radius-lg);
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs-subtle);
    cursor: pointer;
    transition: border-color var(--duration-fast, 120ms) ease, box-shadow var(--duration-fast, 120ms) ease, transform var(--duration-fast, 120ms) ease;
  }
  .labs-home__card:hover:not(.is-empty) {
    border-color: var(--text-labs-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-labs-accent) 45%, var(--border-labs-subtle));
    }
    box-shadow: var(--shadow-labs-frame);
    transform: translateY(-1px);
  }
  .labs-home__card.is-empty {
    cursor: default;
    background-color: transparent;
    border-style: dashed;
  }
  .labs-home__card-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 2);
    text-align: left;
  }
  .labs-home__card-head:focus-visible {
    outline: none;
    box-shadow: inset var(--ring-labs-soft);
  }
  .labs-home__card-icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 2rem;
    height: 2rem;
    background-color: var(--bg-labs-surface);
    color: var(--text-labs-accent);
  }
  .labs-home__card-icon img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
  }
  .labs-home__card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
  }
  .labs-home__card-meta {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    white-space: nowrap;
    color: var(--text-labs-muted);
  }
  .labs-home__card-arrow {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 0%;
    color: var(--text-labs-accent);
    transition: opacity var(--duration-fast, 120ms) ease;
  }
  .labs-home__card:hover .labs-home__card-arrow {
    opacity: 1;
  }
  .labs-home__card-pages {
    margin-top: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .labs-home__card-page {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    text-align: left;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    height: 1.625rem;
    color: var(--text-labs-muted);
    transition: background-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-home__card-page:hover {
    background-color: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  .labs-home__card-page:focus-visible {
    outline: none;
    box-shadow: var(--ring-labs-soft);
  }
  .labs-home__card-page i {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1rem;
    text-align: center;
  }
  .labs-home__card-page-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labs-home__card-page-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .labs-home__card-more, .labs-home__card-hint {
    padding-inline: calc(var(--spacing) * 2);
    padding-top: var(--spacing);
    padding-bottom: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
  }
  .labs-home__card-hint {
    padding-inline: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .labs-home__tabs {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--border-labs-subtle);
  }
  .labs-home__tab {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 0.5);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-labs-muted);
    transition: color var(--duration-fast, 120ms) ease, border-color var(--duration-fast, 120ms) ease;
  }
  .labs-home__tab:hover {
    color: var(--text-labs);
  }
  .labs-home__tab.is-active {
    color: var(--text-labs);
    border-bottom-color: var(--text-labs-accent);
  }
  .labs-home__tab i {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .labs-home__pane[hidden] {
    display: none;
  }
  .labs-home__empty {
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 8);
    text-align: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-labs-muted);
    background-color: var(--bg-labs-surface);
    border: 1px dashed var(--border-labs);
  }
  .labs-home__card-foot {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 3);
    padding-bottom: var(--spacing);
  }
  .labs-home__card-progress {
    display: inline-flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .labs-home__card-progress-track {
    display: block;
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-full);
    height: 0.375rem;
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-home__card-progress-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(to right, var(--text-success), var(--text-success));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to right, color-mix(in oklch, var(--text-success) 70%, transparent), var(--text-success));
    }
    transition: width var(--duration-normal, 200ms) ease;
  }
  .labs-home__card-progress-count, .labs-home__card-tokens {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-labs-muted);
  }
  .labs-roadmap__board {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 900px) {
    .labs-roadmap__board {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .labs-roadmap__lane {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 2);
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-roadmap__lane-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: var(--spacing);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-labs-muted);
  }
  .labs-roadmap__lane-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labs-roadmap__lane-count {
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    background-color: var(--bg-labs-panel);
    color: var(--text-labs-muted);
  }
  .labs-roadmap__lane-empty {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
    opacity: 0.7;
  }
  .labs-roadmap__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2.5);
    text-align: left;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs-subtle);
    transition: border-color var(--duration-fast, 120ms) ease, background-color var(--duration-fast, 120ms) ease;
  }
  .labs-roadmap__item:hover {
    background-color: var(--bg-labs-hover);
    border-color: var(--border-labs);
  }
  .labs-roadmap__item-area {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-labs-accent);
  }
  .labs-roadmap__item-title {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-labs);
  }
  .labs-roadmap__item-progress {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .labs-roadmap__item-progress-track {
    display: block;
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-full);
    height: 0.3125rem;
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-roadmap__item-progress-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(to right, var(--text-success), var(--text-success));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to right, color-mix(in oklch, var(--text-success) 70%, transparent), var(--text-success));
    }
  }
  .labs-roadmap__item-progress-count {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-labs-muted);
  }
  .labs-roadmap__item-meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
  }
  .labs-roadmap__item-tokens {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .labs-home__bp-grid {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
  .labs-home__bp-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 3.5);
    text-align: left;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs-subtle);
    transition: border-color var(--duration-fast, 120ms) ease, background-color var(--duration-fast, 120ms) ease;
  }
  .labs-home__bp-card:hover {
    border-color: var(--border-labs);
    background-color: var(--bg-labs-hover);
  }
  .labs-home__bp-card-top {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .labs-home__bp-card-top > i {
    color: var(--text-labs-accent);
  }
  .labs-home__bp-card-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
  }
  .labs-home__bp-card-phases {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing);
  }
  .labs-home__bp-phase {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-labs-muted);
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-home__bp-phase.is-complete {
    color: var(--text-success);
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 10%, var(--bg-labs-surface));
    }
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 36%, transparent);
    }
  }
  .labs-home__bp-card-meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
  }
  .labs-shell.is-home .labs-toolbar__actions {
    opacity: 0.45;
    pointer-events: none;
  }
  .labs-shell.is-home .labs-toolbar__crumbs .labs-toolbar__crumb-sep:last-of-type, .labs-shell.is-home .labs-toolbar__crumb--current {
    display: none;
  }
  .labs-hint {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-labs-panel);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-labs-panel) 88%, transparent);
    }
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs-muted);
  }
  .labs-hint__close {
    margin-left: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-labs-muted);
  }
  .labs-hint__close:hover {
    background-color: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  .labs-minimap {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 236px;
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background-color: var(--bg-labs-panel);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-labs-panel) 86%, transparent);
    }
    backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid var(--border-labs-subtle);
    box-shadow: var(--shadow-popover-card, var(--shadow-lg, var(--shadow-card)));
    z-index: 6;
    overflow: hidden;
    user-select: none;
    transition: width var(--duration-base, 180ms) ease, box-shadow var(--duration-base, 180ms) ease;
  }
  .labs-viewport.is-minimap-hidden .labs-minimap, .labs-minimap.is-empty {
    display: none;
  }
  .labs-minimap__bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    height: 1.75rem;
    padding: 0 0.25rem 0 0.5rem;
    font-size: 0.6875rem;
    border-bottom: 1px solid var(--border-labs-subtle);
  }
  .labs-minimap.is-collapsed .labs-minimap__bar {
    border-bottom: 0;
    cursor: pointer;
  }
  .labs-minimap__label {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    color: var(--text-labs);
  }
  .labs-minimap__label i {
    font-size: 0.75rem;
    color: var(--text-labs-muted);
  }
  .labs-minimap__meta {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-labs-muted);
  }
  .labs-minimap__collapse {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-labs-muted);
    transition: background-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-minimap__collapse:hover {
    background-color: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  .labs-minimap__surface {
    position: relative;
    width: 100%;
    height: 152px;
    background-color: var(--bg-labs-surface);
    background-image: radial-gradient(circle, var(--text-primary) 1px, transparent 1.2px);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(circle, color-mix(in oklch, var(--text-primary) 7%, transparent) 1px, transparent 1.2px);
    }
    background-size: 14px 14px;
    background-position: center;
    cursor: crosshair;
    overflow: hidden;
    touch-action: none;
    transition: height var(--duration-base, 180ms) ease;
  }
  .labs-minimap.is-collapsed {
    width: 168px;
  }
  .labs-minimap.is-collapsed .labs-minimap__surface {
    height: 0;
  }
  .labs-minimap.is-dragging .labs-minimap__surface {
    cursor: grabbing;
  }
  .labs-minimap__frames {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .labs-minimap__frame {
    position: absolute;
    border-radius: 2px;
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-primary) 13%, transparent);
    }
    border: 1px solid var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-primary) 22%, transparent);
    }
    transition: background-color var(--duration-fast, 120ms) ease, border-color var(--duration-fast, 120ms) ease, box-shadow var(--duration-fast, 120ms) ease;
  }
  .labs-minimap__frame.is-selected {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 42%, transparent);
    }
    border-color: var(--text-info);
  }
  .labs-minimap__frame.is-primary {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 64%, transparent);
    }
    border-color: var(--text-info);
    box-shadow: 0 0 0 1.5px var(--text-info), 0 1px 4px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--text-info) 45%, transparent), 0 1px 4px color-mix(in oklch, var(--text-info) 35%, transparent);
    }
    z-index: 3;
  }
  .labs-minimap__frame.is-starred {
    border-color: var(--text-warning);
    box-shadow: 0 0 0 1.5px var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--text-warning) 80%, transparent);
    }
    z-index: 2;
  }
  .labs-minimap__view {
    position: absolute;
    border: 1.5px solid var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 10%, transparent);
    }
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--bg-labs-panel), 0 1px 6px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--bg-labs-panel) 55%, transparent), 0 1px 6px color-mix(in oklch, var(--text-info) 28%, transparent);
    }
    pointer-events: none;
    z-index: 2;
  }
  .labs-minimap__view-grip {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 6px;
    height: 6px;
    border-radius: 0 0 3px 0;
    background-color: var(--text-info);
  }
  .labs-inspector {
    position: relative;
    min-height: 0;
    min-width: 0;
  }
  .labs-inspector__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    width: var(--labs-inspector-width, 18rem);
    background-color: var(--bg-labs-panel);
    border-left: 1px solid var(--border-labs-subtle);
    transform: translateX(0);
    opacity: 1;
    transition: transform var(--transition-panel, 220ms cubic-bezier(0.4, 0, 0.2, 1)), opacity 180ms ease, box-shadow 180ms ease;
  }
  .labs-shell[data-labs-inspector-state="collapsed"] .labs-inspector__panel {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }
  .labs-shell[data-labs-inspector-state="overlay"] .labs-inspector__panel {
    z-index: 30;
    box-shadow: var(--shadow-popover-card);
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-inspector__panel {
      transition: none;
    }
  }
  .labs-inspector__edge {
    display: none;
  }
  .labs-inspector__resize {
    position: absolute;
    inset-block: 0;
    left: -0.1875rem;
    width: 0.375rem;
    cursor: col-resize;
    z-index: 5;
  }
  .labs-inspector__resize::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0.125rem;
    width: 2px;
    background-color: transparent;
    transition: background-color var(--duration-fast, 120ms) ease;
  }
  .labs-inspector__resize:hover::after, .labs-inspector__resize:focus-visible::after, .labs-shell.is-inspector-resizing .labs-inspector__resize::after {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 55%, transparent);
    }
  }
  .labs-inspector__resize:focus-visible {
    outline: none;
  }
  .labs-shell:not([data-labs-inspector-state="pinned"]) .labs-inspector__resize {
    display: none;
  }
  .labs-inspector__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    height: 2.75rem;
    border-bottom: 1px solid var(--border-labs-subtle);
    color: var(--text-labs);
  }
  .labs-inspector__header > i {
    color: var(--text-labs-muted);
  }
  .labs-inspector__title {
    flex: 1;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .labs-inspector__actions {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  [data-labs-inspector-role="pin"], [data-labs-inspector-role="collapse"] {
    display: none;
  }
  .labs-shell[data-labs-inspector-state="overlay"] [data-labs-inspector-role="pin"], .labs-shell[data-labs-inspector-state="overlay"] [data-labs-inspector-role="collapse"], .labs-shell[data-labs-inspector-state="pinned"] [data-labs-inspector-role="collapse"] {
    display: inline-flex;
  }
  .labs-shell[data-labs-inspector-state="pinned"] [data-labs-inspector-role="toggle"] {
    display: none;
  }
  .labs-inspector__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    overflow-y: auto;
    padding: calc(var(--spacing) * 3);
  }
  .labs-inspector__label {
    margin-bottom: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-labs-muted);
  }
  .labs-inspector__value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-labs);
  }
  .labs-inspector__desc {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs-muted);
  }
  .labs-inspector__meta {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  .labs-inspector__chip {
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    background-color: var(--bg-labs-surface);
    color: var(--text-labs-muted);
  }
  .labs-inspector__path {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: var(--spacing);
  }
  .labs-inspector__path code {
    flex: 1;
    border-radius: var(--radius-sm);
    padding: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    word-break: break-all;
    background-color: var(--bg-labs-surface);
    color: var(--text-labs);
  }
  .labs-inspector__copy {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-labs-muted);
    transition: background-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-inspector__copy:hover {
    background-color: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  .labs-inspector__copy.is-copied {
    color: var(--text-success, var(--text-labs-accent));
  }
  .labs-inspector__hint {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
  }
  .labs-inspector__placeholder {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
    color: var(--text-labs-muted);
  }
  .labs-inspector__placeholder i {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .labs-inspector__placeholder p {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .labs-inspector__changes {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .labs-revchain {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing);
  }
  .labs-revchain__chip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    text-align: left;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    max-width: 100%;
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs-muted);
    transition: background-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-revchain__chip:hover {
    background-color: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  .labs-revchain__chip.is-current {
    background-color: var(--bg-labs-active);
    border-color: var(--text-labs-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-labs-accent) 40%, transparent);
    }
    color: var(--text-labs);
  }
  .labs-revchain__sep {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
  }
  .labs-diff {
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
  }
  .labs-diff__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border: 1px solid;
    line-height: 1.45;
  }
  .labs-diff__sign {
    flex-shrink: 0;
    text-align: center;
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    width: 0.875rem;
  }
  .labs-diff__text {
    min-width: 0;
    color: var(--text-labs);
  }
  .labs-diff__row--add {
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 8%, transparent);
    }
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-success) 30%, transparent);
    }
  }
  .labs-diff__row--add .labs-diff__sign {
    color: var(--text-success);
  }
  .labs-diff__row--remove {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 8%, transparent);
    }
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
  }
  .labs-diff__row--remove .labs-diff__sign {
    color: var(--text-danger);
  }
  .labs-diff__row--change {
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 8%, transparent);
    }
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 30%, transparent);
    }
  }
  .labs-diff__row--change .labs-diff__sign {
    color: var(--text-warning);
  }
  .labs-diff__base {
    margin-left: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: none;
    letter-spacing: normal;
    background-color: var(--bg-labs-surface);
    color: var(--text-labs-muted);
  }
  .labs-frame.is-marked-del .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), 0 0 0 2px var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-labs-frame), 0 0 0 2px color-mix(in oklch, var(--text-danger) 60%, transparent);
    }
  }
  .labs-frame.is-marked-del.is-selected .labs-frame__body {
    box-shadow: var(--shadow-labs-frame), 0 0 0 2px var(--text-danger), var(--ring-labs);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-labs-frame), 0 0 0 2px color-mix(in oklch, var(--text-danger) 60%, transparent), var(--ring-labs);
    }
  }
  .labs-frame.is-marked-del .labs-frame__name {
    color: var(--text-danger);
    text-decoration: line-through;
  }
  .labs-rail__tree .tree-row.is-marked-del .tree-label {
    color: var(--text-danger);
    text-decoration: line-through;
  }
  .labs-rail__tree .tree-row.is-marked-del .tree-icon {
    color: var(--text-danger);
  }
  .labs-frame__del-badge {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    color: var(--text-danger);
    background-color: var(--bg-card);
    border: 1px solid var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-danger) 35%, transparent);
    }
    box-shadow: var(--shadow-card);
    animation: labs-del-pulse 1.6s ease-in-out infinite;
  }
  @keyframes labs-del-pulse {
    0%, 100% {
      opacity: 0.82;
    }
    50% {
      opacity: 1;
    }
  }
  .labs-frame__tombstone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 100%;
    min-height: 9rem;
    padding: 1.5rem;
    text-align: center;
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 5%, var(--bg-card));
    }
  }
  .labs-frame__tombstone-icon {
    font-size: 1.5rem;
    color: var(--text-danger);
    opacity: 0.75;
  }
  .labs-frame__tombstone-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-danger);
  }
  .labs-frame__tombstone-meta {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-frame__del-badge {
      animation: none;
    }
  }
  .labs-toolbar__cleanup, .labs-toolbar__iterset {
    position: relative;
  }
  .labs-toolbar__cleanup.has-marks {
    color: var(--text-danger);
  }
  .labs-toolbar__iterset.has-stars {
    color: var(--text-warning);
  }
  .labs-toolbar__bpset {
    position: relative;
  }
  .labs-toolbar__bpset.has-marks {
    color: var(--text-info);
  }
  .labs-toolbar__badge {
    pointer-events: none;
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    top: -0.1875rem;
    right: -0.1875rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    color: var(--text-danger);
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 20%, var(--bg-labs-panel));
    }
    border: 1px solid var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-danger) 45%, transparent);
    }
  }
  .labs-toolbar__badge--gold {
    color: var(--text-warning);
    background-color: var(--bg-labs-surface);
    border-color: var(--border-labs);
  }
  .labs-toolbar__badge--blue {
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 20%, var(--bg-labs-panel));
    }
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 45%, transparent);
    }
  }
  .labs-toolbar__dot {
    pointer-events: none;
    position: absolute;
    border-radius: var(--radius-full);
    top: -0.0625rem;
    right: -0.0625rem;
    width: 0.5rem;
    height: 0.5rem;
    box-sizing: content-box;
    background-color: var(--text-accent, var(--text-info));
    border: 2px solid var(--bg-labs-panel);
  }
  .labs-cleanup {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    top: 3.25rem;
    right: 0.75rem;
    width: 22rem;
    max-width: calc(100% - 1.5rem);
    max-height: 70%;
    z-index: 40;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs);
    border-radius: var(--rounded-card, 12px);
    box-shadow: var(--shadow-popover-card);
    overflow: hidden;
  }
  .labs-cleanup__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    height: 2.75rem;
    border-bottom: 1px solid var(--border-labs-subtle);
  }
  .labs-cleanup__title {
    flex: 1;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
  }
  .labs-cleanup__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--spacing) * 2);
  }
  .labs-cleanup__group-title {
    padding-inline: var(--spacing);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-labs-muted);
  }
  .labs-cleanup__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .labs-cleanup__item:hover {
    background-color: var(--bg-labs-hover);
  }
  .labs-cleanup__item-icon {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    width: 1rem;
    text-align: center;
    color: var(--text-labs-muted);
  }
  .labs-cleanup__item-text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .labs-cleanup__item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-labs);
  }
  .labs-cleanup__item-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
  }
  .labs-cleanup__item-remove {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-labs-muted);
  }
  .labs-cleanup__item-remove:hover {
    background-color: var(--bg-labs-active);
    color: var(--text-labs);
  }
  .labs-cleanup__empty {
    padding: calc(var(--spacing) * 4);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs-muted);
  }
  .labs-cleanup__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-top: 1px solid var(--border-labs-subtle);
  }
  .labs-inspector__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    border-top: 1px solid var(--border-labs-subtle);
  }
  .labs-inspector__del-toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-danger);
    border: 1px solid var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-danger) 30%, transparent);
    }
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 6%, transparent);
    }
    transition: background-color var(--duration-fast, 120ms) ease, border-color var(--duration-fast, 120ms) ease;
  }
  .labs-inspector__del-toggle:hover {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 12%, transparent);
    }
  }
  .labs-inspector__del-toggle.is-active {
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 16%, transparent);
    }
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-danger) 50%, transparent);
    }
    font-weight: 600;
  }
  .labs-align {
    position: absolute;
    top: 3.25rem;
    right: 0.75rem;
    width: 20.5rem;
    max-width: calc(100% - 1.5rem);
    z-index: 40;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs);
    border-radius: var(--rounded-card, 12px);
    box-shadow: var(--shadow-popover-card);
    overflow: hidden;
  }
  .labs-align__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--border-labs-subtle);
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .labs-align.is-dragging, .labs-align.is-dragging .labs-align__header {
    cursor: grabbing;
  }
  .labs-align.is-dragging {
    box-shadow: var(--shadow-popover-card), 0 0 0 1px var(--text-labs-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-popover-card), 0 0 0 1px color-mix(in oklch, var(--text-labs-accent) 35%, transparent);
    }
  }
  .labs-align__grip {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs-muted);
  }
  .labs-align__title {
    flex: 1;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
    white-space: nowrap;
  }
  .labs-align__scope {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    gap: 2px;
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-align__scope-btn {
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    padding: 0.1875rem 0.5rem;
    color: var(--text-labs-muted);
    transition: background-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-align__scope-btn:hover {
    color: var(--text-labs);
  }
  .labs-align__scope-btn.is-active {
    background-color: var(--bg-labs-panel);
    color: var(--text-labs);
    box-shadow: var(--shadow-xs, 0 1px 1px oklch(0% 0 0 / 0.04));
  }
  .labs-align__section {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .labs-align__section + .labs-align__section {
    border-top: 1px solid var(--border-labs-subtle);
  }
  .labs-align__label {
    display: block;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4375rem;
    color: var(--text-labs-muted);
  }
  .labs-align__grid {
    display: grid;
    gap: var(--spacing);
    grid-template-columns: repeat(6, 1fr);
  }
  .labs-align__grid--dist {
    grid-template-columns: repeat(2, 1fr);
  }
  .labs-align__btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    height: 2rem;
    color: var(--text-labs);
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
    transition: background-color var(--duration-fast, 120ms) ease, border-color var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease;
  }
  .labs-align__btn:hover:not(:disabled) {
    background-color: var(--bg-labs-hover);
    border-color: var(--border-labs);
  }
  .labs-align__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .labs-align__grid--dist .labs-align__btn {
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .labs-align__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 1.5);
  }
  .labs-align__action {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    height: 2rem;
    color: var(--text-labs);
    background-color: var(--bg-labs-surface);
    border: 1px solid var(--border-labs-subtle);
    transition: background-color var(--duration-fast, 120ms) ease, border-color var(--duration-fast, 120ms) ease;
  }
  .labs-align__action:hover {
    background-color: var(--bg-labs-hover);
    border-color: var(--border-labs);
  }
  .labs-align__action--primary {
    color: var(--text-labs-accent);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 13%, transparent);
    }
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 32%, transparent);
    }
  }
  .labs-align__action--primary:hover {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 22%, transparent);
    }
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 45%, transparent);
    }
  }
  .labs-align__hint {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
    border-top: 1px solid var(--border-labs-subtle);
    background-color: var(--bg-labs-surface);
  }
  .labs-iterset {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    top: 3.25rem;
    right: 0.75rem;
    width: 31rem;
    max-width: calc(100% - 1.5rem);
    max-height: 70%;
    z-index: 40;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs);
    border-radius: var(--rounded-card, 12px);
    box-shadow: var(--shadow-popover-card);
    overflow: hidden;
  }
  .labs-iterset__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    height: 2.75rem;
    border-bottom: 1px solid var(--border-labs-subtle);
  }
  .labs-iterset__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-labs);
  }
  .labs-iterset__count {
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-warning);
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 16%, transparent);
    }
  }
  .labs-iterset__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--spacing) * 1.5);
  }
  .labs-iterset__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .labs-iterset__item:hover {
    background-color: var(--bg-labs-hover);
  }
  .labs-iterset__item-icon {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    width: 1rem;
    text-align: center;
    color: var(--text-warning);
  }
  .labs-iterset--blueprint .labs-iterset__item-icon {
    color: var(--text-info);
  }
  .labs-iterset__item-main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    text-align: left;
  }
  .labs-iterset__item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-labs);
  }
  .labs-iterset__item-meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-labs-muted);
  }
  .labs-iterset__primary {
    flex-shrink: 0;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: 0.5625rem;
    letter-spacing: 0.03em;
    color: var(--text-warning);
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 16%, transparent);
    }
  }
  .labs-iterset__item-copy, .labs-iterset__item-remove {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-labs-muted);
  }
  .labs-iterset__item-copy:hover {
    background-color: var(--bg-labs-active);
    color: var(--text-labs);
  }
  .labs-iterset__item-copy.is-copied {
    color: var(--text-success);
  }
  .labs-iterset__item-copy.is-copied i {
    animation: labs-copy-pop var(--duration-base, 220ms) ease;
  }
  .labs-iterset__item-remove:hover {
    background-color: var(--bg-labs-active);
    color: var(--text-danger);
  }
  @keyframes labs-copy-pop {
    0% {
      transform: scale(0.4);
      opacity: 0;
    }
    55% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-iterset__item-copy.is-copied i {
      animation: none;
    }
  }
  .labs-iterset__empty {
    padding: calc(var(--spacing) * 4);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs-muted);
  }
  .labs-iterset__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-top: 1px solid var(--border-labs-subtle);
  }
  .labs-rail__icon-btn:focus-visible, .labs-cleanup__item-remove:focus-visible, .labs-iterset__item-main:focus-visible, .labs-iterset__item-copy:focus-visible, .labs-iterset__item-remove:focus-visible, .labs-toolbar__btn:focus-visible, .labs-toolbar__zoom:focus-visible, .labs-toolbar__seg-btn:focus-visible, .labs-minimap__collapse:focus-visible, .labs-align__scope-btn:focus-visible, .labs-align__btn:focus-visible, .labs-align__action:focus-visible, .labs-frame__name:focus-visible, .labs-chrome__select:focus-visible, .labs-frame__theme:focus-visible, .labs-inspector__copy:focus-visible, .labs-revchain__chip:focus-visible, .labs-canvas-error__retry:focus-visible, .labs-hint__close:focus-visible {
    outline: none;
    box-shadow: var(--ring-labs-soft);
  }
  @media (max-width: 1024px) {
    .labs-shell[data-labs-inspector-state="pinned"] {
      --labs-inspector-track: 0px;
    }
    .labs-shell[data-labs-inspector-state="pinned"] .labs-inspector__panel {
      box-shadow: var(--shadow-popover-card);
    }
    .labs-shell[data-labs-inspector-state="pinned"] [data-labs-inspector-role="toggle"] {
      display: inline-flex;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-shell, .labs-rail__icon-btn, .labs-rail__tree .tree-row, .labs-toolbar__btn, .labs-toolbar__zoom, .labs-toolbar__seg-btn, .labs-frame__name, .labs-frame__grip, .labs-frame__controls, .labs-frame__theme, .labs-frame__handle, .labs-inspector__copy {
      transition: none;
    }
  }
  .labs-toolbar__anno.is-active {
    color: var(--text-accent, var(--text-info));
  }
  .labs-toolbar__badge--note {
    color: var(--text-accent, var(--text-info));
    background-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 20%, var(--bg-labs-panel));
    }
    border-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 45%, transparent);
    }
  }
  .labs-comment-mode, .labs-comment-mode * {
    cursor: crosshair !important;
  }
  .labs-anno-hover {
    position: absolute;
    z-index: 15;
    pointer-events: none;
    border-radius: 2px;
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 0;
    background-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 12%, transparent);
    }
    box-shadow: 0 0 0 1px var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--bg-card) 60%, transparent);
    }
  }
  .labs-anno-hover.is-frame-level {
    outline-style: dashed;
    background-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 7%, transparent);
    }
  }
  .labs-anno-hover.is-droptarget {
    outline-style: dashed;
    background-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 18%, transparent);
    }
  }
  .labs-anno-target.is-anno-hover {
    outline: 2px solid var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      outline: 2px solid color-mix(in oklch, var(--text-accent, var(--text-info)) 55%, transparent);
    }
    outline-offset: 1px;
    border-radius: 2px;
  }
  .labs-frame.is-anno-hover {
    outline: 1px solid var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      outline: 1px solid color-mix(in oklch, var(--text-accent, var(--text-info)) 30%, transparent);
    }
    outline-offset: -1px;
  }
  .labs-anno-pin.is-anno-hover {
    animation: labs-anno-pulse 2.6s ease-in-out infinite;
  }
  @keyframes labs-anno-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.28);
    }
    50% {
      box-shadow: 0 0 0 4px rgba(20, 184, 166, 0);
    }
  }
  .labs-notes__item.is-anno-hover {
    background-color: var(--bg-labs-hover);
  }
  .labs-anno-selmark {
    position: absolute;
    z-index: 16;
    pointer-events: none;
    border-radius: 2px;
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 0;
    background-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 14%, transparent);
    }
  }
  .labs-anno-selmark__n {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-on-accent, var(--bg-card));
    background-color: var(--text-accent, var(--text-info));
    border-radius: 9999px;
    transform: scale(calc(1 / max(var(--labs-zoom, 1), 0.5)));
    transform-origin: top left;
  }
  .labs-anno-connector {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 14;
  }
  .labs-anno-connector__line {
    fill: none;
    stroke: var(--text-accent, var(--text-info));
    stroke-width: 2;
    stroke-dasharray: 6 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .labs-anno-connector.is-selecting .labs-anno-connector__line {
    stroke-dasharray: 4 4;
    opacity: 0.9;
  }
  .labs-anno-pin--multi {
    color: var(--text-on-accent, #fff);
  }
  .labs-anno-world-connector {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
  }
  .labs-anno-pin--canvas {
    color: var(--text-on-accent, #fff);
  }
  .labs-frame.labs-anno-frame-sel {
    outline: 2px dashed var(--text-accent, var(--text-info));
    outline-offset: 2px;
  }
  .labs-anno-palette {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-full);
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    padding: 0.1875rem;
    background-color: var(--bg-labs-panel, var(--bg-card));
    border: 1px solid var(--border-default, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid var(--border-default, color-mix(in oklch, currentColor 16%, transparent));
    }
    box-shadow: var(--shadow-overlay, var(--shadow-card));
  }
  .labs-anno-palette.is-placed {
    transform: none;
  }
  .labs-anno-palette.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
  .labs-anno-palette__grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    align-self: stretch;
    font-size: 0.8125rem;
    color: var(--text-muted);
    opacity: 0.7;
    cursor: grab;
    touch-action: none;
  }
  .labs-anno-palette__grip:active {
    cursor: grabbing;
  }
  .labs-anno-palette__tools {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .labs-anno-palette.is-collapsed .labs-anno-palette__tools {
    display: none;
  }
  .labs-anno-palette__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background-color: transparent;
    border: 0;
    cursor: pointer;
  }
  .labs-anno-palette__toggle:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 8%, transparent);
    }
  }
  .labs-anno-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 2rem;
    height: 2rem;
    font-size: 0.8125rem;
    color: var(--text-default);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .labs-anno-tool:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 8%, transparent);
    }
  }
  .labs-anno-tool:focus-visible {
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 1px;
  }
  .labs-anno-tool.is-active {
    color: var(--text-on-accent, var(--bg-card));
    background-color: var(--text-accent, var(--text-info));
  }
  .labs-anno-palette__sep {
    width: 1px;
    height: 1.75rem;
    margin: 0 0.125rem;
    background-color: var(--border-default, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--border-default, color-mix(in oklch, currentColor 18%, transparent));
    }
  }
  .labs-anno-palette__swatches {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .labs-anno-swatch {
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 1rem;
    height: 1rem;
    padding: 0;
    cursor: pointer;
    background-color: var(--anno-swatch, var(--text-accent));
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in oklch, currentColor 25%, transparent);
    }
    transition: transform var(--duration-fast, 120ms) ease;
  }
  .labs-anno-swatch:hover {
    transform: scale(1.15);
  }
  .labs-anno-swatch.is-active {
    border-color: var(--bg-labs-panel, var(--bg-card));
    box-shadow: 0 0 0 2px var(--anno-swatch, var(--text-accent));
  }
  .labs-anno-swatch:focus-visible {
    outline: 2px solid var(--anno-swatch, var(--text-accent));
    outline-offset: 2px;
  }
  .labs-anno-done {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    min-height: 2rem;
    padding: 0 0.75rem;
    margin-left: 0.125rem;
    font-size: 0.75rem;
    color: var(--text-accent, var(--text-info));
    background-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 14%, transparent);
    }
    border: 1px solid var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--text-accent, var(--text-info)) 32%, transparent);
    }
    cursor: pointer;
  }
  .labs-anno-done:focus-visible {
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 2px;
  }
  .labs-viewport.is-anno-drawing, .labs-viewport.is-anno-drawing * {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .labs-anno-markup {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 20000;
  }
  .labs-anno-markup__pen, .labs-anno-markup__arrow, .labs-anno-markup__crossout, .labs-anno-markup__rect, .labs-anno-markup__resize, .labs-anno-markup__ellipse {
    fill: none;
    stroke: var(--text-accent, var(--text-info));
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .labs-anno-markup__head {
    fill: var(--text-accent, var(--text-info));
    stroke: none;
  }
  .labs-anno-markup__crossout {
    stroke: var(--text-danger);
    stroke-width: 3;
  }
  .labs-anno-markup__resize {
    stroke: var(--text-warning);
    stroke-dasharray: 7 5;
  }
  .labs-anno-markup.is-draft {
    opacity: 0.85;
  }
  .labs-anno-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    z-index: 20010;
    min-width: 1rem;
    height: 1rem;
    padding: 0;
    border-radius: 999px 999px 999px 2px;
    font-size: 0.5rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    touch-action: none;
    color: var(--utility-teal-950, oklch(25% 0.05 175));
    background-color: var(--utility-teal-500);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%) scale(calc(1 / max(var(--labs-zoom, 1), 0.5)));
    transform-origin: center;
    transition: filter var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .labs-anno-pin > i {
    display: none;
  }
  .labs-anno-pin__dot {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1.5px solid #1a1c20;
    box-sizing: border-box;
  }
  .labs-anno-pin.is-stack {
    box-shadow: var(--shadow-card), 3px 3px 0 -1px var(--text-labs);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-card), 3px 3px 0 -1px color-mix(in oklch, var(--text-labs) 22%, transparent);
    }
  }
  .labs-anno-pin__count {
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 0.0625rem;
  }
  .labs-anno-pin:focus-visible {
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 1px;
  }
  .labs-anno-pin.is-draggable {
    cursor: grab;
  }
  .labs-anno-pin.is-dragging {
    cursor: grabbing;
    filter: brightness(1.08);
    box-shadow: var(--shadow-overlay, var(--shadow-card)), 0 0 0 1px var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-overlay, var(--shadow-card)), 0 0 0 1px color-mix(in oklch, var(--text-accent, var(--text-info)) 55%, transparent);
    }
    transition: none;
  }
  .labs-anno-pin--frame {
    left: 0.5rem;
    bottom: 0.5rem;
    transform: scale(calc(1 / max(var(--labs-zoom, 1), 0.5)));
    transform-origin: bottom left;
  }
  .labs-anno-pin.is-degraded {
    color: var(--text-on-accent, #fff);
    background-color: var(--text-warning);
    box-shadow: var(--shadow-card);
  }
  .labs-anno-pin.is-draft {
    color: var(--text-on-accent, #fff);
    background-color: var(--text-warning);
    border-style: dashed;
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-warning) 50%, transparent);
    }
    opacity: 0.9;
  }
  .labs-anno-pin--docked {
    color: var(--text-info);
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 12%, var(--bg-card));
    }
    border-style: dashed;
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-info) 55%, transparent);
    }
    cursor: pointer;
  }
  .labs-anno-pin--docked > i {
    font-size: 0.75rem;
  }
  .labs-anno-pin--docked:hover {
    background-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-info) 20%, var(--bg-card));
    }
    filter: none;
  }
  .labs-anno-dock-host {
    outline: 1px dashed var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 1px dashed color-mix(in oklch, var(--text-info) 45%, transparent);
    }
    outline-offset: 1px;
    border-radius: var(--radius-sm, 0.25rem);
  }
  .labs-anno-pin--page {
    position: static;
    transform: none;
    margin-left: 0.375rem;
  }
  .labs-anno-pin__count {
    font-variant-numeric: tabular-nums;
  }
  .labs-anno-popover {
    position: fixed;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    border-radius: var(--radius-xl);
    z-index: 60;
    width: 24rem;
    max-width: calc(100vw - 1rem);
    padding: 0.875rem;
    gap: 0.75rem;
    color: var(--text-default);
    background-color: var(--bg-labs-panel, var(--bg-card));
    border: 1px solid var(--border-default, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid var(--border-default, color-mix(in oklch, currentColor 16%, transparent));
    }
    box-shadow: var(--shadow-overlay, var(--shadow-card));
    animation: labs-anno-pop-in var(--duration-fast, 120ms) var(--ease-out, ease-out);
  }
  .labs-anno-popover.is-dragging {
    cursor: grabbing;
    user-select: none;
    box-shadow: var(--shadow-overlay, var(--shadow-card)), 0 0 0 2px var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: var(--shadow-overlay, var(--shadow-card)), 0 0 0 2px color-mix(in oklch, var(--text-accent, var(--text-info)) 30%, transparent);
    }
  }
  @keyframes labs-anno-pop-in {
    from {
      opacity: 0;
      transform: translateY(4px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-anno-popover {
      animation: none;
    }
  }
  .labs-anno-popover__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: wrap;
    cursor: grab;
    touch-action: none;
    margin: -0.25rem -0.25rem 0;
    padding: 0.25rem;
    border-radius: 0.5rem;
  }
  .labs-anno-popover__head:active {
    cursor: grabbing;
  }
  .labs-anno-popover__grip {
    font-size: 0.8125rem;
    color: var(--text-muted);
    opacity: 0.7;
  }
  .labs-anno-popover__title {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .labs-anno-popover__anchor {
    flex-basis: 100%;
    font-size: 0.6875rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labs-anno-popover__notes {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    max-height: 13rem;
    overflow-y: auto;
  }
  .labs-anno-note {
    border-radius: var(--radius-md);
    padding: 0.4375rem 0.5rem;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 5%, transparent);
    }
    border: 1px solid currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, currentColor 10%, transparent);
    }
  }
  .labs-anno-note.is-resolved {
    opacity: 0.6;
  }
  .labs-anno-note.is-resolved .labs-anno-note__text {
    text-decoration: line-through;
  }
  .labs-anno-note__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    margin-bottom: 0.25rem;
  }
  .labs-anno-note__author, .labs-anno-note__status {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.4;
  }
  .labs-anno-note__author {
    color: var(--text-accent, var(--text-info));
    background-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 16%, transparent);
    }
  }
  .labs-anno-note__author--anton {
    color: var(--text-success);
    background-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-success) 16%, transparent);
    }
  }
  .labs-anno-note__status {
    color: var(--text-muted);
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 12%, transparent);
    }
  }
  .labs-anno-note__status--resolved {
    color: var(--text-success);
  }
  .labs-anno-note__status--dispatched {
    color: var(--text-info);
  }
  .labs-anno-note__status--draft {
    color: var(--text-warning);
    background-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-warning) 14%, transparent);
    }
  }
  .labs-anno-note__status--submitted {
    color: var(--text-accent, var(--text-info));
    background-color: var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-accent, var(--text-info)) 14%, transparent);
    }
  }
  .labs-anno-note.is-draft {
    border-style: dashed;
  }
  .labs-anno-note__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    margin-top: 0.375rem;
  }
  .labs-anno-note__submit, .labs-anno-note__act {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-height: 2rem;
    padding: 0 0.625rem;
    font-size: 0.6875rem;
    cursor: pointer;
  }
  .labs-anno-note__submit {
    color: var(--text-on-accent, var(--bg-card));
    background-color: var(--text-accent, var(--text-info));
    border: 0;
  }
  .labs-anno-note__act {
    color: var(--text-default);
    background-color: transparent;
    border: 1px solid var(--border-default, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid var(--border-default, color-mix(in oklch, currentColor 22%, transparent));
    }
  }
  .labs-anno-note__act:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 8%, transparent);
    }
  }
  .labs-anno-note__act--danger {
    color: var(--text-muted);
  }
  .labs-anno-note__act--danger:hover, .labs-anno-note__act--danger.is-confirm {
    color: var(--text-default);
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 10%, transparent);
    }
  }
  .labs-anno-note__act--danger.is-confirm {
    border-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, currentColor 45%, transparent);
    }
    font-weight: 700;
  }
  .labs-anno-note__submit:focus-visible, .labs-anno-note__act:focus-visible {
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 2px;
  }
  .labs-anno-reader {
    position: fixed;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    border-radius: var(--radius-lg);
    z-index: 58;
    max-width: 18rem;
    padding: 0.5rem 0.625rem;
    gap: 0.375rem;
    color: var(--text-default);
    background-color: var(--bg-labs-panel, var(--bg-card));
    border: 1px solid var(--border-default, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid var(--border-default, color-mix(in oklch, currentColor 16%, transparent));
    }
    box-shadow: var(--shadow-overlay, var(--shadow-card));
  }
  .labs-anno-reader__note {
    position: relative;
  }
  .labs-anno-reader__note + .labs-anno-reader__note {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in oklch, currentColor 12%, transparent);
    }
  }
  .labs-anno-reader__tools {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    top: 0;
    right: 0;
  }
  .labs-anno-reader__tool {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    width: 1.375rem;
    height: 1.375rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--duration-fast, 120ms) ease, background-color var(--duration-fast, 120ms) ease;
  }
  .labs-anno-reader__tool:hover {
    color: var(--text-default);
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 10%, transparent);
    }
  }
  .labs-anno-reader__tool--danger.is-confirm {
    color: var(--text-danger);
    background-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-danger) 14%, transparent);
    }
  }
  .labs-anno-reader__tool:focus-visible {
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 2px;
  }
  .labs-anno-reader__text {
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: 3rem;
  }
  .labs-anno-reader__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    margin-top: 0.25rem;
  }
  .labs-anno-reader__by {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: capitalize;
    margin-right: auto;
  }
  .labs-anno-reader__edit {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-height: 1.75rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, currentColor 28%, transparent);
    }
    cursor: pointer;
  }
  .labs-anno-reader__edit:hover {
    color: var(--text-default);
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 10%, transparent);
    }
  }
  .labs-anno-reader__edit:focus-visible {
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 2px;
  }
  .labs-anno-reader__del {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-height: 1.75rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, currentColor 28%, transparent);
    }
    cursor: pointer;
  }
  .labs-anno-reader__del:hover, .labs-anno-reader__del.is-confirm {
    color: var(--text-default);
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 10%, transparent);
    }
  }
  .labs-anno-reader__del.is-confirm {
    font-weight: 700;
  }
  .labs-anno-reader__del:focus-visible {
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 2px;
  }
  .labs-anno-note__text {
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .labs-anno-note__replies {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
  }
  .labs-anno-popover__composer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.875rem;
  }
  .labs-anno-popover__input {
    width: 100%;
    border-radius: var(--radius-lg);
    min-height: 6.5rem;
    padding: 0.625rem 0.6875rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: inherit;
    background-color: var(--bg-input, var(--bg-card));
    border: 1px solid var(--border-default, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid var(--border-default, color-mix(in oklch, currentColor 16%, transparent));
    }
    resize: vertical;
    transition: border-color var(--duration-fast, 120ms) var(--ease-default, ease), box-shadow var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .labs-anno-popover__input:focus-visible {
    outline: none;
    border-color: var(--text-accent, var(--text-info));
    box-shadow: 0 0 0 3px var(--text-accent, var(--text-info));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--text-accent, var(--text-info)) 22%, transparent);
    }
  }
  .labs-anno-popover__buttons {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .labs-anno-popover__btn-actions {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .labs-anno-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 3.25rem;
    min-height: 1.625rem;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter var(--duration-fast, 120ms) var(--ease-default, ease), background-color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .labs-anno-btn--close {
    min-width: 0;
    font-weight: 500;
    color: var(--text-labs-muted, var(--text-muted));
    background-color: transparent;
    border-color: transparent;
  }
  .labs-anno-btn--close:hover {
    color: var(--text-default);
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 8%, transparent);
    }
  }
  .labs-anno-btn:focus-visible {
    outline: 2px solid var(--text-accent, var(--text-info));
    outline-offset: 2px;
  }
  .labs-anno-btn--save {
    color: var(--text-default);
    background-color: transparent;
    border-color: var(--border-default, currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: var(--border-default, color-mix(in oklch, currentColor 22%, transparent));
    }
  }
  .labs-anno-btn--save:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, currentColor 8%, transparent);
    }
  }
  .labs-anno-btn--submit {
    color: var(--text-on-accent, var(--bg-card));
    background-color: var(--text-accent, var(--text-info));
  }
  .labs-anno-btn--submit:hover {
    filter: brightness(1.05);
  }
  .labs-note-flash {
    animation: labs-note-flash var(--duration-slow, 1500ms) ease;
    border-radius: var(--rounded, 6px);
  }
  @keyframes labs-note-flash {
    0% {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--text-success) 70%, transparent);
    }
    30% {
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--text-success) 55%, transparent);
    }
    100% {
      box-shadow: 0 0 0 6px color-mix(in oklch, var(--text-success) 0%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-notes__filter, .labs-notes__goto {
      transition: none;
    }
    .labs-note-flash {
      animation: none;
      outline: 2px solid var(--text-success);
      outline-offset: 2px;
    }
  }
  .labs-notes-toasts {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 60;
    max-width: min(22rem, calc(100% - 1.5rem));
    pointer-events: none;
  }
  .labs-notes-toast {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    pointer-events: auto;
    background-color: var(--bg-labs-panel);
    border: 1px solid var(--border-labs);
    border-left: 3px solid var(--border-labs);
    border-radius: var(--rounded-card, 12px);
    box-shadow: var(--shadow-popover-card);
    animation: labs-notes-toast-in 200ms ease;
  }
  .labs-notes-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .labs-notes-toast--plain {
    border-color: var(--border-labs);
    border-left-color: var(--border-labs);
  }
  .labs-notes-toast--plain .labs-notes-toast__icon {
    color: var(--text-labs-muted);
  }
  .labs-notes-toast--plain .labs-notes-toast__text:hover {
    color: var(--text-labs);
  }
  .labs-notes-toast__icon {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs-muted);
  }
  .labs-notes-toast__text {
    min-width: 0;
    flex: 1;
    text-align: left;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-labs);
    background-color: transparent;
    overflow-wrap: anywhere;
  }
  .labs-notes-toast__text:hover {
    color: var(--text-labs);
  }
  .labs-notes-toast__close {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-labs-muted);
  }
  .labs-notes-toast__close:hover {
    background-color: var(--bg-labs-active);
    color: var(--text-labs);
  }
  .labs-notes-toast__text:focus-visible, .labs-notes-toast__close:focus-visible {
    outline: none;
    box-shadow: var(--ring-labs-soft);
  }
  @keyframes labs-notes-toast-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-notes-toast {
      animation: none;
    }
  }
  .labs-notes__goto:active {
    background-color: var(--bg-labs-active);
    color: var(--text-labs);
  }
  .labs-notes__filter:active {
    background-color: var(--bg-labs-hover);
  }
  .labs-notes-toast__text:active {
    color: var(--text-labs);
  }
  @media (pointer: coarse), (any-pointer: coarse) {
    .labs-toolbar__notes {
      min-width: 2.75rem;
      min-height: 2.75rem;
    }
    .labs-notes [data-labs-notes-refresh], .labs-notes [data-labs-notes-close] {
      width: 2.75rem;
      height: 2.75rem;
    }
    .labs-notes__filters {
      gap: 0.5rem;
      padding: 0.625rem 0.75rem;
    }
    .labs-notes__filter-group {
      gap: 0.375rem;
    }
    .labs-notes__filter {
      display: inline-flex;
      align-items: center;
      min-height: 2.5rem;
      padding: 0 0.875rem;
      font-size: 0.8125rem;
    }
    .labs-notes__item {
      padding: 0.875rem;
      gap: 0.625rem;
    }
    .labs-notes__goto {
      min-height: 2.75rem;
      padding: 0 0.75rem;
      font-size: 0.8125rem;
    }
    .labs-notes__action {
      width: 2.5rem;
      height: 2.5rem;
      opacity: 1;
    }
    .labs-notes__confirm-btn {
      min-height: 2.25rem;
      padding: 0 0.875rem;
    }
    .labs-notes-toasts {
      max-width: min(26rem, calc(100% - 1.5rem));
    }
    .labs-notes-toast {
      padding: 0.75rem 0.875rem;
    }
    .labs-notes-toast__text {
      font-size: 0.875rem;
    }
    .labs-notes-toast__close {
      width: 2.5rem;
      height: 2.5rem;
    }
  }
  .modal.modal--in-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .modal.modal--in-frame .modal-overlay {
    position: absolute;
    inset: 0;
  }
  .modal.modal--in-frame .modal-content {
    max-width: 90%;
    max-height: 90%;
  }
  .labs-appwrap {
    overflow: hidden;
    background-color: var(--canvas-primary);
  }
  .labs-appwrap__stage {
    background-color: var(--bg-panel);
  }
  .labs-modalhost {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  .labs-modalhost__scrim {
    position: absolute;
    inset: 0;
    background-color: var(--bg-overlay, var(--alpha-black-50, rgba(15, 23, 42, 0.55)));
  }
  .labs-modalhost__dialog {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 4rem);
    max-height: calc(100% - 4rem);
    overflow: auto;
  }
}
@layer utilities {
  :root {
    --labs-dev-hardware: #1c1c1e;
    --labs-dev-hardware-edge: #3a3a3c;
    --labs-dev-island: #000;
    --labs-dev-screen-radius: 0.375rem;
  }
  .labs-device {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    display: none;
    border-radius: inherit;
  }
  .labs-frame--device .labs-device {
    display: block;
  }
  .labs-frame--device .labs-frame__body {
    border-radius: var(--labs-dev-screen-radius);
    padding-top: var(--labs-safe-top, 0px);
    padding-bottom: var(--labs-safe-bottom, 0px);
    padding-left: var(--labs-safe-left, 0px);
    padding-right: var(--labs-safe-right, 0px);
  }
  .labs-frame--device.labs-device--phone, .labs-frame--device.labs-device--tablet {
    --labs-dev-screen-radius: var(--labs-dev-radius, 2.25rem);
    border-radius: var(--labs-dev-radius, 2.25rem);
    box-shadow: 0 0 0 var(--labs-dev-bezel, 12px) var(--labs-dev-hardware), 0 0 0 calc(var(--labs-dev-bezel, 12px) + 2px) var(--labs-dev-hardware-edge), 0 1.5rem 3rem -0.5rem rgb(0 0 0 / 0.45);
  }
  .labs-frame--device.labs-device--phone .labs-frame__body, .labs-frame--device.labs-device--tablet .labs-frame__body {
    border-radius: var(--labs-dev-radius, 2.25rem);
  }
  .labs-device__statusbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--labs-safe-top, 2.75rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.4rem;
    padding-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--labs-dev-ink, #0b0b0c);
    pointer-events: none;
    border-radius: var(--labs-dev-radius, 0) var(--labs-dev-radius, 0) 0 0;
  }
  .labs-frame[data-theme="dark"] .labs-device__statusbar, .labs-device--ink-light .labs-device__statusbar {
    color: #fff;
  }
  .labs-device__statusbar-radios {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
  }
  .labs-device__island {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--labs-dev-island);
    pointer-events: none;
  }
  .labs-device[data-labs-device-camera="island"] .labs-device__island {
    width: 6.2rem;
    height: 1.6rem;
    border-radius: 1rem;
  }
  .labs-device[data-labs-device-camera="notch"] .labs-device__island {
    top: 0;
    width: 9.5rem;
    height: 1.55rem;
    border-radius: 0 0 1.1rem 1.1rem;
  }
  .labs-device[data-labs-device-camera="punch"] .labs-device__island {
    top: 0.5rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
  }
  .labs-device[data-labs-device-camera="none"] .labs-device__island {
    display: none;
  }
  .labs-device__home {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--labs-safe-bottom, 0px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 0 0 var(--labs-dev-radius, 0) var(--labs-dev-radius, 0);
  }
  .labs-device__home::after {
    content: "";
    width: 38%;
    max-width: 9rem;
    height: 0.3rem;
    border-radius: 0.3rem;
    background: var(--labs-dev-ink, #0b0b0c);
    opacity: 0.55;
  }
  .labs-frame[data-theme="dark"] .labs-device__home::after, .labs-device--ink-light .labs-device__home::after {
    background: #fff;
  }
  .labs-device[data-labs-device-home="button"] .labs-device__home::after {
    width: 2.6rem;
    height: 2.6rem;
    max-width: none;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--labs-dev-hardware-edge);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in oklch, var(--labs-dev-hardware-edge) 80%, #888);
    }
    opacity: 0.9;
  }
  .labs-device[data-labs-device-home="none"] .labs-device__home {
    display: none;
  }
  .labs-device__browserbar {
    position: absolute;
    top: var(--labs-safe-top, 2.75rem);
    left: 0;
    right: 0;
    height: var(--labs-browser-h, 2.6rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.7rem;
    background: var(--labs-dev-hardware);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--labs-dev-hardware) 88%, #555);
    }
    color: #e8e8ea;
    pointer-events: auto;
  }
  .labs-device--standalone .labs-device__browserbar {
    display: none;
  }
  .labs-frame--device:not(.labs-device--standalone) .labs-frame__body {
    padding-top: calc(var(--labs-safe-top, 0px) + var(--labs-browser-h, 2.6rem));
  }
  .labs-device__url {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 1.75rem;
    padding: 0 0.7rem;
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.12);
    font-size: 0.72rem;
    color: #cfcfd2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .labs-device__url i {
    font-size: 0.66rem;
    opacity: 0.8;
  }
  .labs-device__install {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.75rem;
    padding: 0 0.7rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--utility-indigo-500, #6366f1);
    color: #fff;
    pointer-events: auto;
    transition: filter var(--duration-fast, 120ms) ease;
  }
  .labs-device__install:hover {
    filter: brightness(1.08);
  }
  .labs-device__a2hs {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: calc(var(--labs-safe-bottom, 0px) + 0.6rem);
    display: none;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.9rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #111);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.3);
    font-size: 0.78rem;
    pointer-events: auto;
    z-index: 5;
  }
  .labs-device.is-a2hs-open .labs-device__a2hs {
    display: flex;
  }
  .labs-device__a2hs-icon {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: grid;
    place-items: center;
    background: var(--utility-indigo-500, #6366f1);
    color: #fff;
  }
  .labs-device__a2hs-title {
    font-weight: 600;
  }
  .labs-device__a2hs-sub {
    opacity: 0.7;
    font-size: 0.72rem;
  }
  .labs-device__a2hs-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 0.4rem;
  }
  .labs-frame--device.labs-device--touch .labs-frame__body {
    cursor: default;
  }
  .labs-device__touch-dot {
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    margin: -1.1rem 0 0 -1.1rem;
    border-radius: 50%;
    background: var(--utility-indigo-500, #6366f1);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--utility-indigo-500, #6366f1) 45%, transparent);
    }
    pointer-events: none;
    opacity: 0;
    transform: scale(0.4);
    z-index: 6;
  }
  .labs-device__touch-dot.is-tapping {
    animation: labs-device-tap 420ms ease-out;
  }
  @keyframes labs-device-tap {
    0% {
      opacity: 0.7;
      transform: scale(0.4);
    }
    100% {
      opacity: 0;
      transform: scale(1.3);
    }
  }
  .labs-device-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    pointer-events: auto;
  }
  .labs-device-switch__group {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .labs-frame__chrome-end .labs-device-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    font-size: 0.6875rem;
    border-radius: 0.25rem;
    border: 1px solid var(--border-labs-subtle);
    background-color: var(--bg-labs-panel);
    color: var(--text-labs-muted);
    cursor: pointer;
    opacity: 0;
    transition: color var(--duration-fast, 120ms) ease, opacity var(--duration-fast, 120ms) ease;
  }
  .labs-frame:hover .labs-frame__chrome-end .labs-device-switch__btn, .labs-frame.is-selected .labs-frame__chrome-end .labs-device-switch__btn, .labs-frame__chrome-end:focus-within .labs-device-switch__btn, .labs-frame--device .labs-frame__chrome-end .labs-device-switch__btn {
    opacity: 1;
  }
  .labs-frame__chrome-end .labs-device-switch__btn:hover {
    color: var(--text-labs);
  }
  .labs-frame__chrome-end .labs-device-switch__btn[aria-pressed="true"], .labs-frame__chrome-end .labs-device-switch__btn.is-active {
    opacity: 1;
    color: var(--text-labs-accent);
    background-color: var(--text-labs-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-labs-accent) 12%, var(--bg-labs-panel));
    }
    border-color: var(--text-labs-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-labs-accent) 45%, transparent);
    }
  }
  .labs-frame__chrome-end .labs-device-switch__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .labs-device-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 1.9rem;
    height: 1.7rem;
    padding: 0 0.45rem;
    border: none;
    background: transparent;
    color: var(--text-labs-muted, #9aa0aa);
    font-size: 0.72rem;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: color var(--duration-fast, 120ms) ease, background-color var(--duration-fast, 120ms) ease;
  }
  .labs-device-switch__btn:hover {
    color: var(--text-labs, #e8eaed);
  }
  .labs-device-switch__detail {
    display: none;
    align-items: center;
    gap: 0.375rem;
  }
  .labs-frame--device .labs-device-switch__detail {
    display: inline-flex;
  }
  .labs-device-switch__sep {
    width: 1px;
    height: 1.1rem;
    background: var(--text-labs-muted, #9aa0aa);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-labs-muted, #9aa0aa) 30%, transparent);
    }
  }
  .labs-frame__chrome-end .labs-device-switch__select {
    height: 1.375rem;
    max-width: 8.5rem;
    padding: 0 0.4rem;
    border: 1px solid var(--border-labs-subtle);
    border-radius: 0.25rem;
    background-color: var(--bg-labs-panel);
    color: var(--text-labs-muted);
    font-size: 0.6875rem;
    cursor: pointer;
  }
  .labs-frame__chrome-end .labs-device-switch__select:hover {
    color: var(--text-labs);
  }
  .labs-frame--device.labs-device--landscape .labs-device__island {
    top: 50%;
    left: auto;
    right: 0.5rem;
    transform: translateY(-50%);
  }
  .labs-frame--device.labs-device--landscape[data-labs-device-camera="notch"] .labs-device__island, .labs-frame--device.labs-device--landscape .labs-device[data-labs-device-camera="notch"] .labs-device__island {
    width: 1.55rem;
    height: 9.5rem;
    border-radius: 1.1rem 0 0 1.1rem;
  }
  .labs-device[data-labs-device-model="iphone-15-pro-max"] {
    --labs-dev-radius: 3rem;
    --labs-dev-bezel: 12px;
    --labs-safe-top: 3.4rem;
    --labs-safe-bottom: 2.1rem;
  }
  .labs-device[data-labs-device-model="iphone-15-pro"] {
    --labs-dev-radius: 3rem;
    --labs-dev-bezel: 12px;
    --labs-safe-top: 3.4rem;
    --labs-safe-bottom: 2.1rem;
  }
  .labs-device[data-labs-device-model="iphone-14"] {
    --labs-dev-radius: 2.8rem;
    --labs-dev-bezel: 12px;
    --labs-safe-top: 2.95rem;
    --labs-safe-bottom: 2.1rem;
  }
  .labs-device[data-labs-device-model="iphone-se"] {
    --labs-dev-radius: 0.9rem;
    --labs-dev-bezel: 13px;
    --labs-safe-top: 1.5rem;
    --labs-safe-bottom: 2.6rem;
  }
  .labs-device[data-labs-device-model="pixel-8"] {
    --labs-dev-radius: 2rem;
    --labs-dev-bezel: 11px;
    --labs-safe-top: 2.2rem;
    --labs-safe-bottom: 1.6rem;
  }
  .labs-device[data-labs-device-model="galaxy-s23"] {
    --labs-dev-radius: 1.8rem;
    --labs-dev-bezel: 11px;
    --labs-safe-top: 2rem;
    --labs-safe-bottom: 1.6rem;
  }
  .labs-device[data-labs-device-model="ipad-pro-12"] {
    --labs-dev-radius: 1.6rem;
    --labs-dev-bezel: 15px;
    --labs-safe-top: 1.6rem;
    --labs-safe-bottom: 1.4rem;
  }
  .labs-device[data-labs-device-model="ipad-air"] {
    --labs-dev-radius: 1.4rem;
    --labs-dev-bezel: 14px;
    --labs-safe-top: 1.5rem;
    --labs-safe-bottom: 1.3rem;
  }
  .labs-device[data-labs-device-model="ipad-10"] {
    --labs-dev-radius: 1.2rem;
    --labs-dev-bezel: 14px;
    --labs-safe-top: 1.5rem;
    --labs-safe-bottom: 1.3rem;
  }
  .labs-device[data-labs-device-model="ipad"] {
    --labs-dev-radius: 1.1rem;
    --labs-dev-bezel: 16px;
    --labs-safe-top: 1.4rem;
    --labs-safe-bottom: 2.2rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="iphone-15-pro-max"]) {
    --labs-dev-radius: 3rem;
    --labs-dev-bezel: 12px;
    --labs-safe-top: 3.4rem;
    --labs-safe-bottom: 2.1rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="iphone-15-pro"]) {
    --labs-dev-radius: 3rem;
    --labs-dev-bezel: 12px;
    --labs-safe-top: 3.4rem;
    --labs-safe-bottom: 2.1rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="iphone-14"]) {
    --labs-dev-radius: 2.8rem;
    --labs-dev-bezel: 12px;
    --labs-safe-top: 2.95rem;
    --labs-safe-bottom: 2.1rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="iphone-se"]) {
    --labs-dev-radius: 0.9rem;
    --labs-dev-bezel: 13px;
    --labs-safe-top: 1.5rem;
    --labs-safe-bottom: 2.6rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="pixel-8"]) {
    --labs-dev-radius: 2rem;
    --labs-dev-bezel: 11px;
    --labs-safe-top: 2.2rem;
    --labs-safe-bottom: 1.6rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="galaxy-s23"]) {
    --labs-dev-radius: 1.8rem;
    --labs-dev-bezel: 11px;
    --labs-safe-top: 2rem;
    --labs-safe-bottom: 1.6rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="ipad-pro-12"]) {
    --labs-dev-radius: 1.6rem;
    --labs-dev-bezel: 15px;
    --labs-safe-top: 1.6rem;
    --labs-safe-bottom: 1.4rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="ipad-air"]) {
    --labs-dev-radius: 1.4rem;
    --labs-dev-bezel: 14px;
    --labs-safe-top: 1.5rem;
    --labs-safe-bottom: 1.3rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="ipad-10"]) {
    --labs-dev-radius: 1.2rem;
    --labs-dev-bezel: 14px;
    --labs-safe-top: 1.5rem;
    --labs-safe-bottom: 1.3rem;
  }
  .labs-frame--device:has(.labs-device[data-labs-device-model="ipad"]) {
    --labs-dev-radius: 1.1rem;
    --labs-dev-bezel: 16px;
    --labs-safe-top: 1.4rem;
    --labs-safe-bottom: 2.2rem;
  }
  .labs-frame--device.labs-device--landscape {
    --labs-safe-left: var(--labs-safe-top, 0px);
    --labs-safe-top: 0.6rem;
    --labs-safe-bottom: 0.6rem;
  }
}
@layer utilities {
  .labs-rail__modeswitch {
    padding: 4px 10px 0;
  }
  .labs-ds {
    display: none;
  }
  .labs-shell[data-labs-mode="design-system"] .labs-rail, .labs-shell[data-labs-mode="design-system"] .labs-rail__edge, .labs-shell[data-labs-mode="design-system"] .labs-stage, .labs-shell[data-labs-mode="design-system"] .labs-inspector, .labs-shell[data-labs-mode="design-system"] .labs-inspector__edge {
    display: none;
  }
  .labs-shell[data-labs-mode="design-system"] .labs-ds {
    display: grid;
    grid-template-columns: var(--labs-rail-width, 16rem) minmax(0, 1fr);
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    min-height: 0;
    min-width: 0;
    background: var(--bg-labs-canvas);
  }
  .labs-ds__sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border-labs-subtle);
    background: var(--bg-labs-panel);
  }
  .labs-ds__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 2.75rem;
    padding: 0 0.75rem;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border-labs-subtle);
    color: var(--text-labs);
  }
  .labs-ds__brand img {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
  }
  .labs-ds__brand-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-labs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labs-ds__search {
    position: relative;
    padding: 6px 12px 10px;
  }
  .labs-ds__search i {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-labs-muted);
    font-size: 0.8125rem;
    pointer-events: none;
  }
  .labs-ds__search-field {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-md);
    background: var(--bg-labs);
    color: var(--text-labs);
    font-size: 0.8125rem;
  }
  .labs-ds__search-field::placeholder {
    color: var(--text-labs-muted);
  }
  .labs-ds__search-field:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring-labs);
    border-color: transparent;
  }
  .labs-ds__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 8px 16px;
  }
  .labs-ds__section-label {
    padding: 12px 8px 5px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-labs-muted);
  }
  .labs-ds__group {
    border: 0;
  }
  .labs-ds__group-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    color: var(--text-labs);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .labs-ds__group-summary::-webkit-details-marker {
    display: none;
  }
  .labs-ds__group-summary:hover {
    background: var(--bg-labs-hover);
  }
  .labs-ds__group-chevron {
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
    transition: transform var(--duration-fast) var(--ease-default);
  }
  .labs-ds__group[open] > .labs-ds__group-summary .labs-ds__group-chevron {
    transform: rotate(90deg);
  }
  .labs-ds__group-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .labs-ds__group-count {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-labs-muted);
    background: var(--bg-labs);
    border: 1px solid var(--border-labs-subtle);
    border-radius: var(--radius-full);
    padding: 1px 7px;
  }
  .labs-ds__group-items {
    padding: 2px 0 6px 12px;
  }
  .labs-ds__link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 9px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-labs-muted);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .labs-ds__link i {
    width: 15px;
    text-align: center;
    font-size: 0.8125rem;
    flex: 0 0 auto;
  }
  .labs-ds__link-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labs-ds__link:hover {
    background: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  .labs-ds__link.is-active {
    background: var(--bg-labs-active);
    color: var(--text-labs-accent);
    font-weight: 600;
  }
  .labs-ds__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring-labs);
  }
  .labs-ds__soon {
    padding: 5px 9px;
    font-size: 0.75rem;
    color: var(--text-labs-muted);
    font-style: italic;
    opacity: 0.75;
  }
  .labs-ds__nav-empty {
    display: none;
    padding: 10px 9px;
    font-size: 0.8125rem;
    color: var(--text-labs-muted);
  }
  .labs-ds__main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }
  .labs-toolbar.labs-ds__topbar {
    display: flex;
    justify-content: space-between;
    grid-template-columns: none;
    flex: 0 0 auto;
  }
  .labs-ds__topbar .labs-toolbar__end {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .labs-ds__viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    background-color: var(--bg-labs-canvas);
    background-image: radial-gradient(circle, var(--dot-labs) 1px, transparent 1.5px);
    background-size: 24px 24px;
  }
  .labs-ds__viewport.is-grid-hidden {
    background-image: none;
  }
  .labs-ds__viewport.ds-commenting {
    cursor: crosshair;
  }
  .labs-ds__viewport.ds-commenting .labs-ds-doc.is-active {
    outline: 2px dashed var(--text-labs-accent);
    outline-offset: 8px;
    border-radius: var(--radius-md);
  }
  .labs-ds__world {
    position: relative;
    min-height: 100%;
  }
  .labs-ds__main-inner {
    max-width: 60rem;
    margin: 0 auto;
    padding: 40px 44px 96px;
  }
  .ds-note-pins {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
  }
  .ds-note-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 2px solid var(--bg-labs-panel);
    border-radius: var(--radius-full);
    background: var(--text-labs-accent);
    color: #fff;
    box-shadow: var(--shadow-md);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
  }
  .ds-note-pin:hover {
    filter: brightness(1.06);
  }
  .ds-note-pin:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring-labs);
  }
  .ds-note-composer {
    position: fixed;
    z-index: 80;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
    box-shadow: var(--shadow-2xl);
  }
  .ds-note-composer__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-labs);
  }
  .ds-note-composer__label i {
    color: var(--text-labs-accent);
  }
  .ds-note-composer__input {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    padding: 8px 10px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-md);
    background: var(--bg-labs);
    color: var(--text-labs);
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  .ds-note-composer__input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring-labs);
    border-color: transparent;
  }
  .ds-note-composer__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
  }
  .labs-shell[data-labs-mode="design-system"].is-notes-open .labs-notes {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 92vw);
    height: 100dvh;
    z-index: 70;
    border-left: 1px solid var(--border-labs);
    box-shadow: var(--shadow-2xl);
    pointer-events: auto;
  }
  .labs-ds-doc {
    display: none;
  }
  .labs-ds-doc.is-active {
    display: block;
  }
  .labs-ds-doc__head {
    padding-bottom: 22px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border-labs);
  }
  .labs-ds-doc__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-labs-accent);
    margin-bottom: 10px;
  }
  .labs-ds-doc__title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text-labs);
    margin: 0;
  }
  .labs-ds-doc__summary {
    margin: 8px 0 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text-labs-muted);
    max-width: 42rem;
  }
  .labs-ds-doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }
  .labs-ds-doc__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-full);
    background: var(--bg-labs);
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
  }
  .labs-ds-doc__source i {
    color: var(--text-labs-accent);
  }
  .labs-ds-doc__section {
    margin-top: 40px;
  }
  .labs-ds-doc__section:first-of-type {
    margin-top: 0;
  }
  .labs-ds-doc__section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-labs);
    margin: 0 0 14px;
  }
  .labs-ds-doc__section-title::before {
    content: "";
    width: 4px;
    height: 15px;
    border-radius: var(--radius-full);
    background: var(--text-labs-accent);
    transform: translateY(2px);
  }
  .labs-ds-doc__prose {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-labs);
    max-width: 44rem;
  }
  .labs-ds-doc__prose code {
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--bg-labs);
    border: 1px solid var(--border-labs-subtle);
    color: var(--text-labs-accent);
  }
  .labs-ds-anatomy {
    display: grid;
    gap: 1px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--border-labs-subtle);
  }
  .labs-ds-anatomy__row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 16px;
    padding: 11px 16px;
    background: var(--bg-labs-panel);
  }
  .labs-ds-anatomy__name {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-labs);
  }
  .labs-ds-anatomy__detail {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-labs-muted);
  }
  .labs-ds-anatomy__detail code {
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.85em;
    color: var(--text-labs-accent);
  }
  @media (max-width: 720px) {
    .labs-ds-anatomy__row {
      grid-template-columns: 1fr;
      gap: 3px;
    }
  }
  .labs-ds-gallery {
    display: grid;
    gap: 18px;
  }
  .labs-ds-gallery--split {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .labs-ds-specimen {
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-labs-panel);
  }
  .labs-ds-specimen__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-labs-subtle);
    background: var(--bg-labs);
  }
  .labs-ds-specimen__name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-labs);
  }
  .labs-ds-specimen__note {
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
    font-family: "Space Mono", ui-monospace, monospace;
    margin-left: auto;
  }
  .labs-ds-specimen__stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 22px;
    background: radial-gradient(var(--dot-labs) 1px, transparent 1px) 0 0 / 16px 16px, var(--bg-labs-frame);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(var(--dot-labs) 1px, transparent 1px) 0 0 / 16px 16px, color-mix(in oklch, var(--bg-labs-frame), white 8%);
    }
  }
  .labs-ds-specimen__stage--center {
    justify-content: center;
  }
  .labs-ds-specimen__stage--stack {
    flex-direction: column;
    align-items: stretch;
  }
  .labs-ds-specimen__stage--pad-lg {
    padding: 34px;
  }
  .labs-ds-state {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .labs-ds-state__label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-labs-muted);
  }
  .labs-ds-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 12px;
  }
  .labs-ds-swatch {
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-labs-panel);
  }
  .labs-ds-swatch__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .labs-ds-swatch__chip {
    position: relative;
    height: 58px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 5px 7px;
  }
  .labs-ds-swatch__chip::after {
    content: attr(data-theme-label);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-labs-muted);
    background: var(--bg-labs-panel);
    border: 1px solid var(--border-labs-subtle);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
  }
  .labs-ds-swatch__chip--border {
    background: var(--bg-labs-frame);
  }
  .labs-ds-swatch__chip--border > span {
    position: absolute;
    inset: 10px;
    border-radius: var(--radius-sm);
    border: 2px solid;
  }
  .labs-ds-swatch__meta {
    padding: 8px 11px 10px;
    border-top: 1px solid var(--border-labs-subtle);
  }
  .labs-ds-swatch__name {
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--text-labs);
    word-break: break-all;
  }
  .labs-ds-swatch__role {
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
  }
  .labs-ds-type {
    display: grid;
    gap: 2px;
  }
  .labs-ds-type__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12rem;
    gap: 20px;
    align-items: baseline;
    padding: 13px 4px;
    border-bottom: 1px solid var(--border-labs-subtle);
  }
  .labs-ds-type__row:last-child {
    border-bottom: 0;
  }
  .labs-ds-type__sample {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .labs-ds-type__meta {
    text-align: right;
  }
  .labs-ds-type__class {
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-labs-accent);
  }
  .labs-ds-type__spec {
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
    margin-top: 2px;
  }
  @media (max-width: 720px) {
    .labs-ds-type__row {
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .labs-ds-type__meta {
      text-align: left;
    }
  }
  .labs-ds-ramp {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 12px;
  }
  .labs-ds-ramp__cell {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
  }
  .labs-ds-ramp__demo {
    display: flex;
    align-items: center;
    min-height: 54px;
  }
  .labs-ds-ramp__bar {
    height: 14px;
    max-width: 100%;
    border-radius: var(--radius-sm);
    background: var(--text-labs-accent);
  }
  .labs-ds-ramp__box {
    width: 54px;
    height: 54px;
    background: var(--bg-labs-active);
    border: 1px solid var(--border-labs);
  }
  .labs-ds-ramp__tile {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-labs-frame);
    border: 1px solid var(--border-labs-subtle);
  }
  .labs-ds-ramp__track {
    width: 100%;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--bg-labs);
    display: flex;
    align-items: center;
    padding: 0 4px;
    overflow: hidden;
  }
  .labs-ds-ramp__dot {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--text-labs-accent);
    margin-left: 0;
    transition-property: margin-left;
    transition-duration: 900ms;
    transition-timing-function: var(--ease-default);
  }
  .labs-ds-ramp__cell:hover .labs-ds-ramp__dot {
    margin-left: calc(100% - 18px);
  }
  @media (prefers-reduced-motion: reduce) {
    .labs-ds-ramp__dot {
      transition: none;
    }
  }
  .labs-ds-ramp__name {
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-labs);
    word-break: break-all;
  }
  .labs-ds-ramp__value {
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
  }
  .labs-ds-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 10px;
  }
  .labs-ds-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
    color: var(--text-labs);
  }
  .labs-ds-icon > i {
    font-size: 1.25rem;
    color: var(--text-labs);
  }
  .labs-ds-icon__name {
    font-size: 0.625rem;
    color: var(--text-labs-muted);
    font-family: "Space Mono", ui-monospace, monospace;
  }
  .labs-ds-overview__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 12px;
    margin-top: 24px;
  }
  .labs-ds-overview__stat {
    padding: 16px 18px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
  }
  .labs-ds-overview__stat-num {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-labs);
  }
  .labs-ds-overview__stat-label {
    font-size: 0.75rem;
    color: var(--text-labs-muted);
    margin-top: 2px;
  }
  .ds-replay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 4px 10px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-full);
    background: var(--bg-labs-panel);
    color: var(--text-labs-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .ds-replay:hover {
    background: var(--bg-labs-hover);
    color: var(--text-labs);
  }
  .ds-replay:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring-labs);
  }
  .ds-replay i {
    transition: transform var(--duration-slow) var(--ease-default);
  }
  .ds-replay.is-spinning i {
    transform: rotate(360deg);
  }
  .labs-ds-specimen__stage.ds-resetting, .labs-ds-specimen__stage.ds-resetting * {
    transition: none !important;
    animation: none !important;
  }
  .ds-code {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs);
    overflow-x: auto;
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-labs);
  }
  .ds-code code {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
  }
  .labs-ds-doclink {
    color: var(--text-labs-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .ds-anim-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 8px 12px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-md);
    background: var(--bg-labs-panel);
    color: var(--text-labs);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .ds-anim-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-active);
    color: var(--text-labs-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
  }
  .ds-ease-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 14px;
    width: 100%;
  }
  .ds-ease-cell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
  }
  .ds-ease__plot {
    height: 104px;
  }
  .ds-ease__plot svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .ds-ease__frame {
    fill: none;
    stroke: var(--border-labs);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .ds-ease__diag {
    stroke: var(--border-labs-subtle);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
  }
  .ds-ease__curve {
    fill: none;
    stroke: var(--text-labs-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .ds-ease__run, .ds-ease-race__track {
    position: relative;
    height: 20px;
    border: 1px solid var(--border-labs-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-labs);
    overflow: hidden;
  }
  .ds-ease-race__track {
    flex: 1 1 auto;
  }
  .ds-ease__dot {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: var(--radius-full);
    background: var(--text-labs-accent);
    transition: left 1100ms var(--ds-ease, var(--ease-default));
  }
  .is-playing .ds-ease__dot {
    left: calc(100% - 17px);
  }
  .ds-ease__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .ds-ease__name {
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-labs);
  }
  .ds-ease__val {
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
  }
  .ds-ease-race {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .ds-ease-race__label {
    flex: 0 0 auto;
    width: 150px;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-labs-muted);
  }
  .ds-dur-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .ds-dur__name {
    flex: 0 0 auto;
    width: 150px;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-labs);
  }
  .ds-dur__track {
    position: relative;
    flex: 1 1 auto;
    height: 12px;
    border: 1px solid var(--border-labs-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-labs);
    overflow: hidden;
  }
  .ds-dur__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--text-labs-accent);
    transition: width var(--ds-dur, var(--duration-normal)) var(--ease-out);
  }
  .is-playing .ds-dur__fill {
    width: 100%;
  }
  .ds-dur__val {
    flex: 0 0 auto;
    width: 54px;
    text-align: right;
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
  }
  .ds-fx-card {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 16px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
    color: var(--text-labs);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
  }
  .ds-fx-card span {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--text-labs-muted);
    font-family: "Space Mono", ui-monospace, monospace;
  }
  .ds-fx-lift {
    transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  }
  .ds-fx-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .ds-fx-tint {
    transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
  }
  .ds-fx-tint:hover {
    background: var(--bg-labs-active);
    border-color: var(--text-labs-accent);
    color: var(--text-labs-accent);
  }
  .ds-fx-scale {
    transition: transform var(--duration-fast) var(--ease-bounce);
  }
  .ds-fx-scale:hover {
    transform: scale(1.06);
  }
  .ds-fx-underline {
    position: relative;
    color: var(--text-labs-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 3px;
  }
  .ds-fx-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--text-labs-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-normal) var(--ease-out);
  }
  .ds-fx-underline:hover::after {
    transform: scaleX(1);
  }
  .ds-disclosure {
    width: 100%;
    max-width: 480px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-labs-panel);
  }
  .ds-disclosure__head {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: 0;
    color: var(--text-labs);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
  }
  .ds-disclosure__chev {
    color: var(--text-labs-muted);
    font-size: 0.75rem;
    transition: transform var(--duration-fast) var(--ease-default);
  }
  .ds-disclosure.is-open .ds-disclosure__chev {
    transform: rotate(90deg);
  }
  .ds-disclosure__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-slow) var(--ease-default);
  }
  .ds-disclosure.is-open .ds-disclosure__panel {
    grid-template-rows: 1fr;
  }
  .ds-disclosure__inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 14px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-labs-muted);
  }
  .ds-disclosure.is-open .ds-disclosure__inner {
    padding: 0 14px 13px;
  }
  .ds-slide-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .ds-slide-row__label {
    flex: 0 0 auto;
    width: 210px;
    font-size: 0.75rem;
    color: var(--text-labs);
  }
  .ds-slide-row__warn {
    color: var(--text-warning);
  }
  .ds-slide-row__track {
    position: relative;
    width: 340px;
    max-width: 100%;
    height: 34px;
    border: 1px solid var(--border-labs-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-labs);
    overflow: hidden;
  }
  .ds-slide-row__box {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--text-labs-accent);
  }
  .ds-slide-row__box--good {
    transition: transform 900ms var(--ease-default);
  }
  .is-playing .ds-slide-row__box--good {
    transform: translateX(300px);
  }
  .ds-slide-row__box--bad {
    background: var(--text-warning);
    transition: margin-left 900ms var(--ease-default);
  }
  .is-playing .ds-slide-row__box--bad {
    margin-left: 300px;
  }
  .ds-kf-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
  }
  .ds-kf-spin {
    color: var(--text-labs-accent);
    font-size: 1.35rem;
    animation: ds-spin 1s linear infinite;
  }
  .ds-kf-pulse {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--text-labs-accent);
    animation: ds-pulse 1.4s var(--ease-default) infinite;
  }
  .ds-kf-ping {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-flex;
  }
  .ds-kf-ping__dot {
    position: absolute;
    inset: 5px;
    border-radius: var(--radius-full);
    background: var(--text-labs-accent);
  }
  .ds-kf-ping__ring {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: var(--text-labs-accent);
    animation: ds-ping 1.3s var(--ease-out) infinite;
  }
  .ds-kf-bounce {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    background: var(--text-labs-accent);
    animation: ds-bounce 1s var(--ease-bounce) infinite;
  }
  .ds-kf-line {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .ds-kf-line__label {
    flex: 0 0 auto;
    width: 130px;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-labs-muted);
  }
  .ds-kf-shimmer {
    flex: 1 1 auto;
    height: 14px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--bg-labs) 25%, var(--bg-labs-hover) 37%, var(--bg-labs) 63%);
    background-size: 400% 100%;
    animation: ds-shimmer 1.4s ease infinite;
  }
  .ds-kf-indet {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--bg-labs);
    overflow: hidden;
  }
  .ds-kf-indet__bar {
    position: absolute;
    top: 0;
    left: -40%;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: var(--text-labs-accent);
    animation: ds-indet 1.2s var(--ease-default) infinite;
  }
  @keyframes ds-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes ds-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.4;
      transform: scale(0.82);
    }
  }
  @keyframes ds-ping {
    0% {
      transform: scale(0.4);
      opacity: 0.7;
    }
    80%, 100% {
      transform: scale(1.9);
      opacity: 0;
    }
  }
  @keyframes ds-bounce {
    0%, 100% {
      transform: translateY(6px);
    }
    50% {
      transform: translateY(-8px);
    }
  }
  @keyframes ds-shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: 0 0;
    }
  }
  @keyframes ds-indet {
    0% {
      left: -40%;
    }
    100% {
      left: 100%;
    }
  }
  @keyframes ds-pop {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.35);
    }
    100% {
      transform: scale(1);
    }
  }
  .ds-stagger-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
  }
  .ds-stagger-grid .ds-anim-tile {
    width: 100%;
    min-height: 48px;
  }
  .ds-stagger-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .ds-stagger-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-md);
    background: var(--bg-labs-panel);
  }
  .ds-stagger-row__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--text-labs-accent);
  }
  .ds-stagger-row__label {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    color: var(--text-labs);
  }
  .ds-stagger-row__meta {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    color: var(--text-labs-muted);
  }
  .ds-progress {
    width: 100%;
    max-width: 440px;
  }
  .ds-progress__label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-labs-muted);
    margin-bottom: 5px;
  }
  .ds-progress__track {
    display: block;
    height: 8px;
    border: 1px solid var(--border-labs-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-labs);
    overflow: hidden;
  }
  .ds-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--text-labs-accent);
    transition: width var(--duration-slower) var(--ease-out);
  }
  .is-playing .ds-progress__fill {
    width: var(--ds-progress, 100%);
  }
  .ds-progress__fill--success {
    background: var(--text-success);
  }
  .ds-press {
    transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  }
  .ds-press:active {
    transform: scale(0.96);
  }
  .ds-tile-btn {
    padding: 10px 16px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
    color: var(--text-labs);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
  }
  .ds-tile-btn:active {
    box-shadow: none;
  }
  .ds-switch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
  }
  .ds-switch input, .ds-rm-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .ds-switch__track {
    display: inline-flex;
    align-items: center;
    width: 42px;
    height: 24px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-full);
    background: var(--bg-labs-active);
    transition: background var(--duration-normal) var(--ease-default);
  }
  .ds-switch__thumb {
    width: 18px;
    height: 18px;
    margin: 0 2px;
    border-radius: var(--radius-full);
    background: var(--bg-labs-panel);
    box-shadow: var(--shadow-sm);
    transform: translateX(0);
    transition: transform var(--duration-normal) var(--ease-default);
  }
  .ds-switch input:checked + .ds-switch__track, .ds-rm-switch input:checked + .ds-switch__track {
    background: var(--text-labs-accent);
  }
  .ds-switch input:checked + .ds-switch__track .ds-switch__thumb, .ds-rm-switch input:checked + .ds-switch__track .ds-switch__thumb {
    transform: translateX(18px);
    background: #fff;
  }
  .ds-switch input:focus-visible + .ds-switch__track, .ds-rm-switch input:focus-visible + .ds-switch__track {
    box-shadow: 0 0 0 2px var(--ring-labs);
  }
  .ds-like {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .ds-like__icon {
    font-size: 1.4rem;
    color: var(--border-labs);
    transition: transform var(--duration-normal) var(--ease-bounce), color var(--duration-fast) var(--ease-default);
  }
  .ds-like input:checked ~ .ds-like__icon {
    color: var(--text-danger);
    animation: ds-pop var(--duration-slow) var(--ease-bounce);
  }
  .ds-like--star input:checked ~ .ds-like__icon {
    color: var(--text-warning);
  }
  .ds-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
    padding: 14px 18px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
  }
  .ds-kpi__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-labs-muted);
  }
  .ds-kpi__value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-labs);
    font-variant-numeric: tabular-nums;
  }
  .ds-three {
    position: relative;
    width: 100%;
  }
  .ds-three__canvas {
    display: block;
    width: 100%;
    height: 300px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-frame);
    cursor: grab;
    touch-action: none;
  }
  .ds-three__canvas:active {
    cursor: grabbing;
  }
  .ds-three__status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    color: var(--text-labs-muted);
  }
  .ds-three__toolbar {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    gap: 6px;
  }
  .ds-three__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-md);
    background: var(--bg-labs-panel);
    color: var(--text-labs);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
  }
  .ds-three__btn:hover {
    background: var(--bg-labs-hover);
  }
  .ds-three__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-labs-muted);
  }
  .ds-three__note i {
    color: var(--text-labs-accent);
  }
  .ds-rm-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
  }
  .ds-rm-col__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-labs);
  }
  .ds-rm-col__head i {
    color: var(--text-labs-accent);
  }
  .ds-rm-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border-labs);
    border-radius: var(--radius-lg);
    background: var(--bg-labs-panel);
  }
  .ds-rm-chip {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-labs-active);
    color: var(--text-labs);
    font-size: 0.8125rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .ds-rm-panel.is-playing .ds-rm-chip {
    opacity: 1;
    transform: none;
  }
  .ds-rm-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-labs-muted);
  }
  .ds-rm-foot .ds-kf-spin {
    color: var(--text-labs-accent);
    font-size: 1rem;
  }
  .ds-rm-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .ds-rm-switch__label {
    font-size: 0.8125rem;
    color: var(--text-labs);
  }
  .ds-rm-sim .ds-rm-chip {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ds-rm-sim .ds-kf-spin, .ds-rm-sim .ds-kf-shimmer, .ds-rm-sim .ds-kf-pulse, .ds-rm-sim .ds-kf-ping__ring, .ds-rm-sim .ds-kf-bounce {
    animation: none !important;
  }
  @media (max-width: 720px) {
    .ds-rm-compare {
      grid-template-columns: 1fr;
    }
    .ds-stagger-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ds-ease__dot, .ds-dur__fill, .ds-progress__fill, .ds-slide-row__box, .ds-rm-chip, .ds-fx-lift, .ds-fx-tint, .ds-fx-scale, .ds-fx-underline::after, .ds-switch__track, .ds-switch__thumb, .ds-like__icon, .ds-disclosure__panel, .ds-disclosure__chev, .ds-replay i, .ds-press {
      transition: none !important;
    }
    .ds-kf-spin, .ds-kf-pulse, .ds-kf-ping__ring, .ds-kf-bounce, .ds-kf-shimmer, .ds-kf-indet__bar, .ds-like input:checked ~ .ds-like__icon {
      animation: none !important;
    }
    .is-playing .ds-ease__dot {
      left: calc(100% - 17px);
    }
    .is-playing .ds-dur__fill {
      width: 100%;
    }
    .is-playing .ds-progress__fill {
      width: var(--ds-progress, 100%);
    }
    .is-playing .ds-rm-chip {
      opacity: 1;
      transform: none;
    }
    .is-playing .ds-slide-row__box--good {
      transform: translateX(300px);
    }
    .is-playing .ds-slide-row__box--bad {
      margin-left: 300px;
    }
  }
}
@layer utilities {
  [data-theme="theme-light"] .labs-shell--studio {
    --bg-labs-canvas: var(--color-white);
  }
  [data-theme="theme-dark"] .labs-shell--studio {
    --bg-labs-canvas: var(--color-black);
  }
  .labs-studio-host {
    padding: 24px 28px;
    min-width: 0;
  }
}
@layer utilities {
  .pattern-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-full);
    border: 0;
    background: transparent;
    cursor: help;
    color: var(--text-quaternary);
    font-size: 0.75rem;
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .pattern-help-trigger:hover {
    color: var(--text-secondary);
  }
  .pattern-help-trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .pattern-help-pop {
    max-width: 18rem;
  }
  .pattern-help-pop__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-block-end: 0.25rem;
  }
  .pattern-help-pop__body {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    line-height: 1.5;
  }
  .pattern-help-pop__kbd {
    margin-block-start: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-quaternary);
  }
  .pattern-help-pop__kbd kbd {
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .pattern-help-pop__more {
    display: inline-block;
    margin-block-start: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--bg-brand-solid));
    text-decoration: none;
  }
  .pattern-help-pop__more:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
@layer utilities {
  .pattern-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 0.8125rem;
  }
  .pattern-copy:hover {
    color: var(--text-secondary);
    background-color: var(--bg-secondary-hover);
  }
  .pattern-copy:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .pattern-copy.is-copied {
    color: var(--text-success);
  }
  .pattern-copy__done {
    display: none;
  }
  .pattern-copy.is-copied .pattern-copy__idle {
    display: none;
  }
  .pattern-copy.is-copied .pattern-copy__done {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    animation: pattern-copy-pop var(--duration-normal) var(--ease-out);
  }
  @keyframes pattern-copy-pop {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-copy.is-copied .pattern-copy__done {
      animation: none;
    }
  }
}
@layer utilities {
  .pattern-undo-removing {
    overflow: hidden;
    animation: pattern-undo-collapse var(--duration-normal) var(--ease-in) forwards;
  }
  @keyframes pattern-undo-collapse {
    from {
      opacity: 1;
      max-height: 4rem;
    }
    to {
      opacity: 0;
      max-height: 0;
      padding-block: 0;
      margin-block: 0;
    }
  }
  .pattern-undo-restored {
    animation: pattern-undo-restore var(--duration-slow) var(--ease-out);
  }
  @keyframes pattern-undo-restore {
    from {
      background-color: color-mix(in oklch, var(--bg-success-solid) 20%, transparent);
    }
    to {
      background-color: transparent;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-undo-removing {
      animation: none;
      opacity: 0;
      max-height: 0;
    }
    .pattern-undo-restored {
      animation: none;
    }
  }
}
@layer utilities {
  .pattern-lrt {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-secondary);
    background-color: var(--bg-surface, var(--bg-primary));
    width: min(22rem, 100%);
    overflow: hidden;
  }
  .pattern-lrt__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-block-end: 1px solid var(--border-secondary);
  }
  .pattern-lrt__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
  }
  .pattern-lrt__min {
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
  }
  .pattern-lrt__min:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary-hover);
  }
  .pattern-lrt__min:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .pattern-lrt__body {
    padding: 0.875rem;
  }
  .pattern-lrt__note {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-block-start: 0.5rem;
  }
  .pattern-lrt.is-minimized .pattern-lrt__body {
    display: none;
  }
}
@layer utilities {
  .pattern-action-result {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
  }
  .pattern-action-result__note {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  .pattern-action-result.is-done .pattern-action-result__note {
    opacity: 1;
  }
  .pattern-action-result.is-done .pattern-action-result__note {
    color: var(--text-success);
  }
  .pattern-action-result.is-error .pattern-action-result__note {
    opacity: 1;
    color: var(--text-danger);
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-action-result__note {
      transition: none;
    }
  }
}
@layer utilities {
  .pattern-dependent__reveal {
    display: none;
  }
  .pattern-dependent:has(> [data-dependent-trigger]:checked) > .pattern-dependent__reveal, .pattern-dependent:has(.pattern-dependent__control [data-dependent-trigger]:checked) .pattern-dependent__reveal {
    display: block;
    animation: pattern-dependent-in var(--duration-fast) var(--ease-out);
  }
  .pattern-dependent:has([data-dependent-value] [value="other"]:checked) [data-when="other"] {
    display: block;
    animation: pattern-dependent-in var(--duration-fast) var(--ease-out);
  }
  @keyframes pattern-dependent-in {
    from {
      opacity: 0;
      transform: translateY(-0.25rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-dependent__reveal {
      animation: none !important;
    }
  }
}
@layer utilities {
  .pattern-inline-edit-row {
    display: grid;
    grid-template-columns: minmax(7rem, 30%) 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--border-secondary);
  }
  .pattern-inline-edit-row:last-child {
    border-block-end: 0;
  }
  .pattern-inline-edit-row__label {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .pattern-inline-edit-row__status {
    justify-self: end;
    min-width: 6rem;
    text-align: end;
  }
  .pattern-inline-edit-row .inline-edit__display:hover {
    background-color: var(--bg-secondary-hover);
  }
}
@layer utilities {
  .pattern-form-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pattern-form-summary__fields {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .pattern-form-summary__actions {
    display: flex;
    gap: 0.5rem;
    padding-block-start: 0.25rem;
  }
}
@layer utilities {
  .pattern-autosave-form__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 0.75rem;
    margin-block-end: 1rem;
    border-block-end: 1px solid var(--border-secondary);
  }
  .pattern-autosave-form__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
}
@layer utilities {
  .pattern-empty-dashboard {
    position: relative;
  }
  .pattern-empty-dashboard__ghost {
    opacity: 0.4;
    pointer-events: none;
    filter: saturate(0.6);
    user-select: none;
  }
  .pattern-empty-dashboard__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .pattern-empty-dashboard__card {
    max-width: 26rem;
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-secondary);
  }
}
@layer utilities {
  .pattern-activity__group + .pattern-activity__group {
    margin-block-start: 0.5rem;
  }
  .pattern-activity__day {
    position: sticky;
    inset-block-start: 0;
    padding: 0.375rem 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-quaternary);
    background-color: var(--bg-surface, var(--bg-primary));
  }
}
@layer utilities {
  .pattern-metric-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
  }
  .pattern-metric-tile {
    padding: 1rem;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs);
    background-color: var(--bg-surface, var(--bg-primary));
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .pattern-metric-tile__label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .pattern-metric-tile__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .pattern-metric-tile__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .pattern-metric-tile__delta--up {
    color: var(--text-success);
  }
  .pattern-metric-tile__delta--down {
    color: var(--text-danger);
  }
  .pattern-metric-tile--inverted .pattern-metric-tile__delta--up {
    color: var(--text-danger);
  }
  .pattern-metric-tile--inverted .pattern-metric-tile__delta--down {
    color: var(--text-success);
  }
  .pattern-metric-tile__spark {
    margin-block-start: 0.5rem;
  }
  .pattern-metric-tiles--compact {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
  }
  .pattern-metric-tiles--compact .pattern-metric-tile {
    padding: 0.625rem 0.75rem;
  }
  .pattern-metric-tiles--compact .pattern-metric-tile__value {
    font-size: 1.125rem;
  }
  .pattern-metric-tiles--compact .pattern-metric-tile__label {
    font-size: 0.6875rem;
  }
  .pattern-metric-tiles--compact .pattern-metric-tile__delta {
    font-size: 0.75rem;
  }
}
@layer utilities {
  .pattern-dashboard {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  .pattern-dashboard__kpis {
    grid-column: span 12;
  }
  .pattern-dashboard__charts {
    grid-column: span 8;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }
  .pattern-dashboard__side {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pattern-dashboard__card {
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs);
    background-color: var(--bg-surface, var(--bg-primary));
    padding: 1rem;
  }
  .pattern-dashboard__card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-block-end: 0.75rem;
  }
  @media (max-width: 64rem) {
    .pattern-dashboard__charts {
      grid-column: span 12;
    }
    .pattern-dashboard__side {
      grid-column: span 12;
    }
  }
  @media (max-width: 40rem) {
    .pattern-dashboard__charts {
      grid-template-columns: 1fr;
    }
  }
}
@layer utilities {
  .pattern-drill {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .pattern-drill__level {
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    overflow: hidden;
  }
  .pattern-drill__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: start;
    padding: 0.625rem 0.875rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-block-end: 1px solid var(--border-secondary);
    color: var(--text-secondary);
  }
  .pattern-drill__row:last-child {
    border-block-end: 0;
  }
  .pattern-drill__row:hover {
    background-color: var(--bg-secondary-hover);
    color: var(--text-primary);
  }
  .pattern-drill__row:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .pattern-drill__label {
    flex: 1;
    min-width: 0;
    font-weight: 500;
  }
  .pattern-drill__count {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    font-variant-numeric: tabular-nums;
  }
  .pattern-drill__enter {
    color: var(--text-quaternary);
  }
  [dir="rtl"] .pattern-drill__enter {
    transform: scaleX(-1);
  }
  .pattern-drill__row--leaf {
    cursor: default;
  }
}
@layer utilities {
  .pattern-record-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .pattern-record-header__main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  .pattern-record-header__identity {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    flex: 1;
  }
  .pattern-record-header__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
  }
  .pattern-record-header__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }
  .pattern-record-header__meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-block-start: 0.125rem;
  }
  .pattern-record-header__meta > * {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
  }
  .pattern-record-header__actions {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
  }
  @media (max-width: 40rem) {
    .pattern-record-header__main {
      flex-direction: column;
    }
    .pattern-record-header__actions {
      width: 100%;
      flex-wrap: wrap;
    }
  }
}
@layer utilities {
  .pattern-detail-tabs {
    display: flex;
    flex-direction: column;
  }
  .pattern-detail-tabs__tabs {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky, 20);
    background-color: var(--bg-surface, var(--bg-primary));
    border-block-end: 1px solid var(--border-secondary);
    padding-block-start: 0.5rem;
  }
  .pattern-detail-tabs__panel {
    padding-block: 1.25rem;
  }
  .pattern-detail-tabs__panel[hidden] {
    display: none;
  }
  .pattern-detail-tabs__panel {
    animation: pattern-detail-tabs-in var(--duration-fast) var(--ease-out);
  }
  @keyframes pattern-detail-tabs-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-detail-tabs__panel {
      animation: none;
    }
  }
}
@layer utilities {
  .modal .pattern-ldm-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }
  .modal .pattern-ldm-header__avatar {
    flex-shrink: 0;
  }
  .modal .pattern-ldm-header__meta {
    min-width: 0;
  }
  .modal .pattern-ldm-header__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .modal .pattern-ldm-header__sub {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .modal .pattern-ldm-header__actions {
    margin-inline-start: auto;
    display: inline-flex;
    gap: 0.5rem;
  }
  .modal .pattern-ldm__tabs {
    margin-block-start: 0.75rem;
  }
}
@layer utilities {
  .pattern-master-detail {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 20rem;
  }
  .pattern-master-detail__master {
    border-inline-end: 1px solid var(--border-secondary);
    overflow-y: auto;
  }
  .pattern-master-detail__item {
    display: block;
    width: 100%;
    text-align: start;
    padding: 0.625rem 0.875rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-block-end: 1px solid var(--border-secondary);
    color: var(--text-secondary);
  }
  .pattern-master-detail__item:hover {
    background-color: var(--bg-secondary-hover);
  }
  .pattern-master-detail__item[aria-current="true"] {
    background-color: var(--bg-brand-subtle, var(--bg-primary-subtle));
    box-shadow: inset 3px 0 0 0 var(--bg-brand-solid);
    color: var(--text-primary);
  }
  [dir="rtl"] .pattern-master-detail__item[aria-current="true"] {
    box-shadow: inset -3px 0 0 0 var(--bg-brand-solid);
  }
  .pattern-master-detail__detail {
    overflow-y: auto;
    padding: 1.25rem;
  }
  @media (max-width: 48rem) {
    .pattern-master-detail {
      grid-template-columns: 1fr;
    }
    .pattern-master-detail__detail {
      border-block-start: 1px solid var(--border-secondary);
    }
    .pattern-master-detail.is-detail-open .pattern-master-detail__master {
      display: none;
    }
    .pattern-master-detail:not(.is-detail-open) .pattern-master-detail__detail {
      display: none;
    }
  }
}
@layer utilities {
  .pattern-cmd-launcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    cursor: pointer;
    min-width: 12rem;
    justify-content: flex-start;
  }
  .pattern-cmd-launcher:hover {
    color: var(--text-secondary);
    background-color: var(--bg-secondary-hover);
  }
  .pattern-cmd-launcher:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .pattern-cmd-launcher__kbd {
    margin-inline-start: auto;
    display: inline-flex;
    gap: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-quaternary);
  }
  .pattern-cmd-launcher__kbd kbd {
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    font-family: inherit;
  }
}
@layer utilities {
  .pattern-sp__th {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
  }
  .pattern-sp__th:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .pattern-sp__sort {
    opacity: 0;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .pattern-sp__th:hover .pattern-sp__sort {
    opacity: 0.5;
  }
  [aria-sort="ascending"] .pattern-sp__sort, [aria-sort="descending"] .pattern-sp__sort {
    opacity: 1;
    color: var(--text-brand-secondary, var(--bg-brand-solid));
  }
  [aria-sort="descending"] .pattern-sp__sort {
    transform: rotate(180deg);
  }
  .pattern-sp__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block-start: 0.75rem;
  }
  .pattern-sp__range {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .pattern-sp__size {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .pattern-sp__pagination {
    margin-inline-start: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-sp__sort {
      transition: none;
    }
  }
}
@layer utilities {
  .pattern-saved-views {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
  }
  .pattern-saved-views__view {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .pattern-saved-views__view:hover {
    color: var(--text-secondary);
    background-color: var(--bg-secondary-hover);
  }
  .pattern-saved-views__view[aria-selected="true"] {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .pattern-saved-views__view:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .pattern-saved-views__dirty {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-brand-solid);
  }
  .pattern-saved-views__save {
    margin-inline-start: 0.5rem;
  }
}
@layer utilities {
  .pattern-instant-search {
    position: relative;
  }
  .pattern-instant-search__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.25rem);
    z-index: var(--z-dropdown, 30);
    background-color: var(--bg-surface, var(--bg-primary));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-secondary);
    overflow: hidden;
    display: none;
  }
  .pattern-instant-search.is-open .pattern-instant-search__panel {
    display: block;
  }
  .pattern-instant-search__status {
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .pattern-instant-search__list {
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.25rem;
  }
  .pattern-instant-search__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.875rem;
  }
  .pattern-instant-search__item:hover, .pattern-instant-search__item.is-active {
    background-color: var(--bg-secondary-hover);
    color: var(--text-primary);
  }
  .pattern-instant-search__item mark {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 22%, transparent);
    }
    color: inherit;
    border-radius: var(--radius-xs);
  }
  .pattern-instant-search__meta {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
}
@layer utilities {
  .pattern-faceted {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .pattern-faceted__rail {
    padding: 1rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    position: sticky;
    inset-block-start: 1rem;
  }
  .pattern-faceted__group + .pattern-faceted__group {
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border-secondary);
  }
  .pattern-faceted__group-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-quaternary);
    margin-block-end: 0.5rem;
  }
  .pattern-faceted__main {
    min-width: 0;
  }
  .pattern-faceted__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-block-end: 0.75rem;
  }
  .pattern-faceted__count {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .pattern-faceted__chips {
    display: inline-flex;
    gap: 0.375rem;
    flex-wrap: wrap;
  }
  .pattern-faceted__clear {
    margin-inline-start: auto;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--bg-brand-solid));
  }
  .pattern-faceted__clear:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  @media (max-width: 48rem) {
    .pattern-faceted {
      grid-template-columns: 1fr;
    }
    .pattern-faceted__rail {
      position: static;
    }
  }
  .pattern-faceted--top {
    grid-template-columns: 1fr;
  }
  .pattern-faceted--top .pattern-faceted__rail {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
  }
  .pattern-faceted--top .pattern-faceted__group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .pattern-faceted--top .pattern-faceted__group + .pattern-faceted__group {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
    padding-inline-start: 1.5rem;
    border-inline-start: 1px solid var(--border-secondary);
  }
  .pattern-faceted--top .pattern-faceted__group-title {
    margin-block-end: 0;
  }
}
@layer utilities {
  .pattern-import__map {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .pattern-import__row {
    display: grid;
    grid-template-columns: 1fr 1.5rem 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .pattern-import__source {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .pattern-import__sample {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .pattern-import__arrow {
    color: var(--text-quaternary);
    text-align: center;
  }
  .pattern-import__row.is-unmapped {
    box-shadow: inset 0 0 0 1px var(--border-warning-subtle, var(--border-warning));
  }
  .pattern-import__row.is-unmapped .pattern-import__arrow {
    color: var(--text-warning);
  }
  .pattern-import__summary {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    font-size: 0.8125rem;
  }
  .pattern-import__stat strong {
    font-variant-numeric: tabular-nums;
  }
  .pattern-import__stat--ok strong {
    color: var(--text-success);
  }
  .pattern-import__stat--warn strong {
    color: var(--text-warning);
  }
  .pattern-import__stat--err strong {
    color: var(--text-danger);
  }
}
@layer utilities {
  .pattern-bulk-edit {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .pattern-bulk-edit__count {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--border-secondary);
  }
  .pattern-bulk-edit__count strong {
    color: var(--text-primary);
  }
  .pattern-bulk-edit__field {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.625rem;
    align-items: start;
  }
  .pattern-bulk-edit__toggle {
    margin-block-start: 0.35rem;
  }
  .pattern-bulk-edit__field .form-control, .pattern-bulk-edit__field .form-label {
    opacity: 0.5;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .pattern-bulk-edit__field:has(.pattern-bulk-edit__toggle:checked) .form-control, .pattern-bulk-edit__field:has(.pattern-bulk-edit__toggle:checked) .form-label {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-bulk-edit__field .form-control, .pattern-bulk-edit__field .form-label {
      transition: none;
    }
  }
}
@layer utilities {
  .pattern-select-across {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
    box-shadow: inset 0 0 0 1px var(--border-info-subtle, var(--border-info));
    border-radius: var(--radius-md);
  }
  .pattern-select-across.is-all {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
    box-shadow: inset 0 0 0 1px var(--border-warning-subtle, var(--border-warning));
  }
  .pattern-select-across__link {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .pattern-select-across__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .pattern-select-across__count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}
@layer utilities {
  .pattern-bulk-flow__row {
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .pattern-bulk-flow__row.is-selected {
    background-color: var(--bg-brand-subtle, var(--bg-primary-subtle));
    box-shadow: inset 3px 0 0 0 var(--bg-brand-solid);
  }
  [dir="rtl"] .pattern-bulk-flow__row.is-selected {
    box-shadow: inset -3px 0 0 0 var(--bg-brand-solid);
  }
  .pattern-bulk-flow.is-running .pattern-bulk-flow__list {
    opacity: 0.6;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-bulk-flow__row {
      transition: none;
    }
  }
}
@layer utilities {
  .pattern-bulk-confirm__count {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .pattern-bulk-confirm__preview {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    list-style: none;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    max-height: 8rem;
    overflow-y: auto;
  }
  .pattern-bulk-confirm__preview li {
    padding-block: 0.125rem;
  }
  .pattern-bulk-confirm__more {
    color: var(--text-quaternary);
    font-style: italic;
  }
}
@layer utilities {
  .pattern-type-confirm {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 24rem;
  }
  .pattern-type-confirm__hint {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .pattern-type-confirm__hint code {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
  }
}
@layer utilities {
  .pattern-confirm-inline {
    display: inline-block;
  }
  .pattern-confirm-inline > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
  }
  .pattern-confirm-inline > summary::-webkit-details-marker {
    display: none;
  }
  .pattern-confirm-inline > summary:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
    border-radius: var(--radius-md);
  }
  .pattern-confirm-inline > summary .pattern-confirm-inline__closed {
    display: inline-flex;
  }
  .pattern-confirm-inline > summary .pattern-confirm-inline__open {
    display: none;
  }
  .pattern-confirm-inline[open] > summary .pattern-confirm-inline__closed {
    display: none;
  }
  .pattern-confirm-inline[open] > summary .pattern-confirm-inline__open {
    display: inline-flex;
  }
  .pattern-confirm-inline__confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
    box-shadow: inset 0 0 0 1px var(--border-danger-subtle, var(--border-danger));
    font-size: 0.8125rem;
    font-weight: 600;
    animation: pattern-confirm-inline-in var(--duration-fast) var(--ease-out);
  }
  .pattern-confirm-inline__confirm .btn-danger, .pattern-confirm-inline__confirm .btn-secondary {
    padding-block: 0.125rem;
  }
  @keyframes pattern-confirm-inline-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-confirm-inline__confirm {
      animation: none;
    }
  }
}
@layer utilities {
  .pattern-confirm-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop, 1040);
    background-color: var(--bg-black, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-black, var(--text-primary)) 45%, transparent);
    }
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: pattern-confirm-fade var(--duration-fast) var(--ease-out);
  }
  .pattern-confirm {
    z-index: var(--z-modal, 1050);
    width: min(26rem, 100%);
    background-color: var(--bg-surface, var(--bg-primary));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl), inset 0 0 0 1px var(--border-secondary);
    padding: 1.25rem;
    animation: pattern-confirm-in var(--duration-normal) var(--ease-out);
  }
  .pattern-confirm__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-block-end: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
    box-shadow: inset 0 0 0 1px var(--border-danger-subtle, var(--border-danger));
    font-size: 1.25rem;
  }
  .pattern-confirm--warning .pattern-confirm__icon {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
    box-shadow: inset 0 0 0 1px var(--border-warning-subtle, var(--border-warning));
  }
  .pattern-confirm__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .pattern-confirm__body {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-block: 0.375rem 1rem;
    line-height: 1.5;
  }
  .pattern-confirm__match {
    margin-block-end: 1rem;
  }
  .pattern-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  @keyframes pattern-confirm-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes pattern-confirm-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-confirm-scrim, .pattern-confirm {
      animation: none;
    }
  }
}
@layer utilities {
  .pattern-resume-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
    box-shadow: inset 0 0 0 1px var(--border-info-subtle, var(--border-info));
  }
  .pattern-resume-banner__icon {
    font-size: 1.125rem;
    flex-shrink: 0;
  }
  .pattern-resume-banner__body {
    flex: 1;
    min-width: 0;
  }
  .pattern-resume-banner__title {
    font-weight: 600;
    color: var(--text-info);
    font-size: 0.875rem;
  }
  .pattern-resume-banner__meta {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .pattern-resume-banner__actions {
    display: inline-flex;
    gap: 0.5rem;
  }
}
@layer utilities {
  .pattern-review {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pattern-review__group {
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    overflow: hidden;
  }
  .pattern-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
  }
  .pattern-review__group-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .pattern-review__edit {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--bg-brand-solid));
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
  }
  .pattern-review__edit:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .pattern-review__edit:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .pattern-review__rows {
    margin: 0;
    padding: 0.375rem 0.875rem 0.75rem;
  }
  .pattern-review__row {
    display: grid;
    grid-template-columns: minmax(8rem, 33%) 1fr;
    gap: 0.75rem;
    padding-block: 0.375rem;
  }
  .pattern-review__dt {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .pattern-review__dd {
    color: var(--text-primary);
    font-size: 0.875rem;
    margin: 0;
  }
}
@layer utilities {
  .pattern-split-wizard {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .pattern-split-wizard__rail {
    padding: 1rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    position: sticky;
    inset-block-start: 1rem;
  }
  .pattern-split-wizard__content {
    min-width: 0;
  }
  @media (max-width: 48rem) {
    .pattern-split-wizard {
      grid-template-columns: 1fr;
    }
    .pattern-split-wizard__rail {
      position: static;
    }
    .pattern-split-wizard__rail .progress-steps {
      flex-direction: row;
    }
  }
}
@layer utilities {
  .modal .pattern-wizard {
    gap: 0;
  }
  .modal .pattern-wizard__body {
    padding-block: 0.5rem;
  }
  .modal .pattern-wizard__footer {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .modal-header .progress-steps--horizontal {
    width: 100%;
    margin-block-start: 0.5rem;
  }
  .modal-header .progress-steps__label {
    font-size: 0.75rem;
  }
}
@layer utilities {
  .pattern-wizard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pattern-wizard__body {
    min-height: 6rem;
  }
  .pattern-wizard__panel[hidden] {
    display: none;
  }
  .pattern-wizard__panel {
    animation: pattern-wizard-in var(--duration-normal) var(--ease-out);
  }
  .pattern-wizard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--border-secondary);
  }
  .pattern-wizard__footer-right {
    display: inline-flex;
    gap: 0.5rem;
    margin-inline-start: auto;
  }
  @keyframes pattern-wizard-in {
    from {
      opacity: 0;
      transform: translateX(0.5rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  [dir="rtl"] .pattern-wizard__panel {
    animation-name: pattern-wizard-in-rtl;
  }
  @keyframes pattern-wizard-in-rtl {
    from {
      opacity: 0;
      transform: translateX(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-wizard__panel {
      animation: none;
    }
  }
}
@layer utilities {
  .pattern-gsh {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pattern-gsh__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
  }
  .pattern-gsh__card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs);
    background-color: var(--bg-surface, var(--bg-primary));
  }
  .pattern-gsh__card.is-done {
    box-shadow: inset 0 0 0 1px var(--border-success-subtle, var(--border-success));
  }
  .pattern-gsh__badge {
    align-self: flex-start;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--bg-brand-subtle, var(--bg-primary-subtle));
    color: var(--text-brand-secondary, var(--bg-brand-solid));
  }
  .pattern-gsh__card.is-done .pattern-gsh__badge {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .pattern-gsh__title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
  }
  .pattern-gsh__desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    flex: 1;
  }
}
@layer utilities {
  .pattern-first-run {
    max-width: 30rem;
    margin-inline: auto;
  }
  .pattern-first-run__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    justify-content: center;
    margin-block-start: 0.75rem;
    font-size: 0.8125rem;
  }
  .pattern-first-run__secondary a {
    color: var(--text-brand-secondary, var(--bg-brand-solid));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .pattern-first-run__secondary a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .pattern-first-run__secondary a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
}
@layer utilities {
  .pattern-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop, 1040);
    pointer-events: auto;
  }
  .pattern-tour-overlay__scrim {
    position: absolute;
    inset-block-start: var(--tour-y, 0);
    inset-inline-start: var(--tour-x, 0);
    width: var(--tour-w, 0);
    height: var(--tour-h, 0);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 9999px var(--bg-black, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 9999px color-mix(in oklch, var(--bg-black, var(--text-primary)) 55%, transparent);
    }
    transition: all var(--duration-normal) var(--ease-out);
  }
  .pattern-tour-pop {
    position: fixed;
    z-index: var(--z-modal, 1050);
    max-width: 20rem;
    background-color: var(--bg-surface, var(--bg-primary));
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-secondary);
    padding: 1rem;
  }
  .pattern-tour-pop__title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
  }
  .pattern-tour-pop__body {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-block: 0.375rem 0.75rem;
  }
  .pattern-tour-pop__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .pattern-tour-pop__dots {
    display: inline-flex;
    gap: 0.25rem;
  }
  .pattern-tour-pop__dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--border-secondary);
  }
  .pattern-tour-pop__dot.is-current {
    background-color: var(--bg-brand-solid);
  }
  .pattern-tour-pop__actions {
    display: inline-flex;
    gap: 0.375rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-tour-overlay__scrim {
      transition: none;
    }
  }
}
@layer utilities {
  .pattern-onboarding {
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs);
    background-color: var(--bg-surface, var(--bg-primary));
    padding: 1.25rem;
    position: relative;
    max-width: 32rem;
  }
  .pattern-onboarding__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-block-end: 1rem;
  }
  .pattern-onboarding__icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--bg-brand-subtle, var(--bg-primary-subtle));
    color: var(--text-brand-secondary, var(--bg-brand-solid));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .pattern-onboarding__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .pattern-onboarding__subtitle {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-block-start: 0.125rem;
  }
  .pattern-onboarding__dismiss {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
  }
  .pattern-onboarding__dismiss:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary-hover);
  }
  .pattern-onboarding__dismiss:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
}
@layer utilities {
  .pattern-lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--lazy-section-size, 480px);
  }
  .pattern-lazy-section--wide {
    contain-intrinsic-size: var(--lazy-section-size, 480px) auto;
  }
}
@layer utilities {
  .pattern-disclosure {
    border-radius: var(--radius-lg);
  }
  .pattern-disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    list-style: none;
    color: var(--text-brand-secondary, var(--bg-brand-solid));
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0;
  }
  .pattern-disclosure > summary::-webkit-details-marker {
    display: none;
  }
  .pattern-disclosure > summary:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .pattern-disclosure > summary .pattern-disclosure__chevron {
    transition: transform var(--duration-fast) var(--ease-out);
  }
  .pattern-disclosure[open] > summary .pattern-disclosure__chevron {
    transform: rotate(90deg);
  }
  .pattern-disclosure > summary .pattern-disclosure__more {
    display: inline;
  }
  .pattern-disclosure > summary .pattern-disclosure__less {
    display: none;
  }
  .pattern-disclosure[open] > summary .pattern-disclosure__more {
    display: none;
  }
  .pattern-disclosure[open] > summary .pattern-disclosure__less {
    display: inline;
  }
  .pattern-disclosure__body {
    padding-block-start: 0.5rem;
  }
  .pattern-disclosure--clamp .pattern-disclosure__body {
    padding: 0;
  }
  .pattern-disclosure--clamp > .pattern-disclosure__preview {
    display: -webkit-box;
    -webkit-line-clamp: var(--disclosure-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-tertiary);
  }
  .pattern-disclosure--clamp[open] > .pattern-disclosure__preview {
    -webkit-line-clamp: unset;
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-disclosure > summary .pattern-disclosure__chevron {
      transition: none;
    }
  }
}
@layer utilities {
  .is-optimistic-pending {
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .is-optimistic-pending [data-optimistic-spinner] {
    display: inline-flex;
  }
  [data-optimistic-spinner] {
    display: none;
  }
  .is-optimistic-reverted {
    animation: pattern-optimistic-revert var(--duration-slow) var(--ease-out);
  }
  @keyframes pattern-optimistic-revert {
    0% {
      background-color: color-mix(in oklch, var(--bg-danger-solid) 22%, transparent);
    }
    100% {
      background-color: transparent;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .is-optimistic-pending {
      transition: none;
    }
    .is-optimistic-reverted {
      animation: none;
    }
  }
}
@layer utilities {
  .pattern-infinite-scroll {
    display: flex;
    flex-direction: column;
  }
  .pattern-infinite-scroll__sentinel {
    height: 1px;
    width: 100%;
  }
  .pattern-infinite-scroll__loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .pattern-infinite-scroll.is-loading .pattern-infinite-scroll__loader {
    display: flex;
  }
  .pattern-infinite-scroll__end {
    display: none;
    padding: 0.75rem 1rem;
    text-align: center;
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  .pattern-infinite-scroll.is-done .pattern-infinite-scroll__end {
    display: block;
  }
  .pattern-infinite-scroll.is-done .pattern-infinite-scroll__sentinel {
    display: none;
  }
  .pattern-infinite-scroll__more {
    align-self: center;
    margin-block: 0.75rem;
  }
  .pattern-infinite-scroll.is-loading .pattern-infinite-scroll__more, .pattern-infinite-scroll.is-done .pattern-infinite-scroll__more {
    display: none;
  }
}
@layer utilities {
  .pattern-async-region {
    position: relative;
    min-height: var(--async-region-min, 8rem);
  }
  .pattern-async-region > [data-async-slot] {
    display: none;
  }
  .pattern-async-region[data-async-state="loading"] > [data-async-slot="loading"], .pattern-async-region[data-async-state="content"] > [data-async-slot="content"], .pattern-async-region[data-async-state="empty"] > [data-async-slot="empty"], .pattern-async-region[data-async-state="error"] > [data-async-slot="error"] {
    display: block;
  }
  .pattern-async-region[data-async-state="loading"], .pattern-async-region[data-async-state="empty"], .pattern-async-region[data-async-state="error"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pattern-async-region[data-async-state="content"] > [data-async-slot="content"] {
    animation: pattern-async-in var(--duration-normal) var(--ease-out);
  }
  @keyframes pattern-async-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pattern-async-region[data-async-state="content"] > [data-async-slot="content"] {
      animation: none;
    }
  }
}
@layer utilities {
  .social-proof {
    --sp-section-py: 4rem;
    --sp-container: 80rem;
    --sp-gutter: 1rem;
    --sp-stack-gap: 2rem;
    --sp-logo-gap-x: 2rem;
    --sp-logo-gap-y: 1rem;
    --sp-logo-h: 2.25rem;
    --sp-marquee-duration: 40s;
    --sp-brand-section: var(--color-brand-800);
    --sp-brand-section-subtle: var(--color-brand-700);
    --sp-text-on-brand: var(--color-brand-200);
    --sp-eyebrow-ink: var(--text-tertiary);
    --sp-logo-ink: var(--text-secondary);
    --sp-logo-opacity: 1;
    display: block;
    background-color: var(--bg-primary);
    padding-block: var(--sp-section-py);
  }
  @media (min-width: 768px) {
    .social-proof {
      --sp-section-py: 6rem;
      --sp-gutter: 2rem;
      --sp-logo-h: 2.5rem;
    }
  }
  :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .social-proof {
    --sp-logo-opacity: 0.85;
  }
  .social-proof__container {
    margin-inline: auto;
    max-width: var(--sp-container);
    padding-inline: var(--sp-gutter);
  }
  .social-proof__stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-stack-gap);
  }
  .social-proof__eyebrow {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--sp-eyebrow-ink);
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .social-proof__eyebrow--lg {
      font-size: 1.25rem;
      line-height: 1.875rem;
    }
  }
  .social-proof__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--sp-logo-gap-x);
    row-gap: var(--sp-logo-gap-y);
  }
  .social-proof__logo, .social-proof__mark {
    display: block;
    height: var(--sp-logo-h);
    width: auto;
    opacity: var(--sp-logo-opacity);
  }
  .social-proof__mark {
    color: var(--sp-logo-ink);
    fill: currentColor;
  }
  .social-proof__logo--from-md {
    display: none;
  }
  @media (min-width: 768px) {
    .social-proof__logo--from-md {
      display: block;
    }
  }
  @media (min-width: 768px) {
    .social-proof--dual .social-proof__logos {
      row-gap: 1.5rem;
    }
  }
  .social-proof--press .social-proof__logos {
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .social-proof--press .social-proof__logos {
      flex-direction: row;
    }
  }
  .social-proof--brand, .social-proof__card--brand {
    --sp-eyebrow-ink: var(--sp-text-on-brand);
    --sp-logo-ink: var(--text-on-brand-section);
    --sp-logo-opacity: 0.85;
  }
  .social-proof--brand {
    background-color: var(--sp-brand-section);
  }
  :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .social-proof {
    --sp-brand-section: var(--color-brand-950);
    --sp-brand-section-subtle: var(--color-brand-900);
  }
  .social-proof--card .social-proof__container {
    padding-inline: 0;
  }
  @media (min-width: 768px) {
    .social-proof--card .social-proof__container {
      padding-inline: var(--sp-gutter);
    }
  }
  .social-proof__card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-stack-gap);
    background-color: var(--bg-secondary);
    padding: 3rem 1.5rem;
  }
  .social-proof__card--brand {
    background-color: var(--sp-brand-section);
  }
  @media (min-width: 768px) {
    .social-proof__card {
      border-radius: 1rem;
      padding: 4rem;
    }
  }
  .social-proof--cards {
    overflow: hidden;
  }
  .social-proof--cards .social-proof__container {
    padding-inline: 0;
  }
  @media (min-width: 768px) {
    .social-proof--cards .social-proof__container {
      padding-inline: var(--sp-gutter);
    }
    .social-proof--cards .social-proof__stack {
      gap: 2.5rem;
    }
  }
  .social-proof__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    gap: 0.75rem;
    width: max-content;
    max-width: 53.4375rem;
  }
  @media (min-width: 768px) {
    .social-proof__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      width: 100%;
      max-width: none;
      align-self: auto;
    }
  }
  .social-proof__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7rem;
    width: 12.5rem;
    padding: 2.5rem 1.5rem;
    border-radius: 0.75rem;
    background-color: var(--bg-secondary);
  }
  .social-proof--brand .social-proof__badge {
    background-color: var(--sp-brand-section-subtle);
  }
  .social-proof__badge:last-child {
    display: none;
  }
  @media (min-width: 768px) {
    .social-proof__badge {
      height: 10.5rem;
      width: auto;
      padding: 4rem 2rem;
    }
    .social-proof__badge:last-child {
      display: flex;
    }
  }
  .social-proof__badge .social-proof__mark {
    height: 2rem;
  }
  @media (min-width: 768px) {
    .social-proof__badge .social-proof__mark {
      height: 2.5rem;
    }
  }
  .social-proof--marquee {
    overflow: hidden;
  }
  .social-proof__marquee {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-logo-gap-y);
    max-width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  }
  .social-proof__belt {
    display: flex;
  }
  .social-proof__belt--mobile {
    display: flex;
  }
  @media (min-width: 768px) {
    .social-proof__belt--mobile {
      display: none;
    }
  }
  .social-proof__track {
    display: flex;
    flex-shrink: 0;
    width: auto;
    max-width: none;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    padding-left: 1.25rem;
    animation: sp-marquee var(--sp-marquee-duration) linear infinite;
  }
  @media (min-width: 768px) {
    .social-proof__track {
      gap: 1.5rem;
      padding-left: 1.5rem;
    }
  }
  .social-proof__belt--mobile .social-proof__track {
    animation-direction: reverse;
    animation-delay: -3s;
  }
  .social-proof__track .social-proof__mark {
    height: 2rem;
    opacity: 0.85;
  }
  @media (min-width: 768px) {
    .social-proof__track .social-proof__mark {
      height: 2.5rem;
    }
  }
  @keyframes sp-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .social-proof__track {
      animation: none;
      transform: none;
    }
    .social-proof__belt--mobile .social-proof__track {
      animation: none;
    }
  }
}
@layer utilities {
  .mkt-press {
    background-color: var(--bg-brand-solid);
  }
  .mkt-press__caption {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
  .mkt-press__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    margin-top: 2rem;
  }
  @media (min-width: 768px) {
    .mkt-press__logos {
      gap: 2rem 3.5rem;
      margin-top: 2.5rem;
    }
  }
  .mkt-press__logo {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-on-brand);
    opacity: 0.85;
    white-space: nowrap;
  }
  @media (min-width: 768px) {
    .mkt-press__logo {
      font-size: 1.375rem;
    }
  }
  .mkt-press--plain {
    background-color: var(--bg-secondary);
  }
  .mkt-press--plain .mkt-press__caption {
    color: var(--text-tertiary);
  }
  .mkt-press--plain .mkt-press__logo {
    color: var(--text-secondary);
    opacity: 1;
  }
}
@layer utilities {
  .team-section {
    width: 100%;
    padding-block: 4rem;
    background-color: var(--bg-primary);
  }
  @media (min-width: 768px) {
    .team-section {
      padding-block: 6rem;
    }
  }
  .team-section--overflow {
    overflow: hidden;
  }
  .team-section__container {
    margin-inline: auto;
    width: 100%;
    max-width: 80rem;
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .team-section__container {
      padding-inline: 2rem;
    }
  }
  .team-section__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .team-section__header--center {
    margin-inline: auto;
    align-items: center;
    text-align: center;
    max-width: 48rem;
  }
  .team-section__eyebrow {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-brand-secondary, var(--text-link));
  }
  @media (min-width: 768px) {
    .team-section__eyebrow {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
  }
  .team-section__title {
    margin-top: calc(var(--spacing) * 3);
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.22;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .team-section__title {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.625rem);
      letter-spacing: var(--tw-tracking, -0.02em);
    }
  }
  .team-section__subtitle {
    margin-top: calc(var(--spacing) * 4);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    color: var(--text-tertiary);
    text-wrap: pretty;
  }
  @media (min-width: 768px) {
    .team-section__subtitle {
      margin-top: calc(var(--spacing) * 5);
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
  }
  .team-section__actions {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 3);
  }
  .team-section__split {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 12);
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .team-section__aside {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .team-member {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    min-width: 0;
  }
  .team-member__avatar.avatar {
    inline-size: 5rem;
    block-size: 5rem;
  }
  @media (min-width: 768px) {
    .team-member__avatar.avatar {
      inline-size: 6rem;
      block-size: 6rem;
    }
  }
  .team-member--card {
    background-color: var(--bg-secondary);
  }
  .team-member__photo {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
  }
  .team-member__name {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .team-member__role {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--text-brand-secondary, var(--text-link));
  }
  .team-member__summary {
    margin-top: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--text-tertiary);
    text-wrap: pretty;
  }
  .team-member__socials {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 4);
  }
  .team-member__social {
    display: inline-flex;
    border-radius: var(--radius-sm);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    color: var(--text-quaternary);
    transition-duration: 100ms;
    transition-timing-function: linear;
  }
  .team-member__social:hover {
    color: var(--text-tertiary);
  }
  .team-member__social:focus-visible {
    outline: 2px solid var(--border-focus, var(--text-link));
    outline-offset: 2px;
  }
  .team-member__social svg, .team-member__social .team-icon {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
    fill: currentColor;
  }
  .team-member__socials--lg {
    gap: calc(var(--spacing) * 5);
  }
  .team-member__socials--lg .team-member__social svg {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .team-card-glass {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
  }
  .team-card-glass__image {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .team-card-glass__scrim {
    position: relative;
    padding: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 16);
    z-index: 1;
    background-image: linear-gradient(to top, var(--alpha-black-40, rgb(0 0 0 / 0.4)), transparent);
  }
  @media (min-width: 768px) {
    .team-card-glass__scrim {
      padding: calc(var(--spacing) * 4);
      padding-top: calc(var(--spacing) * 20);
    }
  }
  @media (min-width: 1024px) {
    .team-card-glass__scrim {
      padding-top: 6rem;
    }
  }
  .team-card-glass__panel {
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 6);
    color: var(--alpha-white-100, #fff);
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 30%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--alpha-white-30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  @media (min-width: 768px) {
    .team-card-glass__panel {
      padding-inline: 1.25rem;
    }
  }
  .team-card-glass__panel--flush {
    padding-inline: calc(var(--spacing) * 5);
    border-radius: 0;
    box-shadow: inset 0 1px 0 0 var(--alpha-white-30);
  }
  .team-card-glass__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
  }
  .team-card-glass__title {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .team-card-glass__arrow {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
  }
  .team-card-glass__role {
    margin-top: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .team-card-glass__summary {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  @media (min-width: 768px) {
    .team-card-glass__summary {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
  }
  .team-card-glass__socials {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 5);
  }
  .team-card-glass__social {
    display: inline-flex;
    border-radius: var(--radius-sm);
    color: var(--alpha-white-100, #fff);
  }
  .team-card-glass__social:focus-visible {
    outline: 2px solid var(--alpha-white-100, #fff);
    outline-offset: 2px;
  }
  .team-card-glass__social svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
    fill: currentColor;
  }
  .team-photo-collage {
    display: grid;
    gap: calc(var(--spacing) * 2);
    justify-self: center;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(12, minmax(0, 1fr));
    block-size: 30.5rem;
    inline-size: 150%;
  }
  @media (min-width: 640px) {
    .team-photo-collage {
      block-size: 31rem;
      inline-size: 120%;
    }
  }
  @media (min-width: 768px) {
    .team-photo-collage {
      gap: 1rem;
      inline-size: auto;
    }
  }
  .team-photo-collage__item {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .team-photo-collage__item--1 {
    grid-area: 7 / 5 / 13 / 9;
  }
  .team-photo-collage__item--2 {
    grid-area: 1 / 7 / 7 / 11;
  }
  .team-photo-collage__item--3 {
    grid-area: 3 / 3 / 7 / 7;
  }
  .team-photo-collage__item--4 {
    grid-area: 7 / 9 / 11 / 13;
  }
  .team-photo-collage__item--5 {
    grid-area: 7 / 1 / 12 / 5;
  }
  .team-carousel {
    position: relative;
  }
  .team-carousel__track {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-inline-end: 1rem;
  }
  .team-carousel__track::-webkit-scrollbar {
    display: none;
  }
  .team-carousel__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
  }
  @media (min-width: 768px) {
    .team-carousel__track {
      gap: calc(var(--spacing) * 8);
      padding-inline-end: 2rem;
    }
  }
  .team-carousel__item {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .team-carousel__nav {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 4);
  }
  @media (min-width: 768px) {
    .team-carousel__nav {
      gap: calc(var(--spacing) * 8);
    }
  }
  .team-carousel__btn {
    border-radius: var(--radius-full);
  }
  .team-carousel__btn[disabled], .team-carousel__btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .team-section__header--narrow {
    max-width: 48rem;
  }
  @media (min-width: 1024px) {
    .team-section__header--narrow-lg {
      max-width: 48rem;
    }
  }
  @media (min-width: 1024px) {
    .team-section__aside {
      inline-size: 21.75rem;
    }
    .team-section__aside--wide {
      inline-size: 22.5rem;
    }
  }
  .team-card-glass--tall {
    block-size: 27rem;
  }
  @media (min-width: 768px) {
    .team-card-glass--tall {
      block-size: 32rem;
    }
  }
  .team-card-glass--portrait {
    aspect-ratio: 0.793;
  }
  @media (min-width: 768px) {
    .team-card-glass--portrait {
      aspect-ratio: 0.75;
    }
  }
  .team-card-glass--rail {
    aspect-ratio: 0.65;
    inline-size: 100%;
    max-inline-size: 17.5rem;
  }
  @media (min-width: 768px) {
    .team-card-glass--rail {
      aspect-ratio: 0.75;
      max-inline-size: 24rem;
    }
  }
  .team-carousel__item--card {
    max-inline-size: 17.5rem;
  }
  @media (min-width: 640px) {
    .team-member__photo--row {
      max-block-size: 273px;
    }
  }
  .team-collage {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 6);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    grid-auto-rows: 27rem;
  }
  @media (min-width: 1024px) {
    .team-collage {
      grid-auto-rows: 22.5rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .team-member__social {
      transition: none;
    }
    .team-carousel__track {
      scroll-behavior: auto;
    }
  }
}
@layer utilities {
  .mkt-gallery {
    --mkt-gallery-gap: 1rem;
    --mkt-gallery-radius: var(--radius-xl, 0.75rem);
  }
  .mkt-gallery__head {
    margin-bottom: 2.5rem;
    max-width: 48rem;
  }
  .mkt-gallery__head--center {
    margin-inline: auto;
    text-align: center;
  }
  .mkt-gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--mkt-gallery-radius);
    background-color: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    isolation: isolate;
  }
  .mkt-gallery__item img, .mkt-gallery__item picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mkt-gallery__item--square {
    aspect-ratio: 1 / 1;
  }
  .mkt-gallery__item--wide {
    aspect-ratio: 16 / 9;
  }
  .mkt-gallery__item--portrait {
    aspect-ratio: 3 / 4;
  }
  .mkt-gallery__item--video {
    aspect-ratio: 16 / 9;
  }
  .mkt-gallery__item--zoom img {
    transition: transform var(--duration-normal, 200ms) var(--ease-out, ease);
  }
  .mkt-gallery__item--zoom:hover img, .mkt-gallery__item--zoom:focus-visible img {
    transform: scale(1.04);
  }
  .mkt-gallery__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .mkt-gallery__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--text-quaternary);
    background: linear-gradient(135deg, color-mix(in srgb, oklch(81.0% 0.163 87) 10%, transparent), transparent 70%), var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in oklch, var(--color-brand-500) 10%, transparent), transparent 70%), var(--bg-secondary);
    }
  }
  .mkt-gallery__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 1rem;
    color: var(--text-white, var(--color-white));
    background: linear-gradient(to top, var(--bg-overlay), transparent);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity var(--duration-normal, 200ms) var(--ease-out, ease), transform var(--duration-normal, 200ms) var(--ease-out, ease);
  }
  .mkt-gallery__item:hover .mkt-gallery__caption, .mkt-gallery__item:focus-within .mkt-gallery__caption, .mkt-gallery__item--caption-static .mkt-gallery__caption {
    opacity: 1;
    transform: translateY(0);
  }
  .mkt-gallery__caption-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
  }
  .mkt-gallery__caption-meta {
    font-size: 0.75rem;
    line-height: 1rem;
    opacity: 0.85;
  }
  .mkt-gallery__tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    border-radius: 9999px;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 88%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    backdrop-filter: blur(4px);
  }
  .mkt-gallery__grid {
    display: grid;
    gap: var(--mkt-gallery-gap);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 640px) {
    .mkt-gallery__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .mkt-gallery__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .mkt-gallery__grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 1024px) {
    .mkt-gallery__grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .mkt-gallery__item--span-2 {
    grid-column: span 2;
  }
  .mkt-gallery__item--row-2 {
    grid-row: span 2;
  }
  .mkt-gallery__masonry {
    column-count: 2;
    column-gap: var(--mkt-gallery-gap);
  }
  @media (min-width: 640px) {
    .mkt-gallery__masonry {
      column-count: 3;
    }
  }
  @media (min-width: 1024px) {
    .mkt-gallery__masonry {
      column-count: 4;
    }
  }
  .mkt-gallery__masonry .mkt-gallery__item {
    margin-bottom: var(--mkt-gallery-gap);
    break-inside: avoid;
  }
  .mkt-gallery__featured {
    display: grid;
    gap: var(--mkt-gallery-gap);
    grid-template-columns: 1fr;
  }
  @media (min-width: 1024px) {
    .mkt-gallery__featured {
      grid-template-columns: 2fr 1fr;
    }
    .mkt-gallery__featured-rail {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      gap: var(--mkt-gallery-gap);
    }
  }
  .mkt-gallery__featured-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mkt-gallery-gap);
  }
  .mkt-gallery__carousel {
    display: flex;
    gap: var(--mkt-gallery-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
  }
  .mkt-gallery__carousel .mkt-gallery__item {
    flex: 0 0 auto;
    width: min(80%, 22rem);
    scroll-snap-align: start;
  }
  @media (prefers-reduced-motion: reduce) {
    .mkt-gallery__item--zoom img, .mkt-gallery__caption {
      transition: none;
    }
  }
}
@layer utilities {
  .mkt-content {
    --mkt-content-measure: 48rem;
  }
  .mkt-content__lead {
    max-width: var(--mkt-content-measure);
  }
  .mkt-content__lead .icon-badge {
    margin-bottom: 1.25rem;
  }
  .mkt-content__intro {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .mkt-content__intro {
      margin-top: 1.25rem;
      font-size: 1.25rem;
      line-height: 1.875rem;
    }
  }
  .mkt-content__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  @media (min-width: 1024px) {
    .mkt-content__split {
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
    }
  }
  .mkt-content__single {
    max-width: var(--mkt-content-measure);
    margin-inline: auto;
  }
  .mkt-content__single--center {
    text-align: center;
  }
  .mkt-content__article-head {
    max-width: 45rem;
  }
  .mkt-content__byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
  }
  .mkt-content__byline-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5rem;
  }
  .mkt-content__byline-meta {
    font-size: 1rem;
    color: var(--text-tertiary);
    line-height: 1.5rem;
  }
  .mkt-content__media {
    overflow: hidden;
    border-radius: var(--radius-2xl, 1rem);
    background-color: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .mkt-content__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mkt-content__media-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 18rem;
    font-size: 2rem;
    color: var(--text-quaternary);
    background: linear-gradient(135deg, color-mix(in srgb, oklch(81.0% 0.163 87) 10%, transparent), transparent 70%), var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, color-mix(in oklch, var(--color-brand-500) 10%, transparent), transparent 70%), var(--bg-secondary);
    }
  }
  .mkt-content__split-image {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  @media (min-width: 768px) {
    .mkt-content__split-image {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
    .mkt-content__split-image--reverse .mkt-content__media {
      order: -1;
    }
  }
  .mkt-content__large-image {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .mkt-content__rows {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
  .mkt-content__prose {
    max-width: var(--mkt-content-measure);
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.875rem;
  }
  .mkt-content__prose > * + * {
    margin-top: 1.5rem;
  }
  .mkt-content__prose h2 {
    margin-top: 2.5rem;
    color: var(--text-primary);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .mkt-content__prose h3 {
    margin-top: 2rem;
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
  }
  .mkt-content__prose h2:first-child, .mkt-content__prose h3:first-child {
    margin-top: 0;
  }
  .mkt-content__prose a {
    color: var(--color-brand-700);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .mkt-content__prose a:hover {
    color: var(--color-brand-800);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .mkt-content__prose a {
    color: var(--color-brand-300);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .mkt-content__prose a:hover {
    color: var(--color-brand-200);
  }
  .mkt-content__prose ul, .mkt-content__prose ol {
    padding-left: 1.5rem;
  }
  .mkt-content__prose ul {
    list-style: disc;
  }
  .mkt-content__prose ol {
    list-style: decimal;
  }
  .mkt-content__prose li + li {
    margin-top: 0.5rem;
  }
  .mkt-content__prose li::marker {
    color: var(--text-quaternary);
  }
  .mkt-content__prose blockquote {
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-brand-600);
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: 500;
    color: var(--text-primary);
  }
  .mkt-content__prose img {
    border-radius: var(--radius-xl, 0.75rem);
  }
  .mkt-content__prose figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    text-align: center;
  }
}
@layer utilities {
  .pricing {
    --pr-container: 80rem;
    --pr-gutter: 1rem;
    --pr-gutter-md: 2rem;
    --pr-section-bg: var(--bg-body);
    --pr-card-bg: var(--bg-card);
    --pr-card-ring: var(--border-secondary-alt);
    --pr-card-shadow: var(--shadow-lg);
    --pr-card-radius: var(--radius-2xl);
    --pr-foot-bg: var(--bg-secondary);
    --pr-divider: var(--border-secondary);
    --pr-eyebrow: var(--text-link);
    --pr-title: var(--text-primary);
    --pr-body: var(--text-tertiary);
    --pr-strong: var(--text-primary);
    --pr-muted: var(--text-quaternary);
    --pr-brand-solid: var(--bg-brand-solid);
    --pr-on-brand: var(--text-on-brand);
    --pr-border-brand: var(--border-brand);
    --pr-tint-bg: oklch(81.0% 0.163 87);
    @supports (color: color-mix(in lab, red, red)) {
      --pr-tint-bg: color-mix(in oklch, var(--color-brand-500) 9%, var(--bg-card));
    }
    --pr-tint-title: var(--color-brand-900);
    --pr-tint-body: var(--color-brand-700);
    --pr-band-bg: var(--color-brand-900);
    --pr-band-title: var(--color-white);
    --pr-band-body: color-mix(in srgb, #fff 72%, oklch(39.0% 0.086 62));
    @supports (color: color-mix(in lab, red, red)) {
      --pr-band-body: color-mix(in oklch, var(--color-white) 72%, var(--color-brand-900));
    }
    --pr-wash-bg: oklch(81.0% 0.163 87);
    @supports (color: color-mix(in lab, red, red)) {
      --pr-wash-bg: color-mix(in oklch, var(--color-brand-500) 7%, var(--bg-body));
    }
    --pr-check-brand-bg: oklch(81.0% 0.163 87);
    @supports (color: color-mix(in lab, red, red)) {
      --pr-check-brand-bg: color-mix(in oklch, var(--color-brand-500) 12%, var(--bg-card));
    }
    --pr-check-brand-fg: var(--color-brand-600);
    --pr-check-success-bg: var(--bg-success-subtle);
    --pr-check-success-fg: var(--text-success);
    --pr-check-filled-bg: var(--bg-brand-solid);
    --pr-check-filled-fg: var(--color-white);
    background-color: var(--pr-section-bg);
    color: var(--pr-body);
    width: 100%;
  }
  .pricing__benefit-title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
  }
  .pricing__benefit-desc {
    margin-top: var(--spacing);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--pr-body);
  }
  .pricing__billing-toggle-text {
    font-weight: 500;
  }
  .pricing__container {
    margin-inline: auto;
    width: 100%;
    max-width: var(--pr-container);
    padding-inline: var(--pr-gutter);
  }
  @media (min-width: 768px) {
    .pricing__container {
      padding-inline: var(--pr-gutter-md);
    }
  }
  .pricing--pad {
    padding-block: calc(var(--spacing) * 16);
  }
  @media (min-width: 768px) {
    .pricing--pad {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .pricing__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    max-width: var(--container-3xl);
    flex-direction: column;
  }
  .pricing__header--center {
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }
  .pricing__eyebrow {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-eyebrow);
  }
  @media (min-width: 768px) {
    .pricing__eyebrow {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
  }
  .pricing__title {
    margin-top: calc(var(--spacing) * 3);
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
    text-wrap: balance;
  }
  @media (min-width: 768px) {
    .pricing__title {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.625rem);
      letter-spacing: var(--tw-tracking, -0.02em);
    }
  }
  .pricing__title--lg {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
  }
  @media (min-width: 768px) {
    .pricing__title--lg {
      font-size: 2.75rem;
      line-height: var(--tw-leading, 3rem);
      letter-spacing: var(--tw-tracking, -0.022em);
    }
  }
  .pricing__intro {
    margin-top: calc(var(--spacing) * 4);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    color: var(--pr-body);
  }
  @media (min-width: 768px) {
    .pricing__intro {
      margin-top: calc(var(--spacing) * 6);
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
  }
  .pricing__split {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 12);
  }
  @media (min-width: 1280px) {
    .pricing__split {
      flex-direction: row;
      gap: calc(var(--spacing) * 16);
    }
    .pricing__split > .pricing__header {
      max-width: var(--container-md);
    }
  }
  .pricing__actions {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column-reverse;
    gap: calc(var(--spacing) * 3);
    align-self: stretch;
  }
  @media (min-width: 640px) {
    .pricing__actions {
      flex-direction: row;
      align-self: center;
    }
  }
  @media (min-width: 768px) {
    .pricing__actions {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .pricing__billing {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .pricing__billing {
      margin-top: calc(var(--spacing) * 12);
      width: auto;
    }
  }
  .pricing__billing .nav-tabs {
    width: 100%;
  }
  @media (min-width: 768px) {
    .pricing__billing .nav-tabs {
      width: auto;
    }
  }
  .pricing__billing .nav-tabs .nav-link {
    flex: 1;
    justify-content: center;
  }
  .pricing__billing-toggle {
    margin-top: calc(var(--spacing) * 8);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  @media (min-width: 768px) {
    .pricing__billing-toggle {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .pricing__billing-toggle .toggle-label {
    color: var(--pr-title);
  }
  .pricing__billing-note {
    color: var(--pr-body);
  }
  .pricing__grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
  }
  @media (min-width: 768px) {
    .pricing__grid {
      gap: calc(var(--spacing) * 8);
    }
  }
  .pricing__grid--gap-top {
    margin-top: calc(var(--spacing) * 12);
  }
  @media (min-width: 768px) {
    .pricing__grid--gap-top {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .pricing__grid--gap-top-lg {
    margin-top: calc(var(--spacing) * 16);
  }
  @media (min-width: 768px) {
    .pricing__grid--gap-top-lg {
      margin-top: calc(var(--spacing) * 24);
    }
  }
  @media (min-width: 768px) {
    .pricing__grid--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 768px) {
    .pricing__grid--3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1280px) {
    .pricing__grid--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .pricing__grid--callout {
    gap: calc(var(--spacing) * 10);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .pricing__grid--end {
    align-items: flex-end;
  }
  .pricing__grid--center {
    align-items: center;
  }
  .pricing__band {
    padding-top: calc(var(--spacing) * 16);
    padding-bottom: calc(var(--spacing) * 32);
  }
  @media (min-width: 768px) {
    .pricing__band {
      padding-top: calc(var(--spacing) * 24);
      padding-bottom: calc(var(--spacing) * 48);
    }
  }
  .pricing__band--brand {
    background-color: var(--pr-band-bg);
  }
  .pricing__band--brand .pricing__eyebrow {
    color: var(--pr-band-body);
  }
  .pricing__band--brand .pricing__title {
    color: var(--pr-band-title);
  }
  .pricing__band--brand .pricing__intro {
    color: var(--pr-band-body);
  }
  .pricing__band--short {
    padding-top: calc(var(--spacing) * 16);
    padding-bottom: calc(var(--spacing) * 32);
  }
  @media (min-width: 768px) {
    .pricing__band--short {
      padding-top: calc(var(--spacing) * 24);
      padding-bottom: 10rem;
    }
  }
  .pricing__overlap {
    margin-inline: auto;
    width: 100%;
    padding-bottom: calc(var(--spacing) * 16);
    margin-top: -4rem;
    max-width: var(--pr-container);
    padding-inline: var(--pr-gutter);
  }
  @media (min-width: 768px) {
    .pricing__overlap {
      margin-top: -6rem;
      padding-bottom: calc(var(--spacing) * 24);
      padding-inline: var(--pr-gutter-md);
    }
  }
  .pricing__wash {
    padding-top: calc(var(--spacing) * 16);
    background-color: var(--pr-wash-bg);
  }
  @media (min-width: 768px) {
    .pricing__wash {
      padding-top: calc(var(--spacing) * 24);
    }
  }
  .pricing__wash .pricing__title, .pricing__wash .pricing__eyebrow {
    color: var(--pr-tint-title);
  }
  .pricing__wash .pricing__intro {
    color: var(--pr-tint-body);
  }
  .pricing__wash .pricing__billing-toggle .toggle-label {
    color: var(--pr-tint-title);
  }
  .pricing__wash .pricing__billing-note {
    color: var(--pr-tint-body);
  }
  .pricing__stripes {
    position: relative;
    padding-block: calc(var(--spacing) * 16);
  }
  @media (min-width: 768px) {
    .pricing__stripes {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .pricing__stripes::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient( 115deg, transparent 0 38px, color-mix(in srgb, oklch(81.0% 0.163 87) 6%, transparent) 38px 39px );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient( 115deg, transparent 0 38px, color-mix(in oklch, var(--color-brand-500) 6%, transparent) 38px 39px );
    }
    -webkit-mask-image: radial-gradient(75% 75% at 50% 0%, #000 40%, transparent 100%);
    mask-image: radial-gradient(75% 75% at 50% 0%, #000 40%, transparent 100%);
  }
  .pricing__stripes > .pricing__container {
    position: relative;
  }
  @media (prefers-reduced-motion: no-preference) {
    .pricing-card, .pricing__billing .nav-link {
      transition: box-shadow .15s var(--ease-out, ease-out);
    }
  }
  .pricing-check {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    gap: calc(var(--spacing) * 3);
  }
  .pricing-check__icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 1.75rem;
    height: 1.75rem;
  }
  .pricing-check__icon svg {
    width: .9375rem;
    height: .8125rem;
    fill: currentColor;
  }
  .pricing-check__icon--contained {
    background-color: var(--pr-check-brand-bg);
    color: var(--pr-check-brand-fg);
  }
  .pricing-check--success .pricing-check__icon--contained {
    background-color: var(--pr-check-success-bg);
    color: var(--pr-check-success-fg);
  }
  .pricing-check__icon--filled {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--pr-check-filled-bg);
    color: var(--pr-check-filled-fg);
  }
  .pricing-check__icon--filled svg {
    width: .75rem;
    height: .5rem;
    fill: none;
    stroke: currentColor;
  }
  .pricing-check__icon--outlined {
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    color: var(--pr-check-brand-fg);
  }
  .pricing-check--success .pricing-check__icon--outlined {
    color: var(--pr-check-success-fg);
  }
  .pricing-check__icon--outlined svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: currentColor;
  }
  .pricing-check__text {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--pr-body);
  }
  .pricing-check__icon--filled + .pricing-check__text {
    color: var(--pr-tint-body);
  }
  .pricing-check--lg .pricing-check__icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  @media (min-width: 768px) {
    .pricing-check--lg .pricing-check__icon {
      width: 2rem;
      height: 2rem;
    }
  }
  .pricing-check--lg .pricing-check__text {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .pricing .icon-badge-brand {
    --_ib-fg: var(--pr-check-brand-fg);
    --_ib-bg: var(--pr-check-brand-bg);
  }
  .pricing-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    background-color: var(--pr-card-bg);
    border-radius: var(--pr-card-radius);
    box-shadow: inset 0 0 0 1px var(--pr-card-ring), var(--pr-card-shadow);
  }
  .pricing-card--icon, .pricing-card--dual-check, .pricing-card--badge, .pricing-card--badge-group, .pricing-card--dual-action, .pricing-card--banner {
    overflow: hidden;
  }
  .pricing-card__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 6);
    text-align: center;
  }
  @media (min-width: 768px) {
    .pricing-card__head {
      padding-inline: calc(var(--spacing) * 8);
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .pricing-card__eyebrow {
    margin-top: calc(var(--spacing) * 4);
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-tint-body);
  }
  .pricing-card__name {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
  }
  .pricing-card__desc {
    margin-top: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--pr-body);
  }
  .pricing-card__price {
    margin-top: calc(var(--spacing) * 2);
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
  }
  @media (min-width: 768px) {
    .pricing-card__price {
      font-size: 2.75rem;
      line-height: var(--tw-leading, 3rem);
      letter-spacing: var(--tw-tracking, -0.022em);
    }
  }
  .pricing-card__price-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    gap: var(--spacing);
  }
  .pricing-card__price-amount {
    font-size: 2.75rem;
    line-height: var(--tw-leading, 3rem);
    letter-spacing: var(--tw-tracking, -0.022em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
  }
  @media (min-width: 768px) {
    .pricing-card__price-amount {
      font-size: 3.5rem;
      line-height: var(--tw-leading, 3.75rem);
      letter-spacing: var(--tw-tracking, -0.025em);
    }
  }
  .pricing-card__price-symbol {
    align-self: flex-start;
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
  }
  @media (min-width: 768px) {
    .pricing-card__price-symbol {
      font-size: 2.75rem;
      line-height: var(--tw-leading, 3rem);
      letter-spacing: var(--tw-tracking, -0.022em);
    }
  }
  .pricing-card__price-period {
    padding-bottom: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--pr-body);
  }
  .pricing-card__features {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 6);
  }
  @media (min-width: 768px) {
    .pricing-card__features {
      padding-inline: calc(var(--spacing) * 8);
      padding-bottom: calc(var(--spacing) * 10);
    }
  }
  .pricing-card__features--grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 4);
  }
  @media (min-width: 768px) {
    .pricing-card__features--grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .pricing-card__foot {
    margin-top: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 8);
  }
  @media (min-width: 768px) {
    .pricing-card__foot {
      padding-inline: calc(var(--spacing) * 8);
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .pricing-card__foot :is(.btn-primary, .btn-secondary) {
    width: 100%;
  }
  .pricing-card__foot--band {
    background-color: var(--pr-foot-bg);
    border-top: 1px solid var(--pr-divider);
    border-bottom-left-radius: var(--pr-card-radius);
    border-bottom-right-radius: var(--pr-card-radius);
  }
  .pricing-card__badge {
    display: inline-flex;
  }
  .pricing-card--icon .pricing-card__eyebrow {
    margin-top: calc(var(--spacing) * 4);
  }
  .pricing-card--callout .pricing-card__head {
    padding-top: calc(var(--spacing) * 10);
  }
  .pricing-card--callout .pricing-card__foot {
    padding-top: 0;
  }
  .pricing-card__callout {
    position: absolute;
    top: calc(var(--spacing) * -6);
    right: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    color: var(--pr-tint-body);
  }
  @media (min-width: 768px) {
    .pricing-card__callout {
      right: -4rem;
    }
  }
  .pricing-card__callout svg {
    width: 60px;
    height: 46px;
    fill: currentColor;
  }
  .pricing-card__callout-text {
    margin-top: calc(var(--spacing) * -2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .pricing-card--icon-offset {
    background-color: var(--pr-foot-bg);
    box-shadow: none;
  }
  .pricing-card--icon-offset .pricing-card__head {
    padding-top: calc(var(--spacing) * 12);
  }
  .pricing-card__offset-icon {
    position: absolute;
    top: 0;
    left: calc(1 / 2 * 100%);
    transform: translate(-50%, -50%);
  }
  .pricing-card__head--row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column-reverse;
    align-items: stretch;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 8);
    text-align: left;
  }
  @media (min-width: 768px) {
    .pricing-card__head--row {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: calc(var(--spacing) * 8);
      padding-inline: calc(var(--spacing) * 8);
      padding-top: calc(var(--spacing) * 8);
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .pricing-card__head-main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
  }
  .pricing-card__head-title-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .pricing-card__content {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    border-top: 1px solid var(--pr-divider);
  }
  @media (min-width: 768px) {
    .pricing-card__content {
      padding-inline: calc(var(--spacing) * 8);
      padding-bottom: calc(var(--spacing) * 10);
    }
  }
  .pricing-card__content-title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-strong);
  }
  .pricing-card__content-title--upper {
    text-transform: uppercase;
  }
  .pricing-card__content-desc {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--pr-body);
  }
  .pricing-card--badge .pricing-card__head {
    padding-bottom: calc(var(--spacing) * 8);
  }
  @media (min-width: 768px) {
    .pricing-card--badge .pricing-card__head {
      padding-top: calc(var(--spacing) * 10);
    }
  }
  .pricing-card__rule {
    height: 1px;
    background-color: var(--pr-divider);
    margin-inline: calc(var(--spacing) * 6);
  }
  @media (min-width: 768px) {
    .pricing-card__rule {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .pricing-card__head-actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    align-self: stretch;
  }
  @media (min-width: 768px) {
    .pricing-card__head-actions {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .pricing-card__head-actions :is(.btn-primary, .btn-secondary) {
    width: 100%;
  }
  .pricing-card--badge-group .pricing-card__head {
    padding: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 8);
  }
  @media (min-width: 768px) {
    .pricing-card--badge-group .pricing-card__head {
      padding: calc(var(--spacing) * 8);
    }
  }
  .pricing-card--dual-action .pricing-card__head {
    align-items: stretch;
    padding: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 8);
    text-align: left;
  }
  @media (min-width: 768px) {
    .pricing-card--dual-action .pricing-card__head {
      padding: calc(var(--spacing) * 8);
    }
  }
  .pricing-card__head-topline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: space-between;
  }
  .pricing-card--dual-action .pricing-card__content {
    border-top: none;
    box-shadow: inset 0 0 0 1px var(--pr-divider);
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pricing-card--dual-action .pricing-card__name {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    color: var(--pr-body);
  }
  .pricing-card__banner {
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--pr-brand-solid);
    color: var(--pr-on-brand);
  }
  .pricing-card--banner .pricing-card__head {
    padding-top: calc(var(--spacing) * 8);
  }
  .pricing-card--simple, .pricing-card--primary-icon {
    background-color: var(--pr-tint-bg);
    box-shadow: none;
    overflow: visible;
  }
  .pricing-card--simple .pricing-card__head {
    padding-top: calc(var(--spacing) * 10);
  }
  .pricing-card--simple .pricing-card__price, .pricing-card--primary-icon .pricing-card__price {
    color: var(--pr-tint-title);
  }
  .pricing-card--simple .pricing-card__name, .pricing-card--primary-icon .pricing-card__name {
    color: var(--pr-tint-title);
  }
  .pricing-card--simple .pricing-card__eyebrow, .pricing-card--primary-icon .pricing-card__eyebrow {
    color: var(--pr-tint-body);
  }
  .pricing-card--simple .pricing-card__desc, .pricing-card--primary-icon .pricing-card__desc {
    color: var(--pr-tint-body);
  }
  .pricing-card--simple .pricing-card__features, .pricing-card--primary-icon .pricing-card__features {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pricing-card--simple .pricing-card__foot, .pricing-card--primary-icon .pricing-card__foot {
    padding-top: 0;
  }
  .pricing-card--popular {
    box-shadow: inset 0 0 0 2px var(--pr-border-brand), var(--pr-card-shadow);
  }
  .pricing-table {
    width: 100%;
  }
  .pricing-table__usage {
    margin-inline: auto;
    width: 100%;
    max-width: var(--pr-container);
    padding-inline: var(--pr-gutter);
  }
  @media (min-width: 768px) {
    .pricing-table__usage {
      padding-inline: var(--pr-gutter-md);
    }
  }
  .pricing-table__grid {
    display: none;
  }
  @media (min-width: 1024px) {
    .pricing-table__grid {
      display: block;
    }
    .pricing-table__stack {
      display: none;
    }
  }
  .pricing-table__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  .pricing-table__col {
    width: 25%;
  }
  .pricing-table__tier {
    padding-inline: calc(var(--spacing) * 6);
    padding-top: 0;
    padding-bottom: calc(var(--spacing) * 4);
    text-align: left;
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
    vertical-align: bottom;
  }
  .pricing-table__tier-inner {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .pricing-table__head-row {
    border-bottom: 1px solid var(--pr-divider);
  }
  .pricing-table__price-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    vertical-align: top;
  }
  @media (min-width: 768px) {
    .pricing-table__price-cell {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }
  .pricing-table__price {
    font-size: 2.75rem;
    line-height: var(--tw-leading, 3rem);
    letter-spacing: var(--tw-tracking, -0.022em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
  }
  .pricing-table__price-period {
    margin-left: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--pr-body);
  }
  .pricing-table__price-desc {
    margin-top: calc(var(--spacing) * 4);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--pr-body);
  }
  .pricing-table__price-actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .pricing-table__price-actions :is(.btn-primary, .btn-secondary) {
    width: 100%;
  }
  .pricing-table__group {
    padding-inline: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 4);
    text-align: left;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-eyebrow);
  }
  .pricing-table__group--spaced {
    padding-top: calc(var(--spacing) * 10);
  }
  .pricing-table__row--zebra {
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
  }
  .pricing-table__row--edge {
    border-bottom: 1px solid var(--pr-divider);
  }
  .pricing-table__feature {
    padding-inline: calc(var(--spacing) * 6);
    text-align: left;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    padding-block: 1.375rem;
    color: var(--pr-strong);
  }
  .pricing-table__help {
    margin-left: var(--spacing);
    display: inline-flex;
    cursor: help;
    vertical-align: middle;
    color: var(--pr-muted);
  }
  .pricing-table__help:hover, .pricing-table__help:focus-visible {
    color: var(--text-quaternary-hover);
  }
  .pricing-table__help:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .pricing-table__cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
    text-align: center;
  }
  .pricing-table__cell-inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
  }
  .pricing-table__yes {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--pr-check-success-fg);
  }
  .pricing-table__no {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--pr-muted);
  }
  .pricing-table__value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--pr-body);
  }
  .pricing-table__foot-cell {
    padding-inline: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pricing-table__foot-cell .btn-primary, .pricing-table__foot-cell .btn-secondary {
    width: 100%;
  }
  .pricing-table--icons .pricing-table__tier, .pricing-table--icons .pricing-table__tier-inner {
    justify-content: center;
    text-align: center;
  }
  .pricing-table--icons .pricing-table__price-cell {
    text-align: center;
  }
  .pricing-table__col-highlight {
    position: relative;
    box-shadow: inset 2px 0 0 var(--pr-border-brand), inset -2px 0 0 var(--pr-border-brand);
  }
  .pricing-table__col-highlight-top {
    box-shadow: inset 2px 0 0 var(--pr-border-brand), inset -2px 0 0 var(--pr-border-brand), inset 0 2px 0 var(--pr-border-brand);
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }
  .pricing-table__col-highlight-bottom {
    box-shadow: inset 2px 0 0 var(--pr-border-brand), inset -2px 0 0 var(--pr-border-brand), inset 0 -2px 0 var(--pr-border-brand);
    border-bottom-left-radius: var(--radius-2xl);
    border-bottom-right-radius: var(--radius-2xl);
  }
  .pricing-table__stack {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  @media (min-width: 1024px) {
    .pricing-table__stack {
      display: none;
    }
  }
  .pricing-table__stack-head {
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 4);
  }
  .pricing-table__stack-name {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-title);
  }
  .pricing-table__stack-price {
    margin-top: calc(var(--spacing) * 4);
  }
  .pricing-table__stack-desc {
    margin-top: calc(var(--spacing) * 4);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--pr-body);
  }
  .pricing-table__stack-actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .pricing-table__stack-actions :is(.btn-primary, .btn-secondary) {
    width: 100%;
  }
  .pricing-table__stack-table {
    margin-bottom: calc(var(--spacing) * 8);
    width: 100%;
  }
  .pricing-table__stack-caption {
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
    text-align: left;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--pr-eyebrow);
  }
  .pricing-table__stack-feature {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    padding-block: calc(var(--spacing) * 4);
    padding-left: calc(var(--spacing) * 4);
    text-align: left;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--pr-strong);
  }
  .pricing-table__stack-cell {
    padding-block: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }
  .pricing-table__stack-cell-inner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
  .pricing__connected {
    position: relative;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .pricing__connected {
      box-shadow: var(--shadow-lg);
    }
  }
  .pricing__connected-line {
    pointer-events: none;
    position: absolute;
    top: -1px;
    display: none;
    left: -1px;
    right: -1px;
    height: .5rem;
    background-color: var(--pr-brand-solid);
  }
  @media (min-width: 1024px) {
    .pricing__connected-line {
      display: block;
    }
  }
  .pricing__connected-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  @media (min-width: 768px) {
    .pricing__connected-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-top: .5rem;
    }
  }
  @media (min-width: 1024px) {
    .pricing__connected-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      box-shadow: inset 0 0 0 1px var(--pr-card-ring);
    }
  }
  .pricing__connected-cell {
    position: relative;
  }
  .pricing__connected-divider {
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-block: calc(var(--spacing) * 10);
    display: none;
    width: 1px;
    background-color: var(--pr-divider);
  }
  @media (min-width: 1024px) {
    .pricing__connected-divider {
      display: block;
    }
  }
  @media (min-width: 1024px) {
    .pricing__connected-grid .pricing-card {
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
  }
  [data-theme="theme-dark"] .pricing, [data-theme="theme-mica-dark"] .pricing {
    --pr-tint-bg: oklch(81.0% 0.163 87);
    @supports (color: color-mix(in lab, red, red)) {
      --pr-tint-bg: color-mix(in oklch, var(--color-brand-500) 16%, var(--bg-card));
    }
    --pr-tint-title: var(--color-brand-100);
    --pr-tint-body: var(--color-brand-200);
    --pr-band-bg: var(--color-brand-950);
    --pr-band-body: color-mix(in srgb, #fff 70%, oklch(28.0% 0.062 58));
    @supports (color: color-mix(in lab, red, red)) {
      --pr-band-body: color-mix(in oklch, var(--color-white) 70%, var(--color-brand-950));
    }
    --pr-wash-bg: oklch(81.0% 0.163 87);
    @supports (color: color-mix(in lab, red, red)) {
      --pr-wash-bg: color-mix(in oklch, var(--color-brand-500) 14%, var(--bg-body));
    }
    --pr-check-brand-bg: oklch(81.0% 0.163 87);
    @supports (color: color-mix(in lab, red, red)) {
      --pr-check-brand-bg: color-mix(in oklch, var(--color-brand-500) 22%, var(--bg-card));
    }
    --pr-check-brand-fg: var(--color-brand-300);
  }
}
@layer utilities {
  .testimonial {
    --tm-max: 80rem;
    --tm-pad-x: 1rem;
    --tm-pad-y: 4rem;
    --tm-gap: 2.5rem;
    --tm-display-xs: 1.5rem;
    --tm-display-sm: 1.875rem;
    --tm-display-md: 2.25rem;
    --tm-display-lg: 2.75rem;
    --tm-quote-lh: 1.2;
    --tm-section-bg: var(--bg-primary);
    --tm-card-bg: var(--bg-secondary);
    --tm-ink: var(--text-primary);
    --tm-ink-muted: var(--text-tertiary);
    --tm-ink-secondary: var(--text-secondary);
    --tm-ring: var(--border-secondary);
    --tm-eyebrow: var(--color-brand-700);
    --tm-focus: var(--border-focus);
    --tm-glass-bg: var(--alpha-white-30);
    --tm-glass-ring: var(--alpha-white-30);
    --tm-glass-ink: var(--color-white);
    --tm-scrim: linear-gradient(to top, oklch(0% 0 0 / 0.4), oklch(0% 0 0 / 0));
    --tm-radius-card: 1rem;
    --tm-radius-panel: 0.75rem;
    display: block;
    position: relative;
    background-color: var(--tm-section-bg);
    color: var(--tm-ink);
    padding-block: var(--tm-pad-y);
    isolation: isolate;
  }
  @media (min-width: 768px) {
    .testimonial {
      --tm-pad-x: 2rem;
      --tm-pad-y: 6rem;
      --tm-display-sm: 1.875rem;
      --tm-display-md: 2.5rem;
      --tm-display-lg: 3rem;
    }
  }
  [data-theme="theme-dark"] .testimonial, [data-theme="theme-mica-dark"] .testimonial {
    --tm-eyebrow: var(--color-brand-400);
  }
  .testimonial__container {
    width: 100%;
    max-width: var(--tm-max);
    margin-inline: auto;
    padding-inline: var(--tm-pad-x);
  }
  .testimonial__quote {
    margin: 0;
    font-size: var(--tm-display-md);
    line-height: var(--tm-quote-lh);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--tm-ink);
    text-wrap: balance;
  }
  .testimonial__caption {
    margin: 0;
  }
  .testimonial__name {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--tm-ink);
  }
  .testimonial__role {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    font-style: normal;
    color: var(--tm-ink-muted);
  }
  .testimonial__eyebrow {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--tm-eyebrow);
  }
  .testimonial__heading {
    margin: 0;
    font-size: var(--tm-display-sm);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--tm-ink);
  }
  .testimonial__subheading {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--tm-ink-muted);
  }
  @media (min-width: 1024px) {
    .testimonial__heading {
      font-size: var(--tm-display-md);
    }
    .testimonial__subheading {
      font-size: 1.25rem;
    }
  }
  .testimonial__logo {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
    display: block;
  }
  .testimonial__logo--sm {
    height: 2rem;
  }
  .testimonial__logo--dark {
    display: none;
    opacity: 0.85;
  }
  [data-theme="theme-dark"] .testimonial__logo--light, [data-theme="theme-mica-dark"] .testimonial__logo--light {
    display: none;
  }
  [data-theme="theme-dark"] .testimonial__logo--dark, [data-theme="theme-mica-dark"] .testimonial__logo--dark {
    display: block;
  }
  .testimonial__person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }
  .testimonial__person-body {
    min-width: 0;
  }
  .testimonial__person-name {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    font-weight: 600;
    color: var(--tm-ink);
    font-size: 1rem;
  }
  .testimonial__person-sub {
    margin: 0;
    color: var(--tm-ink-muted);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .testimonial__verified {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-brand-600);
  }
  .testimonial__verified svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  [data-theme="theme-dark"] .testimonial__verified, [data-theme="theme-mica-dark"] .testimonial__verified {
    color: var(--color-brand-400);
  }
  .testimonial__wordmark {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    color: var(--tm-ink);
  }
  .testimonial__glass .testimonial__wordmark, .testimonial__study-card .testimonial__wordmark {
    color: var(--color-white);
  }
  .testimonial__nav {
    display: flex;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .testimonial__nav {
      gap: 2rem;
    }
  }
  .testimonial__round {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--tm-ring);
    color: var(--text-quaternary, var(--text-tertiary));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background-color var(--duration-fast) linear, color var(--duration-fast) linear;
  }
  @media (min-width: 768px) {
    .testimonial__round {
      width: 3.5rem;
      height: 3.5rem;
    }
  }
  .testimonial__round:hover {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .testimonial__round:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--tm-ring), 0 0 0 2px var(--tm-focus);
  }
  .testimonial__round[disabled] {
    opacity: 0.4;
    cursor: default;
  }
  .testimonial__round i, .testimonial__round svg {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
  }
  @media (min-width: 768px) {
    .testimonial__round i, .testimonial__round svg {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 1.5rem;
    }
  }
  .testimonial__dots {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0;
  }
  .testimonial__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--bg-quaternary, var(--text-tertiary));
    opacity: 0.35;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: opacity var(--duration-fast) linear, background-color var(--duration-fast) linear;
  }
  .testimonial__dot:hover {
    opacity: 0.6;
  }
  .testimonial__dot[aria-current="true"] {
    background-color: var(--bg-brand-solid);
    opacity: 1;
  }
  .testimonial__dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tm-section-bg), 0 0 0 4px var(--tm-focus);
  }
  .testimonial__slides {
    display: grid;
  }
  .testimonial__slide {
    grid-area: 1 / 1;
  }
  .testimonial__slide[hidden] {
    display: none;
  }
  .testimonial__imagewrap .testimonial__slides {
    height: 100%;
  }
  .testimonial__imagewrap .testimonial__slides .testimonial__media {
    width: 100%;
    height: 100%;
  }
  .testimonial[data-testimonial="fade"] .testimonial__slide {
    animation: tm-rise var(--duration-slow) var(--ease-out) both;
  }
  @keyframes tm-rise {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.99);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .testimonial__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .testimonial__viewport::-webkit-scrollbar {
    display: none;
  }
  .testimonial__track {
    display: flex;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .testimonial__track {
      gap: 2rem;
    }
  }
  .testimonial__track > * {
    scroll-snap-align: start;
    flex: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .testimonial[data-testimonial="fade"] .testimonial__slide {
      animation: none;
    }
    .testimonial__viewport {
      scroll-behavior: auto;
    }
    .testimonial__round, .testimonial__dot {
      transition: none;
    }
  }
  .testimonial__scrim {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    background: var(--tm-scrim);
    padding: 4rem 0.75rem 0.75rem;
  }
  @media (min-width: 768px) {
    .testimonial__scrim {
      padding: 5rem 1rem 1rem;
    }
  }
  .testimonial__glass {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-radius: var(--tm-radius-panel);
    background-color: var(--tm-glass-bg);
    box-shadow: inset 0 0 0 1px var(--tm-glass-ring);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 1.5rem 1rem;
    color: var(--tm-glass-ink);
  }
  @media (min-width: 768px) {
    .testimonial__glass {
      border-radius: 1rem;
      padding: 1.25rem;
    }
  }
  .testimonial__glass--flush {
    border-radius: 0;
    box-shadow: none;
    position: relative;
  }
  .testimonial__glass--flush::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background-color: var(--tm-glass-ring);
  }
  .testimonial__glass .testimonial__name, .testimonial__glass .testimonial__role, .testimonial__glass q {
    color: var(--tm-glass-ink);
  }
  .testimonial__glass q {
    font-size: 1.25rem;
    font-weight: 600;
    text-wrap: balance;
    quotes: none;
  }
  .testimonial__glass-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .testimonial__glass-meta p {
    margin: 0;
    color: var(--tm-glass-ink);
  }
  .testimonial__glass-industry {
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.9;
  }
  .testimonial__glass .rating, .rating.testimonial__rating--white {
    --star-filled: var(--tm-glass-ink);
    --star-empty: var(--alpha-white-30);
  }
  .testimonial__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--alpha-white-30);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--color-white);
    cursor: pointer;
    border: 0;
    transition: background-color var(--duration-fast) linear;
  }
  .testimonial__play:hover {
    background-color: var(--alpha-white-50);
  }
  .testimonial__play:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tm-focus);
  }
  .testimonial__play i, .testimonial__play svg {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .testimonial__play {
      transition: none;
    }
  }
  .testimonial__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .testimonial__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    align-self: stretch;
  }
  @media (min-width: 640px) {
    .testimonial__actions {
      flex-direction: row;
      align-self: flex-start;
    }
  }
  .testimonial--centered .testimonial__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .testimonial--centered .testimonial__figure {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    max-width: 67.5rem;
    align-items: center;
  }
  .testimonial--centered .testimonial__quote {
    font-size: var(--tm-display-sm);
  }
  @media (min-width: 768px) {
    .testimonial--centered .testimonial__quote {
      font-size: var(--tm-display-md);
    }
  }
  .testimonial--centered .testimonial__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .testimonial--centered .testimonial__rating {
    justify-content: center;
  }
  .testimonial--centered-logo .testimonial__figure {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    align-items: center;
  }
  .testimonial--centered-logo .testimonial__quote {
    font-size: var(--tm-display-sm);
  }
  @media (min-width: 768px) {
    .testimonial--centered-logo .testimonial__quote {
      font-size: var(--tm-display-lg);
    }
  }
  .testimonial--centered-logo .testimonial__logo {
    margin-inline: auto;
  }
  .testimonial--centered-logos .testimonial__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  @media (min-width: 768px) {
    .testimonial--centered-logos .testimonial__stage {
      gap: 3rem;
    }
  }
  .testimonial--centered-logos .testimonial__figure {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    align-items: center;
  }
  .testimonial--centered-logos .testimonial__quote {
    font-size: var(--tm-display-sm);
  }
  @media (min-width: 768px) {
    .testimonial--centered-logos .testimonial__quote {
      font-size: var(--tm-display-md);
    }
  }
  @media (min-width: 1024px) {
    .testimonial--centered-logos .testimonial__quote {
      font-size: var(--tm-display-lg);
    }
  }
  .testimonial__tabs {
    display: none;
  }
  @media (min-width: 768px) {
    .testimonial__tabs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      justify-items: center;
      gap: 2rem;
      width: 100%;
    }
  }
  .testimonial__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0.5;
    filter: grayscale(1);
    transition: opacity var(--duration-fast) linear, filter var(--duration-fast) linear;
  }
  .testimonial__tab:hover {
    opacity: 0.8;
  }
  .testimonial__tab[aria-selected="true"] {
    opacity: 1;
    filter: none;
  }
  .testimonial__tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tm-focus);
    border-radius: 0.375rem;
  }
  .testimonial__mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }
  @media (min-width: 768px) {
    .testimonial__mobile-nav {
      display: none;
    }
  }
  .testimonial__mobile-arrow {
    border: 0;
    background: none;
    color: var(--text-quaternary, var(--text-tertiary));
    cursor: pointer;
    padding: 0.25rem;
  }
  .testimonial__mobile-arrow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tm-focus);
    border-radius: 0.375rem;
  }
  .testimonial--left .testimonial__figure {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }
  @media (min-width: 1024px) {
    .testimonial--left .testimonial__figure {
      flex-direction: row;
      gap: 8rem;
    }
  }
  .testimonial--left .testimonial__portrait {
    width: 12.5rem;
    height: 12.5rem;
    flex: none;
    border-radius: 1rem;
    object-fit: cover;
  }
  @media (min-width: 768px) {
    .testimonial--left .testimonial__portrait {
      width: 20.5rem;
      height: 20.5rem;
    }
  }
  .testimonial--left .testimonial__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .testimonial--left .testimonial__quote {
    font-size: var(--tm-display-xs);
  }
  @media (min-width: 768px) {
    .testimonial--left .testimonial__quote {
      font-size: var(--tm-display-md);
    }
  }
  .testimonial--card .testimonial__card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    align-items: center;
    border-radius: var(--tm-radius-card);
    background-color: var(--tm-card-bg);
    padding: 2.5rem 1.5rem;
  }
  @media (min-width: 768px) {
    .testimonial--card .testimonial__card {
      gap: 2rem;
      padding: 3rem 2rem;
    }
  }
  @media (min-width: 1024px) {
    .testimonial--card .testimonial__card {
      padding: 4rem;
    }
  }
  .testimonial--card .testimonial__heads {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
  .testimonial--card .testimonial__quote {
    font-size: var(--tm-display-xs);
  }
  @media (min-width: 640px) {
    .testimonial--card .testimonial__quote {
      font-size: var(--tm-display-sm);
    }
  }
  @media (min-width: 768px) {
    .testimonial--card .testimonial__quote {
      font-size: var(--tm-display-md);
    }
  }
  .testimonial--card-split .testimonial__card {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    overflow: hidden;
    border-radius: var(--tm-radius-card);
    background-color: var(--tm-card-bg);
  }
  @media (min-width: 1024px) {
    .testimonial--card-split .testimonial__card {
      border-radius: 1.5rem;
      grid-template-columns: auto auto;
    }
  }
  .testimonial--card-split .testimonial__panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
  }
  @media (min-width: 768px) {
    .testimonial--card-split .testimonial__panel {
      padding: 3rem 2rem;
    }
  }
  @media (min-width: 1024px) {
    .testimonial--card-split .testimonial__panel {
      padding: 4rem;
    }
  }
  .testimonial--card-split .testimonial__quote {
    font-size: var(--tm-display-xs);
  }
  @media (min-width: 640px) {
    .testimonial--card-split .testimonial__quote {
      font-size: var(--tm-display-sm);
    }
  }
  @media (min-width: 768px) {
    .testimonial--card-split .testimonial__quote {
      font-size: var(--tm-display-md);
    }
  }
  .testimonial--card-split .testimonial__imagewrap {
    position: relative;
    width: 100%;
    height: 17.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  @media (min-width: 640px) {
    .testimonial--card-split .testimonial__imagewrap {
      height: 100%;
      min-height: 22.5rem;
    }
  }
  @media (min-width: 1024px) {
    .testimonial--card-split .testimonial__imagewrap {
      min-height: 28rem;
      width: 30rem;
    }
  }
  .testimonial--social .testimonial__stack, .testimonial--wall .testimonial__stack, .testimonial--masonry .testimonial__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
  .testimonial--social .testimonial__intro, .testimonial--wall .testimonial__intro, .testimonial--masonry .testimonial__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }
  .testimonial--masonry .testimonial__intro {
    align-items: stretch;
    text-align: left;
  }
  .testimonial__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .testimonial--social .testimonial__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
    .testimonial--wall .testimonial__grid, .testimonial--masonry .testimonial__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
  }
  .testimonial__review {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-radius: var(--tm-radius-panel);
    background-color: var(--tm-card-bg);
    padding: 1.5rem;
  }
  @media (min-width: 1024px) {
    .testimonial__review {
      padding: 2rem;
    }
  }
  .testimonial--social .testimonial__review {
    gap: 3rem;
    box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--tm-ring);
  }
  @media (min-width: 1024px) {
    .testimonial--social .testimonial__review {
      min-height: 16rem;
      justify-content: space-between;
      gap: 0;
    }
  }
  .testimonial--masonry .testimonial__review {
    box-shadow: inset 0 0 0 1px var(--tm-ring);
  }
  @media (min-width: 1024px) {
    .testimonial--masonry .testimonial__review {
      justify-content: space-between;
      gap: 3rem;
    }
  }
  .testimonial__review-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .testimonial__review-quote {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 500;
    color: var(--tm-ink);
  }
  @media (min-width: 1024px) {
    .testimonial--social .testimonial__review-quote {
      font-size: 1.25rem;
    }
  }
  .testimonial--wall .testimonial__review-quote {
    font-size: 0.875rem;
    font-weight: 500;
  }
  .testimonial--masonry .testimonial__review-quote {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--tm-ink-muted);
  }
  .testimonial__review-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .testimonial--wall .testimonial__review {
    flex-direction: column;
    align-items: flex-start;
  }
  .testimonial--wall .testimonial__review-top {
    gap: 1rem;
  }
  .testimonial__column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  @media (min-width: 1024px) {
    .testimonial__column {
      gap: 2rem;
    }
  }
  @media (min-width: 1024px) {
    .testimonial__column--a {
      padding-block: 2rem;
    }
    .testimonial__column--c {
      padding-top: 2.5rem;
    }
  }
  .testimonial--masonry .testimonial__grid {
    position: relative;
  }
  @media (min-width: 1024px) {
    .testimonial--masonry .testimonial__grid {
      -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 340px), transparent);
      mask-image: linear-gradient(to bottom, black calc(100% - 340px), transparent);
    }
  }
  .testimonial--glass, .testimonial--glass-flush {
    overflow: hidden;
  }
  .testimonial--glass .testimonial__stack, .testimonial--glass-flush .testimonial__stack, .testimonial--glass-grid .testimonial__stack {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .testimonial--glass .testimonial__head, .testimonial--glass-flush .testimonial__head, .testimonial--glass-grid .testimonial__head, .testimonial--case-study .testimonial__head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .testimonial--glass .testimonial__head, .testimonial--glass-flush .testimonial__head, .testimonial--glass-grid .testimonial__head, .testimonial--case-study .testimonial__head {
      flex-direction: row;
      gap: 0;
    }
  }
  .testimonial__head-copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 48rem;
  }
  .testimonial__portrait-card {
    position: relative;
    overflow: hidden;
    width: 18rem;
    height: 24rem;
  }
  @media (min-width: 768px) {
    .testimonial__portrait-card {
      width: 22.5rem;
      height: 30rem;
    }
  }
  .testimonial--glass-grid .testimonial__portrait-card, .testimonial--glass-flush .testimonial__portrait-card {
    width: auto;
  }
  .testimonial__portrait-card .testimonial__media {
    position: absolute;
    inset: 0;
  }
  .testimonial--glass-grid .testimonial__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 640px) {
    .testimonial--glass-grid .testimonial__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .testimonial--glass-grid .testimonial__grid {
      grid-template-columns: repeat(3, minmax(0, 24rem));
      gap: 2rem;
    }
  }
  .testimonial--glass-grid .testimonial__portrait-card {
    height: 25rem;
  }
  @media (min-width: 768px) {
    .testimonial--glass-grid .testimonial__portrait-card {
      height: 30rem;
    }
  }
  .testimonial__loadmore {
    align-self: center;
  }
  @media (min-width: 640px) {
    .testimonial__loadmore {
      display: none;
    }
  }
  .testimonial--split, .testimonial--split-caption, .testimonial--split-plain {
    overflow: hidden;
  }
  .testimonial--split .testimonial__container, .testimonial--split-caption .testimonial__container, .testimonial--split-plain .testimonial__container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  @media (min-width: 768px) {
    .testimonial--split .testimonial__container, .testimonial--split-caption .testimonial__container, .testimonial--split-plain .testimonial__container {
      gap: 4rem;
    }
  }
  @media (min-width: 1024px) {
    .testimonial--split .testimonial__container, .testimonial--split-caption .testimonial__container, .testimonial--split-plain .testimonial__container {
      flex-direction: row;
      align-items: center;
    }
  }
  .testimonial--split .testimonial__figure, .testimonial--split-caption .testimonial__figure, .testimonial--split-plain .testimonial__figure {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .testimonial--split .testimonial__figure, .testimonial--split-caption .testimonial__figure, .testimonial--split-plain .testimonial__figure {
      flex: 1;
      gap: 3rem;
    }
  }
  .testimonial--split .testimonial__quote, .testimonial--split-caption .testimonial__quote, .testimonial--split-plain .testimonial__quote {
    font-size: var(--tm-display-sm);
  }
  @media (min-width: 640px) {
    .testimonial--split .testimonial__quote, .testimonial--split-caption .testimonial__quote, .testimonial--split-plain .testimonial__quote {
      font-size: var(--tm-display-md);
    }
  }
  @media (min-width: 768px) {
    .testimonial--split .testimonial__quote, .testimonial--split-caption .testimonial__quote, .testimonial--split-plain .testimonial__quote {
      font-size: var(--tm-display-lg);
    }
  }
  .testimonial--split .testimonial__figfoot, .testimonial--split-caption .testimonial__figfoot, .testimonial--split-plain .testimonial__figfoot {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: space-between;
  }
  @media (min-width: 768px) {
    .testimonial--split .testimonial__figfoot, .testimonial--split-caption .testimonial__figfoot, .testimonial--split-plain .testimonial__figfoot {
      flex-direction: row;
      align-items: center;
    }
  }
  .testimonial--split .testimonial__imagewrap, .testimonial--split-caption .testimonial__imagewrap, .testimonial--split-plain .testimonial__imagewrap {
    position: relative;
    height: 25rem;
    overflow: hidden;
  }
  @media (min-width: 640px) {
    .testimonial--split .testimonial__imagewrap, .testimonial--split-caption .testimonial__imagewrap, .testimonial--split-plain .testimonial__imagewrap {
      height: 23.75rem;
    }
  }
  @media (min-width: 1024px) {
    .testimonial--split .testimonial__imagewrap, .testimonial--split-caption .testimonial__imagewrap, .testimonial--split-plain .testimonial__imagewrap {
      height: 45rem;
      flex: 1;
    }
  }
  .testimonial--abstract .testimonial__container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .testimonial--abstract .testimonial__container {
      gap: 4rem;
    }
  }
  @media (min-width: 1024px) {
    .testimonial--abstract .testimonial__container {
      flex-direction: row;
      align-items: center;
    }
  }
  .testimonial--abstract .testimonial__figure {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 768px) {
    .testimonial--abstract .testimonial__figure {
      gap: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .testimonial--abstract .testimonial__figure {
      flex: 1;
    }
  }
  .testimonial--abstract .testimonial__quote {
    font-size: var(--tm-display-sm);
  }
  @media (min-width: 640px) {
    .testimonial--abstract .testimonial__quote {
      font-size: var(--tm-display-md);
    }
  }
  @media (min-width: 768px) {
    .testimonial--abstract .testimonial__quote {
      font-size: var(--tm-display-lg);
    }
  }
  .testimonial--abstract .testimonial__figfoot {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .testimonial--abstract .testimonial__figfoot {
      flex-direction: row;
    }
  }
  .testimonial__collage {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    height: 30.5rem;
    width: 150%;
    align-self: center;
  }
  @media (min-width: 640px) {
    .testimonial__collage {
      height: 31rem;
      width: 120%;
      gap: 1rem;
    }
  }
  @media (min-width: 768px) {
    .testimonial__collage {
      width: auto;
    }
  }
  @media (min-width: 1024px) {
    .testimonial__collage {
      flex: 1;
    }
  }
  .testimonial__collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .testimonial__collage-img:nth-child(1) {
    grid-area: 3 / 3 / 7 / 7;
  }
  .testimonial__collage-img:nth-child(2) {
    grid-area: 1 / 7 / 7 / 11;
  }
  .testimonial__collage-img:nth-child(3) {
    grid-area: 7 / 1 / 10 / 5;
  }
  .testimonial__collage-img:nth-child(4) {
    grid-area: 7 / 5 / 13 / 9;
  }
  .testimonial__collage-img:nth-child(5) {
    grid-area: 7 / 9 / 10 / 13;
  }
  .testimonial--case-study {
    overflow: hidden;
  }
  .testimonial--case-study .testimonial__stack {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .testimonial__study-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 19rem;
    height: 29.5rem;
    padding: 1.5rem;
    overflow: hidden;
    color: var(--color-white);
  }
  @media (min-width: 768px) {
    .testimonial__study-card {
      width: 24rem;
      height: 31.5rem;
      padding: 1.25rem;
    }
  }
  .testimonial__study-card--brand {
    background-color: var(--color-brand-600);
  }
  .testimonial__study-card--green {
    background-color: var(--utility-green-600);
  }
  .testimonial__study-card--blue {
    background-color: var(--utility-blue-600);
  }
  .testimonial__study-card--indigo {
    background-color: var(--utility-indigo-600);
  }
  .testimonial__study-logo {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    height: 2.5rem;
    object-fit: contain;
  }
  @media (min-width: 768px) {
    .testimonial__study-logo {
      top: 2rem;
      left: 2rem;
      height: 3rem;
    }
  }
  .testimonial__study-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--alpha-white-30);
    box-shadow: inset 0 0 0 1px var(--alpha-white-30);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 1.25rem 1rem;
  }
  @media (min-width: 768px) {
    .testimonial__study-panel {
      padding: 2rem 1.5rem;
    }
  }
  .testimonial__study-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-white);
  }
  .testimonial__study-quote {
    margin: 0.75rem 0 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-white);
    text-wrap: balance;
    quotes: none;
  }
  .testimonial__study-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
  }
  .testimonial__study-cta:hover {
    text-decoration: underline;
  }
  .testimonial__study-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-white);
    border-radius: 0.25rem;
  }
  .testimonial--brand {
    --tm-section-bg: var(--color-brand-800);
    --tm-card-bg: var(--color-brand-800);
    --tm-ink: var(--color-white);
    --tm-ink-secondary: var(--color-brand-200);
    --tm-ink-muted: var(--color-brand-200);
    --tm-ring: var(--alpha-white-20, oklch(100% 0 0 / 0.2));
    --tm-eyebrow: var(--color-brand-200);
  }
  [data-theme="theme-dark"] .testimonial--brand, [data-theme="theme-mica-dark"] .testimonial--brand {
    --tm-section-bg: var(--color-brand-950);
    --tm-card-bg: var(--color-brand-950);
  }
  .testimonial--brand.testimonial--card, .testimonial--brand.testimonial--card-split {
    --tm-section-bg: var(--bg-primary);
    --tm-ink: var(--text-primary);
  }
  .testimonial--brand.testimonial--card .testimonial__card, .testimonial--brand.testimonial--card-split .testimonial__card {
    --tm-card-bg: var(--color-brand-800);
    --tm-ink: var(--color-white);
    --tm-ink-muted: var(--color-brand-200);
    --tm-eyebrow: var(--color-brand-200);
    color: var(--color-white);
  }
  [data-theme="theme-dark"] .testimonial--brand.testimonial--card .testimonial__card, [data-theme="theme-mica-dark"] .testimonial--brand.testimonial--card .testimonial__card, [data-theme="theme-dark"] .testimonial--brand.testimonial--card-split .testimonial__card, [data-theme="theme-mica-dark"] .testimonial--brand.testimonial--card-split .testimonial__card {
    --tm-card-bg: var(--color-brand-950);
  }
  .testimonial--brand .testimonial__dot {
    background-color: var(--color-brand-200);
  }
  .testimonial--brand .testimonial__dot[aria-current="true"] {
    background-color: var(--color-white);
  }
  .testimonial--brand .testimonial__dot:focus-visible {
    box-shadow: 0 0 0 2px var(--tm-section-bg), 0 0 0 4px var(--color-white);
  }
}
@layer utilities {
  .mkt-section {
    width: 100%;
    padding-block: 4rem;
    background-color: var(--bg-primary);
  }
  .mkt-section--brand {
    background-color: var(--bg-brand-section, var(--bg-brand-solid));
  }
  .mkt-section--alt {
    background-color: var(--bg-secondary);
  }
  .mkt-section__container {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    max-width: 80rem;
    padding-inline: 1rem;
  }
  @media (min-width: 1024px) {
    .mkt-section__container {
      padding-inline: 2rem;
    }
  }
  .mkt-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    max-width: var(--container-3xl);
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-head--center {
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }
  .mkt-head__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-icon-brand, var(--text-brand-secondary));
  }
  .mkt-head__title {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  .mkt-head__subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .mkt-section--brand .mkt-head__title {
    color: var(--text-on-brand);
  }
  .mkt-section--brand .mkt-head__subtitle {
    color: var(--text-on-brand-secondary, var(--text-on-brand));
  }
  .mkt-section--brand .mkt-head__eyebrow {
    color: var(--text-on-brand);
    opacity: 0.85;
  }
  .mkt-features {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: 1fr;
    margin-top: 3rem;
  }
  @media (min-width: 640px) {
    .mkt-features {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .mkt-features--3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .mkt-features--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .mkt-feature {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-feature--center {
    align-items: center;
    text-align: center;
  }
  .mkt-feature__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-brand-section-subtle, var(--bg-secondary));
    color: var(--text-icon-brand, var(--text-brand-secondary));
    font-size: 1.25rem;
  }
  .mkt-feature__icon--outline {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    color: var(--text-secondary);
  }
  .mkt-feature__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .mkt-feature__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .mkt-feature__link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9375rem;
    color: var(--text-icon-brand, var(--text-brand-secondary));
  }
  .mkt-section--brand .mkt-feature__title {
    color: var(--text-on-brand);
  }
  .mkt-section--brand .mkt-feature__text {
    color: var(--text-on-brand-secondary, var(--text-on-brand));
  }
  .mkt-section--brand .mkt-feature__icon {
    background-color: var(--bg-on-brand-subtle, var(--bg-brand-solid-hover));
    color: var(--text-on-brand);
  }
  .mkt-feature--card {
    padding: 1.5rem;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .mkt-alt {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 3rem;
  }
  .mkt-alt__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .mkt-alt__row {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
    .mkt-alt__row--reverse .mkt-alt__media {
      order: 2;
    }
  }
  .mkt-alt__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .mkt-alt__points {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-alt__point {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-alt__point-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--bg-brand-section-subtle, var(--bg-secondary));
    color: var(--text-icon-brand, var(--text-brand-secondary));
    font-size: 0.75rem;
  }
  .mkt-mockup {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-2xl, 1rem);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xl);
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    color: var(--text-quaternary);
    font-size: 2rem;
  }
  .mkt-mockup--wide {
    aspect-ratio: 16 / 8;
    margin-top: 3rem;
  }
  .mkt-feature-tabs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    margin-top: 3rem;
  }
  .mkt-feature-tablist {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .mkt-feature-tab {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: background-color var(--duration-fast,100ms) var(--ease-default,ease), color var(--duration-fast,100ms) var(--ease-default,ease);
  }
  .mkt-feature-tab:hover {
    color: var(--text-secondary);
  }
  .mkt-feature-tab:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .mkt-feature-tab.is-active {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    box-shadow: none;
  }
  .mkt-integrations {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 3rem;
  }
  @media (min-width: 768px) {
    .mkt-integrations {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .mkt-integration {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast,100ms) var(--ease-default,ease);
  }
  .mkt-integration:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-sm);
  }
  .mkt-integration__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1.25rem;
  }
  .mkt-integration__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .mkt-integration__meta {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  @media (max-width: 639px) {
    .mkt-head__title {
      font-size: 1.875rem;
    }
    .mkt-section {
      padding-block: 3rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mkt-feature-tab, .mkt-integration {
      transition: none;
    }
  }
}
@layer utilities {
  .mkt-integrations {
    background-color: var(--bg-primary);
  }
  .mkt-integrations__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .mkt-integrations--split .mkt-integrations__inner {
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
    }
  }
  .mkt-integrations__header {
    display: flex;
    flex-direction: column;
    max-width: 48rem;
  }
  .mkt-integrations--center .mkt-integrations__header {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .mkt-integrations__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--text-link));
  }
  .mkt-integrations__title {
    margin-top: 0.75rem;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .mkt-integrations__title {
      font-size: 2.25rem;
    }
  }
  .mkt-integrations__intro {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .mkt-integrations__actions {
    margin-top: 2rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .mkt-integrations--center .mkt-integrations__actions {
    justify-content: center;
  }
  .mkt-integrations__logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .mkt-integrations__logos {
      gap: 2rem;
    }
  }
  @media (min-width: 1024px) {
    .mkt-integrations__logos--wide {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .mkt-integrations__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-divider)), var(--shadow-xs);
    font-size: 26px;
  }
  @media (min-width: 768px) {
    .mkt-integrations__logo {
      font-size: 32px;
    }
  }
  .mkt-integrations__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
  }
  @media (min-width: 640px) {
    .mkt-integrations__cards {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 1024px) {
    .mkt-integrations__cards {
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem 2rem;
    }
  }
  .mkt-integrations__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem;
  }
  .mkt-integrations__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
    color: var(--text-brand-secondary, var(--text-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary, var(--border-divider));
    font-size: 24px;
  }
  .mkt-integrations__card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .mkt-integrations__card-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .mkt-stats {
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 3rem;
  }
  @media (min-width: 768px) {
    .mkt-stats--3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .mkt-stats--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .mkt-stat {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
    text-align: center;
  }
  .mkt-stat--left {
    align-items: flex-start;
    text-align: left;
  }
  .mkt-stat__value {
    font-size: 3rem;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-icon-brand, var(--text-brand-secondary));
  }
  .mkt-stat__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .mkt-stat__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-tertiary);
  }
  .mkt-stat--card {
    padding: 1.5rem;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .mkt-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-brand-section-subtle, var(--bg-secondary));
    color: var(--text-icon-brand, var(--text-brand-secondary));
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  .mkt-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.8125rem;
  }
  .mkt-stat__delta--up {
    color: var(--text-success);
  }
  .mkt-stat__delta--down {
    color: var(--text-danger);
  }
  .mkt-stats--divided .mkt-stat {
    position: relative;
  }
  @media (min-width: 768px) {
    .mkt-stats--divided .mkt-stat + .mkt-stat::before {
      content: "";
      position: absolute;
      left: -0.75rem;
      top: 0.5rem;
      bottom: 0.5rem;
      width: 1px;
      background-color: var(--border-secondary);
    }
  }
  .mkt-section--brand .mkt-stat__value {
    color: var(--text-on-brand);
  }
  .mkt-section--brand .mkt-stat__label {
    color: var(--text-on-brand);
  }
  .mkt-section--brand .mkt-stat__text {
    color: var(--text-on-brand-secondary, var(--text-on-brand));
  }
  .mkt-section--brand .mkt-stat__icon {
    background-color: var(--bg-on-brand-subtle, var(--bg-brand-solid-hover));
    color: var(--text-on-brand);
  }
  .mkt-stats-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 3rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .mkt-stats-split {
      grid-template-columns: 1fr 1.2fr;
      gap: 4rem;
    }
  }
  .mkt-stat__desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
  }
  .mkt-stat__cta {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
    color: var(--text-brand-secondary);
    margin-top: 0.75rem;
  }
  .mkt-stat__cta:hover {
    color: var(--text-brand-secondary-hover, var(--text-brand-secondary));
  }
  .mkt-section--brand .mkt-stat__desc {
    color: var(--text-on-brand-secondary, var(--text-on-brand));
  }
  .mkt-section--brand .mkt-stat__cta {
    color: var(--text-on-brand);
  }
  .mkt-stats--accent {
    align-items: start;
  }
  .mkt-stats--accent .mkt-stat {
    align-items: flex-start;
    text-align: left;
    border-top: 2px solid var(--border-brand);
    padding-top: 1.25rem;
    gap: 0.25rem;
    border-start-start-radius: var(--radius-colored-edge);
    border-start-end-radius: var(--radius-colored-edge);
  }
  .mkt-section--brand .mkt-stats--accent .mkt-stat {
    border-top-color: var(--text-on-brand);
  }
  .mkt-stats-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
  }
  @media (min-width: 768px) {
    .mkt-stats-header {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: calc(var(--spacing) * 8);
    }
  }
  .mkt-stats-header__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-stats-image {
    position: relative;
    margin-top: 3rem;
    padding: 2rem;
    border-radius: var(--radius-2xl, 1rem);
    overflow: hidden;
    background: radial-gradient(120% 120% at 50% 0%, var(--bg-brand-solid), transparent 70%), var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklch, var(--bg-brand-solid) 20%, transparent), transparent 70%), var(--bg-secondary);
    }
  }
  @media (min-width: 768px) {
    .mkt-stats-image {
      padding: 4rem;
    }
  }
  .mkt-stats-image .mkt-stats {
    margin-top: 0;
  }
  .mkt-stat--glass {
    padding: 1.5rem;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-primary) 80%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    backdrop-filter: blur(8px);
  }
  .mkt-stats--minimal {
    margin-top: 2.5rem;
  }
  .mkt-stats--minimal .mkt-stat__value {
    font-size: 3.75rem;
  }
  .mkt-split-image {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 3rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .mkt-split-image {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
  }
  .mkt-split-image__media {
    min-height: 18rem;
    border-radius: var(--radius-2xl, 1rem);
    background: radial-gradient(120% 120% at 30% 20%, var(--bg-brand-solid), transparent 70%), var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(120% 120% at 30% 20%, color-mix(in oklch, var(--bg-brand-solid) 26%, transparent), transparent 70%), var(--bg-secondary);
    }
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .mkt-section--brand .mkt-split-image__media {
    background: radial-gradient(120% 120% at 30% 20%, var(--text-on-brand), transparent 70%), var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(120% 120% at 30% 20%, color-mix(in oklch, var(--text-on-brand) 18%, transparent), transparent 70%), color-mix(in oklch, var(--text-on-brand) 8%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-on-brand) 20%, transparent);
    }
  }
}
@layer utilities {
  .mkt-content {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
    max-width: 44rem;
    margin-top: 2.5rem;
  }
  .mkt-content p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-secondary);
  }
  .mkt-content h4 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.5rem;
  }
  .mkt-content ul {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .mkt-content li {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-secondary);
  }
  .mkt-content li > i {
    color: var(--text-icon-brand, var(--text-brand-secondary));
    margin-top: 0.4rem;
    font-size: 0.8125rem;
  }
  .mkt-prose-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
  }
  @media (min-width: 768px) {
    .mkt-prose-cols {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
  }
  .mkt-prose-cols p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-tertiary);
  }
  .mkt-content-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-top: 2.5rem;
  }
  @media (min-width: 1024px) {
    .mkt-content-media {
      grid-template-columns: 1.1fr 1fr;
      gap: 4rem;
    }
    .mkt-content-media--reverse .mkt-content-media__figure {
      order: 2;
    }
  }
  .mkt-quote {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 5);
    text-align: center;
    max-width: 52rem;
    margin-top: 2.5rem;
    padding: 2.5rem 1.5rem;
  }
  .mkt-quote__text {
    font-size: 1.75rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .mkt-quote__text::before {
    content: "\201C";
    color: var(--text-icon-brand, var(--text-brand-secondary));
  }
  .mkt-quote__text::after {
    content: "\201D";
    color: var(--text-icon-brand, var(--text-brand-secondary));
  }
  .mkt-quote__cite {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
  }
  .mkt-quote__cite-name {
    font-weight: 600;
    color: var(--text-primary);
  }
  .mkt-quote__cite-role {
    color: var(--text-tertiary);
    font-size: 0.9375rem;
  }
  .mkt-section--brand .mkt-quote__text {
    color: var(--text-on-brand);
  }
  .mkt-section--brand .mkt-quote__text::before, .mkt-section--brand .mkt-quote__text::after {
    color: var(--text-on-brand);
  }
  .mkt-section--brand .mkt-content p, .mkt-section--brand .mkt-content li {
    color: var(--text-on-brand-secondary, var(--text-on-brand));
  }
  .mkt-content-callout {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
    margin-block: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary);
    border-inline-start: 3px solid var(--border-brand, var(--bg-brand-solid));
  }
  .mkt-content-callout__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-icon-brand, var(--text-brand-secondary));
  }
  .mkt-content-callout__text {
    font-size: 0.9375rem;
    color: var(--text-tertiary);
  }
  @media (max-width: 639px) {
    .mkt-quote__text {
      font-size: 1.375rem;
    }
  }
}
@layer utilities {
  .careers-section-brand {
    --careers-brand-bg: var(--color-brand-800);
    --careers-on-brand-primary: var(--text-on-brand-section);
    --careers-on-brand-tertiary: var(--color-brand-200);
    --careers-on-brand-icon: var(--color-brand-300);
    --careers-on-brand-border: color-mix(in srgb, #fff 24%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --careers-on-brand-border: color-mix(in oklab, var(--color-white) 24%, transparent);
    }
    --careers-on-brand-focus: var(--color-white);
  }
  .careers-section {
    width: 100%;
    padding-block: calc(var(--spacing) * 16);
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 24);
    }
    background-color: var(--bg-primary);
  }
  .careers-section-brand {
    background-color: var(--careers-brand-bg);
  }
  .careers-container {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-7xl);
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .careers-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
  }
  .careers-header-center {
    margin-inline: auto;
    max-width: var(--container-3xl);
    align-items: center;
    text-align: center;
  }
  .careers-header-lead {
    margin-inline: auto;
    max-width: var(--container-3xl);
    @media (width >= 64rem) {
      margin-inline: 0;
    }
  }
  .careers-eyebrow {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
    color: var(--text-link);
  }
  .careers-title {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.625rem);
      letter-spacing: var(--tw-tracking, -0.02em);
    }
    color: var(--text-primary);
  }
  .careers-eyebrow + .careers-title {
    margin-top: calc(var(--spacing) * 3);
  }
  .careers-subtitle {
    margin-top: calc(var(--spacing) * 4);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 5);
    }
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
    color: var(--text-tertiary);
    text-wrap: pretty;
  }
  .careers-pill-brand {
    display: inline-flex;
    width: max-content;
    align-items: center;
    column-gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-link);
    background-color: var(--color-brand-50);
    box-shadow: inset 0 0 0 1px var(--color-brand-200);
  }
  .careers-pill-brand + .careers-title {
    margin-top: calc(var(--spacing) * 4);
  }
  :is([data-theme="theme-dark"], [data-theme="theme-mica-dark"]) .careers-pill-brand {
    color: var(--color-brand-200);
    background-color: color-mix(in srgb, oklch(78.0% 0.157 84) 18%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand-600) 18%, transparent);
    }
    box-shadow: inset 0 0 0 1px color-mix(in srgb, oklch(84.5% 0.165 91) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-brand-400) 40%, transparent);
    }
  }
  .careers-split {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .careers-split-narrow {
    margin-inline: auto;
    max-width: var(--container-3xl);
    @media (width >= 64rem) {
      margin-inline: 0;
    }
    @media (width >= 64rem) {
      max-width: none;
    }
  }
  .careers-media-split {
    margin-top: calc(var(--spacing) * 12);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .careers-grid {
    margin-inline: auto;
    display: grid;
    max-width: var(--container-3xl);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 16);
    row-gap: calc(var(--spacing) * 8);
    @media (width >= 64rem) {
      max-width: none;
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .careers-lead-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--spacing) * 12);
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      align-items: flex-start;
    }
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .careers-body {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 8);
    max-width: var(--container-3xl);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .careers-body-wide {
    margin-top: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .careers-jobs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .careers-jobs-spaced {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 8);
  }
  .careers-groups {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .careers-group__title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
    color: var(--text-primary);
  }
  .careers-group__desc {
    margin-top: var(--spacing);
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 2);
    }
    color: var(--text-tertiary);
  }
  .careers-group__jobs {
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .careers-group-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
    @media (width >= 64rem) {
      flex-direction: row;
    }
    @media (width >= 64rem) {
      align-items: flex-start;
    }
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 8);
    }
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 12);
    }
  }
  @media (min-width: 1024px) {
    .careers-group-row {
      border-top: 1px solid var(--border-secondary);
    }
  }
  .careers-group-row__jobs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
    @media (width >= 64rem) {
      max-width: var(--container-3xl);
    }
  }
  .careers-filter-wrap {
    margin-top: calc(var(--spacing) * 12);
    width: 100%;
    @media (width >= 48rem) {
      margin-inline: auto;
    }
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
    @media (width >= 48rem) {
      width: max-content;
    }
  }
  .careers-select {
    position: relative;
    display: inline-flex;
    width: 100%;
    align-items: center;
  }
  .careers-select > .form-control {
    width: 100%;
    padding-left: 2.625rem;
  }
  .careers-select__icon {
    pointer-events: none;
    position: absolute;
    left: calc(var(--spacing) * 3.5);
    display: inline-flex;
    color: var(--text-quaternary);
  }
  .careers-filter {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: var(--spacing);
    padding: calc(var(--spacing) * 1.5);
    border-radius: 0.75rem;
    background-color: var(--bg-tab-track);
    box-shadow: inset 0 0 0 1px var(--border-tab-track);
  }
  .careers-filter__tab {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--text-tab-rest);
    background-color: transparent;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .careers-filter__tab:hover {
    color: var(--text-tab-neutral-active);
    background-color: var(--bg-tab-raised-active);
  }
  .careers-filter__tab[aria-checked="true"] {
    color: var(--text-tab-neutral-active);
    background-color: var(--bg-tab-raised-active);
    box-shadow: var(--shadow-sm);
  }
  .job-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 6);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .job-card__top {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
  }
  .job-card__dept {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
  }
  .job-card__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .job-card__head-meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      flex-direction: row-reverse;
    }
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .job-card__title-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 0.5);
    }
  }
  .job-card__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .job-card__desc {
    margin-top: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--text-tertiary);
    text-wrap: pretty;
  }
  .careers-view-job {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-link);
    transition: color var(--duration-fast) var(--ease-out);
  }
  .careers-view-job:hover {
    color: var(--text-link-hover);
  }
  .careers-view-job > i {
    font-size: 1.05em;
  }
  .job-simple {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-top: calc(var(--spacing) * 6);
    border-top: 1px solid var(--border-secondary);
  }
  .job-simple__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .job-simple__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .job-simple__desc {
    margin-top: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--text-tertiary);
    text-wrap: pretty;
  }
  .job-naked {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-top: calc(var(--spacing) * 6);
    border-top: 1px solid var(--careers-on-brand-border);
  }
  .job-naked__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--careers-on-brand-primary);
  }
  .job-naked__desc {
    margin-top: calc(var(--spacing) * 2);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--careers-on-brand-tertiary);
    text-wrap: pretty;
  }
  .careers-section-brand .careers-title {
    color: var(--careers-on-brand-primary);
  }
  .careers-section-brand .careers-eyebrow, .careers-section-brand .careers-subtitle {
    color: var(--careers-on-brand-tertiary);
  }
  .job-meta {
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 4);
  }
  .job-meta__item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .job-meta__icon {
    display: inline-flex;
    color: var(--text-quaternary);
  }
  .job-meta__text {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .job-naked .job-meta__icon {
    color: var(--careers-on-brand-icon);
  }
  .job-naked .job-meta__text {
    color: var(--careers-on-brand-tertiary);
  }
  .careers-flag {
    display: inline-block;
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-xs);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .careers-flag svg {
    display: block;
    height: 100%;
    width: 100%;
  }
  .careers-flag-name {
    display: none;
    @media (width >= 48rem) {
      display: inline;
    }
  }
  .careers-flag-code {
    display: inline;
    @media (width >= 48rem) {
      display: none;
    }
  }
  .careers-media {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 15rem;
    background: radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, oklch(81.0% 0.163 87) 22%, transparent), transparent 60%), radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, oklch(53.0% 0.118 74) 26%, transparent), transparent 55%), var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(120% 140% at 15% 0%, color-mix(in oklab, var(--color-brand-500) 22%, transparent), transparent 60%), radial-gradient(120% 140% at 100% 100%, color-mix(in oklab, var(--color-brand-700) 26%, transparent), transparent 55%), var(--bg-secondary);
    }
    color: var(--text-quaternary);
  }
  .careers-media > i {
    font-size: 2.5rem;
    opacity: 0.6;
  }
  .careers-media-tall {
    @media (width >= 48rem) {
      height: 35rem;
    }
  }
  .careers-media-fill {
    @media (width >= 48rem) {
      height: 30rem;
    }
    @media (width >= 64rem) {
      height: 45rem;
    }
  }
  .careers-media-panel {
    height: calc(var(--spacing) * 60);
    @media (width >= 48rem) {
      height: 27.5rem;
    }
    @media (width >= 64rem) {
      height: 100%;
    }
  }
  .careers-media-mt {
    margin-top: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .job-card, .job-simple, .job-naked, .careers-view-job, .careers-filter__tab {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .job-card:focus-visible, .careers-view-job:focus-visible, .careers-filter__tab:focus-visible {
    outline-color: var(--border-focus);
  }
  .job-simple:focus-visible {
    outline-color: var(--border-focus);
    outline-offset: 4px;
  }
  .job-naked:focus-visible {
    outline-color: var(--careers-on-brand-focus);
    outline-offset: 4px;
  }
  .job-card, .job-simple, .job-naked {
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
  .job-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-secondary-hover), var(--shadow-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .job-card, .job-simple, .job-naked, .careers-view-job, .careers-filter__tab {
      transition: none;
    }
  }
  .careers-show-md {
    display: none;
    @media (width >= 48rem) {
      display: flex;
    }
    @media (width >= 48rem) {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .careers-show-mobile {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    @media (width >= 48rem) {
      display: none;
    }
  }
  .careers-hide-mobile {
    display: none;
    @media (width >= 48rem) {
      display: block;
    }
  }
  .careers-filter-wrap .careers-select {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .careers-filter-wrap .careers-filter {
    display: none;
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
}
@layer utilities {
  .blogindex {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  .blogindex__container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .blogindex__container {
      padding-inline: 2rem;
    }
  }
  .blogindex__section {
    padding-block: 4rem;
  }
  @media (min-width: 768px) {
    .blogindex__section {
      padding-block: 6rem;
    }
  }
  .blogindex__head {
    max-width: 48rem;
  }
  .blogindex__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }
  .blogindex__title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .blogindex__title {
      font-size: 3rem;
    }
  }
  .blogindex__lead {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .blogindex__lead {
      margin-top: 1.25rem;
      font-size: 1.25rem;
    }
  }
  .blogindex-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (min-width: 768px) {
    .blogindex-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem 2rem;
    }
  }
  @media (min-width: 1024px) {
    .blogindex-grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .blogindex-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
  }
  .blogindex-card__cover {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background-color: var(--bg-secondary);
    display: grid;
    place-items: center;
    color: var(--text-quaternary);
    font-size: 2rem;
  }
  .blogindex-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .blogindex-card__cat {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }
  .blogindex-card__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
  }
  .blogindex-card__title a {
    color: inherit;
    text-decoration: none;
    outline: none;
  }
  .blogindex-card__title a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .blogindex-card__title .fa-arrow-up-right {
    font-size: 1rem;
    color: var(--text-quaternary);
    flex-shrink: 0;
    margin-top: 0.25rem;
  }
  .blogindex-card__excerpt {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .blogindex-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }
  .blogindex-card__author {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .blogindex-card__date {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .blogindex-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
  }
  @media (min-width: 1024px) {
    .blogindex-featured {
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
      align-items: center;
      margin-bottom: 4rem;
    }
  }
  .blogindex-featured .blogindex-card__cover {
    aspect-ratio: 3 / 2;
  }
  .blogindex-featured .blogindex-card__title {
    font-size: 1.5rem;
  }
  @media (min-width: 768px) {
    .blogindex-featured .blogindex-card__title {
      font-size: 1.875rem;
    }
  }
  .blogindex__pager {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-secondary);
    display: flex;
    justify-content: center;
  }
  @media (min-width: 768px) {
    .blogindex__pager {
      margin-top: 4rem;
    }
  }
  .blogindex__search {
    position: relative;
    max-width: 22rem;
    margin-top: 1.5rem;
  }
  .blogindex__search .form-control {
    padding-left: 2.75rem;
  }
  .blogindex__search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-quaternary);
    pointer-events: none;
  }
  .blogindex-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .blogindex-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-block: 2rem;
  }
  .blogindex-row + .blogindex-row {
    border-top: 1px solid var(--border-secondary);
  }
  @media (min-width: 768px) {
    .blogindex-row {
      grid-template-columns: 18rem minmax(0, 1fr);
      gap: 2rem;
      align-items: center;
    }
  }
  .blogindex-row .blogindex-card__cover {
    aspect-ratio: 16 / 10;
    margin: 0;
  }
  .blogindex-row__body {
    min-width: 0;
  }
  .blogindex__cats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
  }
  .blogindex__cat {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    text-decoration: none;
  }
  .blogindex__cat:hover {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
  }
  .blogindex__cat[aria-current="true"], .blogindex__cat.is-active {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .blogindex__cat:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
}
@layer utilities {
  .contactpage {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  .contactpage__container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .contactpage__container {
      padding-inline: 2rem;
    }
  }
  .contactpage__section {
    padding-block: 4rem;
  }
  @media (min-width: 768px) {
    .contactpage__section {
      padding-block: 6rem;
    }
  }
  .contactpage__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
  }
  @media (min-width: 1024px) {
    .contactpage__split {
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
    }
  }
  .contactpage__content {
    max-width: 30rem;
  }
  .contactpage__title {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .contactpage__title {
      font-size: 3rem;
    }
  }
  .contactpage__lead {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .contactpage__lead {
      margin-top: 1.25rem;
      font-size: 1.25rem;
    }
  }
  .contactpage__form {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .contactpage__form-row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  @media (min-width: 640px) {
    .contactpage__form-row {
      flex-direction: row;
    }
    .contactpage__form-row .form-group {
      flex: 1;
    }
  }
  .contactpage__form .btn-primary {
    margin-top: 0.5rem;
  }
  .contactpage__media {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background-color: var(--bg-secondary);
    min-height: 22rem;
    display: grid;
    place-items: center;
    color: var(--text-quaternary);
    font-size: 2.5rem;
  }
  .contactpage__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .contactpage-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 640px) {
    .contactpage-methods {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .contactpage-methods--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .contactpage-methods--center {
    text-align: center;
  }
  .contactpage-method {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 24rem;
  }
  .contactpage-methods--center .contactpage-method {
    align-items: center;
    margin-inline: auto;
  }
  .contactpage-method__icon {
    margin-bottom: 1rem;
  }
  .contactpage-method__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .contactpage-method__text {
    font-size: 1rem;
    color: var(--text-tertiary);
  }
  .contactpage-method__link {
    margin-top: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-brand, var(--color-brand-700));
    text-decoration: none;
  }
  .contactpage-method__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .contactpage-method__link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  .contactpage__centered {
    max-width: 40rem;
    margin-inline: auto;
  }
  .contactpage__centered .contactpage__content {
    max-width: none;
    text-align: center;
  }
  .contactpage__centered .contactpage__form {
    text-align: left;
  }
  .contactpage-offices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (min-width: 640px) {
    .contactpage-offices {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .contactpage-offices--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .contactpage-office {
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    padding: 1.5rem;
  }
  .contactpage-office__city {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
  }
  .contactpage-office__addr {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .contactpage-office__hours {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-quaternary);
  }
  .contactpage__head {
    max-width: 48rem;
    margin-bottom: 3rem;
  }
  .contactpage__head--center {
    margin-inline: auto;
    text-align: center;
  }
  .contactpage__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }
  .contactpage__section-title {
    margin-top: 0.75rem;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .contactpage__section-title {
      font-size: 2.25rem;
    }
  }
  .contactpage__section-lead {
    margin-top: 1rem;
    font-size: 1.125rem;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .teampage {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  .teampage__section {
    padding-block: 4rem;
  }
  @media (min-width: 768px) {
    .teampage__section {
      padding-block: 6rem;
    }
  }
  .teampage__section--alt {
    background-color: var(--bg-secondary);
  }
  .teampage__container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .teampage__container {
      padding-inline: 2rem;
    }
  }
  .teampage__hero-inner {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .teampage__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-700);
  }
  @media (min-width: 768px) {
    .teampage__eyebrow {
      font-size: 1rem;
    }
  }
  .teampage__title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .teampage__title {
      font-size: 3rem;
    }
  }
  .teampage__lead {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .teampage__lead {
      margin-top: 1.5rem;
      font-size: 1.25rem;
    }
  }
  .teampage__section-title {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .teampage__section-title {
      font-size: 2.25rem;
    }
  }
  .teampage__section-head {
    max-width: 48rem;
    margin-bottom: 3rem;
  }
  .teampage__section-head--center {
    margin-inline: auto;
    text-align: center;
  }
  .teampage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (min-width: 640px) {
    .teampage-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .teampage-grid--3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .teampage-grid--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .teampage-grid--center {
    text-align: center;
  }
  .teampage-member {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
  }
  .teampage-member--center {
    align-items: center;
    text-align: center;
  }
  .teampage-member__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-2xl);
    background-color: var(--bg-secondary);
    display: grid;
    place-items: center;
    color: var(--text-quaternary);
    font-size: 2.5rem;
    overflow: hidden;
  }
  .teampage-member--center .teampage-member__photo {
    width: 6rem;
    height: 6rem;
    aspect-ratio: auto;
    border-radius: var(--radius-full);
  }
  .teampage-member__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .teampage-member__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .teampage-member__name {
      font-size: 1.25rem;
    }
  }
  .teampage-member__role {
    font-size: 1rem;
    color: var(--color-brand-700);
    margin-top: 0.125rem;
  }
  @media (min-width: 768px) {
    .teampage-member__role {
      font-size: 1.125rem;
    }
  }
  .teampage-member__bio {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .teampage-member--center .teampage-member__bio {
    margin-top: 0.5rem;
  }
  .teampage-member__socials {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    color: var(--text-quaternary);
  }
  .teampage-member__socials a {
    color: inherit;
  }
  .teampage-member__socials a:hover {
    color: var(--text-tertiary);
  }
  .teampage-member--center .teampage-member__socials {
    justify-content: center;
  }
  .teampage-roles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .teampage-role {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
  @media (min-width: 768px) {
    .teampage-role {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  .teampage-role:hover {
    box-shadow: inset 0 0 0 1px var(--border-secondary-hover);
  }
  .teampage-role:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .teampage-role__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .teampage-role__meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .teampage-values {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  @media (min-width: 640px) {
    .teampage-values {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .teampage-values--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .teampage-value {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .teampage-value__icon {
    margin-bottom: 0.75rem;
  }
  .teampage-value__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .teampage-value__text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .teampage-grid--simple .teampage-member {
    gap: 0.75rem;
  }
  .teampage-grid--simple .teampage-member__photo {
    aspect-ratio: 1 / 1;
  }
  .teampage-grid--simple .teampage-member__bio {
    display: none;
  }
  .teampage-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    max-width: 48rem;
    margin-inline: auto;
  }
  .teampage-cta__title {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .teampage-cta__title {
      font-size: 2.25rem;
    }
  }
  .teampage-cta__text {
    font-size: 1.125rem;
    color: var(--text-tertiary);
  }
  .teampage-cta__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 30rem;
  }
  @media (min-width: 640px) {
    .teampage-cta__form {
      flex-direction: row;
    }
    .teampage-cta__form .form-control {
      flex: 1;
    }
  }
}
@layer utilities {
  .metrics-section {
    --metrics-max: 80rem;
    --metrics-gutter: 1rem;
    --metrics-gutter-md: 2rem;
    --metrics-surface: var(--bg-primary);
    --metrics-title: var(--text-primary);
    --metrics-sub: var(--text-tertiary);
    --metrics-value: var(--color-brand-600);
    --metrics-label: var(--text-primary);
    --metrics-desc: var(--text-tertiary);
    --metrics-divide: var(--border-secondary);
    --metrics-accent: var(--bg-brand-solid);
    --metrics-card: var(--bg-secondary);
    display: block;
    width: 100%;
    padding-block: 4rem;
    background-color: var(--metrics-surface);
    color: var(--metrics-title);
  }
  @media (min-width: 768px) {
    .metrics-section {
      padding-block: 6rem;
    }
  }
  .metrics-section__container {
    width: 100%;
    max-width: var(--metrics-max);
    margin-inline: auto;
    padding-inline: var(--metrics-gutter);
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  @media (min-width: 768px) {
    .metrics-section__container {
      padding-inline: var(--metrics-gutter-md);
      gap: 4rem;
    }
  }
  .metrics-section__head {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 48rem;
  }
  .metrics-section__head--center {
    align-items: center;
    align-self: center;
    text-align: center;
  }
  .metrics-section__icon {
    margin-bottom: 1rem;
  }
  @media (min-width: 768px) {
    .metrics-section__icon {
      margin-bottom: 1.5rem;
    }
  }
  .metrics-section__title {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--metrics-title);
  }
  .metrics-section__subtitle {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--metrics-sub);
  }
  @media (min-width: 768px) {
    .metrics-section__title {
      font-size: 2.25rem;
    }
    .metrics-section__subtitle {
      margin-top: 1.25rem;
      font-size: 1.25rem;
    }
  }
  .metrics-section__head-row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
  }
  @media (min-width: 768px) {
    .metrics-section__head-row {
      flex-direction: row;
      align-items: flex-start;
      gap: 2rem;
    }
  }
  .metrics-section__head-row .metrics-section__head {
    flex: 1;
    max-width: 48rem;
  }
  .metrics-section__actions {
    display: flex;
    gap: 0.875rem;
    flex-shrink: 0;
  }
  .metrics-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }
  @media (min-width: 768px) {
    .metrics-stats {
      flex-direction: row;
      gap: 1rem;
    }
  }
  .metrics-stat {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    text-align: center;
    min-width: 0;
  }
  .metrics-stat__value {
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--metrics-value);
    font-variant-numeric: tabular-nums;
  }
  @media (min-width: 768px) {
    .metrics-stat__value {
      font-size: 3.75rem;
    }
  }
  .metrics-stat__label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--metrics-label);
  }
  .metrics-stat__desc {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--metrics-desc);
  }
  .metrics-stats--divided {
    gap: 2rem;
  }
  @media (min-width: 768px) {
    .metrics-stats--divided {
      gap: 0;
    }
    .metrics-stats--divided .metrics-stat + .metrics-stat {
      border-left: 1px solid var(--metrics-divide);
    }
  }
  .metrics-stats--accent {
    gap: 2.5rem;
  }
  @media (min-width: 768px) {
    .metrics-stats--accent {
      gap: 2rem;
    }
  }
  .metrics-stats--accent .metrics-stat {
    text-align: left;
    position: relative;
    padding-top: 1rem;
  }
  .metrics-stats--accent .metrics-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--metrics-accent);
  }
  @media (min-width: 768px) {
    .metrics-stats--accent .metrics-stat {
      padding-top: 0;
      padding-left: 1.5rem;
    }
    .metrics-stats--accent .metrics-stat::before {
      width: 2px;
      height: 100%;
    }
  }
  .metrics-stats--accent .metrics-stat__foot {
    margin-top: 1rem;
  }
  .metrics-stats--left .metrics-stat {
    text-align: left;
  }
  .metrics-section__card {
    border-radius: var(--radius-2xl);
    background-color: var(--metrics-card);
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  @media (min-width: 768px) {
    .metrics-section__card {
      padding: 4rem;
      gap: 4rem;
    }
  }
  .metrics-section__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .metrics-section__split {
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
    }
  }
  .metrics-section__media {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background-color: var(--bg-secondary);
    min-height: 18rem;
  }
  .metrics-section__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .metrics-section__split .metrics-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .metrics-stats--minimal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }
  @media (min-width: 1024px) {
    .metrics-stats--minimal {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 768px) {
    .metrics-stats--minimal {
      border-block: 1px solid var(--metrics-divide);
      padding-block: 4rem;
    }
  }
  .metrics-section__cards-image {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    padding: 2rem 1.5rem;
  }
  @media (min-width: 768px) {
    .metrics-section__cards-image {
      padding: 4rem;
    }
  }
  .metrics-section__cards-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .metrics-section__cards-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: color-mix(in srgb, oklch(45.0% 0.100 66) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-brand-800) 55%, transparent);
    }
  }
  .metrics-cards {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
  }
  @media (min-width: 768px) {
    .metrics-cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .metrics-cards {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .metrics-card {
    border-radius: var(--radius-2xl);
    background-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-white) 25%, transparent);
    }
    border: 1px solid color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent);
    }
    backdrop-filter: blur(12px);
    padding: 1.5rem;
  }
  .metrics-card .metrics-stat__value, .metrics-card .metrics-stat__label {
    color: var(--color-white);
  }
  .metrics-section--brand {
    --metrics-surface: var(--color-brand-800);
    --metrics-title: var(--color-white);
    --metrics-sub: var(--color-brand-200);
    --metrics-value: var(--color-white);
    --metrics-label: var(--color-white);
    --metrics-desc: var(--color-brand-200);
    --metrics-divide: var(--color-brand-700);
    --metrics-accent: var(--color-brand-300);
    --metrics-card: var(--color-brand-700);
  }
}
@layer utilities {
  .faq-section {
    background-color: var(--bg-primary);
  }
  .faq-section__head {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 48rem;
  }
  .faq-section__head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .faq-section__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-link);
  }
  @media (min-width: 768px) {
    .faq-section__eyebrow {
      font-size: 1rem;
    }
  }
  .faq-section__title {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-size: 1.875rem;
    margin-top: 0.75rem;
  }
  @media (min-width: 768px) {
    .faq-section__title {
      font-size: 2.25rem;
    }
  }
  .faq-section__lead {
    margin-top: 1rem;
    font-size: 1.125rem;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .faq-section__lead {
      margin-top: 1.25rem;
      font-size: 1.25rem;
    }
  }
  .faq-section__lead a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .faq-section__lead a:hover {
    color: var(--text-primary);
  }
  .faq-featured-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    font-size: 1.125rem;
  }
  @media (min-width: 768px) {
    .faq-featured-icon {
      width: 3rem;
      height: 3rem;
      border-radius: var(--radius-xl);
      font-size: 1.25rem;
    }
  }
  .faq-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    column-gap: 2rem;
    row-gap: 2.5rem;
    margin-top: 3rem;
  }
  @media (min-width: 640px) {
    .faq-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 768px) {
    .faq-grid {
      row-gap: 4rem;
      margin-top: 4rem;
    }
  }
  @media (min-width: 1024px) {
    .faq-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .faq-item {
    display: flex;
    flex-direction: column;
    max-width: 24rem;
  }
  .faq-item--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .faq-item--row {
    flex-direction: row;
    gap: 1rem;
    max-width: none;
  }
  .faq-item--row .faq-item__body {
    display: flex;
    flex-direction: column;
    padding-top: 0.375rem;
  }
  .faq-item__q {
    margin-top: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .faq-item--row .faq-item__q {
    margin-top: 0;
  }
  .faq-item__a {
    margin-top: 0.25rem;
    font-size: 1rem;
    color: var(--text-tertiary);
  }
  .faq-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .faq-accordion__item {
    display: block;
  }
  .faq-accordion--divider .faq-accordion__item + .faq-accordion__item {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-secondary);
  }
  .faq-accordion--card {
    gap: 1rem;
  }
  .faq-accordion--card .faq-accordion__item {
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    transition: background-color var(--duration-normal, 240ms) var(--ease-in-out, ease);
  }
  @media (min-width: 768px) {
    .faq-accordion--card .faq-accordion__item {
      padding: 1.5rem;
    }
  }
  .faq-accordion--card .faq-accordion__item[open] {
    background-color: var(--bg-secondary);
  }
  .faq-accordion__trigger {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
    list-style: none;
    border-radius: var(--radius-md);
  }
  .faq-accordion__trigger::-webkit-details-marker {
    display: none;
  }
  .faq-accordion__trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  @media (min-width: 768px) {
    .faq-accordion__trigger {
      gap: 1.5rem;
    }
  }
  .faq-accordion__q {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .faq-accordion__icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-quaternary);
  }
  .faq-accordion__icon .faq-accordion__bar {
    transform-origin: center;
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .faq-accordion__item[open] .faq-accordion__icon .faq-accordion__bar {
    transform: rotate(-90deg);
  }
  .faq-accordion__panel {
    overflow: hidden;
    padding-top: 0.5rem;
    padding-right: 2rem;
  }
  .faq-accordion__panel p {
    font-size: 1rem;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .faq-accordion__panel {
      padding-right: 3rem;
    }
  }
  .faq-accordion--card .faq-accordion__trigger {
    flex-direction: row-reverse;
  }
  .faq-accordion--card .faq-accordion__q {
    flex: 1;
  }
  .faq-accordion--card .faq-accordion__panel {
    padding-right: 0;
  }
  @media (min-width: 768px) {
    .faq-accordion--card .faq-accordion__panel {
      padding-left: 2.5rem;
    }
  }
  .faq-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 3rem;
  }
  @media (min-width: 768px) {
    .faq-split {
      margin-top: 4rem;
      gap: 4rem;
    }
  }
  @media (min-width: 1024px) {
    .faq-split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }
  .faq-split__media {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background-color: var(--bg-secondary);
    min-height: 15rem;
  }
  .faq-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .faq-cta {
    margin-top: 3rem;
    border-radius: var(--radius-2xl);
    background-color: var(--bg-secondary);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .faq-cta {
      margin-top: 4rem;
      padding: 2rem;
    }
  }
  .faq-cta--center {
    align-items: center;
    text-align: center;
  }
  @media (min-width: 768px) {
    .faq-cta--between {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 2rem;
    }
  }
  .faq-cta__avatars {
    display: flex;
    align-items: flex-end;
  }
  .faq-cta__avatars > * + * {
    margin-left: -1rem;
  }
  .faq-cta__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .faq-cta__text {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .faq-cta__text {
      font-size: 1.125rem;
    }
  }
  .faq-item--plain .faq-item__q {
    margin-top: 0;
    font-size: 1rem;
  }
  .faq-section--brand {
    --faq-on-brand-primary: var(--text-on-brand);
    --faq-on-brand-tertiary: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --faq-on-brand-tertiary: color-mix(in oklch, var(--text-on-brand) 74%, var(--bg-brand-solid));
    }
    --faq-on-brand-border: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --faq-on-brand-border: color-mix(in oklch, var(--color-white) 20%, transparent);
    }
    --faq-on-brand-surface: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --faq-on-brand-surface: color-mix(in oklch, var(--color-white) 10%, transparent);
    }
    --faq-on-brand-icon-bg: color-mix(in srgb, #fff 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --faq-on-brand-icon-bg: color-mix(in oklch, var(--color-white) 12%, transparent);
    }
    background-color: var(--bg-brand-solid);
  }
  .faq-section--brand .faq-section__eyebrow {
    color: var(--faq-on-brand-tertiary);
  }
  .faq-section--brand .faq-section__title {
    color: var(--faq-on-brand-primary);
  }
  .faq-section--brand .faq-section__lead {
    color: var(--faq-on-brand-tertiary);
  }
  .faq-section--brand .faq-section__lead a:hover {
    color: var(--faq-on-brand-primary);
  }
  .faq-section--brand .faq-featured-icon {
    background-color: var(--faq-on-brand-icon-bg);
    color: var(--faq-on-brand-primary);
    box-shadow: inset 0 0 0 1px var(--faq-on-brand-border), var(--shadow-xs);
  }
  .faq-section--brand .faq-item__q {
    color: var(--faq-on-brand-primary);
  }
  .faq-section--brand .faq-item__a {
    color: var(--faq-on-brand-tertiary);
  }
  .faq-section--brand .faq-accordion__q {
    color: var(--faq-on-brand-primary);
  }
  .faq-section--brand .faq-accordion__icon {
    color: var(--faq-on-brand-primary);
  }
  .faq-section--brand .faq-accordion__panel p {
    color: var(--faq-on-brand-tertiary);
  }
  .faq-section--brand .faq-accordion--divider .faq-accordion__item + .faq-accordion__item {
    border-top-color: var(--faq-on-brand-border);
  }
  .faq-section--brand .faq-accordion--card .faq-accordion__item[open] {
    background-color: var(--faq-on-brand-surface);
  }
  .faq-section--brand .faq-accordion__trigger:focus-visible {
    outline-color: var(--color-white);
  }
  .faq-section--brand .faq-cta {
    background-color: var(--faq-on-brand-surface);
  }
  .faq-section--brand .faq-cta__title {
    color: var(--faq-on-brand-primary);
  }
  .faq-section--brand .faq-cta__text {
    color: var(--faq-on-brand-tertiary);
  }
  .faq-section--brand .faq-split__media {
    background-color: var(--faq-on-brand-surface);
  }
  @media (prefers-reduced-motion: reduce) {
    .faq-accordion__icon .faq-accordion__bar, .faq-accordion--card .faq-accordion__item {
      transition: none;
    }
  }
}
@layer utilities {
  .contact-section {
    background-color: var(--bg-primary);
  }
  .contact-section__head {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 48rem;
  }
  .contact-section__head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .contact-section__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-link);
  }
  @media (min-width: 768px) {
    .contact-section__eyebrow {
      font-size: 1rem;
    }
  }
  .contact-section__title {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-size: 1.875rem;
    margin-top: 0.75rem;
  }
  @media (min-width: 768px) {
    .contact-section__title {
      font-size: 2.25rem;
    }
  }
  .contact-section__lead {
    margin-top: 1rem;
    font-size: 1.125rem;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .contact-section__lead {
      margin-top: 1.25rem;
      font-size: 1.25rem;
    }
  }
  .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-brand-subtle, var(--bg-brand-solid));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-brand-subtle, color-mix(in srgb, var(--bg-brand-solid) 12%, transparent));
    }
    color: var(--text-link);
    font-size: 1.125rem;
  }
  @media (min-width: 768px) {
    .contact-icon {
      width: 3rem;
      height: 3rem;
      border-radius: var(--radius-xl);
      font-size: 1.25rem;
    }
  }
  .contact-icon--solid {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .contact-methods {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    column-gap: 2rem;
    row-gap: 2.5rem;
  }
  @media (min-width: 640px) {
    .contact-methods {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 768px) {
    .contact-methods {
      row-gap: 4rem;
    }
  }
  @media (min-width: 1024px) {
    .contact-methods {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .contact-method {
    display: flex;
    flex-direction: column;
    max-width: 24rem;
  }
  .contact-method--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .contact-method__title {
    margin-top: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .contact-method__text {
    margin-top: 0.25rem;
    font-size: 1rem;
    color: var(--text-tertiary);
  }
  .contact-method__link {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--text-link);
  }
  .contact-method__link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .contact-cards {
    display: grid;
    width: 100%;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    margin-top: 3rem;
  }
  @media (min-width: 640px) {
    .contact-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .contact-cards {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 4rem;
    }
  }
  .contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
    background-color: var(--bg-secondary);
  }
  .contact-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  @media (min-width: 1024px) {
    .contact-split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4rem;
      align-items: start;
    }
  }
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .contact-form--panel {
    border-radius: var(--radius-2xl);
  }
  @media (min-width: 640px) {
    .contact-form--panel {
      background-color: var(--bg-secondary);
      padding: 2.5rem 2rem;
    }
  }
  .contact-form__row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  @media (min-width: 640px) {
    .contact-form__row {
      flex-direction: row;
      gap: 2rem;
    }
    .contact-form__row > * {
      flex: 1;
    }
  }
  .contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .contact-field__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .contact-media {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background-color: var(--bg-secondary);
    min-height: 20rem;
  }
  .contact-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .contact-map {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    min-height: 20rem;
    background-color: var(--bg-secondary);
    background-image: linear-gradient(var(--border-divider) 1px, transparent 1px), linear-gradient(90deg, var(--border-divider) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
  }
  .contact-map--full {
    min-height: 24rem;
  }
  .contact-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    color: var(--text-link);
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px var(--bg-brand-solid));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--bg-brand-solid) 30%, transparent));
    }
  }
  .contact-map__card {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    max-width: 20rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: var(--shadow-md);
  }
  .contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin-top: 2.5rem;
  }
  .contact-link-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .contact-link-item__label {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .contact-link-item__value {
    font-weight: 600;
    color: var(--text-link);
  }
  .contact-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
  }
  .contact-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    cursor: pointer;
  }
  .contact-tab.is-active {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .contact-tab:not(.is-active):hover {
    color: var(--text-primary);
  }
  .contact-map--vector {
    background-image: radial-gradient(var(--border-divider) 1.5px, transparent 1.5px);
    background-size: 1.25rem 1.25rem;
  }
}
@layer utilities {
  .compare {
    background-color: var(--bg-primary);
  }
  .compare__container {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 4rem;
  }
  @media (min-width: 768px) {
    .compare__container {
      padding-inline: 2rem;
      padding-block: 6rem;
    }
  }
  .compare__head {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 3rem;
  }
  @media (min-width: 768px) {
    .compare__head {
      margin-bottom: 4rem;
    }
  }
  .compare__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--text-link));
  }
  .compare__title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .compare__title {
      font-size: 3rem;
    }
  }
  .compare__lede {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .compare__lede {
      font-size: 1.25rem;
    }
  }
  .compare__toggle {
    display: inline-flex;
    margin-top: 2rem;
    padding: 0.25rem;
    gap: 0.25rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
  }
  .compare__toggle-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .compare__toggle-btn.is-active {
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
  }
  .compare__toggle-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .compare__scroll {
    overflow-x: auto;
  }
  .compare-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    table-layout: fixed;
  }
  .compare-table col.compare-col--feature {
    width: 28%;
  }
  .compare-table thead th {
    vertical-align: top;
    padding: 0 1.25rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-secondary);
  }
  .compare-table thead th:first-child {
    border-bottom: 0;
  }
  .compare-tier__name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .compare-tier__price {
    margin-top: 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
  }
  .compare-tier__amount {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
  }
  .compare-tier__per {
    font-size: 0.9375rem;
    color: var(--text-tertiary);
  }
  .compare-tier__cta {
    margin-top: 1.25rem;
  }
  .compare-table .compare-col--featured {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 5%, transparent);
    }
  }
  .compare-table thead th.compare-col--featured {
    border-top: 2px solid var(--bg-brand-solid);
    border-bottom-color: transparent;
    border-start-start-radius: var(--radius-colored-edge);
    border-start-end-radius: var(--radius-colored-edge);
  }
  .compare-section th {
    padding: 2rem 1.25rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--text-link));
  }
  .compare-row th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    position: sticky;
    inset-inline-start: 0;
    background-color: inherit;
  }
  .compare-row td {
    padding: 1rem 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    vertical-align: middle;
  }
  .compare-row:nth-child(even) {
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
  }
  .compare-row:nth-child(even) .compare-col--featured {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 8%, transparent);
    }
  }
  .compare-yes {
    color: var(--text-success);
    font-size: 1.25rem;
  }
  .compare-no {
    color: var(--text-quaternary);
    font-size: 1.125rem;
  }
  .compare-val {
    color: var(--text-primary);
    font-weight: 500;
  }
  .compare-foot td, .compare-foot th {
    padding: 1.5rem 1.25rem;
    border-top: 1px solid var(--border-secondary);
  }
  .compare-foot .compare-col--featured {
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }
  .compare--compact .compare-section {
    display: none;
  }
  .compare--compact .compare-row th, .compare--compact .compare-row td {
    padding-block: 0.75rem;
  }
  .compare-vs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 56rem;
    margin-inline: auto;
  }
  @media (min-width: 768px) {
    .compare-vs {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
  }
  .compare-vs__col {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    background-color: var(--bg-card);
  }
  .compare-vs__col--highlight {
    border-color: var(--bg-brand-solid);
    box-shadow: 0 0 0 1px var(--bg-brand-solid);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 4%, var(--bg-card));
    }
  }
  .compare-vs__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .compare-vs__head .badge {
    margin-inline-start: auto;
  }
  .compare-vs__list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .compare-vs__item {
    display: flex;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .compare-vs__item i {
    flex: none;
    margin-top: 0.15rem;
    font-size: 1.0625rem;
  }
  .compare-vs__item--yes i {
    color: var(--text-success);
  }
  .compare-vs__item--no i {
    color: var(--text-quaternary);
  }
  .compare-vs__item--no {
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .mkt-tl {
    --tl-rail: var(--border-secondary);
    --tl-accent: var(--bg-brand-solid);
    --tl-title: var(--text-primary);
    --tl-body: var(--text-tertiary);
    --tl-year: var(--text-brand-secondary, var(--text-link));
    background-color: var(--bg-primary);
    color: var(--tl-body);
  }
  .mkt-tl__head {
    max-width: 48rem;
  }
  .mkt-tl--center .mkt-tl__head {
    margin-inline: auto;
    text-align: center;
  }
  .mkt-tl__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tl-year);
  }
  .mkt-tl__title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--tl-title);
  }
  @media (min-width: 768px) {
    .mkt-tl__title {
      font-size: 3rem;
    }
  }
  .mkt-tl__lede {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--tl-body);
    max-width: 45rem;
  }
  @media (min-width: 768px) {
    .mkt-tl__lede {
      font-size: 1.25rem;
    }
  }
  .mkt-tl__list {
    margin-top: 3rem;
    position: relative;
  }
  @media (min-width: 768px) {
    .mkt-tl__list {
      margin-top: 4rem;
    }
  }
  .mkt-tl__item {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1.25rem;
    padding-bottom: 2.5rem;
  }
  .mkt-tl__item:last-child {
    padding-bottom: 0;
  }
  .mkt-tl__item:not(:last-child) .mkt-tl__node::after {
    content: "";
    position: absolute;
    inset-block-start: 2.75rem;
    inset-block-end: -2.5rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-color: var(--tl-rail);
  }
  .mkt-tl__node {
    position: relative;
    z-index: 1;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tl-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--tl-accent) 12%, var(--bg-card));
    }
    color: var(--tl-accent);
    border: 1px solid var(--tl-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--tl-accent) 30%, transparent);
    }
    font-size: 0.9375rem;
  }
  .mkt-tl__body {
    padding-top: 0.25rem;
  }
  .mkt-tl__year {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tl-year);
  }
  .mkt-tl__item-title {
    margin-top: 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tl-title);
  }
  .mkt-tl__text {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--tl-body);
  }
  @media (min-width: 1024px) {
    .mkt-tl--center .mkt-tl__list {
      max-width: 60rem;
      margin-inline: auto;
    }
    .mkt-tl--center .mkt-tl__item {
      grid-template-columns: 1fr 2.5rem 1fr;
      gap: 2rem;
      align-items: start;
    }
    .mkt-tl--center .mkt-tl__node {
      grid-column: 2;
    }
    .mkt-tl--center .mkt-tl__item:nth-child(odd) .mkt-tl__body {
      grid-column: 1;
      text-align: right;
    }
    .mkt-tl--center .mkt-tl__item:nth-child(even) .mkt-tl__body {
      grid-column: 3;
    }
    .mkt-tl--center .mkt-tl__item:nth-child(odd) .mkt-tl__body {
      order: -1;
    }
  }
  .mkt-tl--h .mkt-tl__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  @media (min-width: 768px) {
    .mkt-tl--h .mkt-tl__list {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 2rem;
    }
  }
  .mkt-tl__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .mkt-tl--h .mkt-tl__node {
    width: 3rem;
    height: 3rem;
    font-size: 1.0625rem;
  }
  @media (min-width: 768px) {
    .mkt-tl__step:not(:last-child) .mkt-tl__node::after {
      content: "";
      position: absolute;
      inset-inline-start: 3rem;
      inset-block-start: 1.5rem;
      height: 2px;
      width: calc(100% - 3rem + 2rem);
      background-color: var(--tl-rail);
      transform: none;
      bottom: auto;
    }
  }
  .mkt-tl__step .mkt-tl__item-title {
    margin-top: 0;
  }
  .mkt-tl--brand {
    --tl-rail: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --tl-rail: color-mix(in oklch, var(--text-on-brand) 22%, transparent);
    }
    --tl-accent: var(--text-on-brand);
    --tl-title: var(--text-on-brand);
    --tl-body: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --tl-body: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
    --tl-year: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      --tl-year: color-mix(in oklch, var(--text-on-brand) 90%, transparent);
    }
    background-color: var(--bg-brand-section, var(--bg-brand-solid));
  }
  .mkt-tl--brand .mkt-tl__node {
    background-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-on-brand) 14%, transparent);
    }
    border-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-on-brand) 30%, transparent);
    }
  }
  .mkt-tl__media {
    margin-top: 1rem;
    max-width: 30rem;
    border-radius: var(--radius-xl, 0.75rem);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-tertiary);
  }
  .mkt-tl__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  @media (min-width: 1024px) {
    .mkt-tl--media .mkt-tl__body {
      display: grid;
      grid-template-columns: 1fr 20rem;
      gap: 2rem;
      align-items: start;
    }
    .mkt-tl--media .mkt-tl__media {
      margin-top: 0;
      grid-column: 2;
    }
    .mkt-tl--media .mkt-tl__body > :not(.mkt-tl__media) {
      grid-column: 1;
    }
  }
  .mkt-tl--brand .mkt-tl__media {
    background-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-on-brand) 12%, transparent);
    }
  }
}
@layer utilities {
  .auth-page {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 3rem 1rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  .auth-page__container {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    max-width: 22.5rem;
    gap: 2rem;
  }
  .auth-page__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  .auth-page__titles {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.5rem;
  }
  .auth-page__title {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xl, 1.25rem);
    line-height: 1.75rem;
    color: var(--text-primary);
  }
  .auth-page__subtitle {
    align-self: stretch;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-tertiary);
  }
  .auth-page__email {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .auth-form {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 1.5rem;
  }
  .auth-form__fields {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 1.25rem;
  }
  .auth-form__field {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.375rem;
  }
  .auth-form__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 1rem;
  }
  .auth-page__cta {
    width: 100%;
  }
  .auth-page__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
  }
  .auth-page__footer--single {
    flex-direction: row;
    justify-content: center;
    gap: 0.25rem;
  }
  .auth-page__resend {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }
  .auth-page__resend-label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--text-tertiary);
  }
  .auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-decoration-line: none;
    gap: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: var(--radius-sm, 0.375rem);
    color: var(--text-link-secondary);
    transition: color var(--duration-fast, 120ms) var(--ease-default, ease);
  }
  .auth-link:hover {
    color: var(--text-link-secondary-hover, var(--text-secondary));
  }
  .auth-link--color {
    color: var(--text-link);
  }
  .auth-link--color:hover {
    color: var(--text-link-hover, var(--text-link));
  }
  .auth-link__icon {
    margin-left: calc(var(--spacing) * -0.5);
    font-size: 1rem;
    line-height: 1;
  }
  .auth-link:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .password-reqs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.75rem;
  }
  .password-req {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: 0.5rem;
  }
  .password-req__check {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    color: var(--color-white, #fff);
    transition: background-color var(--duration-normal, 150ms) var(--ease-in-out, ease-in-out);
  }
  .password-req__check svg {
    width: 0.625rem;
    height: 0.5rem;
    fill: none;
    stroke: currentColor;
  }
  .password-req.is-met .password-req__check {
    background-color: var(--bg-success-solid);
  }
  .password-req__label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--text-tertiary);
  }
  .auth-split {
    display: grid;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
  .auth-split__aside {
    display: none;
    flex-direction: column;
    background-color: var(--bg-secondary);
  }
  .auth-split__aside-top {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 4rem;
    padding: 2rem 2rem 0;
  }
  .auth-split__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-primary);
  }
  .auth-split__brand img {
    height: 1.5rem;
    width: auto;
  }
  .auth-split__footer {
    margin-top: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
  }
  .auth-split__footer-note, .auth-split__footer-contact {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--text-tertiary);
  }
  .auth-split__footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .auth-split__footer-contact i {
    color: var(--text-quaternary);
  }
  .auth-split__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    padding: 3rem 1rem;
  }
  .auth-split__dots {
    margin-inline: auto;
  }
  @media (min-width: 768px) {
    .auth-page {
      padding: 6rem 2rem 0;
    }
    .auth-page__titles {
      gap: 0.75rem;
    }
    .auth-page__title {
      font-size: 1.5rem;
      line-height: 2rem;
    }
    .auth-split {
      grid-template-columns: 384px 1fr;
    }
    .auth-split__aside {
      display: flex;
      &.collapse.show {
        display: flex;
      }
    }
    .auth-split__main {
      padding: 10rem 2rem 0;
    }
  }
  .auth-frame {
    overflow: auto;
    border-radius: 10px;
  }
  .auth-frame > .auth-page, .auth-frame > .auth-split {
    min-height: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .password-req__check, .auth-link {
      transition: none;
    }
  }
}
@layer utilities {
  .signup {
    --signup-col: 22.5rem;
    --signup-col-wide: 27.5rem;
    --signup-brand-section: var(--color-brand-950);
    --signup-accent: var(--color-brand-600);
    --signup-scoop: 80px;
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-y: auto;
  }
  .signup--secondary {
    background-color: var(--bg-secondary);
  }
  .signup-container {
    width: 100%;
    max-width: var(--signup-col);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .signup-container--wide {
    max-width: var(--signup-col-wide);
  }
  .signup-head {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .signup-head--center {
    align-items: center;
    text-align: center;
  }
  .signup-head__text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  @media (min-width: 768px) {
    .signup-head__text {
      gap: 0.75rem;
    }
  }
  .signup-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .signup-subtitle {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-tertiary);
  }
  .signup-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
  }
  .signup-logo__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background-color: var(--signup-accent);
    color: var(--color-white);
    font-size: 1.125rem;
    flex: none;
    box-shadow: var(--shadow-xs);
  }
  .signup-logo__word {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  .signup-logo--mark .signup-logo__word {
    display: none;
  }
  .signup-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .signup-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .signup-form__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .signup-social {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .signup-signin {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    font-size: 0.875rem;
  }
  .signup-signin__label {
    color: var(--text-tertiary);
  }
  .signup-signin .link {
    font-weight: 600;
  }
  .signup-reqs {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .signup-req {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .signup-req__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    border-radius: 9999px;
    background-color: var(--bg-quaternary, var(--color-neutral-300));
    color: var(--color-white);
    transition: background-color 150ms ease-in-out;
  }
  .signup-req__check svg {
    width: 0.625rem;
    height: 0.5rem;
  }
  .signup-req.is-met .signup-req__check {
    background-color: var(--text-success, var(--color-success-600));
  }
  .signup-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .signup-hint__icon {
    font-size: 1rem;
    color: var(--text-quaternary);
    transition: color 150ms ease-in-out;
  }
  .signup-hint.is-met .signup-hint__icon {
    color: var(--text-success, var(--color-success-600));
  }
  .signup-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .signup-divider::before, .signup-divider::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background-color: var(--border-secondary);
  }
  .signup-divider__text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-tertiary);
  }
  .signup-rule {
    width: 100%;
    height: 1px;
    border: 0;
    margin: 0;
    background-color: var(--border-secondary);
  }
  .signup-tabs {
    display: flex;
    width: 100%;
    gap: 0.25rem;
  }
  .signup-tabs__item {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-md, 0.5rem);
    color: var(--text-tertiary);
    background-color: transparent;
    cursor: pointer;
    transition: background-color 100ms linear, color 100ms linear;
  }
  .signup-tabs__item:hover {
    color: var(--text-secondary);
    background-color: var(--bg-primary-hover, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-primary-hover, color-mix(in oklch, var(--text-primary) 4%, transparent));
    }
  }
  .signup-tabs__item.is-active {
    color: var(--text-secondary);
    background-color: var(--bg-active, var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-active, color-mix(in oklch, var(--text-primary) 6%, transparent));
    }
  }
  .signup-tabs__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .signup-tabs--border {
    gap: 0;
    border-bottom: 1px solid var(--border-secondary);
  }
  .signup-tabs--border .signup-tabs__item {
    border-radius: 0;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
  }
  .signup-tabs--border .signup-tabs__item.is-active {
    background-color: transparent;
    color: var(--signup-accent);
    border-bottom-color: var(--signup-accent);
  }
  .signup--centered {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
  }
  @media (min-width: 768px) {
    .signup--centered {
      padding: 6rem 2rem 3rem;
    }
  }
  .signup-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: var(--bg-primary);
  }
  @media (min-width: 640px) {
    .signup-card--all {
      margin-inline: auto;
      max-width: var(--signup-col-wide);
      border-radius: var(--radius-2xl, 1rem);
      padding: 2rem 2.5rem;
      box-shadow: var(--shadow-sm);
    }
    .signup-card--form {
      border-radius: var(--radius-2xl, 1rem);
      padding: 2rem 2.5rem;
      box-shadow: var(--shadow-sm);
    }
  }
  .signup-card--form {
    position: relative;
    z-index: 10;
    padding: 2rem 1rem;
  }
  .signup--split {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100%;
  }
  @media (min-width: 1024px) {
    .signup--split {
      grid-template-columns: 1fr 1fr;
    }
    .signup--split.signup--split-640 {
      grid-template-columns: 640px 1fr;
    }
    .signup--split.signup--split-sidebar {
      grid-template-columns: 384px 1fr;
    }
    .signup--split.signup--split-wideL {
      grid-template-columns: 2fr 1fr;
    }
  }
  @media (min-width: 1280px) {
    .signup--split.signup--split-wideL {
      grid-template-columns: 880px 1fr;
    }
  }
  .signup__col {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    min-width: 0;
  }
  .signup__header {
    display: none;
    padding: 2rem;
  }
  @media (min-width: 768px) {
    .signup__header {
      display: block;
    }
  }
  .signup__body {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
  }
  @media (min-width: 768px) {
    .signup__body {
      align-items: center;
      padding: 0 2rem;
    }
  }
  .signup__footer {
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    padding-top: 2.75rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  @media (min-width: 1024px) {
    .signup__footer {
      display: flex;
    }
  }
  .signup__footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-tertiary);
  }
  .signup__footer a:hover {
    color: var(--text-secondary);
  }
  .signup__footer i {
    color: var(--text-quaternary);
  }
  .signup__aside {
    position: relative;
    display: none;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .signup__aside {
      display: flex;
      flex: 1 1 auto;
    }
  }
  .signup__aside--first {
    order: -1;
  }
  .signup-onlylg {
    display: none;
  }
  @media (min-width: 1024px) {
    .signup-onlylg {
      display: block;
    }
  }
  .signup-hidelg {
    display: block;
  }
  @media (min-width: 1024px) {
    .signup-hidelg {
      display: none;
    }
  }
  .signup-decor {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .signup-decor--gradient {
    background-image: radial-gradient(120% 120% at 15% 15%, color-mix(in srgb, oklch(84.5% 0.165 91) 55%, transparent) 0%, transparent 55%), radial-gradient(120% 120% at 85% 85%, color-mix(in srgb, oklch(53.0% 0.118 74) 65%, transparent) 0%, transparent 60%), linear-gradient(135deg, var(--color-brand-600), var(--color-brand-800));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(120% 120% at 15% 15%, color-mix(in oklch, var(--color-brand-400) 55%, transparent) 0%, transparent 55%), radial-gradient(120% 120% at 85% 85%, color-mix(in oklch, var(--color-brand-700) 65%, transparent) 0%, transparent 60%), linear-gradient(135deg, var(--color-brand-600), var(--color-brand-800));
    }
  }
  .signup-decor--scoop {
    border-top-left-radius: var(--signup-scoop);
    border-bottom-left-radius: var(--signup-scoop);
  }
  .signup-decor--muted {
    background-color: var(--bg-tertiary);
  }
  .signup-decor--brand {
    background-color: var(--signup-brand-section);
  }
  .signup-decor--photo {
    background-image: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, oklch(88.2% 0.152 96) 40%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--color-brand-700) 0%, var(--color-brand-950) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(90% 60% at 50% 0%, color-mix(in oklch, var(--color-brand-300) 40%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--color-brand-700) 0%, var(--color-brand-950) 100%);
    }
  }
  .signup-decor__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, color-mix(in oklch, black 55%, transparent) 100%);
    pointer-events: none;
  }
  .signup-pitch {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--color-white);
  }
  .signup-pitch__spark {
    width: 5rem;
    height: 5rem;
    color: var(--color-white);
  }
  .signup-pitch__title {
    font-size: clamp(2.25rem, 3.2vw, 3.25rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .signup-pitch__text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--color-white) 85%, transparent);
    }
    max-width: 34rem;
  }
  .signup-proof {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
  }
  .signup-avatars {
    display: flex;
  }
  .signup-avatars > * {
    margin-left: -0.75rem;
    box-shadow: 0 0 0 2px color-mix(in srgb, #fff 32%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-white) 32%, transparent);
    }
    border-radius: 9999px;
  }
  .signup-avatars > *:first-child {
    margin-left: 0;
  }
  .signup-proof__meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--color-white);
  }
  .signup-proof__score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
  }
  .signup-proof__count {
    font-size: 0.875rem;
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--color-white) 80%, transparent);
    }
  }
  .signup-decor .rating, .signup-pitch .rating {
    --star-filled: var(--utility-yellow-300, #fde047);
    --star-empty: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --star-empty: color-mix(in oklch, var(--color-white) 30%, transparent);
    }
  }
  .signup-quote .rating, .signup-testimonial--onbrand .rating {
    --star-filled: var(--color-white);
    --star-empty: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --star-empty: color-mix(in oklch, var(--color-white) 30%, transparent);
    }
  }
  .signup-mockup-shelf {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 6rem;
    overflow: hidden;
  }
  .signup-mockup {
    width: min(46rem, 130%);
    border-radius: 1.5rem;
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-xl, 0 24px 48px -12px rgb(16 24 40 / 0.25));
    overflow: hidden;
    border: 1px solid var(--border-secondary);
  }
  .signup-mockup__bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-secondary);
    background-color: var(--bg-secondary);
  }
  .signup-mockup__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--border-primary);
  }
  .signup-mockup__body {
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  .signup-mockup__tile {
    height: 4rem;
    border-radius: 0.5rem;
    background-color: var(--bg-tertiary);
  }
  .signup-mockup__chart {
    grid-column: 1 / -1;
    height: 8rem;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, var(--signup-accent), transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, color-mix(in oklch, var(--signup-accent) 12%, transparent), transparent);
    }
    position: relative;
    overflow: hidden;
  }
  .signup-mockup__chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .signup-appframe-shelf {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 4rem;
    overflow: hidden;
  }
  .signup-appframe {
    width: 17rem;
    max-width: 70%;
    aspect-ratio: 9 / 19;
    border-radius: 2.5rem;
    background-color: var(--bg-primary);
    border: 10px solid var(--color-gray-900, #101828);
    box-shadow: var(--shadow-xl, 0 24px 48px -12px rgb(16 24 40 / 0.35));
    overflow: hidden;
    position: relative;
  }
  .signup-appframe__notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 1.25rem;
    background-color: var(--color-gray-900, #101828);
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
  }
  .signup-appframe__screen {
    height: 100%;
    background: linear-gradient(180deg, var(--signup-accent), var(--bg-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, color-mix(in oklch, var(--signup-accent) 16%, var(--bg-primary)), var(--bg-primary));
    }
  }
  .signup-statcard {
    width: 100%;
    max-width: 30rem;
    border-radius: 1rem;
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-lg, 0 12px 24px -8px rgb(16 24 40 / 0.2));
    padding: 1.25rem;
  }
  .signup-statcard svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .signup-quote {
    position: relative;
    z-index: 1;
    margin: auto 2rem 2rem;
    border-radius: var(--radius-2xl, 1rem);
    padding: 1.75rem;
    color: var(--color-white);
    background-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--color-white) 25%, transparent);
    }
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-white) 25%, transparent);
    }
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .signup-quote__q {
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    line-height: 1.3;
    font-weight: 500;
  }
  .signup-quote__author {
    font-size: 1.25rem;
    font-weight: 600;
  }
  .signup-quote__meta {
    font-size: 0.875rem;
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--color-white) 80%, transparent);
    }
  }
  .signup-quote__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .signup-quote__nav {
    display: flex;
    gap: 0.75rem;
  }
  .signup-quote__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--color-white) 50%, transparent);
    }
    background-color: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 120ms linear;
  }
  .signup-quote__btn:hover {
    background-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--color-white) 15%, transparent);
    }
  }
  .signup-quote__btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }
  .signup-testimonial {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 5rem;
    text-align: center;
  }
  .signup-testimonial__q {
    font-size: clamp(1.375rem, 2vw, 1.875rem);
    line-height: 1.35;
    font-weight: 500;
    color: var(--text-primary);
  }
  .signup-testimonial__author {
    font-weight: 600;
    color: var(--text-primary);
  }
  .signup-testimonial__meta {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .signup-testimonial__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .signup-rotator {
    position: relative;
    width: 100%;
  }
  .signup-rotator__slide {
    display: none;
    animation: signup-fade 320ms ease;
  }
  .signup-rotator__slide.is-active {
    display: block;
  }
  @keyframes signup-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .signup-steps {
    display: flex;
  }
  .signup-steps--h {
    flex-direction: row;
    align-items: flex-start;
  }
  .signup-steps--v {
    flex-direction: column;
  }
  .signup-step {
    position: relative;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
  }
  .signup-steps--h .signup-step {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .signup-steps--v .signup-step {
    flex-direction: row;
    padding-bottom: 1.75rem;
  }
  .signup-steps--v .signup-step:last-child {
    padding-bottom: 0;
  }
  .signup-step__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 9999px;
    background-color: var(--bg-primary);
    color: var(--text-quaternary);
    box-shadow: inset 0 0 0 1.5px var(--border-primary);
    font-size: 0.875rem;
    font-weight: 600;
  }
  .signup-step__marker i, .signup-step__marker svg {
    width: 1rem;
    height: 1rem;
    font-size: 0.875rem;
  }
  .signup-step.is-current .signup-step__marker {
    background-color: var(--signup-accent);
    color: var(--color-white);
    box-shadow: 0 0 0 4px var(--signup-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--signup-accent) 24%, transparent);
    }
  }
  .signup-step.is-complete .signup-step__marker {
    background-color: var(--signup-accent);
    color: var(--color-white);
    box-shadow: none;
  }
  .signup-step__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.125rem;
  }
  .signup-steps--h .signup-step__body {
    padding-top: 0.75rem;
  }
  .signup-step__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .signup-step__desc {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .signup-step.is-current .signup-step__title {
    color: var(--signup-accent);
  }
  .signup-step__line {
    position: absolute;
    background-color: var(--border-primary);
  }
  .signup-steps--h .signup-step__line {
    top: 1rem;
    left: 50%;
    width: 100%;
    height: 2px;
    transform: translateX(0);
  }
  .signup-steps--h .signup-step:last-child .signup-step__line {
    display: none;
  }
  .signup-steps--v .signup-step__line {
    left: 1rem;
    top: 2rem;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
  }
  .signup-steps--v .signup-step:last-child .signup-step__line {
    display: none;
  }
  .signup-step.is-complete .signup-step__line {
    background-color: var(--signup-accent);
  }
  .signup-steps--featured .signup-step__marker {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    font-size: 1rem;
  }
  .signup-steps--featured.signup-steps--h .signup-step__line {
    top: 1.25rem;
  }
  .signup-steps--featured.signup-steps--v .signup-step__line {
    left: 1.25rem;
    top: 2.5rem;
  }
  .signup-steps--line .signup-step {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0.5rem;
  }
  .signup-steps--line .signup-step::before {
    content: "";
    height: 0.25rem;
    border-radius: 9999px;
    background-color: var(--border-primary);
  }
  .signup-steps--line .signup-step.is-current::before, .signup-steps--line .signup-step.is-complete::before {
    background-color: var(--signup-accent);
  }
  .signup-steps--line .signup-step__marker {
    display: none;
  }
  .signup--wizard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 3rem 1rem;
  }
  @media (min-width: 768px) {
    .signup--wizard {
      padding: 6rem 2rem 4rem;
    }
  }
  .signup-wizard__progress {
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
  }
  .signup-wizard__progress .signup-steps--h {
    display: none;
  }
  @media (min-width: 768px) {
    .signup-wizard__progress .signup-steps--h {
      display: flex;
    }
    .signup-wizard__progress .signup-steps--v {
      display: none;
    }
  }
  .signup-sidebar {
    display: none;
    flex-direction: column;
    gap: 4rem;
    padding: 2rem;
    background-color: var(--bg-secondary);
  }
  @media (min-width: 1024px) {
    .signup-sidebar {
      display: flex;
    }
  }
  .signup-sidebar__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .signup-sidebar--brand {
    background-color: var(--signup-brand-section);
  }
  .signup-sidebar--brand, .signup-sidebar--brand .signup-step__title, .signup-sidebar--brand .signup-step__desc, .signup-sidebar--brand .signup-sidebar__foot {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--color-white) 80%, transparent);
    }
  }
  .signup-sidebar--brand .signup-logo__word {
    color: var(--color-white);
  }
  .signup-sidebar--brand .signup-step__marker {
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--color-white) 8%, transparent);
    }
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--color-white) 70%, transparent);
    }
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--color-white) 25%, transparent);
    }
  }
  .signup-sidebar--brand .signup-step.is-current .signup-step__marker, .signup-sidebar--brand .signup-step.is-complete .signup-step__marker {
    background-color: var(--color-white);
    color: var(--signup-accent);
    box-shadow: none;
  }
  .signup-sidebar--brand .signup-step.is-current .signup-step__title {
    color: var(--color-white);
  }
  .signup-sidebar--brand .signup-step.is-complete .signup-step__line {
    background-color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--color-white) 60%, transparent);
    }
  }
  .signup-featured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
    font-size: 1.25rem;
  }
  .signup-mainfoot {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
  }
  .signup-arrow {
    position: absolute;
    right: -3rem;
    bottom: 5.5rem;
    z-index: 50;
    width: 12rem;
    height: auto;
    color: var(--color-brand-300);
    pointer-events: none;
  }
  @media (max-width: 1023.98px) {
    .signup-arrow {
      display: none;
    }
  }
  .signup-topnav {
    display: none;
    border-bottom: 1px solid var(--border-secondary);
    background-color: var(--bg-primary);
  }
  @media (min-width: 768px) {
    .signup-topnav {
      display: block;
    }
  }
  .signup-topnav__inner {
    max-width: 80rem;
    margin-inline: auto;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 2rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .signup-req__check, .signup-hint__icon, .signup-tabs__item, .signup-quote__btn {
      transition: none;
    }
    .signup-rotator__slide {
      animation: none;
    }
  }
}
@layer utilities {
  .contact-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--bg-primary);
  }
  .contact-page__main {
    flex: 1 1 auto;
  }
  .contact-hero {
    display: grid;
    grid-template-columns: 1fr;
    min-height: inherit;
  }
  @media (min-width: 1024px) {
    .contact-hero {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .contact-hero--aside {
      grid-template-columns: 26rem 1fr;
    }
  }
  .contact-hero__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 1rem;
  }
  @media (min-width: 768px) {
    .contact-hero__form {
      padding: 6rem 2rem;
    }
  }
  .contact-hero__inner {
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
  }
  .contact-hero__media {
    display: none;
    overflow: hidden;
    background-color: var(--bg-secondary);
  }
  @media (min-width: 1024px) {
    .contact-hero__media {
      display: block;
    }
  }
  .contact-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .contact-hero__ph {
    width: 100%;
    height: 100%;
    min-height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 2.5rem;
    background-color: var(--bg-secondary);
    background-image: linear-gradient(var(--border-divider) 1px, transparent 1px), linear-gradient(90deg, var(--border-divider) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
  }
  .contact-hero__aside {
    display: none;
    flex-direction: column;
    padding: 3rem 1rem;
    background-color: var(--bg-brand-section, var(--bg-brand-solid));
    color: var(--text-on-brand);
  }
  @media (min-width: 1024px) {
    .contact-hero__aside {
      display: flex;
      padding: 3rem;
    }
  }
  .contact-hero__aside .contact-section__title, .contact-hero__aside .contact-method__title {
    color: var(--text-on-brand);
  }
  .contact-hero__aside .contact-section__lead, .contact-hero__aside .contact-method__text {
    color: var(--text-on-brand-secondary, var(--text-on-brand));
  }
  .contact-hero__aside .contact-method__link {
    color: var(--text-on-brand);
  }
  .contact-hero__aside .contact-icon {
    background-color: var(--bg-on-brand-subtle, var(--bg-brand-solid-hover));
    color: var(--text-on-brand);
  }
  .contact-channels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
  }
  .contact-channel {
    display: flex;
    gap: 1rem;
  }
  .contact-channel__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-channel .contact-method__title {
    margin-top: 0;
  }
  .contact-social-row {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  @media (min-width: 1024px) {
    .contact-social-row {
      margin-top: auto;
    }
  }
  .contact-social-row__link {
    display: inline-flex;
    color: var(--text-on-brand);
    font-size: 1.25rem;
    border-radius: var(--radius-lg);
  }
  .contact-social-row__link:hover {
    opacity: 0.85;
  }
}
@layer utilities {
  .login {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
  }
  .login--centered {
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
  }
  .login--split {
    align-items: stretch;
  }
  .login-container {
    width: 100%;
    max-width: 22.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .login-container--wide {
    max-width: 24rem;
  }
  .login-head {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .login-head--center {
    align-items: center;
    text-align: center;
  }
  .login-head__text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .login-title {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
  }
  .login-subtitle {
    font-size: 1rem;
    color: var(--text-tertiary);
  }
  .login-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .login-logo__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
    color: var(--text-icon-brand);
    font-size: 1.25rem;
  }
  .login-logo--mark .login-logo__badge {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .login-logo__word {
    font-size: 1.125rem;
    letter-spacing: -0.01em;
  }
  .login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .login-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .login-form__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .login-form__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  .login-social {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .login-social--row {
    flex-direction: row;
  }
  .login-social--row > * {
    flex: 1 1 0;
  }
  .login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-quaternary);
    font-size: 0.8125rem;
  }
  .login-divider::before, .login-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-divider);
  }
  .login-signup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .login-signup--start {
    justify-content: flex-start;
  }
  .login__col {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
  }
  .login__col--form {
    background: var(--bg-primary);
  }
  .login__aside {
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 900px) {
    .login__aside {
      display: none;
    }
    .login__col {
      flex-basis: 100%;
    }
  }
  .login-decor {
    position: absolute;
    inset: 0;
  }
  .login-decor--brand {
    background: var(--bg-brand-solid);
  }
  .login-decor--gradient {
    background: linear-gradient(135deg, var(--bg-brand-solid), var(--bg-brand-solid-hover));
  }
  .login-decor--muted {
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .login-decor--photo {
    background: radial-gradient(120% 90% at 30% 10%, var(--bg-brand-solid), transparent), linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(120% 90% at 30% 10%, color-mix(in oklch, var(--bg-brand-solid) 40%, transparent), transparent), linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
    }
  }
  .login-decor__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-brand-solid), transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to top, color-mix(in oklch, var(--bg-brand-solid) 55%, transparent), transparent 60%);
    }
  }
  .login-quote {
    position: relative;
    z-index: 1;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem;
    color: var(--text-on-brand);
  }
  .login-quote--onlight {
    color: var(--text-primary);
  }
  .login-quote__q {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.35;
  }
  .login-quote__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .login-quote__meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .login-quote__author {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .login-quote__role {
    font-size: 0.9375rem;
    opacity: 0.85;
  }
  .login-quote__nav {
    display: inline-flex;
    gap: 0.5rem;
  }
  .login-quote__btn {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-on-brand) 15%, transparent);
    }
    color: var(--text-on-brand);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .login-quote__btn:hover {
    background: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--text-on-brand) 25%, transparent);
    }
  }
  .login-mockup {
    position: relative;
    z-index: 1;
    width: 26rem;
    max-width: 80%;
    border-radius: var(--radius-xl);
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg, var(--shadow-sm));
    overflow: hidden;
  }
  .login-mockup__bar {
    display: flex;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    box-shadow: inset 0 -1px 0 var(--border-divider);
  }
  .login-mockup__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background: var(--bg-quaternary);
  }
  .login-mockup__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .login-mockup__tile {
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .login-mockup__chart {
    height: 8rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--bg-brand-solid), transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, color-mix(in oklch, var(--bg-brand-solid) 18%, transparent), transparent);
    }
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .login-illus {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-illus__art {
    width: 18rem;
    height: 18rem;
    border-radius: var(--radius-full);
    background: radial-gradient(circle at 35% 30%, var(--bg-brand-solid), transparent 70%), var(--bg-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--bg-brand-solid) 35%, transparent), transparent 70%), var(--bg-secondary);
    }
    box-shadow: inset 0 0 0 1px var(--border-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-icon-brand);
    font-size: 4rem;
  }
  .login-card {
    width: 100%;
    max-width: 25rem;
    padding: 2rem;
    border-radius: var(--radius-2xl, var(--radius-xl));
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-lg, var(--shadow-sm));
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .login-card--onmuted {
    background: var(--bg-primary);
  }
  .login--oncanvas {
    background: var(--bg-secondary);
  }
  .login-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    z-index: 2;
  }
  .login-topbar__links {
    display: flex;
    gap: 1.25rem;
  }
  .login-topbar__link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary);
  }
  .login-topbar__link:hover {
    color: var(--text-secondary);
  }
  .login--minimal .login-container {
    gap: 1.5rem;
  }
  .login--minimal .login-title {
    font-size: 1.5rem;
  }
  @media (max-width: 640px) {
    .login-title {
      font-size: 1.5rem;
    }
    .login__col {
      padding: 1.5rem 1.25rem;
    }
    .login-quote {
      padding: 1.5rem;
    }
  }
  .login-mobile {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) calc(env(safe-area-inset-right, 0px) + 1.5rem) calc(env(safe-area-inset-bottom, 0px) + 2rem) calc(env(safe-area-inset-left, 0px) + 1.5rem);
    background: var(--bg-primary);
    color: var(--text-primary);
  }
  .login-mobile__lang {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.875rem);
    right: calc(env(safe-area-inset-right, 0px) + 0.875rem);
    z-index: 99;
  }
  .login-mobile__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 22.5rem;
    margin-inline: auto;
  }
  .login-mobile__brand {
    display: flex;
    justify-content: center;
  }
  .login-mobile__brand img {
    height: 3.5rem;
    width: auto;
  }
  .login-mobile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.25rem;
  }
  .login-mobile__form {
    margin-top: 1.5rem;
  }
  .login-mobile__field + .login-mobile__field {
    margin-top: 1rem;
  }
  .login-mobile__submit {
    margin-top: 1.5rem;
  }
  .login-mobile__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
  }
}
@layer utilities {
  .landing-page {
    background: var(--bg-primary);
    color: var(--text-primary);
  }
  .landing-section {
    padding: 4.5rem 0;
  }
  .landing-section--tight {
    padding: 2.5rem 0;
  }
  .landing-section--muted {
    background: var(--bg-secondary);
  }
  .landing-section--brand {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .landing-hero {
    padding: 5.5rem 0 3rem;
    text-align: center;
  }
  .landing-hero--split {
    text-align: left;
  }
  .landing-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
  }
  .landing-hero__title {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    max-width: 20ch;
  }
  .landing-hero:not(.landing-hero--split) .landing-hero__title {
    margin-left: auto;
    margin-right: auto;
  }
  .landing-hero__sub {
    margin-top: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--text-tertiary);
    max-width: 42rem;
  }
  .landing-hero:not(.landing-hero--split) .landing-hero__sub {
    margin-left: auto;
    margin-right: auto;
  }
  .landing-hero__actions {
    margin-top: 2rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .landing-hero:not(.landing-hero--split) .landing-hero__actions {
    justify-content: center;
  }
  .landing-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
  @media (max-width: 900px) {
    .landing-hero__grid {
      grid-template-columns: 1fr;
    }
  }
  .landing-hero__media {
    height: 24rem;
    border-radius: var(--radius-2xl, var(--radius-xl));
    background: radial-gradient(120% 90% at 70% 10%, var(--bg-brand-solid), transparent), linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(120% 90% at 70% 10%, color-mix(in oklch, var(--bg-brand-solid) 38%, transparent), transparent), linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
    }
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .landing-hero--split .landing-hero__media {
    margin-top: 0;
  }
  .landing-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }
  .landing-logos__label {
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
  }
  .landing-logo {
    height: 1.75rem;
    width: 6.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    opacity: 0.8;
  }
  .landing-head {
    max-width: 42rem;
    margin: 0 auto 3rem;
    text-align: center;
  }
  .landing-head--left {
    margin-left: 0;
    text-align: left;
  }
  .landing-head__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-icon-brand);
  }
  .landing-head__title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  .landing-head__sub {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    color: var(--text-tertiary);
  }
  .landing-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }
  @media (max-width: 900px) {
    .landing-features {
      grid-template-columns: 1fr;
    }
  }
  .landing-feature {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .landing-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--bg-brand-solid) 12%, transparent);
    }
    color: var(--text-icon-brand);
    font-size: 1.125rem;
  }
  .landing-feature__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .landing-feature__text {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-tertiary);
  }
  .landing-alt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
  }
  .landing-alt + .landing-alt {
    margin-top: 4.5rem;
  }
  .landing-alt--reverse .landing-alt__media {
    order: 2;
  }
  @media (max-width: 900px) {
    .landing-alt {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    .landing-alt--reverse .landing-alt__media {
      order: 0;
    }
  }
  .landing-alt__media {
    height: 20rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(150deg, var(--bg-tertiary), var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .landing-alt__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-icon-brand);
  }
  .landing-alt__title {
    margin-top: 0.5rem;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  .landing-alt__text {
    margin-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .landing-alt__points {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .landing-alt__point {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    color: var(--text-secondary);
  }
  .landing-alt__point i {
    color: var(--text-icon-brand);
    margin-top: 0.125rem;
  }
  .landing-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 12rem;
    gap: 1.25rem;
  }
  .landing-bento__cell {
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .landing-bento__cell--wide {
    grid-column: span 2;
  }
  .landing-bento__cell--brand {
    background: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .landing-bento__cell--brand .landing-bento__title, .landing-bento__cell--brand .landing-bento__text {
    color: var(--text-on-brand);
  }
  .landing-bento__icon {
    font-size: 1.25rem;
    color: var(--text-icon-brand);
  }
  .landing-bento__cell--brand .landing-bento__icon {
    color: var(--text-on-brand);
  }
  .landing-bento__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .landing-bento__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-tertiary);
  }
  @media (max-width: 900px) {
    .landing-bento {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
    }
    .landing-bento__cell--wide {
      grid-column: span 1;
    }
  }
  .landing-mockup {
    margin-top: 3rem;
    border-radius: var(--radius-2xl, var(--radius-xl));
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-lg, var(--shadow-sm));
    background: var(--bg-primary);
  }
  .landing-mockup__bar {
    display: flex;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    box-shadow: inset 0 -1px 0 var(--border-divider);
  }
  .landing-mockup__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background: var(--bg-quaternary);
  }
  .landing-mockup__screen {
    height: 20rem;
    background: radial-gradient(120% 90% at 50% 0%, var(--bg-brand-solid), transparent), linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--bg-brand-solid) 30%, transparent), transparent), linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
    }
  }
  .landing-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
  @media (max-width: 768px) {
    .landing-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
    }
  }
  .landing-metric {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .landing-metric__value {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .landing-section--brand .landing-metric__label {
    color: var(--text-on-brand);
    opacity: 0.85;
  }
  .landing-metric__label {
    font-size: 0.9375rem;
    color: var(--text-tertiary);
  }
  .landing-quote {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .landing-quote__q {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
  }
  .landing-quote__author {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .landing-quote__role {
    font-size: 0.9375rem;
    color: var(--text-tertiary);
  }
  .landing-cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  .landing-cta__title {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .landing-cta__sub {
    font-size: 1.125rem;
    max-width: 40rem;
    opacity: 0.9;
  }
  .landing-cta__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  @media (max-width: 640px) {
    .landing-hero__title {
      font-size: 2.5rem;
    }
    .landing-hero__media, .landing-alt__media {
      height: 14rem;
    }
    .landing-section {
      padding: 3rem 0;
    }
  }
}
@layer utilities {
  .profile-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    background: var(--bg-primary);
  }
  .profile-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
  }
  .profile-page__grid--reverse {
    grid-template-columns: 20rem minmax(0, 1fr);
  }
  .profile-page__main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
  }
  .profile-page__aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  @media (max-width: 900px) {
    .profile-page__grid, .profile-page__grid--reverse {
      grid-template-columns: minmax(0, 1fr);
    }
    .profile-page__aside {
      order: 2;
    }
  }
  .profile-tabpanel {
    display: none;
  }
  .profile-tabpanel.is-active {
    display: block;
    animation: profile-tab-in var(--duration-fast) var(--ease-default);
  }
  @keyframes profile-tab-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .profile-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 0.25rem 0 0.5rem;
  }
  .profile-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.125rem 1.5rem;
    border-left: 1px solid var(--border-divider);
  }
  .profile-stat:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .profile-stat__value {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .profile-stat__label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .profile-about {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .profile-about__row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
  }
  .profile-about__icon {
    color: var(--text-tertiary);
    width: 1rem;
    text-align: center;
    flex: 0 0 auto;
    margin-top: 0.125rem;
  }
  .profile-about__text {
    color: var(--text-secondary);
  }
  .profile-about__text a {
    color: var(--text-link);
  }
  @media (prefers-reduced-motion: reduce) {
    .profile-tabpanel.is-active {
      animation: none;
    }
  }
}
@layer utilities {
  .legal-hero {
    background-color: var(--bg-primary);
  }
  .legal-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
  }
  .legal-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--text-link));
  }
  .legal-title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .legal-title {
      font-size: 3rem;
    }
  }
  .legal-lede {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  @media (min-width: 768px) {
    .legal-lede {
      margin-top: 1.5rem;
      font-size: 1.25rem;
    }
  }
  .legal-hero--split .legal-hero__inner {
    align-items: start;
    text-align: start;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  @media (min-width: 1024px) {
    .legal-hero--split .legal-hero__inner {
      grid-template-columns: 1fr 20rem;
      align-items: end;
      gap: 4rem;
    }
  }
  .legal-tabs {
    display: inline-flex;
    margin-top: 2rem;
    padding: 0.25rem;
    gap: 0.25rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
  }
  @media (min-width: 768px) {
    .legal-tabs {
      margin-top: 3rem;
    }
  }
  .legal-tab {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .legal-tab:hover {
    color: var(--text-secondary);
  }
  .legal-tab.is-active {
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
  }
  .legal-tab:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .legal-signup {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 30rem;
    margin-top: 2rem;
  }
  @media (min-width: 640px) {
    .legal-signup {
      flex-direction: row;
    }
  }
  .legal-signup .form-control {
    flex: 1;
  }
  .legal-signup__hint {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-top: 0.5rem;
  }
  .legal-signup__hint a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .legal-prose {
    max-width: 45rem;
    margin-inline: auto;
    color: var(--text-tertiary);
    font-size: 1rem;
    line-height: 1.75;
  }
  .legal-prose > * + * {
    margin-top: 1.25rem;
  }
  .legal-prose h2 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
  }
  .legal-prose h3 {
    margin-top: 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .legal-prose h2:first-child, .legal-prose h3:first-child {
    margin-top: 0;
  }
  .legal-prose p {
    color: var(--text-tertiary);
  }
  .legal-prose a {
    color: var(--text-brand-secondary, var(--text-link));
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .legal-prose ul, .legal-prose ol {
    padding-inline-start: 1.5rem;
  }
  .legal-prose ul {
    list-style: disc;
  }
  .legal-prose ol {
    list-style: decimal;
  }
  .legal-prose li + li {
    margin-top: 0.5rem;
  }
  .legal-prose li::marker {
    color: var(--text-quaternary);
  }
  .legal-prose blockquote {
    border-inline-start: 3px solid var(--border-brand, var(--bg-brand-solid));
    padding-inline-start: 1.25rem;
    color: var(--text-secondary);
    font-style: italic;
  }
  .legal-prose strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .legal-prose hr {
    border: 0;
    border-top: 1px solid var(--border-secondary);
    margin-block: 2rem;
  }
  .legal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  @media (min-width: 1024px) {
    .legal-layout {
      grid-template-columns: 1fr 16rem;
      gap: 4rem;
    }
    .legal-layout .legal-prose {
      margin-inline: 0;
    }
  }
  .legal-toc {
    position: sticky;
    top: 5rem;
    align-self: start;
  }
  .legal-toc__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 0.75rem;
  }
  .legal-toc__link {
    display: block;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    text-decoration: none;
    border-inline-start: 2px solid transparent;
    padding-inline-start: 0.75rem;
  }
  .legal-toc__link:hover {
    color: var(--text-primary);
  }
  .legal-toc__link.is-active {
    color: var(--text-primary);
    border-inline-start-color: var(--border-brand, var(--bg-brand-solid));
  }
}
@layer utilities {
  .about-page {
    background-color: var(--bg-primary);
  }
  .about-page__section {
    padding-block: 64px;
  }
  @media (min-width: 768px) {
    .about-page__section {
      padding-block: 96px;
    }
  }
  .about-page__container {
    margin-inline: auto;
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    max-width: 80rem;
  }
  .about-page__section--muted {
    background-color: var(--bg-secondary);
  }
  .about-hero {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-hero--left {
    align-items: flex-start;
    text-align: left;
  }
  .about-hero__eyebrow {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bg-brand-solid);
  }
  .about-hero__title {
    margin-top: calc(var(--spacing) * 3);
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 2.75rem;
      line-height: var(--tw-leading, 3rem);
      letter-spacing: var(--tw-tracking, -0.022em);
    }
    color: var(--text-primary);
    letter-spacing: -0.02em;
    max-width: 20ch;
  }
  .about-hero__lead {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 5);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
    color: var(--text-tertiary);
    max-width: 48rem;
  }
  .about-hero--left .about-hero__lead {
    margin-inline: 0;
  }
  .about-hero__media {
    margin-top: calc(var(--spacing) * 12);
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-2xl, var(--radius-xl));
    background-color: var(--bg-tertiary);
    aspect-ratio: 16 / 9;
  }
  .about-story {
    display: grid;
    gap: calc(var(--spacing) * 10);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
    grid-template-columns: 1fr;
  }
  @media (min-width: 1024px) {
    .about-story {
      grid-template-columns: minmax(0, 22rem) 1fr;
    }
  }
  .about-story__aside {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .about-story__kicker {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bg-brand-solid);
  }
  .about-story__heading {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 1.875rem;
      line-height: var(--tw-leading, 2.25rem);
      letter-spacing: var(--tw-tracking, -0.015em);
    }
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .about-story__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    color: var(--text-tertiary);
  }
  .about-story__body p {
    margin: 0;
  }
  .about-values {
    display: grid;
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 8);
    }
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 12);
    }
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .about-values-2 {
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
  }
  @media (min-width: 768px) {
    .about-values-3 {
      grid-template-columns: repeat(3, minmax(0,1fr));
    }
  }
  .about-value {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .about-value__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    color: var(--text-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 12%, transparent);
    }
    font-size: 18px;
  }
  .about-value__title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .about-value__text {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    color: var(--text-tertiary);
  }
  .about-page__section--brand {
    background-color: var(--bg-brand-solid);
  }
  .about-page__section--brand .about-hero__eyebrow, .about-page__section--brand .about-story__kicker {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
  .about-page__section--brand .about-hero__title, .about-page__section--brand .about-story__heading, .about-page__section--brand .about-value__title {
    color: var(--text-on-brand);
  }
  .about-page__section--brand .about-hero__lead, .about-page__section--brand .about-story__body, .about-page__section--brand .about-value__text {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
  .about-page__section--brand .about-value__icon {
    color: var(--text-on-brand);
    background-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-on-brand) 16%, transparent);
    }
  }
}
@layer utilities {
  .article-head {
    max-width: 48rem;
    margin-inline: auto;
  }
  .article-head--center {
    text-align: center;
  }
  .article-kicker {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--text-link));
  }
  .article-title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }
  @media (min-width: 768px) {
    .article-title {
      font-size: 3rem;
    }
  }
  .article-lede {
    margin-top: 1rem;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .article-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }
  .article-head--center .article-meta {
    justify-content: center;
  }
  .article-meta__by {
    display: flex;
    flex-direction: column;
  }
  .article-meta__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .article-meta__sub {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .article-meta__sub time + span::before {
    content: "·";
    margin-inline: 0.4rem;
    color: var(--text-quaternary);
  }
  .article-hero {
    margin-top: 2.5rem;
    border-radius: var(--radius-2xl, 1rem);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-tertiary);
  }
  @media (min-width: 768px) {
    .article-hero {
      margin-top: 4rem;
    }
  }
  .article-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .article-prose {
    max-width: 45rem;
    margin-inline: auto;
    color: var(--text-tertiary);
    font-size: 1.125rem;
    line-height: 1.75;
  }
  .article-prose > * + * {
    margin-top: 1.5rem;
  }
  .article-prose h2 {
    margin-top: 2.5rem;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .article-prose h3 {
    margin-top: 2rem;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .article-prose a {
    color: var(--text-brand-secondary, var(--text-link));
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .article-prose ul, .article-prose ol {
    padding-inline-start: 1.5rem;
  }
  .article-prose ul {
    list-style: disc;
  }
  .article-prose ol {
    list-style: decimal;
  }
  .article-prose li + li {
    margin-top: 0.5rem;
  }
  .article-prose li::marker {
    color: var(--text-quaternary);
  }
  .article-prose strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .article-prose figure {
    margin-block: 2.5rem;
  }
  .article-prose figure img {
    width: 100%;
    border-radius: var(--radius-xl, 0.75rem);
    display: block;
    background-color: var(--bg-tertiary);
  }
  .article-prose figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    text-align: center;
  }
  .article-prose blockquote {
    border-inline-start: 3px solid var(--border-brand, var(--bg-brand-solid));
    padding-inline-start: 1.5rem;
    font-size: 1.375rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
  }
  .article-prose blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.9375rem;
    font-weight: 400;
    font-style: normal;
    color: var(--text-tertiary);
  }
  .article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 45rem;
    margin-inline: auto;
    margin-top: 2.5rem;
  }
  .article-author {
    display: flex;
    gap: 1rem;
    max-width: 45rem;
    margin-inline: auto;
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-2xl, 1rem);
    background-color: var(--bg-secondary);
  }
  .article-author__body {
    min-width: 0;
  }
  .article-author__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .article-author__role {
    font-size: 0.875rem;
    color: var(--text-brand-secondary, var(--text-link));
  }
  .article-author__bio {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
  .article-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  @media (min-width: 640px) {
    .article-related-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .article-related-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .article-card {
    display: flex;
    flex-direction: column;
  }
  .article-card__media {
    border-radius: var(--radius-xl, 0.75rem);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-tertiary);
  }
  .article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .article-card__kicker {
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--text-link));
  }
  .article-card__title {
    margin-top: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
  }
  .article-card__excerpt {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .faq-page {
    background-color: var(--bg-primary);
  }
  .faq-page__section {
    padding-block: 64px;
  }
  @media (min-width: 768px) {
    .faq-page__section {
      padding-block: 96px;
    }
  }
  .faq-page__container {
    margin-inline: auto;
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    max-width: 80rem;
  }
  .faq-page__section--muted {
    background-color: var(--bg-secondary);
  }
  .faq-page__hero {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 48rem;
  }
  .faq-page__eyebrow {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bg-brand-solid);
  }
  .faq-page__title {
    margin-top: calc(var(--spacing) * 3);
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 2.75rem;
      line-height: var(--tw-leading, 3rem);
      letter-spacing: var(--tw-tracking, -0.022em);
    }
    color: var(--text-primary);
    letter-spacing: -0.02em;
  }
  .faq-page__lead {
    margin-top: calc(var(--spacing) * 4);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
    color: var(--text-tertiary);
  }
  .faq-page__search {
    margin-top: calc(var(--spacing) * 8);
    width: 100%;
    max-width: 30rem;
  }
  .faq-page__cats {
    display: grid;
    gap: calc(var(--spacing) * 10);
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 16);
    }
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 12);
    }
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .faq-page__cats-2 {
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
  }
  .faq-cat {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .faq-cat__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-tertiary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-secondary);
  }
  .faq-page__section--brand {
    background-color: var(--bg-brand-solid);
  }
  .faq-page__section--brand .faq-page__eyebrow {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
  .faq-page__section--brand .faq-page__title {
    color: var(--text-on-brand);
  }
  .faq-page__section--brand .faq-page__lead {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
}
@layer utilities {
  .pricing-page {
    background-color: var(--bg-primary);
  }
  .pricing-page__section {
    padding-block: 64px;
  }
  @media (min-width: 768px) {
    .pricing-page__section {
      padding-block: 96px;
    }
  }
  .pricing-page__container {
    margin-inline: auto;
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    max-width: 80rem;
  }
  .pricing-page__section--muted {
    background-color: var(--bg-secondary);
  }
  .pricing-page__hero {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 48rem;
  }
  .pricing-page__eyebrow {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--bg-brand-solid);
  }
  .pricing-page__title {
    margin-top: calc(var(--spacing) * 3);
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @media (width >= 48rem) {
      font-size: 2.75rem;
      line-height: var(--tw-leading, 3rem);
      letter-spacing: var(--tw-tracking, -0.022em);
    }
    color: var(--text-primary);
    letter-spacing: -0.02em;
  }
  .pricing-page__lead {
    margin-top: calc(var(--spacing) * 4);
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
    color: var(--text-tertiary);
  }
  .pricing-page__billing {
    margin-top: calc(var(--spacing) * 8);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .pricing-page__billing-note {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .pricing-page__billing-save {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 12%, transparent);
    }
  }
  .pricing-page__compare {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 6);
    row-gap: calc(var(--spacing) * 2);
  }
  .pricing-page__compare-item {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .pricing-page__compare-item i {
    color: var(--bg-brand-solid);
  }
  .pricing-page__section--brand {
    background-color: var(--bg-brand-solid);
  }
  .pricing-page__section--brand .pricing-page__eyebrow {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
  .pricing-page__section--brand .pricing-page__title {
    color: var(--text-on-brand);
  }
  .pricing-page__section--brand .pricing-page__lead {
    color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-brand) 80%, transparent);
    }
  }
}
@layer utilities {
  .page-404 {
    --pg404-eyebrow: var(--text-link);
    --pg404-icon-brand: var(--text-link);
    --pg404-pattern: var(--border-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      --pg404-pattern: color-mix(in oklch, var(--border-secondary) 90%, transparent);
    }
    --pg404-watermark: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      --pg404-watermark: color-mix(in oklch, var(--text-primary) 5%, transparent);
    }
    --pg404-container: 80rem;
    --pg404-display: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem);
    --pg404-display-lh: 1.15;
    --pg404-lede: clamp(1.125rem, 1.02rem + 0.5vw, 1.25rem);
    display: flex;
    align-items: center;
    min-block-size: 100%;
    inline-size: 100%;
    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
  }
  .page-404--screen {
    min-block-size: 100vh;
  }
  .page-404--top {
    align-items: flex-start;
  }
  @media (min-width: 768px) {
    .page-404--top {
      align-items: center;
    }
  }
  .page-404__container {
    inline-size: 100%;
    max-inline-size: var(--pg404-container);
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 768px) {
    .page-404__container {
      padding-inline: 2rem;
    }
  }
  .page-404__layout {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  }
  .page-404__layout--split {
    align-items: center;
  }
  @media (min-width: 1024px) {
    .page-404__layout--split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 1rem + 3vw, 4rem);
    }
  }
  .page-404__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
    inline-size: 100%;
    max-inline-size: 48rem;
  }
  .page-404__content--center {
    align-items: center;
    text-align: center;
    max-inline-size: 64rem;
    margin-inline: auto;
  }
  .page-404__content--narrow {
    max-inline-size: 35rem;
  }
  .page-404__header {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  }
  .page-404__heading {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .page-404__content--center .page-404__heading {
    align-items: center;
  }
  .page-404__eyebrow {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--pg404-eyebrow);
  }
  .page-404__badge-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--text-link);
    flex: none;
  }
  .page-404__title {
    font-size: var(--pg404-display);
    line-height: var(--pg404-display-lh);
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--text-primary);
    text-wrap: balance;
  }
  .page-404__text {
    font-size: var(--pg404-lede);
    line-height: 1.5;
    color: var(--text-tertiary);
  }
  .page-404__text--constrained {
    max-inline-size: 30rem;
  }
  .page-404__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    align-self: stretch;
  }
  @media (min-width: 640px) {
    .page-404__actions {
      flex-direction: row;
      align-self: auto;
    }
  }
  .page-404__actions--md {
    align-self: stretch;
    flex-direction: column-reverse;
  }
  @media (min-width: 768px) {
    .page-404__actions--md {
      flex-direction: row;
      align-self: auto;
    }
  }
  .page-404__search {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: 100%;
    max-inline-size: 30rem;
    align-self: stretch;
  }
  @media (min-width: 768px) {
    .page-404__search {
      flex-direction: row;
      align-items: flex-start;
      align-self: auto;
    }
  }
  .page-404__content--center .page-404__search {
    margin-inline: auto;
  }
  .page-404__search .input-affix {
    flex: 1 1 auto;
    min-inline-size: 0;
  }
  .page-404__search .form-control {
    inline-size: 100%;
  }
  .page-404__links {
    list-style: none;
    margin: 0;
    padding: 0;
    inline-size: 100%;
  }
  .page-404__links--inline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .page-404__links--inline > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    text-align: left;
  }
  .page-404__linkcta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: color var(--duration-fast, 150ms) var(--ease-default, ease);
  }
  .page-404__linkcta:hover {
    color: var(--text-link-hover);
  }
  .page-404__linkcta:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .page-404__linkcta > i, .page-404__linkcta > [class*="fa-"] {
    font-size: 0.9em;
    color: currentColor;
  }
  .page-404__links--cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 640px) {
    .page-404__links--cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
  }
  @media (min-width: 768px) {
    .page-404__links--cards {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .page-404__card {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding: 1.25rem;
    text-align: left;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-xl);
  }
  @media (min-width: 768px) {
    .page-404__card {
      padding: 1.5rem;
    }
  }
  .page-404__card__icon {
    font-size: 1.5rem;
    color: var(--pg404-icon-brand);
  }
  .page-404__card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .page-404__card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .page-404__card__sub {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .page-404__links--grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem 2rem;
    row-gap: 2.5rem;
  }
  @media (min-width: 640px) {
    .page-404__links--grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .page-404__links--grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .page-404__links--grid > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-inline-size: 24rem;
    text-align: center;
  }
  .page-404__links--grid .page-404__row__body {
    align-items: center;
    text-align: center;
  }
  .page-404__links--divided {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-inline-size: 35rem;
    margin-inline: auto;
  }
  .page-404__links--divided > li {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border-secondary);
    text-align: left;
  }
  @media (min-width: 768px) {
    .page-404__links--divided > li {
      flex-direction: row;
      gap: 1.25rem;
    }
  }
  .page-404__row {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }
  @media (min-width: 768px) {
    .page-404__row {
      gap: 1.25rem;
    }
  }
  .page-404__row__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .page-404__row__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .page-404__row__sub {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .page-404__row__arrow {
    font-size: 1.5rem;
    color: var(--text-quaternary);
    flex: none;
  }
  .page-404__media {
    inline-size: 100%;
    align-self: stretch;
  }
  .page-404__figure {
    position: relative;
    block-size: 15rem;
    inline-size: 100%;
    margin: 0;
  }
  @media (min-width: 768px) {
    .page-404__figure {
      block-size: 23.75rem;
    }
  }
  @media (min-width: 1024px) {
    .page-404__figure {
      block-size: 100%;
      min-block-size: 30rem;
    }
  }
  .page-404__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
  }
  .page-404__media--flush .page-404__image {
    border-radius: 0;
  }
  @media (min-width: 1024px) {
    .page-404__media--bleed .page-404__figure {
      block-size: 100%;
    }
  }
  .page-404__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: inherit;
    border-radius: var(--radius-xl);
    color: var(--text-quaternary);
    font-size: 2rem;
    background-image: radial-gradient(120% 120% at 15% 15%, var(--text-link) 0%, transparent 55%), radial-gradient(120% 120% at 85% 85%, var(--bg-tertiary) 0%, transparent 60%), linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(120% 120% at 15% 15%, color-mix(in oklch, var(--text-link) 22%, transparent) 0%, transparent 55%), radial-gradient(120% 120% at 85% 85%, color-mix(in oklch, var(--bg-tertiary) 90%, transparent) 0%, transparent 60%), linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    }
  }
  .page-404__media--flush .page-404__placeholder {
    border-radius: 0;
  }
  .page-404__illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
  }
  .page-404__watermark {
    color: var(--pg404-watermark);
    inline-size: 100%;
    block-size: auto;
    max-inline-size: 55rem;
  }
  .page-404__watermark--behind {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
  }
  .page-404__stack {
    position: relative;
  }
  .page-404__stack > * {
    position: relative;
    z-index: 1;
  }
  .page-404__stack > .page-404__watermark--behind {
    z-index: 0;
  }
  .page-404__mockup {
    max-inline-size: 100%;
  }
  @media (min-width: 1024px) {
    .page-404__media--mockup {
      margin-inline-end: -25rem;
    }
  }
  .page-404__mockup__bezel {
    border-radius: 9.03px;
    background-color: var(--bg-primary);
    padding: 0.9px;
    box-shadow: var(--shadow-lg);
    box-shadow: inset 0 0 0 0.56px var(--border-primary), var(--shadow-lg);
  }
  .page-404__mockup__frame {
    border-radius: 7.9px;
    background-color: var(--bg-primary);
    padding: 2px;
  }
  .page-404__mockup__screen {
    position: relative;
    overflow: hidden;
    border-radius: 6.77px;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 0.56px var(--border-secondary);
  }
  @media (min-width: 768px) {
    .page-404__mockup__bezel {
      border-radius: 26.95px;
      padding: 3.5px;
      box-shadow: inset 0 0 0 1.68px var(--border-primary), var(--shadow-lg);
    }
    .page-404__mockup__frame {
      border-radius: 23.58px;
      padding: 4px;
    }
    .page-404__mockup__screen {
      border-radius: 20.21px;
      box-shadow: inset 0 0 0 1.68px var(--border-secondary);
    }
  }
  .page-404__mockup__screen .page-404__placeholder {
    min-block-size: 14rem;
    border-radius: 0;
  }
  @media (min-width: 1024px) {
    .page-404__mockup__screen .page-404__placeholder {
      min-block-size: 22rem;
    }
  }
  .page-404__mockup__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
  @media (min-width: 1024px) {
    .page-404__mockup__img {
      max-block-size: 42.125rem;
      max-inline-size: none;
    }
  }
  [data-theme*="dark"] .page-404__mockup__img--light, .page-404 .page-404__mockup__img--dark {
    display: none;
  }
  [data-theme*="dark"] .page-404__mockup__img--dark {
    display: block;
  }
  .page-404__motif {
    position: relative;
    inline-size: max-content;
    display: inline-flex;
  }
  .page-404__content--center .page-404__motif {
    align-self: center;
  }
  .page-404__motif > .icon-badge {
    position: relative;
    z-index: 1;
  }
  .page-404__pattern {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    inline-size: 20rem;
    block-size: 20rem;
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle, #000 0%, transparent 70%);
  }
  @media (min-width: 768px) {
    .page-404__pattern {
      inline-size: 30rem;
      block-size: 30rem;
    }
  }
  .page-404__pattern--grid {
    background-image: linear-gradient(to right, var(--pg404-pattern) 1px, transparent 1px), linear-gradient(to bottom, var(--pg404-pattern) 1px, transparent 1px);
    background-size: 2rem 2rem;
  }
  .page-404__pattern--circle {
    background-image: repeating-radial-gradient( circle at center, var(--pg404-pattern) 0, var(--pg404-pattern) 1px, transparent 1px, transparent 3rem );
  }
  @media (prefers-reduced-motion: reduce) {
    .page-404__linkcta {
      transition: none;
    }
  }
}
@layer utilities {
  .cal-page {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: stretch;
    background-color: var(--bg-primary);
  }
  @media (max-width: 64rem) {
    .cal-page {
      grid-template-columns: minmax(0, 1fr);
    }
    .cal-page__rail {
      display: none;
    }
  }
  .cal-page__rail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    border-right: 1px solid var(--border-secondary);
    background-color: var(--bg-primary);
  }
  .cal-page__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .cal-page__toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .cal-page__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .cal-page__nav {
    display: inline-flex;
    gap: 0.125rem;
  }
  .cal-page__body {
    flex: 1;
    min-height: 0;
    padding: 1.25rem;
    overflow: auto;
  }
  .cal-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .cal-list__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
  }
  .cal-list__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .cal-list__item:hover {
    background-color: var(--bg-secondary);
  }
  .cal-list__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }
  .cal-list__dot--primary {
    background-color: var(--bg-brand-solid);
  }
  .cal-list__dot--success {
    background-color: var(--bg-success-solid);
  }
  .cal-list__dot--warning {
    background-color: var(--bg-warning-solid);
  }
  .cal-list__dot--info {
    background-color: var(--bg-info-solid);
  }
  .cal-list__dot--danger {
    background-color: var(--bg-danger-solid);
  }
  .cal-mini__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  .cal-mini__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .cal-mini__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
  }
  .cal-mini__dow {
    text-align: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-quaternary);
    padding-block: 0.25rem;
  }
  .cal-mini__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: 0.75rem;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
  }
  .cal-mini__cell:hover {
    background-color: var(--bg-secondary);
  }
  .cal-mini__cell--outside {
    color: var(--text-quaternary);
  }
  .cal-mini__cell--today {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    font-weight: 700;
  }
  .cal-month {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .cal-month__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .cal-month__dow > span {
    padding: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-align: right;
  }
  .cal-month__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(6rem, 1fr);
  }
  .cal-month__cell {
    padding: 0.375rem 0.5rem;
    border-right: 1px solid var(--border-divider);
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  .cal-month__cell:nth-child(7n) {
    border-right: 0;
  }
  .cal-month__date {
    align-self: flex-end;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .cal-month__cell--outside {
    background-color: var(--bg-secondary);
  }
  .cal-month__cell--outside .cal-month__date {
    color: var(--text-quaternary);
  }
  .cal-month__cell--today .cal-month__date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    font-weight: 700;
  }
  .cal-chip {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cal-chip__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }
  .cal-chip__dot--primary {
    background-color: var(--bg-brand-solid);
  }
  .cal-chip__dot--success {
    background-color: var(--bg-success-solid);
  }
  .cal-chip__dot--warning {
    background-color: var(--bg-warning-solid);
  }
  .cal-chip__dot--danger {
    background-color: var(--bg-danger-solid);
  }
  .cal-chip__more {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    padding-inline: 0.375rem;
  }
}
@layer utilities {
  .store-layout {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
  }
  @media (max-width: 720px) {
    .store-layout {
      grid-template-columns: 1fr;
    }
    .store-filters {
      display: none;
    }
  }
  .store-filters {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .store-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .store-filter-group + .store-filter-group {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-secondary);
  }
  .store-filter-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .store-filter-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .store-filter-opt__count {
    margin-inline-start: auto;
    color: var(--text-quaternary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .store-swatches {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .store-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .store-price .form-control {
    padding-inline: 0.625rem;
  }
  .store-price__dash {
    color: var(--text-quaternary);
  }
  .store-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
  }
  .store-toolbar__count {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .store-toolbar__count strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .store-toolbar__end {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
  }
  .store-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .store-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl, 12px);
    background-image: linear-gradient(135deg, var(--bg-brand-solid), var(--bg-brand-solid-hover, var(--bg-brand-solid)));
    color: var(--text-on-brand);
  }
  .store-hero__title {
    font-size: 1.125rem;
    font-weight: 700;
  }
  .store-hero__sub {
    font-size: 0.8125rem;
    opacity: 0.85;
  }
  .store-hero__pill {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-on-brand) 18%, transparent);
    }
    font-size: 0.75rem;
    font-weight: 600;
  }
}
@layer utilities {
  .analytics-kpis {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
  .analytics-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
  .analytics-split {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  @media (max-width: 860px) {
    .analytics-grid, .analytics-split {
      grid-template-columns: 1fr;
    }
  }
  .analytics-source {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-secondary);
  }
  .analytics-source:last-child {
    border-bottom: 0;
  }
  .analytics-source__label {
    flex: 0 0 auto;
    width: 6.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .analytics-source__label i {
    color: var(--text-tertiary);
    width: 1rem;
    text-align: center;
  }
  .analytics-source__bar {
    flex: 1 1 auto;
    height: 0.5rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .analytics-source__fill {
    height: 100%;
    border-radius: inherit;
    background-color: var(--bg-brand-solid);
  }
  .analytics-source__val {
    flex: 0 0 auto;
    min-width: 3.25rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .analytics-source__delta {
    flex: 0 0 auto;
    min-width: 3rem;
    text-align: end;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .analytics-source__delta--up {
    color: var(--text-success);
  }
  .analytics-source__delta--down {
    color: var(--text-danger);
  }
  .analytics-datehint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .help-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 3rem 1.25rem 2.5rem;
    background-image: linear-gradient(180deg, var(--bg-secondary-subtle, var(--bg-secondary)), transparent);
  }
  .help-hero__eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-brand, var(--bg-brand-solid));
  }
  .help-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
  }
  .help-hero__sub {
    font-size: 1.0625rem;
    color: var(--text-tertiary);
    max-width: 34rem;
  }
  .help-search {
    width: 100%;
    max-width: 34rem;
    margin-top: 0.5rem;
  }
  .help-search .search-field {
    width: 100%;
    height: 3rem;
  }
  .help-search .search-field__input {
    font-size: 1rem;
  }
  .help-popular {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .help-popular__label {
    color: var(--text-quaternary);
  }
  .help-cats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  }
  .help-cat {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.25rem;
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    text-decoration: none;
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-out, ease), transform var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .help-cat:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary);
    transform: translateY(-2px);
  }
  .help-cat:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .help-cat__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .help-cat__desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-tertiary);
  }
  .help-cat__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-brand, var(--bg-brand-solid));
    margin-top: auto;
  }
  .help-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
  }
  .help-articles {
    display: grid;
    gap: 0.5rem 2rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 720px) {
    .help-articles {
      grid-template-columns: 1fr 1fr;
    }
  }
  .help-article {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid var(--border-secondary);
    text-decoration: none;
    color: inherit;
  }
  .help-article:hover .help-article__title {
    color: var(--text-brand, var(--bg-brand-solid));
  }
  .help-article__icon {
    flex: 0 0 auto;
    color: var(--text-quaternary);
    width: 1.25rem;
    text-align: center;
  }
  .help-article__body {
    min-width: 0;
    flex: 1 1 auto;
  }
  .help-article__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .help-article__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .help-article__arrow {
    flex: 0 0 auto;
    color: var(--text-quaternary);
  }
  .help-support {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    padding: 1.75rem;
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .help-support__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .help-support__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .help-support__desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .status-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-2xl, 16px);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .status-banner--ok {
    background-color: var(--bg-success-subtle);
  }
  .status-banner--warn {
    background-color: var(--bg-warning-subtle);
  }
  .status-banner--down {
    background-color: var(--bg-danger-subtle);
  }
  .status-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full, 999px);
    flex: 0 0 auto;
    font-size: 1.25rem;
  }
  .status-banner--ok .status-banner__icon {
    background-color: var(--bg-success-solid);
    color: var(--text-on-brand);
  }
  .status-banner--warn .status-banner__icon {
    background-color: var(--bg-warning-solid);
    color: var(--text-on-brand);
  }
  .status-banner--down .status-banner__icon {
    background-color: var(--bg-danger-solid);
    color: var(--text-on-brand);
  }
  .status-banner__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .status-banner__sub {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .status-banner__end {
    margin-inline-start: auto;
  }
  .status-group {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    overflow: hidden;
  }
  .status-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .status-group__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .status-group__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .status-row {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .status-row:last-child {
    border-bottom: 0;
  }
  .status-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
  }
  .status-row__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .status-row__desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-top: 0.125rem;
  }
  .status-row__state {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .status-row__state--ok {
    color: var(--text-success);
  }
  .status-row__state--warn {
    color: var(--text-warning);
  }
  .status-row__state--down {
    color: var(--text-danger);
  }
  .status-row__state--maint {
    color: var(--text-tertiary);
  }
  .status-uptime {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .status-uptime__bars {
    display: flex;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .status-uptime__seg {
    flex: 1 1 0;
    height: 1.75rem;
    border-radius: 2px;
    background-color: var(--bg-success-solid);
  }
  .status-uptime__seg--partial {
    background-color: var(--bg-warning-solid);
  }
  .status-uptime__seg--down {
    background-color: var(--bg-danger-solid);
  }
  .status-uptime__seg--maint {
    background-color: var(--bg-quaternary-solid, var(--bg-tertiary));
  }
  .status-uptime__pct {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 4rem;
    text-align: end;
  }
  .status-uptime__scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--text-quaternary);
    margin-top: 0.375rem;
  }
  .status-incidents {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .status-incident-day__date {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-secondary);
    margin-bottom: 0.875rem;
  }
  .status-incident {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-bottom: 1rem;
  }
  .status-incident__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .status-update {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.875rem;
  }
  .status-update__stage {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .status-update__stage--resolved {
    color: var(--text-success);
  }
  .status-update__time {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    font-variant-numeric: tabular-nums;
  }
  .status-update__body {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .status-empty {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
    padding: 1rem 0;
  }
  .status-empty i {
    color: var(--text-success);
  }
}
@layer utilities {
  .files-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .files-crumb {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .files-crumb a {
    color: inherit;
    text-decoration: none;
  }
  .files-crumb a:hover {
    color: var(--text-secondary);
  }
  .files-crumb__here {
    color: var(--text-primary);
    font-weight: 600;
  }
  .files-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .files-view {
    display: inline-flex;
    border-radius: var(--radius-lg, 8px);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    overflow: hidden;
  }
  .files-view__btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
    cursor: pointer;
  }
  .files-view__btn:hover {
    background-color: var(--bg-primary-hover);
    color: var(--text-secondary);
  }
  .files-view__btn.is-active {
    background-color: var(--bg-primary-subtle);
    color: var(--text-primary);
  }
  .files-view__btn + .files-view__btn {
    box-shadow: inset 1px 0 0 var(--border-primary);
  }
  .files-folders {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  }
  .folder-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    text-decoration: none;
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .folder-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .folder-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .folder-card__icon {
    flex: 0 0 auto;
    font-size: 1.375rem;
    color: var(--text-brand, var(--bg-brand-solid));
    width: 2rem;
    text-align: center;
  }
  .folder-card__body {
    min-width: 0;
  }
  .folder-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .folder-card__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .file-name {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
  }
  .file-name__icon {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
  }
  .file-name__icon--doc {
    background-color: var(--bg-info-subtle, var(--bg-secondary));
    color: var(--text-info, var(--text-secondary));
  }
  .file-name__icon--sheet {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .file-name__icon--img {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .file-name__icon--pdf {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .file-name__icon--zip {
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
  }
  .file-name__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .file-owner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .files-storage {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .files-storage__icon {
    flex: 0 0 auto;
  }
  .files-storage__body {
    flex: 1 1 14rem;
    min-width: 0;
  }
  .files-storage__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
  }
  .files-storage__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .files-storage__val {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .files-storage__track {
    height: 0.5rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .files-storage__fill {
    height: 100%;
    border-radius: inherit;
    background-color: var(--bg-brand-solid);
  }
}
@layer utilities {
  .notif-wrap {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
  }
  .notif-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .notif-group + .notif-group {
    margin-top: 1.75rem;
  }
  .notif-group__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
    margin-bottom: 0.5rem;
  }
  .notif-list {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    overflow: hidden;
  }
  .notif-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.875rem;
    align-items: start;
    padding: 0.9375rem 1.125rem;
    border-bottom: 1px solid var(--border-secondary);
    position: relative;
    transition: background-color var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .notif-item:last-child {
    border-bottom: 0;
  }
  .notif-item:hover {
    background-color: var(--bg-primary-hover);
  }
  .notif-item.is-unread {
    background-color: var(--bg-primary-subtle);
  }
  .notif-item.is-unread::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 3px;
    background-color: var(--bg-brand-solid);
  }
  .notif-item__media {
    position: relative;
    flex: 0 0 auto;
  }
  .notif-item__type {
    position: absolute;
    inset-block-end: -0.25rem;
    inset-inline-end: -0.25rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-full, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    box-shadow: 0 0 0 2px var(--bg-primary);
  }
  .notif-item__type--info {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .notif-item__type--success {
    background-color: var(--bg-success-solid);
    color: var(--text-on-brand);
  }
  .notif-item__type--warning {
    background-color: var(--bg-warning-solid);
    color: var(--text-on-brand);
  }
  .notif-item__type--mention {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .notif-item__tile {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    flex: 0 0 auto;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .notif-item__body {
    min-width: 0;
  }
  .notif-item__text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .notif-item__text strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .notif-item__time {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    margin-top: 0.1875rem;
  }
  .notif-item__actions {
    display: inline-flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
  }
  .notif-item__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  .notif-item__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-brand-solid);
    flex: 0 0 auto;
    margin-top: 0.375rem;
  }
  .notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-tertiary);
  }
  .notif-empty__icon {
    font-size: 1.75rem;
    color: var(--text-quaternary);
  }
  @media (max-width: 560px) {
    .notif-item {
      grid-template-columns: auto 1fr;
    }
    .notif-item__end {
      grid-column: 2;
      flex-direction: row;
      align-items: center;
    }
  }
}
@layer utilities {
  .search-layout {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: start;
  }
  @media (max-width: 720px) {
    .search-layout {
      grid-template-columns: 1fr;
    }
    .search-filters {
      display: none;
    }
  }
  .search-filters {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .search-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .search-filter-group + .search-filter-group {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-secondary);
  }
  .search-filter-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .search-filter-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .search-filter-opt__count {
    margin-inline-start: auto;
    color: var(--text-quaternary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .search-summary {
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .search-summary strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .search-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-block: 1rem 1.25rem;
  }
  .sr-list {
    display: flex;
    flex-direction: column;
  }
  .sr-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    align-items: start;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--border-secondary);
    text-decoration: none;
    color: inherit;
  }
  .sr-item:hover .sr-item__title {
    color: var(--text-brand, var(--bg-brand-solid));
  }
  .sr-item__media {
    flex: 0 0 auto;
  }
  .sr-item__tile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 auto;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .sr-item__tile--file {
    background-color: var(--bg-info-subtle, var(--bg-secondary));
    color: var(--text-info, var(--text-secondary));
  }
  .sr-item__tile--page {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .sr-item__tile--message {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .sr-item__body {
    min-width: 0;
  }
  .sr-item__crumb {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.125rem;
  }
  .sr-item__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .sr-item__title mark {
    background-color: var(--bg-brand-subtle, var(--bg-primary-subtle));
    color: inherit;
    border-radius: var(--radius-xs, 3px);
    padding: 0 0.125rem;
  }
  .sr-item__snippet {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sr-item__snippet mark {
    background-color: var(--bg-brand-subtle, var(--bg-primary-subtle));
    color: var(--text-secondary);
    border-radius: var(--radius-xs, 3px);
    padding: 0 0.125rem;
  }
  .sr-item__meta {
    font-size: 0.75rem;
    color: var(--text-quaternary);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.375rem;
    flex-wrap: wrap;
  }
  .sr-item__meta-person {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .search-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding-block: 2rem 0.5rem;
  }
}
@layer utilities {
  .changelog {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
  }
  .cl-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block: 2.5rem 1.5rem;
  }
  .cl-head__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
  }
  .cl-head__sub {
    font-size: 1.0625rem;
    color: var(--text-tertiary);
    max-width: 36rem;
  }
  .cl-head__actions {
    display: inline-flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }
  .cl-entry {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    padding-block: 2rem;
    border-top: 1px solid var(--border-secondary);
  }
  @media (min-width: 800px) {
    .cl-entry {
      grid-template-columns: 12rem minmax(0, 1fr);
      gap: 2.5rem;
    }
  }
  .cl-entry__aside {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  @media (min-width: 800px) {
    .cl-entry__aside {
      position: sticky;
      top: 1.5rem;
      align-self: start;
    }
  }
  .cl-entry__date {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .cl-entry__ver {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .cl-entry__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .cl-entry__title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0;
  }
  .cl-entry__lede {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
  }
  .cl-media {
    aspect-ratio: 16 / 8;
    border-radius: var(--radius-xl, 12px);
    overflow: hidden;
    background-image: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
    font-size: 2rem;
  }
  .cl-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cl-changes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cl-change {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-secondary);
  }
  .cl-change__tag {
    flex: 0 0 auto;
    justify-self: start;
    align-self: start;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 999px);
    white-space: nowrap;
  }
  .cl-change__tag--new {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .cl-change__tag--improved {
    background-color: var(--bg-brand-subtle, var(--bg-primary-subtle));
    color: var(--text-brand, var(--bg-brand-solid));
  }
  .cl-change__tag--fixed {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .cl-change__text strong {
    color: var(--text-primary);
    font-weight: 600;
  }
}
@layer utilities {
  .maint {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .maint__body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
  }
  .maint__inner {
    width: 100%;
    max-width: 34rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .maint__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-brand-subtle, var(--bg-primary-subtle));
    color: var(--text-brand, var(--bg-brand-solid));
    font-size: 1.5rem;
  }
  .maint__eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-brand, var(--bg-brand-solid));
  }
  .maint__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
  }
  .maint__sub {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-tertiary);
    max-width: 32rem;
  }
  .maint__countdown {
    display: inline-flex;
    gap: 0.625rem;
    margin-block: 0.5rem;
  }
  .maint-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 4rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .maint-unit__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .maint-unit__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-quaternary);
  }
  .maint__form {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 24rem;
    margin-top: 0.5rem;
  }
  .maint__form .form-control {
    flex: 1 1 auto;
  }
  @media (max-width: 480px) {
    .maint__form {
      flex-direction: column;
    }
  }
  .maint__note {
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .maint__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem;
    border-top: 1px solid var(--border-secondary);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .maint__foot a {
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .maint__foot a:hover {
    color: var(--text-primary);
  }
  .maint__status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-warning-solid);
    display: inline-block;
  }
}
@layer utilities {
  .article {
    width: 100%;
  }
  .article-container {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }
  .article-container--wide {
    max-width: 72rem;
  }
  .article-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 2.5rem 1.5rem;
  }
  .article-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-brand-secondary, var(--text-brand, var(--bg-brand-solid)));
  }
  .article-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
  }
  .article-hero__lede {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-tertiary);
    max-width: 40rem;
  }
  .article-byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .article-byline__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .article-byline__meta {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .article-byline__sep {
    color: var(--text-quaternary);
  }
  .article-cover {
    aspect-ratio: 16 / 8;
    border-radius: var(--radius-2xl, 16px);
    overflow: hidden;
    background-image: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
    font-size: 2.5rem;
    margin-block: 0.5rem 2rem;
  }
  .article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .article-prose {
    color: var(--text-secondary);
    font-size: 1.0625rem;
    line-height: 1.75;
  }
  .article-prose > * + * {
    margin-top: 1.25rem;
  }
  .article-prose h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2.5rem;
    letter-spacing: -0.01em;
  }
  .article-prose h3 {
    font-size: 1.1875rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2rem;
  }
  .article-prose p {
    margin: 0;
  }
  .article-prose a {
    color: var(--text-brand, var(--bg-brand-solid));
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .article-prose ul, .article-prose ol {
    margin: 0;
    padding-inline-start: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .article-prose li {
    margin: 0;
  }
  .article-prose ul li {
    list-style: disc;
  }
  .article-prose ol li {
    list-style: decimal;
  }
  .article-prose img {
    width: 100%;
    border-radius: var(--radius-xl, 12px);
  }
  .article-prose figure {
    margin: 0;
  }
  .article-prose figcaption {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 0.5rem;
  }
  .article-prose code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.9em;
    background-color: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary);
  }
  .article-prose blockquote {
    margin: 0;
    padding: 0.5rem 0 0.5rem 1.25rem;
    border-inline-start: 3px solid var(--border-brand, var(--bg-brand-solid));
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-primary);
  }
  .article-prose hr {
    border: 0;
    border-top: 1px solid var(--border-secondary);
    margin-block: 2rem;
  }
  .article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
  }
  .article-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-secondary);
  }
  .article-share {
    display: inline-flex;
    gap: 0.5rem;
  }
  .article-author {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    margin-top: 2.5rem;
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .article-author__body {
    min-width: 0;
  }
  .article-author__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .article-author__role {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .article-author__bio {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-top: 0.5rem;
  }
  .article-related {
    padding-block: 2.5rem;
    border-top: 1px solid var(--border-secondary);
    margin-top: 3rem;
  }
  .article-related__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
  }
  .article-related__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  }
  .post-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .post-card__media {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-xl, 12px);
    overflow: hidden;
    background-image: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
    font-size: 1.5rem;
  }
  .post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .post-card__cat {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-brand, var(--bg-brand-solid));
  }
  .post-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
  }
  .post-card__title a {
    color: inherit;
    text-decoration: none;
  }
  .post-card__title a:hover {
    text-decoration: underline;
  }
  .post-card__desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .post-card__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .article-newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    margin-block: 1rem 3rem;
  }
  .article-newsletter__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .article-newsletter__sub {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .article-newsletter__form {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
  }
  .article-newsletter__form .form-control {
    min-width: 14rem;
  }
  @media (max-width: 640px) {
    .article-newsletter__form {
      width: 100%;
    }
    .article-newsletter__form .form-control {
      min-width: 0;
      flex: 1 1 auto;
    }
  }
}
@layer utilities {
  .app-crm__metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  @media (min-width: 1024px) {
    .app-crm__metrics {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .app-inbox {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    min-height: 0;
  }
  @media (min-width: 768px) {
    .app-inbox {
      grid-template-columns: 16rem 1fr;
    }
  }
  @media (min-width: 1200px) {
    .app-inbox {
      grid-template-columns: 15rem minmax(20rem, 24rem) 1fr;
    }
  }
  .app-inbox__folders {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing);
  }
  .app-inbox__folder {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    text-align: left;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-md, 0.375rem);
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .app-inbox__folder:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .app-inbox__folder:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .app-inbox__folder.is-active {
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-primary);
    font-weight: 600;
  }
  .app-inbox__folder-icon {
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    text-align: center;
    color: var(--text-quaternary);
  }
  .app-inbox__folder.is-active .app-inbox__folder-icon {
    color: var(--text-icon-brand, var(--text-secondary));
  }
  .app-inbox__folder-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-inbox__folder-count {
    flex-shrink: 0;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.6875rem;
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
    color: var(--text-tertiary);
  }
  .app-inbox__folder.is-active .app-inbox__folder-count {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .app-inbox__list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .app-inbox__list-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .app-inbox__msg {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .app-inbox__msg:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .app-inbox__msg:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .app-inbox__msg.is-active {
    background-color: var(--bg-secondary, var(--bg-tertiary));
  }
  .app-inbox__msg.is-unread {
    position: relative;
  }
  .app-inbox__msg.is-unread::before {
    content: "";
    position: absolute;
    left: 0.375rem;
    top: 1.125rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--bg-brand-solid);
  }
  .app-inbox__msg-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
  }
  .app-inbox__msg-top {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .app-inbox__msg-from {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
    color: var(--text-primary);
  }
  .app-inbox__msg-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .app-inbox__msg-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .app-inbox__msg-preview {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .app-inbox__reader {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .app-inbox__reader-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .app-inbox__reader-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
  }
  .app-inbox__reader-actions {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  @media (max-width: 1199px) {
    .app-inbox__reader {
      display: none;
    }
  }
  .app-projects__board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: start;
  }
  @media (max-width: 767px) {
    .app-projects__board {
      grid-auto-columns: 85%;
    }
  }
  .app-projects__col {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: 0.625rem;
  }
  .app-projects__col-head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding: 0 0.25rem;
  }
  .app-projects__col-title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
    color: var(--text-primary);
  }
  .app-projects__col-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    min-width: 1.375rem;
    height: 1.375rem;
    padding-inline: 0.375rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
    color: var(--text-tertiary);
  }
  .app-projects__col-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full, 9999px);
  }
  .app-projects__col-dot--todo {
    background-color: var(--text-quaternary);
  }
  .app-projects__col-dot--progress {
    background-color: var(--text-info, var(--text-brand-secondary));
  }
  .app-projects__col-dot--review {
    background-color: var(--text-warning);
  }
  .app-projects__col-dot--done {
    background-color: var(--text-success);
  }
  .app-projects__card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    flex-direction: column;
    gap: calc(var(--spacing) * 2.5);
    text-align: left;
    padding: 0.875rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .app-projects__card:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-sm);
  }
  .app-projects__card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .app-projects__card-top {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .app-projects__card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .app-projects__card-desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .app-projects__card-foot {
    margin-top: calc(var(--spacing) * 0.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .app-projects__card-meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .app-projects__card-meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  @media (prefers-reduced-motion: reduce) {
    .app-inbox__folder, .app-inbox__msg, .app-projects__card {
      transition: none;
    }
  }
}
@layer utilities {
  :root {
    --id-row-gap: 1rem;
    --id-surface: var(--bg-primary);
    --id-surface-alt: var(--bg-secondary);
    --id-surface-sel: var(--bg-primary-subtle);
    --id-border: var(--border-secondary);
    --id-divider: var(--border-divider);
    --id-title: var(--text-primary);
    --id-meta: var(--text-tertiary);
    --id-accent: var(--bg-brand-solid);
    --id-on-accent: var(--text-on-brand);
    --id-focus: var(--border-focus);
  }
  .id-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    border: 1px solid var(--id-border);
    border-radius: var(--radius-xl);
    background-color: var(--id-surface);
    overflow: hidden;
  }
  .id-list--flush {
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }
  .id-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--id-row-gap);
    padding: 1rem 1.25rem;
  }
  .id-list > .id-row + .id-row {
    border-top: 1px solid var(--id-divider);
  }
  .id-row--interactive {
    transition: background-color var(--duration-fast, 100ms) var(--ease-linear, linear);
    cursor: pointer;
  }
  .id-row--interactive:hover {
    background-color: var(--id-surface-alt);
  }
  .id-row.is-current {
    background-color: var(--id-surface-sel);
  }
  .id-row__media {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .id-row__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
  }
  .id-row__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--id-title);
  }
  .id-row__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    row-gap: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--id-meta);
  }
  .id-row__meta .id-row__dot {
    color: var(--text-quaternary);
  }
  .id-row__trailing {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0.125rem;
  }
  .id-row__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
  }
  @media (max-width: 40rem) {
    .id-row {
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    .id-row__trailing {
      align-items: flex-start;
      text-align: left;
    }
    .id-row__actions {
      width: 100%;
      justify-content: flex-end;
    }
  }
  .secret-field {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border: 1px solid var(--id-border);
    border-radius: var(--radius-lg);
    background-color: var(--id-surface);
    box-shadow: var(--shadow-xs);
  }
  .secret-field__value {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    font-family: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    color: var(--text-primary);
    letter-spacing: 0.02em;
  }
  .secret-field.is-masked .secret-field__value {
    color: var(--text-secondary);
  }
  .secret-field__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
  }
  .secret-field__reveal[aria-pressed="true"] {
    color: var(--text-brand, var(--text-primary));
  }
  .recovery-codes {
    display: grid;
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1rem;
    border: 1px dashed var(--id-border);
    border-radius: var(--radius-lg);
    background-color: var(--id-surface-alt);
  }
  @media (max-width: 30rem) {
    .recovery-codes {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .recovery-code {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    font-family: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    letter-spacing: 0.08em;
    color: var(--text-primary);
    background-color: var(--id-surface);
    border: 1px solid var(--border-divider);
  }
  .recovery-code.is-used {
    color: var(--text-quaternary);
    text-decoration: line-through;
    background-color: transparent;
    border-style: dashed;
  }
  .security-score {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .security-score__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .security-score__value {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .security-score__grade {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .security-score__track {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-full);
    height: 0.5rem;
    background-color: var(--bg-tertiary);
  }
  .security-score__bar {
    position: absolute;
    inset-block: 0;
    left: 0;
    border-radius: var(--radius-full);
    width: calc(var(--security-score, 0) * 1%);
    background-color: var(--bg-warning-solid);
    transition: width var(--duration-slow, 500ms) var(--ease-out, ease-out);
  }
  .security-score[data-grade="weak"] .security-score__bar {
    background-color: var(--bg-danger-solid);
  }
  .security-score[data-grade="fair"] .security-score__bar {
    background-color: var(--bg-warning-solid);
  }
  .security-score[data-grade="strong"] .security-score__bar {
    background-color: var(--bg-success-solid);
  }
  .security-score[data-grade="weak"] .security-score__grade {
    color: var(--text-danger);
  }
  .security-score[data-grade="fair"] .security-score__grade {
    color: var(--text-warning);
  }
  .security-score[data-grade="strong"] .security-score__grade {
    color: var(--text-success);
  }
  @media (prefers-reduced-motion: reduce) {
    .security-score__bar {
      transition: none;
    }
  }
  .security-checklist {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .security-checklist__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
  }
  .security-checklist__item + .security-checklist__item {
    border-top: 1px solid var(--id-divider);
  }
  .security-checklist__mark {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-quaternary);
    background-color: var(--bg-tertiary);
  }
  .security-checklist__item.is-done .security-checklist__mark {
    color: var(--text-on-brand);
    background-color: var(--bg-success-solid);
  }
  .security-checklist__body {
    min-width: 0;
    flex: 1;
  }
  .security-checklist__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .security-checklist__item.is-done .security-checklist__title {
    color: var(--text-secondary);
  }
  .security-checklist__help {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    padding: 0.125rem 0.625rem 0.125rem 0.5rem;
  }
  .trust-badge__dot {
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    width: 0.5rem;
    height: 0.5rem;
  }
  .trust-badge--verified {
    color: var(--text-success);
    background-color: var(--bg-success-subtle);
  }
  .trust-badge--verified .trust-badge__dot {
    background-color: var(--bg-success-solid);
  }
  .trust-badge--unverified {
    color: var(--text-warning);
    background-color: var(--bg-warning-subtle);
  }
  .trust-badge--unverified .trust-badge__dot {
    background-color: var(--bg-warning-solid);
  }
  .trust-badge--at-risk {
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
  }
  .trust-badge--at-risk .trust-badge__dot {
    background-color: var(--bg-danger-solid);
  }
  .trust-badge--neutral {
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
  }
  .trust-badge--neutral .trust-badge__dot {
    background-color: var(--text-quaternary);
  }
  .auth-divider {
    margin-block: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    color: var(--text-tertiary);
    font-size: 0.875rem;
  }
  .auth-divider::before, .auth-divider::after {
    flex: 1;
    content: "";
    height: 1px;
    background-color: var(--border-divider);
  }
  .auth-aside {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .id-prompt {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    text-align: center;
  }
  .id-prompt__device {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 5rem;
    height: 5rem;
    font-size: 1.75rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .id-prompt__device::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 0 var(--border-focus);
    animation: id-prompt-pulse 2s var(--ease-out, ease-out) infinite;
  }
  @keyframes id-prompt-pulse {
    0% {
      box-shadow: 0 0 0 0 var(--bg-primary-subtle);
    }
    70% {
      box-shadow: 0 0 0 0.75rem transparent;
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .id-prompt__device::after {
      animation: none;
    }
  }
  .perm-matrix-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--id-border);
    border-radius: var(--radius-xl);
  }
  .perm-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    min-width: 40rem;
  }
  .perm-matrix thead th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--id-divider);
  }
  .perm-matrix thead th:first-child, .perm-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 10;
    text-align: left;
    background-color: var(--bg-secondary);
  }
  .perm-matrix tbody th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    background-color: var(--id-surface);
    border-bottom: 1px solid var(--id-divider);
  }
  .perm-matrix__group th {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
  }
  .perm-matrix tbody td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
    background-color: var(--id-surface);
    border-bottom: 1px solid var(--id-divider);
  }
  .perm-matrix tbody tr:hover th, .perm-matrix tbody tr:hover td {
    background-color: var(--bg-secondary);
  }
  .perm-matrix__meta {
    display: block;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
  }
  .role-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--id-border);
    background-color: var(--id-surface);
  }
  .role-card__swatch {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    width: 2.25rem;
    height: 2.25rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
  }
  .audit-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: 0.875rem 1rem 0.875rem 0.75rem;
    border-left: 3px solid var(--border-divider);
  }
  .id-list > .audit-row + .audit-row {
    border-top: 1px solid var(--id-divider);
  }
  .audit-row[data-severity="info"] {
    border-left-color: var(--bg-info-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .audit-row[data-severity="success"] {
    border-left-color: var(--bg-success-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .audit-row[data-severity="warning"] {
    border-left-color: var(--bg-warning-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .audit-row[data-severity="critical"] {
    border-left-color: var(--bg-danger-solid);
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .audit-row__icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 2rem;
    height: 2rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
  }
  .audit-row[data-severity="warning"] .audit-row__icon {
    color: var(--text-warning);
    background-color: var(--bg-warning-subtle);
  }
  .audit-row[data-severity="critical"] .audit-row__icon {
    color: var(--text-danger);
    background-color: var(--bg-danger-subtle);
  }
  .audit-row[data-severity="success"] .audit-row__icon {
    color: var(--text-success);
    background-color: var(--bg-success-subtle);
  }
  .audit-row__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
  }
  .audit-row__summary {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
  }
  .audit-row__summary strong {
    font-weight: 600;
  }
  .audit-row__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    row-gap: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .audit-row__meta code {
    font-family: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  }
  .audit-row__time {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    white-space: nowrap;
    color: var(--text-tertiary);
  }
  .consent-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
  }
  .consent-item + .consent-item {
    border-top: 1px solid var(--id-divider);
  }
  .consent-item__icon {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    width: 2.25rem;
    height: 2.25rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
  }
  .consent-item__body {
    min-width: 0;
    flex: 1;
  }
  .consent-item__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .consent-item__desc {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .consent-item__control {
    flex-shrink: 0;
    padding-top: calc(var(--spacing) * 0.5);
  }
  .security-score--ring {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    --_ring: var(--bg-warning-solid);
  }
  .security-score--ring[data-grade="weak"] {
    --_ring: var(--bg-danger-solid);
  }
  .security-score--ring[data-grade="fair"] {
    --_ring: var(--bg-warning-solid);
  }
  .security-score--ring[data-grade="strong"] {
    --_ring: var(--bg-success-solid);
  }
  .security-score__ring {
    position: relative;
    width: 6.5rem;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    background: conic-gradient(var(--_ring) calc(var(--security-score, 0) * 3.6deg), var(--bg-tertiary) 0);
  }
  .security-score__ring::before {
    content: "";
    position: absolute;
    inset: 0.75rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-primary);
  }
  .security-score__ring-value {
    position: relative;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
  }
  .security-score__ring-value small {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-tertiary);
  }
  .security-score__ring-caption {
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .security-score--ring[data-grade="weak"] .security-score__ring-caption {
    color: var(--text-danger);
  }
  .security-score--ring[data-grade="fair"] .security-score__ring-caption {
    color: var(--text-warning);
  }
  .security-score--ring[data-grade="strong"] .security-score__ring-caption {
    color: var(--text-success);
  }
  .id-row--compact {
    padding: 0.625rem 1rem;
    --id-row-gap: 0.75rem;
  }
  .id-row--compact .id-row__title {
    font-size: 0.8125rem;
  }
  .id-row--compact .id-row__media > .icon-badge {
    transform: scale(0.85);
  }
  .trust-badge--sm {
    padding: 0.0625rem 0.5rem 0.0625rem 0.4375rem;
    font-size: 0.6875rem;
    gap: 0.375rem;
  }
  .trust-badge--sm .trust-badge__dot {
    width: 0.4375rem;
    height: 0.4375rem;
  }
  .trust-badge--lg {
    padding: 0.25rem 0.875rem 0.25rem 0.6875rem;
    font-size: 0.8125rem;
  }
  .trust-badge--lg .trust-badge__dot {
    width: 0.5625rem;
    height: 0.5625rem;
  }
}
@layer utilities {
  .idx-section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
  }
  .idx-section + .idx-section {
    margin-top: 20px;
  }
  .idx-section__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--border-divider);
  }
  .idx-section__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .idx-section__desc {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .idx-section__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .idx-section__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .idx-section__body--pad {
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
  }
  .idx-mono {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-family: var(--font-mono, ui-monospace, monospace);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-divider);
  }
  .idx-toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-divider);
  }
  .idx-toolbar__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .idx-note {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .idx-note i {
    color: var(--text-quaternary);
    margin-top: 1px;
  }
  .netpol-rule {
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    grid-template-columns: 1fr auto auto auto;
    background-color: var(--bg-primary);
  }
  .netpol-rule:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .netpol-rule__label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .netpol-rule__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .netpol-rule__meta {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .netpol-rule__scope {
    flex-shrink: 0;
  }
  .netpol-rule.is-blocked {
    background-color: var(--bg-danger-subtle);
  }
  .netpol-rule.is-blocked .netpol-rule__name {
    color: var(--text-danger);
  }
  .netpol-rule.is-monitor {
    background-color: var(--bg-warning-subtle);
  }
  .netpol-rule.is-monitor .netpol-rule__name {
    color: var(--text-warning);
  }
  .netpol-banner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--text-warning);
    background-color: var(--bg-warning-subtle);
    border: 1px solid var(--border-warning);
  }
  .netpol-banner__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .netpol-banner__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-warning);
  }
  .netpol-banner__text {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  @media (max-width: 40rem) {
    .netpol-rule {
      grid-template-columns: 1fr auto;
    }
    .netpol-rule__meta {
      display: none;
    }
  }
  .sa-media {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--text-brand);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 12%, transparent);
    }
  }
  .sa-media--disabled {
    color: var(--text-quaternary);
    background-color: var(--bg-secondary);
  }
  .sa-media--warn {
    color: var(--text-warning);
    background-color: var(--bg-warning-subtle);
  }
  .sa-media--pending {
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    border: 1px dashed var(--border-secondary);
  }
  .sa-scopes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .sa-scope {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-divider);
  }
  .sa-key-count {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .review-progress {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--border-divider);
  }
  .review-progress__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .review-progress__count {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-primary);
  }
  .review-progress__bar {
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .review-progress__fill {
    height: 100%;
    background-color: var(--bg-brand-solid);
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-out);
  }
  .review-row {
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    grid-template-columns: 1fr auto auto;
    background-color: var(--bg-primary);
  }
  .review-row:not(:last-child) {
    border-bottom: 1px solid var(--border-divider);
  }
  .review-row__who {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .review-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .review-row__meta {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .review-row__used {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-quaternary);
  }
  .review-row__decision {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .review-row.is-approved {
    background-color: var(--bg-success-subtle);
  }
  .review-row.is-revoked {
    background-color: var(--bg-danger-subtle);
  }
  .review-row.is-approved .review-row__decision, .review-row.is-revoked .review-row__decision {
    display: none;
  }
  .review-row__outcome {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .review-row.is-approved .review-row__outcome {
    display: inline-flex;
    color: var(--text-success);
  }
  .review-row.is-revoked .review-row__outcome {
    display: inline-flex;
    color: var(--text-danger);
  }
  .review-row__used.is-stale {
    color: var(--text-warning);
    font-weight: 600;
  }
  @media (max-width: 40rem) {
    .review-row {
      grid-template-columns: 1fr auto;
    }
    .review-row__used {
      display: none;
    }
  }
  .bg-banner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--text-on-solid);
    background-color: var(--bg-danger-solid);
    box-shadow: var(--shadow-sm);
  }
  .bg-banner__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .bg-banner__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-on-solid);
  }
  .bg-banner__text {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-on-solid);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklch, var(--text-on-solid) 85%, transparent);
    }
  }
  .bg-banner__timer {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    color: var(--text-on-solid);
    background-color: var(--text-on-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-on-solid) 18%, transparent);
    }
  }
  .bg-request {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 4);
  }
  .bg-request__field {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .bg-request__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .bg-request__hint {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .bg-reason {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    font-style: italic;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .role-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .role-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .role-card:hover {
    background: var(--bg-primary-subtle);
    border-color: var(--border-primary);
  }
  .role-card:focus-visible, .role-card.is-selected {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .role-card__icon {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 1rem;
  }
  .role-card__name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .role-card__desc {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .role-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .role-card.is-system {
    cursor: default;
  }
  .role-card.is-system:hover {
    background: var(--bg-card);
    border-color: var(--border-secondary);
  }
  .role-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .role-editor__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border-divider);
  }
  .role-editor__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .role-editor__hint {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .role-editor__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .role-editor__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .perm-matrix {
    position: relative;
    overflow: auto;
    max-block-size: 32rem;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .perm-matrix__table {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    min-inline-size: max-content;
    font-size: 0.8125rem;
  }
  .perm-matrix__table th, .perm-matrix__table td {
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--border-divider);
    text-align: center;
    white-space: nowrap;
  }
  .perm-matrix__col-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    vertical-align: bottom;
  }
  .perm-matrix__row-head {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--bg-card);
    color: var(--text-primary);
    text-align: start;
    font-weight: 500;
    min-inline-size: 15rem;
  }
  .perm-matrix__corner {
    position: sticky;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 3;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    text-align: start;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
  }
  .perm-matrix__group td {
    position: sticky;
    inset-inline-start: 0;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    text-align: start;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 700;
  }
  .perm-matrix__row:hover td {
    background: var(--bg-primary-subtle);
  }
  .perm-cell {
    cursor: pointer;
  }
  .perm-cell__box {
    display: inline-grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-on-brand);
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .perm-cell__box > i {
    font-size: 0.75rem;
    opacity: 0;
  }
  .perm-cell.is-granted .perm-cell__box {
    background: var(--bg-brand-solid);
    border-color: var(--bg-brand-solid);
  }
  .perm-cell.is-granted .perm-cell__box > i {
    opacity: 1;
  }
  .perm-cell.is-inherited .perm-cell__box {
    background: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--bg-brand-solid) 14%, transparent);
    }
    border-style: dashed;
    border-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bg-brand-solid) 50%, transparent);
    }
    color: var(--text-secondary);
  }
  .perm-cell.is-inherited .perm-cell__box > i {
    opacity: 0.75;
  }
  .perm-cell.is-denied .perm-cell__box {
    background: var(--bg-danger-subtle);
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-danger) 45%, transparent);
    }
    color: var(--text-danger);
  }
  .perm-cell.is-denied .perm-cell__box > i {
    opacity: 1;
  }
  .perm-cell:hover .perm-cell__box {
    border-color: var(--border-focus);
  }
  .perm-cell:focus-visible {
    outline: none;
  }
  .perm-cell:focus-visible .perm-cell__box {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .perm-cell[aria-disabled="true"] {
    cursor: not-allowed;
  }
  .perm-cell[aria-disabled="true"] .perm-cell__box {
    background: var(--bg-secondary);
    border-color: var(--border-divider);
    opacity: 0.6;
  }
  .perm-matrix__grant-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: 0.25rem;
    color: var(--text-info);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
  }
  .perm-matrix__grant-all:hover {
    text-decoration: underline;
  }
  .perm-scope {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .perm-scope__seg {
    display: inline-flex;
    padding: var(--space-1);
    gap: var(--space-1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    align-self: flex-start;
  }
  .perm-scope__seg-btn {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .perm-scope__seg-btn:hover {
    color: var(--text-primary);
  }
  .perm-scope__seg-btn.is-active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  .perm-scope__seg-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 35%, transparent);
    }
  }
  .perm-scope__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background: var(--bg-card);
  }
  .perm-scope__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
  }
  .perm-scope__item:hover {
    background: var(--bg-primary-subtle);
    color: var(--text-primary);
  }
  .perm-scope__item[data-depth="1"] {
    padding-inline-start: var(--space-6);
  }
  .perm-scope__item[data-depth="2"] {
    padding-inline-start: var(--space-10);
  }
  .perm-matrix.perm-matrix--sm .perm-matrix__table {
    font-size: 0.75rem;
  }
  .perm-matrix.perm-matrix--sm .perm-matrix__table th, .perm-matrix.perm-matrix--sm .perm-matrix__table td {
    padding: var(--space-1) var(--space-2);
  }
  .role-card--sm {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .role-card--sm .role-card__icon {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    font-size: 0.8125rem;
  }
  .role-card--sm .role-card__desc {
    font-size: 0.75rem;
  }
  .role-card--lg {
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
  }
  .role-card--lg .role-card__icon {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    font-size: 1.25rem;
  }
  .role-card--lg .role-card__name {
    font-size: 1.0625rem;
  }
  .role-card__icon--info {
    background: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .role-card__icon--success {
    background: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .role-card__icon--warning {
    background: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .role-card__icon--danger {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .perm-matrix.perm-matrix--xs .perm-matrix__table {
    font-size: 0.6875rem;
  }
  .perm-matrix.perm-matrix--xs .perm-matrix__table th, .perm-matrix.perm-matrix--xs .perm-matrix__table td {
    padding: var(--space-1);
  }
  .perm-matrix.perm-matrix--xs .perm-matrix__row-head {
    min-inline-size: 12rem;
  }
  .perm-cell.is-partial .perm-cell__box {
    background: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--bg-brand-solid) 22%, transparent);
    }
    border-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bg-brand-solid) 55%, transparent);
    }
    color: var(--text-primary);
  }
  .perm-cell.is-partial .perm-cell__box > i {
    opacity: 1;
  }
  .perm-cell.is-dirty {
    position: relative;
  }
  .perm-cell.is-dirty::after {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline-end: -1px;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--text-warning);
  }
  .perm-scope--sm {
    gap: var(--space-2);
  }
  .perm-scope--sm .perm-scope__seg-btn {
    padding: var(--space-1) var(--space-2);
    font-size: 0.75rem;
  }
  .perm-scope--sm .perm-scope__item {
    padding: var(--space-1) var(--space-2);
    font-size: 0.75rem;
  }
  .perm-scope--sm .perm-scope__item[data-depth="1"] {
    padding-inline-start: var(--space-4);
  }
  .perm-scope--sm .perm-scope__item[data-depth="2"] {
    padding-inline-start: var(--space-8);
  }
  @media (prefers-reduced-motion: reduce) {
    .role-card, .perm-cell__box, .perm-scope__seg-btn {
      transition: none;
    }
  }
}
@layer utilities {
  .config-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .config-nav__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .config-nav__group-label {
    padding: 0 var(--space-2);
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .config-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .config-nav__link:hover {
    background: var(--bg-primary-subtle);
    color: var(--text-primary);
  }
  .config-nav__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .config-nav__link.is-active {
    background: var(--bg-primary-subtle);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 0 var(--border-focus);
  }
  .config-nav__icon {
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    color: var(--text-tertiary);
    font-size: 0.9375rem;
  }
  .config-nav__link.is-active .config-nav__icon, .config-nav__link:hover .config-nav__icon {
    color: var(--text-secondary);
  }
  .config-nav__count {
    margin-inline-start: auto;
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .config-kv {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .config-kv__row {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .config-kv__row.is-dirty {
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-warning) 45%, transparent);
    }
    background: var(--bg-warning-subtle);
  }
  .config-kv__key {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
  }
  .config-kv__type {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    block-size: 1.25rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.6875rem;
    text-transform: lowercase;
    white-space: nowrap;
  }
  .config-kv__value {
    min-inline-size: 0;
  }
  .config-kv__dirty {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-warning);
    font-size: 0.6875rem;
    font-weight: 600;
  }
  .config-kv__remove {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .config-kv__remove:hover {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .config-kv__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .config-kv__add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--border-primary);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .config-kv__add:hover {
    background: var(--bg-primary-subtle);
    border-color: var(--border-focus);
    color: var(--text-primary);
  }
  .config-kv__add:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .env-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
  }
  .env-banner__icon {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 1rem;
  }
  .env-banner__body {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-inline-size: 0;
  }
  .env-banner__label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
  }
  .env-banner__text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .env-banner__pill {
    margin-inline-start: auto;
  }
  .env-banner--production {
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-danger) 40%, transparent);
    }
    background: var(--bg-danger-subtle);
  }
  .env-banner--production .env-banner__icon {
    color: var(--text-danger);
  }
  .env-banner--production .env-banner__label {
    color: var(--text-danger);
  }
  .env-banner--staging {
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-warning) 40%, transparent);
    }
    background: var(--bg-warning-subtle);
  }
  .env-banner--staging .env-banner__icon {
    color: var(--text-warning);
  }
  .env-banner--staging .env-banner__label {
    color: var(--text-warning);
  }
  .env-banner--development {
    border-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-info) 40%, transparent);
    }
    background: var(--bg-info-subtle);
  }
  .env-banner--development .env-banner__icon {
    color: var(--text-info);
  }
  .env-banner--development .env-banner__label {
    color: var(--text-info);
  }
  .maintenance-mode {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .maintenance-mode.is-active {
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-warning) 45%, transparent);
    }
  }
  .maintenance-mode__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border-divider);
  }
  .maintenance-mode__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .maintenance-mode__hint {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .maintenance-mode__window {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .maintenance-mode__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .maintenance-mode__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .maintenance-mode__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px dashed var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    text-align: center;
  }
  .maintenance-mode__preview-icon {
    color: var(--text-warning);
    font-size: 1.5rem;
  }
  .maintenance-mode__preview-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .maintenance-mode__preview-body {
    color: var(--text-secondary);
    font-size: 0.875rem;
    max-inline-size: 32rem;
  }
  .localization-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .localization-settings__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .localization-settings__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .localization-settings__label > i {
    color: var(--text-tertiary);
    font-size: 0.875rem;
  }
  .localization-settings__hint {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .backup-restore {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .backup-restore__list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  .backup-restore__item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-divider);
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .backup-restore__item:last-child {
    border-block-end: none;
  }
  .backup-restore__item:hover {
    background: var(--bg-primary-subtle);
  }
  .backup-restore__icon {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.9375rem;
  }
  .backup-restore__stamp {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
  }
  .backup-restore__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: 0.125rem;
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .backup-restore__size {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .backup-restore__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .backup-restore__schedule {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
  }
  .backup-restore__schedule-icon {
    color: var(--text-tertiary);
    font-size: 1rem;
  }
  .backup-restore__schedule-body {
    min-inline-size: 0;
  }
  .backup-restore__schedule-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
  }
  .backup-restore__schedule-next {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-block-start: 0.125rem;
  }
  .backup-restore__schedule-control {
    margin-inline-start: auto;
  }
  @media (max-width: 48rem) {
    .maintenance-mode__window, .localization-settings {
      grid-template-columns: 1fr;
    }
    .config-kv__row {
      grid-template-columns: 1fr auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .config-nav__link, .config-kv__row, .config-kv__remove, .config-kv__add, .backup-restore__item {
      transition: none;
    }
  }
}
@layer utilities {
  .org-profile {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .org-profile__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border-divider);
  }
  .org-profile__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .org-profile__hint {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .org-profile__logo {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .org-profile__logo-tile {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border: 1px dashed var(--border-input);
    border-radius: var(--radius-lg);
    background: var(--bg-primary-subtle);
    color: var(--text-tertiary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .org-profile__logo-tile:hover {
    border-color: var(--border-primary);
    background: var(--bg-secondary);
  }
  .org-profile__logo-tile:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .org-profile__logo-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .org-profile__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .org-profile__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .org-profile__field.org-profile__field--wide {
    grid-column: 1 / -1;
  }
  .org-profile__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .org-profile__prefixed {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    overflow: hidden;
  }
  .org-profile__prefixed:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .org-profile__prefix {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-3);
    background: var(--bg-secondary);
    border-inline-end: 1px solid var(--border-input);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .org-profile__prefixed .org-profile__prefixed-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.875rem;
  }
  .org-profile__prefixed .org-profile__prefixed-input:focus {
    outline: none;
  }
  .org-profile__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border-divider);
  }
  .team-directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-3);
  }
  .team-directory__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .team-directory__card:hover {
    background: var(--bg-primary-subtle);
    border-color: var(--border-primary);
  }
  .team-directory__card:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .team-directory__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .team-directory__icon {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 1rem;
  }
  .team-directory__name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .team-directory__owner {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .team-directory__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-divider);
  }
  .team-directory__avatars {
    display: flex;
    align-items: center;
  }
  .team-directory__avatar {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-card);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    margin-inline-start: -0.5rem;
  }
  .team-directory__avatar:first-child {
    margin-inline-start: 0;
  }
  .team-directory__more {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-card);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    margin-inline-start: -0.5rem;
  }
  .team-directory__count {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .team-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .team-settings__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .team-settings__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .team-settings__help {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .team-settings__seg {
    display: inline-flex;
    padding: var(--space-1);
    gap: var(--space-1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    align-self: flex-start;
  }
  .team-settings__seg-opt {
    cursor: pointer;
  }
  .team-settings__seg-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .team-settings__seg-face {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .team-settings__seg-opt:hover .team-settings__seg-face {
    color: var(--text-primary);
  }
  .team-settings__seg-input:checked + .team-settings__seg-face {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  .team-settings__seg-input:focus-visible + .team-settings__seg-face {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 35%, transparent);
    }
  }
  .membership-manager {
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  .membership-manager__table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
  }
  .membership-manager__table th {
    padding: var(--space-2) var(--space-4);
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    text-align: start;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    border-block-end: 1px solid var(--border-divider);
  }
  .membership-manager__table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-divider);
    vertical-align: middle;
    color: var(--text-secondary);
  }
  .membership-manager__row:hover td {
    background: var(--bg-primary-subtle);
  }
  .membership-manager__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .membership-manager__avatar {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .membership-manager__name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .membership-manager__email {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .membership-manager__actions {
    text-align: end;
    white-space: nowrap;
  }
  .membership-manager__remove {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .membership-manager__remove:hover {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .membership-manager__remove:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .membership-manager__add td {
    background: var(--bg-secondary);
    border-block-end: 0;
  }
  .membership-manager__add-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .membership-manager__add-row .membership-manager__add-input {
    flex: 1 1 12rem;
    min-inline-size: 0;
  }
  .seat-meter {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .seat-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .seat-meter__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .seat-meter__count {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .seat-meter__count strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .seat-meter__track {
    position: relative;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    overflow: hidden;
  }
  .seat-meter__fill {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: var(--bg-brand-solid);
    transition: width var(--duration-normal) var(--ease-out);
  }
  .seat-meter__note {
    display: none;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .seat-meter.is-near-limit .seat-meter__fill {
    background: var(--text-warning);
  }
  .seat-meter.is-near-limit .seat-meter__note {
    display: inline-flex;
    color: var(--text-warning);
  }
  .seat-meter.is-full .seat-meter__fill {
    background: var(--text-danger);
  }
  .seat-meter.is-full .seat-meter__note {
    display: inline-flex;
    color: var(--text-danger);
  }
  .domain-verify {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .domain-verify__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .domain-verify__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .domain-verify__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .domain-verify__row .domain-verify__input {
    flex: 1 1 16rem;
    min-inline-size: 0;
  }
  .domain-verify__record {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
  }
  .domain-verify__record-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .domain-verify__record-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
  }
  .domain-verify__mono {
    display: block;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
  }
  .domain-verify__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .domain-verify__status.is-pending {
    background: var(--bg-warning-subtle);
    border-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-warning) 35%, transparent);
    }
    color: var(--text-warning);
  }
  .domain-verify__status.is-verified {
    background: var(--bg-success-subtle);
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-success) 35%, transparent);
    }
    color: var(--text-success);
  }
  .domain-verify__status.is-failed {
    background: var(--bg-danger-subtle);
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-danger) 35%, transparent);
    }
    color: var(--text-danger);
  }
  @media (prefers-reduced-motion: reduce) {
    .org-profile__logo-tile, .team-directory__card, .team-settings__seg-face, .membership-manager__remove, .seat-meter__fill {
      transition: none;
    }
  }
  @media (max-width: 40rem) {
    .org-profile__grid {
      grid-template-columns: 1fr;
    }
    .org-profile__field.org-profile__field--wide {
      grid-column: auto;
    }
  }
}
@layer utilities {
  .billing-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
  }
  .billing-overview__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .billing-overview__card.is-primary {
    background: var(--bg-primary-subtle);
    border-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bg-brand-solid) 40%, transparent);
    }
  }
  .billing-overview__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .billing-overview__label {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .billing-overview__icon {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.875rem;
  }
  .billing-overview__value {
    color: var(--text-primary);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
  }
  .billing-overview__meta {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .plan-selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .plan-selector__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }
  .plan-selector__seg {
    display: inline-flex;
    padding: var(--space-1);
    gap: var(--space-1);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
  }
  .plan-selector__seg-btn {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .plan-selector__seg-btn:hover {
    color: var(--text-primary);
  }
  .plan-selector__seg-btn.is-active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  .plan-selector__seg-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 35%, transparent);
    }
  }
  .plan-selector__save {
    color: var(--text-success);
    font-size: 0.75rem;
    font-weight: 700;
  }
  .plan-selector__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
  }
  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .plan-card.is-recommended {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus), var(--shadow-lg);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 22%, transparent), var(--shadow-lg);
    }
  }
  .plan-card__ribbon {
    position: absolute;
    inset-block-start: calc(-1 * var(--space-3));
    inset-inline-end: var(--space-4);
  }
  .plan-card__name {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
  }
  .plan-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
  }
  .plan-card__amount {
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
  }
  .plan-card__period {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .plan-card__desc {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .plan-card__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .plan-card__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.8125rem;
  }
  .plan-card__feature > i {
    margin-block-start: 0.15rem;
    color: var(--text-success);
    font-size: 0.75rem;
  }
  .plan-card__feature.is-muted {
    color: var(--text-quaternary);
  }
  .plan-card__feature.is-muted > i {
    color: var(--text-quaternary);
  }
  .plan-card__cta {
    margin-block-start: auto;
  }
  .invoice-table {
    overflow: auto;
    max-block-size: 32rem;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .invoice-table__table {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    min-inline-size: max-content;
    font-size: 0.8125rem;
  }
  .invoice-table__table th, .invoice-table__table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-divider);
    text-align: start;
    white-space: nowrap;
  }
  .invoice-table__head th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .invoice-table__row:hover td {
    background: var(--bg-primary-subtle);
  }
  .invoice-table__row:last-child td {
    border-block-end: none;
  }
  .invoice-table__num {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .invoice-table__date {
    color: var(--text-secondary);
  }
  .invoice-table__table .invoice-table__amount {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  .invoice-table__table .invoice-table__action {
    text-align: end;
  }
  .payment-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .payment-method {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .payment-method.is-default {
    background: var(--bg-primary-subtle);
    border-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--bg-brand-solid) 40%, transparent);
    }
  }
  .payment-method__brand {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 1.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1.125rem;
  }
  .payment-method__num {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .payment-method__exp {
    margin-block-start: 0.125rem;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .payment-method__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .payment-methods__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--border-input);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .payment-methods__add:hover {
    background: var(--bg-primary-subtle);
    border-color: var(--border-focus);
    color: var(--text-primary);
  }
  .payment-methods__add:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .billing-breakdown {
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .billing-breakdown__table {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    min-inline-size: max-content;
    font-size: 0.8125rem;
  }
  .billing-breakdown__table th, .billing-breakdown__table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-divider);
    text-align: start;
    vertical-align: top;
    white-space: nowrap;
  }
  .billing-breakdown__head th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .billing-breakdown__product {
    color: var(--text-primary);
    font-weight: 500;
  }
  .billing-breakdown__product-desc {
    margin-block-start: 0.125rem;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    white-space: normal;
  }
  .billing-breakdown__table .billing-breakdown__num {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  .billing-breakdown__summary th, .billing-breakdown__summary td {
    border-block-end: none;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: end;
  }
  .billing-breakdown__summary.is-total th, .billing-breakdown__summary.is-total td {
    border-block-start: 1px solid var(--border-divider);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
  }
  @media (prefers-reduced-motion: reduce) {
    .plan-selector__seg-btn, .payment-methods__add {
      transition: none;
    }
  }
}
@layer utilities {
  .usage-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .usage-dashboard__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border-divider);
  }
  .usage-dashboard__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .usage-dashboard__hint {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .usage-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-3);
  }
  .usage-dashboard__chart {
    margin-block-start: var(--space-1);
  }
  .usage-metric {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .usage-metric__label {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .usage-metric__label > i {
    color: var(--text-quaternary);
    font-size: 0.875rem;
  }
  .usage-metric__value {
    grid-column: 1;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
  }
  .usage-metric__unit {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-inline-start: 0.25rem;
  }
  .usage-metric__delta {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: start;
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
  }
  .usage-metric__delta > i {
    font-size: 0.6875rem;
  }
  .usage-metric.is-up .usage-metric__delta {
    color: var(--text-success);
    background: var(--bg-success-subtle);
  }
  .usage-metric.is-down .usage-metric__delta {
    color: var(--text-danger);
    background: var(--bg-danger-subtle);
  }
  .usage-metric__spark {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    inline-size: 5.5rem;
    block-size: 2.25rem;
    color: var(--text-tertiary);
  }
  .usage-metric.is-up .usage-metric__spark {
    color: var(--text-success);
  }
  .usage-metric.is-down .usage-metric__spark {
    color: var(--text-danger);
  }
  .usage-metric.is-flat .usage-metric__delta {
    color: var(--text-tertiary);
    background: var(--bg-secondary);
  }
  .usage-metric.is-flat .usage-metric__spark {
    color: var(--text-tertiary);
  }
  .usage-metric__spark svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  .api-usage {
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .api-usage__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }
  .api-usage__title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
  }
  .api-usage__legend {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .api-usage__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
  }
  .api-usage__swatch {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--radius-sm);
    flex: none;
  }
  .api-usage__swatch--ok {
    background: var(--bg-brand-solid);
  }
  .api-usage__swatch--err {
    background: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--text-danger) 65%, transparent);
    }
  }
  .api-usage__plot {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-2);
  }
  .api-usage__yaxis {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    min-inline-size: 2rem;
    block-size: 10rem;
    color: var(--text-quaternary);
    font-size: 0.6875rem;
    padding-block-end: 0.75rem;
  }
  .api-usage__bars {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: end;
    gap: var(--space-2);
    block-size: 10rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--border-divider);
  }
  .api-usage__col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    block-size: 100%;
  }
  .api-usage__stack {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    inline-size: 100%;
    max-inline-size: 2.25rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
    transition: filter var(--duration-fast) var(--ease-out);
  }
  .api-usage__col:hover .api-usage__stack {
    filter: brightness(1.06);
  }
  .api-usage__seg {
    inline-size: 100%;
  }
  .api-usage__seg--ok {
    background: var(--bg-brand-solid);
  }
  .api-usage__seg--err {
    background: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--text-danger) 65%, transparent);
    }
  }
  .api-usage__xaxis {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    color: var(--text-quaternary);
    font-size: 0.6875rem;
    text-align: center;
  }
  .quota-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .quota-bar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .quota-bar__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .quota-bar__label > i {
    color: var(--text-quaternary);
  }
  .quota-bar__value {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
  }
  .quota-bar__value strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .quota-bar__track {
    position: relative;
    block-size: 0.625rem;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    overflow: hidden;
  }
  .quota-bar__fill {
    block-size: 100%;
    border-radius: var(--radius-full);
    background: var(--bg-brand-solid);
    transition: width var(--duration-normal) var(--ease-out);
  }
  .quota-bar__marker {
    position: absolute;
    inset-block: -0.1875rem;
    inline-size: 0;
    border-inline-start: 2px dashed var(--text-tertiary);
    z-index: 1;
  }
  .quota-bar.is-near-limit .quota-bar__fill {
    background: var(--text-warning);
  }
  .quota-bar.is-near-limit .quota-bar__label > i {
    color: var(--text-warning);
  }
  .quota-bar.is-over .quota-bar__fill {
    background: var(--text-danger);
  }
  .quota-bar.is-over .quota-bar__label > i {
    color: var(--text-danger);
  }
  .quota-bar.is-ok .quota-bar__fill {
    background: var(--text-success);
  }
  .quota-bar.is-ok .quota-bar__label > i {
    color: var(--text-success);
  }
  .quota-bar__track.quota-bar__track--marked {
    overflow: visible;
  }
  .quota-bar__track--marked .quota-bar__fill {
    overflow: hidden;
  }
  .top-consumers {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .top-consumers thead th {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    text-align: start;
    white-space: nowrap;
    border-block-end: 1px solid var(--border-divider);
  }
  .top-consumers tbody td {
    padding: var(--space-3);
    border-block-end: 1px solid var(--border-divider);
    vertical-align: middle;
    color: var(--text-secondary);
  }
  .top-consumers tbody tr:last-child td {
    border-block-end: none;
  }
  .top-consumers tbody tr:hover td {
    background: var(--bg-primary-subtle);
  }
  .top-consumers__rank {
    inline-size: 2rem;
    color: var(--text-quaternary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .top-consumers__consumer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .top-consumers__avatar {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.75rem;
  }
  .top-consumers__name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .top-consumers__sub {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .top-consumers__calls {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .top-consumers__share {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 9rem;
  }
  .top-consumers__share-track {
    position: relative;
    flex: 1;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    overflow: hidden;
  }
  .top-consumers__share-fill {
    block-size: 100%;
    border-radius: var(--radius-full);
    background: var(--bg-brand-solid);
  }
  .top-consumers__share-val {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-inline-size: 2.75rem;
    text-align: end;
  }
  .usage-dashboard.usage-dashboard--sm .usage-dashboard__grid {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-2);
  }
  .usage-dashboard--sm .usage-metric {
    padding: var(--space-3);
  }
  .usage-dashboard--sm .usage-metric__value {
    font-size: 1.375rem;
  }
  .usage-metric--xs {
    padding: var(--space-2);
  }
  .usage-metric--xs .usage-metric__value {
    font-size: 1.125rem;
  }
  .usage-metric--xs .usage-metric__spark {
    inline-size: 3.5rem;
    block-size: 1.5rem;
  }
  .usage-metric--sm {
    padding: var(--space-3);
  }
  .usage-metric--sm .usage-metric__value {
    font-size: 1.375rem;
  }
  .usage-metric--sm .usage-metric__spark {
    inline-size: 4.5rem;
    block-size: 2rem;
  }
  .usage-metric--lg {
    padding: var(--space-5);
  }
  .usage-metric--lg .usage-metric__value {
    font-size: 2rem;
  }
  .usage-metric--lg .usage-metric__spark {
    inline-size: 6.5rem;
    block-size: 2.75rem;
  }
  .quota-bar--xs .quota-bar__track {
    block-size: 0.25rem;
  }
  .quota-bar--xs .quota-bar__marker {
    inset-block: -0.125rem;
  }
  .quota-bar--sm .quota-bar__track {
    block-size: 0.4375rem;
  }
  .quota-bar--sm .quota-bar__marker {
    inset-block: -0.125rem;
  }
  .quota-bar--lg .quota-bar__track {
    block-size: 0.875rem;
  }
  .quota-bar--lg .quota-bar__marker {
    inset-block: -0.25rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .quota-bar__fill, .api-usage__stack {
      transition: none;
    }
  }
}
@layer utilities {
  .audit-log {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .audit-log__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
  }
  .audit-log__filters-spacer {
    margin-inline-start: auto;
  }
  .audit-log__scroll {
    overflow: auto;
    max-block-size: 32rem;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .audit-log__table {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    min-inline-size: max-content;
    font-size: 0.8125rem;
  }
  .audit-log__table th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    text-align: start;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    border-block-end: 1px solid var(--border-divider);
  }
  .audit-log__table td {
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--border-divider);
    color: var(--text-secondary);
    vertical-align: middle;
    white-space: nowrap;
  }
  .audit-log__row {
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .audit-log__row:hover td {
    background: var(--bg-primary-subtle);
  }
  .audit-log__row:focus-visible {
    outline: none;
  }
  .audit-log__row:focus-visible td {
    box-shadow: inset 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .audit-log__time {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .audit-log__actor {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .audit-log__avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
  }
  .audit-log__actor-name {
    color: var(--text-primary);
    font-weight: 500;
  }
  .audit-log__action {
    color: var(--text-primary);
  }
  .audit-log__target {
    color: var(--text-secondary);
  }
  .audit-event {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    max-inline-size: 40rem;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .audit-event__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border-divider);
  }
  .audit-event__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .audit-event__subtitle {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .audit-event__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    font-size: 0.8125rem;
  }
  .audit-event__meta-label {
    color: var(--text-tertiary);
    font-weight: 500;
  }
  .audit-event__meta-value {
    color: var(--text-primary);
  }
  .audit-event__diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .audit-event__diff-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
  }
  .audit-event__diff-head {
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 700;
  }
  .audit-event__line {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
  }
  .audit-event__line-icon {
    flex: none;
    font-size: 0.75rem;
  }
  .audit-event__line-tag {
    flex: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
  }
  .audit-event__line-value {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .audit-event__line.is-removed {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .audit-event__line.is-added {
    background: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .admin-activity-stream {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .admin-activity-stream__day {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .admin-activity-stream__day-label {
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .admin-activity-stream__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-inline-start: var(--space-2);
    padding-inline-start: var(--space-5);
    border-inline-start: 1px solid var(--border-divider);
  }
  .admin-activity-stream__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .admin-activity-stream__dot {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-start: calc(var(--space-5) * -1);
    margin-inline-start: -0.3rem;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
  }
  .admin-activity-stream__item.is-current .admin-activity-stream__dot {
    background: var(--bg-brand-solid);
    border-color: var(--bg-brand-solid);
  }
  .admin-activity-stream__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .admin-activity-stream__actor {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8125rem;
  }
  .admin-activity-stream__action {
    color: var(--text-secondary);
    font-size: 0.8125rem;
  }
  .admin-activity-stream__time {
    margin-inline-start: auto;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .admin-activity-stream__detail {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .security-events {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .security-events__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-inline-start: 3px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .security-events__icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    background: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .security-events__body {
    min-inline-size: 0;
  }
  .security-events__title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
  }
  .security-events__desc {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .security-events__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    white-space: nowrap;
  }
  .security-events__time {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .security-events__severity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.0625rem var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .security-events__item.is-info {
    border-inline-start-color: var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      border-inline-start-color: color-mix(in oklab, var(--text-info) 55%, transparent);
    }
  }
  .security-events__item.is-warning {
    border-inline-start-color: var(--text-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-inline-start-color: color-mix(in oklab, var(--text-warning) 55%, transparent);
    }
  }
  .security-events__item.is-warning .security-events__icon, .security-events__item.is-warning .security-events__severity {
    background: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .security-events__item.is-danger {
    border-inline-start-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-inline-start-color: color-mix(in oklab, var(--text-danger) 55%, transparent);
    }
  }
  .security-events__item.is-danger .security-events__icon, .security-events__item.is-danger .security-events__severity {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .login-history {
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .login-history__table {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    min-inline-size: max-content;
    font-size: 0.8125rem;
  }
  .login-history__table th {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    text-align: start;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    border-block-end: 1px solid var(--border-divider);
  }
  .login-history__table td {
    padding: var(--space-3);
    border-block-end: 1px solid var(--border-divider);
    color: var(--text-secondary);
    vertical-align: middle;
    white-space: nowrap;
  }
  .login-history__row:hover td {
    background: var(--bg-primary-subtle);
  }
  .login-history__row.is-current td {
    background: var(--bg-primary-subtle);
  }
  .login-history__device {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-weight: 500;
  }
  .login-history__device-icon {
    color: var(--text-tertiary);
    font-size: 0.95rem;
  }
  .login-history__sub {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .login-history__ip {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .login-history__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
    color: var(--text-secondary);
  }
  .login-history__status-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--text-tertiary);
  }
  .login-history__status.is-success {
    color: var(--text-success);
  }
  .login-history__status.is-success .login-history__status-dot {
    background: var(--text-success);
  }
  .login-history__status.is-failed {
    color: var(--text-danger);
  }
  .login-history__status.is-failed .login-history__status-dot {
    background: var(--text-danger);
  }
  @media (prefers-reduced-motion: reduce) {
    .audit-log__row {
      transition: none;
    }
  }
}
@layer utilities {
  .feature-flag-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .feature-flag-list__item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .feature-flag-list__item:hover {
    border-color: var(--border-primary);
  }
  .feature-flag-list__main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
  }
  .feature-flag-list__name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .feature-flag-list__key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .feature-flag-list__envs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
  }
  .feature-flag-list__rollout {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: 4rem;
    justify-content: flex-end;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .feature-flag-list__item.is-off .feature-flag-list__main, .feature-flag-list__item.is-off .feature-flag-list__envs, .feature-flag-list__item.is-off .feature-flag-list__rollout {
    opacity: 0.55;
  }
  .feature-flag-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .feature-flag-editor__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border-divider);
  }
  .feature-flag-editor__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .feature-flag-editor__hint {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .feature-flag-editor__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .feature-flag-editor__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .feature-flag-editor__killswitch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-danger-subtle);
    border: 1px solid var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--text-danger) 30%, transparent);
    }
    border-radius: var(--radius-lg);
  }
  .feature-flag-editor__killswitch-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--text-danger);
  }
  .feature-flag-editor__killswitch-hint {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .feature-flag-editor__variations {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .feature-flag-editor__variation {
    display: grid;
    grid-template-columns: 1fr 6rem auto;
    align-items: center;
    gap: var(--space-2);
  }
  .feature-flag-editor__variation-weight {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  .feature-flag-editor__remove {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .feature-flag-editor__remove:hover {
    color: var(--text-danger);
    background: var(--bg-danger-subtle);
  }
  .feature-flag-editor__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .rollout-slider {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .rollout-slider__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .rollout-slider__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .rollout-slider__value {
    display: inline-flex;
    align-items: baseline;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--bg-primary-subtle);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
  }
  .rollout-slider__input {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    block-size: 1.25rem;
    background: transparent;
    cursor: pointer;
  }
  .rollout-slider__input::-webkit-slider-runnable-track {
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-input);
    background: linear-gradient(to right, var(--bg-brand-solid) 0 var(--rollout, 50%), var(--bg-input) var(--rollout, 50%) 100%);
  }
  .rollout-slider__input::-moz-range-track {
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-input);
    background: var(--bg-input);
  }
  .rollout-slider__input::-moz-range-progress {
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--bg-brand-solid);
  }
  .rollout-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-block-start: -0.375rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 2px solid var(--bg-brand-solid);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
  .rollout-slider__input::-moz-range-thumb {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 2px solid var(--bg-brand-solid);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-fast) var(--ease-out);
  }
  .rollout-slider__input:focus-visible {
    outline: none;
  }
  .rollout-slider__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .rollout-slider__input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .rollout-slider__ticks {
    display: flex;
    justify-content: space-between;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
  }
  .targeting-rule {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
  }
  .targeting-rule__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-1);
  }
  .targeting-rule__join {
    display: inline-flex;
    gap: var(--space-px);
    padding: var(--space-px);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
  }
  .targeting-rule__join-btn {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .targeting-rule__join-btn:hover {
    color: var(--text-primary);
  }
  .targeting-rule__join-btn.is-active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  .targeting-rule__join-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 35%, transparent);
    }
  }
  .targeting-rule__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: var(--space-2);
  }
  .targeting-rule__connector {
    align-self: flex-start;
    padding-inline: var(--space-2);
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .targeting-rule__remove {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .targeting-rule__remove:hover {
    color: var(--text-danger);
    background: var(--bg-danger-subtle);
  }
  .targeting-rule__remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .targeting-rule__add {
    align-self: flex-start;
    margin-block-start: var(--space-1);
  }
  .flag-history {
    display: flex;
    flex-direction: column;
  }
  .flag-history__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
  }
  .flag-history__item:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block-start: 1.5rem;
    inset-block-end: 0;
    inset-inline-start: 0.6875rem;
    inline-size: 1px;
    background: var(--border-divider);
  }
  .flag-history__marker {
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.6875rem;
  }
  .flag-history__marker.is-enabled {
    background: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .flag-history__marker.is-disabled {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .flag-history__marker.is-rollout {
    background: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .flag-history__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-block-start: 0.1875rem;
    min-inline-size: 0;
  }
  .flag-history__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .flag-history__who {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-primary);
  }
  .flag-history__when {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .flag-history__change {
    color: var(--text-secondary);
    font-size: 0.8125rem;
  }
  .flag-history__change del {
    color: var(--text-tertiary);
    text-decoration: line-through;
  }
  .flag-history__change ins {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
  }
  .flag-history__arrow {
    margin-inline: var(--space-1);
    color: var(--text-quaternary);
  }
  @media (prefers-reduced-motion: reduce) {
    .feature-flag-list__item, .feature-flag-editor__remove, .targeting-rule__join-btn, .targeting-rule__remove {
      transition: none;
    }
    .rollout-slider__input::-webkit-slider-thumb {
      transition: none;
    }
    .rollout-slider__input::-moz-range-thumb {
      transition: none;
    }
  }
}
@layer utilities {
  .admin-user-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
  }
  .admin-user-status > i {
    font-size: 0.6875rem;
  }
  .admin-user-status.is-active {
    background: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .admin-user-status.is-invited {
    background: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .admin-user-status.is-suspended {
    background: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .admin-user-status.is-pending {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
  }
  .admin-user-status.is-deactivated {
    background: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .admin-user-status--sm {
    padding: 0 var(--space-1);
    font-size: 0.6875rem;
  }
  .admin-user-status--sm > i {
    font-size: 0.625rem;
  }
  .admin-user-status--lg {
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
  }
  .admin-user-status--lg > i {
    font-size: 0.75rem;
  }
  .admin-user-table {
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .admin-user-table__table {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    min-inline-size: max-content;
    font-size: 0.8125rem;
  }
  .admin-user-table__table th, .admin-user-table__table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border-divider);
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
  }
  .admin-user-table__col-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
  }
  .admin-user-table__row:hover td {
    background: var(--bg-primary-subtle);
  }
  .admin-user-table__row:last-child td {
    border-block-end: none;
  }
  .admin-user-table__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .admin-user-table__avatar {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .admin-user-table__name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .admin-user-table__email {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-block-start: 0.0625rem;
  }
  .admin-user-table__meta {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .admin-user-table__actions {
    text-align: end;
  }
  .admin-user-table__menu-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .admin-user-table__menu-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }
  .admin-user-table__menu-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .admin-user-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    inline-size: 100%;
    max-inline-size: 24rem;
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }
  .admin-user-detail__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--border-divider);
  }
  .admin-user-detail__avatar {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .admin-user-detail__identity {
    min-inline-size: 0;
  }
  .admin-user-detail__name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .admin-user-detail__email {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
  }
  .admin-user-detail__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }
  .admin-user-detail__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .admin-user-detail__section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
  }
  .admin-user-detail__field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: 0.8125rem;
  }
  .admin-user-detail__field-label {
    color: var(--text-tertiary);
  }
  .admin-user-detail__field-value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: end;
  }
  .admin-user-detail__session {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
  }
  .admin-user-detail__session-icon {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
  }
  .admin-user-detail__session-body {
    flex: 1 1 auto;
    min-inline-size: 0;
  }
  .admin-user-detail__session-title {
    color: var(--text-primary);
    font-weight: 500;
  }
  .admin-user-detail__session-meta {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .admin-user-detail__danger {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-danger-subtle);
    border: 1px solid var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--text-danger) 40%, transparent);
    }
    border-radius: var(--radius-lg);
  }
  .admin-user-detail__danger-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-danger);
  }
  .admin-user-detail__danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .admin-user-detail__danger-text {
    color: var(--text-secondary);
    font-size: 0.75rem;
  }
  .admin-user-detail__danger-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--text-danger) 45%, transparent);
    }
    border-radius: var(--radius-md);
    color: var(--text-danger);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .admin-user-detail__danger-btn:hover {
    background: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--text-danger) 12%, transparent);
    }
  }
  .admin-user-detail__danger-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .admin-user-invite {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .admin-user-invite__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .admin-user-invite__label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .admin-user-invite__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    min-block-size: 2.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-input);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .admin-user-invite__chips:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .admin-user-invite__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
    background: var(--bg-primary-subtle);
    border: 1px solid var(--border-primary-subtle);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .admin-user-invite__chip-remove {
    display: inline-grid;
    place-items: center;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .admin-user-invite__chip-remove:hover {
    background: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--text-danger) 14%, transparent);
    }
    color: var(--text-danger);
  }
  .admin-user-invite__chip-remove:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  .admin-user-invite__input {
    flex: 1 1 8rem;
    min-inline-size: 8rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8125rem;
  }
  .admin-user-invite__input:focus {
    outline: none;
  }
  .admin-user-invite__input::placeholder {
    color: var(--text-quaternary);
  }
  .admin-user-invite__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border-divider);
  }
  .admin-user-invite__hint {
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .access-request-queue {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .access-request-queue__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .access-request-queue__avatar {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .access-request-queue__body {
    min-inline-size: 0;
  }
  .access-request-queue__requester {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .access-request-queue__ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: var(--space-1);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .access-request-queue__reason {
    margin-block-start: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
  }
  .access-request-queue__meta {
    margin-block-start: var(--space-1);
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  .access-request-queue__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .access-request-queue__approve, .access-request-queue__deny {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .access-request-queue__approve {
    background: var(--bg-success-subtle);
    border-color: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-success) 35%, transparent);
    }
    color: var(--text-success);
  }
  .access-request-queue__approve:hover {
    background: var(--text-success);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklab, var(--text-success) 18%, transparent);
    }
  }
  .access-request-queue__deny {
    background: var(--bg-card);
    border-color: var(--border-secondary);
    color: var(--text-secondary);
  }
  .access-request-queue__deny:hover {
    border-color: var(--text-danger);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--text-danger) 45%, transparent);
    }
    color: var(--text-danger);
  }
  .access-request-queue__approve:focus-visible, .access-request-queue__deny:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--border-focus) 30%, transparent);
    }
  }
  @media (max-width: 40rem) {
    .access-request-queue__row {
      grid-template-columns: auto 1fr;
    }
    .access-request-queue__actions {
      grid-column: 1 / -1;
      justify-content: flex-end;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .admin-user-table__menu-btn, .admin-user-detail__danger-btn, .admin-user-invite__chips, .admin-user-invite__chip-remove, .access-request-queue__approve, .access-request-queue__deny {
      transition: none;
    }
  }
}
@layer utilities {
  .prod-card {
    --prod-card-bg: var(--bg-primary);
    --prod-card-border: var(--border-secondary);
    --prod-card-border-hover: var(--border-primary);
    --prod-card-radius: var(--radius-2xl, 16px);
    --prod-card-shadow: var(--shadow-xs);
    --prod-card-shadow-hover: var(--shadow-md);
    --prod-card-media-bg: var(--bg-secondary);
    --prod-card-title: var(--text-primary);
    --prod-card-eyebrow: var(--text-tertiary);
    --prod-card-meta: var(--text-tertiary);
    --prod-card-focus: var(--border-focus);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--prod-card-bg);
    border: 1px solid var(--prod-card-border);
    border-radius: var(--prod-card-radius);
    box-shadow: var(--prod-card-shadow);
    overflow: hidden;
    transition: border-color var(--duration-fast, 120ms) var(--ease-out, ease), box-shadow var(--duration-fast, 120ms) var(--ease-out, ease), transform var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .prod-card:hover {
    border-color: var(--prod-card-border-hover);
    box-shadow: var(--prod-card-shadow-hover);
  }
  .prod-card:focus-within {
    border-color: var(--prod-card-focus);
    box-shadow: 0 0 0 2px var(--prod-card-focus);
  }
  .prod-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background-color: var(--prod-card-media-bg);
    overflow: hidden;
  }
  .prod-card__media img, .prod-card__media svg, .prod-card__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-normal, 200ms) var(--ease-out, ease);
  }
  .prod-card:hover .prod-card__media img {
    transform: scale(1.04);
  }
  .prod-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-quaternary);
    font-size: 2rem;
    background-image: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  }
  .prod-card__media--portrait {
    aspect-ratio: 3 / 4;
  }
  .prod-card__media--landscape {
    aspect-ratio: 4 / 3;
  }
  .prod-card__media--wide {
    aspect-ratio: 16 / 9;
  }
  .prod-card__badges {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-start: 0.625rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: calc(100% - 3.5rem);
  }
  .prod-card__wish {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-end: 0.625rem;
    z-index: 2;
  }
  .prod-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.875rem 1rem 1rem;
    min-width: 0;
  }
  .prod-card__eyebrow {
    font-size: 0.75rem;
    line-height: 1.1;
    font-weight: 500;
    color: var(--prod-card-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .prod-card__title {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--prod-card-title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prod-card__title a {
    color: inherit;
    text-decoration: none;
    outline: none;
  }
  .prod-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .prod-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--prod-card-meta);
  }
  .prod-card__rating-count {
    color: var(--text-tertiary);
  }
  .prod-card__desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prod-card__swatches {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 0.125rem;
  }
  .prod-card__swatch {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--border-secondary);
    padding: 0;
    cursor: pointer;
    background-clip: padding-box;
    transition: outline-color var(--duration-fast, 120ms) var(--ease-out, ease);
    outline: 2px solid transparent;
    outline-offset: 1px;
  }
  .prod-card__swatch:hover {
    outline-color: var(--border-primary);
  }
  .prod-card__swatch[aria-pressed="true"] {
    outline-color: var(--border-focus);
  }
  .prod-card__swatch:focus-visible {
    outline-color: var(--border-focus);
  }
  .prod-card__swatch-more {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .prod-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.375rem;
  }
  .prod-card__actions {
    position: relative;
    z-index: 2;
    display: inline-flex;
    gap: 0.5rem;
  }
  .prod-card__quick-add {
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(0.25rem);
    transition: opacity var(--duration-fast, 120ms) var(--ease-out, ease), transform var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .prod-card:hover .prod-card__quick-add, .prod-card:focus-within .prod-card__quick-add {
    opacity: 1;
    transform: none;
  }
  @media (hover: none) {
    .prod-card__quick-add {
      opacity: 1;
      transform: none;
    }
  }
  .money {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
    flex-wrap: wrap;
  }
  .money__now {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .money__was {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-quaternary);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
  }
  .money__unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
  }
  .money__save {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-success);
  }
  .money--sale .money__now {
    color: var(--text-danger);
  }
  .money--sm .money__now {
    font-size: 0.9375rem;
  }
  .money--lg .money__now {
    font-size: 1.375rem;
  }
  .money--xl .money__now {
    font-size: 1.75rem;
  }
  .qty-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 2.5rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    overflow: hidden;
  }
  .qty-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    border: 0;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast, 120ms) var(--ease-out, ease), color var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .qty-stepper__btn:hover:not(:disabled) {
    background-color: var(--bg-primary-hover);
    color: var(--text-primary);
  }
  .qty-stepper__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .qty-stepper__btn:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
  }
  .qty-stepper__input {
    width: 2.75rem;
    border: 0;
    background-color: transparent;
    text-align: center;
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .qty-stepper__input::-webkit-outer-spin-button, .qty-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .qty-stepper__input:focus {
    outline: none;
  }
  .qty-stepper-sm {
    height: 2rem;
  }
  .qty-stepper-sm .qty-stepper__btn {
    width: 1.875rem;
  }
  .qty-stepper-sm .qty-stepper__input {
    width: 2.25rem;
  }
  .qty-stepper-lg {
    height: 2.75rem;
  }
  .qty-stepper-lg .qty-stepper__btn {
    width: 2.5rem;
  }
  .qty-stepper-lg .qty-stepper__input {
    width: 3rem;
  }
  .prod-card--list {
    flex-direction: row;
  }
  .prod-card--list .prod-card__media {
    flex: 0 0 auto;
    width: 8.5rem;
    aspect-ratio: 1 / 1;
  }
  .prod-card--list .prod-card__body {
    padding: 0.875rem 1rem;
  }
  .prod-card--list .prod-card__foot {
    padding-top: 0.625rem;
  }
  @media (min-width: 640px) {
    .prod-card--list .prod-card__media {
      width: 11rem;
    }
  }
  .prod-card--featured .prod-card__body {
    padding: 1.125rem 1.25rem 1.25rem;
    gap: 0.5rem;
  }
  .prod-card--featured .prod-card__title {
    font-size: 1.0625rem;
  }
  .prod-card--featured .money__now {
    font-size: 1.25rem;
  }
  .prod-card--compact .prod-card__body {
    padding: 0.625rem 0.75rem 0.75rem;
    gap: 0.25rem;
  }
  .prod-card--compact .prod-card__title {
    font-size: 0.875rem;
    -webkit-line-clamp: 1;
  }
  .prod-card--compact .money__now {
    font-size: 0.9375rem;
  }
  .prod-card--minimal {
    border-color: transparent;
    box-shadow: none;
    background-color: transparent;
  }
  .prod-card--minimal .prod-card__media {
    border-radius: var(--radius-xl, 12px);
  }
  .prod-card--minimal .prod-card__body {
    padding-inline: 0.125rem;
  }
  .prod-card--minimal:hover {
    box-shadow: none;
    border-color: transparent;
  }
  .prod-card.is-out-of-stock .prod-card__media img {
    filter: grayscale(0.6);
    opacity: 0.6;
  }
  .prod-card.is-out-of-stock .prod-card__title {
    color: var(--text-tertiary);
  }
  .prod-card.is-selected {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--border-focus);
  }
  .prod-card--loading .prod-card__media, .prod-card--loading .prod-card__ph {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md, 8px);
  }
  .prod-card--loading .prod-card__ph {
    height: 0.75rem;
  }
  .prod-card--loading .prod-card__ph--title {
    width: 80%;
    height: 0.9375rem;
  }
  .prod-card--loading .prod-card__ph--price {
    width: 40%;
  }
  .prod-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }
  .prod-grid--tight {
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  }
  .prod-grid--roomy {
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  }
  .prod-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 640px) {
    .prod-grid--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .prod-grid--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (max-width: 480px) {
    .prod-card--list .prod-card__media {
      width: 6.5rem;
    }
  }
  .prod-quickview {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .prod-quickview {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 1.75rem;
    }
  }
  .prod-quickview__media {
    border-radius: var(--radius-xl, 12px);
    overflow: hidden;
    background-color: var(--bg-secondary);
    aspect-ratio: 1 / 1;
  }
  .prod-quickview__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .prod-quickview__info {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .prod-card, .prod-card__media img, .prod-card__quick-add {
      transition: none;
    }
    .prod-card:hover .prod-card__media img {
      transform: none;
    }
  }
}
@layer utilities {
  .pdp {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 768px) {
    .pdp {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 2.5rem;
    }
  }
  @media (min-width: 1024px) {
    .pdp {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 24rem);
      gap: 3rem;
    }
  }
  .pdp__gallery {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: sticky;
    top: 1.5rem;
  }
  .pdp__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-2xl, 16px);
    overflow: hidden;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
  }
  .pdp__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pdp__stage-badges {
    position: absolute;
    inset-block-start: 0.875rem;
    inset-inline-start: 0.875rem;
    display: flex;
    gap: 0.375rem;
    z-index: 2;
  }
  .pdp__thumbs {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
  }
  .pdp__thumb {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    cursor: pointer;
    padding: 0;
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .pdp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pdp__thumb:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .pdp__thumb.is-current, .pdp__thumb[aria-current="true"] {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .pdp__thumb:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .pdp__info {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    min-width: 0;
  }
  .pdp__eyebrow {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .pdp__title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-primary);
  }
  .pdp__subrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .pdp__review-link {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    text-decoration: none;
  }
  .pdp__review-link:hover {
    color: var(--text-secondary);
    text-decoration: underline;
  }
  .pdp__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .pdp__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
  }
  .pdp__variant {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .pdp__variant-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .pdp__variant-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .pdp__variant-value {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .variant-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .variant-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.5rem;
    padding-inline: 0.875rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-out, ease), color var(--duration-fast, 120ms) var(--ease-out, ease), background-color var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .variant-chip:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary-hover, var(--border-primary));
    color: var(--text-primary);
  }
  .variant-chip:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .variant-chip[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--border-focus);
    color: var(--text-primary);
    background-color: var(--bg-primary-subtle);
  }
  .variant-chip[aria-disabled="true"], .variant-chip:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
    text-decoration: line-through;
    box-shadow: inset 0 0 0 1px var(--border-disabled);
  }
  .pdp__variant .prod-card__swatch {
    width: 1.75rem;
    height: 1.75rem;
  }
  .pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .pdp__stock-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full, 999px);
    flex: 0 0 auto;
  }
  .pdp__stock--in {
    color: var(--text-success);
  }
  .pdp__stock--in .pdp__stock-dot {
    background-color: var(--bg-success-solid);
  }
  .pdp__stock--low {
    color: var(--text-warning);
  }
  .pdp__stock--low .pdp__stock-dot {
    background-color: var(--bg-warning-solid);
  }
  .pdp__stock--out {
    color: var(--text-tertiary);
  }
  .pdp__stock--out .pdp__stock-dot {
    background-color: var(--bg-quaternary-solid, var(--bg-tertiary));
  }
  .pdp__buy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
  }
  .pdp__buy .btn {
    flex: 1 1 auto;
  }
  .pdp__buy-secondary {
    display: flex;
    gap: 0.625rem;
  }
  .pdp__divider {
    height: 1px;
    background-color: var(--border-secondary);
    border: 0;
    margin: 0.25rem 0;
  }
  .pdp__trust {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
  .pdp__trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .pdp__trust-item i {
    color: var(--text-icon-brand, var(--text-secondary));
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
  }
  .pdp__buybar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-secondary);
    box-shadow: var(--shadow-mobile-floating, var(--shadow-lg));
  }
  .pdp__buybar .money {
    flex: 0 0 auto;
  }
  .pdp__buybar .btn {
    flex: 1 1 auto;
  }
  @media (min-width: 768px) {
    .pdp__buybar {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pdp__thumb, .variant-chip {
      transition: none;
    }
  }
}
@layer utilities {
  .commerce-cart-lock {
    overflow: hidden;
  }
  .cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    visibility: hidden;
    pointer-events: none;
  }
  .cart-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
  }
  .cart-scrim {
    position: absolute;
    inset: 0;
    background-color: oklch(0% 0 0 / 0.45);
    opacity: 0;
    transition: opacity var(--duration-normal, 200ms) var(--ease-out, ease);
  }
  .cart-overlay.is-open .cart-scrim {
    opacity: 1;
  }
  .cart-drawer {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(28rem, 100vw);
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    border-inline-start: 1px solid var(--border-secondary);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform var(--duration-normal, 200ms) var(--ease-out, ease);
  }
  [dir="rtl"] .cart-drawer {
    transform: translateX(-100%);
  }
  .cart-overlay.is-open .cart-drawer {
    transform: none;
  }
  .cart-drawer--static {
    position: static;
    width: 100%;
    max-width: 28rem;
    transform: none;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    max-height: 34rem;
  }
  .cart-drawer__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .cart-drawer__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }
  .cart-drawer__count {
    color: var(--text-tertiary);
    font-weight: 500;
  }
  .cart-drawer__close {
    margin-inline-start: auto;
  }
  .cart-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 1.25rem;
  }
  .cart-drawer__footer {
    border-top: 1px solid var(--border-secondary);
    padding: 1rem 1.25rem;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cart-line {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-secondary);
    align-items: start;
  }
  .cart-line:last-child {
    border-bottom: 0;
  }
  .cart-line.is-removing {
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity var(--duration-fast, 120ms) var(--ease-out, ease), transform var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .cart-line__media {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    background-color: var(--bg-secondary);
    flex: 0 0 auto;
  }
  .cart-line__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cart-line__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .cart-line__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
  }
  .cart-line__title:hover {
    color: var(--text-primary-hover, var(--text-primary));
    text-decoration: underline;
  }
  .cart-line__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
  }
  .cart-line__controls {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.375rem;
  }
  .cart-line__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    text-align: end;
  }
  .cart-line__remove {
    color: var(--text-tertiary);
  }
  .cart-line__remove:hover {
    color: var(--text-danger);
  }
  .coupon-field {
    display: flex;
    gap: 0.5rem;
  }
  .coupon-field .form-control {
    flex: 1 1 auto;
  }
  .coupon-field.is-applied .coupon-field__input-wrap {
    display: none;
  }
  .coupon-applied {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .coupon-applied i {
    flex: 0 0 auto;
  }
  .coupon-applied__code {
    font-weight: 700;
  }
  .coupon-applied__remove {
    margin-inline-start: auto;
    color: inherit;
    opacity: 0.7;
  }
  .coupon-applied__remove:hover {
    opacity: 1;
  }
  .cart-summary {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .cart-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
  }
  .cart-summary__label {
    color: var(--text-secondary);
  }
  .cart-summary__value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .cart-summary__value--free {
    color: var(--text-success);
    font-weight: 600;
  }
  .cart-summary__value--discount {
    color: var(--text-success);
  }
  .cart-summary__divider {
    height: 1px;
    background-color: var(--border-secondary);
    border: 0;
    margin: 0.25rem 0;
  }
  .cart-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .cart-summary__total-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .cart-summary__total-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .cart-summary__note {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .cart-page {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 900px) {
    .cart-page {
      grid-template-columns: minmax(0, 1fr) 22rem;
      gap: 2rem;
    }
  }
  .cart-page__items {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    padding: 0.5rem 1.25rem;
  }
  .cart-page__aside {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1.5rem;
  }
  .cart-page__aside-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }
  .cart-page__items .cart-line {
    grid-template-columns: 5.5rem 1fr auto;
  }
  .cart-page__items .cart-line__media {
    width: 5.5rem;
    height: 5.5rem;
  }
  @media (max-width: 520px) {
    .cart-line {
      grid-template-columns: 3.5rem 1fr;
    }
    .cart-line__end {
      grid-column: 2;
      align-items: flex-start;
      text-align: start;
    }
    .cart-page__items .cart-line {
      grid-template-columns: 4rem 1fr;
    }
    .cart-page__items .cart-line__media {
      width: 4rem;
      height: 4rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-scrim, .cart-drawer, .cart-line.is-removing {
      transition: none;
    }
  }
}
@layer utilities {
  .checkout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 900px) {
    .checkout {
      grid-template-columns: minmax(0, 1fr) 22rem;
      gap: 2rem;
    }
  }
  .checkout-steps {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }
  .checkout-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 0;
    min-width: 0;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-weight: 500;
    background: transparent;
    border: 0;
    cursor: default;
    text-align: start;
  }
  .checkout-step[data-checkout-goto] {
    cursor: pointer;
  }
  .checkout-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--duration-fast, 120ms) var(--ease-out, ease), color var(--duration-fast, 120ms) var(--ease-out, ease), box-shadow var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .checkout-step__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .checkout-step::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    border-radius: 1px;
    background-color: var(--border-secondary);
    margin-inline-start: 0.25rem;
  }
  .checkout-step:last-child::after {
    display: none;
  }
  .checkout-step.is-current {
    color: var(--text-primary);
    font-weight: 600;
  }
  .checkout-step.is-current .checkout-step__num {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .checkout-step.is-complete {
    color: var(--text-secondary);
  }
  .checkout-step.is-complete .checkout-step__num {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .checkout-step.is-complete::after {
    background-color: var(--bg-brand-solid);
  }
  .checkout__panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .checkout__panel[hidden] {
    display: none;
  }
  .checkout__panel-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
  }
  .checkout__panel-title:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 4px;
    border-radius: var(--radius-sm, 4px);
  }
  .checkout__section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .checkout__section-head {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .checkout__grid {
    display: grid;
    gap: 0.875rem 1rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 560px) {
    .checkout__grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  .checkout__grid .col-span-2 {
    grid-column: 1 / -1;
  }
  .co-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    cursor: pointer;
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-out, ease), background-color var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .co-option:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary-hover, var(--border-primary));
  }
  .co-option:has(input:focus-visible) {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .co-option:has(input:checked) {
    box-shadow: inset 0 0 0 2px var(--border-focus);
    background-color: var(--bg-primary-subtle);
  }
  .co-option__radio {
    flex: 0 0 auto;
    accent-color: var(--bg-brand-solid);
    width: 1.125rem;
    height: 1.125rem;
  }
  .co-option__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .co-option__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .co-option__desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .co-option__icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--text-secondary);
    width: 1.75rem;
    text-align: center;
  }
  .co-option__price {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .co-option__price--free {
    color: var(--text-success);
  }
  .co-options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .checkout__aside {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1.5rem;
  }
  .checkout__aside-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }
  .checkout__review-line {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-secondary);
  }
  .checkout__review-line:last-child {
    border-bottom: 0;
  }
  .checkout__review-media {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    background-color: var(--bg-secondary);
    flex: 0 0 auto;
    position: relative;
  }
  .checkout__review-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .checkout__review-qty {
    position: absolute;
    top: -0.375rem;
    inset-inline-end: -0.375rem;
  }
  .checkout__review-info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .checkout__review-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .checkout__review-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .checkout__review-price {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .checkout__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.25rem;
  }
  .checkout__nav .checkout__nav-spacer {
    flex: 1 1 auto;
  }
  .checkout__express {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
  .checkout__express-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .checkout__express-divider::before, .checkout__express-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--border-secondary);
  }
  @media (max-width: 560px) {
    .checkout-step__label {
      display: none;
    }
    .checkout-step {
      flex: 0 0 auto;
    }
    .checkout-step:not(:last-child) {
      flex: 1 1 auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .checkout-step__num, .co-option {
      transition: none;
    }
  }
}
@layer utilities {
  .pay-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .pay-method {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .pay-method:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .pay-method.is-default {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .pay-method__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 2rem;
    border-radius: var(--radius-md, 6px);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1.25rem;
    flex: 0 0 auto;
  }
  .pay-method__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .pay-method__number {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .pay-method__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
    align-items: center;
  }
  .pay-method__badges {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
  }
  .pay-method__actions {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
  }
  .pay-method--expired .pay-method__brand {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .pay-method__expiry-warn {
    color: var(--text-warning);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .pay-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl, 12px);
    background-color: transparent;
    border: 1px dashed var(--border-primary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--duration-fast, 120ms) var(--ease-out, ease), color var(--duration-fast, 120ms) var(--ease-out, ease), background-color var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .pay-add-btn:hover {
    border-color: var(--border-focus);
    color: var(--text-primary);
    background-color: var(--bg-primary-subtle);
  }
  .pay-add-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .pay-add-form {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .pay-add-form__grid {
    display: grid;
    gap: 0.875rem 1rem;
    grid-template-columns: 1fr 1fr;
  }
  .pay-add-form__grid .col-span-2 {
    grid-column: 1 / -1;
  }
  .pay-add-preview {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 1rem;
  }
  .pay-wallets {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .pay-wallet {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .pay-wallet__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1.25rem;
    flex: 0 0 auto;
  }
  .pay-wallet__info {
    min-width: 0;
  }
  .pay-wallet__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .pay-wallet__status {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .pay-wallet.is-connected .pay-wallet__status {
    color: var(--text-success);
  }
  .pay-secure-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .pay-secure-note i {
    color: var(--text-success);
  }
  @media (max-width: 520px) {
    .pay-add-form__grid {
      grid-template-columns: 1fr;
    }
    .pay-method {
      grid-template-columns: auto 1fr;
    }
    .pay-method__actions {
      grid-column: 2;
      justify-content: flex-end;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .pay-method, .pay-add-btn {
      transition: none;
    }
  }
}
@layer utilities {
  .order-track {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .order-track__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    position: relative;
  }
  .order-track__step::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    inset-inline-start: calc(-50% + 1.125rem);
    width: calc(100% - 2.25rem);
    height: 2px;
    background-color: var(--border-secondary);
    z-index: 0;
  }
  .order-track__step:first-child::before {
    display: none;
  }
  .order-track__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    color: var(--text-tertiary);
    font-size: 0.9375rem;
  }
  .order-track__labels {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .order-track__label {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
  }
  .order-track__date {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .order-track__step.is-complete .order-track__icon {
    background-color: var(--bg-success-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .order-track__step.is-complete::before {
    background-color: var(--bg-success-solid);
  }
  .order-track__step.is-complete .order-track__label {
    color: var(--text-primary);
  }
  .order-track__step.is-current .order-track__icon {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .order-track__step.is-current .order-track__label {
    color: var(--text-primary);
  }
  .order-track__step.is-cancelled .order-track__icon {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
    box-shadow: none;
  }
  @media (max-width: 640px) {
    .order-track {
      flex-direction: column;
      gap: 0;
    }
    .order-track__step {
      flex-direction: row;
      align-items: flex-start;
      gap: 0.75rem;
      text-align: start;
      padding-bottom: 1.25rem;
    }
    .order-track__step::before {
      top: 2.25rem;
      inset-inline-start: 1.0625rem;
      width: 2px;
      height: calc(100% - 1.25rem);
    }
    .order-track__labels {
      align-items: flex-start;
    }
    .order-track__label {
      margin-top: 0.3125rem;
    }
  }
  .order-history {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .order-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .order-row:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .order-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
  }
  .order-row__id {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .order-row__date {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .order-row__body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .order-row__thumbs {
    display: inline-flex;
  }
  .order-row__thumb {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    background-color: var(--bg-secondary);
    box-shadow: 0 0 0 2px var(--bg-primary);
    margin-inline-start: -0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
  }
  .order-row__thumb:first-child {
    margin-inline-start: 0;
  }
  .order-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .order-row__more {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    align-self: center;
    margin-inline-start: 0.25rem;
  }
  .order-row__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .order-row__total {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .order-row__actions {
    display: inline-flex;
    gap: 0.375rem;
  }
  @media (max-width: 640px) {
    .order-row {
      grid-template-columns: 1fr;
    }
    .order-row__end {
      align-items: flex-start;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
  }
  .order-detail {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 900px) {
    .order-detail {
      grid-template-columns: minmax(0, 1fr) 20rem;
      gap: 2rem;
    }
  }
  .order-detail__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-secondary);
    margin-bottom: 1.25rem;
  }
  .order-detail__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
  }
  .order-detail__sub {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
  }
  .order-detail__card {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    padding: 1.25rem;
  }
  .order-detail__card + .order-detail__card {
    margin-top: 1rem;
  }
  .order-detail__card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
  }
  .order-events {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .order-event {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
  }
  .order-event__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .order-event__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 2px var(--border-primary);
    flex: 0 0 auto;
    margin-top: 0.25rem;
  }
  .order-event__line {
    width: 2px;
    flex: 1 1 auto;
    background-color: var(--border-secondary);
    margin: 0.25rem 0;
    min-height: 1rem;
  }
  .order-event:last-child .order-event__line {
    display: none;
  }
  .order-event__body {
    padding-bottom: 1rem;
  }
  .order-event__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .order-event__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .order-event.is-done .order-event__dot {
    background-color: var(--bg-success-solid);
    box-shadow: none;
  }
  .order-event.is-done .order-event__line {
    background-color: var(--bg-success-solid);
  }
  .order-event.is-current .order-event__dot {
    background-color: var(--bg-brand-solid);
    box-shadow: none;
    outline: 3px solid var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 3px solid color-mix(in oklch, var(--bg-brand-solid) 25%, transparent);
    }
    outline-offset: 0;
  }
  .order-eta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .order-eta__icon {
    font-size: 1.25rem;
    flex: 0 0 auto;
  }
  .order-eta__title {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .order-eta__sub {
    font-size: 0.8125rem;
    opacity: 0.9;
  }
  .order-map {
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    background-image: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
    font-size: 1.75rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .order-row {
      transition: none;
    }
  }
}
@layer utilities {
  .invoice-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .invoice-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto auto;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .invoice-row:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .invoice-row__id {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .invoice-row__sub {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .invoice-row__dates {
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .invoice-row__amount {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  .invoice-row__actions {
    display: inline-flex;
    gap: 0.25rem;
  }
  .invoice-list__head {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto auto;
    gap: 1.25rem;
    padding: 0 1.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
  }
  @media (max-width: 640px) {
    .invoice-row {
      grid-template-columns: 1fr auto;
    }
    .invoice-row__dates {
      grid-column: 1;
    }
    .invoice-row__actions {
      grid-column: 2;
      justify-content: flex-end;
    }
    .invoice-list__head {
      display: none;
    }
  }
  .invoice-doc {
    max-width: 46rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .invoice-doc__inner {
    padding: 2rem;
  }
  @media (min-width: 640px) {
    .invoice-doc__inner {
      padding: 2.5rem;
    }
  }
  .invoice-doc__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .invoice-doc__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .invoice-doc__logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
  }
  .invoice-doc__brand-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .invoice-doc__brand-sub {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .invoice-doc__head-right {
    text-align: end;
  }
  .invoice-doc__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .invoice-doc__number {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .invoice-doc__parties {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
    padding: 1.5rem 0;
  }
  @media (max-width: 520px) {
    .invoice-doc__parties {
      grid-template-columns: 1fr;
    }
  }
  .invoice-doc__party-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
    margin-bottom: 0.375rem;
  }
  .invoice-doc__party-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .invoice-doc__party-detail {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    line-height: 1.5;
  }
  .invoice-doc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
  }
  .invoice-doc__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .invoice-doc__meta-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
  }
  .invoice-doc__meta-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
  }
  .invoice-doc__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
  }
  .invoice-doc__table thead th {
    text-align: start;
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .invoice-doc__table thead th.is-num {
    text-align: end;
  }
  .invoice-doc__table tbody td {
    padding: 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-secondary);
    vertical-align: top;
  }
  .invoice-doc__table tbody td.is-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }
  .invoice-doc__table .invoice-doc__item-name {
    color: var(--text-primary);
    font-weight: 500;
  }
  .invoice-doc__table .invoice-doc__item-desc {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-top: 0.125rem;
  }
  .invoice-doc__totals {
    display: flex;
    justify-content: flex-end;
    padding-top: 1.25rem;
  }
  .invoice-doc__totals-inner {
    width: 100%;
    max-width: 18rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .invoice-doc__total-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
  }
  .invoice-doc__total-label {
    color: var(--text-secondary);
  }
  .invoice-doc__total-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .invoice-doc__total-divider {
    height: 1px;
    background-color: var(--border-secondary);
    border: 0;
    margin: 0.25rem 0;
  }
  .invoice-doc__grand {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
  }
  .invoice-doc__grand-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .invoice-doc__grand-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .invoice-doc__paid-value {
    color: var(--text-success);
  }
  .invoice-doc__due-value {
    color: var(--text-danger);
  }
  .invoice-doc__notes {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-secondary);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    line-height: 1.6;
  }
  .invoice-doc__notes-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
  }
  .invoice-doc__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-secondary);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
  }
  .invoice-doc__toolbar-spacer {
    flex: 1 1 auto;
  }
  @media print {
    .invoice-doc {
      border: 0;
      box-shadow: none;
      max-width: none;
    }
    .invoice-doc__toolbar {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .invoice-row {
      transition: none;
    }
  }
}
@layer utilities {
  .receipt {
    max-width: 40rem;
    margin-inline: auto;
  }
  .receipt__hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0 1.75rem;
  }
  .receipt__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
    font-size: 1.5rem;
  }
  .receipt__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .receipt__sub {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    max-width: 30rem;
  }
  .receipt__order-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .receipt__card {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .receipt__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-secondary);
  }
  .receipt__card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }
  .receipt__section {
    padding: 1.25rem;
  }
  .receipt__section + .receipt__section {
    border-top: 1px solid var(--border-secondary);
  }
  .receipt__items {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .receipt__item {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: 0.875rem;
    align-items: center;
  }
  .receipt__item-media {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    background-color: var(--bg-secondary);
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quaternary);
  }
  .receipt__item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .receipt__item-qty {
    position: absolute;
    top: -0.375rem;
    inset-inline-end: -0.375rem;
  }
  .receipt__item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
  }
  .receipt__item-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .receipt__item-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .receipt__meta-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 480px) {
    .receipt__meta-grid {
      grid-template-columns: 1fr;
    }
  }
  .receipt__meta-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
    margin-bottom: 0.25rem;
  }
  .receipt__meta-value {
    font-size: 0.8125rem;
    color: var(--text-primary);
    line-height: 1.5;
  }
  .receipt__meta-value--brand {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .receipt__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    margin-top: 1.25rem;
  }
  .receipt__next {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-top: 1.5rem;
  }
  .receipt__next-item {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
  }
  .receipt__next-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-secondary);
    color: var(--text-icon-brand, var(--text-secondary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
  }
  .receipt__next-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .receipt__next-desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.5;
  }
  @media print {
    .receipt__card {
      box-shadow: none;
    }
    .receipt__actions {
      display: none;
    }
  }
}
@layer utilities {
  .sub-current {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 1.5rem;
    align-items: center;
    padding: 1.5rem;
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .sub-current__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-quaternary);
  }
  .sub-current__plan {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sub-current__price {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
  }
  .sub-current__renew {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
  }
  .sub-current__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
  }
  @media (max-width: 640px) {
    .sub-current {
      grid-template-columns: 1fr;
    }
    .sub-current__actions {
      justify-content: flex-start;
    }
  }
  .sub-meters {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .sub-meter {
    padding: 1rem 1.125rem;
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .sub-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .sub-meter__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .sub-meter__value {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .sub-meter__track {
    height: 0.5rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .sub-meter__fill {
    height: 100%;
    border-radius: inherit;
    background-color: var(--bg-brand-solid);
    transition: width var(--duration-normal, 200ms) var(--ease-out, ease);
  }
  .sub-meter__fill--warn {
    background-color: var(--bg-warning-solid);
  }
  .sub-meter__fill--over {
    background-color: var(--bg-danger-solid);
  }
  .sub-meter__note {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.375rem;
  }
  .sub-meter__note--warn {
    color: var(--text-warning);
  }
  .sub-meter__note--over {
    color: var(--text-danger);
  }
  .sub-billing {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
  }
  .sub-billing__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-tertiary);
    transition: color var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .sub-billing__label--m {
    color: var(--text-primary);
    font-weight: 600;
  }
  .sub-billing:has(.sub-billing-switch[aria-checked="true"]) .sub-billing__label--m {
    color: var(--text-tertiary);
    font-weight: 500;
  }
  .sub-billing:has(.sub-billing-switch[aria-checked="true"]) .sub-billing__label--a {
    color: var(--text-primary);
    font-weight: 600;
  }
  .sub-billing-switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border-radius: var(--radius-full, 999px);
    border: 0;
    cursor: pointer;
    background-color: var(--bg-quaternary-solid, var(--border-primary));
    transition: background-color var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .sub-billing-switch[aria-checked="true"] {
    background-color: var(--bg-brand-solid);
  }
  .sub-billing-switch:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .sub-billing-switch__knob {
    position: absolute;
    top: 0.1875rem;
    inset-inline-start: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-full, 999px);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-toggle-thumb, var(--shadow-sm));
    transition: transform var(--duration-fast, 120ms) var(--ease-out, ease);
  }
  .sub-billing-switch[aria-checked="true"] .sub-billing-switch__knob {
    transform: translateX(1.25rem);
  }
  [dir="rtl"] .sub-billing-switch[aria-checked="true"] .sub-billing-switch__knob {
    transform: translateX(-1.25rem);
  }
  .sub-plans {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  .sub-plan {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.5rem;
    border-radius: var(--radius-2xl, 16px);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    position: relative;
  }
  .sub-plan.is-recommended {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .sub-plan__badge {
    position: absolute;
    top: -0.6875rem;
    inset-inline-end: 1.25rem;
  }
  .sub-plan__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .sub-plan__desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .sub-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
  }
  .sub-plan__amount {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .sub-plan__period {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .sub-plan__features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sub-plan__feature {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .sub-plan__feature i {
    color: var(--text-success);
    margin-top: 0.1875rem;
    flex: 0 0 auto;
  }
  .sub-plan__cta {
    margin-top: auto;
  }
  .sub-invoice {
    padding: 1.25rem;
    border-radius: var(--radius-xl, 12px);
    background-color: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .sub-invoice__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sub-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1.125rem 1.25rem;
    border-radius: var(--radius-xl, 12px);
    box-shadow: inset 0 0 0 1px var(--border-danger, var(--border-secondary));
    background-color: var(--bg-danger-subtle);
  }
  .sub-danger__text {
    min-width: 0;
  }
  .sub-danger__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .sub-danger__desc {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .sub-danger__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .sub-meter__fill, .sub-billing__label, .sub-billing-switch, .sub-billing-switch__knob {
      transition: none;
    }
  }
}
@layer utilities {
  .catalog {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  @media (max-width: 64rem) {
    .catalog {
      grid-template-columns: minmax(0, 1fr);
    }
    .catalog__rail {
      display: none;
    }
  }
  .catalog__rail {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
  }
  .catalog__facet {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .catalog__facet + .catalog__facet {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-divider);
  }
  .catalog__facet-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
  }
  .catalog__toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .catalog__count {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  .catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
  }
  .catalog__grid.is-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalog-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
    overflow: hidden;
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-out, ease-out), border-color var(--duration-fast, 100ms) var(--ease-out, ease-out);
  }
  .catalog-tile:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-primary);
  }
  .catalog-tile__media {
    position: relative;
    aspect-ratio: 4 / 3;
  }
  .catalog-tile__badges {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    display: flex;
    gap: 0.375rem;
  }
  .catalog-tile__fav {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
  .catalog-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.875rem 1rem 1rem;
  }
  .catalog-tile__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .catalog-tile__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .catalog-tile__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.125rem;
  }
  .catalog-tile__amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .catalog-tile__was {
    font-size: 0.8125rem;
    color: var(--text-quaternary);
    text-decoration: line-through;
  }
  .catalog-tile__foot {
    margin-top: 0.5rem;
  }
  .catalog__grid.is-list .catalog-tile {
    flex-direction: row;
  }
  .catalog__grid.is-list .catalog-tile__media {
    width: 12rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }
  .catalog__grid.is-list .catalog-tile__body {
    flex: 1;
  }
  @media (max-width: 30rem) {
    .catalog__grid.is-list .catalog-tile {
      flex-direction: column;
    }
    .catalog__grid.is-list .catalog-tile__media {
      width: 100%;
      aspect-ratio: 4 / 3;
    }
  }
}
@layer utilities {
  .wishlist__toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .wishlist__count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .wishlist-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
  }
  .wishlist-row + .wishlist-row {
    margin-top: 0.625rem;
  }
  .wishlist-row__media {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .wishlist-row__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  .wishlist-row__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .wishlist-row__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .wishlist-row__price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
  }
  .wishlist-row__actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
  }
  @media (max-width: 40rem) {
    .wishlist-row {
      flex-wrap: wrap;
    }
    .wishlist-row__actions {
      width: 100%;
      justify-content: flex-end;
    }
  }
}
@layer utilities {
  .reviews {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  @media (max-width: 56rem) {
    .reviews {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .reviews-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
  }
  .reviews-summary__score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .reviews-summary__avg {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
  }
  .reviews-summary__out {
    font-size: 1rem;
    color: var(--text-tertiary);
  }
  .reviews-summary__count {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .review-bars {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .review-bar {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
    gap: 0.5rem;
  }
  .review-bar__label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .review-bar__track {
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .review-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--bg-warning-solid);
    width: calc(var(--review-pct, 0) * 1%);
  }
  .review-bar__count {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-align: right;
  }
  .review-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
    margin-bottom: 1.5rem;
  }
  .review {
    padding: 1.25rem 0;
  }
  .review + .review {
    border-top: 1px solid var(--border-divider);
  }
  .review__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .review__who {
    min-width: 0;
    flex: 1;
  }
  .review__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .review__date {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .review__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.5rem 0 0.25rem;
  }
  .review__body {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
  }
  .review__foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
  }
  .review__helpful {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .return-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0;
  }
  .return-item + .return-item {
    border-top: 1px solid var(--border-divider);
  }
  .return-item__check {
    padding-top: 0.25rem;
  }
  .return-item__media {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .return-item__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .return-item__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .return-item__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .return-item__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.375rem;
  }
  .return-summary {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .return-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  .return-summary__row--total {
    padding-top: 0.625rem;
    border-top: 1px solid var(--border-divider);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  @media (max-width: 40rem) {
    .return-item {
      flex-wrap: wrap;
    }
    .return-item__controls {
      width: 100%;
    }
  }
}
@layer utilities {
  .promo-applied {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-success);
    background-color: var(--bg-success-subtle);
    box-shadow: inset 0 0 0 1px var(--border-success);
  }
  .promo-applied__code {
    font-family: var(--font-mono, 'Space Mono', ui-monospace, monospace);
    letter-spacing: 0.03em;
  }
  .promo-code {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, 'Space Mono', ui-monospace, monospace);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .promo-usage {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
  }
  .promo-usage__track {
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .promo-usage__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--bg-brand-solid);
    width: calc(var(--promo-pct, 0) * 1%);
  }
  .promo-usage__label {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .donate-amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
  }
  @media (max-width: 30rem) {
    .donate-amounts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .donate-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    cursor: pointer;
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-out, ease-out), background-color var(--duration-fast, 100ms) var(--ease-out, ease-out);
  }
  .donate-amount:hover {
    background-color: var(--bg-secondary);
  }
  .donate-amount > input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .donate-amount.is-selected, .donate-amount:has(input:checked) {
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid);
  }
  .donate-amount:has(input:focus-visible) {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .donate-custom {
    position: relative;
  }
  .donate-custom__symbol {
    position: absolute;
    inset-inline-start: 0.875rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-tertiary);
    pointer-events: none;
  }
  .donate-custom .form-control {
    padding-inline-start: 1.75rem;
    font-size: 1.125rem;
    font-weight: 700;
  }
  .donate-goal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .donate-goal__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .donate-goal__raised {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
  }
  .donate-goal__target {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .donate-goal__track {
    height: 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .donate-goal__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--bg-brand-solid);
    width: calc(var(--donate-pct, 0) * 1%);
  }
  @media (prefers-reduced-motion: reduce) {
    .donate-amount {
      transition: none;
    }
  }
}
@layer utilities {
  .glass-surface {
    position: relative;
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-primary) 62%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-secondary) 60%, transparent), var(--shadow-lg);
    }
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
  .glass-surface--strong {
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-primary) 80%, transparent);
    }
  }
  .glass-surface--subtle {
    background-color: var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-primary) 45%, transparent);
    }
  }
  .glass-surface--brand {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-brand-solid) 22%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--bg-brand-solid), var(--shadow-lg);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-brand-solid) 30%, transparent), var(--shadow-lg);
    }
  }
  .glass-stage {
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    background-image: linear-gradient(135deg, var(--bg-brand-solid), var(--bg-secondary) 60%, var(--bg-tertiary));
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-surface {
      background-color: var(--bg-primary);
    }
  }
  .aurora {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--bg-secondary);
    isolation: isolate;
  }
  .aurora__blob {
    position: absolute;
    width: 60%;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    filter: blur(48px);
    opacity: 0.55;
    z-index: -1;
    will-change: transform;
  }
  .aurora__blob:nth-child(1) {
    inset-block-start: -20%;
    inset-inline-start: -10%;
    background-color: var(--bg-brand-solid);
    animation: aurora-drift-a 18s ease-in-out infinite;
  }
  .aurora__blob:nth-child(2) {
    inset-block-end: -25%;
    inset-inline-end: -5%;
    background-color: var(--bg-info-solid);
    animation: aurora-drift-b 22s ease-in-out infinite;
  }
  .aurora__blob:nth-child(3) {
    inset-block-start: 20%;
    inset-inline-start: 40%;
    background-color: var(--bg-success-solid);
    animation: aurora-drift-c 26s ease-in-out infinite;
  }
  @keyframes aurora-drift-a {
    0%,100% {
      transform: translate3d(0,0,0) scale(1);
    }
    50% {
      transform: translate3d(12%,18%,0) scale(1.18);
    }
  }
  @keyframes aurora-drift-b {
    0%,100% {
      transform: translate3d(0,0,0) scale(1.1);
    }
    50% {
      transform: translate3d(-14%,-10%,0) scale(0.92);
    }
  }
  @keyframes aurora-drift-c {
    0%,100% {
      transform: translate3d(0,0,0) scale(0.95);
    }
    50% {
      transform: translate3d(-10%,12%,0) scale(1.12);
    }
  }
  .aurora__content {
    position: relative;
    z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .aurora__blob {
      animation: none;
    }
  }
  .gradient-text {
    background-image: linear-gradient(90deg, var(--bg-brand-solid), var(--bg-info-solid), var(--bg-success-solid), var(--bg-brand-solid));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .gradient-text--animate {
    animation: gradient-text-sweep 8s linear infinite;
  }
  .gradient-text--brand {
    background-image: linear-gradient(90deg, var(--bg-brand-solid), var(--bg-brand-solid-hover), var(--bg-brand-solid-active), var(--bg-brand-solid));
  }
  @keyframes gradient-text-sweep {
    to {
      background-position: 200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .gradient-text--animate {
      animation: none;
    }
  }
  .marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee__track {
    display: flex;
    width: max-content;
    gap: var(--marquee-gap, 3rem);
    animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
  }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track {
    animation-play-state: paused;
  }
  .marquee--reverse .marquee__track {
    animation-direction: reverse;
  }
  .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: var(--text-secondary);
  }
  @keyframes marquee-scroll {
    to {
      transform: translateX(-50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee {
      overflow-x: auto;
      -webkit-mask-image: none;
      mask-image: none;
    }
    .marquee__track {
      animation: none;
    }
  }
  .tilt-card {
    transform-style: preserve-3d;
    transition: transform var(--duration-normal, 200ms) var(--ease-out, ease-out), box-shadow var(--duration-normal, 200ms) var(--ease-out, ease-out);
    will-change: transform;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-secondary);
    background-color: var(--bg-primary);
  }
  .tilt-card:hover {
    box-shadow: var(--shadow-lg);
  }
  .tilt-card__layer {
    transform: translateZ(40px);
  }
  .tilt-card__layer--mid {
    transform: translateZ(24px);
  }
  .magnetic {
    transition: transform var(--duration-normal, 200ms) var(--ease-out, ease-out);
    will-change: transform;
  }
  .magnetic__label {
    display: inline-block;
    transition: transform var(--duration-slow, 300ms) var(--ease-out, ease-out);
  }
  .spotlight {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-secondary);
    background-color: var(--bg-primary);
  }
  .spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity var(--duration-normal, 200ms) var(--ease-out, ease-out);
    background: radial-gradient( 18rem circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--bg-brand-solid), transparent 60%);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( 18rem circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--bg-brand-solid) 22%, transparent), transparent 60%);
    }
    pointer-events: none;
  }
  .spotlight:hover::before, .spotlight:focus-within::before {
    opacity: 1;
  }
  .spotlight > * {
    position: relative;
    z-index: 1;
  }
  .spotlight-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .scramble {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    letter-spacing: 0.02em;
    white-space: pre;
  }
  .confetti-layer {
    position: fixed;
    z-index: 9999;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .confetti-bit {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 1px;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: confetti-fly 1s var(--ease-out, cubic-bezier(.2,.7,.3,1)) forwards;
  }
  .confetti-bit.is-brand {
    background-color: var(--bg-brand-solid);
  }
  .confetti-bit.is-success {
    background-color: var(--bg-success-solid);
  }
  .confetti-bit.is-warning {
    background-color: var(--bg-warning-solid);
  }
  .confetti-bit.is-info {
    background-color: var(--bg-info-solid);
  }
  .confetti-bit.is-danger {
    background-color: var(--bg-danger-solid);
  }
  @keyframes confetti-fly {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--cx, 0px)), calc(-50% + var(--cy, 0px))) rotate(var(--cr, 180deg));
    }
  }
  .coach {
    position: relative;
  }
  .coach__step {
    display: none;
  }
  .coach__step.is-active {
    display: block;
  }
  .coach__pop {
    max-width: 22rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    box-shadow: var(--shadow-lg);
  }
  .coach__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
  }
  .coach__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .coach__body {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .coach__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
  }
  .coach__dots {
    display: inline-flex;
    gap: 0.375rem;
  }
  .coach__dots > [data-tour-dot] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    border: 0;
    padding: 0;
  }
  .coach__dots > [data-tour-dot][aria-current="step"] {
    background-color: var(--bg-brand-solid);
  }
  .coach__target {
    box-shadow: 0 0 0 2px var(--border-focus), 0 0 0 6px var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px var(--border-focus), 0 0 0 6px color-mix(in srgb, var(--bg-brand-solid) 20%, transparent);
    }
    border-radius: var(--radius-lg);
  }
  .live-presence {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .live-presence__stack {
    display: inline-flex;
  }
  .live-presence__stack > .avatar {
    margin-inline-start: -0.5rem;
    box-shadow: 0 0 0 2px var(--bg-primary);
  }
  .live-presence__stack > .avatar:first-child {
    margin-inline-start: 0;
  }
  .live-presence__count {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .presence-dot {
    position: relative;
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-success-solid);
  }
  .presence-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--bg-success-solid);
    animation: presence-ping 1.8s var(--ease-out, ease-out) infinite;
  }
  @keyframes presence-ping {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(2.6);
      opacity: 0;
    }
  }
  .presence-canvas {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-secondary);
    background-color: var(--bg-secondary);
    min-height: 16rem;
  }
  .live-cursor {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    will-change: transform;
  }
  .live-cursor__arrow {
    color: var(--bg-brand-solid);
    font-size: 1rem;
    filter: drop-shadow(0 1px 1px var(--text-primary));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--text-primary) 25%, transparent));
    }
  }
  .live-cursor__tag {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-on-brand);
    background-color: var(--bg-brand-solid);
    white-space: nowrap;
  }
  .live-cursor--b .live-cursor__arrow {
    color: var(--bg-info-solid);
  }
  .live-cursor--b .live-cursor__tag {
    background-color: var(--bg-info-solid);
  }
  .live-cursor--c .live-cursor__arrow {
    color: var(--bg-success-solid);
  }
  .live-cursor--c .live-cursor__tag {
    background-color: var(--bg-success-solid);
  }
  .live-cursor--a {
    top: 20%;
    left: 15%;
    animation: cursor-drift-a 12s ease-in-out infinite;
  }
  .live-cursor--b {
    top: 55%;
    left: 60%;
    animation: cursor-drift-b 15s ease-in-out infinite;
  }
  .live-cursor--c {
    top: 70%;
    left: 30%;
    animation: cursor-drift-c 18s ease-in-out infinite;
  }
  @keyframes cursor-drift-a {
    0%,100% {
      transform: translate(0,0);
    }
    50% {
      transform: translate(120px,40px);
    }
  }
  @keyframes cursor-drift-b {
    0%,100% {
      transform: translate(0,0);
    }
    50% {
      transform: translate(-90px,-30px);
    }
  }
  @keyframes cursor-drift-c {
    0%,100% {
      transform: translate(0,0);
    }
    50% {
      transform: translate(60px,-50px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .presence-dot::after, .live-cursor {
      animation: none;
    }
  }
  .split-flap {
    display: inline-flex;
    gap: 0.25rem;
  }
  .split-flap__cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0.5rem 0.375rem;
    font-family: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-on-solid, var(--text-on-brand));
    background-color: var(--bg-tertiary-solid, var(--bg-brand-solid));
    border-radius: var(--radius-sm);
    transform-origin: center;
    animation: split-flip 0.5s var(--ease-out, cubic-bezier(.2,.7,.3,1)) both;
  }
  .split-flap__cell::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    height: 1px;
    background-color: var(--text-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--text-on-brand) 30%, transparent);
    }
  }
  .split-flap--muted .split-flap__cell {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
  }
  .split-flap--muted .split-flap__cell::after {
    background-color: var(--text-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--text-primary) 15%, transparent);
    }
  }
  .split-flap__cell:nth-child(1) {
    animation-delay: 0ms;
  }
  .split-flap__cell:nth-child(2) {
    animation-delay: 60ms;
  }
  .split-flap__cell:nth-child(3) {
    animation-delay: 120ms;
  }
  .split-flap__cell:nth-child(4) {
    animation-delay: 180ms;
  }
  .split-flap__cell:nth-child(5) {
    animation-delay: 240ms;
  }
  .split-flap__cell:nth-child(6) {
    animation-delay: 300ms;
  }
  .split-flap__cell:nth-child(7) {
    animation-delay: 360ms;
  }
  .split-flap__cell:nth-child(8) {
    animation-delay: 420ms;
  }
  .split-flap__cell:nth-child(n+9) {
    animation-delay: 480ms;
  }
  @keyframes split-flip {
    0% {
      transform: rotateX(-90deg);
      opacity: 0;
    }
    60% {
      transform: rotateX(12deg);
      opacity: 1;
    }
    100% {
      transform: rotateX(0);
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .split-flap__cell {
      animation: none;
    }
  }
  .marquee--vertical {
    -webkit-mask-image: linear-gradient(180deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(180deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee--vertical .marquee__track {
    flex-direction: column;
    width: auto;
    height: max-content;
    animation-name: marquee-scroll-y;
  }
  @keyframes marquee-scroll-y {
    to {
      transform: translateY(-50%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee--vertical {
      overflow-y: auto;
      -webkit-mask-image: none;
      mask-image: none;
    }
  }
}
@layer utilities {
  body {
    color: #379dff;
  }
}
@layer utilities {
  .cam {
    position: fixed;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    z-index: 9999;
    background-color: var(--bg-cam);
    color: var(--text-cam);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    --cam-accent: var(--bg-brand-solid);
    --cam-accent-ink: var(--text-on-brand);
    --ring-camera-focus: 0 0 0 2px var(--bg-cam), 0 0 0 4px var(--cam-accent);
  }
  .cam--embedded {
    position: relative;
    inset: auto;
    z-index: auto;
    height: 100%;
    width: 100%;
  }
  .cam--embedded .cam__controls {
    gap: 0.875rem;
    padding: 0.75rem 0.875rem max(0.875rem, env(safe-area-inset-bottom, 0.875rem));
  }
  .cam--embedded .cam__btn {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }
  .cam--embedded .cam__btn--sm {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }
  .cam--embedded .cam__shutter-ring {
    width: 60px;
    height: 60px;
    padding: 2px;
    border-width: 2px;
  }
  .cam--embedded .cam__topbar {
    padding: 8px 10px 6px;
  }
  .cam--embedded .cam__badge {
    font-size: 10px;
    padding: 3px 8px;
  }
  .cam__viewfinder {
    position: relative;
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }
  .cam__video {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .cam__flash {
    pointer-events: none;
    position: fixed;
    inset: 0;
    background-color: #fff;
    opacity: 0%;
    z-index: 10000;
    transition: opacity 150ms ease-out;
  }
  .cam__flash.is-active {
    opacity: 0.8;
  }
  .cam__topbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding: max(0.75rem, env(safe-area-inset-top, 0.75rem)) 1rem 0.75rem;
    z-index: 5;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
  }
  .cam__controls {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 6);
    padding: 1.25rem 1.5rem max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
    background-color: var(--bg-cam-controls);
  }
  .cam__btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
    width: 48px;
    height: 48px;
    background-color: var(--bg-cam-btn);
    color: var(--text-cam);
    border: 1px solid var(--border-cam-btn);
    font-size: 1.125rem;
    -webkit-tap-highlight-color: transparent;
  }
  .cam__btn:hover {
    background-color: var(--bg-cam-btn-hover);
  }
  .cam__btn:active {
    background-color: var(--bg-cam-btn-active);
    transform: scale(0.95);
  }
  .cam__btn:disabled {
    cursor: not-allowed;
    opacity: 30%;
  }
  .cam__btn:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: color-mix(in oklab, #fff 40%, transparent);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .cam__btn--sm {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
  }
  .cam__btn.is-torch-active, .cam .is-torch-active .cam__btn[data-cam-torch] {
    background-color: var(--bg-cam-torch-active);
    border-color: var(--border-cam-torch-active);
    color: var(--text-cam-torch-active);
  }
  .torch-active {
    background-color: var(--bg-cam-torch-active) !important;
    border-color: var(--border-cam-torch-active) !important;
    color: var(--text-cam-torch-active) !important;
  }
  .cam__shutter-ring {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: 72px;
    height: 72px;
    padding: 3px;
    border: 3px solid var(--bg-cam-shutter-ring);
    transition: border-color 100ms ease;
  }
  .cam__shutter {
    cursor: pointer;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: var(--bg-cam-shutter);
    -webkit-tap-highlight-color: transparent;
  }
  .cam__shutter:hover {
    background-color: var(--bg-cam-shutter-hover);
  }
  .cam__shutter:active {
    transform: scale(0.90);
  }
  .cam.is-holding .cam__shutter, .is-holding > .cam__shutter-ring .cam__shutter, .is-holding .cam__shutter {
    transform: scale(0.88);
  }
  .cam.is-recording .cam__shutter, .is-recording > .cam__shutter-ring .cam__shutter, .is-recording .cam__shutter {
    background-color: var(--bg-cam-shutter-recording);
    transform: scale(0.88);
  }
  .cam__shutter-ring {
    position: relative;
  }
  .cam.is-holding .cam__shutter-ring, .is-holding > .cam__shutter-ring, .is-holding .cam__shutter-ring {
    border-color: var(--bg-cam-shutter-recording);
    transition: border-color 500ms linear;
  }
  .cam.is-recording .cam__shutter-ring, .is-recording > .cam__shutter-ring, .is-recording .cam__shutter-ring {
    border-color: var(--bg-cam-shutter-recording);
    transition: border-color 100ms ease;
  }
  .cam__badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-cam-badge);
    color: var(--text-cam);
    backdrop-filter: blur(8px);
  }
  .cam__badge--success {
    background-color: var(--bg-cam-badge-success);
  }
  .cam__badge--danger {
    background-color: var(--bg-cam-badge-danger);
  }
  .cam__grid {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .cam__grid.is-visible {
    opacity: 1;
  }
  .cam__grid::before, .cam__grid::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.15);
  }
  .cam__grid::before {
    top: 0;
    bottom: 0;
    width: 1px;
    left: 33.33%;
    box-shadow: calc(33.33vw) 0 0 0 rgba(255,255,255,0.15);
  }
  .cam__grid::after {
    left: 0;
    right: 0;
    height: 1px;
    top: 33.33%;
    box-shadow: 0 calc(33.33vh) 0 0 rgba(255,255,255,0.15);
  }
  .cam__zoom {
    height: var(--spacing);
    width: calc(var(--spacing) * 32);
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
  }
  .cam__zoom::-webkit-slider-thumb {
    appearance: none;
    border-radius: var(--radius-full);
    width: 16px;
    height: 16px;
    background: white;
    border: none;
  }
  .cam--scanner {
    --bg-cam-scan-dim: rgba(0, 0, 0, 0.55);
    --color-cam-scan-corner: var(--text-cam, #fff);
    --color-cam-scan-success: var(--bg-cam-badge-success, #16a34a);
    --color-cam-scan-error: var(--bg-cam-badge-danger, #dc2626);
  }
  .cam--scanner .cam__controls {
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
  }
  .cam__scan-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    background-color: var(--bg-cam-scan-dim);
  }
  .cam__scan-frame {
    pointer-events: none;
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 180px;
    border: 2px solid var(--border-cam-scan-frame);
    border-radius: 12px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .cam--scanner .cam__scan-frame {
    box-shadow: 0 0 0 9999px var(--bg-cam-scan-dim);
  }
  .cam--scanner.cam--scanner-flat .cam__scan-frame {
    box-shadow: none;
  }
  .cam__scan-frame--wide {
    width: 300px;
    height: 200px;
  }
  .cam__scan-frame--narrow {
    width: 300px;
    height: 90px;
    border-radius: 8px;
  }
  .cam__scan-frame--square {
    width: 240px;
    height: 240px;
    border-radius: 16px;
  }
  .cam__scan-corners {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }
  .cam__scan-corners::before, .cam__scan-corners::after, .cam__scan-frame::before, .cam__scan-frame::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--color-cam-scan-corner);
    border-style: solid;
    border-width: 0;
    transition: border-color 200ms ease;
  }
  .cam__scan-frame::before {
    top: -1px;
    left: -1px;
    border-top-width: 3px;
    border-left-width: 3px;
    border-top-left-radius: inherit;
  }
  .cam__scan-frame::after {
    top: -1px;
    right: -1px;
    border-top-width: 3px;
    border-right-width: 3px;
    border-top-right-radius: inherit;
  }
  .cam__scan-corners::before {
    bottom: -1px;
    left: -1px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-bottom-left-radius: 12px;
  }
  .cam__scan-corners::after {
    bottom: -1px;
    right: -1px;
    border-bottom-width: 3px;
    border-right-width: 3px;
    border-bottom-right-radius: 12px;
  }
  .cam__scan-frame--square .cam__scan-corners::before {
    border-bottom-left-radius: 16px;
  }
  .cam__scan-frame--square .cam__scan-corners::after {
    border-bottom-right-radius: 16px;
  }
  .cam__scan-frame--narrow .cam__scan-corners::before {
    border-bottom-left-radius: 8px;
  }
  .cam__scan-frame--narrow .cam__scan-corners::after {
    border-bottom-right-radius: 8px;
  }
  .cam__scan-line {
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * 2);
    left: calc(var(--spacing) * 2);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--text-cam), transparent);
    opacity: 0.6;
    top: 50%;
    z-index: 5;
    animation: cam-scan-sweep 2s ease-in-out infinite;
  }
  @keyframes cam-scan-sweep {
    0%, 100% {
      top: 18%;
      opacity: 0.4;
    }
    50% {
      top: 82%;
      opacity: 0.85;
    }
  }
  .cam__scan-line--pulse {
    top: 50%;
    animation: cam-scan-pulse 1.4s ease-in-out infinite;
  }
  @keyframes cam-scan-pulse {
    0%, 100% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.85;
    }
  }
  .cam--scanner.is-detected .cam__scan-frame {
    border-color: var(--color-cam-scan-success);
  }
  .cam--scanner.is-detected .cam__scan-frame::before, .cam--scanner.is-detected .cam__scan-frame::after, .cam--scanner.is-detected .cam__scan-corners::before, .cam--scanner.is-detected .cam__scan-corners::after {
    border-color: var(--color-cam-scan-success);
  }
  .cam--scanner.is-detected .cam__scan-line {
    animation: none;
    opacity: 0;
  }
  .cam--scanner.is-error .cam__scan-frame {
    border-color: var(--color-cam-scan-error);
  }
  .cam--scanner.is-error .cam__scan-frame::before, .cam--scanner.is-error .cam__scan-frame::after, .cam--scanner.is-error .cam__scan-corners::before, .cam--scanner.is-error .cam__scan-corners::after {
    border-color: var(--color-cam-scan-error);
  }
  .cam--scanner.is-error .cam__scan-line {
    animation: none;
    opacity: 0;
  }
  .cam__scan-message {
    position: absolute;
    left: calc(1 / 2 * 100%);
    display: inline-flex;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    z-index: 6;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--text-cam, #fff);
    backdrop-filter: blur(8px);
    top: calc(50% - 120px);
    transition: background-color 200ms ease, color 200ms ease;
  }
  .cam--scanner.is-detected .cam__scan-message {
    background-color: var(--color-cam-scan-success);
    color: #fff;
  }
  .cam--scanner.is-error .cam__scan-message {
    background-color: var(--color-cam-scan-error);
    color: #fff;
  }
  .cam__scan-result {
    position: absolute;
    left: calc(1 / 2 * 100%);
    display: inline-flex;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    z-index: 6;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--text-cam, #fff);
    backdrop-filter: blur(8px);
    max-width: 80%;
    top: calc(50% + 108px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cam__scan-result__check {
    color: var(--color-cam-scan-success, #16a34a);
    font-size: 14px;
  }
  .cam__scan-hint {
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-cam-muted);
  }
  .cam__scan-hint--manual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .cam__scan-hint--manual button, .cam__scan-hint--manual a {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: var(--text-cam, #fff);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .cam__scan-line, .cam__scan-line--pulse {
      animation: none;
      opacity: 0.5;
      top: 50%;
    }
  }
  .cam--controls-right {
    flex-direction: row;
  }
  .cam--controls-right .cam__controls {
    flex-direction: column;
    justify-content: center;
    padding: 1rem max(1rem, env(safe-area-inset-right, 1rem)) 1rem 1rem;
    width: auto;
    min-width: 96px;
  }
  .cam--controls-right .cam__shutter-ring {
    width: 64px;
    height: 64px;
  }
  .cam--controls-right .cam__btn {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
  .cam--controls-left {
    flex-direction: row-reverse;
  }
  .cam--controls-left .cam__controls {
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1rem 1rem max(1rem, env(safe-area-inset-left, 1rem));
    width: auto;
    min-width: 96px;
  }
  .cam--controls-left .cam__shutter-ring {
    width: 64px;
    height: 64px;
  }
  .cam--controls-left .cam__btn {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
  .cam--scanner.cam--controls-right .cam__controls, .cam--scanner.cam--controls-left .cam__controls {
    gap: 0.25rem;
  }
  .cam.is-loading .cam__viewfinder::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    background-color: var(--bg-cam);
    z-index: 6;
  }
  .cam__error {
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    z-index: 6;
    background-color: var(--bg-cam);
  }
  .cam__error-icon {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    opacity: 40%;
  }
  .cam__error-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-cam);
  }
  .cam__error-text {
    max-width: var(--container-xs);
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-cam-muted);
  }
  @media (prefers-reduced-motion: reduce) {
    .cam__scan-line {
      animation: none;
      opacity: 0.5;
      top: 50%;
    }
    .cam__shutter:active {
      transform: none;
    }
    .cam__btn:active {
      transform: none;
    }
    .cam__flash {
      transition: none;
    }
  }
  .cam__focus-ring {
    pointer-events: none;
    position: absolute;
    width: 72px;
    height: 72px;
    margin-left: -36px;
    margin-top: -36px;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    z-index: 4;
    animation: cam-focus-ring 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  @keyframes cam-focus-ring {
    0% {
      transform: scale(1.6);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0.7;
    }
  }
  .cam__focus-ring--locked {
    border-color: var(--cam-accent, var(--bg-brand-solid));
    animation: none;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
  }
  @media (prefers-reduced-motion: reduce) {
    .cam__focus-ring {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
  .cam__exposure {
    position: absolute;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    width: 28px;
    height: 140px;
    z-index: 5;
  }
  .cam__exposure__track {
    position: relative;
    flex: 1;
    border-radius: var(--radius-full);
    width: 2px;
    background-color: rgba(255, 255, 255, 0.35);
  }
  .cam__exposure__thumb {
    position: absolute;
    left: calc(1 / 2 * 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 999px;
    background-color: var(--cam-accent, var(--bg-brand-solid));
    color: var(--cam-accent-ink, var(--text-on-brand));
    font-size: 11px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
  .cam__flash-mode {
    position: relative;
  }
  .cam__flash-mode-label {
    position: absolute;
    bottom: calc(var(--spacing) * -1);
    left: calc(1 / 2 * 100%);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--cam-accent, var(--bg-brand-solid));
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0 4px;
    border-radius: 3px;
    line-height: 1.2;
  }
  .cam__flash-mode[data-mode="off"] .cam__flash-mode-label {
    color: rgba(255, 255, 255, 0.55);
  }
  .cam__flash-mode[data-mode="off"] .cam__flash-mode-label::before {
    content: "Off";
  }
  .cam__flash-mode[data-mode="auto"] .cam__flash-mode-label::before {
    content: "Auto";
  }
  .cam__flash-mode[data-mode="on"] .cam__flash-mode-label::before {
    content: "On";
  }
  .cam__zoom-presets {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
  }
  .cam__zoom-preset {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-style: var(--tw-border-style);
    border-width: 0px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
  }
  .cam__zoom-preset:hover {
    color: #fff;
  }
  .cam__zoom-preset.is-active {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--cam-accent, var(--bg-brand-solid));
    transform: scale(1.08);
  }
  @media (prefers-reduced-motion: reduce) {
    .cam__zoom-preset {
      transition: none;
      transform: none;
    }
  }
  .cam__mode-strip {
    margin-top: var(--spacing);
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
    -webkit-user-select: none;
    user-select: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
  }
  .cam__mode-strip__item {
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    color: inherit;
    transition: color 120ms ease;
  }
  .cam__mode-strip__item:hover {
    color: rgba(255, 255, 255, 0.85);
  }
  .cam__mode-strip__item.is-active {
    color: var(--cam-accent, var(--bg-brand-solid));
  }
  .cam__gallery-thumb {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 0px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.6);
    padding: 0;
  }
  .cam__gallery-thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .cam__gallery-thumb__count {
    position: absolute;
    top: calc(var(--spacing) * -1);
    right: calc(var(--spacing) * -1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--cam-accent, var(--bg-brand-solid));
    color: var(--cam-accent-ink, var(--text-on-brand));
  }
  .cam__flip {
    position: relative;
  }
  .cam__flip i {
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cam__flip:active i {
    transform: rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .cam__flip i {
      transition: none;
      transform: none;
    }
  }
  .cam__level {
    pointer-events: none;
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    width: 200px;
    height: 1px;
    margin-left: -100px;
    margin-top: 0;
    background-color: rgba(255, 255, 255, 0.4);
    transform: rotate(var(--cam-level-angle, 0deg));
    transition: transform 80ms linear, background-color 120ms ease;
    z-index: 3;
  }
  .cam__level::before, .cam__level::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 16px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.6);
  }
  .cam__level::before {
    left: 0;
  }
  .cam__level::after {
    right: 0;
  }
  .cam__level.is-level {
    background-color: var(--cam-accent, var(--bg-brand-solid));
  }
  .cam__countdown {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    z-index: 6;
  }
  .cam__countdown__digit {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #fff;
    font-size: 120px;
    line-height: 1;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    animation: cam-countdown-pulse 1s ease-in-out;
  }
  @keyframes cam-countdown-pulse {
    0% {
      transform: scale(0.6);
      opacity: 0;
    }
    20% {
      transform: scale(1);
      opacity: 1;
    }
    80% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cam__countdown__digit {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
  .cam__processing {
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    z-index: 7;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
  }
  .cam__processing__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 999px;
    animation: cam-spin 0.8s linear infinite;
  }
  .cam__processing__label {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: #fff;
  }
  @keyframes cam-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cam__processing__spinner {
      animation: none;
    }
  }
  .cam__denied {
    position: absolute;
    inset: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 6);
    text-align: center;
    background-color: var(--bg-cam, #000);
    color: rgba(255, 255, 255, 0.85);
    z-index: 8;
  }
  .cam__denied__icon {
    font-size: 44px;
    opacity: 0.55;
  }
  .cam__denied__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .cam__denied__message {
    max-width: var(--container-xs);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 0.75;
  }
  .cam__denied__action {
    margin-top: calc(var(--spacing) * 2);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    transition: background-color 120ms ease;
  }
  .cam__denied__action:hover {
    background-color: rgba(255, 255, 255, 0.22);
  }
  .cam__grid--center::before, .cam__grid--center::after {
    background-color: transparent !important;
    box-shadow: none !important;
  }
  .cam__grid--center .cam__grid__cross::before, .cam__grid--center .cam__grid__cross::after {
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6);
  }
  .cam__grid--center .cam__grid__cross::before {
    top: 50%;
    left: calc(50% - 12px);
    width: 24px;
    height: 1px;
  }
  .cam__grid--center .cam__grid__cross::after {
    left: 50%;
    top: calc(50% - 12px);
    width: 1px;
    height: 24px;
  }
  .cam__shutter-ring--sm {
    width: 56px;
    height: 56px;
    border-width: 2px;
  }
  .cam__shutter-ring--lg {
    width: 88px;
    height: 88px;
    border-width: 4px;
  }
  .cam__shutter--video {
    background-color: var(--bg-cam-shutter-recording, #ef4444);
  }
  .cam__shutter--video.is-recording-toggle {
    background-color: var(--bg-cam-shutter-recording, #ef4444);
    border-radius: 6px !important;
    transform: scale(0.65);
  }
  .cam__btn:focus-visible, .cam__shutter:focus-visible, .cam__zoom-preset:focus-visible, .cam__mode-strip__item:focus-visible, .cam__gallery-thumb:focus-visible, .cam__flash-mode:focus-visible {
    outline: none;
    box-shadow: var(--ring-camera-focus, 0 0 0 2px var(--bg-cam, #000), 0 0 0 4px var(--bg-brand-solid));
  }
}
@layer utilities {
  .activity-log ol, .activity-log ul {
    margin: 0;
    padding: 0;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
  .activity-log ol, .activity-log ul {
    padding-left: 1.5em;
  }
  .activity-log ol > li, .activity-log ul > li {
    list-style-type: none;
  }
  .activity-log ul > li::before {
    content: '\2022';
  }
  .activity-log li::before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
  }
  .activity-log ol li {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    counter-increment: list-0;
  }
  .activity-log ol li:before {
    content: counter(list-0, decimal) '. ';
  }
  .activity-log-panel {
    background-color: var(--bg-activity-log-panel);
  }
  .activity-log-header {
    background-color: var(--bg-activity-log-header);
  }
  .activity-log-footer {
    background-color: var(--bg-activity-log-footer);
  }
  .post {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    max-width: 80%;
    flex-direction: column;
  }
  .post--owner {
    margin-left: auto;
    justify-content: flex-end;
  }
  .post--public {
    margin-left: 0;
  }
  .post--system {
    width: 100%;
    text-align: center;
    color: var(--text-post-system);
  }
  .post-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .post-date--public {
    display: inline-block;
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    color: var(--text-post-date);
  }
  .post-author--public {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-post-public);
  }
  .post-date--owner {
    margin-top: var(--spacing);
    margin-left: auto;
    display: inline-block;
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    color: var(--text-post-date);
  }
  .post-footer {
    margin-left: auto;
    justify-content: flex-end;
  }
  .post-bubble {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    padding: calc(var(--spacing) * 3);
  }
  .post-bubble--owner {
    margin-left: auto;
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    background-color: var(--bg-post-owner);
    color: var(--text-post-owner);
  }
  .post-bubble--public {
    margin-top: var(--spacing);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    background-color: var(--bg-post-public);
    color: var(--text-post-public);
  }
  .post-bubble--system {
    background-color: transparent;
    color: var(--text-post-system);
  }
  .post-body {
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    line-height: 1.55;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    line-height: 1.5;
    overflow-wrap: break-word;
    white-space: pre-line;
    color: inherit;
  }
  .post-actions {
    position: absolute;
    top: -24px;
    right: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    display: none;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: 1px;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
    background-color: var(--bg-post-actions);
    border-color: var(--border-post-actions);
  }
}
@layer utilities {
  .mapboxgl-popup {
    padding: 0 !important;
    filter: drop-shadow(var(--shadow-mapbox-popup));
  }
  .mapboxgl-popup-content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    padding: 0 !important;
    background-color: var(--bg-mapbox-popup);
    color: var(--text-mapbox);
    border: 1px solid var(--border-mapbox-popup);
  }
  .mapboxgl-popup-tip {
    border-top-color: var(--bg-mapbox-popup-tip) !important;
    border-bottom-color: var(--bg-mapbox-popup-tip) !important;
    border-left-color: var(--bg-mapbox-popup-tip) !important;
    border-right-color: var(--bg-mapbox-popup-tip) !important;
  }
  .mapboxgl-popup-anchor-top .mapboxgl-popup-tip, .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
  }
  .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
  }
  .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
  }
  .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
  }
  .mapboxgl-popup-close-button {
    margin: calc(var(--spacing) * 1.5);
    display: flex !important;
    &.collapse.show {
      display: flex !important;
    }
    width: 20px !important;
    height: 20px !important;
    align-items: center !important;
    justify-content: space-around !important;
    border-radius: var(--radius-full) !important;
    padding: calc(var(--spacing) * 2);
    font-size: 1rem !important;
    line-height: var(--tw-leading, 1.5rem) !important;
    color: var(--text-mapbox);
    background: transparent;
    transition: background-color 120ms ease;
  }
  .mapboxgl-popup-close-button:hover {
    background-color: var(--bg-secondary-subtle);
  }
  .mapboxgl-popup-close-button:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .mapboxgl-ctrl-group {
    background-color: var(--bg-mapbox-control) !important;
    border: 1px solid var(--border-mapbox-control) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
  }
  .mapboxgl-ctrl-group button {
    background-color: transparent !important;
    color: var(--text-mapbox-control) !important;
    transition: background-color 120ms ease;
  }
  .mapboxgl-ctrl-group button + button {
    border-top: 1px solid var(--border-mapbox-control) !important;
  }
  .mapboxgl-ctrl-group button:hover {
    background-color: var(--bg-secondary-subtle) !important;
  }
  .mapboxgl-ctrl-group button:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    filter: var(--mapbox-icon-filter, none);
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    --mapbox-icon-filter: invert(1) hue-rotate(180deg) brightness(1.1);
  }
  .mapboxgl-ctrl-scale {
    background-color: var(--bg-mapbox-attrib) !important;
    color: var(--text-mapbox-attrib) !important;
    border-color: var(--border-mapbox-control) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 10px !important;
  }
  .mapboxgl-ctrl-attrib {
    background-color: var(--bg-mapbox-attrib) !important;
    border-radius: var(--radius-sm) 0 0 0 !important;
  }
  .mapboxgl-ctrl-attrib a, .mapboxgl-ctrl-attrib {
    color: var(--text-mapbox-attrib) !important;
  }
  .mbx-map--chromeless .mapboxgl-ctrl-logo, .mbx-map--chromeless .mapboxgl-ctrl-attrib {
    display: none !important;
  }
  .mapbox-cluster {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--bg-mapbox-cluster);
    color: var(--text-mapbox-cluster);
    box-shadow: 0 0 0 6px var(--bg-mapbox-cluster-ring);
    cursor: pointer;
    font-size: 12px;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    transition: transform 120ms ease;
  }
  .mapbox-cluster:hover {
    transform: scale(1.06);
  }
  .mapbox-cluster--lg {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
    box-shadow: 0 0 0 8px var(--bg-mapbox-cluster-ring);
  }
  .mapbox-cluster--xl {
    min-width: 44px;
    height: 44px;
    font-size: 14px;
    box-shadow: 0 0 0 10px var(--bg-mapbox-cluster-ring);
  }
  .shipper-marker, .consignee-marker {
    pointer-events: none;
    position: relative;
    display: inline-block;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    vertical-align: middle;
    color: #fff;
  }
  .shipper-marker::before, .consignee-marker::before {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    --tw-content: '';
    content: var(--tw-content);
  }
  .shipper-marker::after, .consignee-marker::after {
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(1 / 2 * 100%);
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 2.5);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    border-radius: var(--radius-full);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-content: '';
    content: var(--tw-content);
  }
  .shipper-marker::before {
    background-color: var(--bg-mapbox-origin-marker-disc);
    border-color: var(--border-mapbox-origin-marker-disc);
  }
  .shipper-marker::after {
    background-color: var(--bg-mapbox-origin-marker);
  }
  .consignee-marker::before {
    background-color: var(--bg-mapbox-destination-marker-disc);
    border-color: var(--border-mapbox-destination-marker-disc);
  }
  .consignee-marker::after {
    background-color: var(--bg-mapbox-destination-marker);
  }
  .stop-marker {
    display: inline-block;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    width: 10px;
    height: 10px;
    background-color: var(--bg-mapbox-stop-marker);
    border: 2px solid var(--border-mapbox-stop-marker);
    border-radius: 50%;
  }
  .mbx-pin {
    pointer-events: auto;
    position: relative;
    --mbx-pin-color: var(--bg-mapbox-origin-marker);
    width: 38px;
    height: 48px;
  }
  .mbx-pin__head {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: #fff;
    height: 38px;
    font-size: 15px;
    background-color: var(--mbx-pin-color);
    border: 3px solid var(--bg-card);
    box-shadow: 0 3px 9px var(--alpha-neutral-900-30);
  }
  .mbx-pin::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(1 / 2 * 100%);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid var(--mbx-pin-color);
    filter: drop-shadow(0 1px 1px var(--alpha-neutral-900-30));
  }
  .mbx-pin--origin {
    --mbx-pin-color: var(--bg-mapbox-route-success);
  }
  .mbx-pin--destination {
    --mbx-pin-color: var(--bg-mapbox-route-primary);
  }
  .origin-marker {
    background-color: var(--bg-origin-marker);
  }
  .destination-marker {
    background-color: var(--bg-destination-marker);
  }
  .route-connector {
    background-color: var(--bg-route-connector);
  }
  .mapbox-pulse {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --pulse-color: var(--bg-brand-solid);
    --pulse-ring: var(--pulse-color);
    @supports (color: color-mix(in lab, red, red)) {
      --pulse-ring: color-mix(in oklch, var(--pulse-color) 40%, transparent);
    }
    width: 14px;
    height: 14px;
    background-color: var(--pulse-color);
    box-shadow: 0 0 0 0 var(--pulse-ring);
    animation: mapbox-pulse 1.6s ease-out infinite;
  }
  @keyframes mapbox-pulse {
    0% {
      box-shadow: 0 0 0 0 var(--pulse-ring);
    }
    70% {
      box-shadow: 0 0 0 14px transparent;
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }
  .mapbox-pulse--success {
    --pulse-color: var(--bg-success-solid);
  }
  .mapbox-pulse--warning {
    --pulse-color: var(--bg-warning-solid);
  }
  .mapbox-pulse--danger {
    --pulse-color: var(--bg-danger-solid);
  }
  @media (prefers-reduced-motion: reduce) {
    .mapbox-pulse {
      animation: none;
    }
  }
  .mapbox-stop {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #fff;
    width: 24px;
    height: 24px;
    background-color: var(--bg-brand-solid);
    font-size: 11px;
    box-shadow: 0 2px 6px var(--alpha-neutral-900-30);
    cursor: pointer;
  }
  .mapbox-stop--start {
    background-color: var(--bg-success-solid);
  }
  .mapbox-stop--end {
    background-color: var(--bg-danger-solid);
  }
  .labs-map-turf-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding: 3px 9px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-primary);
  }
  .labs-map-turf-chip:hover {
    border-color: var(--border-brand);
  }
  .labs-map-turf-chip__dot {
    flex: none;
    border-radius: var(--radius-full);
    width: 7px;
    height: 7px;
  }
  .labs-map-turf-chip__name {
    font-weight: 600;
  }
  .labs-map-turf-chip__meta {
    font-family: var(--font-mono, monospace);
    opacity: 0.6;
  }
  .mapbox-hub {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: #fff;
    width: 26px;
    height: 26px;
    background-color: var(--bg-brand-solid);
    font-size: 12px;
    box-shadow: 0 2px 6px var(--alpha-neutral-900-30);
    cursor: pointer;
  }
}
@layer utilities {
  .map-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 20rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
  }
  .map-shell--xs {
    min-height: 11rem;
  }
  .map-shell--sm {
    min-height: 15rem;
  }
  .map-shell--md {
    min-height: 20rem;
  }
  .map-shell--lg {
    min-height: 28rem;
  }
  .map-shell--tall {
    min-height: 34rem;
  }
  .map-shell--flush {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .map-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--bg-secondary);
    --map-graticule: var(--border-divider-subtle);
    @supports (color: color-mix(in lab, red, red)) {
      --map-graticule: color-mix(in oklch, var(--border-divider-subtle) 70%, transparent);
    }
    --map-graticule-strong: var(--border-divider);
    @supports (color: color-mix(in lab, red, red)) {
      --map-graticule-strong: color-mix(in oklch, var(--border-divider) 55%, transparent);
    }
    background-image: linear-gradient(0deg, var(--map-graticule) 1px, transparent 1px), linear-gradient(90deg, var(--map-graticule) 1px, transparent 1px), linear-gradient(0deg, var(--map-graticule-strong) 1px, transparent 1px), linear-gradient(90deg, var(--map-graticule-strong) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, 10rem 10rem, 10rem 10rem;
    background-position: center;
  }
  .map-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 55% at 32% 40%, var(--bg-tertiary), transparent 70%), radial-gradient(45% 40% at 78% 68%, var(--bg-tertiary), transparent 72%);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(60% 55% at 32% 40%, color-mix(in oklch, var(--bg-tertiary) 65%, transparent), transparent 70%), radial-gradient(45% 40% at 78% 68%, color-mix(in oklch, var(--bg-tertiary) 50%, transparent), transparent 72%);
    }
    pointer-events: none;
  }
  .map-shell__bar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--bg-panel);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-panel) 86%, transparent);
    }
    border-bottom: 1px solid var(--border-divider-subtle);
    backdrop-filter: blur(8px);
  }
  .map-shell__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .map-shell__subtitle {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.2;
  }
  .map-shell__bar-actions {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .map-shell:has(.map-shell__bar) .map-overlay--tl, .map-shell:has(.map-shell__bar) .map-overlay--tr {
    inset-block-start: 3rem;
  }
  .map-overlay {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    pointer-events: none;
  }
  .map-overlay > * {
    pointer-events: auto;
  }
  .map-overlay--tl {
    inset-block-start: 0;
    inset-inline-start: 0;
    align-items: flex-start;
  }
  .map-overlay--tr {
    inset-block-start: 0;
    inset-inline-end: 0;
    align-items: flex-end;
  }
  .map-overlay--bl {
    inset-block-end: 0;
    inset-inline-start: 0;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .map-overlay--br {
    inset-block-end: 0;
    inset-inline-end: 0;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .map-attribution {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-panel);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-panel) 80%, transparent);
    }
    color: var(--text-quaternary);
    font-size: 0.625rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .map-attribution a {
    color: var(--text-tertiary);
    text-decoration: none;
  }
  .map-attribution a:hover {
    text-decoration: underline;
  }
  .map-shell__skeleton {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .map-shell__skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 100deg, transparent 20%, var(--bg-primary) 40%, transparent 60% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 100deg, transparent 20%, color-mix(in oklch, var(--bg-primary) 55%, transparent) 40%, transparent 60% );
    }
    background-size: 200% 100%;
    animation: map-shell-shimmer 1.4s ease-in-out infinite;
  }
  .map-shell__skeleton > * {
    position: relative;
    z-index: 1;
  }
  @keyframes map-shell-shimmer {
    from {
      background-position: 180% 0;
    }
    to {
      background-position: -80% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .map-shell__skeleton::before {
      animation: none;
    }
  }
}
@layer utilities {
  .map-marker-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  .map-marker-layer > * {
    pointer-events: auto;
  }
  .map-marker-layer > .map-pin {
    position: absolute;
    transform: translate(-50%, -100%);
  }
  .map-marker-layer > .map-dot, .map-marker-layer > .map-marker-label {
    position: absolute;
    transform: translate(-50%, -50%);
  }
  .map-pin {
    --map-pin-color: var(--bg-brand-solid);
    --map-pin-ink: var(--text-on-solid);
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2.4rem;
    filter: drop-shadow(0 3px 6px var(--border-primary));
    @supports (color: color-mix(in lab, red, red)) {
      filter: drop-shadow(0 3px 6px color-mix(in oklch, var(--border-primary) 55%, transparent));
    }
  }
  .map-pin__head {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
    transform-origin: center;
    background-color: var(--map-pin-color);
    color: var(--map-pin-ink);
    border: 3px solid var(--bg-card);
    font-size: 0.875rem;
    line-height: 1;
  }
  .map-pin__head > * {
    transform: rotate(-45deg);
  }
  .map-pin__count {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    z-index: 1;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--bg-danger-solid);
    color: var(--text-on-solid);
    border: 2px solid var(--bg-card);
    font-size: 0.625rem;
    font-weight: 700;
  }
  .map-pin--sm {
    width: 1.5rem;
    height: 1.8rem;
  }
  .map-pin--sm .map-pin__head {
    font-size: 0.6875rem;
    border-width: 2px;
  }
  .map-pin--lg {
    width: 2.5rem;
    height: 3rem;
  }
  .map-pin--lg .map-pin__head {
    font-size: 1.0625rem;
  }
  .map-pin.is-selected, .map-pin.is-active {
    z-index: 5;
  }
  .map-pin.is-selected .map-pin__head, .map-pin.is-active .map-pin__head {
    box-shadow: 0 0 0 4px var(--map-pin-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--map-pin-color) 28%, transparent);
    }
  }
  .map-pin.is-muted {
    opacity: 0.55;
  }
  .map-pin:focus-visible, .map-pin[tabindex]:focus-visible .map-pin__head {
    outline: none;
  }
  .map-pin:focus-visible .map-pin__head {
    box-shadow: 0 0 0 3px var(--border-focus);
  }
  .map-dot {
    --map-dot-color: var(--bg-brand-solid);
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    background-color: var(--map-dot-color);
    border: 2px solid var(--bg-card);
    box-shadow: var(--shadow-sm);
  }
  .map-dot--sm {
    width: 0.625rem;
    height: 0.625rem;
  }
  .map-dot--lg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .map-dot.is-muted {
    opacity: 0.5;
  }
  .map-dot:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .map-marker-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .map-marker-label__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex: none;
    background-color: var(--map-pin-color, var(--bg-brand-solid));
  }
  .map-pin--brand {
    --map-pin-color: var(--bg-brand-solid);
  }
  .map-pin--success {
    --map-pin-color: var(--bg-success-solid);
  }
  .map-pin--warning {
    --map-pin-color: var(--bg-warning-solid);
  }
  .map-pin--danger {
    --map-pin-color: var(--bg-danger-solid);
  }
  .map-pin--info {
    --map-pin-color: var(--bg-info-solid);
  }
  .map-pin--purple {
    --map-pin-color: var(--bg-purple-solid);
  }
  .map-pin--indigo {
    --map-pin-color: var(--bg-indigo-solid);
  }
  .map-pin--teal {
    --map-pin-color: var(--bg-teal-solid);
  }
  .map-pin--pink {
    --map-pin-color: var(--bg-pink-solid);
  }
  .map-pin--origin {
    --map-pin-color: var(--bg-mapbox-route-success);
  }
  .map-pin--destination {
    --map-pin-color: var(--bg-mapbox-route-primary);
  }
  .map-dot--brand {
    --map-dot-color: var(--bg-brand-solid);
  }
  .map-dot--success {
    --map-dot-color: var(--bg-success-solid);
  }
  .map-dot--warning {
    --map-dot-color: var(--bg-warning-solid);
  }
  .map-dot--danger {
    --map-dot-color: var(--bg-danger-solid);
  }
  .map-dot--info {
    --map-dot-color: var(--bg-info-solid);
  }
  .map-dot--muted {
    --map-dot-color: var(--text-quaternary);
  }
  .map-marker-label--brand {
    --map-pin-color: var(--bg-brand-solid);
  }
  .map-marker-label--success {
    --map-pin-color: var(--bg-success-solid);
  }
  .map-marker-label--warning {
    --map-pin-color: var(--bg-warning-solid);
  }
  .map-marker-label--danger {
    --map-pin-color: var(--bg-danger-solid);
  }
  .map-marker-label--info {
    --map-pin-color: var(--bg-info-solid);
  }
}
@layer utilities {
  .map-mini {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 12rem;
    height: 8rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
  }
  .map-mini--xs {
    width: 6rem;
    height: 4rem;
  }
  .map-mini--sm {
    width: 9rem;
    height: 6rem;
  }
  .map-mini--md {
    width: 12rem;
    height: 8rem;
  }
  .map-mini--lg {
    width: 16rem;
    height: 11rem;
  }
  .map-mini--wide {
    width: 18rem;
    height: 8rem;
  }
  .map-mini--round {
    border-radius: 9999px;
    width: 7rem;
    height: 7rem;
  }
  .map-mini--button {
    cursor: pointer;
    transition: box-shadow 140ms ease, border-color 140ms ease;
  }
  .map-mini--button:hover {
    border-color: var(--border-brand);
    box-shadow: var(--shadow-md);
  }
  .map-mini--button:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .map-mini__viewport {
    position: absolute;
    z-index: 2;
    border: 2px solid var(--border-brand);
    border-radius: var(--radius-xs, 2px);
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 14%, transparent);
    }
    box-shadow: 0 0 0 1px var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--bg-card) 60%, transparent);
    }
    pointer-events: none;
  }
  .map-mini__label {
    position: absolute;
    inset-block-end: 0.375rem;
    inset-inline-start: 0.375rem;
    z-index: 3;
    max-width: calc(100% - 0.75rem);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-panel);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-panel) 84%, transparent);
    }
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(6px);
  }
  .map-overlay .map-mini {
    box-shadow: var(--shadow-md), 0 0 0 1px var(--border-primary);
  }
}
@layer utilities {
  .map-route-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .map-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .map-route__casing {
    fill: none;
    stroke: var(--map-route-casing, var(--bg-card));
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .map-route__line {
    fill: none;
    stroke: var(--map-route-color, var(--bg-mapbox-route-primary));
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .map-route--planned .map-route__line {
    stroke-dasharray: 1 7;
  }
  .map-route--primary {
    --map-route-color: var(--bg-mapbox-route-primary);
  }
  .map-route--secondary {
    --map-route-color: var(--bg-mapbox-route-secondary);
  }
  .map-route--success {
    --map-route-color: var(--bg-mapbox-route-success);
  }
  .map-route--danger {
    --map-route-color: var(--bg-mapbox-route-danger);
  }
  .map-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: var(--bg-brand-solid);
    color: var(--text-on-solid);
    border: 2px solid var(--bg-card);
    font-size: 0.6875rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
  }
  .map-marker-layer > .map-stop {
    position: absolute;
    transform: translate(-50%, -50%);
  }
  .map-stop--start {
    background-color: var(--bg-success-solid);
  }
  .map-stop--end {
    background-color: var(--bg-danger-solid);
  }
  .map-stop--via {
    background-color: var(--bg-secondary-solid, var(--text-tertiary));
  }
  .map-stop--lg {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
  }
  .map-journey {
    display: flex;
    flex-direction: column;
  }
  .map-journey__stop {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
  }
  .map-journey__stop:last-child {
    padding-bottom: 0;
  }
  .map-journey__marker {
    position: relative;
    z-index: 1;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border-radius: 9999px;
    background-color: var(--bg-card);
    border: 2px solid var(--map-journey-color, var(--bg-brand-solid));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--map-journey-color, var(--bg-brand-solid));
  }
  .map-journey__stop:not(:last-child) .map-journey__marker::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(1.25rem + 0.125rem);
    background-color: var(--border-divider);
  }
  .map-journey__body {
    min-width: 0;
    padding-block: 0.0625rem;
  }
  .map-journey__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
  }
  .map-journey__meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.3;
  }
  .map-journey__stop--origin {
    --map-journey-color: var(--bg-mapbox-route-success);
  }
  .map-journey__stop--destination {
    --map-journey-color: var(--bg-mapbox-route-primary);
  }
  .map-journey__stop--origin .map-journey__marker, .map-journey__stop--destination .map-journey__marker {
    background-color: var(--map-journey-color);
    color: var(--text-on-solid);
  }
  .map-route-summary {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
  }
  .map-route-summary__stat {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .map-route-summary__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  .map-route-summary__label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
  }
}
@layer utilities {
  .map-cluster {
    --map-cluster-color: var(--bg-brand-solid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    background-color: var(--map-cluster-color);
    color: var(--text-on-solid);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 6px var(--map-cluster-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 6px color-mix(in oklch, var(--map-cluster-color) 26%, transparent);
    }
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 120ms ease;
  }
  .map-cluster:hover {
    transform: scale(1.06);
  }
  .map-cluster:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .map-marker-layer > .map-cluster {
    position: absolute;
    transform: translate(-50%, -50%);
  }
  .map-marker-layer > .map-cluster:hover {
    transform: translate(-50%, -50%) scale(1.06);
  }
  .map-cluster--sm {
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: 0.6875rem;
    box-shadow: 0 0 0 5px var(--map-cluster-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 5px color-mix(in oklch, var(--map-cluster-color) 26%, transparent);
    }
  }
  .map-cluster--lg {
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
    box-shadow: 0 0 0 8px var(--map-cluster-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 8px color-mix(in oklch, var(--map-cluster-color) 24%, transparent);
    }
  }
  .map-cluster--xl {
    min-width: 2.75rem;
    height: 2.75rem;
    font-size: 0.875rem;
    box-shadow: 0 0 0 10px var(--map-cluster-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 10px color-mix(in oklch, var(--map-cluster-color) 22%, transparent);
    }
  }
  .map-cluster--low {
    --map-cluster-color: var(--bg-info-solid);
  }
  .map-cluster--mid {
    --map-cluster-color: var(--bg-warning-solid);
  }
  .map-cluster--high {
    --map-cluster-color: var(--bg-danger-solid);
  }
  :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .map-cluster {
    border-color: var(--text-on-solid);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--text-on-solid) 55%, transparent);
    }
    box-shadow: 0 0 0 6px var(--map-cluster-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 6px color-mix(in oklch, var(--map-cluster-color) 46%, transparent);
    }
  }
  :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .map-cluster--sm {
    box-shadow: 0 0 0 5px var(--map-cluster-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 5px color-mix(in oklch, var(--map-cluster-color) 46%, transparent);
    }
  }
  :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .map-cluster--lg {
    box-shadow: 0 0 0 8px var(--map-cluster-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 8px color-mix(in oklch, var(--map-cluster-color) 44%, transparent);
    }
  }
  :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .map-cluster--xl {
    box-shadow: 0 0 0 10px var(--map-cluster-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 10px color-mix(in oklch, var(--map-cluster-color) 42%, transparent);
    }
  }
  .map-cluster-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    font-size: 0.6875rem;
    color: var(--text-secondary);
  }
  .map-cluster-legend__title {
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.625rem;
  }
  .map-cluster-legend__scale {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .map-cluster-legend__step {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .map-cluster-legend__dot {
    border-radius: 9999px;
    background-color: var(--map-cluster-color, var(--bg-brand-solid));
    flex: none;
  }
  .map-cluster-legend__dot--1 {
    width: 0.5rem;
    height: 0.5rem;
    --map-cluster-color: var(--bg-info-solid);
  }
  .map-cluster-legend__dot--2 {
    width: 0.75rem;
    height: 0.75rem;
    --map-cluster-color: var(--bg-warning-solid);
  }
  .map-cluster-legend__dot--3 {
    width: 1rem;
    height: 1rem;
    --map-cluster-color: var(--bg-danger-solid);
  }
}
@layer utilities {
  .map-geofence-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .map-geofence-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .map-geofence__shape {
    fill: var(--map-geofence-color, var(--bg-brand-solid));
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklch, var(--map-geofence-color, var(--bg-brand-solid)) 14%, transparent);
    }
    stroke: var(--map-geofence-color, var(--bg-brand-solid));
    stroke-width: 2;
    stroke-linejoin: round;
  }
  .map-geofence--dashed .map-geofence__shape {
    stroke-dasharray: 5 4;
    fill-opacity: 0.6;
  }
  .map-geofence-circle {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background-color: var(--map-geofence-color, var(--bg-brand-solid));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--map-geofence-color, var(--bg-brand-solid)) 12%, transparent);
    }
    border: 2px solid var(--map-geofence-color, var(--bg-brand-solid));
    pointer-events: none;
  }
  .map-geofence-circle--dashed {
    border-style: dashed;
  }
  .map-geofence-circle__center {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--map-geofence-color);
    border: 2px solid var(--bg-card);
  }
  .map-geofence__radius {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .map-marker-layer > .map-geofence__radius {
    position: absolute;
    transform: translate(-50%, -50%);
  }
  .map-geofence__handle {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-xs, 2px);
    background-color: var(--bg-card);
    border: 2px solid var(--map-geofence-color, var(--bg-brand-solid));
    box-shadow: var(--shadow-sm);
    cursor: grab;
    pointer-events: auto;
  }
  .map-geofence__handle:hover {
    background-color: var(--map-geofence-color, var(--bg-brand-solid));
  }
  .map-geofence__handle:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .map-geofence__handle--mid {
    opacity: 0.6;
    border-radius: 9999px;
  }
  .map-geofence--brand {
    --map-geofence-color: var(--bg-brand-solid);
  }
  .map-geofence--success {
    --map-geofence-color: var(--bg-success-solid);
  }
  .map-geofence--warning {
    --map-geofence-color: var(--bg-warning-solid);
  }
  .map-geofence--danger {
    --map-geofence-color: var(--bg-danger-solid);
  }
  .map-geofence--info {
    --map-geofence-color: var(--bg-info-solid);
  }
  .map-geofence--purple {
    --map-geofence-color: var(--bg-purple-solid);
  }
  .map-geofence--teal {
    --map-geofence-color: var(--bg-teal-solid);
  }
}
@layer utilities {
  .map-control-group {
    display: inline-flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .map-control-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--text-secondary);
    border: 0;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .map-control-btn + .map-control-btn {
    border-top: 1px solid var(--border-divider-subtle);
  }
  .map-control-btn:hover {
    background-color: var(--bg-secondary-subtle);
    color: var(--text-primary);
  }
  .map-control-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .map-control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .map-control-btn.is-active {
    color: var(--text-brand, var(--text-link));
  }
  .map-layers {
    min-width: 12rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .map-layers__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-divider-subtle);
  }
  .map-layers__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
  }
  .map-layers__list {
    padding: 0.25rem;
  }
  .map-layer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .map-layer:hover {
    background-color: var(--bg-secondary-subtle);
  }
  .map-layer__swatch {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    background-color: var(--map-layer-color, var(--bg-brand-solid));
  }
  .map-layer__swatch--round {
    border-radius: 9999px;
  }
  .map-layer__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .map-layer__count {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
  }
  .map-layer__vis {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .map-layer__vis:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
  }
  .map-layer__vis:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .map-layer.is-off {
    opacity: 0.55;
  }
  .map-layer.is-off .map-layer__swatch {
    background-color: var(--text-quaternary);
  }
  .map-legend {
    min-width: 9rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-md);
  }
  .map-legend__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 0.375rem;
  }
  .map-legend__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
  }
  .map-legend__swatch {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: var(--map-legend-color, var(--bg-brand-solid));
  }
  .map-legend__swatch--line {
    width: 1rem;
    height: 0.1875rem;
    border-radius: 9999px;
  }
  .map-legend__swatch--zone {
    border-radius: 3px;
    background-color: var(--map-legend-color, var(--bg-brand-solid));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--map-legend-color, var(--bg-brand-solid)) 20%, transparent);
    }
    box-shadow: inset 0 0 0 1.5px var(--map-legend-color, var(--bg-brand-solid));
  }
}
@layer utilities {
  .location-picker {
    width: 20rem;
    max-width: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .location-picker__search {
    position: relative;
    padding: 0.625rem;
    border-bottom: 1px solid var(--border-divider-subtle);
  }
  .location-picker__search-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 1.125rem;
    transform: translateY(-50%);
    color: var(--text-quaternary);
    font-size: 0.8125rem;
    pointer-events: none;
  }
  .location-picker__input {
    width: 100%;
    height: 2.25rem;
    padding-inline: 2rem 0.75rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--border-primary);
    font-size: 0.875rem;
  }
  .location-picker__input::placeholder {
    color: var(--text-placeholder);
  }
  .location-picker__input:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .location-picker__results {
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
  }
  .location-picker__result {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: start;
    background: transparent;
    border: 0;
    color: inherit;
  }
  .location-picker__result:hover, .location-picker__result.is-active {
    background-color: var(--bg-secondary-subtle);
  }
  .location-picker__result.is-selected {
    background-color: var(--bg-brand-subtle, var(--bg-secondary-subtle));
  }
  .location-picker__result:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .location-picker__result-icon {
    flex: none;
    margin-top: 0.0625rem;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .location-picker__result-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .location-picker__result-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .location-picker__result-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.3;
  }
  .location-picker__result mark {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 22%, transparent);
    }
    color: inherit;
    border-radius: 2px;
  }
  .location-picker__empty {
    padding: 1rem 0.75rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
  }
  .location-picker__selected {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--border-divider-subtle);
    background-color: var(--bg-secondary);
  }
  .location-picker__selected-pin {
    flex: none;
    color: var(--text-brand);
    font-size: 0.9375rem;
  }
  .location-picker__selected-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }
  .location-picker__selected-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .location-picker__coord {
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .location-picker__clear {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .location-picker__clear:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary-subtle);
  }
  .location-picker__clear:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
}
@layer utilities {
  .map-od {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
  }
  .map-od__rows {
    position: relative;
  }
  .map-od__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0;
  }
  .map-od__marker {
    position: relative;
    z-index: 1;
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 9999px;
    background-color: var(--map-od-color, var(--bg-brand-solid));
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--map-od-color, var(--bg-brand-solid));
  }
  .map-od__row:not(:last-child) .map-od__marker::after {
    content: "";
    position: absolute;
    inset-block-start: calc(100% + 2px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(0.75rem + 4px);
    background-image: linear-gradient(var(--border-divider) 60%, transparent 0);
    background-size: 2px 6px;
    background-repeat: repeat-y;
  }
  .map-od__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }
  .map-od__label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    line-height: 1.2;
  }
  .map-od__value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .map-od__row--origin {
    --map-od-color: var(--bg-mapbox-route-success);
  }
  .map-od__row--destination {
    --map-od-color: var(--bg-mapbox-route-primary);
  }
  .map-od__row--waypoint {
    --map-od-color: var(--text-tertiary);
  }
  .map-od__row--waypoint .map-od__marker {
    width: 0.625rem;
    height: 0.625rem;
  }
  .map-od__swap {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.5rem;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 160ms ease, color 120ms ease;
  }
  .map-od__swap:hover {
    color: var(--text-primary);
  }
  .map-od__swap:active {
    transform: translateY(-50%) rotate(180deg);
  }
  .map-od__swap:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .map-od__summary {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-divider-subtle);
  }
  .map-od__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
  }
  .map-od__stat strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
}
@layer utilities {
  .mob-device {
    position: relative;
    display: flex;
    flex-direction: column;
    --mob-radius: 48px;
    width: 360px;
    max-width: 100%;
    height: 780px;
    background-color: var(--bg-mobile-shell);
    color: var(--text-mobile-primary);
    border-radius: var(--mob-radius);
    overflow: hidden;
    margin: 10px 12px 18px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5),  inset 0 1px 0 rgba(255, 255, 255, 0.25),  0 0 0 5px var(--bg-mob-chassis, #2a2a2e),  0 0 0 6px var(--bg-mob-chassis-edge, rgba(255, 255, 255, 0.12)),  0 3px 6px -1px rgba(0, 0, 0, 0.22),  0 24px 52px -18px rgba(0, 0, 0, 0.55),  0 6px 20px -10px rgba(0, 0, 0, 0.32);
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-device {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 5px var(--bg-mob-chassis, #d4d4d8), 0 0 0 6px var(--bg-mob-chassis-edge, rgba(255, 255, 255, 0.30)), 0 3px 6px -1px rgba(0, 0, 0, 0.38), 0 24px 52px -18px rgba(0, 0, 0, 0.70), 0 6px 20px -10px rgba(0, 0, 0, 0.48);
  }
  .mob-device::before, .mob-device::after {
    content: '';
    position: absolute;
    background-color: var(--bg-mob-chassis, #1f2937);
    border-radius: 1.5px;
    pointer-events: none;
  }
  .mob-device::before {
    left: -8px;
    top: 130px;
    width: 3px;
    height: 60px;
    box-shadow: 0 84px 0 var(--bg-mob-chassis, #1f2937);
  }
  .mob-device::after {
    right: -8px;
    top: 170px;
    width: 3px;
    height: 96px;
  }
  .mob-device--xs {
    --mob-radius: 30px;
    width: 200px;
    height: 434px;
  }
  .mob-device--sm {
    --mob-radius: 36px;
    width: 240px;
    height: 520px;
  }
  .mob-device--md {
    --mob-radius: 42px;
    width: 300px;
    height: 650px;
  }
  .mob-device--lg {
    --mob-radius: 56px;
    width: 420px;
    height: 910px;
  }
  .mob-device--tablet {
    width: 540px;
    height: 760px;
    border-radius: 26px;
    margin: 10px 14px 18px;
  }
  .mob-device--tablet::before {
    top: 80px;
    height: 90px;
    box-shadow: 0 120px 0 var(--bg-mob-chassis, #1f2937);
  }
  .mob-device--tablet::after {
    top: 110px;
    height: 120px;
  }
  .mob-device--landscape {
    width: 780px;
    height: 360px;
    border-radius: 36px;
  }
  .mob-device--landscape::before {
    left: 130px;
    top: -8px;
    width: 60px;
    height: 3px;
    box-shadow: 84px 0 0 var(--bg-mob-chassis, #1f2937);
  }
  .mob-device--landscape::after {
    left: 170px;
    right: auto;
    top: auto;
    bottom: -8px;
    width: 96px;
    height: 3px;
  }
  .mob-device--no-chassis {
    margin: 0;
    border: 1px solid var(--border-mobile-panel);
    box-shadow: none;
  }
  .mob-device--no-chassis::before, .mob-device--no-chassis::after {
    display: none;
  }
  .mob-device__island {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 26px;
    background-color: #000;
    border-radius: 999px;
    z-index: 30;
    pointer-events: none;
  }
  .mob-device__notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 22px;
    background-color: #000;
    border-radius: 0 0 16px 16px;
    z-index: 30;
    pointer-events: none;
  }
  .mob-device__status {
    position: relative;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mobile-primary);
    flex: 0 0 auto;
    background-color: var(--bg-mobile-shell);
  }
  .mob-device__status__icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-mobile-primary);
  }
  .mob-device__status--islanded {
    padding-left: 24px;
    padding-right: 24px;
  }
  .mob-device__status--islanded .mob-device__status__time {
    margin-right: 80px;
  }
  .mob-device__status--islanded .mob-device__status__icons {
    margin-left: 80px;
  }
  .mob-device__home {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 124px;
    height: 4px;
    background-color: var(--text-mobile-primary);
    opacity: 0.55;
    border-radius: 999px;
    z-index: 30;
    pointer-events: none;
  }
  .mob-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    justify-items: center;
    align-items: end;
    gap: 32px;
    padding: 24px 8px;
  }
  .mob-showcase__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .mob-showcase__caption {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
  }
  .mob-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--bg-mobile-shell);
    color: var(--text-mobile-primary);
  }
  .mob-shell__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .mob-shell__body--safe {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }
  .mob-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--height-mobile-header, 56px);
    padding: 0 16px;
    padding-top: max(0px, env(safe-area-inset-top, 0px));
    background-color: var(--bg-mobile-header);
    color: var(--text-mobile-primary);
    border-bottom: 1px solid var(--border-mobile-divider);
    box-shadow: var(--shadow-mobile-header, none);
    flex: 0 0 auto;
    z-index: var(--z-mobile-header, 30);
  }
  .mob-header__back, .mob-header__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  .mob-header__back:hover, .mob-header__action:hover {
    background-color: var(--bg-secondary-subtle, rgba(127, 127, 127, 0.1));
  }
  .mob-header__back:active, .mob-header__action:active {
    transform: scale(0.94);
  }
  .mob-header__title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mob-header__title--centered {
    text-align: center;
  }
  .mob-header__subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-mobile-muted);
    margin-top: 1px;
  }
  .mob-header--large {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 8px 16px 16px;
    gap: 4px;
  }
  .mob-header--large .mob-header__title {
    font-size: 24px;
    font-weight: 700;
  }
  .mob-bottom-nav {
    display: flex;
    align-items: stretch;
    height: var(--height-mobile-bottom-nav, 64px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--bg-mobile-bottom-nav);
    border-top: 1px solid var(--border-mobile-divider);
    flex: 0 0 auto;
    z-index: var(--z-mobile-bottom-nav, 30);
  }
  .mob-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--text-mobile-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: color 120ms ease, transform 120ms ease;
    position: relative;
  }
  .mob-bottom-nav__item i, .mob-bottom-nav__item svg {
    font-size: 20px;
    line-height: 1;
  }
  .mob-bottom-nav__item:active {
    transform: scale(0.96);
  }
  .mob-bottom-nav__item.is-active {
    color: var(--bg-sidebar-item-accent);
  }
  .mob-bottom-nav__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background-color: var(--bg-sidebar-item-accent);
    transform: translateX(-50%);
  }
  .mob-bottom-nav__item .mob-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 18px);
  }
  .mob-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: var(--color-danger, #dc2626);
    border-radius: 999px;
  }
  .mob-badge--dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
  }
  .mob-fab {
    position: absolute;
    right: 16px;
    bottom: calc(var(--height-mobile-bottom-nav, 64px) + 16px + env(safe-area-inset-bottom, 0px));
    width: var(--height-mobile-fab, 56px);
    height: var(--height-mobile-fab, 56px);
    border-radius: 999px;
    border: 0;
    background-color: var(--color-primary, #3b82f6);
    color: #fff;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-mobile-floating, 0 6px 20px rgba(0, 0, 0, 0.22));
    cursor: pointer;
    z-index: var(--z-mobile-fab, 40);
    transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .mob-fab:active {
    transform: scale(0.92);
  }
  .mob-fab.is-expanded {
    transform: rotate(45deg);
  }
  .mob-fab--extended {
    width: auto;
    padding: 0 20px;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 28px;
  }
  .mob-fab-menu {
    position: absolute;
    right: 16px;
    bottom: calc(var(--height-mobile-bottom-nav, 64px) + 16px + env(safe-area-inset-bottom, 0px) + var(--height-mobile-fab, 56px) + 16px);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
    z-index: var(--z-mobile-fab, 40);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.96);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .mob-fab-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .mob-fab-menu__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .mob-fab-menu__btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background-color: var(--bg-mobile-floating-menu);
    color: var(--text-mobile-primary);
    font-size: 16px;
    box-shadow: var(--shadow-mobile-floating, 0 4px 14px rgba(0, 0, 0, 0.18));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .mob-fab-menu__label {
    background-color: var(--bg-mobile-floating-menu);
    color: var(--text-mobile-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: var(--shadow-mobile-floating, 0 4px 14px rgba(0, 0, 0, 0.18));
  }
  .mob-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 90%;
    background-color: var(--bg-mobile-sheet);
    color: var(--text-mobile-primary);
    border-top-left-radius: var(--radius-mobile-sheet, 20px);
    border-top-right-radius: var(--radius-mobile-sheet, 20px);
    box-shadow: var(--shadow-mobile-sheet, 0 -8px 28px rgba(0, 0, 0, 0.24));
    z-index: var(--z-mobile-sheet, 50);
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mob-sheet.is-open {
    transform: translateY(0);
  }
  .mob-sheet.is-snap-peek {
    transform: translateY(75%);
  }
  .mob-sheet.is-snap-half {
    transform: translateY(50%);
  }
  .mob-sheet.is-snap-full {
    transform: translateY(0);
  }
  .mob-sheet__handle {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
    cursor: grab;
  }
  .mob-sheet__handle::before {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background-color: var(--border-mobile-divider);
  }
  .mob-sheet__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 12px;
  }
  .mob-sheet__title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
  }
  .mob-sheet__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    -webkit-overflow-scrolling: touch;
  }
  .mob-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 84%;
    max-width: 320px;
    background-color: var(--bg-mobile-panel);
    color: var(--text-mobile-primary);
    box-shadow: var(--shadow-mobile-sheet, 0 0 32px rgba(0, 0, 0, 0.24));
    z-index: var(--z-mobile-drawer, 55);
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
  }
  .mob-drawer--left {
    left: 0;
  }
  .mob-drawer--right {
    right: 0;
    transform: translateX(100%);
  }
  .mob-drawer.is-open {
    transform: translateX(0);
  }
  .mob-drawer__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 16px));
    border-bottom: 1px solid var(--border-mobile-divider);
  }
  .mob-drawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
  }
  .mob-scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: var(--z-mobile-overlay, 45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .mob-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .mob-card {
    background-color: var(--bg-mobile-card);
    color: var(--text-mobile-primary);
    border: 1px solid var(--border-mobile-panel);
    border-radius: var(--radius-mobile-card, 12px);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mob-card--tappable {
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease;
  }
  .mob-card--tappable:active {
    transform: scale(0.99);
    background-color: var(--bg-mobile-row-active);
  }
  .mob-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mob-card__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
  }
  .mob-card__meta {
    font-size: 12px;
    color: var(--text-mobile-muted);
  }
  .mob-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 16px;
    background-color: transparent;
    color: var(--text-mobile-primary);
    border-bottom: 1px solid var(--border-mobile-divider);
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  .mob-row:active {
    background-color: var(--bg-mobile-row-active);
  }
  .mob-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--bg-secondary-subtle, rgba(127, 127, 127, 0.08));
    color: var(--text-mobile-primary);
    font-size: 16px;
    flex: 0 0 auto;
  }
  .mob-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mob-row__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mob-row__meta {
    font-size: 12px;
    color: var(--text-mobile-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mob-row__chevron {
    color: var(--text-mobile-muted);
    font-size: 12px;
  }
  .mob-swipe {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-mobile-shell);
  }
  .mob-swipe__actions {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: stretch;
  }
  .mob-swipe__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    background-color: var(--color-primary, #3b82f6);
    cursor: pointer;
    gap: 4px;
    flex-direction: column;
  }
  .mob-swipe__action--danger {
    background-color: var(--color-danger, #dc2626);
  }
  .mob-swipe__action--success {
    background-color: var(--color-success, #16a34a);
  }
  .mob-swipe__action--warning {
    background-color: var(--color-warning, #f59e0b);
    color: #1f2937;
  }
  .mob-swipe__row {
    position: relative;
    background-color: var(--bg-mobile-shell);
    z-index: 1;
    transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .mob-swipe.is-revealed .mob-swipe__row {
    transform: translateX(-144px);
  }
  .mob-segmented {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    background-color: var(--bg-secondary-subtle, rgba(127, 127, 127, 0.1));
    border-radius: 10px;
    width: 100%;
  }
  .mob-segmented__item {
    flex: 1;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: var(--text-mobile-muted);
    font-size: 13px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
  }
  .mob-segmented__item.is-active {
    background-color: var(--bg-mobile-card);
    color: var(--text-mobile-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  .mob-tab-bar {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-mobile-divider);
    background-color: var(--bg-mobile-header);
    scroll-snap-type: x mandatory;
  }
  .mob-tab-bar::-webkit-scrollbar {
    display: none;
  }
  .mob-tab-bar__item {
    flex: 0 0 auto;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: var(--text-mobile-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    scroll-snap-align: start;
  }
  .mob-tab-bar__item.is-active {
    color: var(--text-mobile-primary);
  }
  .mob-tab-bar__item.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background-color: var(--color-primary, #3b82f6);
    border-radius: 2px 2px 0 0;
  }
  .mob-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    height: 40px;
    background-color: var(--bg-secondary-subtle, rgba(127, 127, 127, 0.08));
    border: 0;
    border-radius: 10px;
    color: var(--text-mobile-primary);
    font-size: 14px;
    width: 100%;
  }
  .mob-search input {
    flex: 1;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
    min-width: 0;
  }
  .mob-search i {
    color: var(--text-mobile-muted);
  }
  .mob-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background-color: var(--bg-mobile-card);
    color: var(--text-mobile-primary);
    border: 1px solid var(--border-mobile-panel);
    border-radius: var(--radius-mobile-chip, 999px);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .mob-chip.is-active {
    background-color: var(--color-primary, #3b82f6);
    color: #fff;
    border-color: var(--color-primary, #3b82f6);
  }
  .mob-chip__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.25);
    border: 0;
    color: inherit;
    font-size: 9px;
    cursor: pointer;
  }
  .mob-pull {
    position: relative;
    overflow: hidden;
  }
  .mob-pull__indicator {
    position: absolute;
    top: -56px;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mobile-muted);
    font-size: 14px;
    transition: transform 200ms ease;
    z-index: 1;
    pointer-events: none;
  }
  .mob-pull.is-pulling .mob-pull__indicator, .mob-pull.is-refreshing .mob-pull__indicator {
    transform: translateY(56px);
  }
  .mob-pull__spinner {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid var(--border-mobile-divider);
    border-top-color: var(--color-primary, #3b82f6);
    animation: mob-spin 0.8s linear infinite;
  }
  @keyframes mob-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .mob-skel {
    background-color: var(--bg-secondary-subtle, rgba(127, 127, 127, 0.1));
    border-radius: 6px;
    position: relative;
    overflow: hidden;
  }
  .mob-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: mob-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes mob-shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-skel::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  }
  .mob-toast {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(var(--height-mobile-bottom-nav, 64px) + 16px + env(safe-area-inset-bottom, 0px));
    background-color: var(--text-mobile-primary);
    color: var(--bg-mobile-shell);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    box-shadow: var(--shadow-mobile-floating, 0 6px 20px rgba(0, 0, 0, 0.22));
    z-index: var(--z-mobile-sheet, 50);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mob-toast .mob-header__action {
    margin-left: auto;
  }
  .mob-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: var(--color-primary, #3b82f6);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
  }
  .mob-banner--warning {
    background-color: var(--color-warning, #f59e0b);
    color: #1f2937;
  }
  .mob-banner--danger {
    background-color: var(--color-danger, #dc2626);
    color: #fff;
  }
  .mob-banner--neutral {
    background-color: var(--bg-mobile-card);
    color: var(--text-mobile-primary);
    border-bottom: 1px solid var(--border-mobile-divider);
  }
  .mob-banner__close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  .mob-command {
    position: absolute;
    inset: 0;
    background-color: var(--bg-mobile-shell);
    display: flex;
    flex-direction: column;
    z-index: var(--z-mobile-drawer, 55);
  }
  .mob-command__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
  }
  .mob-command__results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  .mob-command__section {
    padding: 12px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mobile-muted);
  }
  @media (prefers-reduced-motion: reduce) {
    .mob-fab, .mob-fab-menu, .mob-sheet, .mob-drawer, .mob-scrim, .mob-row, .mob-segmented__item, .mob-card--tappable, .mob-swipe__row, .mob-bottom-nav__item, .mob-pull__indicator {
      transition: none;
    }
    .mob-pull__spinner, .mob-skel::after {
      animation: none;
    }
  }
  .mob-header__back:focus-visible, .mob-header__action:focus-visible, .mob-bottom-nav__item:focus-visible, .mob-fab:focus-visible, .mob-fab-menu__btn:focus-visible, .mob-segmented__item:focus-visible, .mob-chip:focus-visible, .mob-card--tappable:focus-visible, .mob-row:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
  }
  :root {
    --ease-mob-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-mob-out: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-mob-in: cubic-bezier(0.4, 0, 0.6, 1);
  }
  .mob-header__title {
    letter-spacing: -0.01em;
    font-feature-settings: "ss01", "cv01";
  }
  .mob-header--large .mob-header__title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.05;
  }
  .mob-header--large .mob-header__subtitle {
    font-size: 13px;
    margin-top: 2px;
  }
  .mob-header--glass {
    background-color: var(--bg-mobile-header);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-mobile-header) 75%, transparent);
    }
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  .mob-bottom-nav {
    background-color: var(--bg-mobile-bottom-nav);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-mobile-bottom-nav) 92%, transparent);
    }
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border-mobile-divider);
    @supports (color: color-mix(in lab, red, red)) {
      border-top: 1px solid color-mix(in oklab, var(--border-mobile-divider) 60%, transparent);
    }
  }
  .mob-bottom-nav__item {
    transition: color 240ms var(--ease-mob-out), transform 120ms ease;
    position: relative;
  }
  .mob-bottom-nav__item i, .mob-bottom-nav__item svg {
    transition: transform 360ms var(--ease-mob-spring);
  }
  .mob-bottom-nav__item.is-active i, .mob-bottom-nav__item.is-active svg {
    transform: translateY(-1px) scale(1.08);
  }
  .mob-bottom-nav__item.is-active::before {
    display: none;
  }
  .mob-fab {
    transition: transform 300ms var(--ease-mob-spring), box-shadow 200ms ease, background-color 150ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 6px 14px -4px var(--color-primary, #3b82f6), 0 12px 28px -8px rgba(0, 0, 0, 0.30);
  }
  .mob-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 10px 20px -4px var(--color-primary, #3b82f6), 0 18px 36px -10px rgba(0, 0, 0, 0.35);
  }
  .mob-fab:active {
    transform: scale(0.94);
  }
  .mob-fab.is-expanded {
    transform: rotate(45deg);
  }
  .mob-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 600ms ease, transform 600ms ease;
    transform: scale(0.5);
    pointer-events: none;
  }
  .mob-fab.is-rippling::after {
    opacity: 1;
    transform: scale(2.2);
    transition: opacity 600ms ease, transform 600ms ease;
  }
  .mob-segmented {
    position: relative;
  }
  .mob-segmented__indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    background-color: var(--bg-mobile-card);
    border-radius: 7px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.10);
    transition: transform 360ms var(--ease-mob-spring), width 360ms var(--ease-mob-spring);
    pointer-events: none;
    z-index: 0;
  }
  .mob-segmented__item {
    position: relative;
    z-index: 1;
    background: transparent !important;
    box-shadow: none !important;
    transition: color 240ms var(--ease-mob-out);
  }
  .mob-row {
    transition: background-color 160ms var(--ease-mob-out);
    position: relative;
  }
  .mob-row__chevron {
    transition: transform 200ms var(--ease-mob-out);
    opacity: 0.4;
  }
  .mob-row:hover .mob-row__chevron {
    opacity: 0.7;
    transform: translateX(2px);
  }
  .mob-sheet {
    transition: transform 360ms var(--ease-mob-out);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 -12px 36px -4px rgba(0, 0, 0, 0.30);
  }
  .mob-sheet__handle::before {
    background-color: var(--text-mobile-muted);
    opacity: 0.4;
  }
  .mob-scrim {
    background-color: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 280ms var(--ease-mob-out);
  }
  .mob-card {
    border-radius: 14px;
    transition: transform 180ms var(--ease-mob-out), background-color 180ms ease;
  }
  .mob-card--tappable:active {
    transform: scale(0.985);
  }
  .mob-chip {
    padding: 7px 12px;
    transition: background-color 200ms var(--ease-mob-out), color 200ms var(--ease-mob-out), transform 120ms ease;
  }
  .mob-chip:active {
    transform: scale(0.96);
  }
  .mob-switch {
    --w: 51px;
    --h: 31px;
    --pad: 2px;
    position: relative;
    display: inline-block;
    width: var(--w);
    height: var(--h);
    flex: 0 0 auto;
  }
  .mob-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
  }
  .mob-switch__track {
    position: absolute;
    inset: 0;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 30%, transparent);
    }
    border-radius: 999px;
    transition: background-color 240ms var(--ease-mob-out);
  }
  .mob-switch__thumb {
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    width: calc(var(--h) - var(--pad) * 2);
    height: calc(var(--h) - var(--pad) * 2);
    background-color: #fff;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.08);
    transition: transform 320ms var(--ease-mob-spring), width 200ms var(--ease-mob-out);
  }
  .mob-switch input:checked ~ .mob-switch__track {
    background-color: var(--color-success, #34c759);
  }
  .mob-switch input:checked ~ .mob-switch__thumb {
    transform: translateX(calc(var(--w) - var(--h)));
  }
  .mob-switch input:active ~ .mob-switch__thumb {
    width: calc(var(--h) - var(--pad) * 2 + 4px);
  }
  .mob-pager-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .mob-pager-dots__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--text-mobile-muted);
    opacity: 0.35;
    transition: opacity 200ms ease, width 240ms var(--ease-mob-spring), background-color 200ms ease;
  }
  .mob-pager-dots__dot.is-active {
    background-color: var(--color-primary, #3b82f6);
    opacity: 1;
    width: 18px;
  }
  .mob-lock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 32px 16px 40px;
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
    z-index: 20;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-lock {
    background: linear-gradient(160deg, #1e1b3e 0%, #0a0a14 100%);
  }
  .mob-lock__time {
    font-size: 76px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: center;
    margin-top: 32px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .mob-lock__date {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 6px;
    opacity: 0.85;
  }
  .mob-lock__notifications {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mob-push {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    border-radius: 16px;
    color: #fff;
    font-size: 13px;
  }
  .mob-push__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 8px;
    background-color: var(--color-primary, #3b82f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
  }
  .mob-push__body {
    flex: 1;
    min-width: 0;
  }
  .mob-push__title {
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 1px;
  }
  .mob-push__text {
    opacity: 0.85;
    line-height: 1.3;
  }
  .mob-push__time {
    font-size: 11px;
    opacity: 0.6;
    flex: 0 0 auto;
  }
  .mob-toast {
    border-radius: 14px;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    animation: mob-toast-slide-up 360ms var(--ease-mob-spring) both;
  }
  @keyframes mob-toast-slide-up {
    from {
      transform: translateY(120%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .mob-settings {
    padding: 0 12px 16px;
  }
  .mob-settings__group {
    background-color: var(--bg-mobile-card);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .mob-settings__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 16px;
    position: relative;
  }
  .mob-settings__row + .mob-settings__row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 56px;
    right: 0;
    height: 0.5px;
    background-color: var(--border-mobile-divider);
  }
  .mob-settings__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background-color: var(--color-primary, #007aff);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 auto;
  }
  .mob-settings__label {
    flex: 1;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .mob-settings__value {
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--text-mobile-muted);
  }
  .mob-settings__group-title {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-mobile-muted);
    padding: 0 16px 6px;
    margin-top: 16px;
  }
  .mob-wheel {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    background-color: var(--bg-mobile-card);
  }
  .mob-wheel__col {
    flex: 1;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .mob-wheel__items {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    transition: transform 320ms var(--ease-mob-spring);
  }
  .mob-wheel__item {
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    font-variant-numeric: tabular-nums;
    opacity: 0.4;
    transition: opacity 200ms ease;
  }
  .mob-wheel__item.is-active {
    opacity: 1;
    font-weight: 600;
  }
  .mob-wheel__indicator {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 40px;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 12%, transparent);
    }
    border-radius: 8px;
    pointer-events: none;
    margin: 0 6px;
  }
  .mob-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: var(--bg-mobile-card);
    border-top: 1px solid var(--border-mobile-divider);
    position: relative;
    z-index: 2;
  }
  .mob-mini__art {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background-color: var(--color-primary, #3b82f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex: 0 0 auto;
  }
  .mob-mini__body {
    flex: 1;
    min-width: 0;
  }
  .mob-mini__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mob-mini__meta {
    font-size: 11px;
    color: var(--text-mobile-muted);
    line-height: 1.2;
  }
  .mob-mini__btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--text-mobile-primary);
    font-size: 14px;
    cursor: pointer;
    border-radius: 999px;
    flex: 0 0 auto;
    transition: background-color 120ms ease;
  }
  .mob-mini__btn:hover {
    background-color: var(--bg-mobile-row-active);
  }
  .mob-splash {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: var(--text-mobile-primary);
    z-index: 60;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-splash {
    background-color: #000000;
    color: #ffffff;
  }
  .mob-splash__logo {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: mob-splash-breathe 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .mob-splash__logo img, .mob-splash__logo svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .mob-splash__logo > i {
    font-size: 64px;
    color: var(--color-primary, #3b82f6);
  }
  .mob-splash__logo .mob-splash__logo--dark {
    display: none;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-splash__logo .mob-splash__logo--light {
    display: none;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-splash__logo .mob-splash__logo--dark {
    display: block;
  }
  @keyframes mob-splash-breathe {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.03);
      opacity: 0.92;
    }
  }
  .mob-splash__progress {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 3px;
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, currentColor 12%, transparent);
    }
    border-radius: 999px;
    overflow: hidden;
    border: 0;
    animation: none;
  }
  .mob-splash__progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.7;
    border-radius: 999px;
    animation: mob-splash-progress 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  @keyframes mob-splash-progress {
    0% {
      left: -40%;
    }
    100% {
      left: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mob-splash__logo {
      animation: none;
    }
    .mob-splash__progress::after {
      animation: none;
      left: 0;
      width: 35%;
    }
  }
  .mob-onboard {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
  }
  .mob-onboard__slides {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mob-onboard__slides::-webkit-scrollbar {
    display: none;
  }
  .mob-onboard__slide {
    flex: 0 0 100%;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    scroll-snap-align: start;
  }
  .mob-onboard__icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 60%, #8b5cf6));
    }
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 18px 36px -8px rgba(0, 0, 0, 0.30);
    margin-bottom: 8px;
  }
  .mob-onboard__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .mob-onboard__text {
    font-size: 14px;
    opacity: 0.7;
    max-width: 280px;
    line-height: 1.5;
  }
  .mob-onboard__footer {
    padding: 16px 24px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .mob-install {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px;
    background-color: var(--bg-mobile-card);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-mobile-card) 90%, transparent);
    }
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 30;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px -8px rgba(0, 0, 0, 0.30);
    animation: mob-install-rise 420ms var(--ease-mob-spring) both;
  }
  @keyframes mob-install-rise {
    from {
      transform: translateY(120%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .mob-install__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 50%, #8b5cf6));
    }
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  .mob-install__body {
    flex: 1;
    min-width: 0;
  }
  .mob-install__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .mob-install__text {
    font-size: 12px;
    color: var(--text-mobile-muted);
    line-height: 1.35;
  }
  .mob-batt {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 11px;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.85;
  }
  .mob-batt::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 3px;
    bottom: 3px;
    width: 2px;
    background-color: currentColor;
    border-radius: 0 1px 1px 0;
  }
  .mob-batt__fill {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    background-color: currentColor;
    border-radius: 1.5px;
    width: 70%;
  }
  @media (prefers-reduced-motion: reduce) {
    .mob-fab, .mob-fab::after, .mob-segmented__indicator, .mob-bottom-nav__item i, .mob-splash__logo, .mob-toast, .mob-install, .mob-switch__thumb, .mob-pager-dots__dot {
      animation: none !important;
      transition: none !important;
    }
  }
  @keyframes mob-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes mob-slide-up {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes mob-slide-down {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes mob-slide-left {
    from {
      opacity: 0;
      transform: translateX(-12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes mob-slide-right {
    from {
      opacity: 0;
      transform: translateX(12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes mob-scale-in {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes mob-pop {
    0% {
      transform: scale(0.85);
      opacity: 0;
    }
    60% {
      transform: scale(1.06);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes mob-bounce-soft {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-4px);
    }
  }
  @keyframes mob-shake {
    0%,100% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-3px);
    }
    40% {
      transform: translateX(3px);
    }
    60% {
      transform: translateX(-2px);
    }
    80% {
      transform: translateX(2px);
    }
  }
  @keyframes mob-pulse-ring {
    0% {
      box-shadow: 0 0 0 0 var(--mob-pulse-color, rgba(59,130,246,0.45));
      opacity: 1;
    }
    100% {
      box-shadow: 0 0 0 24px transparent;
      opacity: 0;
    }
  }
  @keyframes mob-sparkle {
    0%, 100% {
      opacity: 0.85;
      transform: scale(1) rotate(0);
    }
    50% {
      opacity: 1;
      transform: scale(1.15) rotate(15deg);
    }
  }
  @keyframes mob-ripple-expand {
    from {
      transform: scale(0);
      opacity: 0.4;
    }
    to {
      transform: scale(2.4);
      opacity: 0;
    }
  }
  @keyframes mob-tick-draw {
    from {
      stroke-dashoffset: 60;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes mob-tick-circle {
    from {
      stroke-dashoffset: 180;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes mob-toast-slide-in {
    from {
      transform: translateY(120%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes mob-toast-slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(120%);
      opacity: 0;
    }
  }
  @keyframes mob-row-press-flash {
    0% {
      background-color: transparent;
    }
    35% {
      background-color: var(--bg-mobile-row-active);
    }
    100% {
      background-color: transparent;
    }
  }
  @keyframes mob-pin-drop {
    0% {
      transform: translateY(-40px) scale(0.6);
      opacity: 0;
    }
    60% {
      transform: translateY(2px) scale(1);
      opacity: 1;
    }
    80% {
      transform: translateY(-3px) scale(1);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }
  @keyframes mob-progress-stripe {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 24px 0;
    }
  }
  .mob-anim {
    animation-duration: 400ms;
    animation-timing-function: var(--ease-mob-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    animation-fill-mode: both;
  }
  .mob-anim-fade {
    animation-name: mob-fade-in;
    animation-duration: 320ms;
    animation-timing-function: var(--ease-mob-out, ease);
    animation-fill-mode: both;
  }
  .mob-anim-slide-up {
    animation-name: mob-slide-up;
    animation-duration: 420ms;
    animation-timing-function: var(--ease-mob-spring);
    animation-fill-mode: both;
  }
  .mob-anim-slide-down {
    animation-name: mob-slide-down;
    animation-duration: 420ms;
    animation-timing-function: var(--ease-mob-spring);
    animation-fill-mode: both;
  }
  .mob-anim-slide-left {
    animation-name: mob-slide-left;
    animation-duration: 420ms;
    animation-timing-function: var(--ease-mob-spring);
    animation-fill-mode: both;
  }
  .mob-anim-slide-right {
    animation-name: mob-slide-right;
    animation-duration: 420ms;
    animation-timing-function: var(--ease-mob-spring);
    animation-fill-mode: both;
  }
  .mob-anim-scale {
    animation-name: mob-scale-in;
    animation-duration: 360ms;
    animation-timing-function: var(--ease-mob-spring);
    animation-fill-mode: both;
  }
  .mob-anim-pop {
    animation-name: mob-pop;
    animation-duration: 480ms;
    animation-timing-function: var(--ease-mob-spring);
    animation-fill-mode: both;
  }
  .mob-anim-bounce {
    animation: mob-bounce-soft 1.4s ease-in-out infinite;
  }
  .mob-anim-shake {
    animation: mob-shake 380ms ease-in-out 1;
  }
  .mob-anim-stagger > * {
    opacity: 0;
    animation: mob-slide-up 420ms var(--ease-mob-spring) both;
  }
  .mob-anim-stagger > *:nth-child(1) {
    animation-delay: 40ms;
  }
  .mob-anim-stagger > *:nth-child(2) {
    animation-delay: 100ms;
  }
  .mob-anim-stagger > *:nth-child(3) {
    animation-delay: 160ms;
  }
  .mob-anim-stagger > *:nth-child(4) {
    animation-delay: 220ms;
  }
  .mob-anim-stagger > *:nth-child(5) {
    animation-delay: 280ms;
  }
  .mob-anim-stagger > *:nth-child(6) {
    animation-delay: 340ms;
  }
  .mob-anim-stagger > *:nth-child(7) {
    animation-delay: 400ms;
  }
  .mob-anim-stagger > *:nth-child(8) {
    animation-delay: 460ms;
  }
  .mob-press {
    position: relative;
    transition: transform 120ms var(--ease-mob-out), background-color 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-press:active {
    transform: scale(0.97);
  }
  .mob-press.is-pressed {
    background-color: var(--bg-mobile-row-active);
  }
  .mob-ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .mob-ripple__ink {
    position: absolute;
    border-radius: 999px;
    background-color: currentColor;
    opacity: 0.25;
    pointer-events: none;
    transform: scale(0);
    animation: mob-ripple-expand 540ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .mob-long-press {
    position: relative;
  }
  .mob-long-press.is-holding::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    --mob-pulse-color: var(--color-primary, #3b82f6);
    @supports (color: color-mix(in lab, red, red)) {
      --mob-pulse-color: color-mix(in oklab, var(--color-primary, #3b82f6) 45%, transparent);
    }
    animation: mob-pulse-ring 760ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
    pointer-events: none;
  }
  .mob-sheet__handle::before {
    transition: width 200ms var(--ease-mob-spring), opacity 160ms ease;
  }
  .mob-sheet.is-dragging .mob-sheet__handle::before, .mob-sheet__handle:active::before {
    width: 48px;
    opacity: 0.6;
  }
  .mob-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    transition: transform 240ms var(--ease-mob-spring);
  }
  .mob-counter.is-changing {
    animation: mob-pop 480ms var(--ease-mob-spring);
  }
  .mob-tick {
    width: 64px;
    height: 64px;
    display: inline-block;
  }
  .mob-tick__circle {
    fill: none;
    stroke: var(--color-success, #16a34a);
    stroke-width: 3;
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: mob-tick-circle 520ms cubic-bezier(0.4, 0, 0.2, 1) 60ms forwards;
  }
  .mob-tick__check {
    fill: none;
    stroke: var(--color-success, #16a34a);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: mob-tick-draw 280ms cubic-bezier(0.4, 0, 0.2, 1) 480ms forwards;
  }
  .mob-sparkle {
    display: inline-block;
    animation: mob-sparkle 1.8s ease-in-out infinite;
    transform-origin: center;
  }
  .mob-pin-drop {
    animation: mob-pin-drop 620ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .mob-page-enter {
    animation: mob-slide-right 320ms var(--ease-mob-out) both;
  }
  .mob-page-exit {
    animation: mob-slide-left 240ms var(--ease-mob-in, ease) reverse both;
  }
  .mob-tab-content > * {
    display: none;
    animation: mob-fade-in 240ms var(--ease-mob-out) both;
  }
  .mob-tab-content > .is-active {
    display: block;
  }
  .mob-row.is-flashed {
    animation: mob-row-press-flash 480ms ease-out 1;
  }
  .mob-progress {
    position: relative;
    width: 100%;
    height: 6px;
    background-color: var(--bg-secondary-subtle, rgba(127, 127, 127, 0.12));
    border-radius: 999px;
    overflow: hidden;
  }
  .mob-progress__bar {
    height: 100%;
    background-color: var(--color-primary, #3b82f6);
    border-radius: 999px;
    transition: width 480ms var(--ease-mob-out);
  }
  .mob-progress__bar--striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.18) 75%, transparent 75%, transparent);
    background-size: 24px 24px;
    animation: mob-progress-stripe 1.4s linear infinite;
  }
  .mob-bottom-nav__item:active i, .mob-bottom-nav__item:active svg {
    animation: mob-pop 320ms var(--ease-mob-spring);
  }
  .btn-primary.mob-ripple, .btn-secondary.mob-ripple, .mob-fab.mob-ripple {
    overflow: hidden;
    isolation: isolate;
  }
  .mob-heart {
    display: inline-block;
    cursor: pointer;
    transition: transform 200ms var(--ease-mob-spring);
  }
  .mob-heart.is-liked {
    animation: mob-pop 520ms var(--ease-mob-spring);
    color: var(--color-danger, #dc2626);
  }
  .mob-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background-color: var(--bg-mobile-row-active);
    border-radius: 14px;
  }
  .mob-typing__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--text-mobile-muted);
    animation: mob-bounce-soft 1.2s ease-in-out infinite;
  }
  .mob-typing__dot:nth-child(2) {
    animation-delay: 0.15s;
  }
  .mob-typing__dot:nth-child(3) {
    animation-delay: 0.30s;
  }
  .mob-skel-group.is-loaded > .mob-skel {
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
  }
  .mob-skel-group.is-loaded > :not(.mob-skel) {
    animation: mob-fade-in 360ms var(--ease-mob-out) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .mob-anim, .mob-anim-fade, .mob-anim-slide-up, .mob-anim-slide-down, .mob-anim-slide-left, .mob-anim-slide-right, .mob-anim-scale, .mob-anim-pop, .mob-anim-bounce, .mob-anim-shake, .mob-anim-stagger > *, .mob-counter, .mob-counter.is-changing, .mob-sparkle, .mob-pin-drop, .mob-page-enter, .mob-page-exit, .mob-tab-content > *, .mob-row.is-flashed, .mob-progress__bar--striped, .mob-typing__dot, .mob-skel-group.is-loaded > :not(.mob-skel) {
      animation: none !important;
    }
    .mob-tick__circle, .mob-tick__check {
      animation: none !important;
      stroke-dashoffset: 0 !important;
    }
  }
  .mob-device, .mob-shell, .mob-header, .mob-row, .mob-card, .mob-chip, .mob-segmented, .mob-bottom-nav, .mob-sheet, .mob-drawer, .mob-settings, .mob-list-group {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Inter", "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv01", "tnum";
  }
  .mob-header {
    height: 44px;
    min-height: 44px;
    padding: 0 8px;
    border-bottom: 0.5px solid var(--border-mobile-divider);
    gap: 4px;
  }
  .mob-header__title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.2;
  }
  .mob-header__subtitle {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.15;
    color: var(--text-mobile-muted);
    margin-top: 0;
  }
  .mob-header__back {
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 6px 0 4px;
    border-radius: 8px;
    color: var(--color-primary, #007aff);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .mob-header__back > i {
    font-size: 17px;
    font-weight: 600;
  }
  .mob-header__back > .mob-header__back__label {
    font-size: 17px;
    line-height: 1;
    margin-left: 2px;
  }
  .mob-header__action {
    width: 36px;
    height: 36px;
    color: var(--color-primary, #007aff);
  }
  .mob-header--large {
    padding: 8px 16px 12px;
    height: auto;
    min-height: 88px;
  }
  .mob-header--large .mob-header__title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.026em;
    line-height: 1.05;
  }
  .mob-bottom-nav {
    height: 49px;
    padding-top: 0;
    border-top: 0.5px solid var(--border-mobile-divider);
  }
  .mob-bottom-nav__item {
    gap: 2px;
    padding: 4px 0 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-mobile-muted);
  }
  .mob-bottom-nav__item i, .mob-bottom-nav__item svg {
    font-size: 22px;
  }
  .mob-sheet__handle {
    padding: 6px 0;
  }
  .mob-sheet__handle::before {
    width: 36px;
    height: 5px;
    background-color: var(--text-mobile-muted);
    opacity: 0.30;
  }
  .mob-sheet__header {
    position: relative;
    justify-content: center;
    padding: 6px 56px 14px;
    border-bottom: 0.5px solid var(--border-mobile-divider);
    min-height: 44px;
  }
  .mob-sheet__title {
    flex: 0 1 auto;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
  }
  .mob-sheet__header .mob-header__action {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
  }
  .mob-sheet__btn-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--color-primary, #007aff);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    cursor: pointer;
    border-radius: 8px;
  }
  .mob-sheet__btn-text--left {
    left: 8px;
  }
  .mob-sheet__btn-text--right {
    right: 8px;
    font-weight: 600;
  }
  .mob-list-group {
    background-color: var(--bg-mobile-card);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .mob-list-group__title {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-mobile-muted);
    padding: 6px 16px 6px;
    margin-top: 16px;
  }
  .mob-list-group__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 16px;
    background-color: transparent;
    color: var(--text-mobile-primary);
    position: relative;
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  .mob-list-group__row:active {
    background-color: var(--bg-mobile-row-active);
  }
  .mob-list-group__row + .mob-list-group__row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 56px;
    right: 0;
    height: 0.5px;
    background-color: var(--border-mobile-divider);
  }
  .mob-list-group__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background-color: var(--color-primary, #007aff);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 auto;
  }
  .mob-list-group__label {
    flex: 1;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .mob-list-group__value {
    font-size: 15px;
    color: var(--text-mobile-muted);
    letter-spacing: -0.01em;
  }
  .mob-list-group__chevron {
    width: 8px;
    font-size: 13px;
    color: var(--text-mobile-muted);
    opacity: 0.7;
  }
  .mob-list-group__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .mob-list-group__body > .mob-list-group__label {
    line-height: 1.2;
  }
  .mob-list-group__sub {
    font-size: 13px;
    color: var(--text-mobile-muted);
    letter-spacing: -0.005em;
  }
  .mob-row {
    min-height: 44px;
    padding: 8px 16px;
    border-bottom: 0;
    position: relative;
  }
  .mob-row + .mob-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 56px;
    right: 0;
    height: 0.5px;
    background-color: var(--border-mobile-divider);
  }
  .mob-row__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
  }
  .mob-row__title {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .mob-row__meta {
    font-size: 13px;
    letter-spacing: -0.005em;
  }
  .mob-row__chevron {
    font-size: 13px;
    opacity: 0.45;
  }
  .mob-card {
    border-radius: 14px;
    padding: 14px 16px;
    border: 0;
    background-color: var(--bg-mobile-card);
    box-shadow: 0 1px 0 var(--border-mobile-divider);
  }
  .mob-card__title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.2;
  }
  .mob-card__meta {
    font-size: 13px;
    letter-spacing: -0.005em;
  }
  .mob-segmented {
    height: 32px;
    padding: 2px;
    border-radius: 8px;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 16%, transparent);
    }
  }
  .mob-segmented__indicator {
    top: 2px;
    bottom: 2px;
    border-radius: 7px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10), 0 1px 1px rgba(0, 0, 0, 0.04);
  }
  .mob-segmented__item {
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .mob-search {
    height: 36px;
    border-radius: 10px;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 14%, transparent);
    }
    padding: 0 8px;
    font-size: 17px;
    letter-spacing: -0.01em;
  }
  .mob-search input::placeholder {
    color: var(--text-mobile-muted);
    opacity: 1;
  }
  .mob-search i {
    font-size: 14px;
  }
  .mob-search-cancel {
    border: 0;
    background: transparent;
    color: var(--color-primary, #007aff);
    font-size: 17px;
    font-weight: 400;
    padding: 0 8px;
    cursor: pointer;
    display: none;
  }
  .mob-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mob-search-bar.is-focused .mob-search-cancel {
    display: inline-block;
  }
  .mob-chip {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: 999px;
    border: 0;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 14%, transparent);
    }
    color: var(--text-mobile-primary);
  }
  .mob-chip.is-active {
    background-color: var(--color-primary, #007aff);
    color: #fff;
  }
  .mob-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 16px;
    background-color: transparent;
    position: relative;
  }
  .mob-form-row + .mob-form-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 0;
    height: 0.5px;
    background-color: var(--border-mobile-divider);
  }
  .mob-form-row__label {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text-mobile-primary);
    min-width: 96px;
  }
  .mob-form-row__input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    text-align: right;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text-mobile-primary);
    min-width: 0;
  }
  .mob-form-row__input::placeholder {
    color: var(--text-mobile-muted);
    opacity: 1;
  }
  .mob-banner {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-bottom: 0.5px solid var(--border-mobile-divider);
  }
  .mob-shell__body {
    background-color: var(--bg-mobile-shell);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-mobile-shell) 92%, var(--text-mobile-muted) 8%);
    }
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-shell__body {
    background-color: var(--bg-mobile-shell);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-mobile-shell) 88%, #fff 4%);
    }
  }
  .mob-mini {
    padding: 10px 12px;
    border-top: 0.5px solid var(--border-mobile-divider);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background-color: var(--bg-mobile-card);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--bg-mobile-card) 88%, transparent);
    }
  }
  .mob-mini__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .mob-mini__meta {
    font-size: 12px;
    letter-spacing: -0.005em;
  }
  .mob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 50px;
    padding: 0 22px;
    border-radius: 14px;
    border: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 120ms var(--ease-mob-out), background-color 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-btn:active {
    transform: scale(0.97);
  }
  .mob-btn--primary {
    background-color: var(--color-primary, #007aff);
    color: #fff;
  }
  .mob-btn--primary:hover {
    filter: brightness(1.04);
  }
  .mob-btn--secondary {
    background-color: var(--color-primary, #007aff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary, #007aff) 12%, transparent);
    }
    color: var(--color-primary, #007aff);
  }
  .mob-btn--ghost {
    background-color: transparent;
    color: var(--color-primary, #007aff);
  }
  .mob-btn--danger {
    background-color: var(--color-danger, #ff3b30);
    color: #fff;
  }
  .mob-btn--full {
    width: 100%;
  }
  .mob-fab {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background-color: var(--color-primary, #007aff);
    font-size: 22px;
    font-weight: 600;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10), 0 6px 16px -4px var(--color-primary, #007aff), 0 16px 32px -10px rgba(0, 0, 0, 0.30);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10), 0 6px 16px -4px color-mix(in oklab, var(--color-primary, #007aff) 60%, transparent), 0 16px 32px -10px rgba(0, 0, 0, 0.30);
    }
  }
  .mob-bottom-nav {
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }
  :is([data-theme="theme-light"],[data-theme="theme-mica-light"]) .mob-row + .mob-row::before, :is([data-theme="theme-light"],[data-theme="theme-mica-light"]) .mob-list-group__row + .mob-list-group__row::before, :is([data-theme="theme-light"],[data-theme="theme-mica-light"]) .mob-form-row + .mob-form-row::before {
    background-color: rgba(60, 60, 67, 0.15);
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-row + .mob-row::before, :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-list-group__row + .mob-list-group__row::before, :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-form-row + .mob-form-row::before {
    background-color: rgba(84, 84, 88, 0.50);
  }
  .mob-btn--sm {
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 10px;
  }
  .mob-btn--md {
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
    border-radius: 12px;
  }
  .mob-btn--lg {
    height: 56px;
    padding: 0 24px;
    font-size: 17px;
    border-radius: 16px;
  }
  .mob-button-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 14%, transparent);
    }
    padding: 3px;
    gap: 0;
  }
  .mob-button-group .mob-button-group__btn {
    flex: 1;
    height: 30px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--text-mobile-primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 160ms ease, color 160ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .mob-button-group .mob-button-group__btn.is-active {
    background-color: var(--bg-mobile-card);
    color: var(--text-mobile-primary);
    box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 3px 8px rgba(0,0,0,0.08);
  }
  .mob-button-group--lg .mob-button-group__btn {
    height: 42px;
    font-size: 15px;
    border-radius: 10px;
  }
  .mob-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--color-primary, #007aff);
    cursor: pointer;
    border-radius: 999px;
    transition: background-color 120ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-icon-btn:hover {
    background-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, currentColor 12%, transparent);
    }
  }
  .mob-icon-btn:active {
    transform: scale(0.94);
  }
  .mob-icon-btn--xs {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .mob-icon-btn--sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .mob-icon-btn--md {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .mob-icon-btn--lg {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
  .mob-icon-btn--tonal {
    background-color: var(--color-primary, #007aff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary, #007aff) 12%, transparent);
    }
  }
  .mob-icon-btn--solid {
    background-color: var(--color-primary, #007aff);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  }
  .mob-icon-btn--square {
    border-radius: 10px;
  }
  .mob-fab--mini {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 18px;
  }
  .mob-fab--inline {
    position: static;
    right: auto;
    bottom: auto;
  }
  .mob-fab-menu--inline {
    position: static;
    right: auto;
    bottom: auto;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .mob-stepper {
    --mob-stepper-bg: #f2f2f7;
    --mob-stepper-divider: rgba(60, 60, 67, 0.18);
    --mob-stepper-text: var(--text-mobile-primary);
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border-radius: 8px;
    background-color: var(--mob-stepper-bg);
    overflow: hidden;
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) .mob-stepper {
    --mob-stepper-bg: #2c2c2e;
    --mob-stepper-divider: rgba(255, 255, 255, 0.14);
    --mob-stepper-text: #ffffff;
  }
  .mob-stepper__btn {
    width: 36px;
    border: 0;
    background: transparent;
    color: var(--mob-stepper-text);
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease;
  }
  .mob-stepper__btn:active {
    background-color: var(--mob-stepper-text);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--mob-stepper-text) 12%, transparent);
    }
  }
  .mob-stepper__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .mob-stepper__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0 8px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mob-stepper-text);
    background-color: transparent;
    border-left: 0.5px solid var(--mob-stepper-divider);
    border-right: 0.5px solid var(--mob-stepper-divider);
  }
  .mob-slider {
    --mob-slider-fill: var(--color-primary, #007aff);
    position: relative;
    width: 100%;
    height: 28px;
    padding: 12px 0;
    display: flex;
    align-items: center;
  }
  .mob-slider input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
  }
  .mob-slider__track {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 22%, transparent);
    }
  }
  .mob-slider__fill {
    position: absolute;
    inset: 0;
    width: 50%;
    border-radius: 999px;
    background-color: var(--mob-slider-fill);
    transition: width 60ms linear;
  }
  .mob-slider__thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background-color: #fff;
    transform: translate(-14px, -50%);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 3px 8px rgba(0,0,0,0.15);
    transition: left 60ms linear, transform 120ms var(--ease-mob-out);
    z-index: 2;
    pointer-events: none;
  }
  .mob-slider:active .mob-slider__thumb, .mob-slider input[type="range"]:active ~ .mob-slider__thumb {
    transform: translate(-14px, -50%) scale(1.1);
  }
  .mob-slider--ticks .mob-slider__track {
    background-image: repeating-linear-gradient( to right, transparent 0, transparent calc(20% - 1px), var(--text-mobile-muted) calc(20% - 1px), var(--text-mobile-muted) 20% );
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient( to right, transparent 0, transparent calc(20% - 1px), color-mix(in oklab, var(--text-mobile-muted) 35%, transparent) calc(20% - 1px), color-mix(in oklab, var(--text-mobile-muted) 35%, transparent) 20% );
    }
  }
  .mob-radio-row, .mob-checkbox-row {
    cursor: pointer;
  }
  .mob-radio-row input[type="radio"], .mob-checkbox-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .mob-radio-row__check, .mob-checkbox-row__check {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #007aff);
    font-size: 18px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 160ms ease, transform 200ms var(--ease-mob-spring);
    transform: scale(0.5);
  }
  .mob-radio-row input[type="radio"]:checked + .mob-radio-row__check, .mob-radio-row.is-checked .mob-radio-row__check, .mob-checkbox-row input[type="checkbox"]:checked + .mob-checkbox-row__check, .mob-checkbox-row.is-checked .mob-checkbox-row__check {
    opacity: 1;
    transform: scale(1);
  }
  .mob-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-stars__star {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--text-mobile-muted) 40%, transparent);
    }
    font-size: 22px;
    cursor: pointer;
    transition: transform 120ms var(--ease-mob-spring), color 120ms ease;
  }
  .mob-stars__star:active {
    transform: scale(0.85);
  }
  .mob-stars__star.is-filled {
    color: var(--color-warning, #ff9500);
  }
  .mob-stars--sm .mob-stars__star {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }
  .mob-stars--lg .mob-stars__star {
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
  .mob-chip--sm {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .mob-chip--lg {
    height: 38px;
    padding: 0 16px;
    font-size: 15px;
  }
  .mob-chip--outline {
    background-color: transparent;
    border: 1px solid var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklab, var(--text-mobile-muted) 35%, transparent);
    }
  }
  .mob-chip--tonal {
    background-color: var(--color-primary,#007aff);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary,#007aff) 14%, transparent);
    }
    color: var(--color-primary,#007aff);
  }
  .mob-chip--success {
    background-color: var(--color-success,#34c759);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-success,#34c759) 18%, transparent);
    }
    color: var(--color-success,#34c759);
  }
  .mob-chip--warning {
    background-color: var(--color-warning,#ff9500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-warning,#ff9500) 18%, transparent);
    }
    color: var(--color-warning,#ff9500);
  }
  .mob-chip--danger {
    background-color: var(--color-danger,#ff3b30);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-danger,#ff3b30) 18%, transparent);
    }
    color: var(--color-danger,#ff3b30);
  }
  .mob-chip--info {
    background-color: var(--color-info,#5ac8fa);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-info,#5ac8fa) 18%, transparent);
    }
    color: var(--color-info,#5ac8fa);
  }
  .mob-chip.is-active.mob-chip--success {
    background-color: var(--color-success,#34c759);
    color: #fff;
  }
  .mob-chip.is-active.mob-chip--warning {
    background-color: var(--color-warning,#ff9500);
    color: #fff;
  }
  .mob-chip.is-active.mob-chip--danger {
    background-color: var(--color-danger, #ff3b30);
    color: #fff;
  }
  .mob-chip.is-active.mob-chip--info {
    background-color: var(--color-info, #5ac8fa);
    color: #fff;
  }
  .mob-chip-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .mob-chip-bar::-webkit-scrollbar {
    display: none;
  }
  .mob-chip-bar > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .mob-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 14%, transparent);
    }
    min-height: 44px;
  }
  .mob-tag-input__field {
    flex: 1;
    min-width: 80px;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--text-mobile-primary);
  }
  .mob-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .mob-keypad__key {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 14%, transparent);
    }
    color: var(--text-mobile-primary);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-keypad__key:active {
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 30%, transparent);
    }
    transform: scale(0.97);
  }
  .mob-keypad__sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-top: 1px;
    color: var(--text-mobile-muted);
    text-transform: uppercase;
  }
  .mob-keypad__key--action {
    background-color: transparent;
    color: var(--color-primary, #007aff);
  }
  .mob-disclosure {
    background-color: var(--bg-mobile-card);
    border-radius: 10px;
    overflow: hidden;
  }
  .mob-disclosure__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 16px;
    cursor: pointer;
  }
  .mob-disclosure__head__label {
    flex: 1;
    font-size: 17px;
    letter-spacing: -0.01em;
  }
  .mob-disclosure__caret {
    color: var(--text-mobile-muted);
    font-size: 13px;
    transition: transform 240ms var(--ease-mob-spring);
  }
  .mob-disclosure.is-open .mob-disclosure__caret {
    transform: rotate(90deg);
  }
  .mob-disclosure__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms var(--ease-mob-out);
  }
  .mob-disclosure.is-open .mob-disclosure__body {
    max-height: 800px;
  }
  .mob-disclosure__body__inner {
    padding: 0 16px 14px;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--text-mobile-muted);
  }
  .mob-toggle-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: 10px;
    background-color: var(--text-mobile-muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--text-mobile-muted) 14%, transparent);
    }
    padding: 3px;
    gap: 0;
  }
  .mob-toggle-group__btn {
    width: 34px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--text-mobile-muted);
    font-size: 14px;
    cursor: pointer;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .mob-toggle-group__btn.is-active {
    background-color: var(--bg-mobile-card);
    color: var(--text-mobile-primary);
    box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 3px 8px rgba(0,0,0,0.10);
  }
  .mob-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--color-success, #34c759);
    vertical-align: middle;
    margin-right: 6px;
  }
  .mob-status-dot--warning {
    background-color: var(--color-warning, #ff9500);
  }
  .mob-status-dot--danger {
    background-color: var(--color-danger, #ff3b30);
  }
  .mob-status-dot--muted {
    background-color: var(--text-mobile-muted);
  }
  .mob-status-dot--pulse {
    box-shadow: 0 0 0 0 currentColor;
    animation: mob-pulse-ring 1.6s ease-out infinite;
    --mob-pulse-color: currentColor;
  }
  @media (prefers-reduced-motion: reduce) {
    .mob-stepper__btn, .mob-slider__thumb, .mob-stars__star, .mob-button-group__btn, .mob-disclosure__caret, .mob-disclosure__body, .mob-radio-row__check, .mob-checkbox-row__check {
      transition: none !important;
    }
  }
  .mob-return-to {
    padding: 0.5rem 1rem;
  }
  .mob-return-to__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 44px;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-mobile-nav-item);
    background: var(--bg-mobile-card);
    border: 1px solid var(--border-mobile-divider);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default);
  }
  .mob-return-to__btn:hover {
    background: var(--bg-mobile-row-active);
  }
  .mob-return-to__btn i {
    font-size: 0.75rem;
    opacity: 0.8;
  }
}
@layer utilities {
  .appointment-card {
    position: relative;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-block: calc(var(--spacing) * 2);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    background-color: var(--bg-appointment-card);
    border-color: var(--border-appointment-card);
    color: var(--text-appointment-card);
  }
  .appointment-card:hover {
    background-color: var(--bg-appointment-card-hover);
  }
  .appointment-color-indicator {
    position: absolute;
    top: calc(var(--spacing) * 2);
    left: -1px;
    z-index: 2;
    height: 38px;
    width: 3px;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .appointment-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
  }
  .appointment-id-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  .appointment-number {
    margin-right: calc(var(--spacing) * 0.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-appointment-number);
  }
  .icon-float {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-appointment-icon-float);
  }
  .icon-log {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-appointment-icon-log);
  }
  .icon-attachment, .icon-photo {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-appointment-icon-secondary);
  }
  .icon-audit {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-appointment-icon-audit);
  }
  .appointment-status-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
  }
  .appointment-status {
    font-size: 0.563rem;
    line-height: var(--tw-leading, 1rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }
  .appointment-timegap {
    margin-left: var(--spacing);
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .appointment-note {
    padding-inline: calc(var(--spacing) * 3);
    padding-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-appointment-note);
  }
  .appointment-carrier {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 3);
    padding-top: var(--spacing);
  }
  .appointment-carrier-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-appointment-carrier);
  }
  .appointment-details {
    &:not(.show) {
      display: none;
    }
    &.show {
      display: block;
      visibility: visible;
    }
    &.show.flex {
      display: flex;
    }
    &.collapse-horizontal.show {
      display: inline-block;
    }
    &.collapse--fade.show {
      animation: collapse-fade-in var(--duration-collapse, 260ms) var(--ease-collapse) both;
    }
    &.collapse--slide.show {
      animation: collapse-slide-in var(--duration-collapse, 260ms) var(--ease-collapse) both;
    }
    @media (prefers-reduced-motion: reduce) {
      &.collapse--fade.show {
        animation: none;
      }
      &.collapse--slide.show {
        animation: none;
      }
    }
    visibility: collapse;
    width: 100%;
  }
  .appointment-meta {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 3);
  }
  .appointment-duration, .appointment-category {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.35;
    text-transform: uppercase;
  }
  .appointment-comment {
    margin-inline: var(--spacing);
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-appointment-comment);
    border-color: var(--border-appointment-comment);
    color: var(--text-appointment-comment);
  }
  .appointment-origin {
    margin-top: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.35;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    color: var(--text-appointment-origin);
  }
  .appointment-refs {
    margin-top: calc(var(--spacing) * 0.5);
    padding-inline: calc(var(--spacing) * 3);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.4;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    text-transform: uppercase;
    color: var(--text-appointment-refs);
  }
  .appointment-equipment {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
  }
  .equipment-type {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.35;
  }
  .equipment-id {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-appointment-equipment-id);
  }
  .appointment-toggle {
    visibility: hidden;
    position: absolute;
    right: var(--spacing);
    bottom: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: 0;
    background: transparent;
    color: var(--text-tertiary);
    transition: color 100ms ease;
  }
  .appointment-card:hover .appointment-toggle {
    visibility: visible;
  }
  .appointment-toggle:hover {
    color: var(--text-primary);
  }
}
@layer utilities {
  #proximityBar {
    height: calc(var(--spacing) * 4);
    width: 100%;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #dee1e6;
    background-color: #f1f3f5;
    &:is(.dark *) {
      border-color: #2f3038;
    }
    &:is(.dark *) {
      background-color: #2f3038;
    }
  }
  #bar {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    background-color: #2f6fe4;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  #tagList {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .tagItem {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #f1f3f5;
    background-color: #f1f3f5;
    padding: calc(var(--spacing) * 4);
  }
  .inventory-grid-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-inventory-grid-panel);
  }
  .inventory-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }
  .inventory-gallery:has(> .empty-state) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
  .inventory-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background-color: var(--bg-inventory-card);
    border: none;
    z-index: 0;
  }
  .inventory-card::before {
    content: "";
    pointer-events: none;
    position: absolute;
    border-radius: var(--radius-xl);
    inset: 0;
    background-color: transparent;
    transition: background-color 150ms ease, inset 150ms ease;
    z-index: -1;
  }
  .inventory-card:hover {
    cursor: pointer;
  }
  .inventory-card:hover::before {
    background-color: var(--bg-inventory-card-hover);
    inset: -8px -8px 0 -8px;
  }
  .inventory-card-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-grow: 1;
    flex-direction: column;
  }
  .inventory-image {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    aspect-ratio: 4/3;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--bg-inventory-image);
  }
  .inventory-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .inventory-image .fa-image {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
    color: var(--text-inventory-tertiary);
  }
  .inventory-carousel {
    position: absolute;
    inset: 0;
  }
  .inventory-carousel .carousel {
    height: 100%;
    border-radius: var(--radius-none);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background: transparent;
  }
  .inventory-carousel .carousel__track {
    height: 100%;
  }
  .inventory-carousel .carousel__slide {
    height: 100%;
  }
  .inventory-carousel .carousel__prev, .inventory-carousel .carousel__next {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
    opacity: 0;
    transition: opacity 150ms ease, background-color 150ms ease;
  }
  .inventory-image:hover .inventory-carousel .carousel__prev, .inventory-image:hover .inventory-carousel .carousel__next {
    opacity: 1;
  }
  .inventory-carousel .carousel__prev {
    left: 0.375rem;
  }
  .inventory-carousel .carousel__next {
    right: 0.375rem;
  }
  .inventory-carousel .carousel__dots {
    bottom: calc(var(--spacing) * 1.5);
    gap: var(--spacing);
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .inventory-image:hover .inventory-carousel .carousel__dots {
    opacity: 1;
  }
  .inventory-carousel .carousel__dot {
    width: 5px;
    height: 5px;
  }
  .inventory-image-count {
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * 1.5);
    right: calc(var(--spacing) * 1.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    backdrop-filter: blur(4px);
  }
  .inventory-info {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-grow: 1;
    flex-direction: column;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    color: var(--text-inventory-info);
  }
  .inventory-info .item-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    line-height: 1.55;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    line-height: 1.5;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
  }
  .inventory-info .item-sku {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.4;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    text-transform: uppercase;
    color: var(--text-inventory-secondary);
  }
  .item-serial-tag {
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--text-pink) !important;
    color: #e94284;
    text-transform: uppercase;
  }
  .inventory-serial-badge {
    pointer-events: none;
    position: absolute;
    bottom: calc(var(--spacing) * 1.5);
    left: calc(var(--spacing) * 1.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background-color: var(--bg-badge-info);
    color: var(--text-badge-info);
  }
  .inventory-serial-badge--inline {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background-color: var(--bg-badge-info);
    color: var(--text-badge-info);
  }
  .serial-popover .popover__body {
    overflow-y: auto;
    max-height: min(320px, 60vh);
  }
  .serial-tray-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .serial-tray-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    color: var(--text-primary);
  }
  .serial-tray-item:hover {
    background-color: var(--bg-inventory-popover-hover);
  }
  .serial-tray-item:hover [data-copyable] > .copyable__btn {
    opacity: 0.45;
    pointer-events: auto;
  }
  .serial-tray-item .serial-number {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
  }
  .serial-tray-item .serial-meta {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .inventory-card-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .inventory-card-footer .location-code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-inventory-tertiary);
  }
  .inventory-card-footer .location-qty {
    margin-left: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    color: var(--text-inventory-info);
  }
  .inventory-card-footer .location-link {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-decoration-line: none;
    color: var(--text-link);
  }
  .inventory-card-footer .location-link:hover {
    text-decoration: underline;
  }
  .popover.location-popover, .popover.serial-popover {
    background-color: var(--bg-inventory-popover);
  }
  .popover.location-popover .popover__search {
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: var(--spacing);
  }
  .popover.location-popover .popover__body {
    padding-inline: var(--spacing);
    padding-block: calc(var(--spacing) * 2);
  }
  .popover.location-popover:has(.popover__search) .popover__body {
    padding-top: var(--spacing);
    max-height: min(280px, 50vh);
    overflow-y: auto;
  }
  .location-popover-table {
    width: 100%;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    border-collapse: separate;
  }
  .location-popover-table td {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .location-popover-table td:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    padding-right: calc(var(--spacing) * 4);
    color: var(--text-primary);
  }
  .location-popover-table td:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    text-align: right;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--text-primary);
  }
  .location-popover-table tr:hover td {
    background-color: var(--bg-inventory-popover-hover);
    cursor: default;
  }
  .location-popover-total {
    margin-inline: calc(var(--spacing) * 2);
    margin-top: var(--spacing);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-top: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    border-color: var(--border-popover, var(--border-primary));
    color: var(--text-primary);
  }
  @keyframes inventory-card-enter {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .inventory-card.is-entering {
    animation: inventory-card-enter 300ms ease both;
  }
  @media (prefers-reduced-motion: reduce) {
    .inventory-card.is-entering {
      animation: none;
      opacity: 1;
    }
  }
  .inventory-card-skeleton {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .inventory-card-skeleton .skeleton-image {
    display: block;
    --skeleton-shimmer-duration: 1.5s;
    border-radius: var(--radius-sm);
    background: linear-gradient( 90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63% );
    background-size: 200% 100%;
    animation: shimmer var(--skeleton-shimmer-duration) var(--ease-default) infinite;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
  }
  .inventory-card-skeleton .skeleton-info {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
  }
  .inventory-card-skeleton .skeleton-info .skeleton--text:first-child {
    height: calc(var(--spacing) * 3.5);
    width: calc(4 / 5 * 100%);
  }
  .inventory-card-skeleton .skeleton-info .skeleton--text:last-child {
    height: calc(var(--spacing) * 2.5);
    width: calc(1 / 2 * 100%);
  }
  .inventory-card-skeleton .skeleton-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .inventory-card-skeleton .skeleton-footer .skeleton--text:first-child {
    height: calc(var(--spacing) * 2.5);
    width: calc(2 / 5 * 100%);
  }
  .inventory-card-skeleton .skeleton-footer .skeleton--text:last-child {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 8);
  }
  .inventory-section-heading {
    position: sticky;
    z-index: 10;
    grid-column: 1 / -1;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    top: -0.75rem;
    margin: 0 -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-color: var(--bg-inventory-grid-panel);
  }
  .inventory-section-heading .heading-site {
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    line-height: 1.55;
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    line-height: 1.5;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-inventory-info);
  }
  .inventory-section-heading .heading-warehouse {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.4;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-inventory-secondary);
  }
  .inventory-section-heading .heading-separator {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.4;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-inventory-tertiary);
  }
  .inventory-section-heading .heading-count {
    margin-left: auto;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.4;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-inventory-tertiary);
  }
  .border-l-success-60 {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--border-success);
    opacity: 60%;
  }
  .bg-success-5 {
    background-color: var(--bg-success) !important;
    opacity: 10%;
  }
  .border-l-danger-60 {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--border-danger);
    opacity: 60%;
  }
  .bg-danger-5 {
    background-color: var(--bg-danger) !important;
    opacity: 10%;
  }
  .tree-select-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }
  .scope-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    padding: 0.375rem 0.75rem;
    border-color: var(--border-divider);
    background-color: var(--bg-panel);
    min-height: 32px;
  }
  .scope-bar.hidden {
    display: none;
  }
  .scope-bar__label {
    flex-shrink: 0;
    color: var(--text-tertiary);
  }
  .scope-bar__chips {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: var(--spacing);
    overflow: hidden;
    flex-wrap: nowrap;
  }
  .scope-overflow-badge {
    flex-shrink: 0;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
  }
  .scope-bar__clear {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    background: transparent;
    transition: color 100ms ease, background-color 100ms ease;
  }
  .scope-bar__clear:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-subtle);
  }
  .scope-bar__clear.hidden {
    display: none;
  }
  .scope-tray-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    color: var(--text-primary);
  }
  .scope-tray-item:hover {
    background-color: var(--bg-primary-subtle);
  }
  .scope-tray-remove {
    display: inline-flex;
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity 100ms ease, color 100ms ease, background-color 100ms ease;
  }
  .scope-tray-item:hover .scope-tray-remove {
    opacity: 1;
  }
  .scope-tray-remove:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary-hover);
  }
}
@layer utilities {
  .mail-app {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-mail-app, var(--bg-surface));
  }
  .mail-app__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--bg-mail-toolbar, var(--bg-surface));
  }
  .mail-app__toolbar-left {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .mail-app__toolbar-center {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: 1;
    align-items: center;
    justify-content: center;
  }
  .mail-app__toolbar-right {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .mail-search {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    width: 100%;
    max-width: 420px;
  }
  .mail-search__input {
    width: 100%;
    border-radius: var(--radius-lg);
    padding-block: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 8);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    background-color: var(--bg-mail-search, var(--bg-input));
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--border-mail-search, var(--border-input)), var(--shadow-xs);
    transition: box-shadow 100ms ease, background-color 100ms ease;
  }
  .mail-search__input:hover {
    box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
  }
  .mail-search__input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .mail-search__input::placeholder {
    color: var(--text-placeholder);
  }
  .mail-search__icon {
    pointer-events: none;
    position: absolute;
    left: calc(var(--spacing) * 2.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .mail-search__shortcut {
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * 2);
  }
  .mail-sidebar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-mail-sidebar, var(--bg-surface));
  }
  .mail-sidebar__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--border-divider);
  }
  .mail-sidebar__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .mail-sidebar__list {
    flex: 1;
    overflow-y: auto;
    padding-block: var(--spacing);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .mail-sidebar__section {
    padding-block: calc(var(--spacing) * 2);
  }
  .mail-sidebar__section-title {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-quaternary);
  }
  .mail-folder {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    color: var(--text-secondary);
  }
  .mail-folder:hover {
    background-color: var(--bg-mail-folder-hover, var(--bg-row-hover));
  }
  .mail-folder.is-active {
    background-color: var(--bg-mail-folder-active);
    color: var(--text-mail-folder-active);
  }
  .mail-folder.is-active .mail-folder__icon {
    color: var(--text-mail-folder-active, var(--text-primary));
  }
  .mail-folder__icon {
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    text-align: center;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .mail-folder__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .mail-folder__count {
    min-width: 20px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    text-align: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    background-color: var(--bg-mail-count, var(--bg-badge));
    color: var(--text-mail-count, var(--text-badge));
  }
  .mail-folder--indent {
    padding-left: 2.75rem;
  }
  .mail-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .mail-label__dot {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    flex-shrink: 0;
    border-radius: var(--radius-full);
  }
  .mail-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-mail-list, var(--bg-surface));
  }
  .mail-list__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--bg-mail-list-header, var(--bg-surface));
  }
  .mail-list__header-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .mail-list__header-count {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    color: var(--text-tertiary);
  }
  .mail-list__actions {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  .mail-list__body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .mail-item {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    border-bottom: 1px solid var(--border-mail-item, var(--border-subtle));
  }
  .mail-item:hover {
    background-color: var(--bg-mail-item-hover, var(--bg-row-hover));
  }
  .mail-item.is-active {
    background-color: var(--bg-mail-item-active);
  }
  .mail-item.is-selected {
    background-color: var(--bg-mail-item-selected);
  }
  .mail-item.is-unread {
    background-color: var(--bg-mail-item-unread, transparent);
  }
  .mail-item.is-unread .mail-item__subject {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .mail-item.is-unread::before {
    content: "";
    position: absolute;
    top: calc(1 / 2 * 100%);
    left: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: var(--radius-full);
    background-color: var(--bg-mail-unread-dot);
  }
  .mail-item__check {
    flex-shrink: 0;
    padding-top: calc(var(--spacing) * 0.5);
  }
  .mail-item__check input[type="checkbox"] {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .mail-item__avatar {
    flex-shrink: 0;
    padding-top: calc(var(--spacing) * 0.5);
  }
  .mail-item__content {
    min-width: 0;
    flex: 1;
  }
  .mail-item__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
  }
  .mail-item__sender {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .mail-item.is-unread .mail-item__sender {
    color: var(--text-primary);
  }
  .mail-item__time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    white-space: nowrap;
    color: var(--text-quaternary);
  }
  .mail-item__subject {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
  }
  .mail-item__preview {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .mail-item__meta {
    margin-top: calc(var(--spacing) * 1.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .mail-item__attachment-icon {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .mail-item__star {
    cursor: pointer;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    color: var(--text-quaternary);
  }
  .mail-item__star:hover, .mail-item__star.is-starred {
    color: var(--text-warning);
  }
  .mail-item__hover-actions {
    position: absolute;
    top: calc(1 / 2 * 100%);
    right: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    align-items: center;
    gap: calc(var(--spacing) * 0.5);
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    background-color: var(--bg-mail-item-hover, var(--bg-surface));
  }
  .mail-item:hover .mail-item__hover-actions {
    opacity: 100%;
  }
  .mail-item__hover-btn {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    color: var(--text-tertiary);
    background-color: transparent;
    border: none;
  }
  .mail-item__hover-btn:hover {
    background-color: var(--bg-button-ghost-hover);
    color: var(--text-primary);
  }
  .mail-detail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-mail-detail, var(--bg-surface));
  }
  .mail-detail__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-divider);
  }
  .mail-detail__body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
  .mail-detail__content {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
  }
  .mail-detail__header {
    padding-bottom: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--border-subtle);
  }
  .mail-detail__subject {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .mail-detail__sender-row {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .mail-detail__sender-info {
    min-width: 0;
    flex: 1;
  }
  .mail-detail__sender-name {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .mail-detail__sender-email {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .mail-detail__date {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    white-space: nowrap;
    color: var(--text-tertiary);
  }
  .mail-detail__recipients {
    margin-top: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .mail-detail__recipients-toggle {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    color: var(--text-link);
  }
  .mail-detail__recipients-expanded {
    margin-top: calc(var(--spacing) * 2);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .mail-detail__message {
    margin-top: calc(var(--spacing) * 5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
  }
  .mail-detail__message p {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mail-detail__message a {
    color: var(--text-link);
    text-decoration: underline;
  }
  .mail-detail__message blockquote {
    margin-block: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 4);
    border-left: 3px solid var(--border-divider);
    color: var(--text-tertiary);
  }
  .mail-detail__message img {
    margin-block: calc(var(--spacing) * 2);
    max-width: 100%;
    border-radius: var(--radius-md);
  }
  .mail-detail__attachments {
    margin-top: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 4);
    border-top: 1px solid var(--border-subtle);
  }
  .mail-detail__attachments-title {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .mail-detail__attachment-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .mail-detail__attachment {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-mail-attachment, var(--bg-tertiary-subtle));
    box-shadow: inset 0 0 0 1px var(--border-subtle), var(--shadow-xs);
    color: var(--text-secondary);
    transition: box-shadow 100ms ease, background-color 100ms ease;
  }
  .mail-detail__attachment:hover {
    background-color: var(--bg-mail-attachment-hover, var(--bg-row-hover));
  }
  .mail-detail__attachment-icon {
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-tertiary);
  }
  .mail-detail__attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
  }
  .mail-detail__attachment-size {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .mail-thread {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: 0;
      margin-block-end: 0;
    }
  }
  .mail-thread-item {
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
  }
  .mail-thread-item:last-child {
    border-bottom: none;
  }
  .mail-thread-item__collapsed {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .mail-thread-item__collapsed:hover {
    background-color: var(--bg-row-hover);
  }
  .mail-thread-item__collapsed-sender {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
  }
  .mail-thread-item__collapsed-preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .mail-thread-item__collapsed-time {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    white-space: nowrap;
    color: var(--text-quaternary);
  }
  .mail-thread-item__expanded {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
  }
  .mail-quoted {
    position: relative;
    margin-top: calc(var(--spacing) * 3);
    overflow: hidden;
  }
  .mail-quoted.is-collapsed {
    max-height: 60px;
  }
  .mail-quoted.is-collapsed::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--spacing) * 8);
    background: linear-gradient(transparent, var(--bg-surface));
  }
  .mail-quoted__toggle {
    cursor: pointer;
    padding-block: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-link);
  }
  .mail-quoted__content {
    padding-left: calc(var(--spacing) * 4);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    border-left: 2px solid var(--border-divider);
    color: var(--text-tertiary);
  }
  .mail-thread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-tertiary-subtle);
    color: var(--text-tertiary);
  }
  .mail-compose {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-mail-compose, var(--bg-surface));
  }
  .mail-compose__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-divider);
  }
  .mail-compose__toolbar-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .mail-compose__fields {
    flex: none;
  }
  .mail-compose__field {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: 0;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--border-subtle);
  }
  .mail-compose__field-label {
    width: calc(var(--spacing) * 14);
    flex-shrink: 0;
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
  }
  .mail-compose__field-input {
    min-width: 0;
    flex: 1;
  }
  .mail-compose__cc-toggle {
    flex-shrink: 0;
    cursor: pointer;
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-link);
  }
  .mail-compose__cc-toggle:hover {
    text-decoration: underline;
  }
  .mail-compose__field--cc, .mail-compose__field--bcc {
    display: none;
  }
  .mail-compose__field--cc.is-visible, .mail-compose__field--bcc.is-visible {
    display: flex;
    &.collapse.show {
      display: flex;
    }
  }
  .mail-compose__subject {
    width: 100%;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    color: var(--text-primary);
  }
  .mail-compose__subject::placeholder {
    color: var(--text-placeholder);
  }
  .mail-compose__body {
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }
  .mail-compose__body .msg-composer {
    height: 100%;
    border-radius: var(--radius-none);
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .mail-compose__body .msg-composer:focus-within {
    box-shadow: none;
  }
  .mail-compose__body .msg-composer__editor {
    flex: 1;
    max-height: none;
    min-height: 200px;
  }
  .mail-compose__body .msg-composer__body {
    flex: 1;
  }
  .mail-compose__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border-divider);
  }
  .mail-compose__footer-left {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .mail-compose__footer-right {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .mail-compose__draft {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-tertiary);
  }
  .mail-compose__draft-dot {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    background-color: var(--bg-warning-solid);
  }
  .mail-recipient {
    display: inline-flex;
    max-width: 200px;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-block: calc(var(--spacing) * 0.5);
    padding-right: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    background-color: var(--bg-mail-recipient, var(--bg-badge));
    color: var(--text-mail-recipient, var(--text-badge));
    border: 1px solid var(--border-mail-recipient, transparent);
  }
  .mail-recipient:hover {
    background-color: var(--bg-mail-recipient-hover, var(--bg-tertiary-subtle));
  }
  .mail-recipient.is-invalid {
    background-color: var(--bg-danger-subtle);
    border-color: var(--border-danger);
    color: var(--text-danger);
  }
  .mail-recipient__avatar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--color-brand-50);
    color: var(--text-link);
  }
  .mail-recipient__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mail-recipient__dismiss {
    margin-left: calc(var(--spacing) * 0.5);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: inherit;
    opacity: 0.5;
    background: transparent;
    border: none;
  }
  .mail-recipient__dismiss:hover {
    opacity: 1;
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .mail-address-result {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .mail-address-result:hover, .mail-address-result.is-active {
    background-color: var(--bg-row-hover);
  }
  .mail-address-result__info {
    min-width: 0;
    flex: 1;
  }
  .mail-address-result__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .mail-address-result__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .mail-address-result__meta {
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .mail-quick-reply {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    border-top: 1px solid var(--border-divider);
  }
  .mail-quick-reply__prompt {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: text;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    background-color: var(--bg-mail-quick-reply, var(--bg-input));
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    color: var(--text-placeholder);
    transition: box-shadow 100ms ease;
  }
  .mail-quick-reply__prompt:hover {
    box-shadow: inset 0 0 0 1px var(--border-focus), var(--shadow-xs);
  }
  .mail-quick-reply__expanded {
    display: none;
  }
  .mail-quick-reply.is-expanded .mail-quick-reply__prompt {
    display: none;
  }
  .mail-quick-reply.is-expanded .mail-quick-reply__expanded {
    display: block;
  }
  .mail-selection-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-mail-selection-bar);
    color: var(--text-mail-selection-bar);
    border-bottom: 1px solid var(--border-mail-selection-bar);
  }
  .mail-selection-bar__count {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .mail-selection-bar__actions {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
  }
  .mail-list--compact .mail-item {
    padding-block: calc(var(--spacing) * 2);
  }
  .mail-list--compact .mail-item__sender {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .mail-list--compact .mail-item__subject {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .mail-list--compact .mail-item__preview {
    display: none;
  }
  .mail-empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 16);
    text-align: center;
  }
  .mail-empty__icon {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 14);
    width: calc(var(--spacing) * 14);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2xl);
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
    background-color: var(--bg-tertiary-subtle);
    color: var(--text-tertiary);
  }
  .mail-empty__title {
    margin-bottom: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }
  .mail-empty__description {
    max-width: var(--container-xs);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-tertiary);
  }
  .mail-skeleton-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--border-subtle);
  }
  .mail-skeleton-item__avatar {
    display: block;
    --skeleton-shimmer-duration: 1.5s;
    border-radius: var(--radius-sm);
    background: linear-gradient( 90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63% );
    background-size: 200% 100%;
    animation: shimmer var(--skeleton-shimmer-duration) var(--ease-default) infinite;
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .mail-skeleton-item__lines {
    flex: 1;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-top: var(--spacing);
  }
  @media (max-width: 768px) {
    .mail-compose__field-label {
      width: calc(var(--spacing) * 10);
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
    .mail-detail__content {
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 3);
    }
    .mail-detail__subject {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
  }
  .mail-item__state {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: var(--text-quaternary);
  }
  .mail-item__state--snoozed {
    color: var(--text-mail-snoozed);
  }
  .mail-item__state--pinned {
    color: var(--text-mail-pin);
  }
  .mail-item__state--flagged {
    color: var(--text-mail-flagged);
  }
  .mail-item__state--replied {
    color: var(--text-mail-replied);
  }
  .mail-item__state--forwarded {
    color: var(--text-mail-forwarded);
  }
  .mail-item__state--important {
    color: var(--text-mail-important);
  }
  .mail-item__state--encrypted {
    color: var(--text-mail-encrypted);
  }
  .mail-item__state--draft {
    color: var(--text-mail-draft);
  }
  .mail-item.is-snoozed .mail-item__preview::before {
    content: "Snoozed · ";
    color: var(--text-mail-snoozed);
    font-weight: 500;
  }
  .mail-item.is-draft .mail-item__sender::before {
    content: "Draft · ";
    color: var(--text-mail-draft);
    font-weight: 500;
  }
  .mail-item.is-pinned {
    background-color: oklch(from var(--bg-mail-item-hover) l c h / 0.6);
  }
  .mail-item.is-loading {
    pointer-events: none;
    opacity: 0.6;
  }
  .mail-item.is-new {
    animation: mail-item-flash 1.4s ease-out 1;
  }
  @keyframes mail-item-flash {
    0% {
      background-color: var(--bg-mail-item-new-flash);
    }
    100% {
      background-color: var(--bg-mail-item);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mail-item.is-new {
      animation: none;
    }
  }
  .mail-item.priority-high::after, .mail-item.priority-low::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    pointer-events: none;
  }
  .mail-item.priority-high::after {
    background-color: var(--bg-mail-priority-high);
  }
  .mail-item.priority-low::after {
    background-color: var(--bg-mail-priority-low);
  }
  .mail-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: 0;
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    height: 16px;
    line-height: 1;
  }
  .mail-label--blue {
    background-color: var(--bg-mail-label-blue);
    color: var(--text-mail-label-blue);
  }
  .mail-label--green {
    background-color: var(--bg-mail-label-green);
    color: var(--text-mail-label-green);
  }
  .mail-label--amber {
    background-color: var(--bg-mail-label-amber);
    color: var(--text-mail-label-amber);
  }
  .mail-label--red {
    background-color: var(--bg-mail-label-red);
    color: var(--text-mail-label-red);
  }
  .mail-label--purple {
    background-color: var(--bg-mail-label-purple);
    color: var(--text-mail-label-purple);
  }
  .mail-label--pink {
    background-color: var(--bg-mail-label-pink);
    color: var(--text-mail-label-pink);
  }
  .mail-label--teal {
    background-color: var(--bg-mail-label-teal);
    color: var(--text-mail-label-teal);
  }
  .mail-label--orange {
    background-color: var(--bg-mail-label-orange);
    color: var(--text-mail-label-orange);
  }
  .mail-label--indigo {
    background-color: var(--bg-mail-label-indigo);
    color: var(--text-mail-label-indigo);
  }
  .mail-label--neutral {
    background-color: var(--bg-mail-label-neutral);
    color: var(--text-mail-label-neutral);
  }
  .mail-label--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: currentColor;
    opacity: 0.7;
  }
  .mail-categories {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    background-color: var(--bg-mail-list);
    border-color: var(--border-mail-list);
  }
  .mail-categories__tab {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-mail-category-tab);
    color: var(--text-mail-category-tab);
    border: 0;
    position: relative;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .mail-categories__tab:hover {
    color: var(--text-mail-category-tab-active);
  }
  .mail-categories__tab.is-active {
    background-color: var(--bg-mail-category-tab-active);
    color: var(--text-mail-category-tab-active);
  }
  .mail-categories__tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -7px;
    height: 2px;
    background-color: var(--border-mail-category-tab-active);
    border-radius: 999px;
  }
  .mail-categories__tab-count {
    margin-left: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    color: inherit;
    opacity: 0.7;
  }
  .mail-filter-chips {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    overflow-x: auto;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-mail-list);
    background-color: var(--bg-mail-list);
  }
  .mail-filter-chip {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-mail-filter-chip);
    color: var(--text-mail-filter-chip);
    border: 0;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .mail-filter-chip:hover {
    background-color: var(--bg-mail-folder-hover);
  }
  .mail-filter-chip.is-active {
    background-color: var(--bg-mail-filter-chip-active);
    color: var(--text-mail-filter-chip-active);
  }
  .mail-filter-chip__remove {
    margin-left: 4px;
    opacity: 0.7;
    cursor: pointer;
  }
  .mail-filter-chip__remove:hover {
    opacity: 1;
  }
  .mail-banner {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-mail-banner);
    color: var(--text-mail-banner);
    border-bottom: 1px solid var(--border-mail-banner);
  }
  .mail-banner__icon {
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .mail-banner__text {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mail-banner__action {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: oklch(from var(--text-mail-banner) l c h / 0.15);
  }
  .mail-banner__action:hover {
    background-color: oklch(from var(--text-mail-banner) l c h / 0.25);
  }
  .mail-banner__dismiss {
    margin-left: calc(var(--spacing) * 2);
    flex-shrink: 0;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 0.7;
  }
  .mail-banner__dismiss:hover {
    opacity: 1;
  }
  .mail-banner--success {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
    border-color: var(--border-success);
  }
  .mail-banner--warning {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
    border-color: var(--border-warning);
  }
  .mail-banner--danger {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
    border-color: var(--border-danger);
  }
  .mail-list__toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    border-color: var(--border-mail-list);
    background-color: var(--bg-mail-list);
  }
  .mail-list__toolbar-divider {
    width: 1px;
    height: 16px;
    margin: 0 4px;
    background-color: var(--border-mail-list);
  }
  .mail-list__toolbar-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    transition: background-color 120ms ease;
  }
  .mail-list__toolbar-btn:hover {
    background-color: var(--bg-mail-folder-hover);
  }
  .mail-list__toolbar-spacer {
    flex: 1;
  }
  .mail-list--dense .mail-item {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .mail-list--dense .mail-item__avatar {
    display: none;
  }
  .mail-list--dense .mail-item__sender {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .mail-list--dense .mail-item__subject {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .mail-list--dense .mail-item__preview {
    display: none;
  }
  .mail-list--dense .mail-item__meta {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mail-list--cards {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding: calc(var(--spacing) * 2);
    background-color: transparent;
  }
  .mail-list--cards .mail-item {
    border-radius: var(--radius-lg);
    background-color: var(--bg-mail-list);
    border-bottom: none;
    box-shadow: inset 0 0 0 1px var(--border-mail-list), var(--shadow-xs);
  }
  .mail-list--cards .mail-item:hover {
    box-shadow: inset 0 0 0 1px var(--utility-neutral-300), var(--shadow-sm);
  }
  .mail-list--cards .mail-item.is-active {
    box-shadow: inset 0 0 0 2px var(--border-mail-item-active), var(--shadow-xs);
  }
  .mail-app--pane-bottom > .mail-app__body {
    flex-direction: column !important;
  }
  .mail-app--pane-bottom .mail-list, .mail-app--pane-bottom .mail-detail {
    width: 100% !important;
  }
  .mail-app--pane-hidden .mail-detail {
    display: none;
  }
  .mail-compose {
    background-color: var(--bg-mail-compose);
    box-shadow: inset 0 0 0 1px var(--border-mail-compose), var(--shadow-mail-compose);
    border-radius: 0.75rem;
  }
  .mail-compose__toolbar {
    background-color: var(--bg-mail-compose-toolbar);
  }
  .mail-compose__footer {
    background-color: var(--bg-mail-compose-footer);
  }
  .mail-compose--floating {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 520px;
    max-width: calc(100vw - 32px);
    z-index: var(--z-popover);
  }
  .mail-compose--mini {
    width: 320px;
    position: fixed;
    bottom: 0;
    right: 16px;
    z-index: var(--z-popover);
  }
  .mail-compose--mini > :not(.mail-compose__toolbar) {
    display: none;
  }
  .mail-compose--mini .mail-compose__toolbar {
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .mail-compose--max {
    position: fixed;
    inset: 32px;
    width: auto;
    z-index: var(--z-popover);
  }
  .mail-compose__toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
  }
  .mail-compose__toolbar-btn {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
  }
  .mail-compose__toolbar-btn:hover {
    background-color: var(--bg-mail-folder-hover);
    color: var(--text-primary);
  }
  .mail-compose__option {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    background-color: var(--bg-mail-folder-hover);
    color: var(--text-secondary);
  }
  .mail-compose__option:hover {
    background-color: var(--bg-mail-folder-active);
  }
  .mail-compose__option--confidential {
    background-color: var(--bg-mail-label-purple);
    color: var(--text-mail-label-purple);
  }
  .mail-recipient {
    background-color: var(--bg-mail-recipient);
  }
  .mail-recipient:hover {
    background-color: var(--bg-mail-recipient-hover);
  }
  .mail-recipient--internal {
    background-color: var(--bg-mail-recipient-internal);
    color: var(--text-mail-recipient-internal);
  }
  .mail-recipient--external {
    background-color: var(--bg-mail-recipient-external);
    color: var(--text-mail-recipient-external);
  }
  .mail-recipient--external::before {
    content: "\f08e";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 300;
    font-size: 9px;
    margin-right: 4px;
    opacity: 0.7;
  }
  .mail-recipient--group {
    background-color: var(--bg-mail-recipient-group);
    color: var(--text-mail-recipient-group);
  }
  .mail-recipient--group::before {
    content: "\f0c0";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 300;
    font-size: 10px;
    margin-right: 4px;
  }
  .mail-recipient.is-invalid {
    background-color: var(--bg-mail-recipient-invalid);
    color: var(--text-mail-recipient-invalid);
  }
  .mail-sender-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    width: 320px;
    background-color: var(--bg-mail-sender-card);
    box-shadow: inset 0 0 0 1px var(--border-mail-sender-card), var(--shadow-mail-sender-card);
  }
  .mail-sender-card__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding: calc(var(--spacing) * 3);
    border-color: var(--border-mail-sender-card);
  }
  .mail-sender-card__body {
    display: grid;
    column-gap: calc(var(--spacing) * 3);
    row-gap: calc(var(--spacing) * 1.5);
    padding: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    grid-template-columns: 84px 1fr;
    margin: 0;
  }
  .mail-sender-card__body dt {
    color: var(--text-tertiary);
  }
  .mail-sender-card__body dd {
    margin: 0;
    color: var(--text-primary);
  }
  .mail-sender-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding: calc(var(--spacing) * 3);
    border-color: var(--border-mail-sender-card);
    background-color: var(--bg-mail-folder-hover);
  }
  .mail-detail__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-mail-list);
    background-color: var(--bg-mail-detail-toolbar);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .mail-detail__actions-divider {
    width: 1px;
    height: 16px;
    margin: 0 4px;
    background-color: var(--border-mail-list);
  }
  .mail-sidebar__group-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-mail-sidebar-section);
    font-weight: 600;
  }
  .mail-sidebar__group-header:hover {
    color: var(--text-secondary);
  }
  .mail-sidebar__group-header__caret {
    font-size: 9px;
    transition: transform 160ms ease;
  }
  .mail-sidebar__group.is-collapsed .mail-sidebar__group-header__caret {
    transform: rotate(-90deg);
  }
  .mail-sidebar__group.is-collapsed .mail-sidebar__group-body {
    display: none;
  }
  .mail-sidebar__add {
    display: inline-flex;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background: transparent;
    border: 0;
    color: var(--text-tertiary);
  }
  .mail-sidebar__add:hover {
    background-color: var(--bg-mail-folder-hover);
    color: var(--text-primary);
  }
  .mail-sidebar {
    background-color: var(--bg-mail-sidebar);
  }
  .mail-folder {
    color: var(--text-mail-folder);
  }
  .mail-folder:hover {
    background-color: var(--bg-mail-folder-hover);
  }
  .mail-folder.is-active {
    background-color: var(--bg-mail-folder-active);
    color: var(--text-mail-folder-active);
  }
  .mail-folder__count {
    color: var(--text-mail-folder-count);
  }
  .mail-folder.is-active .mail-folder__count {
    background-color: var(--bg-mail-folder-count-active);
    color: var(--text-mail-folder-count-active);
  }
  .mail-list {
    background-color: var(--bg-mail-list);
  }
  .mail-item {
    background-color: var(--bg-mail-item);
  }
  .mail-item:hover {
    background-color: var(--bg-mail-item-hover);
  }
  .mail-item.is-active {
    background-color: var(--bg-mail-item-active);
  }
  .mail-item.is-selected {
    background-color: var(--bg-mail-item-selected);
  }
  .mail-item.is-unread::before {
    background-color: var(--bg-mail-unread-dot);
  }
  .mail-item__star.is-starred {
    color: var(--text-mail-star-active);
  }
  .mail-detail {
    background-color: var(--bg-mail-detail);
  }
  .mail-quoted {
    background-color: var(--bg-mail-quoted);
    border-left: 3px solid var(--border-mail-quoted);
  }
  .mail-quoted__toggle {
    color: var(--text-mail-quoted-toggle);
  }
  .mail-item:focus-visible, .mail-item.is-cursor, .mail-folder:focus-visible, .mail-categories__tab:focus-visible, .mail-filter-chip:focus-visible, .mail-list__toolbar-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-mail-focus);
  }
  @media (max-width: 640px) {
    .mail-app .mail-sidebar {
      display: none;
    }
  }
}
@layer utilities {
  @layer components {
    :root {
      --docs-header-height: 56px;
      --docs-sidebar-width: 264px;
      --docs-toc-width: 180px;
      --docs-canvas-max: 1280px;
      --docs-gutter: 40px;
      --docs-radius: 10px;
      --docs-radius-sm: 6px;
      --docs-toc-tray-width: 260px;
      --docs-edge-hitbox: 14px;
    }
    @media (max-width: 960px) {
      :root {
        --docs-gutter: 20px;
      }
    }
    @media (max-width: 520px) {
      :root {
        --docs-gutter: 14px;
      }
    }
  }
  .docs-partial .scroll-mt-24 {
    scroll-margin-top: 12px;
  }
  .docs-nav__item.is-hidden, .docs-nav__link.is-hidden {
    display: none !important;
  }
  .pt-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 260px;
    height: 28px;
    padding: 0 60px 0 30px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-divider);
    border-radius: 6px;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  }
  .pt-search:focus-within {
    border-color: var(--text-info);
    box-shadow: 0 0 0 3px var(--text-info);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--text-info) 18%, transparent);
    }
  }
  .pt-search__icon {
    position: absolute;
    left: 9px;
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .pt-search:focus-within .pt-search__icon {
    color: var(--text-info);
  }
  .pt-search__input {
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    font-size: 12.5px;
    color: var(--text-primary);
    --tw-ring-shadow: 0 0 transparent;
    --tw-ring-offset-shadow: 0 0 transparent;
    --tw-ring-color: transparent;
    --tw-ring-offset-width: 0;
  }
  .pt-search__input:focus, .pt-search__input:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: transparent !important;
    --tw-ring-shadow: 0 0 transparent;
    --tw-ring-offset-shadow: 0 0 transparent;
  }
  .pt-search__input::placeholder {
    color: var(--text-tertiary);
  }
  .pt-search__input::-webkit-search-cancel-button {
    display: none;
  }
  .pt-search__hint {
    position: absolute;
    right: 8px;
    display: inline-flex;
    gap: 2px;
    pointer-events: none;
  }
  .pt-search__hint[hidden] {
    display: none;
  }
  .pt-search__clear {
    position: absolute;
    right: 6px;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    color: var(--text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pt-search__clear:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
  }
  .pt-search__clear i {
    font-size: 10px;
  }
  .pt-search__status {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .topnav-logo-mark {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .footer-specimen {
    margin-bottom: 2rem;
  }
  .footer-specimen__cap {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
  }
  .footer-specimen__frame {
    position: relative;
    border: 1px solid var(--border-secondary);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
  }
  .footer-specimen__tag {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 2;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    background: var(--bg-secondary-subtle, var(--bg-secondary));
    box-shadow: 0 0 0 1px var(--border-secondary);
  }
}
.docs-page-header__title-block > .docs-status {
  margin-bottom: 10px;
}
:root[data-theme="theme-dark"] .docs-hero__logo--on-light {
  display: none;
}
:root[data-theme="theme-dark"] .docs-hero__logo--on-dark {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .docs-catalog-card:hover {
    transform: none;
  }
}
.docs-catalog-card.is-filtered-out, .docs-cat.is-filtered-out {
  display: none;
}
.docs-search .form-control.docs-search__input {
  min-height: 32px;
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  line-height: 1;
}
.stack-demo-box {
  border: 2px solid var(--border-primary);
}
#filters .filter-bar .filter-icon-btn, #filters .filter-bar .filter-row__remove {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
}
#filters .filter-bar .combobox__control, #filters .filter-bar .pt-search__input, #filters .filter-bar .form-control {
  min-height: 2rem;
}
#filters .filter-panel > .filter-item:not(.filter-toggle) {
  cursor: pointer;
}
body.is-docs-no-sidebar .docs-sidebar {
  display: none;
}
body.is-docs-no-sidebar .docs-shell {
  grid-template-columns: 0 minmax(0, 1fr) var(--docs-toc-width);
}
@media (max-width: 1280px) {
  body.is-docs-no-sidebar .docs-shell {
    grid-template-columns: 0 minmax(0, 1fr);
  }
}
@layer components {
  @keyframes ss-toast-in {
    from {
      transform: translate(-50%, 12px);
      opacity: 0;
    }
    to {
      transform: translate(-50%, 0);
      opacity: 1;
    }
  }
  @keyframes ss-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}
@layer utilities {
  .builder-shell {
    display: grid;
    height: calc(100vh - 9rem);
    overflow: hidden;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border-primary);
    background-color: var(--bg-secondary);
    grid-template-columns: 240px 1fr 360px;
  }
  .builder-shell.builder-preview-collapsed {
    grid-template-columns: 240px 1fr 0;
  }
  .builder-shell.builder-preview-collapsed .builder-preview {
    display: none;
  }
  .builder-rail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--border-primary);
    background-color: var(--bg-primary);
  }
  .builder-rail-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-primary);
  }
  .builder-group-list {
    margin: 0;
    flex: 1;
    list-style-type: none;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    padding: calc(var(--spacing) * 2);
  }
  .builder-group-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-secondary);
    border: 1px solid transparent;
  }
  .builder-group-item:hover {
    background-color: var(--bg-secondary);
  }
  .builder-group-item.is-active {
    background-color: var(--bg-primary-subtle);
    color: var(--text-primary);
    border-color: var(--border-primary);
    font-weight: 600;
  }
  .builder-group-item .drag-handle {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .builder-group-item-count {
    margin-left: auto;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 50%;
  }
  .builder-canvas {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow-y: auto;
    padding: calc(var(--spacing) * 5);
  }
  .builder-canvas-section-header {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .builder-canvas-section-header input {
    width: 100%;
    border-style: var(--tw-border-style);
    border-width: 0px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    background-color: transparent;
    padding: var(--spacing);
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    border-bottom-color: transparent;
  }
  .builder-canvas-section-header input:focus {
    border-bottom-color: var(--border-info);
    outline: none;
  }
  .builder-question-card {
    position: relative;
    margin-bottom: calc(var(--spacing) * 3);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 4);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
  }
  .builder-question-card.is-dragging {
    opacity: 50%;
  }
  .builder-question-card .question-header {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .builder-question-card .question-type-pill {
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
  }
  .builder-question-card .question-actions {
    margin-left: auto;
    display: inline-flex;
    gap: var(--spacing);
  }
  .builder-question-card .question-text-input {
    margin-bottom: calc(var(--spacing) * 2);
    width: 100%;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding: var(--spacing);
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .builder-question-card .question-text-input:focus {
    background-color: var(--bg-secondary);
    border-radius: 4px;
    outline: none;
  }
  .builder-question-card .question-options {
    margin-top: calc(var(--spacing) * 2);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .builder-question-card .question-option-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .builder-question-card .question-option-row input[type="text"] {
    flex: 1;
    border-style: var(--tw-border-style);
    border-width: 0px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    background-color: transparent;
    padding: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    border-bottom-color: var(--border-primary);
  }
  .builder-question-card .question-option-row input[type="text"]:focus {
    border-bottom-color: var(--border-info);
    outline: none;
  }
  .builder-add-question {
    margin-top: calc(var(--spacing) * 2);
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 3);
    text-align: center;
    border: 2px dashed var(--border-primary);
    color: var(--text-tertiary);
  }
  .builder-add-question:hover {
    border-color: var(--border-info);
    color: var(--text-primary);
  }
  .builder-type-palette {
    display: grid;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 3);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
  }
  .builder-type-palette.is-visible {
    display: grid;
  }
  .builder-type-palette button {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    background-color: var(--bg-secondary);
    border: 1px solid transparent;
  }
  .builder-type-palette button:hover {
    border-color: var(--border-info);
  }
  .builder-preview {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--border-primary);
    background-color: var(--bg-primary);
  }
  .builder-preview-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-primary);
  }
  .builder-preview-frame {
    flex: 1;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    padding: calc(var(--spacing) * 4);
  }
  .builder-preview-question {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-bottom: calc(var(--spacing) * 3);
    border-color: var(--border-primary);
  }
  .builder-preview-question:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .builder-preview-question .label {
    margin-bottom: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .builder-preview-question .label .required-mark {
    margin-left: var(--spacing);
    color: var(--text-danger) !important;
  }
  .builder-preview-question input, .builder-preview-question textarea, .builder-preview-question select {
    width: 100%;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .builder-preview-question .option-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .sa-add-trigger .fa-plus, .sa-add-trigger .fa-folder-plus {
    color: var(--text-warning-solid);
  }
  .sa-add-trigger[aria-expanded="true"] .fa-plus {
    color: var(--text-tertiary);
  }
  [data-canvas] .card.card-clickable {
    border-color: var(--border-input);
  }
  [data-canvas] .card.card-clickable:hover {
    background-color: var(--bg-card);
    border-color: var(--border-input-hover);
  }
  [data-canvas] .card.card-clickable:active {
    background-color: var(--bg-card);
    box-shadow: none;
  }
  [data-canvas] .card.is-selected, [data-canvas] .card.is-selected:hover {
    border-color: var(--border-input-active);
    outline: 2px solid var(--border-input-active);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 2px solid color-mix(in oklch, var(--border-input-active) 30%, transparent);
    }
    outline-offset: 1px;
    background-color: var(--bg-card);
  }
  .sa-drop-line {
    height: 0;
    margin: -0.375rem 0;
    border-top: 2px solid var(--border-input-active);
    border-radius: 2px;
    box-shadow: 0 0 0 2px var(--border-input-active);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--border-input-active) 22%, transparent);
    }
    pointer-events: none;
  }
  [data-publish-confirm][hidden], [data-branch-modal][hidden], [data-rail-pane][hidden], [data-published-banner][hidden], [data-conflict-banner][hidden], [data-builder-publish][hidden], [data-builder-clone][hidden], [data-svy-dirty][hidden] {
    display: none !important;
  }
}
@layer utilities {
  .map-draw-page {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  .map-draw-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    height: 3rem;
    border-color: var(--border-divider);
  }
  .map-draw-shell {
    display: grid;
    height: 100%;
    width: 100%;
    overflow: hidden;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .map-draw-page > .map-draw-shell {
    height: auto;
    flex: 1 1 0%;
    min-height: 0;
  }
  .map-draw-rail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--border-primary);
    background-color: var(--bg-primary);
  }
  .map-draw-rail-header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
  }
  .map-draw-rail-tools {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: var(--spacing);
  }
  .map-draw-filter-chips {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .map-draw-rail-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: calc(var(--spacing) * 9);
    flex-shrink: 0;
    align-items: center;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    border-color: var(--border-primary);
  }
  .map-draw-turf-list {
    margin: 0;
    flex: 1;
    list-style-type: none;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
    overflow-y: auto;
    padding: calc(var(--spacing) * 2);
  }
  .map-draw-turf-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-sm);
    padding: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    background-color: var(--bg-secondary);
    border: 1px solid transparent;
  }
  .map-draw-turf-item:hover {
    border-color: var(--border-primary);
  }
  .map-draw-turf-item.is-selected {
    border-color: var(--utility-indigo-500);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklch, var(--utility-indigo-500) 45%, var(--border-primary));
    }
    box-shadow: 0 0 0 1px var(--utility-indigo-500);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 1px color-mix(in oklch, var(--utility-indigo-500) 30%, transparent);
    }
  }
  .map-draw-turf-item.is-hidden {
    display: none;
  }
  .map-draw-turf-item.is-turf-hidden .map-draw-turf-swatch, .map-draw-turf-item.is-turf-hidden .map-draw-turf-meta {
    opacity: 0.45;
  }
  .map-draw-turf-swatch {
    display: inline-block;
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    flex-shrink: 0;
    border-radius: var(--radius-sm);
  }
  .map-draw-turf-meta {
    min-width: 0;
    flex: 1;
  }
  .map-draw-turf-actions {
    display: inline-flex;
    gap: var(--spacing);
    opacity: 50%;
  }
  .map-draw-turf-item:hover .map-draw-turf-actions {
    opacity: 100%;
  }
  .map-draw-canvas-wrap {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .map-draw-canvas {
    height: 100%;
    width: 100%;
    background-color: var(--bg-secondary);
  }
  .map-draw-canvas .mapboxgl-ctrl-bottom-left, .map-draw-canvas .mapboxgl-ctrl-bottom-right {
    bottom: -34px;
  }
  .map-draw-tooldock {
    position: absolute;
    top: calc(var(--spacing) * 4);
    left: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    z-index: 2;
  }
  .map-draw-toolbar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: var(--spacing);
    padding: var(--spacing);
  }
  .map-draw-autosplit {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    border: 1px solid var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in oklch, var(--utility-violet-500) 35%, var(--border-card));
    }
    background: var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--utility-violet-500) 8%, var(--bg-card));
    }
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
  }
  .map-draw-autosplit i {
    color: var(--utility-violet-500);
  }
  .map-draw-autosplit:hover {
    background: var(--utility-violet-500);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in oklch, var(--utility-violet-500) 14%, var(--bg-card));
    }
  }
  .map-draw-startfrom {
    position: absolute;
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    max-width: 60%;
    align-items: center;
    gap: var(--spacing);
    overflow-x: auto;
    padding: var(--spacing);
    z-index: 2;
  }
  .map-draw-startfrom [data-action="start-from"].is-active {
    background-color: var(--utility-amber-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--utility-amber-500) 22%, transparent);
    }
    box-shadow: inset 0 0 0 1.5px var(--utility-amber-500);
  }
  .map-draw-toolbar-sep {
    margin-inline: var(--spacing);
    margin-block: calc(var(--spacing) * 0.5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--border-divider);
  }
  .map-draw-toolbar :is([data-tool], [data-ts-tool]).is-active {
    background-color: var(--utility-amber-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--utility-amber-500) 22%, transparent);
    }
    box-shadow: inset 0 0 0 1.5px var(--utility-amber-500);
  }
  .map-draw-inspector {
    position: absolute;
    top: calc(var(--spacing) * 4);
    left: calc(1 / 2 * 100%);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    transform: translateX(-50%);
    z-index: 4;
  }
  .map-draw-inspector[hidden] {
    display: none;
  }
  .map-draw-inspector-stat {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    --tw-leading: 1;
    line-height: 1;
  }
  .map-draw-inspector-val {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
  }
  .map-draw-inspector-lbl {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .map-draw-inspector-sep {
    align-self: stretch;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--border-divider);
  }
  .map-draw-inspector-area {
    color: var(--text-tertiary);
  }
  .map-draw-inspector.is-overlapping {
    box-shadow: 0 0 0 2px var(--utility-amber-500);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--utility-amber-500) 55%, transparent);
    }
  }
  .map-draw-inspector-overlap {
    color: var(--text-warning-solid);
    font-weight: 600;
  }
  .map-draw-hint {
    position: absolute;
    top: calc(var(--spacing) * 20);
    left: calc(1 / 2 * 100%);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    transform: translateX(-50%);
    z-index: 3;
  }
  .map-draw-hint[hidden] {
    display: none;
  }
  .map-draw-hint [data-hint-icon] {
    color: var(--utility-indigo-500);
  }
  .map-draw-legend {
    position: absolute;
    bottom: calc(var(--spacing) * 4);
    left: calc(var(--spacing) * 4);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    z-index: 2;
  }
  .map-draw-legend-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .map-draw-selected-strip {
    position: absolute;
    bottom: calc(var(--spacing) * 4);
    left: calc(1 / 2 * 100%);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    transform: translateX(-50%);
    z-index: 2;
  }
  .map-draw-selected-strip[hidden] {
    display: none;
  }
  .map-draw-selected-swatch {
    display: inline-block;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    width: 12px;
    height: 12px;
  }
  .map-draw-selected-sep {
    align-self: stretch;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--border-divider);
  }
  .map-draw-legend-row .dot {
    display: inline-block;
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    border-radius: var(--radius-full);
  }
  .map-draw-legend-row .dot-dem {
    background-color: #3b82f6;
  }
  .map-draw-legend-row .dot-rep {
    background-color: #ef4444;
  }
  .map-draw-legend-row .dot-other {
    background-color: #94a3b8;
  }
  .map-draw-legend-row .dot-polygon {
    background-color: rgb(59 130 246 / 0.25);
    border: 2px solid #3b82f6;
    border-radius: 2px;
  }
  .vmap-donut {
    cursor: pointer;
  }
  .vmap-donut svg {
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  }
  .vmap-donut text {
    font-family: inherit;
  }
  .vmap-hover-popup .mapboxgl-popup-content {
    padding: 0;
    backdrop-filter: blur(10px);
  }
  .vmap-hover-popup .mapboxgl-popup-tip {
    display: none;
  }
  .vmap-hover {
    padding: 10px 12px;
    min-width: 168px;
    font-family: inherit;
  }
  .vmap-hover__total {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
  }
  .vmap-hover__row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 0;
  }
  .vmap-hover__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
  }
  .vmap-hover__label {
    flex: 1;
    min-width: 0;
  }
  .vmap-hover__val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
  }
  .vmap-hover__pct {
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
    width: 34px;
    text-align: right;
  }
  .vmap-card-popup .mapboxgl-popup-content {
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 48px -10px rgba(0, 0, 0, 0.45);
    background: var(--bg-card, #fff);
    background: var(--bg-card, #fff);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--bg-card, #fff) 90%, transparent);
    }
    backdrop-filter: blur(10px);
  }
  .vmap-card-popup .mapboxgl-popup-tip {
    display: none;
  }
  .vmap-card-popup .mapboxgl-popup-close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    right: 6px;
    top: 6px;
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 23, 42, 0.4);
    transition: background-color 120ms ease;
  }
  .vmap-card-popup .mapboxgl-popup-close-button:hover {
    background: rgba(15, 23, 42, 0.62);
  }
  .vcard {
    width: 286px;
    font-family: inherit;
    color: var(--text-primary);
  }
  .vcard__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: #fff;
    background: linear-gradient(135deg, #64748b, #334155);
  }
  .vcard--pd .vcard__head {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  }
  .vcard--pr .vcard__head {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
  }
  .vcard--po .vcard__head {
    background: linear-gradient(135deg, #64748b, #334155);
  }
  .vcard__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.55);
  }
  .vcard__name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
  }
  .vcard__meta {
    font-size: 11px;
    opacity: 0.92;
    margin-top: 3px;
  }
  .vcard__body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .vcard__addr {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
  }
  .vcard__addr i {
    margin-top: 2px;
    opacity: 0.55;
    flex: none;
  }
  .vcard__addr-sub {
    opacity: 0.7;
  }
  .vcard__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .vcard__stat {
    background: var(--bg-primary-subtle);
    border-radius: 9px;
    padding: 9px 6px;
    text-align: center;
  }
  .vcard__stat-v {
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.1;
  }
  .vcard__stat-l {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-top: 3px;
  }
  .vcard__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .vcard__row i {
    width: 14px;
    text-align: center;
    opacity: 0.55;
    flex: none;
  }
  .vcard__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 2px;
    padding: 9px;
    border: 0;
    border-radius: 9px;
    background: var(--bg-primary-subtle);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  .vcard__link:hover {
    background: var(--bg-tertiary);
  }
  .vmap-loc {
    width: 300px;
  }
  .vmap-loc__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-default);
  }
  .vmap-loc__count {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--bg-primary-subtle);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vmap-loc__title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
  }
  .vmap-loc__addr {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
  }
  .vmap-loc__list {
    max-height: 264px;
    overflow-y: auto;
    padding: 6px;
  }
  .vmap-loc__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  .vmap-loc__row:hover {
    background: var(--bg-primary-subtle);
  }
  .vmap-loc__avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background: #64748b;
  }
  .vmap-loc__avatar--d {
    background: #3b82f6;
  }
  .vmap-loc__avatar--r {
    background: #ef4444;
  }
  .vmap-loc__avatar--o {
    background: #64748b;
  }
  .vmap-loc__row-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .vmap-loc__row-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vmap-loc__row-sub {
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .vmap-loc__row-chev {
    flex: none;
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .vmap-loc-back {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: var(--bg-primary-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
  }
  .vmap-loc-back:hover {
    color: var(--text-primary);
  }
  @media (max-width: 640px) {
    .map-draw-shell {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(220px, 55%) minmax(0, 1fr);
    }
    .map-draw-canvas-wrap {
      grid-row: 1;
    }
    .map-draw-rail {
      grid-row: 2;
      border-right: 0;
      border-top: 1px solid var(--border-primary);
    }
    .map-draw-rail-tools [data-turf-search] {
      min-height: 44px;
    }
    .map-draw-rail-header [data-turf-sort] {
      min-height: calc(var(--spacing) * 11);
      padding-block: 0;
    }
    .map-draw-rail-header .btn-icon-sm {
      width: calc(var(--spacing) * 11);
      height: calc(var(--spacing) * 11);
      min-height: calc(var(--spacing) * 11);
    }
    .map-draw-filter-chips [data-action="filter-status"] {
      min-height: calc(var(--spacing) * 11);
      padding-inline: calc(var(--spacing) * 3);
    }
    .map-draw-toolbar :is([data-tool], [data-ts-tool]) {
      width: calc(var(--spacing) * 11);
      height: calc(var(--spacing) * 11);
      min-height: calc(var(--spacing) * 11);
    }
    .map-draw-turf-actions {
      gap: calc(var(--spacing) * 1.5);
      opacity: 100%;
    }
    .map-draw-turf-actions .btn-icon-xs {
      width: 34px;
      height: 34px;
      min-height: 34px;
    }
    .map-draw-inspector {
      flex-wrap: wrap;
      justify-content: center;
      gap: calc(var(--spacing) * 2);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      max-width: calc(100% - 1.5rem);
    }
    .map-draw-inspector-val {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
    }
    .map-draw-hint, .map-draw-selected-strip {
      flex-wrap: wrap;
      justify-content: center;
      gap: calc(var(--spacing) * 2);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      max-width: calc(100% - 1.5rem);
    }
    .map-draw-legend {
      display: none;
    }
    .vcard, .vmap-loc {
      max-width: calc(100vw - 2rem);
    }
  }
  .map-draw-mobile .mapboxgl-ctrl-group button {
    width: 44px;
    height: 44px;
  }
  .map-draw-mobile .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    transform: scale(1.2);
  }
  .map-draw-mobile-panel > summary {
    list-style: none;
  }
  .map-draw-mobile-panel > summary::-webkit-details-marker {
    display: none;
  }
  .map-draw-mobile-panel[open] .map-draw-mobile-caret {
    transform: rotate(180deg);
  }
}
@layer utilities {
  .route-shell {
    display: grid;
    height: calc(100vh - 9rem);
    overflow: hidden;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    grid-template-columns: 360px 1fr;
    border-color: var(--border-primary);
  }
  .route-sidebar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--border-primary);
    background-color: var(--bg-primary);
  }
  .route-stop-list {
    margin: 0;
    flex: 1;
    list-style-type: none;
    overflow-y: auto;
    padding: 0;
  }
  .route-stop-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-primary);
  }
  .route-stop-item:hover {
    background-color: var(--bg-secondary);
  }
  .route-stop-item.is-active {
    background-color: var(--bg-primary-subtle);
  }
  .route-stop-bubble {
    display: inline-flex;
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
  }
  .route-stop-item.is-active .route-stop-bubble {
    background-color: var(--bg-info);
    color: #fff;
    border-color: var(--bg-info);
  }
  .route-stop-meta {
    min-width: 0;
    flex: 1;
  }
  .route-canvas {
    height: 100%;
    width: 100%;
  }
  .route-marker {
    display: inline-flex;
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  }
}
@layer utilities {
  #people-ws button:focus:not(:focus-visible), #people-ws [role="button"]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
  #people-ws button:focus-visible {
    outline: none !important;
  }
  #people-ws .lean-spectrum__marker {
    width: 10px;
    height: 13px;
  }
  #ws-rel-canvas .ne-node__icon {
    background-color: transparent;
  }
  #ws-rel-canvas .ne-node[data-color] {
    border-top-width: 0;
  }
  #ws-rel-canvas .ne-node__add {
    position: absolute;
    left: 50%;
    bottom: -0.9rem;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 3;
  }
  #ws-rel-canvas .ne-node:hover .ne-node__add, #ws-rel-canvas .ne-node:focus-within .ne-node__add {
    opacity: 1;
  }
  #people-ws .filter-toggle .filter-chevron {
    transition: transform 0.12s ease;
  }
  #people-ws .filter-toggle[aria-expanded="true"] .filter-chevron {
    transform: rotate(90deg);
  }
  #ws-filters .filter-item.filter-toggle .filter-count {
    flex: none;
  }
  #people-ws th.sort {
    cursor: pointer;
  }
  #people-ws tbody .lean-chip {
    padding: 0 5px;
    font-size: 0.625rem;
    line-height: 1rem;
  }
  #people-ws tbody .tag--sm {
    padding: 1px 5px;
    font-size: 0.625rem;
  }
  #people-ws tbody .tag--sm .tag__icon {
    width: 8px;
    height: 8px;
    font-size: 0.5rem;
  }
  #people-ws .ws-giving {
    position: relative;
  }
  #people-ws .ws-giving-trigger {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
  }
  #people-ws .ws-giving-pop {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 15rem;
    text-align: left;
  }
  #people-ws .ws-giving:hover .ws-giving-pop, #people-ws .ws-giving:focus-within .ws-giving-pop {
    display: block;
  }
  #people-ws .ws-lean {
    position: relative;
    display: inline-block;
  }
  #people-ws .ws-lean-trigger {
    font: inherit;
    cursor: pointer;
  }
  #people-ws .ws-lean-pop {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    min-width: 16rem;
    padding: 0.75rem;
    text-align: left;
    white-space: normal;
    z-index: 30;
  }
  #people-ws .ws-lean:hover .ws-lean-pop, #people-ws .ws-lean:focus-within .ws-lean-pop {
    display: block;
  }
  #people-ws .ws-notes {
    flex: none;
    border-top: 1px solid var(--border-divider);
    background-color: var(--bg-surface);
    padding: 0.625rem 1rem 0.875rem;
  }
  #people-ws .ws-notes__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  #people-ws .ws-notes__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    max-height: 9rem;
    overflow-y: auto;
  }
  #people-ws .panel-content:has(> table > tbody > tr > td > .empty-state) {
    container-type: inline-size;
  }
  #people-ws .panel-content > table > tbody > tr > td > .empty-state {
    position: sticky;
    left: 0;
    width: 100cqw;
    box-sizing: border-box;
  }
}
@layer utilities {
  .cc-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .cc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 9999px;
    border: 1px solid var(--border-default, var(--border-divider));
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
  }
  .cc-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-strong, var(--text-tertiary));
  }
  .cc-tab.is-active {
    color: var(--text-primary);
    border-color: var(--utility-gray-400);
    background-color: var(--utility-gray-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--utility-gray-500) 12%, var(--bg-surface));
    }
  }
  :is([data-theme="theme-light"],[data-theme="theme-mica-light"]) .cc-tab.is-active {
    border-color: var(--utility-gray-300);
    background-color: var(--utility-gray-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--utility-gray-500) 9%, var(--bg-surface));
    }
  }
  :is([data-theme="theme-light"],[data-theme="theme-mica-light"]) .cc-card--current {
    box-shadow: 0 0 0 1.5px var(--border-focus);
  }
  .cc-tab__icon {
    font-size: 0.875rem;
    line-height: 1;
  }
  .cc-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    background-color: var(--text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    }
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
  }
  .cc-tab.is-active .cc-tab__count {
    background-color: var(--text-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--text-secondary) 20%, transparent);
    }
    color: var(--text-primary);
  }
  .cc-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    display: inline-block;
  }
  .cc-dot--active {
    background-color: var(--utility-green-500);
  }
  .cc-dot--planning {
    background-color: var(--utility-orange-500);
  }
  .cc-dot--paused {
    background-color: var(--utility-yellow-500);
  }
  .cc-dot--completed {
    background-color: var(--utility-blue-500);
  }
  .cc-dot--archived {
    background-color: var(--utility-slate-400);
  }
  .cc-dot--draft {
    background-color: var(--utility-gray-400);
  }
  .cc-dot--all {
    background-color: var(--text-tertiary);
  }
  .cc-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    padding: 0 !important;
  }
  .card.cc-card {
    overflow: visible;
  }
  .cc-card--menu-open {
    position: relative;
    z-index: 60;
  }
  .cc-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-lg);
  }
  .cc-card--current {
    box-shadow: 0 0 0 1.5px var(--border-focus);
  }
  .cc-card--current:hover {
    box-shadow: 0 0 0 1.5px var(--border-focus), var(--shadow-lg);
  }
  .cc-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex: none;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  .cc-cover__scrim {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(180deg, transparent, var(--bg-overlay));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-overlay) 30%, transparent));
    }
    pointer-events: none;
  }
  .cc-cover--fallback {
    background-color: var(--utility-gray-500);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--utility-gray-500) 8%, var(--bg-surface));
    }
    background-image: repeating-linear-gradient(45deg, var(--utility-gray-500) 0 1px, transparent 1px 13px), repeating-linear-gradient(-45deg, var(--utility-gray-500) 0 1px, transparent 1px 13px);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--utility-gray-500) 12%, transparent) 0 1px, transparent 1px 13px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--utility-gray-500) 12%, transparent) 0 1px, transparent 1px 13px);
    }
  }
  .cc-cover--photo {
    background-image: linear-gradient(180deg, var(--bg-overlay), var(--bg-overlay)), var(--cc-cover-img, none);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-overlay) 5%, transparent), color-mix(in srgb, var(--bg-overlay) 25%, transparent)), var(--cc-cover-img, none);
    }
  }
  .cc-days-glass {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 9px;
    background-color: var(--bg-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    }
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid var(--border-glass-card);
    box-shadow: var(--shadow-glass-card);
    color: var(--text-primary);
  }
  .cc-days-glass__num {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .cc-days-glass__lbl {
    margin-top: 2px;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .75;
  }
  .cc-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: none;
    object-fit: cover;
    border: 1px solid var(--border-divider);
    background-color: var(--bg-surface);
  }
  .cc-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
  }
  .cc-date {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .cc-dates .cc-date:last-child {
    align-items: flex-end;
    text-align: right;
  }
  .cc-date__lbl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-tertiary);
    font-size: 0.5625rem;
  }
  .cc-date__val {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  .cc-progress {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cc-progress__track {
    flex: 1;
    height: 7px;
    border-radius: 9999px;
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .cc-progress__fill {
    width: var(--cc-fill, 0%);
    height: 100%;
    border-radius: 9999px;
    background-color: var(--utility-blue-500);
    transition: width .3s ease;
  }
  .cc-progress__fill--active {
    background-color: var(--utility-green-500);
  }
  .cc-progress__fill--planning {
    background-color: var(--utility-orange-500);
  }
  .cc-progress__fill--completed {
    background-color: var(--utility-blue-500);
  }
  .cc-progress__fill--paused {
    background-color: var(--utility-slate-400);
  }
  .cc-progress__fill--draft {
    background-color: var(--utility-slate-400);
  }
  .cc-progress__pct {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .cw-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: stretch;
    height: 100%;
    min-height: 0;
  }
  .cw-grid > .stepper {
    align-self: start;
  }
  .cw-content, .cw-grid > .cw-aside {
    min-height: 0;
    overflow-y: auto;
  }
  .cw-foot [hidden] {
    display: none !important;
  }
  @media (max-width: 1200px) {
    .cw-grid {
      grid-template-columns: 200px minmax(0, 1fr);
    }
    .cw-aside {
      display: none;
    }
  }
  @media (max-width: 860px) {
    .cw-grid {
      grid-template-columns: 1fr;
    }
    .cw-grid .stepper {
      display: none;
    }
  }
  .cw-foot {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 330px;
    gap: 20px;
    width: 100%;
    align-items: center;
  }
  .cw-foot__nav {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cw-foot__submit {
    grid-column: 3;
    display: flex;
    justify-content: flex-end;
  }
  @media (max-width: 1200px) {
    .cw-foot {
      grid-template-columns: 200px minmax(0, 1fr);
    }
    .cw-foot__submit {
      grid-column: 2;
    }
  }
  @media (max-width: 860px) {
    .cw-foot {
      grid-template-columns: 1fr;
    }
    .cw-foot__nav, .cw-foot__submit {
      grid-column: 1;
    }
  }
  .cw-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 2.25rem;
    padding: 4px 8px;
    cursor: text;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md, 0.375rem);
    background-color: var(--bg-input);
    color: var(--text-primary);
    transition: border-color .12s ease;
  }
  .cw-tags:focus-within {
    border-color: var(--border-input-active);
  }
  .cw-tags__input {
    flex: 1 1 6rem;
    min-width: 6rem;
    padding: 2px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 0.875rem;
  }
  .cw-tags__input:focus {
    outline: 0;
    box-shadow: none;
  }
  .cw-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    border: 1.5px dashed var(--border-strong, var(--border-divider));
    background-color: var(--bg-tertiary);
    transition: border-color .12s ease, background-color .12s ease;
  }
  .cw-drop:hover, .cw-drop:focus-visible {
    border-color: var(--border-input-active);
    outline: none;
  }
  .cw-drop.is-dragover {
    border-color: var(--border-input-active);
    background-color: var(--bg-tertiary);
  }
  .cw-drop__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    pointer-events: none;
  }
  .cw-drop__icon {
    font-size: 1.25rem;
    color: var(--text-tertiary);
  }
  .cw-drop__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .cw-drop__hint {
    font-size: 0.625rem;
    color: var(--text-tertiary);
  }
  .cw-drop__preview {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .cw-drop__preview img {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: 8px;
  }
  .cw-drop--wide .cw-drop__preview img {
    object-fit: cover;
    max-height: 120px;
  }
  .cw-drop__clear {
    position: absolute;
    top: 4px;
    right: 4px;
  }
  .cw-logo-persona {
    align-items: center;
  }
  .cw-logo-avatar {
    position: relative;
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 12px;
  }
  .cw-logo-avatar:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .cw-logo-avatar .avatar {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
  }
  .cw-logo-avatar .avatar-soft {
    border: 1.5px dashed var(--border-strong, var(--border-divider));
    background-color: var(--bg-surface) !important;
    color: var(--text-tertiary) !important;
  }
  .cw-logo-thumb .avatar {
    object-fit: cover;
  }
  .cw-logo-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }
  .cw-drop--banner {
    min-height: 150px;
  }
  .cw-drop--banner .cw-drop__preview img {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
  }
  .cw-crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--bg-overlay, color-mix(in srgb, #000 55%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      background-color: var(--bg-overlay, color-mix(in srgb, var(--color-black, #000) 55%, transparent));
    }
  }
  .cw-crop-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(880px, 94vw);
    max-height: 92vh;
    background-color: var(--bg-modal, var(--bg-surface));
    color: var(--text-primary);
    border: 1px solid var(--border-divider);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .cw-crop-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-divider);
  }
  .cw-crop-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .cw-crop-stage {
    height: 60vh;
    max-height: 560px;
    background-color: var(--bg-tertiary);
    padding: 12px;
    overflow: hidden;
  }
  .cw-crop-stage img {
    display: block;
    max-width: 100%;
    width: 100%;
  }
  .cw-crop-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-divider);
  }
  .cw-crop-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .cw-color {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cw-color__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .cw-color__row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .cw-color__swatch {
    width: 38px;
    height: 34px;
    flex: none;
    padding: 0;
    border: 1px solid var(--border-divider);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
  }
  .cw-color__swatch::-webkit-color-swatch-wrapper {
    padding: 3px;
  }
  .cw-color__swatch::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
  }
  .cw-color__swatch::-moz-color-swatch {
    border: none;
    border-radius: 5px;
  }
  .cw-color__swatch:focus, .cw-color__swatch:focus-visible {
    outline: none;
    border-color: var(--border-input-active);
    box-shadow: var(--ring-focus);
  }
  .cw-color__hex {
    flex: 1;
    min-width: 0;
  }
  .cw-panel .is-invalid, .cw-panel .form-control.is-invalid {
    border-color: var(--utility-red-500) !important;
    box-shadow: 0 0 0 3px var(--utility-red-500);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--utility-red-500) 16%, transparent);
    }
  }
  .cc-addmember {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    flex: none;
    margin-left: 2px;
    border: 1px dashed var(--border-strong, var(--border-divider));
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
  }
  .cc-addmember:hover {
    border-color: var(--border-strong, var(--text-tertiary));
    color: var(--text-primary);
    background-color: var(--bg-hover, var(--bg-tertiary));
  }
  .cc-member-combo {
    position: absolute;
    z-index: 1080;
    width: 280px;
    display: block;
  }
  .cc-member-combo[hidden] {
    display: none;
  }
  .cc-member-combo .combobox__panel {
    box-shadow: var(--shadow-lg);
  }
  .cc-member-combo .combobox__option {
    cursor: pointer;
  }
  .cc-member-combo .combobox__option small {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.625rem;
  }
  .cc-member-opt {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cc-member-opt__av {
    flex: none;
  }
  .cc-member-opt__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .cc-member-opt__name {
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cc-member-opt__meta {
    color: var(--text-tertiary);
    font-size: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #cdm-modal .object-header__meta .badge {
    background-color: var(--bg-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    }
    border: 1px solid currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    }
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
  }
  :is([data-theme="theme-dark"],[data-theme="theme-mica-dark"]) #cdm-modal .object-header__meta .badge {
    border-color: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, currentColor 42%, transparent);
    }
  }
  #cdm-modal .object-header--cover.is-fallback .object-header__banner {
    background-color: var(--utility-gray-500) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--utility-gray-500) 8%, var(--bg-surface)) !important;
    }
    background-image: repeating-linear-gradient(45deg, var(--utility-gray-500) 0 1px, transparent 1px 13px), repeating-linear-gradient(-45deg, var(--utility-gray-500) 0 1px, transparent 1px 13px) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--utility-gray-500) 12%, transparent) 0 1px, transparent 1px 13px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--utility-gray-500) 12%, transparent) 0 1px, transparent 1px 13px) !important;
    }
  }
  #cdm-modal .object-header--cover.is-fallback .object-header__banner::after {
    display: none;
  }
  #cdm-modal .object-header--cover.is-fallback .object-header__title {
    color: var(--text-primary);
  }
  #cdm-modal .object-header--cover.is-fallback .object-header__subtitle, #cdm-modal .object-header--cover.is-fallback .object-header__description, #cdm-modal .object-header--cover.is-fallback .object-header__meta {
    color: var(--text-secondary);
  }
  #cdm-modal .object-header--cover.is-fallback .object-header__actions .btn-secondary, #cdm-modal .object-header--cover.is-fallback .cdm-close {
    color: var(--text-secondary);
    background-color: var(--bg-surface);
    border-color: var(--border-default);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #cdm-modal .object-header--cover.is-fallback .object-header__actions .btn-secondary:hover, #cdm-modal .object-header--cover.is-fallback .cdm-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
  }
  #cdm-modal .object-header--cover.is-logo-fallback .object-header__figure {
    background-image: linear-gradient(135deg, var(--utility-neutral-400), var(--utility-neutral-500)) !important;
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(135deg, color-mix(in srgb, var(--utility-neutral-400) 35%, var(--bg-surface)), color-mix(in srgb, var(--utility-neutral-500) 65%, var(--bg-surface))) !important;
    }
  }
  #cdm-modal .object-header--cover .object-header__figure {
    align-self: flex-start;
  }
  #cdm-modal .object-header--cover .object-header__actions {
    top: auto;
    bottom: 0;
  }
  #cdm-modal .object-header--cover .cdm-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 20;
  }
  #cdm-modal .object-header__actions .btn-secondary, #cdm-modal .object-header--cover .cdm-close {
    color: var(--text-button-glass);
    background-color: var(--bg-button-glass);
    border-color: var(--border-button-glass);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
  }
  #cdm-modal .object-header__actions .btn-secondary:hover, #cdm-modal .object-header--cover .cdm-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border-color: var(--bg-surface);
  }
  .cdm [data-cdm-soon] {
    display: none !important;
  }
  .cdm .table-row-actions-cell .dropdown {
    display: none !important;
  }
  .avatar-group-stack .avatar-more {
    position: relative;
    z-index: 1;
  }
  .cw-section {
    border: 1px solid var(--border-divider);
    border-radius: 12px;
    background-color: var(--bg-surface);
    padding: 16px;
  }
  .cw-section + .cw-section {
    margin-top: 16px;
  }
  .cw-section__head {
    margin-bottom: 12px;
  }
  .cw-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .cw-section__icon {
    color: var(--text-tertiary);
  }
  .cw-section__sub {
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
  }
  .cw-panel {
    display: none;
  }
  .cw-panel.is-active {
    display: block;
  }
  .cw-card {
    position: sticky;
    top: 12px;
  }
  .cw-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
  }
  .cw-check__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid var(--border-divider);
    background-color: var(--bg-surface);
    color: transparent;
    font-size: 0.625rem;
  }
  .cw-check.is-done .cw-check__box {
    background-color: var(--utility-green-500);
    border-color: var(--utility-green-500);
    color: var(--color-white);
  }
  .cw-check.is-done {
    color: var(--text-primary);
  }
}
@layer utilities {
  .cmp-workspace {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  .cmp-tab-panes {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }
  .cmp-pane {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }
  .cmp-pane[hidden] {
    display: none;
  }
  .cmp-diff-old {
    color: var(--utility-red-500);
    text-decoration: line-through;
    opacity: 0.85;
  }
  .cmp-diff-new {
    color: var(--utility-emerald-500);
  }
}
@layer utilities {
  .dash {
    display: grid;
    grid-template-rows: auto auto minmax(340px, 1fr) minmax(340px, 1fr);
    gap: 12px;
    padding: 12px;
    min-height: 100%;
  }
  .dash__row-2col, .dash__row-3col {
    display: grid;
    gap: 12px;
    min-height: 0;
  }
  .dash__row-2col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dash__row-3col {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  }
  @media (max-width: 1023px) {
    .dash {
      grid-template-rows: none;
      min-height: 0;
    }
    .dash__row-2col, .dash__row-3col {
      grid-template-columns: minmax(0, 1fr);
    }
    .dash-card {
      min-height: 340px;
    }
  }
  .dash-kpi {
    position: relative;
    overflow: hidden;
  }
  .dash-kpi__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    opacity: 0.7;
  }
  .dash-kpi__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .dash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    position: relative;
    flex: 0 0 8px;
  }
  .dash-dot.is-live::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.5;
    animation: dash-pulse 1.6s ease-out infinite;
  }
  @keyframes dash-pulse {
    0% {
      transform: scale(0.6);
      opacity: 0.6;
    }
    80% {
      transform: scale(1.8);
      opacity: 0;
    }
    100% {
      transform: scale(1.8);
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dash-dot.is-live::after {
      animation: none;
    }
  }
  .dash-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }
  .dash-card__header {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .dash-card__body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
  }
  .dash-card__body--scroll {
    overflow: auto;
    padding: 12px 16px;
  }
  .dash-card__scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
  }
  .dash-map-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -32px;
  }
  .dash-map-live {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-map-scrim);
    color: var(--text-on-map-scrim);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    backdrop-filter: blur(6px);
    pointer-events: none;
  }
  .dash-canvasser-marker {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--utility-emerald-500);
    border: 2px solid var(--text-on-map-scrim);
    box-shadow: 0 0 0 2px var(--utility-emerald-500);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--utility-emerald-500) 35%, transparent);
    }
    position: relative;
  }
  .dash-canvasser-marker::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--utility-emerald-500);
    opacity: 0.5;
    animation: dash-pulse 1.8s ease-out infinite;
  }
  .dash-leaderboard-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 120ms ease;
  }
  .dash-leaderboard-row:hover {
    background: var(--bg-primary-subtle);
  }
  .dash-leaderboard-row__rank {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-align: center;
  }
  .dash-tile-row0 {
    min-height: 148px;
  }
  .dash-tile-row0__chart {
    min-height: 96px;
  }
  .dash-donut {
    width: 104px;
    height: 104px;
  }
  .dash-alert {
    border: 1px solid var(--border-card);
    border-left: 3px solid var(--dash-alert-accent, var(--border-default));
    background: var(--bg-card);
    padding: 12px;
  }
  .election-dash {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  .election-dash__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--canvas-secondary);
    border: 1px solid var(--border-default);
    border-radius: 12px;
  }
  .election-dash__kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 640px) {
    .election-dash__kpis {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1280px) {
    .election-dash__kpis {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .election-kpi__value {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }
  .election-dash__split {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 1024px) {
    .election-dash__split {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }
  .election-dash__split .dash-card {
    min-height: 360px;
  }
  .election-margin {
    border-top: 1px solid var(--border-default);
    margin-top: 8px;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .election-margin__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }
  .election-margin__row--total {
    border-top: 1px dashed var(--border-default);
    margin-top: 4px;
    padding-top: 6px;
  }
  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .dot--rep {
    background: var(--party-rep);
  }
  .dot--dem {
    background: var(--party-dem);
  }
  .election-cg-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 768px) {
    .election-cg-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1280px) {
    .election-cg-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .election-cg-tile {
    padding: 12px;
    border-radius: 10px;
    background: var(--bg-primary-subtle);
    border: 1px solid var(--border-default);
  }
  .election-cg-tile__value {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
  }
  .election-cg-tile__bar {
    width: 100%;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
  }
  .election-cg-tile__bar-rep {
    height: 100%;
    background: var(--party-rep);
  }
  .election-cg-tile__bar-dem {
    height: 100%;
    background: var(--party-dem);
  }
  .election-precinct-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  @media (min-width: 640px) {
    .election-precinct-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .election-precinct-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1440px) {
    .election-precinct-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .election-precinct-tile {
    padding: 12px;
    border-radius: 10px;
    background: var(--canvas-secondary);
    border: 1px solid var(--border-default);
    border-left-width: 3px;
    transition: transform 140ms ease, box-shadow 140ms ease;
  }
  .election-precinct-tile:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
  }
  .election-precinct-tile.is-strong {
    border-left-color: var(--utility-emerald-500);
  }
  .election-precinct-tile.is-good {
    border-left-color: var(--utility-teal-500);
  }
  .election-precinct-tile.is-fair {
    border-left-color: var(--utility-amber-500);
  }
  .election-precinct-tile.is-low {
    border-left-color: var(--utility-red-500);
  }
  .election-precinct-tile__turnout {
    text-align: right;
    flex: none;
  }
  .election-precinct-tile__bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
  }
  .election-precinct-tile__bar-rep {
    height: 100%;
    background: var(--party-rep);
  }
  .election-precinct-tile__bar-dem {
    height: 100%;
    background: var(--party-dem);
  }
  .election-candidate-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-primary-subtle);
  }
  .election-candidate-row--writein {
    opacity: 0.8;
    background: transparent;
    border-top: 1px dashed var(--border-default);
    border-radius: 0;
    margin-top: 4px;
    padding-top: 12px;
  }
  .election-candidate-row__rank {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    width: 32px;
    text-align: center;
  }
  .election-candidate-row__bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
  }
  .election-candidate-row__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 360ms ease;
  }
  .election-table-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
  }
  .election-table-bar__rep {
    height: 100%;
    background: var(--party-rep);
  }
  .election-table-bar__dem {
    height: 100%;
    background: var(--party-dem);
  }
  .election-insight-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .election-insight {
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-primary-subtle);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
  }
  .election-insight i {
    margin-top: 2px;
    flex: none;
  }
  .voter-dash {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  .voter-dash__sync {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .dot--other {
    background: var(--party-oth);
  }
  .voter-dash__map-row {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 1024px) {
    .voter-dash__map-row {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }
  .voter-dash__map-card {
    min-height: 380px;
  }
  .voter-dash__trend-card {
    min-height: 380px;
  }
  .voter-dash__map-canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -32px;
  }
  .voter-dash__map-legend {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    background: var(--bg-map-scrim);
    color: var(--text-on-map-scrim);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(6px);
    pointer-events: none;
  }
  .voter-dash__map-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  [data-voter-map-mode] .btn-secondary.is-active {
    background: var(--bg-warning-subtle);
    color: var(--text-warning, var(--color-warning));
    border-color: var(--color-warning);
  }
  .voter-dash__party-row {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 1024px) {
    .voter-dash__party-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
  }
  .voter-dash__donut-card {
    min-height: 280px;
  }
  .voter-dash__districts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 768px) {
    .voter-dash__districts {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .voter-dash__district-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: 8px;
    align-items: center;
  }
  .voter-dash__bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
  }
  .voter-dash__bar-dem {
    height: 100%;
    background: var(--party-dem);
  }
  .voter-dash__bar-rep {
    height: 100%;
    background: var(--party-rep);
  }
  .voter-dash__leaderboards {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 768px) {
    .voter-dash__leaderboards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1280px) {
    .voter-dash__leaderboards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .voter-dash__leader-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) auto;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
  }
  .voter-dash__leader-label {
    min-width: 0;
  }
}
@layer utilities {
  .cmp-settings .cmp-set-nav {
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .cmp-settings .cmp-set-nav:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
  .cmp-settings .cmp-set-nav.is-active {
    background: var(--bg-primary-subtle);
    color: var(--text-primary);
    font-weight: 500;
  }
  .cmp-settings .cmp-swatch {
    border: 1px solid var(--border-card);
    cursor: pointer;
    padding: 0;
    transition: outline-color 120ms ease;
  }
  .cmp-settings .cmp-swatch .cmp-swatch-check {
    opacity: 0;
  }
  .cmp-settings .cmp-swatch.is-selected {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }
  .cmp-settings .cmp-swatch.is-selected .cmp-swatch-check {
    opacity: 1;
  }
}
@layer utilities {
  .pp-entrance-pad {
    border: 1px solid var(--border-divider);
    background-image: linear-gradient(var(--border-divider) 1px, transparent 1px), linear-gradient(90deg, var(--border-divider) 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: crosshair;
    touch-action: none;
  }
  .pp-entrance-pin {
    transform: translate(-50%, -50%);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--utility-blue-500);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: grab;
    touch-action: none;
  }
  .pp-entrance-pin:active {
    cursor: grabbing;
  }
  .pp-entrance-pin:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }
}
@layer utilities {
  .maps-studio {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .maps-studio [data-maps-studio] {
    position: absolute;
    inset: 0;
  }
  .maps-studio [data-ts-turf].is-selected {
    background: var(--bg-primary-subtle);
    outline: 1px solid var(--utility-indigo-500);
  }
  .ts-swatch {
    border: 1px solid var(--border-card);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ts-swatch .ts-swatch-check {
    opacity: 0;
  }
  .ts-swatch.is-selected {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }
  .ts-swatch.is-selected .ts-swatch-check {
    opacity: 1;
  }
}
@layer utilities {
  .ql-container {
    position: relative;
    margin: 0;
    box-sizing: border-box;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    background-color: var(--bg-quill-editor);
    color: var(--text-quill-editor);
    border: 1px solid var(--border-quill-editor);
  }
  .ql-container.ql-disabled .ql-tooltip {
    visibility: hidden;
  }
  .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
    pointer-events: none;
  }
  .ql-clipboard {
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: -100000px;
    height: 1px;
  }
  .ql-clipboard p {
    margin: 0;
    padding: 0;
  }
  .ql-editor {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    text-align: left;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    overflow-wrap: break-word;
    white-space: pre-wrap;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    background-color: var(--bg-quill-content);
    color: var(--text-quill-content);
    tab-size: 4;
    -moz-tab-size: 4;
  }
  .ql-editor > * {
    cursor: text;
  }
  .ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    margin: 0;
    padding: 0;
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
  .ql-editor ol, .ql-editor ul {
    padding-left: 1.5em;
  }
  .ql-editor ol > li, .ql-editor ul > li {
    list-style-type: none;
  }
  .ql-editor ul > li::before {
    content: '\2022';
  }
  .ql-editor ul[data-checked=true], .ql-editor ul[data-checked=false] {
    pointer-events: none;
  }
  .ql-editor ul[data-checked=true] > li *, .ql-editor ul[data-checked=false] > li * {
    pointer-events: all;
  }
  .ql-editor ul[data-checked="true"] > li::before, .ql-editor ul[data-checked="false"] > li::before {
    cursor: pointer;
    color: var(--text-quill-checkbox);
    pointer-events: all;
  }
  .ql-editor ul[data-checked=true] > li::before {
    content: '\2611';
  }
  .ql-editor ul[data-checked=false] > li::before {
    content: '\2610';
  }
  .ql-editor li::before {
    display: inline-block;
    white-space: nowrap;
    width: 1.2em;
  }
  .ql-editor li:not(.ql-direction-rtl)::before {
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
  }
  .ql-editor li.ql-direction-rtl::before {
    margin-left: 0.3em;
    margin-right: -1.5em;
  }
  .ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl) {
    padding-left: 1.5em;
  }
  .ql-editor ol li.ql-direction-rtl, .ql-editor ul li.ql-direction-rtl {
    padding-right: 1.5em;
  }
  .ql-editor ol li {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
    counter-increment: list-0;
  }
  .ql-editor ol li:before {
    content: counter(list-0, decimal) '. ';
  }
  .ql-editor ol li.ql-indent-1 {
    counter-increment: list-1;
  }
  .ql-editor ol li.ql-indent-1:before {
    content: counter(list-1, lower-alpha) '. ';
  }
  .ql-editor ol li.ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
  .ql-editor ol li.ql-indent-2 {
    counter-increment: list-2;
  }
  .ql-editor ol li.ql-indent-2:before {
    content: counter(list-2, lower-roman) '. ';
  }
  .ql-editor ol li.ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
  .ql-editor ol li.ql-indent-3 {
    counter-increment: list-3;
  }
  .ql-editor ol li.ql-indent-3:before {
    content: counter(list-3, decimal) '. ';
  }
  .ql-editor ol li.ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  }
  .ql-editor ol li.ql-indent-4 {
    counter-increment: list-4;
  }
  .ql-editor ol li.ql-indent-4:before {
    content: counter(list-4, lower-alpha) '. ';
  }
  .ql-editor ol li.ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
  }
  .ql-editor ol li.ql-indent-5 {
    counter-increment: list-5;
  }
  .ql-editor ol li.ql-indent-5:before {
    content: counter(list-5, lower-roman) '. ';
  }
  .ql-editor ol li.ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
  }
  .ql-editor ol li.ql-indent-6 {
    counter-increment: list-6;
  }
  .ql-editor ol li.ql-indent-6:before {
    content: counter(list-6, decimal) '. ';
  }
  .ql-editor ol li.ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
  }
  .ql-editor ol li.ql-indent-7 {
    counter-increment: list-7;
  }
  .ql-editor ol li.ql-indent-7:before {
    content: counter(list-7, lower-alpha) '. ';
  }
  .ql-editor ol li.ql-indent-7 {
    counter-reset: list-8 list-9;
  }
  .ql-editor ol li.ql-indent-8 {
    counter-increment: list-8;
  }
  .ql-editor ol li.ql-indent-8:before {
    content: counter(list-8, lower-roman) '. ';
  }
  .ql-editor ol li.ql-indent-8 {
    counter-reset: list-9;
  }
  .ql-editor ol li.ql-indent-9 {
    counter-increment: list-9;
  }
  .ql-editor ol li.ql-indent-9:before {
    content: counter(list-9, decimal) '. ';
  }
  .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
  }
  .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 4.5em;
  }
  .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 3em;
  }
  .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
    padding-right: 4.5em;
  }
  .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 6em;
  }
  .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 7.5em;
  }
  .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 6em;
  }
  .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
    padding-right: 7.5em;
  }
  .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 9em;
  }
  .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 10.5em;
  }
  .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 9em;
  }
  .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
    padding-right: 10.5em;
  }
  .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 12em;
  }
  .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 13.5em;
  }
  .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 12em;
  }
  .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
    padding-right: 13.5em;
  }
  .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 15em;
  }
  .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 16.5em;
  }
  .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 15em;
  }
  .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
    padding-right: 16.5em;
  }
  .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 18em;
  }
  .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 19.5em;
  }
  .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 18em;
  }
  .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
    padding-right: 19.5em;
  }
  .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 21em;
  }
  .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 22.5em;
  }
  .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 21em;
  }
  .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
    padding-right: 22.5em;
  }
  .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 24em;
  }
  .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 25.5em;
  }
  .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 24em;
  }
  .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
    padding-right: 25.5em;
  }
  .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 27em;
  }
  .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
    padding-left: 28.5em;
  }
  .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 27em;
  }
  .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
    padding-right: 28.5em;
  }
  .ql-editor .ql-video {
    display: block;
    max-width: 100%;
  }
  .ql-editor .ql-video.ql-align-center {
    margin: 0 auto;
  }
  .ql-editor .ql-video.ql-align-right {
    margin: 0 0 0 auto;
  }
  .ql-editor .ql-bg-black {
    background-color: var(--bg-quill-black);
  }
  .ql-editor .ql-bg-red {
    background-color: var(--bg-quill-red);
  }
  .ql-editor .ql-bg-orange {
    background-color: var(--bg-quill-orange);
  }
  .ql-editor .ql-bg-yellow {
    background-color: var(--bg-quill-yellow);
  }
  .ql-editor .ql-bg-green {
    background-color: var(--bg-quill-green);
  }
  .ql-editor .ql-bg-blue {
    background-color: var(--bg-quill-blue);
  }
  .ql-editor .ql-bg-purple {
    background-color: var(--bg-quill-purple);
  }
  .ql-editor .ql-color-white {
    color: var(--text-quill-white);
  }
  .ql-editor .ql-color-red {
    color: var(--text-quill-red);
  }
  .ql-editor .ql-color-orange {
    color: var(--text-quill-orange);
  }
  .ql-editor .ql-color-yellow {
    color: var(--text-quill-yellow);
  }
  .ql-editor .ql-color-green {
    color: var(--text-quill-green);
  }
  .ql-editor .ql-color-blue {
    color: var(--text-quill-blue);
  }
  .ql-editor .ql-color-purple {
    color: var(--text-quill-purple);
  }
  .ql-editor .ql-font-serif {
    font-family: Georgia, Times New Roman, serif;
  }
  .ql-editor .ql-font-monospace {
    font-family: Monaco, Courier New, monospace;
  }
  .ql-editor .ql-size-small {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .ql-editor .ql-size-large {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .ql-editor .ql-size-huge {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  .ql-editor .ql-direction-rtl {
    direction: rtl;
    text-align: inherit;
  }
  .ql-editor .ql-align-center {
    text-align: center;
  }
  .ql-editor .ql-align-justify {
    text-align: justify;
  }
  .ql-editor .ql-align-right {
    text-align: right;
  }
  .ql-editor.ql-blank::before {
    content: attr(data-placeholder);
    font-style: italic;
    pointer-events: none;
    position: absolute;
    left: 15px;
    right: 15px;
    color: var(--text-quill-placeholder);
  }
  .ql-snow.ql-toolbar:after, .ql-snow .ql-toolbar:after {
    content: '';
    display: table;
    clear: both;
  }
  .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 24px;
    padding: 3px 5px;
    width: 28px;
    color: var(--text-quill-button);
  }
  .ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg {
    float: left;
    height: 100%;
  }
  .ql-snow.ql-toolbar button:active:hover, .ql-snow .ql-toolbar button:active:hover {
    outline: none;
  }
  .ql-snow.ql-toolbar input.ql-image[type="file"], .ql-snow .ql-toolbar input.ql-image[type="file"] {
    display: none;
  }
  .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--text-quill-button-hover);
  }
  .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: var(--fill-quill-hover);
  }
  .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: var(--stroke-quill-hover);
  }
  @media (pointer: coarse) {
    .ql-snow.ql-toolbar button:hover:not(.ql-active), .ql-snow .ql-toolbar button:hover:not(.ql-active) {
      color: var(--text-quill-button-touch-hover);
    }
    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
      fill: var(--fill-quill-touch-hover);
    }
    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
      stroke: var(--stroke-quill-touch-hover);
    }
  }
  .ql-snow {
    box-sizing: border-box;
  }
  .ql-snow * {
    box-sizing: border-box;
  }
  .ql-snow .ql-hidden {
    display: none;
  }
  .ql-snow .ql-out-bottom, .ql-snow .ql-out-top {
    visibility: hidden;
  }
  .ql-snow .ql-tooltip {
    position: absolute;
    transform: translateY(10px);
  }
  .ql-snow .ql-tooltip a {
    color: var(--text-quill-link);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.25rem;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
  }
  .ql-snow .ql-tooltip a:hover {
    color: var(--text-quill-link-hover);
    text-decoration: underline;
    text-decoration-style: dashed;
  }
  .ql-snow .ql-tooltip a:active {
    color: var(--text-quill-link-active);
  }
  .ql-snow .ql-tooltip.ql-flip {
    transform: translateY(-10px);
  }
  .ql-snow .ql-formats {
    display: inline-block;
    vertical-align: middle;
  }
  .ql-snow .ql-formats:after {
    clear: both;
    content: '';
    display: table;
  }
  .ql-snow .ql-stroke {
    stroke: var(--stroke-quill-default);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .ql-snow .ql-stroke-miter {
    stroke: var(--stroke-quill-default);
    fill: none;
    stroke-miterlimit: 10;
    stroke-width: 2;
  }
  .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
    fill: var(--fill-quill-default);
  }
  .ql-snow .ql-empty {
    fill: none;
  }
  .ql-snow .ql-even {
    fill-rule: evenodd;
  }
  .ql-snow .ql-thin, .ql-snow .ql-stroke.ql-thin {
    stroke-width: 1;
  }
  .ql-snow .ql-transparent {
    opacity: 0.4;
  }
  .ql-snow .ql-direction svg:last-child {
    display: none;
  }
  .ql-snow .ql-direction.ql-active svg:last-child {
    display: inline;
  }
  .ql-snow .ql-direction.ql-active svg:first-child {
    display: none;
  }
  .ql-snow .ql-editor h1 {
    font-size: 2em;
  }
  .ql-snow .ql-editor h2 {
    font-size: 1.5em;
  }
  .ql-snow .ql-editor h3 {
    font-size: 1.17em;
  }
  .ql-snow .ql-editor h4 {
    font-size: 1em;
  }
  .ql-snow .ql-editor h5 {
    font-size: 0.83em;
  }
  .ql-snow .ql-editor h6 {
    font-size: 0.67em;
  }
  .ql-snow .ql-editor a {
    &:hover {
      @media (hover: hover) {
        text-decoration-style: solid;
      }
    }
  }
  .ql-snow .ql-editor blockquote {
    border-left: 4px solid #ccc;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px;
  }
  .ql-snow .ql-editor code, .ql-snow .ql-editor pre {
    border-radius: var(--radius-md);
    background-color: var(--bg-quill-code);
  }
  .ql-snow .ql-editor pre {
    white-space: pre-wrap;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px 10px;
  }
  .ql-snow .ql-editor code {
    font-size: 85%;
    padding: 2px 4px;
  }
  .ql-snow .ql-editor pre.ql-syntax {
    background-color: #23241f;
    color: #f8f8f2;
    overflow: visible;
  }
  .ql-snow .ql-editor img {
    max-width: 100%;
  }
  .ql-snow .ql-picker {
    color: #444;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: 500;
    height: 24px;
    position: relative;
    vertical-align: middle;
  }
  .ql-snow .ql-picker-label {
    cursor: pointer;
    display: inline-block;
    height: 100%;
    padding-left: 8px;
    padding-right: 2px;
    position: relative;
    width: 100%;
  }
  .ql-snow .ql-picker-label::before {
    display: inline-block;
    line-height: 22px;
  }
  .ql-snow .ql-picker-options {
    background-color: #fff;
    display: none;
    min-width: 100%;
    padding: 4px 8px;
    position: absolute;
    white-space: nowrap;
  }
  .ql-snow .ql-picker-options .ql-picker-item {
    cursor: pointer;
    display: block;
    padding-bottom: 5px;
    padding-top: 5px;
  }
  .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: #ccc;
    z-index: 2;
  }
  .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: #ccc;
  }
  .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: #ccc;
  }
  .ql-snow .ql-picker.ql-expanded .ql-picker-options {
    display: block;
    margin-top: -1px;
    top: 100%;
    z-index: 1;
  }
  .ql-snow .ql-color-picker, .ql-snow .ql-icon-picker {
    width: 28px;
  }
  .ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label {
    padding: 2px 4px;
  }
  .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg {
    right: 4px;
  }
  .ql-snow .ql-icon-picker .ql-picker-options {
    padding: 4px 0px;
  }
  .ql-snow .ql-icon-picker .ql-picker-item {
    height: 24px;
    width: 24px;
    padding: 2px 4px;
  }
  .ql-snow .ql-color-picker .ql-picker-options {
    padding: 3px 5px;
    width: 152px;
  }
  .ql-snow .ql-color-picker .ql-picker-item {
    border: 1px solid transparent;
    float: left;
    height: 16px;
    margin: 2px;
    padding: 0px;
    width: 16px;
  }
  .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
    position: absolute;
    margin-top: -9px;
    right: 0;
    top: 50%;
    width: 18px;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
    content: attr(data-label);
  }
  .ql-snow .ql-picker.ql-header {
    width: 98px;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: 'Normal';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: 'Heading 1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: 'Heading 2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: 'Heading 3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: 'Heading 4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: 'Heading 5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: 'Heading 6';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    font-size: 2em;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    font-size: 1.5em;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    font-size: 1.17em;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    font-size: 1em;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    font-size: 0.83em;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    font-size: 0.67em;
  }
  .ql-snow .ql-picker.ql-font {
    width: 108px;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: 'Sans Serif';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: 'Serif';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: 'Monospace';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    font-family: Georgia, Times New Roman, serif;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    font-family: Monaco, Courier New, monospace;
  }
  .ql-snow .ql-picker.ql-size {
    width: 98px;
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: 'Normal';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: 'Small';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: 'Large';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: 'Huge';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    font-size: 10px;
  }
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    font-size: 18px;
  }
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    font-size: 32px;
  }
  .ql-snow .ql-color-picker.ql-background .ql-picker-item {
    background-color: #fff;
  }
  .ql-snow .ql-color-picker.ql-color .ql-picker-item {
    background-color: #000;
  }
  .ql-toolbar.ql-snow {
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: calc(var(--spacing) * 2);
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
  }
  .ql-toolbar.ql-snow .ql-formats {
    margin-right: 15px;
  }
  .ql-toolbar.ql-snow .ql-picker-label {
    border: 1px solid transparent;
  }
  .ql-toolbar.ql-snow .ql-picker-options {
    border: 1px solid transparent;
    box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
  }
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: #ccc;
  }
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: #ccc;
  }
  .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
    border-color: #000;
  }
  .ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top: 0px;
  }
  .ql-snow .ql-tooltip {
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    white-space: nowrap;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: var(--bg-quill-tooltip);
    color: var(--text-quill-tooltip);
    border: 1px solid var(--border-quill-tooltip);
  }
  .ql-snow .ql-tooltip::before {
    content: "Visit URL:";
    line-height: 26px;
    margin-right: 8px;
  }
  .ql-snow .ql-tooltip input[type="text"] {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &::placeholder {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    background-color: var(--bg-quill-input);
    color: var(--text-quill-input);
    border-color: var(--border-quill-input);
    width: 200px;
    display: none;
  }
  .ql-snow .ql-tooltip input[type="text"]:hover {
    border-color: var(--border-quill-input-hover);
  }
  .ql-snow .ql-tooltip input[type="text"]:focus {
    border-color: var(--border-quill-input-focus);
  }
  .ql-snow .ql-tooltip a.ql-preview {
    display: inline-block;
    max-width: 250px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }
  .ql-snow .ql-tooltip a.ql-action::after {
    border-right: 1px solid #ccc;
    content: 'Edit';
    margin-left: 16px;
    padding-right: 8px;
  }
  .ql-snow .ql-tooltip a.ql-remove::before {
    content: 'Remove';
    margin-left: 8px;
  }
  .ql-snow .ql-tooltip a {
    line-height: 26px;
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-preview, .ql-snow .ql-tooltip.ql-editing a.ql-remove {
    display: none;
  }
  .ql-snow .ql-tooltip.ql-editing input[type=text] {
    display: inline-block;
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: 'Save';
    padding-right: 0px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "Enter link:";
  }
  .ql-snow .ql-tooltip[data-mode=formula]::before {
    content: "Enter formula:";
  }
  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "Enter video:";
  }
  .ql-snow a {
    color: var(--text-quill-link);
  }
  .ql-snow a:hover {
    color: var(--text-quill-link-hover);
  }
  .ql-container.ql-snow {
    border: 1px solid var(--border-quill-container);
  }
}
@layer utilities {
  .dropzone {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 2px;
    --tw-border-style: dashed;
    border-style: dashed;
    background-color: transparent;
    padding: calc(var(--spacing) * 4);
    border-color: var(--border-dropzone);
    min-height: 150px;
  }
  .dz-message {
    margin-top: calc(var(--spacing) * 4);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-dropzone);
  }
  .dropzone .dz-preview {
    position: relative;
    margin-inline: var(--spacing);
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 10);
    display: inline-block;
    height: calc(var(--spacing) * 10);
    vertical-align: top;
  }
  .dropzone .dz-preview.dz-image-preview {
    background-color: var(--alpha-0);
  }
  .dropzone .dz-preview .dz-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 120px;
    height: 120px;
    position: relative;
    display: block;
    z-index: 10;
  }
  .dropzone .dz-preview .dz-details .dz-size {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    margin-bottom: 1em;
  }
  .dropzone .dz-preview .dz-progress {
    opacity: 80%;
    background-color: var(--bg-dropzone);
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 8px;
    left: 50%;
    top: 95%;
    margin-top: -8px;
    width: 80px;
    margin-left: -40px;
    transform: scale(1);
    border-radius: 8px;
    overflow: hidden;
  }
  .dropzone .dz-preview .dz-remove {
    display: block;
    cursor: pointer;
    border-style: var(--tw-border-style);
    border-width: 0px;
    text-align: center;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-danger);
  }
}
.flatpickr-input {
  cursor: pointer;
}
.flatpickr-input:disabled, .flatpickr-input[readonly][disabled] {
  cursor: default;
}
.flatpickr-calendar {
  background-color: var(--bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: 0 0 0 1px var(--border-secondary), var(--shadow-xl);
  border: 0;
  padding: 1.25rem 1.5rem;
  width: 328px;
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  direction: ltr;
  opacity: 0;
  display: none;
  visibility: hidden;
  animation: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.flatpickr-calendar.open, .flatpickr-calendar.inline {
  opacity: 1;
  visibility: visible;
  display: block;
  z-index: var(--z-popover, 1060);
}
.flatpickr-calendar.inline {
  position: relative;
  top: 0;
}
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.flatpickr-calendar::before, .flatpickr-calendar::after {
  display: none;
}
.flatpickr-months {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 0.75rem;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  fill: currentColor;
  cursor: pointer;
  transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), color var(--duration-fast, 100ms) var(--ease-out, ease);
}
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
  background-color: var(--bg-primary-hover);
  color: var(--text-secondary-hover);
}
.flatpickr-months .flatpickr-prev-month:focus-visible, .flatpickr-months .flatpickr-next-month:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
  width: 1.25rem;
  height: 1.25rem;
}
.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
  fill: currentColor;
}
.flatpickr-months .flatpickr-month {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  background: transparent;
  color: var(--text-primary);
  overflow: visible;
}
.flatpickr-current-month {
  position: static;
  width: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--text-primary);
}
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year {
  background-color: transparent;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.875rem;
  border: 0;
  padding: 0 0 0 0.25ch;
  border-radius: var(--radius-sm);
  color-scheme: var(--flatpickr-color-scheme, light);
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus-visible, .flatpickr-current-month input.cur-year:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
.flatpickr-current-month .numInputWrapper span {
  border: 0;
}
.flatpickr-current-month .numInputWrapper span:hover {
  background: var(--bg-primary-hover);
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--text-quaternary);
}
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: var(--text-quaternary);
}
.flatpickr-innerContainer {
  display: flex;
  justify-content: center;
  overflow: visible;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
}
.flatpickr-weekdays {
  display: flex;
  width: 280px;
  align-items: center;
  height: 2.5rem;
  background: transparent;
}
.flatpickr-weekdaycontainer {
  display: flex;
  width: 100%;
}
span.flatpickr-weekday {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2.5rem;
  color: var(--text-secondary);
  background: transparent;
}
.flatpickr-days {
  display: flex;
  width: 280px;
  align-items: flex-start;
}
.dayContainer {
  display: flex;
  flex-wrap: wrap;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  padding: 0;
  justify-content: flex-start;
}
.flatpickr-day {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 40px;
  max-width: 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease), color var(--duration-fast, 100ms) var(--ease-out, ease);
}
.flatpickr-day:hover, .flatpickr-day:focus {
  background-color: var(--bg-primary-hover);
  color: var(--text-secondary-hover);
  font-weight: 500;
  outline: none;
}
.flatpickr-day.flatpickr-focused, .flatpickr-day:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  z-index: 1;
}
.flatpickr-day.today {
  position: relative;
  background-color: var(--bg-flatpickr-today);
  font-weight: 500;
}
.flatpickr-day.today:not(.selected)::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  background-color: var(--bg-brand-solid);
}
.flatpickr-day.today:hover {
  background-color: var(--bg-flatpickr-today-hover);
  color: var(--text-secondary-hover);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: var(--text-disabled);
  background: transparent;
  cursor: default;
  font-weight: 400;
  pointer-events: none;
}
.flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {
  color: var(--text-tertiary);
  background-color: var(--bg-primary-hover);
  pointer-events: auto;
}
.flatpickr-day.inRange {
  border-radius: 0;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  box-shadow: -5px 0 0 var(--bg-secondary), 5px 0 0 var(--bg-secondary);
}
.flatpickr-day.inRange:hover {
  background-color: var(--bg-secondary-hover);
  box-shadow: -5px 0 0 var(--bg-secondary-hover), 5px 0 0 var(--bg-secondary-hover);
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
  background-color: var(--bg-brand-solid);
  color: var(--text-on-brand);
  font-weight: 500;
  border-radius: var(--radius-full);
  box-shadow: none;
}
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
  background-color: var(--bg-button-primary-hover);
}
.flatpickr-day.today.selected::after {
  background-color: var(--text-on-brand);
}
.flatpickr-day.startRange.endRange {
  border-radius: var(--radius-full);
}
.flatpickr-calendar.hasTime .flatpickr-time {
  display: flex;
  align-items: stretch;
  margin-top: 0.75rem;
  border-top: 1px solid var(--border-secondary);
  height: 3.75rem;
  max-height: 3.75rem;
  line-height: normal;
  padding-top: 0.75rem;
}
.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper {
  flex: 1;
  height: 100%;
  border-radius: var(--radius-lg);
}
.flatpickr-time input {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border-radius: var(--radius-lg);
  font-variant-numeric: tabular-nums;
}
.flatpickr-time .flatpickr-time-separator {
  align-self: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-quaternary);
  line-height: normal;
  height: auto;
}
.flatpickr-time .flatpickr-am-pm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26%;
  margin-left: 0.375rem;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
  line-height: normal;
}
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus {
  background-color: var(--bg-primary-hover);
  outline: none;
}
.flatpickr-time input:focus-visible, .flatpickr-time .flatpickr-am-pm:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -1px;
}
.flatpickr-time .numInputWrapper span {
  opacity: 1;
  width: 1.5rem;
  right: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease);
}
.flatpickr-time .numInputWrapper span:hover {
  background-color: var(--bg-primary-hover);
}
.flatpickr-time .numInputWrapper span:active {
  background-color: var(--bg-secondary-hover);
}
.flatpickr-time .numInputWrapper span::after {
  left: 50%;
  transform: translateX(-50%);
}
.flatpickr-time .numInputWrapper span.arrowUp::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--text-secondary);
}
.flatpickr-time .numInputWrapper span.arrowDown::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-secondary);
}
.flatpickr-time .numInputWrapper span.arrowUp:hover::after {
  border-bottom-color: var(--text-primary);
}
.flatpickr-time .numInputWrapper span.arrowDown:hover::after {
  border-top-color: var(--text-primary);
}
.flatpickr-weekwrapper .flatpickr-weekday, .flatpickr-weekwrapper span.flatpickr-day {
  color: var(--text-tertiary);
  background: transparent;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .flatpickr-calendar.animate.open {
    animation: none;
  }
  .flatpickr-day, .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month, .flatpickr-time .numInputWrapper span {
    transition: none;
  }
}
@layer utilities {
  .select2-container {
    position: relative;
    margin: 0;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
  }
  .select2-container .select2-selection--single {
    box-sizing: border-box;
    display: block;
    min-height: 26px;
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid var(--border-select);
    background-color: var(--bg-select);
    color: var(--text-select);
  }
  .select2-selection__rendered {
    overflow: hidden;
    padding-right: calc(var(--spacing) * 2);
    padding-left: var(--spacing);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-select-rendered);
  }
  .select2-selection__placeholder {
    color: var(--text-placeholder);
  }
  .select2-selection--multiple {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
    display: block;
    width: 100%;
    scrollbar-width: thin;
    overflow-y: auto;
    border-radius: var(--radius-sm);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid var(--border-multiselect);
    background-color: var(--bg-multiselect);
    color: var(--text-multiselect);
  }
  .select2-selection--multiple .select2-selection__choice {
    float: left;
    margin-right: var(--spacing);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-multiselect-choice);
    color: var(--text-multiselect-choice);
    border: 1px solid var(--border-multiselect-choice);
  }
  .select2-selection__choice__remove {
    margin-right: var(--spacing);
    cursor: pointer;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--text-remove);
    opacity: 0.8;
  }
  .select2-selection__choice__remove:hover {
    color: var(--text-remove-hover);
    opacity: 1;
  }
  .select2-dropdown {
    position: absolute;
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    background-color: var(--bg-dropdown);
    border: 1px solid var(--border-dropdown);
    color: var(--text-dropdown);
    z-index: 1051 !important;
  }
  .select2-results__option {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--bg-option);
    color: var(--text-option);
  }
  .select2-results__option[aria-selected="true"] {
    background-color: var(--bg-option-selected);
    color: var(--text-option-selected);
  }
  .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bg-option-highlighted);
    color: var(--text-option-highlighted);
  }
  .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
  }
  .select2-search__field {
    padding-right: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-search-field);
    background-color: var(--bg-search-field);
    border: 1px solid var(--border-search-field);
    outline: none;
    box-shadow: none;
    appearance: textfield;
  }
  .select2-search--inline .select2-search__field {
    border: none;
    background-color: transparent;
  }
  .select2-close-mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 100%;
    width: 100%;
    opacity: 0%;
    background-color: var(--bg-mask);
  }
  .select2-hidden-accessible {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
  }
  .select2-container--open.select2-container--above .select2-selection--single, .select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: var(--radius-none);
    border-top-right-radius: var(--radius-none);
  }
  .select2-container--open.select2-container--below .select2-selection--single, .select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-right-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
  }
}
@layer utilities {
  .search-field {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    height: var(--search-field-h, 2.5rem);
    padding-inline: 0.75rem;
    border-radius: var(--radius-search, var(--radius-lg, 0.5rem));
    background-color: var(--bg-search-field, var(--bg-input, var(--bg-primary)));
    color: var(--text-search, var(--text-primary));
    box-shadow: inset 0 0 0 1px var(--border-search, var(--border-input, var(--border-primary))), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-field:hover {
    box-shadow: inset 0 0 0 1px var(--border-search-hover, var(--border-input-hover, var(--border-primary))), var(--shadow-xs);
  }
  .search-field:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .search-field.is-invalid {
    box-shadow: inset 0 0 0 1px var(--border-search-error, var(--border-error, var(--text-danger))), var(--shadow-xs);
  }
  .search-field.is-invalid:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-search-error, var(--border-error, var(--text-danger))), var(--shadow-xs);
  }
  .search-field.is-disabled, .search-field[aria-disabled="true"] {
    pointer-events: none;
    opacity: var(--opacity-disabled, 0.5);
  }
  .search-field--soft {
    background-color: var(--bg-search-field-soft, var(--bg-secondary));
    box-shadow: none;
  }
  .search-field--soft:hover {
    background-color: var(--bg-search-field-soft-hover, var(--bg-secondary-alt, var(--bg-tertiary)));
    box-shadow: inset 0 0 0 1px var(--border-search, var(--border-secondary));
  }
  .search-field--soft:focus-within {
    background-color: var(--bg-search-field, var(--bg-input, var(--bg-primary)));
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .search-field--pill {
    border-radius: var(--radius-full, 9999px);
  }
  .search-field__icon {
    pointer-events: none;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--text-search-icon, var(--text-quaternary));
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-field:focus-within .search-field__icon {
    color: var(--text-search-icon-focus, var(--text-tertiary));
  }
  .search-field__input {
    min-width: 0;
    flex: 1;
    appearance: none;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    padding: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-search, var(--text-primary));
  }
  .search-field__input::placeholder {
    color: var(--text-search-placeholder, var(--text-placeholder, var(--text-tertiary)));
    opacity: 1;
  }
  .search-field__input::-webkit-search-cancel-button, .search-field__input::-webkit-search-decoration {
    display: none;
  }
  .search-field__trail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .search-field__clear {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-search-icon, var(--text-quaternary));
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
    display: none;
  }
  .search-field.is-clearable .search-field__clear {
    display: inline-flex;
  }
  .search-field__clear:hover {
    color: var(--text-search, var(--text-secondary));
  }
  .search-field__clear:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .search-field__spinner {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-full, 9999px);
    border: 2px solid var(--border-search-spinner-track, var(--border-secondary));
    border-top-color: var(--border-search-spinner, var(--text-icon-brand, var(--text-tertiary)));
    animation: search-spin 0.6s linear infinite;
    display: none;
  }
  .search-field.is-loading .search-field__spinner {
    display: block;
  }
  .search-field.is-loading .search-field__clear {
    display: none;
  }
  @keyframes search-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .search-field__kbd {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    min-width: 1.5rem;
    height: 1.25rem;
    padding-inline: 0.25rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: var(--radius-sm, 0.25rem);
    background-color: var(--bg-kbd, var(--bg-secondary-alt, var(--bg-tertiary)));
    color: var(--text-kbd, var(--text-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-kbd, var(--border-secondary));
  }
  .search-field--xs {
    --search-field-h: 2rem;
    padding-inline: 0.625rem;
    gap: 0.375rem;
  }
  .search-field--xs .search-field__icon {
    width: 1rem;
    height: 1rem;
    font-size: 0.875rem;
  }
  .search-field--xs .search-field__input {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .search-field--sm {
    --search-field-h: 2.25rem;
  }
  .search-field--sm .search-field__input {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .search-field--md {
    --search-field-h: 2.5rem;
  }
  .search-field--lg {
    --search-field-h: 2.75rem;
    padding-inline: 0.875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .search-field, .search-field__icon, .search-field__clear {
      transition: none;
    }
    .search-field__spinner {
      animation-duration: 1.2s;
    }
  }
}
@layer utilities {
  .search-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .search-bar > .search-field {
    flex: 1 1 16rem;
    min-width: 12rem;
  }
  .search-bar__scope {
    flex-shrink: 0;
  }
  .search-bar__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .search-bar--attached {
    gap: 0;
  }
  .search-bar--attached .search-bar__scope > .form-control, .search-bar--attached .search-bar__scope > select, .search-bar--attached .search-bar__scope > .combobox .combobox__control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .search-bar--attached > .search-field {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .search-bar--attached .search-bar__scope + .search-field {
    margin-left: -1px;
  }
  .search-bar--hero {
    margin-inline: auto;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 4);
    text-align: center;
    max-width: var(--search-bar-hero-max, 36rem);
  }
  .search-bar--hero > .search-field {
    flex: 1 1 auto;
  }
  .search-bar__hero-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .search-bar__hero-subtitle {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    color: var(--text-tertiary);
  }
  .search-bar__hero-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .search-bar__hero-row > .search-field {
    flex: 1 1 auto;
  }
  .search-bar__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--text-tertiary);
  }
  .search-bar__meta strong {
    color: var(--text-secondary);
    font-weight: 600;
  }
  @media (max-width: 640px) {
    .search-bar {
      gap: calc(var(--spacing) * 2);
    }
    .search-bar__actions {
      width: 100%;
    }
    .search-bar__actions > .btn-primary, .search-bar__actions > [data-search-submit] {
      flex: 1;
    }
  }
}
@layer utilities {
  .omnisearch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: var(--omnisearch-max, 28rem);
  }
  .omnisearch > .search-field {
    width: 100%;
  }
  .omnisearch--collapsible {
    width: auto;
  }
  .omnisearch__trigger {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .omnisearch__trigger:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
    color: var(--text-primary);
  }
  .omnisearch__trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .omnisearch--collapsible .omnisearch__field {
    display: none;
  }
  .omnisearch--collapsible.is-open {
    width: 100%;
  }
  .omnisearch--collapsible.is-open .omnisearch__trigger {
    display: none;
  }
  .omnisearch--collapsible.is-open .omnisearch__field {
    display: block;
    width: 100%;
  }
  .omnisearch__field {
    width: 100%;
  }
  .omnisearch__panel {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    top: calc(100% + 0.375rem);
    max-height: min(28rem, 60vh);
    overflow-y: auto;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: var(--shadow-lg);
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .omnisearch.is-open .omnisearch__panel, .omnisearch:focus-within .omnisearch__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .omnisearch__panel:empty {
    display: none;
  }
  @media (max-width: 640px) {
    .omnisearch, .omnisearch--collapsible.is-open {
      max-width: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .omnisearch__trigger, .omnisearch__panel {
      transition: none;
    }
  }
}
@layer utilities {
  .search-scopes {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: 0.25rem;
  }
  .search-scope {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    white-space: nowrap;
    padding: 0.5rem 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--text-tertiary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-scope:hover {
    color: var(--text-secondary);
  }
  .search-scope:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 0.25rem);
  }
  .search-scope.is-active, .search-scope[aria-selected="true"] {
    color: var(--text-primary);
  }
  .search-scope__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.375rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
    color: var(--text-tertiary);
  }
  .search-scope.is-active .search-scope__count {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .search-scopes--underline {
    gap: 1.25rem;
    box-shadow: inset 0 -1px 0 0 var(--border-secondary);
  }
  .search-scopes--underline .search-scope {
    padding-block: 0.75rem;
  }
  .search-scopes--underline .search-scope::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--spacing) * 0.5);
    background-color: transparent;
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-scopes--underline .search-scope.is-active::after, .search-scopes--underline .search-scope[aria-selected="true"]::after {
    background-color: var(--border-brand, var(--bg-brand-solid));
  }
  .search-scopes--segmented {
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .search-scopes--segmented .search-scope {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md, 0.375rem);
    font-weight: 500;
  }
  .search-scopes--segmented .search-scope.is-active, .search-scopes--segmented .search-scope[aria-selected="true"] {
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: var(--shadow-xs);
  }
  .search-scopes--segmented .search-scope.is-active .search-scope__count {
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
    color: var(--text-secondary);
  }
  .search-scopes--scroll {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .search-scopes--scroll::-webkit-scrollbar {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .search-scope, .search-scopes--underline .search-scope::after {
      transition: none;
    }
  }
}
@layer utilities {
  .autocomplete {
    position: relative;
  }
  .autocomplete__panel {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 20;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    top: calc(100% + 0.375rem);
    max-height: min(24rem, 60vh);
    overflow-y: auto;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    padding-block: 0.375rem;
    scroll-padding-block: 2.5rem;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .autocomplete.is-open .autocomplete__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .autocomplete__group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-bottom: var(--spacing);
  }
  .autocomplete__group + .autocomplete__group {
    border-top: 1px solid var(--border-secondary);
    padding-top: 0.25rem;
  }
  .autocomplete__group-label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0.375rem 0.875rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--text-tertiary);
  }
  .autocomplete__option {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    min-height: 2.5rem;
    margin-inline: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-primary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .autocomplete__option:hover, .autocomplete__option.is-active, .autocomplete__option[aria-selected="true"] {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .autocomplete__option:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .autocomplete__option-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem;
    color: var(--text-quaternary);
  }
  .autocomplete__option-avatar {
    flex-shrink: 0;
  }
  .autocomplete__option-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .autocomplete__option-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
  }
  .autocomplete__option-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: var(--text-tertiary);
  }
  .autocomplete__option-trail {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    color: var(--text-quaternary);
  }
  .autocomplete__match {
    background-color: transparent;
    color: var(--text-search-match, var(--text-icon-brand, var(--text-primary)));
    font-weight: 700;
  }
  .autocomplete__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    margin-top: 0.25rem;
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--border-secondary);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .autocomplete__see-all {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-icon-brand, var(--text-primary));
  }
  .autocomplete__see-all:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .autocomplete__skeleton {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    min-height: 2.5rem;
    margin-inline: 0.375rem;
    padding: 0.375rem 0.625rem;
  }
  .autocomplete__skeleton-dot, .autocomplete__skeleton-line {
    background-color: var(--bg-skeleton, var(--bg-secondary-alt, var(--bg-tertiary)));
    border-radius: var(--radius-sm, 0.25rem);
    animation: autocomplete-pulse 1.4s var(--ease-default, ease) infinite;
  }
  .autocomplete__skeleton-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full, 9999px);
  }
  .autocomplete__skeleton-line {
    height: 0.625rem;
    flex: 1;
  }
  @keyframes autocomplete-pulse {
    0%,100% {
      opacity: 1;
    }
    50% {
      opacity: 0.45;
    }
  }
  .autocomplete__empty, .autocomplete__error {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .autocomplete__empty i, .autocomplete__error i {
    font-size: 1.25rem;
    color: var(--text-quaternary);
  }
  .autocomplete__error i {
    color: var(--text-danger);
  }
  @media (prefers-reduced-motion: reduce) {
    .autocomplete__panel {
      transition: none;
    }
    .autocomplete__skeleton-dot, .autocomplete__skeleton-line {
      animation-duration: 2.4s;
    }
  }
}
@layer utilities {
  .search-suggestions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.25rem;
  }
  .search-suggestions__section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-bottom: var(--spacing);
  }
  .search-suggestions__section + .search-suggestions__section {
    border-top: 1px solid var(--border-secondary);
    padding-top: 0.375rem;
  }
  .search-suggestions__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding: 0.375rem 0.875rem 0.25rem;
  }
  .search-suggestions__heading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--text-tertiary);
  }
  .search-suggestions__action {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-size: 0.75rem;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-suggestions__action:hover {
    color: var(--text-secondary);
  }
  .search-suggestions__action:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .search-suggestions__chips {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
    padding: 0.125rem 0.875rem 0.5rem;
  }
  .search-suggestions__chip {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-suggestions__chip:hover {
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
  }
  .search-suggestions__chip:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .search-suggestions__chip i {
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  .search-suggestions__item {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    min-height: 2.5rem;
    margin-inline: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-primary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-suggestions__item:hover, .search-suggestions__item.is-active, .search-suggestions__item[aria-selected="true"] {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .search-suggestions__item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .search-suggestions__item-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem;
    color: var(--text-quaternary);
  }
  .search-suggestions__item-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
  }
  .search-suggestions__item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
  }
  .search-suggestions__item-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: var(--text-tertiary);
  }
  .search-suggestions__item-trail {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .search-suggestions__chip, .search-suggestions__item, .search-suggestions__action {
      transition: none;
    }
  }
}
@layer utilities {
  .search-tokens {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    min-height: 2.5rem;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-search-field, var(--bg-input, var(--bg-primary)));
    box-shadow: inset 0 0 0 1px var(--border-search, var(--border-input, var(--border-primary))), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-tokens:hover {
    box-shadow: inset 0 0 0 1px var(--border-search-hover, var(--border-input-hover, var(--border-primary))), var(--shadow-xs);
  }
  .search-tokens:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
  }
  .search-tokens.is-invalid, .search-tokens.is-invalid:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-search-error, var(--border-error, var(--text-danger))), var(--shadow-xs);
  }
  .search-tokens__icon {
    pointer-events: none;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1rem;
    color: var(--text-quaternary);
  }
  .search-tokens__token {
    display: inline-flex;
    max-width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
    height: 1.625rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius-md, 0.375rem);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .search-tokens__token-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-tokens__token--facet {
    gap: 0;
    padding-inline: 0;
    overflow: hidden;
  }
  .search-tokens__seg {
    display: inline-flex;
    align-items: center;
    height: 1.625rem;
    padding-inline: 0.5rem;
  }
  .search-tokens__seg--key {
    color: var(--text-tertiary);
  }
  .search-tokens__seg--op {
    color: var(--text-quaternary);
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
    font-style: italic;
  }
  .search-tokens__seg--value {
    color: var(--text-primary);
    font-weight: 600;
  }
  .search-tokens__remove {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1rem;
    height: 1rem;
    margin-left: 0.125rem;
    font-size: 0.75rem;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-tokens__remove:hover {
    color: var(--text-danger);
  }
  .search-tokens__remove:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .search-tokens__input {
    min-width: 0;
    flex: 1;
    appearance: none;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    min-width: 6rem;
    height: 1.625rem;
    padding: 0;
    font-size: 0.9375rem;
    color: var(--text-primary);
  }
  .search-tokens__input::placeholder {
    color: var(--text-placeholder, var(--text-tertiary));
    opacity: 1;
  }
  .search-tokens__clear {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-quaternary);
  }
  .search-tokens__clear:hover {
    color: var(--text-secondary);
  }
  .search-tokens__clear:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .search-tokens, .search-tokens__remove {
      transition: none;
    }
  }
}
@layer utilities {
  .search-mark {
    background-color: transparent;
    color: var(--text-search-match, var(--text-icon-brand, var(--text-primary)));
    font-weight: 700;
    border-radius: var(--radius-xs, 0.125rem);
  }
  .search-mark--fill {
    background-color: var(--bg-search-match, var(--bg-brand-secondary, var(--bg-secondary-alt)));
    color: var(--text-search-match-on-fill, var(--text-primary));
    padding-inline: 0.125rem;
  }
  .search-mark--neutral {
    color: var(--text-primary);
    background-color: transparent;
    font-weight: 700;
  }
  .search-snippet {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-tertiary);
  }
  .search-snippet--truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-snippet--clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--search-snippet-lines, 2);
    line-clamp: var(--search-snippet-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .search-snippet__ellipsis {
    color: var(--text-quaternary);
    margin-inline: 0.125rem;
  }
}
@layer utilities {
  .recent-searches {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.5rem;
  }
  .recent-searches__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .recent-searches__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .recent-searches__clear {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-size: 0.8125rem;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .recent-searches__clear:hover {
    color: var(--text-secondary);
  }
  .recent-searches__clear:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .recent-searches__chips {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .recent-searches__chip {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding: 0.3125rem 0.375rem 0.3125rem 0.625rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .recent-searches__chip:hover {
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
  }
  .recent-searches__chip > i {
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  .recent-searches__chip-remove {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1rem;
    height: 1rem;
    font-size: 0.6875rem;
    color: var(--text-quaternary);
  }
  .recent-searches__chip-remove:hover {
    color: var(--text-danger);
  }
  .recent-searches__chip-remove:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .recent-searches__list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .recent-searches__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-primary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .recent-searches__row:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .recent-searches__row:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .recent-searches__row-icon {
    flex-shrink: 0;
    width: 1rem;
    color: var(--text-quaternary);
  }
  .recent-searches__row-query {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
  }
  .recent-searches__row-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .recent-searches__row-remove {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    opacity: 0%;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-quaternary);
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .recent-searches__row:hover .recent-searches__row-remove, .recent-searches__row-remove:focus-visible {
    opacity: 1;
  }
  .recent-searches__row-remove:hover {
    color: var(--text-danger);
  }
  .recent-searches__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 0.75rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .recent-searches__chip, .recent-searches__row, .recent-searches__row-remove, .recent-searches__clear {
      transition: none;
    }
    .recent-searches__row-remove {
      opacity: 1;
    }
  }
}
@layer utilities {
  .saved-searches {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 1rem;
  }
  .saved-searches__group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.25rem;
  }
  .saved-searches__group-label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0 0.25rem 0.25rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .saved-searches__item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .saved-searches__item:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary);
  }
  .saved-searches__item:focus-within {
    box-shadow: inset 0 0 0 2px var(--border-focus);
  }
  .saved-searches__star {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.9375rem;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .saved-searches__star:hover {
    color: var(--text-warning);
  }
  .saved-searches__star:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .saved-searches__star.is-starred {
    color: var(--text-warning);
  }
  .saved-searches__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    cursor: pointer;
    flex-direction: column;
  }
  .saved-searches__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .saved-searches__query {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .saved-searches__query code {
    padding: 0 0.25rem;
    border-radius: var(--radius-xs, 0.125rem);
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
    color: var(--text-secondary);
    font-size: 0.75rem;
  }
  .saved-searches__count {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 2.5rem;
    height: 1.5rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-tertiary);
  }
  .saved-searches__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
  }
  .saved-searches__shared {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .saved-searches__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .saved-searches__empty i {
    font-size: 1.5rem;
    color: var(--text-quaternary);
  }
  @media (prefers-reduced-motion: reduce) {
    .saved-searches__item, .saved-searches__star {
      transition: none;
    }
  }
}
@layer utilities {
  .trending {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .trending__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .trending__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-primary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .trending__row:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .trending__row:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .trending__rank {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.8125rem;
    color: var(--text-quaternary);
  }
  .trending__query {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .trending__volume {
    flex-shrink: 0;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }
  .trending__delta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: 0.75rem;
  }
  .trending__delta--up {
    color: var(--text-success);
  }
  .trending__delta--down {
    color: var(--text-danger);
  }
  .trending__delta--flat {
    color: var(--text-quaternary);
  }
  .trending__correction {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  .trending__correction-term {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-icon-brand, var(--text-primary));
  }
  .trending__correction-term:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .trending__row {
      transition: none;
    }
  }
}
@layer utilities {
  .discovery-launcher {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    max-width: var(--discovery-max, 56rem);
    gap: 2rem;
    padding-block: 1rem;
  }
  .discovery-launcher__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
  }
  .discovery-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    text-align: left;
    padding: 1rem;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease), transform var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .discovery-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-sm);
  }
  .discovery-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .discovery-card__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-icon-brand, var(--text-secondary));
    font-size: 1rem;
  }
  .discovery-card__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
  }
  .discovery-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .discovery-card__meta {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .discovery-launcher__section-title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  .discovery-launcher__rails {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .discovery-launcher__rails {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .discovery-card {
      transition: none;
    }
  }
}
@layer utilities {
  .search-summary {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
  }
  .search-summary__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .search-summary__count {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    font-size: 0.9375rem;
    color: var(--text-tertiary);
  }
  .search-summary__count strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .search-summary__query {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
  }
  .search-summary__timing {
    flex-shrink: 0;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .search-summary__controls {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .search-summary__filters {
    width: 100%;
    min-width: 0;
  }
  .search-summary__view {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .search-summary__view-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md, 0.375rem);
    color: var(--text-quaternary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .search-summary__view-btn:hover {
    color: var(--text-secondary);
  }
  .search-summary__view-btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .search-summary__view-btn.is-active, .search-summary__view-btn[aria-pressed="true"] {
    background-color: var(--bg-surface, var(--bg-primary));
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  @media (max-width: 640px) {
    .search-summary__controls {
      width: 100%;
      justify-content: space-between;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .search-summary__view-btn {
      transition: none;
    }
  }
}
@layer utilities {
  .results-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.25rem;
  }
  .results-list--divided {
    gap: 0;
  }
  .results-list--divided .result-item + .result-item {
    border-top: 1px solid var(--border-secondary);
    border-radius: 0;
  }
  .result-item {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    min-width: 0;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    text-align: left;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-primary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .result-item:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .result-item:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .result-item.is-selected {
    background-color: var(--bg-secondary, var(--bg-tertiary));
  }
  .result-item.is-selected::before {
    content: "";
    position: absolute;
    top: calc(var(--spacing) * 2);
    bottom: calc(var(--spacing) * 2);
    left: 0;
    width: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-full);
    background-color: var(--bg-brand-solid);
  }
  .result-item {
    position: relative;
  }
  .result-item__media {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-quaternary);
    font-size: 1rem;
  }
  .result-item__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
  }
  .result-item__title-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .result-item__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .result-item__snippet {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .result-item__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    row-gap: calc(var(--spacing) * 0.5);
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .result-item__meta-sep {
    color: var(--text-quaternary);
  }
  .result-item__trail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing);
  }
  .result-item__action {
    opacity: 0%;
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .result-item:hover .result-item__action, .result-item:focus-within .result-item__action {
    opacity: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .result-item, .result-item__action {
      transition: none;
    }
    .result-item__action {
      opacity: 100%;
    }
  }
}
@layer utilities {
  .results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.875rem;
  }
  .results-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }
  .result-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    cursor: pointer;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease), transform var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .result-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-md);
  }
  .result-card:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .result-card.is-selected {
    box-shadow: inset 0 0 0 2px var(--border-brand, var(--bg-brand-solid));
  }
  .result-card__media {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-quaternary);
    font-size: 1.5rem;
  }
  .result-card__media img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .result-card__badge {
    position: absolute;
    top: calc(var(--spacing) * 2);
    left: calc(var(--spacing) * 2);
  }
  .result-card__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem;
  }
  .result-card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .result-card__snippet {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .result-card__footer {
    margin-top: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-top: var(--spacing);
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  @media (prefers-reduced-motion: reduce) {
    .result-card {
      transition: none;
    }
  }
}
@layer utilities {
  .results-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
  }
  .results-table thead th {
    text-align: left;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    border-bottom: 1px solid var(--border-secondary);
  }
  .results-table thead th:first-child {
    border-top-left-radius: var(--radius-lg, 0.5rem);
  }
  .results-table thead th:last-child {
    border-top-right-radius: var(--radius-lg, 0.5rem);
  }
  .results-table__sort {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    font-size: 0.75rem;
  }
  .results-table__sort:hover {
    color: var(--text-secondary);
  }
  .results-table__sort:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .results-table__sort-icon {
    color: var(--text-quaternary);
    font-size: 0.6875rem;
  }
  .results-table__sort[aria-sort="ascending"] .results-table__sort-icon, .results-table__sort[aria-sort="descending"] .results-table__sort-icon {
    color: var(--text-icon-brand, var(--text-primary));
  }
  .results-table tbody td {
    padding: 0.625rem 0.875rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-secondary);
    vertical-align: middle;
  }
  .results-table tbody tr {
    cursor: pointer;
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .results-table tbody tr:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .results-table tbody tr:focus-within {
    background-color: var(--bg-secondary, var(--bg-tertiary));
  }
  .results-table tbody tr.is-selected {
    background-color: var(--bg-secondary, var(--bg-tertiary));
  }
  .results-table__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .results-table__title-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md, 0.375rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-quaternary);
    font-size: 0.8125rem;
  }
  .results-table__title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
  .results-table__type {
    white-space: nowrap;
  }
  .results-table__muted {
    color: var(--text-tertiary);
  }
  .results-table__num {
    text-align: right;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .results-table__action {
    text-align: right;
  }
  .results-table__action .btn-secondary {
    opacity: 0%;
    transition: opacity var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .results-table tbody tr:hover .results-table__action .btn-secondary, .results-table tbody tr:focus-within .results-table__action .btn-secondary {
    opacity: 100%;
  }
  .results-table-wrap {
    width: 100%;
    overflow-x: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .results-table tbody tr, .results-table__action .btn-secondary {
      transition: none;
    }
    .results-table__action .btn-secondary {
      opacity: 100%;
    }
  }
}
@layer utilities {
  .result-groups {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 1.75rem;
  }
  .result-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.5rem;
  }
  .result-group__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
  }
  .result-group__heading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9375rem;
    color: var(--text-primary);
  }
  .result-group__heading-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-md, 0.375rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-icon-brand, var(--text-secondary));
    font-size: 0.8125rem;
  }
  .result-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 1.5rem;
    height: 1.25rem;
    padding-inline: 0.375rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    background-color: var(--bg-secondary-alt, var(--bg-tertiary));
    color: var(--text-tertiary);
  }
  .result-group__see-all {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.8125rem;
    color: var(--text-icon-brand, var(--text-primary));
  }
  .result-group__see-all:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .result-group__body--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
  }
  .result-group + .result-group {
    border-top: 1px solid var(--border-secondary);
    padding-top: 1.5rem;
  }
}
@layer utilities {
  .result-preview {
    display: grid;
    min-height: 0;
    width: 100%;
    grid-template-columns: minmax(18rem, 24rem) 1fr;
    gap: 1rem;
  }
  .result-preview__list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex-direction: column;
    overflow-y: auto;
    gap: 0.125rem;
    padding-right: 0.25rem;
  }
  .result-preview__pane {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    overflow-y: auto;
    border-radius: var(--radius-xl, 0.75rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .result-preview__pane-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: 1rem 1.25rem;
    background-color: var(--bg-surface, var(--bg-primary));
    border-bottom: 1px solid var(--border-secondary);
  }
  .result-preview__pane-media {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-quaternary);
    font-size: 1.125rem;
  }
  .result-preview__pane-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .result-preview__pane-subtitle {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .result-preview__pane-body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding: 1.25rem;
  }
  .result-preview__pane-actions {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .result-preview__empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    padding: 2rem;
    color: var(--text-tertiary);
  }
  .result-preview__empty i {
    font-size: 1.75rem;
    color: var(--text-quaternary);
  }
  @media (max-width: 900px) {
    .result-preview {
      grid-template-columns: 1fr;
    }
    .result-preview__pane {
      position: fixed;
      inset: 0;
      z-index: var(--z-tray, 60);
      border-radius: 0;
      transform: translateX(100%);
      transition: transform var(--duration-normal, 200ms) var(--ease-out, ease);
    }
    .result-preview.is-preview-open .result-preview__pane {
      transform: translateX(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .result-preview__pane {
      transition: none;
    }
  }
}
@layer utilities {
  .facet-group {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
  }
  .facet-group + .facet-group {
    border-top: 1px solid var(--border-secondary);
  }
  .facet-group__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding: 0.75rem 0.25rem 0.75rem 0;
    color: var(--text-primary);
  }
  .facet-group__header:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .facet-group__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
  }
  .facet-group__applied {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.6875rem;
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
  }
  .facet-group__chevron {
    flex-shrink: 0;
    color: var(--text-quaternary);
    font-size: 0.75rem;
    transition: transform var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .facet-group[aria-expanded="false"] .facet-group__chevron, .facet-group.is-collapsed .facet-group__chevron {
    transform: rotate(-90deg);
  }
  .facet-group__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    padding-bottom: 0.75rem;
    gap: 0.125rem;
  }
  .facet-group.is-collapsed .facet-group__body {
    display: none;
  }
  .facet-group__search {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .facet-option {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding: 0.3125rem 0.375rem;
    border-radius: var(--radius-md, 0.375rem);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .facet-option:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .facet-option:focus-within {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .facet-option__label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .facet-option input:checked ~ .facet-option__label, .facet-option.is-checked .facet-option__label {
    color: var(--text-primary);
    font-weight: 500;
  }
  .facet-option__count {
    flex-shrink: 0;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .facet-option__swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full, 9999px);
  }
  .facet-group__more {
    margin-top: var(--spacing);
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    align-self: flex-start;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    color: var(--text-icon-brand, var(--text-primary));
  }
  .facet-group__more:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .facet-option.is-overflow {
    display: none;
  }
  .facet-group.is-showing-all .facet-option.is-overflow {
    display: flex;
  }
  .facet-group__empty {
    padding: 0.5rem 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  @media (prefers-reduced-motion: reduce) {
    .facet-group__chevron, .facet-option {
      transition: none;
    }
  }
}
@layer utilities {
  .facet-rail {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex-direction: column;
    width: var(--facet-rail-w, 17rem);
    gap: 0.25rem;
  }
  .facet-rail__header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-bottom: 0.5rem;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .facet-rail__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 0.9375rem;
    color: var(--text-primary);
  }
  .facet-rail__clear {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-size: 0.8125rem;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .facet-rail__clear:hover {
    color: var(--text-secondary);
  }
  .facet-rail__clear:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .facet-rail__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    flex-direction: column;
    overflow-y: auto;
  }
  .facet-range {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding: 0.25rem 0 0.75rem;
  }
  .facet-range__inputs {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .facet-range__inputs .form-control {
    flex: 1;
  }
  .facet-range__dash {
    color: var(--text-quaternary);
  }
  .facet-rating__row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 0.25rem 0.375rem;
    border-radius: var(--radius-md, 0.375rem);
  }
  .facet-rating__row:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .facet-rating__stars {
    color: var(--text-warning);
    font-size: 0.8125rem;
  }
  .facet-rating__stars .fa-regular {
    color: var(--text-quaternary);
  }
  .facet-rating__label {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .facet-rating__count {
    flex-shrink: 0;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: 0.75rem;
    color: var(--text-quaternary);
  }
  .facet-rail__footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-top: 0.5rem;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-secondary);
  }
  @media (max-width: 900px) {
    .facet-rail--sheet {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(20rem, 90vw);
      z-index: var(--z-tray, 60);
      padding: 1rem;
      background-color: var(--bg-surface, var(--bg-primary));
      box-shadow: var(--shadow-xl);
      transform: translateX(100%);
      transition: transform var(--duration-normal, 200ms) var(--ease-out, ease);
    }
    .facet-rail--sheet.is-open {
      transform: translateX(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .facet-rail__clear, .facet-rail--sheet {
      transition: none;
    }
  }
}
@layer utilities {
  .active-filters {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .active-filters__label {
    flex-shrink: 0;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .active-filter {
    display: inline-flex;
    max-width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    height: 1.75rem;
    padding: 0 0.25rem 0 0.625rem;
    border-radius: var(--radius-md, 0.375rem);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .active-filter__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .active-filter__label strong {
    color: var(--text-primary);
    font-weight: 600;
  }
  .active-filter__key {
    color: var(--text-tertiary);
  }
  .active-filter--brand {
    background-color: var(--bg-secondary, var(--bg-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-brand, var(--bg-brand-solid));
  }
  .active-filter__remove {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease), background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .active-filter__remove:hover {
    color: var(--text-danger);
    background-color: var(--bg-primary-hover, var(--bg-secondary-alt));
  }
  .active-filter__remove:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
  .active-filters__clear {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    padding: 0 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-quaternary);
    transition: color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .active-filters__clear:hover {
    color: var(--text-danger);
  }
  .active-filters__clear:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .active-filter__remove, .active-filters__clear {
      transition: none;
    }
  }
}
@layer utilities {
  .sort-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .sort-control__trigger {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    height: 2.25rem;
    padding-inline: 0.75rem;
    border-radius: var(--radius-lg, 0.5rem);
    font-size: 0.875rem;
    color: var(--text-secondary);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .sort-control__trigger:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs);
  }
  .sort-control__trigger:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .sort-control__trigger-label {
    color: var(--text-quaternary);
  }
  .sort-control__trigger-value {
    font-weight: 600;
    color: var(--text-primary);
  }
  .sort-control__trigger-caret {
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  .sort-control__menu {
    position: absolute;
    right: 0;
    z-index: 20;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    top: calc(100% + 0.375rem);
    min-width: 13rem;
    padding: 0.375rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-surface, var(--bg-primary));
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .sort-control.is-open .sort-control__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .sort-control__option {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    text-align: left;
    padding: 0.4375rem 0.5rem;
    border-radius: var(--radius-md, 0.375rem);
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .sort-control__option:hover {
    background-color: var(--bg-primary-hover, var(--bg-secondary));
  }
  .sort-control__option:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .sort-control__option-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sort-control__option-dir {
    flex-shrink: 0;
    color: var(--text-quaternary);
    font-size: 0.75rem;
  }
  .sort-control__option.is-active {
    color: var(--text-primary);
    font-weight: 600;
  }
  .sort-control__option.is-active .sort-control__option-dir {
    color: var(--text-icon-brand, var(--text-primary));
  }
  .sort-control__option-check {
    flex-shrink: 0;
    color: var(--text-icon-brand, var(--text-primary));
    font-size: 0.75rem;
    width: 1rem;
  }
  .sort-control__option:not(.is-active) .sort-control__option-check {
    visibility: hidden;
  }
  .sort-dir {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .sort-dir__btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md, 0.375rem);
    color: var(--text-quaternary);
    transition: background-color var(--duration-fast, 100ms) var(--ease-default, ease), color var(--duration-fast, 100ms) var(--ease-default, ease);
  }
  .sort-dir__btn:hover {
    color: var(--text-secondary);
  }
  .sort-dir__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .sort-dir__btn.is-active, .sort-dir__btn[aria-pressed="true"] {
    background-color: var(--bg-surface, var(--bg-primary));
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
  }
  @media (prefers-reduced-motion: reduce) {
    .sort-control__trigger, .sort-control__menu, .sort-control__option, .sort-dir__btn {
      transition: none;
    }
  }
}
@layer utilities {
  .no-results {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 32rem;
    padding: 3rem 1.5rem;
    gap: 0.75rem;
  }
  .no-results__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    color: var(--text-quaternary);
    font-size: 1.25rem;
  }
  .no-results__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  .no-results__title .no-results__query {
    color: var(--text-primary);
  }
  .no-results__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-tertiary);
  }
  .no-results__correction {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 0.9375rem;
    color: var(--text-secondary);
  }
  .no-results__correction-term {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-icon-brand, var(--text-primary));
  }
  .no-results__correction-term:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  .no-results__filters-note {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    margin-top: 0.25rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--bg-secondary, var(--bg-tertiary));
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }
  .no-results__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    margin-top: 0.5rem;
  }
  .no-results__tips {
    margin-inline: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-top: 0.75rem;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .no-results__tip {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .no-results__tip i {
    color: var(--text-quaternary);
    margin-top: 0.125rem;
  }
  .no-results__suggestions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    margin-top: 0.5rem;
  }
}
@layer utilities {
  .search-loading {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.875rem;
    color: var(--text-tertiary);
  }
  .search-loading__spinner {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-full, 9999px);
    border: 2px solid var(--border-secondary);
    border-top-color: var(--text-icon-brand, var(--text-tertiary));
    animation: search-loading-spin 0.6s linear infinite;
  }
  @keyframes search-loading-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .result-skeleton {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: 0.75rem 0.875rem;
  }
  .result-skeleton__media {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg, 0.5rem);
  }
  .result-skeleton__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
  }
  .result-skeleton__line {
    height: 0.75rem;
    border-radius: var(--radius-sm, 0.25rem);
  }
  .result-skeleton__line--title {
    width: 40%;
    height: 0.875rem;
  }
  .result-skeleton__line--wide {
    width: 92%;
  }
  .result-skeleton__line--mid {
    width: 64%;
  }
  .result-skeleton__media, .result-skeleton__line {
    background-color: var(--bg-skeleton, var(--bg-secondary-alt, var(--bg-tertiary)));
    position: relative;
    overflow: hidden;
  }
  .result-skeleton__media::after, .result-skeleton__line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--bg-skeleton-shine, var(--bg-primary)), transparent);
    opacity: 0.5;
    animation: search-skeleton-shimmer 1.4s var(--ease-default, ease) infinite;
  }
  @keyframes search-skeleton-shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  .result-skeleton-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl, 0.75rem);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
  }
  .result-skeleton-card__media {
    aspect-ratio: 16 / 9;
    background-color: var(--bg-skeleton, var(--bg-secondary-alt));
  }
  .result-skeleton-card__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem;
  }
  .result-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.875rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .search-loading__spinner {
      animation-duration: 1.2s;
    }
    .result-skeleton__media::after, .result-skeleton__line::after {
      animation: none;
    }
  }
}
@layer utilities {
  .search-page {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-height: 0;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
  }
  .search-page__top {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0.75rem;
  }
  .search-page__body {
    display: grid;
    min-height: 0;
    grid-template-columns: var(--facet-rail-w, 17rem) 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .search-page__rail {
    min-width: 0;
  }
  .search-page__main {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
  }
  .search-page__results {
    min-width: 0;
  }
  .search-page__pager {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .search-page__pager-meta {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
  }
  .search-page__filters-btn {
    display: none;
  }
  @media (max-width: 900px) {
    .search-page__body {
      grid-template-columns: 1fr;
    }
    .search-page__rail {
      display: none;
    }
    .search-page__filters-btn {
      display: inline-flex;
    }
  }
  .search-page--grouped .search-page__body {
    grid-template-columns: 1fr;
  }
  .search-page--grouped .search-page__rail {
    display: none;
  }
}
@layer utilities {
  .integration-logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .integration-logo i {
    font-size: 18px;
  }
  .integration-logo img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  .integration-logo--sm {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
  }
  .integration-logo--lg {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
  }
  .integration-logo--lg i {
    font-size: 24px;
  }
  .integration-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .integration-card {
    position: relative;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
    transition: box-shadow var(--duration-fast, 100ms) var(--ease-out, ease), transform var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .integration-card:hover {
    box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-sm);
  }
  .integration-card__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .integration-card__title-block {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }
  .integration-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    color: var(--text-primary);
  }
  .integration-card__category {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .integration-card__desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .integration-card__footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 4px;
  }
  .integration-card__meta {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .integration-card.is-connected {
    box-shadow: inset 0 0 0 1px var(--border-focus), var(--shadow-xs);
  }
  .integration-card__check {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    font-size: 11px;
  }
  .oauth-flow {
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    overflow: hidden;
  }
  .oauth-flow__header {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 16px;
    border-bottom: 1px solid var(--border-divider);
  }
  .oauth-flow__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 2px;
  }
  .oauth-flow__title strong {
    font-size: 14px;
    color: var(--text-primary);
  }
  .oauth-flow__title span {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .oauth-flow__body {
    padding: 16px;
  }
  .oauth-steps {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }
  .oauth-step {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 13px;
    color: var(--text-tertiary);
  }
  .oauth-step__dot {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 11px;
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .oauth-step.is-active {
    color: var(--text-primary);
    font-weight: 600;
  }
  .oauth-step.is-active .oauth-step__dot {
    background-color: var(--bg-brand-solid);
    color: var(--text-on-brand);
    box-shadow: none;
  }
  .oauth-step.is-done .oauth-step__dot {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
    box-shadow: inset 0 0 0 1px var(--border-success);
  }
  .oauth-step__sep {
    flex: 1;
    height: 1px;
    background-color: var(--border-divider);
  }
  .oauth-scopes {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 8px;
  }
  .oauth-scope {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
  }
  .oauth-scope i {
    color: var(--text-tertiary);
    margin-top: 2px;
  }
  .oauth-scope__text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 1px;
  }
  .oauth-scope__text strong {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
  }
  .oauth-scope__text span {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .api-key-list {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    overflow: hidden;
  }
  .api-key-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 12px 16px;
    background-color: var(--bg-card);
  }
  .api-key-row + .api-key-row {
    border-top: 1px solid var(--border-divider);
  }
  .api-key-row__info {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }
  .api-key-row__label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .api-key-row__meta {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .api-key-secret {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .api-key-row__actions {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: var(--spacing);
    margin-left: auto;
  }
  .webhook-config {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 16px;
  }
  .webhook-field {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 6px;
  }
  .webhook-field__label {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .webhook-field__hint {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .webhook-events {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .webhook-event {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    font-size: 13px;
    color: var(--text-secondary);
  }
  .webhook-deliveries {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    overflow: hidden;
  }
  .webhook-delivery {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: 10px 14px;
    background-color: var(--bg-card);
    font-size: 13px;
  }
  .webhook-delivery + .webhook-delivery {
    border-top: 1px solid var(--border-divider);
  }
  .webhook-delivery__code {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: var(--radius-sm, var(--radius-md));
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .webhook-delivery.is-ok .webhook-delivery__code {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .webhook-delivery.is-error .webhook-delivery__code {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .webhook-delivery__event {
    color: var(--text-primary);
    font-weight: 500;
  }
  .webhook-delivery__time {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: 12px;
  }
  .webhook-result {
    font-size: 13px;
    color: var(--text-success);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .connector-settings {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 4px;
  }
  .connector-setting {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    padding: 14px 0;
    border-top: 1px solid var(--border-divider);
  }
  .connector-setting:first-child {
    border-top: 0;
  }
  .connector-setting__text {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }
  .connector-setting__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .connector-setting__desc {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
  }
  .connector-setting__control {
    margin-left: auto;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
  }
  .connector-toggle {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    width: 40px;
    height: 24px;
    padding: 0;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
    transition: background-color var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .connector-toggle::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-fast, 100ms) var(--ease-out, ease);
  }
  .connector-toggle.is-on {
    background-color: var(--bg-brand-solid);
    box-shadow: none;
  }
  .connector-toggle.is-on::after {
    transform: translateX(16px);
  }
  .connector-toggle:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .connector-mapping {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 8px;
  }
  .connector-map-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .connector-map-row__field {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .connector-map-row__arrow {
    color: var(--text-quaternary);
    font-size: 12px;
    flex-shrink: 0;
  }
  .sync-status {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .sync-status__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .sync-status__title {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 1px;
  }
  .sync-status__title strong {
    font-size: 14px;
    color: var(--text-primary);
  }
  .sync-status__title span {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .sync-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    margin-left: auto;
  }
  .sync-status.is-syncing .sync-pill i {
    animation: sync-spin 0.9s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .sync-status.is-syncing .sync-pill i {
      animation: none;
    }
  }
  @keyframes sync-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .sync-status__bar {
    height: 6px;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    overflow: hidden;
  }
  .sync-status__fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--bg-brand-solid);
    transition: width var(--duration-normal, 200ms) var(--ease-out, ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .sync-status__fill {
      transition: none;
    }
  }
  .sync-counts {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .sync-count {
    display: inline-flex;
    align-items: baseline;
    gap: calc(var(--spacing) * 1.5);
    font-size: 13px;
    color: var(--text-tertiary);
  }
  .sync-count strong {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 600;
  }
  .sync-count.is-error strong {
    color: var(--text-danger);
  }
  .health-card {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .health-card__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .health-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--text-tertiary);
  }
  .health-dot.is-operational {
    background-color: var(--text-success);
  }
  .health-dot.is-degraded {
    background-color: var(--text-warning);
  }
  .health-dot.is-down {
    background-color: var(--text-danger);
  }
  .health-metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .health-metric {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
  }
  .health-metric__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
  }
  .health-metric__label {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .health-metric.is-warning .health-metric__value {
    color: var(--text-warning);
  }
  .health-metric.is-error .health-metric__value {
    color: var(--text-danger);
  }
  .health-incidents {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 8px;
  }
  .health-incident {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
  }
  .health-incident__dot {
    margin-top: 5px;
  }
  .health-incident__body {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex-direction: column;
    gap: 1px;
  }
  .health-incident__msg {
    font-size: 13px;
    color: var(--text-primary);
  }
  .health-incident__time {
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .connection-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: inset 0 0 0 1px var(--border-divider);
  }
  .connection-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--text-tertiary);
  }
  .connection-badge.is-connected {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
    box-shadow: none;
  }
  .connection-badge.is-connected .connection-badge__dot {
    background-color: var(--text-success);
  }
  .connection-badge.is-error {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
    box-shadow: none;
  }
  .connection-badge.is-error .connection-badge__dot {
    background-color: var(--text-danger);
  }
  .connection-badge.is-beta {
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
    box-shadow: none;
  }
  .connection-badge--sm {
    font-size: 11px;
    padding: 1px 6px;
    gap: 0.25rem;
  }
  .connection-badge--sm .connection-badge__dot {
    width: 5px;
    height: 5px;
  }
  .connection-badge--lg {
    font-size: 13px;
    padding: 3px 11px;
    gap: 0.5rem;
  }
  .connection-badge--lg .connection-badge__dot {
    width: 7px;
    height: 7px;
  }
  .connect-btn.is-connecting i {
    animation: sync-spin 0.9s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .connect-btn.is-connecting i {
      animation: none;
    }
  }
  .uptime-timeline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-end;
    gap: 2px;
  }
  .uptime-seg {
    flex: 1;
    height: 28px;
    border-radius: 2px;
    background-color: var(--text-success);
  }
  .uptime-seg.is-partial {
    background-color: var(--text-warning);
  }
  .uptime-seg.is-down {
    background-color: var(--text-danger);
  }
  .uptime-seg.is-none {
    background-color: var(--bg-tertiary);
  }
  .uptime-legend {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 12px;
    color: var(--text-tertiary);
  }
  .rate-meter__head {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
  }
  .rate-meter__label {
    color: var(--text-secondary);
  }
  .rate-meter__value {
    color: var(--text-primary);
    font-weight: 600;
  }
  .rate-meter__track {
    height: 8px;
    border-radius: 999px;
    background-color: var(--bg-tertiary);
    overflow: hidden;
    margin-top: 6px;
  }
  .rate-meter__fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--bg-brand-solid);
  }
  .rate-meter.is-warning .rate-meter__fill {
    background-color: var(--text-warning);
  }
  .rate-meter.is-warning .rate-meter__value {
    color: var(--text-warning);
  }
  .rate-meter.is-error .rate-meter__fill {
    background-color: var(--text-danger);
  }
  .rate-meter.is-error .rate-meter__value {
    color: var(--text-danger);
  }
}
@layer utilities {
  .step {
    position: relative;
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: flex-start;
    gap: var(--space-step-content, 0.75rem);
    .stepper-horizontal & {
      flex: 1;
    }
    &.is-clickable {
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }
    &.is-disabled {
      cursor: not-allowed;
    }
    &.is-locked {
      cursor: not-allowed;
    }
    &[role='button']:not(.is-disabled):not(.is-current) {
      cursor: pointer;
    }
    &.is-clickable:not(.is-disabled):not(.is-current) {
      cursor: pointer;
    }
    &[role='button']:not(.is-disabled):not(.is-current)::before {
      content: '';
      position: absolute;
      top: var(--inset-step-hover-y, -0.25rem);
      right: var(--inset-step-hover-x, -0.5rem);
      bottom: var(--inset-step-hover-y, -0.25rem);
      left: var(--inset-step-hover-x, -0.5rem);
      background-color: transparent;
      border-radius: var(--radius-step-hover, 0.375rem);
      z-index: -1;
      transition: background-color 100ms ease;
      pointer-events: none;
    }
    &.is-clickable:not(.is-disabled):not(.is-current)::before {
      content: '';
      position: absolute;
      top: var(--inset-step-hover-y, -0.25rem);
      right: var(--inset-step-hover-x, -0.5rem);
      bottom: var(--inset-step-hover-y, -0.25rem);
      left: var(--inset-step-hover-x, -0.5rem);
      background-color: transparent;
      border-radius: var(--radius-step-hover, 0.375rem);
      z-index: -1;
      transition: background-color 100ms ease;
      pointer-events: none;
    }
    &[role='button']:not(.is-disabled):not(.is-current):hover::before {
      background-color: var(--bg-step-hover, var(--bg-primary-subtle));
    }
    &.is-clickable:not(.is-disabled):not(.is-current):hover::before {
      background-color: var(--bg-step-hover, var(--bg-primary-subtle));
    }
    &[role='button']:not(.is-disabled):not(.is-current):focus-visible {
      outline: none;
    }
    &[role='button']:not(.is-disabled):not(.is-current):focus-visible::before {
      background-color: var(--bg-step-hover, var(--bg-primary-subtle));
      box-shadow: 0 0 0 2px var(--border-step-focus, var(--border-focus));
    }
    &.is-clickable:not(.is-disabled):not(.is-current):focus-visible::before {
      background-color: var(--bg-step-hover, var(--bg-primary-subtle));
      box-shadow: 0 0 0 2px var(--border-step-focus, var(--border-focus));
    }
    &.is-in-progress .step-indicator::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 999px;
      background: var(--halo-step-in-progress);
      z-index: -1;
      animation: step-pulse 1.6s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-in-progress .step-indicator::after {
        animation: none;
      }
    }
    .stepper-horizontal &:last-child .step-connector {
      display: none;
    }
    .stepper-vertical & {
      padding-bottom: 0;
      min-height: var(--height-step-vertical, 4rem);
    }
    .stepper-vertical &:last-child {
      min-height: 0;
    }
    .stepper-vertical &:last-child .step-connector {
      display: none;
    }
    &.is-completed .step-connector-fill {
      width: 100%;
    }
    .stepper-vertical &.is-completed .step-connector-fill {
      height: 100%;
    }
    &.is-current .step-indicator, &.is-completed .step-indicator, &.is-error .step-indicator, &.is-warning .step-indicator, &.is-success .step-indicator {
      --step-ring-color: transparent;
    }
    &.is-skipped .step-indicator {
      --step-ring-color: var(--border-step-skipped);
    }
    &.is-current .step-indicator {
      background-color: var(--bg-step-current);
      border-color: var(--border-step-current);
      color: var(--text-step-current);
      transform: scale(1.04);
    }
    &.is-current .step-title {
      color: var(--text-step-title-current);
    }
    &.is-completed .step-indicator {
      background-color: var(--bg-step-completed);
      border-color: var(--border-step-completed);
      color: var(--text-step-completed);
    }
    &.is-disabled .step-indicator {
      background-color: var(--bg-step-disabled);
      border-color: var(--border-step-disabled);
      color: var(--text-step-disabled);
      box-shadow: none;
    }
    &.is-locked .step-indicator {
      background-color: var(--bg-step-disabled);
      border-color: var(--border-step-disabled);
      color: var(--text-step-disabled);
      box-shadow: none;
    }
    &.is-disabled .step-title {
      color: var(--text-step-disabled);
    }
    &.is-disabled .step-subtitle {
      color: var(--text-step-disabled);
    }
    &.is-locked .step-title {
      color: var(--text-step-disabled);
    }
    &.is-locked .step-subtitle {
      color: var(--text-step-disabled);
    }
    &.is-error .step-indicator {
      background-color: var(--bg-step-error);
      border-color: var(--border-step-error);
      color: var(--text-step-error);
    }
    &.is-error .step-title {
      color: var(--text-step-title-error);
    }
    &.is-warning .step-indicator {
      background-color: var(--bg-step-warning);
      border-color: var(--border-step-warning);
      color: var(--text-step-warning);
    }
    &.is-warning .step-title {
      color: var(--text-step-title-warning);
    }
    &.is-success .step-indicator {
      background-color: var(--bg-step-success);
      border-color: var(--border-step-success);
      color: var(--text-step-success);
    }
    &.is-skipped .step-indicator {
      background-color: var(--bg-step-skipped);
      border-color: var(--border-step-skipped);
      color: var(--text-step-skipped);
    }
    &.is-skipped .step-title {
      color: var(--text-step-skipped);
      text-decoration: line-through;
      text-decoration-color: var(--border-step-skipped);
      text-decoration-thickness: 1px;
    }
    &.is-skipped .step-subtitle {
      color: var(--text-step-skipped);
      text-decoration: line-through;
      text-decoration-color: var(--border-step-skipped);
      text-decoration-thickness: 1px;
    }
    &.is-clickable:not(.is-disabled):hover .step-indicator {
      background-color: var(--bg-step-hover);
    }
    &.is-clickable:not(.is-disabled):active .step-indicator {
      background-color: var(--bg-step-active);
    }
    &.is-current.is-clickable:not(.is-disabled):hover .step-indicator {
      background-color: var(--bg-step-current-hover);
    }
    &.is-current.is-clickable:not(.is-disabled):active .step-indicator {
      background-color: var(--bg-step-current-active);
    }
    &.is-completed.is-clickable:not(.is-disabled):hover .step-indicator {
      background-color: var(--bg-step-completed-hover);
    }
    &.is-completed.is-clickable:not(.is-disabled):active .step-indicator {
      background-color: var(--bg-step-completed-active);
    }
    &.is-clickable:not(.is-disabled):focus-visible .step-indicator {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }
    .stepper-pill & {
      margin: 0;
      display: flex;
      &.collapse.show {
        display: flex;
      }
      align-items: center;
      gap: calc(var(--spacing) * 2);
      border-radius: var(--radius-full);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: var(--spacing);
      color: var(--text-step-pill);
      min-height: 0;
      flex: 0 0 auto;
    }
    .stepper-pill &::before {
      content: none;
    }
    .stepper-pill &.is-current {
      background-color: var(--bg-step-pill-current);
      color: var(--text-step-pill-current);
    }
    .stepper-pill &.is-completed {
      color: var(--bg-step-pill-completed);
    }
    .stepper-pill &.is-completed .step-indicator {
      color: inherit;
    }
    .stepper-card & {
      margin: 0;
      flex-direction: column;
      align-items: flex-start;
      border-radius: var(--radius-lg);
      border-style: var(--tw-border-style);
      border-width: 1px;
      padding: calc(var(--spacing) * 3);
      background-color: var(--bg-step-card);
      border-color: var(--border-step-card);
      box-shadow: var(--shadow-step-card);
      min-height: 0;
      gap: 8px;
      transition: box-shadow 160ms ease, transform 160ms ease;
    }
    .stepper-card &::before {
      content: none;
    }
    .stepper-card & .step-connector {
      display: none;
    }
    .stepper-card &.is-current {
      box-shadow: var(--shadow-step-card-current);
      transform: translateY(-1px);
    }
    .stepper-card &.is-clickable:hover {
      transform: translateY(-1px);
    }
    .stepper-chevron & {
      position: relative;
      margin: 0;
      display: flex;
      &.collapse.show {
        display: flex;
      }
      flex: 1;
      align-items: center;
      gap: calc(var(--spacing) * 2);
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 2);
      background-color: var(--bg-step-chevron);
      color: var(--text-step-chevron);
      clip-path: polygon( 0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50% );
      margin-right: -10px;
      min-height: 0;
    }
    .stepper-chevron &::before {
      content: none;
    }
    .stepper-chevron &:first-child {
      clip-path: polygon( 0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100% );
    }
    .stepper-chevron &:last-child {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
      margin-right: 0;
    }
    .stepper-chevron & .step-indicator {
      width: 18px;
      height: 18px;
      background: transparent;
      color: inherit;
      border: 0;
      box-shadow: none;
      font-size: 10px;
    }
    .stepper-chevron & .step-content {
      padding-right: 0;
    }
    .stepper-chevron & .step-title {
      font-size: 12.5px;
      color: inherit;
    }
    .stepper-chevron & .step-subtitle {
      display: none;
    }
    .stepper-chevron & .step-connector {
      display: none;
    }
    .stepper-chevron &.is-current {
      background-color: var(--bg-step-chevron-current);
      color: var(--text-step-chevron-current);
      font-weight: 500;
    }
    .stepper-chevron &.is-completed {
      background-color: var(--bg-step-chevron-completed);
      color: var(--text-step-chevron-completed);
    }
    .stepper-chevron &.is-error {
      background-color: var(--bg-step-chevron-error);
      color: var(--text-step-chevron-error);
    }
    .stepper-timeline & {
      padding-bottom: calc(var(--spacing) * 6);
      min-height: 0;
    }
    .stepper-timeline &:last-child {
      padding-bottom: 0;
    }
    .stepper-timeline & .step-connector {
      width: 2px;
      left: calc(var(--size-step-indicator) / 2 - 1px);
      top: calc(var(--size-step-indicator) + 8px);
      bottom: -8px;
    }
    .wizard-rail .stepper &.is-completed {
      cursor: pointer;
    }
    .wizard-rail .stepper &.is-visited {
      cursor: pointer;
    }
    .wizard-rail .stepper &.is-completed:hover .step-title {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
    .wizard-rail .stepper &.is-visited:hover .step-title {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
    [data-contrast='high'] .stepper-chevron & {
      box-shadow: 0 0 0 2px currentColor inset;
    }
    [data-contrast='high'] .stepper-pill &.is-current {
      box-shadow: 0 0 0 2px currentColor inset;
    }
  }
  .panel-item {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-none);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding: var(--pl-pad-y) var(--pl-pad-x);
    border-color: var(--border-list-divider, var(--border-primary-subtle));
    background-color: var(--bg-list-item, var(--bg-list, var(--alpha-white-100)));
    color: var(--text-list-item, var(--text-primary));
    transition: background-color 120ms ease, box-shadow 160ms ease;
    &:last-child {
      border-bottom-color: var(--alpha-0);
    }
    .panel-list:not(.no-hover) &:not(.no-hover):not(.is-disabled):not([aria-disabled='true']):hover {
      background-color: var(--bg-list-item-hover, var(--bg-primary-subtle));
    }
    &.active {
      background-color: var(--bg-list-item-active, var(--bg-secondary));
    }
    &[aria-current='true'] {
      background-color: var(--bg-list-item-active, var(--bg-secondary));
    }
    &.selected {
      background-color: var(--bg-list-item-selected, var(--color-brand-50));
    }
    &[aria-selected='true'] {
      background-color: var(--bg-list-item-selected, var(--color-brand-50));
    }
    &.is-multi-selected {
      background-color: var(--bg-list-item-selected, var(--color-brand-50));
    }
    .panel-list.list-indicator &.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    .panel-list.list-indicator &[aria-current='true']::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    .panel-list--indicator &.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    .panel-list--indicator &[aria-current='true']::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    &:focus-visible {
      outline: none;
      box-shadow: var( --ring-list-item-focus, 0 0 0 2px var(--border-focus) );
      z-index: 1;
    }
    &:focus-within {
      background-color: var(--bg-list-item-hover, var(--bg-primary-subtle));
    }
    &.is-disabled {
      cursor: default;
      opacity: var(--opacity-list-item-disabled, 0.6);
      color: var(--text-list-item-disabled, var(--text-disabled));
      background-color: var(--bg-list-item-disabled, var(--bg-primary-subtle));
    }
    &[aria-disabled='true'] {
      cursor: default;
      opacity: var(--opacity-list-item-disabled, 0.6);
      color: var(--text-list-item-disabled, var(--text-disabled));
      background-color: var(--bg-list-item-disabled, var(--bg-primary-subtle));
    }
    &.is-disabled * {
      pointer-events: none;
    }
    &[aria-disabled='true'] * {
      pointer-events: none;
    }
    .panel-list--sortable &:hover .panel-item-handle {
      opacity: 1;
    }
    .panel-list--sortable &:focus-within .panel-item-handle {
      opacity: 1;
    }
    &.is-expanded .panel-item-detail {
      display: block;
    }
    &.is-expanded .panel-item__expand-trigger::after {
      transform: rotate(180deg);
    }
    &:hover .panel-item__chevron {
      transform: translateX(2px);
      color: var(--text-list-item-title);
    }
    &.list-xs {
      --pl-pad-y: var(--space-list-item-y-xs, 0.25rem);
    }
    &.list-sm {
      --pl-pad-y: var(--space-list-item-y-sm, 0.375rem);
    }
    &.list-md {
      --pl-pad-y: var(--space-list-item-y-md, 0.5rem);
    }
    &.list-lg {
      --pl-pad-y: var(--space-list-item-y-lg, 0.75rem);
    }
    &.list-xl {
      --pl-pad-y: var(--space-list-item-y-xl, 1rem);
    }
    .panel-list.list-borderless & {
      border-color: var(--alpha-0);
    }
    .panel-list--quiet & {
      border-color: var(--alpha-0);
    }
    .panel-list.list-inset-dividers & {
      border-bottom-color: var(--alpha-0);
    }
    .panel-list--inset-dividers & {
      border-bottom-color: var(--alpha-0);
    }
    .panel-list.list-inset-dividers &::after {
      content: '';
      position: absolute;
      left: var(--space-list-inset, 3rem);
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: var(--border-list-divider, var(--border-primary-subtle));
    }
    .panel-list--inset-dividers &::after {
      content: '';
      position: absolute;
      left: var(--space-list-inset, 3rem);
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: var(--border-list-divider, var(--border-primary-subtle));
    }
    .panel-list.list-inset-dividers &:last-child::after {
      display: none;
    }
    .panel-list--inset-dividers &:last-child::after {
      display: none;
    }
    .panel-list--cards & {
      border: 1px solid var(--border-list-card);
      border-radius: var(--radius-lg, 0.5rem);
      background-color: var(--bg-list-card);
      box-shadow: var(--shadow-list-card);
      transition: box-shadow 160ms ease, transform 160ms ease;
    }
    .panel-list--cards &:hover {
      box-shadow: var(--shadow-list-card-hover);
    }
    .panel-list--cards &.active {
      box-shadow: var(--shadow-list-card-active);
    }
    .panel-list--cards &[aria-current='true'] {
      box-shadow: var(--shadow-list-card-active);
    }
    .panel-list--ladder & {
      background-color: transparent;
      border-bottom: 1px solid var(--border-list-divider);
    }
    .panel-list--ladder &:last-child {
      border-bottom: 0;
    }
    .panel-list--ladder &:hover {
      background-color: transparent;
      box-shadow: inset 3px 0 0 var(--border-list-divider);
    }
    .panel-list--two-column &:nth-child(odd) {
      border-right: 1px solid var(--border-list-divider);
    }
    @media (max-width: 640px) {
      .panel-list--two-column &:nth-child(odd) {
        border-right: 0;
      }
    }
    .panel-list--virtual & {
      border-bottom: 0;
    }
    .panel-list--clickable & {
      cursor: pointer;
    }
    &.is-new {
      animation: panel-item-flash 1.6s ease-out 1;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-new {
        animation: none;
      }
    }
    &.is-loading {
      pointer-events: none;
    }
    &.is-loading .panel-item-title {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    &.is-loading .panel-item-subtitle {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    &.is-loading .panel-item-leading {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    &.is-loading .panel-item-trailing {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    &.is-loading .panel-item-title {
      width: 60%;
      height: 12px;
    }
    &.is-loading .panel-item-subtitle {
      width: 40%;
      height: 10px;
      margin-top: 6px;
    }
    &.is-loading .panel-item-leading {
      width: 24px;
      height: 24px;
      border-radius: 999px;
    }
    &.is-loading .panel-item-trailing {
      width: 24px;
      height: 24px;
      border-radius: 999px;
    }
    &.is-loading .panel-item-title::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    &.is-loading .panel-item-subtitle::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    &.is-loading .panel-item-leading::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    &.is-loading .panel-item-trailing::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-loading .panel-item-title::after {
        animation: none;
      }
      &.is-loading .panel-item-subtitle::after {
        animation: none;
      }
    }
    &.is-dragging {
      opacity: 0.55;
      box-shadow: 0 6px 18px oklch(0% 0 0 / 0.16);
    }
    &.is-ghost {
      border: 2px dashed var(--border-info);
      background-color: var(--bg-info-subtle);
      border-radius: 6px;
    }
    &.is-drop-target {
      box-shadow: inset 0 -2px 0 0 var(--border-info);
    }
    &.is-drop-target-above {
      box-shadow: inset 0 2px 0 0 var(--border-info);
    }
    &.item-success {
      background-color: var(--bg-list-item-success, var(--bg-success-subtle));
    }
    &.item-warning {
      background-color: var(--bg-list-item-warning, var(--bg-warning-subtle));
    }
    &.item-danger {
      background-color: var(--bg-list-item-danger, var(--bg-danger-subtle));
    }
    &.item-info {
      background-color: var(--bg-list-item-info, var(--bg-info-subtle));
    }
    [data-contrast='high'] & {
      border-bottom-color: var(--text-list-item-meta);
    }
    [data-contrast='high'] &:focus-visible {
      box-shadow: 0 0 0 3px var(--border-focus);
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
  .docs-catalog-card__preview {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    align-self: stretch;
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid var(--border-divider);
    pointer-events: none;
    overflow: hidden;
    background-color: var(--bg-secondary);
    & > * {
      position: relative;
      z-index: 1;
    }
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: radial-gradient(var(--border-divider) 1px, transparent 1px);
      background-size: 12px 12px;
      opacity: 0.5;
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 30%, transparent 100%);
      mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 30%, transparent 100%);
    }
  }
  .uploader--banner {
    & .uploader__zone {
      aspect-ratio: 4 / 1;
      min-height: 128px;
      padding: 16px;
      overflow: hidden;
    }
    & .uploader__zone img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &.has-preview .uploader__zone {
      color: #fff;
    }
    &.has-preview .uploader__zone::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100% );
      pointer-events: none;
    }
    &.has-preview .uploader__icon, &.has-preview .uploader__title, &.has-preview .uploader__subtitle {
      position: relative;
      z-index: 1;
      color: #fff;
    }
    &.has-preview .uploader__icon {
      background-color: rgba(255, 255, 255, 0.18);
      box-shadow: none;
    }
  }
  .has-preview {
    &.uploader--banner .uploader__zone {
      color: #fff;
    }
    &.uploader--banner .uploader__zone::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100% );
      pointer-events: none;
    }
    &.uploader--banner .uploader__icon, &.uploader--banner .uploader__title, &.uploader--banner .uploader__subtitle {
      position: relative;
      z-index: 1;
      color: #fff;
    }
    &.uploader--banner .uploader__icon {
      background-color: rgba(255, 255, 255, 0.18);
      box-shadow: none;
    }
  }
  .ss-viewport__chrome {
    .ss-shell.is-presenting & {
      opacity: 0.5;
    }
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    & > * {
      pointer-events: auto;
    }
  }
  .ss-floating {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    & > * {
      pointer-events: auto;
    }
  }
  .is-loading {
    & .panel-item {
      pointer-events: none;
    }
    &.panel-item .panel-item-title {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    & .panel-item .panel-item-subtitle {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    & .panel-item .panel-item-leading {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    & .panel-item .panel-item-trailing {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    &.panel-item .panel-item-title {
      width: 60%;
      height: 12px;
    }
    &.panel-item .panel-item-subtitle {
      width: 40%;
      height: 10px;
      margin-top: 6px;
    }
    &.panel-item .panel-item-leading {
      width: 24px;
      height: 24px;
      border-radius: 999px;
    }
    & .panel-item .panel-item-trailing {
      width: 24px;
      height: 24px;
      border-radius: 999px;
    }
    &.panel-item .panel-item-title::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    & .panel-item .panel-item-subtitle::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    & .panel-item .panel-item-leading::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    & .panel-item .panel-item-trailing::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.panel-item .panel-item-title::after {
        animation: none;
      }
      & .panel-item .panel-item-subtitle::after {
        animation: none;
      }
    }
  }
  .step-connector {
    position: absolute;
    background-color: var(--bg-step-connector);
    pointer-events: none;
    z-index: 0;
    .stepper-horizontal & {
      height: var(--size-step-connector);
      top: calc(var(--size-step-indicator) / 2 - var(--size-step-connector) / 2);
      left: calc(var(--size-step-indicator) + var(--space-step-content));
      right: var(--space-step-end, 1rem);
      border-radius: 999px;
    }
    .stepper-horizontal .step:last-child & {
      display: none;
    }
    .stepper-vertical & {
      width: var(--size-step-connector);
      left: calc(var(--size-step-indicator) / 2 - var(--size-step-connector) / 2);
      top: calc(var(--size-step-indicator) + 8px);
      bottom: 0;
      border-radius: 999px;
    }
    .stepper-vertical .step:last-child & {
      display: none;
    }
    .stepper--dotted & {
      background: transparent;
      background-image: repeating-linear-gradient( 90deg, var(--bg-step-connector), var(--bg-step-connector) 3px, transparent 3px, transparent 7px );
    }
    .stepper-vertical.stepper--dotted & {
      background-image: repeating-linear-gradient( 0, var(--bg-step-connector), var(--bg-step-connector) 3px, transparent 3px, transparent 7px );
    }
    .stepper-pill & {
      display: none;
    }
    .stepper-card .step & {
      display: none;
    }
    .stepper-chevron .step & {
      display: none;
    }
    .stepper-timeline .step & {
      width: 2px;
      left: calc(var(--size-step-indicator) / 2 - 1px);
      top: calc(var(--size-step-indicator) + 8px);
      bottom: -8px;
    }
  }
  .is-clickable {
    &.step {
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }
    & .step:not(.is-disabled):not(.is-current) {
      cursor: pointer;
    }
    & .step:not(.is-disabled):not(.is-current)::before {
      content: '';
      position: absolute;
      top: var(--inset-step-hover-y, -0.25rem);
      right: var(--inset-step-hover-x, -0.5rem);
      bottom: var(--inset-step-hover-y, -0.25rem);
      left: var(--inset-step-hover-x, -0.5rem);
      background-color: transparent;
      border-radius: var(--radius-step-hover, 0.375rem);
      z-index: -1;
      transition: background-color 100ms ease;
      pointer-events: none;
    }
    & .step:not(.is-disabled):not(.is-current):hover::before {
      background-color: var(--bg-step-hover, var(--bg-primary-subtle));
    }
    & .step:not(.is-disabled):not(.is-current):focus-visible::before {
      background-color: var(--bg-step-hover, var(--bg-primary-subtle));
      box-shadow: 0 0 0 2px var(--border-step-focus, var(--border-focus));
    }
    &.step:not(.is-disabled):hover .step-indicator {
      background-color: var(--bg-step-hover);
    }
    &.step:not(.is-disabled):active .step-indicator {
      background-color: var(--bg-step-active);
    }
    &.step.is-current:not(.is-disabled):hover .step-indicator {
      background-color: var(--bg-step-current-hover);
    }
    &.step.is-current:not(.is-disabled):active .step-indicator {
      background-color: var(--bg-step-current-active);
    }
    &.step.is-completed:not(.is-disabled):hover .step-indicator {
      background-color: var(--bg-step-completed-hover);
    }
    &.step.is-completed:not(.is-disabled):active .step-indicator {
      background-color: var(--bg-step-completed-active);
    }
    &.step:not(.is-disabled):focus-visible .step-indicator {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }
    .stepper-card &.step:hover {
      transform: translateY(-1px);
    }
    &.step-bar__section {
      cursor: pointer;
    }
    &.step-bar__section:hover .step-bar__track {
      opacity: 0.8;
    }
  }
  .carousel__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background-color: var(--bg-carousel-control);
    color: var(--text-carousel-control);
    border: 1px solid var(--border-carousel-control);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease, opacity 140ms ease;
    z-index: 4;
    &:hover {
      background-color: var(--bg-carousel-control-hover);
    }
    &:active {
      background-color: var(--bg-carousel-control-active);
      transform: scale(0.96);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
    right: 12px;
    &:active {
      transform: translateY(-50%) scale(0.96);
    }
    &[disabled] {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }
    .carousel--minimal & {
      opacity: 0;
    }
    .carousel--image & {
      opacity: 0;
    }
    .carousel--minimal:hover & {
      opacity: 0.85;
    }
    .carousel--minimal:focus-within & {
      opacity: 0.85;
    }
    .carousel--image:hover & {
      opacity: 0.85;
    }
    .carousel--image:focus-within & {
      opacity: 0.85;
    }
    .carousel--compact & {
      width: 28px;
      height: 28px;
      font-size: 11px;
    }
    @media (pointer: coarse) {
      width: 44px;
      height: 44px;
    }
  }
  .docs-search__hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    gap: 2px;
    pointer-events: none;
    transition: opacity 120ms ease;
    .docs-search__input:focus + & {
      opacity: 0;
    }
  }
  .docs-sidebar {
    grid-area: sidebar;
    background-color: var(--bg-primary);
    border-right: 1px solid var(--border-divider);
    overflow: hidden;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    @media (max-width: 960px) {
      position: fixed;
      top: var(--docs-header-height);
      left: 0;
      bottom: 0;
      width: 86vw;
      max-width: 320px;
      transform: translateX(-100%);
      z-index: 60;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
      pointer-events: auto;
      body.is-docs-sidebar-open & {
        transform: translateX(0);
        pointer-events: auto;
      }
    }
  }
  .accordion__item--danger {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      pointer-events: none;
    }
    &::before {
      background-color: var(--border-accordion-danger);
    }
  }
  .accordion__item--info {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      pointer-events: none;
    }
    &::before {
      background-color: var(--border-accordion-info);
    }
  }
  .accordion__item--success {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      pointer-events: none;
    }
    &::before {
      background-color: var(--border-accordion-success);
    }
  }
  .accordion__item--warning {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      pointer-events: none;
    }
    &::before {
      background-color: var(--border-accordion-warning);
    }
  }
  .carousel__prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background-color: var(--bg-carousel-control);
    color: var(--text-carousel-control);
    border: 1px solid var(--border-carousel-control);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease, opacity 140ms ease;
    z-index: 4;
    &:hover {
      background-color: var(--bg-carousel-control-hover);
    }
    &:active {
      background-color: var(--bg-carousel-control-active);
      transform: scale(0.96);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
    left: 12px;
    &:active {
      transform: translateY(-50%) scale(0.96);
    }
    &[disabled] {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }
    .carousel--minimal & {
      opacity: 0;
    }
    .carousel--image & {
      opacity: 0;
    }
    .carousel--minimal:hover & {
      opacity: 0.85;
    }
    .carousel--minimal:focus-within & {
      opacity: 0.85;
    }
    .carousel--image:hover & {
      opacity: 0.85;
    }
    .carousel--image:focus-within & {
      opacity: 0.85;
    }
    .carousel--compact & {
      width: 28px;
      height: 28px;
      font-size: 11px;
    }
    @media (pointer: coarse) {
      width: 44px;
      height: 44px;
    }
  }
  .docs-overview__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 13px;
    pointer-events: none;
    .docs-overview__search:focus-within & {
      color: var(--text-brand-primary);
    }
  }
  .collapse-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-collapse-trigger);
    background-color: var(--bg-collapse-trigger);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease, color 120ms ease;
    &:hover {
      background-color: var(--bg-collapse-trigger-hover);
    }
    &:focus-visible {
      outline: none;
      box-shadow: var(--ring-collapse-focus);
    }
    &[aria-expanded='true'] {
      background-color: var(--bg-collapse-trigger-open);
    }
    &:not(:has(.collapse-trigger__chevron))::after {
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--text-collapse-chevron);
      transition: transform 200ms var(--ease-collapse, ease), color 120ms ease;
      margin-left: 2px;
    }
    &:not(:has(.collapse-trigger__chevron))::after {
      content: '\f078';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      font-size: 11px;
    }
    &[aria-expanded='true'] .collapse-trigger__chevron {
      transform: rotate(180deg);
      color: var(--text-collapse-chevron-open);
    }
    &[aria-expanded='true']:not(:has(.collapse-trigger__chevron))::after {
      transform: rotate(180deg);
      color: var(--text-collapse-chevron-open);
    }
    @media (prefers-reduced-motion: reduce) {
      &::after {
        transition: none;
      }
    }
    .collapse-section > & {
      background-color: var(--bg-collapse-section-header);
      border-bottom: 1px solid var(--border-collapse-divider);
    }
    .collapse-section > &[aria-expanded='false'] {
      border-bottom-color: transparent;
    }
    .collapse-section--flush > & {
      background-color: transparent;
    }
    &.is-sticky {
      position: sticky;
      top: 0;
      z-index: 2;
      backdrop-filter: blur(8px);
      background-color: var(--bg-collapse-section-header);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix( in oklab, var(--bg-collapse-section-header) 85%, transparent );
      }
    }
    &.is-disabled {
      cursor: not-allowed;
      opacity: 0.55;
      pointer-events: none;
    }
    &[aria-disabled='true'] {
      cursor: not-allowed;
      opacity: 0.55;
      pointer-events: none;
    }
    &.is-loading::after {
      content: '';
      width: 12px;
      height: 12px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: var(--radius-full);
      animation: collapse-spin 600ms linear infinite;
      transform: none !important;
    }
    &.is-loading .collapse-trigger__chevron {
      display: none;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-loading::after {
        animation: none;
      }
    }
    [data-contrast='high'] &:focus-visible {
      box-shadow: inset 0 0 0 3px var(--border-focus);
    }
  }
  .carousel__slide-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    color: var(--text-carousel);
    background: var(--bg-carousel-overlay-soft);
    z-index: 2;
    pointer-events: none;
    & > * {
      pointer-events: auto;
    }
    .carousel--evidence & {
      background: linear-gradient( 180deg, transparent 0%, var(--alpha-black-70) 100% );
    }
  }
  .inline-edit__field {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 100px;
    flex: 1 1 auto;
    padding: var(--ie-pad-y) var(--ie-pad-x);
    font: inherit;
    line-height: inherit;
    color: var(--text-inline-edit);
    background-color: var(--bg-input);
    border: 0;
    border-radius: var(--ie-radius);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    transition: box-shadow 160ms ease, background-color 120ms ease;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    &::placeholder {
      color: var(--text-placeholder);
      opacity: 1;
    }
    &:hover {
      box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
    }
    &:focus {
      position: relative;
      z-index: 1;
      box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
    }
    .inline-edit__editor:has(.inline-edit__affix-prefix) & {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      margin-left: -1px;
      min-width: 60px;
    }
    .inline-edit__editor:has(.inline-edit__affix-suffix) & {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      min-width: 60px;
    }
    .inline-edit.is-saving & {
      background-color: var(--bg-inline-edit-saving);
      pointer-events: none;
      opacity: 0.7;
    }
    .inline-edit.is-dirty & {
      box-shadow: inset 0 0 0 1px var(--utility-amber-500), var(--shadow-xs);
    }
    .inline-edit.is-dirty &:focus {
      box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
    }
    .inline-edit.is-error &, .inline-edit.inline-edit--error & {
      box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-xs);
      background-color: var(--bg-inline-edit-error);
    }
    .inline-edit.is-error &:focus, .inline-edit.inline-edit--error &:focus {
      box-shadow: inset 0 0 0 2px var(--border-input-error-focus), var(--shadow-xs);
    }
    .inline-edit--cell & {
      width: 100%;
    }
    .inline-edit--number &, .inline-edit--currency & {
      font-variant-numeric: tabular-nums;
    }
    [data-contrast='high'] & {
      box-shadow: inset 0 0 0 2px var(--border-input), var(--shadow-xs);
    }
  }
  .ss-measure-readout {
    position: absolute;
    transform: translate(8px, 8px);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--ss-text);
    color: var(--ss-surface);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    pointer-events: none;
    z-index: 10;
    & strong {
      font-weight: 700;
    }
  }
  .ss-snap-readout {
    position: absolute;
    transform: translate(8px, 8px);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--ss-text);
    color: var(--ss-surface);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    pointer-events: none;
    z-index: 10;
  }
  .accordion__item {
    position: relative;
    background-color: transparent;
    transition: background-color 160ms ease;
    &[open] {
      background-color: var(--bg-accordion-trigger-open);
    }
    & > summary {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: var(--accordion-py, 0.625rem) var(--accordion-px, 1rem);
      font-size: var(--accordion-fs, 13px);
      font-weight: 500;
      line-height: 1.45;
      color: var(--text-accordion-title);
      background-color: var(--bg-accordion-trigger);
      cursor: pointer;
      user-select: none;
      list-style: none;
      transition: background-color 120ms ease, color 120ms ease;
    }
    & > summary:hover {
      background-color: var(--bg-accordion-trigger-hover);
    }
    & > summary:active {
      background-color: var(--bg-accordion-trigger-active);
    }
    &[open] > summary {
      background-color: var(--bg-accordion-trigger-open);
      color: var(--text-accordion-title-open);
    }
    & > summary:focus-visible {
      outline: none;
      box-shadow: var(--ring-accordion-focus);
    }
    & > summary::-webkit-details-marker {
      display: none;
    }
    & > summary::marker {
      content: '';
    }
    & > summary::-moz-list-bullet {
      display: none;
    }
    & > summary::after {
      content: '\f078';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      font-size: 11px;
      color: var(--text-accordion-chevron);
      margin-left: 2px;
      flex: 0 0 auto;
      transition: transform 180ms ease, color 120ms ease;
    }
    &[open] > summary::after {
      transform: rotate(180deg);
      color: var(--text-accordion-chevron-hover);
    }
    & > summary:hover::after {
      color: var(--text-accordion-chevron-hover);
    }
    & > summary:has(> .accordion__chevron)::after {
      content: none;
    }
    &[open] > summary > .accordion__chevron {
      transform: rotate(180deg);
    }
    &[open] > .accordion__panel {
      grid-template-rows: 1fr;
    }
    & > *:not(summary):not(.accordion__panel) {
      padding: 0 var(--accordion-px, 1rem) var(--accordion-py-body, 0.75rem);
      font-size: calc(var(--accordion-fs, 13px) - 1px);
      line-height: 1.55;
      color: var(--text-accordion-body);
    }
    @media (prefers-reduced-motion: reduce) {
      & > summary::after {
        transition: none;
      }
    }
    &.accordion__item--xs {
      --accordion-py: 0.375rem;
      --accordion-py-body: 0.5rem;
      --accordion-px: 0.625rem;
      --accordion-fs: 11.5px;
    }
    &.accordion__item--sm {
      --accordion-py: 0.5rem;
      --accordion-py-body: 0.625rem;
      --accordion-px: 0.75rem;
      --accordion-fs: 12.5px;
    }
    &.accordion__item--md {
      --accordion-py: 0.625rem;
      --accordion-py-body: 0.75rem;
      --accordion-px: 1rem;
      --accordion-fs: 13px;
    }
    &.accordion__item--lg {
      --accordion-py: 0.875rem;
      --accordion-py-body: 1rem;
      --accordion-px: 1.125rem;
      --accordion-fs: 14px;
    }
    &.accordion__item--xl {
      --accordion-py: 1.125rem;
      --accordion-py-body: 1.125rem;
      --accordion-px: 1.25rem;
      --accordion-fs: 15px;
    }
    .accordion--flush > & {
      background-color: transparent;
    }
    .accordion--bordered &[open] {
      background-color: var(--bg-accordion-trigger-open);
    }
    .accordion--cards > & {
      border: 1px solid var(--border-accordion);
      border-radius: var(--radius-accordion-item);
      background-color: var(--bg-accordion-card);
      box-shadow: var(--shadow-accordion-card);
      transition: box-shadow 160ms ease, border-color 160ms ease;
      overflow: hidden;
    }
    .accordion--cards > &[open] {
      box-shadow: var(--shadow-accordion-card-open);
      border-color: var(--border-accordion-open);
    }
    .accordion--cards > & > summary {
      background-color: transparent;
    }
    .accordion--ghost &[open] {
      background-color: transparent;
    }
    .accordion--ghost &[open] > summary {
      background-color: var(--bg-accordion-trigger-open);
      border-radius: var(--radius-accordion-item);
    }
    .accordion--filled &[open] > .accordion__panel > .accordion__body {
      background-color: var(--bg-accordion-body-filled);
    }
    .accordion--filled &[open] > *:not(summary):not(.accordion__panel) {
      background-color: var(--bg-accordion-body-filled);
    }
    .accordion--inset > & > summary {
      flex-direction: row-reverse;
    }
    .accordion--inset > & > summary::after {
      margin-left: 0;
      margin-right: 2px;
    }
    .accordion--inset > & > summary > .accordion__chevron {
      margin-left: 0;
      margin-right: 2px;
    }
    &.is-disabled {
      cursor: not-allowed;
      opacity: 0.55;
      pointer-events: none;
    }
    &.is-disabled > summary {
      cursor: not-allowed;
      opacity: 0.55;
      pointer-events: none;
    }
    &.is-required .accordion__title-text::after {
      content: '*';
      color: var(--border-accordion-danger);
      margin-left: 4px;
      font-weight: 600;
    }
    &.is-loading > summary::after {
      content: '';
      width: 12px;
      height: 12px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: var(--radius-full);
      animation: accordion-spin 600ms linear infinite;
      transform: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-loading > summary::after {
        animation: none;
      }
    }
    .accordion__body > .accordion > & {
      --accordion-py: 0.375rem;
      --accordion-py-body: 0.5rem;
      --accordion-fs: 12px;
    }
    .accordion--sub > & {
      --accordion-py: 0.375rem;
      --accordion-py-body: 0.5rem;
      --accordion-fs: 12px;
    }
    [data-contrast='high'] & > summary:focus-visible {
      box-shadow: inset 0 0 0 3px var(--border-focus);
    }
  }
  .inline-edit {
    --ie-pad-y: 4px;
    --ie-pad-x: 10px;
    --ie-radius: var(--radius-lg);
    --ie-font-size: 13px;
    --ie-line-height: 1.4;
    --ie-gap: 4px;
    --ie-min-width: 80px;
    --ie-trigger-size: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ie-gap);
    min-width: var(--ie-min-width);
    max-width: 100%;
    font-size: var(--ie-font-size);
    line-height: var(--ie-line-height);
    color: var(--text-inline-edit);
    border-radius: var(--ie-radius);
    background-color: var(--bg-inline-edit);
    transition: background-color 120ms ease, box-shadow 160ms ease, color 120ms ease;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    &:hover:not(.is-editing):not(.is-readonly) {
      background-color: var(--bg-inline-edit-hover);
    }
    &.is-empty .inline-edit__value {
      display: none;
    }
    &:not(.is-empty) .inline-edit__placeholder {
      display: none;
    }
    &:hover .inline-edit__trigger, &:focus-within .inline-edit__trigger, &.is-empty .inline-edit__trigger {
      opacity: 1;
      transform: translateX(0);
    }
    &.is-editing > .inline-edit__display, &.inline-edit--editing > .inline-edit__display {
      display: none;
    }
    &.is-editing > .inline-edit__editor, &.inline-edit--editing > .inline-edit__editor {
      display: inline-flex;
    }
    &.is-error .inline-edit__msg {
      color: var(--text-inline-edit-error);
    }
    &.is-success .inline-edit__msg {
      color: var(--text-inline-edit-success);
    }
    &.is-validating .inline-edit__msg::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 6px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: 999px;
      animation: ie-spin 600ms linear infinite;
      vertical-align: -1px;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-validating .inline-edit__msg::before {
        animation: none;
      }
    }
    &:has(.inline-edit__feedback) {
      flex-wrap: wrap;
    }
    &:has(.inline-edit__feedback) .inline-edit__editor {
      flex-wrap: nowrap;
    }
    &.is-saving .inline-edit__field, &.is-saving .inline-edit__input {
      background-color: var(--bg-inline-edit-saving);
      pointer-events: none;
      opacity: 0.7;
    }
    &.is-saving .inline-edit__btn[data-action='save'] {
      pointer-events: none;
      opacity: 0.55;
    }
    &.is-saving .inline-edit__btn[data-action='save']::after {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: 999px;
      animation: ie-spin 600ms linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-saving .inline-edit__btn[data-action='save']::after {
        animation: none;
      }
    }
    &.is-saving .inline-edit__btn[data-action='save'] > i {
      display: none;
    }
    &.is-success {
      background-color: var(--bg-inline-edit-success-flash);
      box-shadow: var(--shadow-inline-edit-success);
      transition: background-color 320ms ease, box-shadow 320ms ease;
    }
    &.is-success .inline-edit__display {
      color: var(--text-inline-edit-success);
    }
    &.is-dirty .inline-edit__btn--save {
      color: var(--utility-amber-600);
      background-color: var(--bg-inline-edit-success-flash);
    }
    &.is-readonly {
      background-color: var(--bg-inline-edit-readonly);
      color: var(--text-inline-edit-readonly);
      cursor: not-allowed;
    }
    &.is-readonly .inline-edit__display {
      cursor: not-allowed;
    }
    &.is-readonly .inline-edit__trigger {
      display: none;
    }
    .inline-edit-row & {
      width: 100%;
    }
  }
  .uploader {
    --uploader-radius: var(--radius-xl);
    --uploader-bg: var(--bg-primary);
    --uploader-bg-hover: var(--bg-secondary);
    --uploader-ring: var(--border-secondary);
    --uploader-ring-focus: var(--border-focus);
    --uploader-shadow: var(--shadow-xs);
    --uploader-padding-y: 24px;
    --uploader-padding-x: 24px;
    --uploader-icon-box: 40px;
    --uploader-icon-size: 20px;
    --uploader-title-size: 14px;
    --uploader-subtitle-size: 12.5px;
    --uploader-gap: 12px;
    --uploader-accent: var(--border-focus);
    --uploader-accent-bg: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --uploader-accent-bg: color-mix(in oklch, var(--bg-brand-solid) 12%, var(--bg-primary));
    }
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    &.is-dragover .uploader__zone {
      box-shadow: inset 0 0 0 2px var(--uploader-ring-focus), var(--uploader-shadow);
      background-color: var(--uploader-accent-bg);
      color: var(--uploader-accent);
    }
    &.is-dragover .uploader__icon {
      transform: translateY(-2px) scale(1.04);
      color: var(--uploader-accent);
      box-shadow: inset 0 0 0 1px var(--uploader-accent), var(--shadow-xs);
    }
    &.is-dragover .uploader__title {
      color: var(--uploader-accent);
    }
    &.is-success {
      --uploader-accent: var(--text-success);
      --uploader-accent-bg: var(--bg-success-subtle);
      --uploader-ring: var(--border-success);
    }
    &.is-error {
      --uploader-accent: var(--text-danger);
      --uploader-accent-bg: var(--bg-danger-subtle);
      --uploader-ring: var(--text-danger);
      @supports (color: color-mix(in lab, red, red)) {
        --uploader-ring: color-mix(in oklch, var(--text-danger) 45%, var(--border-secondary));
      }
    }
    &.is-uploading .uploader__icon {
      animation: uploader-pulse 1.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-uploading .uploader__icon {
        animation: none;
      }
    }
    &.is-disabled, &[aria-disabled='true'] {
      opacity: 0.6;
      pointer-events: none;
    }
    &.is-disabled .uploader__zone {
      cursor: not-allowed;
    }
  }
  .ss-marquee {
    position: absolute;
    border: 1px dashed var(--ss-accent);
    background: var(--ss-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-accent) 8%, transparent);
    }
    pointer-events: none;
  }
  .inline-edit__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 0;
    background-color: transparent;
    color: var(--text-inline-edit-muted);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    &:hover {
      background-color: var(--bg-inline-edit-trigger-hover);
      color: var(--text-inline-edit);
    }
    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--border-focus);
    }
    &[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }
    .inline-edit.is-saving &[data-action='save'] {
      pointer-events: none;
      opacity: 0.55;
    }
    .inline-edit.is-saving &[data-action='save']::after {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: 999px;
      animation: ie-spin 600ms linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .inline-edit.is-saving &[data-action='save']::after {
        animation: none;
      }
    }
    .inline-edit.is-saving &[data-action='save'] > i {
      display: none;
    }
  }
  .is-saving {
    &.inline-edit .inline-edit__field, &.inline-edit .inline-edit__input {
      background-color: var(--bg-inline-edit-saving);
      pointer-events: none;
      opacity: 0.7;
    }
    &.inline-edit .inline-edit__btn[data-action='save'] {
      pointer-events: none;
      opacity: 0.55;
    }
    &.inline-edit .inline-edit__btn[data-action='save']::after {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: 999px;
      animation: ie-spin 600ms linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.inline-edit .inline-edit__btn[data-action='save']::after {
        animation: none;
      }
    }
    &.inline-edit .inline-edit__btn[data-action='save'] > i {
      display: none;
    }
  }
  .media {
    --media-gap: 12px;
    --media-figure-size: 40px;
    --media-figure-radius: var(--radius-lg);
    --media-title-size: 14px;
    --media-subtitle-size: 12.5px;
    --media-meta-size: 11.5px;
    display: flex;
    align-items: flex-start;
    gap: var(--media-gap);
    min-width: 0;
    &[aria-disabled='true'] {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
  .uploader__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-link);
    pointer-events: none;
  }
  .inline-edit__input {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 100px;
    flex: 1 1 auto;
    padding: var(--ie-pad-y) var(--ie-pad-x);
    font: inherit;
    line-height: inherit;
    color: var(--text-inline-edit);
    background-color: var(--bg-input);
    border: 0;
    border-radius: var(--ie-radius);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    transition: box-shadow 160ms ease, background-color 120ms ease;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    &::placeholder {
      color: var(--text-placeholder);
      opacity: 1;
    }
    &:hover {
      box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
    }
    &:focus {
      box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
    }
    .inline-edit.is-saving & {
      background-color: var(--bg-inline-edit-saving);
      pointer-events: none;
    }
    .inline-edit.is-error &, .inline-edit.inline-edit--error & {
      box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-xs);
      background-color: var(--bg-inline-edit-error);
    }
    .inline-edit.is-error &:focus, .inline-edit.inline-edit--error &:focus {
      box-shadow: inset 0 0 0 2px var(--border-input-error-focus), var(--shadow-xs);
    }
    [data-contrast='high'] & {
      box-shadow: inset 0 0 0 2px var(--border-input), var(--shadow-xs);
    }
  }
  .is-docs-sidebar-open {
    @media (max-width: 960px) {
      &body .docs-sidebar {
        transform: translateX(0);
        pointer-events: auto;
      }
    }
  }
  .drag-handle {
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-quaternary);
    &:hover {
      color: var(--text-tertiary);
    }
    &:active {
      cursor: grabbing;
      color: var(--text-secondary);
    }
    & i {
      pointer-events: none;
    }
    & svg {
      pointer-events: none;
    }
  }
  .is-disabled {
    &.panel-item {
      cursor: default;
      opacity: var(--opacity-list-item-disabled, 0.6);
      color: var(--text-list-item-disabled, var(--text-disabled));
      background-color: var(--bg-list-item-disabled, var(--bg-primary-subtle));
    }
    &.panel-item * {
      pointer-events: none;
    }
  }
  .is-disabled {
    &.accordion__item {
      cursor: not-allowed;
      opacity: 0.55;
      pointer-events: none;
    }
    & .accordion__item > summary {
      cursor: not-allowed;
      opacity: 0.55;
      pointer-events: none;
    }
  }
  .is-disabled {
    &.collapse-trigger {
      cursor: not-allowed;
      opacity: 0.55;
      pointer-events: none;
    }
  }
  .is-disabled {
    &.uploader {
      opacity: 0.6;
      pointer-events: none;
    }
    &.uploader .uploader__zone {
      cursor: not-allowed;
    }
  }
  .media--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }
  .panel-item--skeleton {
    pointer-events: none;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    &:not(.show) {
      display: none;
    }
    &.show {
      display: block;
      visibility: visible;
    }
    &.show.flex {
      display: flex;
    }
    &.collapse-horizontal.show {
      display: inline-block;
    }
    &.collapse--fade.show {
      animation: collapse-fade-in var(--duration-collapse, 260ms) var(--ease-collapse) both;
    }
    &.collapse--slide.show {
      animation: collapse-slide-in var(--duration-collapse, 260ms) var(--ease-collapse) both;
    }
    @media (prefers-reduced-motion: reduce) {
      &.collapse--fade.show {
        animation: none;
      }
      &.collapse--slide.show {
        animation: none;
      }
    }
  }
  .show {
    &.collapse {
      display: block;
      visibility: visible;
    }
    &.collapse.flex {
      display: flex;
    }
    &.collapse-horizontal.collapse {
      display: inline-block;
    }
    &.collapse.collapse--fade {
      animation: collapse-fade-in var(--duration-collapse, 260ms) var(--ease-collapse) both;
    }
    &.collapse.collapse--slide {
      animation: collapse-slide-in var(--duration-collapse, 260ms) var(--ease-collapse) both;
    }
    @media (prefers-reduced-motion: reduce) {
      &.collapse.collapse--fade {
        animation: none;
      }
      &.collapse.collapse--slide {
        animation: none;
      }
    }
  }
  .\!visible {
    visibility: visible !important;
  }
  .collapse {
    visibility: collapse;
  }
  .docs-prev-next__item--empty {
    visibility: hidden;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .uploader--avatar {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    & .uploader__zone {
      width: 96px;
      height: 96px;
      padding: 0;
      border-radius: var(--radius-full);
      overflow: visible;
      flex: 0 0 auto;
    }
    & .uploader__zone .uploader__icon {
      width: 100%;
      height: 100%;
      border-radius: var(--radius-full);
      background-color: var(--bg-secondary);
      color: var(--text-tertiary);
      font-size: 28px;
      box-shadow: none;
    }
    & .uploader__zone .uploader__title, & .uploader__zone .uploader__subtitle, & .uploader__zone .uploader__action {
      display: none;
    }
    & .uploader__zone img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-full);
    }
    & .uploader__zone::after {
      content: '\f030';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free', sans-serif;
      font-weight: 300;
      position: absolute;
      right: 4px;
      bottom: 4px;
      width: 28px;
      height: 28px;
      border-radius: var(--radius-full);
      background-color: var(--bg-primary);
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      box-shadow: 0 0 0 2px var(--bg-primary), var(--shadow-sm);
      font-size: 13px;
    }
  }
  .carousel__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--bg-carousel-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    & video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .carousel--contain & img {
      object-fit: contain;
      background-color: var(--bg-carousel-surface);
    }
    .carousel--contain & video {
      object-fit: contain;
      background-color: var(--bg-carousel-surface);
    }
    &.is-loading {
      background-color: var(--bg-carousel-skeleton);
      position: relative;
      overflow: hidden;
    }
    &.is-loading::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--bg-carousel-skeleton-sweep);
      background-size: 200% 100%;
      animation: carousel-skeleton 1.4s linear infinite;
    }
    &.is-broken {
      background-color: var(--bg-carousel-error);
      color: var(--text-carousel-error);
      font-size: 12px;
    }
    &.is-broken::before {
      content: '\f127';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      font-size: 28px;
      margin-right: 8px;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-loading::after {
        animation: none;
      }
    }
    &:has(.carousel__slide-badge) ~ .carousel__counter {
      left: auto;
      right: 12px;
    }
    .carousel--16-9 & {
      aspect-ratio: 16 / 9;
    }
    .carousel--4-3 & {
      aspect-ratio: 4 / 3;
    }
    .carousel--1-1 & {
      aspect-ratio: 1 / 1;
    }
    .carousel--square & {
      aspect-ratio: 1 / 1;
    }
    .carousel--3-4 & {
      aspect-ratio: 3 / 4;
    }
    .carousel--21-9 & {
      aspect-ratio: 21 / 9;
    }
    .carousel--product & {
      background-color: transparent;
    }
    .carousel--product & img {
      object-fit: contain;
    }
    .carousel--product & video {
      object-fit: contain;
    }
    .carousel--panel & {
      background-color: var(--bg-carousel-skeleton);
    }
    .carousel--split & {
      flex: 0 0 80%;
      margin-right: 12px;
      scroll-snap-align: center;
    }
    .carousel.is-fullscreen & {
      height: 100vh;
    }
    .carousel.is-fullscreen & img {
      object-fit: contain;
    }
    .carousel.is-fullscreen & video {
      object-fit: contain;
    }
  }
  .carousel {
    position: relative;
    width: 100%;
    max-width: var(--carousel-max-width, 100%);
    background-color: var(--bg-carousel);
    color: var(--text-carousel);
    border: 1px solid var(--border-carousel);
    border-radius: var(--radius-carousel);
    overflow: hidden;
    box-shadow: var(--shadow-carousel);
    touch-action: pan-y pinch-zoom;
    isolation: isolate;
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
    &:hover .carousel__slide-actions {
      opacity: 1;
      transform: translateY(0);
    }
    &:focus-within .carousel__slide-actions {
      opacity: 1;
      transform: translateY(0);
    }
    &.is-fullscreen .carousel__slide-actions {
      opacity: 1;
      transform: translateY(0);
    }
    &:has(.carousel__progress) .carousel__dots {
      bottom: 10px;
    }
    &.is-empty {
      background-color: var(--bg-carousel-empty);
      border-style: dashed;
      color: var(--text-carousel-on-light-muted);
    }
    &.is-empty .carousel__viewport {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }
    &.is-loading .carousel__viewport {
      background-color: var(--bg-carousel-skeleton);
      background-image: var(--bg-carousel-skeleton-sweep);
      background-size: 200% 100%;
      animation: carousel-skeleton 1.4s linear infinite;
      min-height: 200px;
    }
    @media (prefers-reduced-motion: reduce) {
      &.is-loading .carousel__viewport {
        animation: none;
      }
    }
    &.is-error {
      background-color: var(--bg-carousel-error);
      color: var(--text-carousel-error);
    }
    &.is-error .carousel__viewport {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      flex-direction: column;
      gap: 6px;
      padding: 24px;
    }
    &.is-fullscreen {
      position: fixed !important;
      inset: 0 !important;
      max-width: 100% !important;
      height: 100vh !important;
      border-radius: 0 !important;
      border: 0 !important;
      z-index: 1000;
    }
    &.is-fullscreen .carousel__viewport {
      height: 100vh;
    }
    &.is-fullscreen .carousel__slide {
      height: 100vh;
    }
    &.is-fullscreen .carousel__media {
      object-fit: contain;
    }
    &.is-fullscreen .carousel__slide img {
      object-fit: contain;
    }
    &.is-fullscreen .carousel__slide video {
      object-fit: contain;
    }
  }
  .step-indicator {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    width: var(--size-step-indicator, 28px);
    height: var(--size-step-indicator, 28px);
    background-color: var(--bg-step-indicator);
    color: var(--text-step-indicator);
    box-shadow: inset 0 0 0 var(--step-ring-w, 1.5px) var(--step-ring-color, var(--border-step-indicator)), var(--step-ring-shadow, var(--shadow-step-indicator));
    transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease, transform 120ms ease, box-shadow 120ms ease;
    & > .step-number {
      --tw-leading: 1;
      line-height: 1;
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    & > i {
      --tw-leading: 1;
      line-height: 1;
      font-size: 1em;
    }
    & > svg {
      --tw-leading: 1;
      line-height: 1;
      font-size: 1em;
    }
    & > img {
      width: 100%;
      height: 100%;
      border-radius: 999px;
      object-fit: cover;
    }
    .step.is-in-progress &::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 999px;
      background: var(--halo-step-in-progress);
      z-index: -1;
      animation: step-pulse 1.6s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .step.is-in-progress &::after {
        animation: none;
      }
    }
    .stepper-xs & {
      font-size: 0.563rem;
      line-height: var(--tw-leading, 1rem);
    }
    .stepper-sm & {
      font-size: 0.6875rem;
      line-height: var(--tw-leading, 1rem);
      letter-spacing: var(--tw-tracking, 0.01em);
    }
    .stepper-md & {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
    .stepper-lg & {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
    }
    .stepper-xl & {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    .step.is-current & {
      background-color: var(--bg-step-current);
      border-color: var(--border-step-current);
      color: var(--text-step-current);
      transform: scale(1.04);
    }
    .step.is-completed & {
      background-color: var(--bg-step-completed);
      border-color: var(--border-step-completed);
      color: var(--text-step-completed);
    }
    .step.is-disabled & {
      background-color: var(--bg-step-disabled);
      border-color: var(--border-step-disabled);
      color: var(--text-step-disabled);
      box-shadow: none;
    }
    .step.is-locked & {
      background-color: var(--bg-step-disabled);
      border-color: var(--border-step-disabled);
      color: var(--text-step-disabled);
      box-shadow: none;
    }
    .step.is-error & {
      background-color: var(--bg-step-error);
      border-color: var(--border-step-error);
      color: var(--text-step-error);
    }
    .step.is-warning & {
      background-color: var(--bg-step-warning);
      border-color: var(--border-step-warning);
      color: var(--text-step-warning);
    }
    .step.is-success & {
      background-color: var(--bg-step-success);
      border-color: var(--border-step-success);
      color: var(--text-step-success);
    }
    .step.is-skipped & {
      background-color: var(--bg-step-skipped);
      border-color: var(--border-step-skipped);
      color: var(--text-step-skipped);
    }
    .step.is-clickable:not(.is-disabled):hover & {
      background-color: var(--bg-step-hover);
    }
    .step.is-clickable:not(.is-disabled):active & {
      background-color: var(--bg-step-active);
    }
    .step.is-current.is-clickable:not(.is-disabled):hover & {
      background-color: var(--bg-step-current-hover);
    }
    .step.is-current.is-clickable:not(.is-disabled):active & {
      background-color: var(--bg-step-current-active);
    }
    .step.is-completed.is-clickable:not(.is-disabled):hover & {
      background-color: var(--bg-step-completed-hover);
    }
    .step.is-completed.is-clickable:not(.is-disabled):active & {
      background-color: var(--bg-step-completed-active);
    }
    .step.is-clickable:not(.is-disabled):focus-visible & {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }
    position: relative;
    z-index: 1;
    .stepper-pill & {
      width: 18px;
      height: 18px;
      font-size: 10px;
      box-shadow: none;
      background: transparent;
      border: 0;
      color: inherit;
    }
    .stepper-pill .step.is-completed & {
      color: inherit;
    }
    .stepper-chevron .step & {
      width: 18px;
      height: 18px;
      background: transparent;
      color: inherit;
      border: 0;
      box-shadow: none;
      font-size: 10px;
    }
    [data-contrast='high'] & {
      --step-ring-w: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
      transform: none !important;
    }
  }
  .loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: center;
    background-color: oklch(100% 0 0 / 0.6);
    backdrop-filter: blur(var(--blur-xs, 2px));
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & {
      background-color: oklch(0% 0 0 / 0.5);
    }
  }
  .ss-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .is-fullscreen {
    & .carousel .carousel__slide-actions {
      opacity: 1;
      transform: translateY(0);
    }
    &.carousel {
      position: fixed !important;
      inset: 0 !important;
      max-width: 100% !important;
      height: 100vh !important;
      border-radius: 0 !important;
      border: 0 !important;
      z-index: 1000;
    }
    &.carousel .carousel__viewport {
      height: 100vh;
    }
    & .carousel .carousel__slide {
      height: 100vh;
    }
    &.carousel .carousel__media {
      object-fit: contain;
    }
    & .carousel .carousel__slide img {
      object-fit: contain;
    }
    & .carousel .carousel__slide video {
      object-fit: contain;
    }
  }
  .is-in-progress {
    &.step .step-indicator::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 999px;
      background: var(--halo-step-in-progress);
      z-index: -1;
      animation: step-pulse 1.6s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.step .step-indicator::after {
        animation: none;
      }
    }
  }
  .ss-cmd-palette {
    position: fixed;
    inset: 0;
    z-index: 300;
  }
  .panel-item-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-list-item-subtitle, var(--text-tertiary));
    .panel-item.is-loading & {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    .panel-item.is-loading & {
      width: 40%;
      height: 10px;
      margin-top: 6px;
    }
    .panel-item.is-loading &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .panel-item.is-loading &::after {
        animation: none;
      }
    }
  }
  .panel-item-trailing {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--text-list-item-trailing, var(--text-tertiary));
    & kbd {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: 4px;
      font-family: 'Space Mono', monospace;
      font-size: 10px;
      color: var(--text-list-item-kbd);
      background-color: var(--bg-list-item-kbd);
      border: 1px solid var(--border-list-item-kbd);
      box-shadow: 0 1px 0 var(--border-list-item-kbd);
      line-height: 1;
    }
    & .kbd {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: 4px;
      font-family: 'Space Mono', monospace;
      font-size: 10px;
      color: var(--text-list-item-kbd);
      background-color: var(--bg-list-item-kbd);
      border: 1px solid var(--border-list-item-kbd);
      box-shadow: 0 1px 0 var(--border-list-item-kbd);
      line-height: 1;
    }
    & .panel-item__chevron {
      width: 14px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--text-list-item-leading, var(--text-tertiary));
      transition: transform 160ms ease, color 160ms ease;
    }
    .panel-item.is-loading & {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    .panel-item.is-loading & {
      width: 24px;
      height: 24px;
      border-radius: 999px;
    }
    .panel-item.is-loading &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
  }
  .panel-item-leading {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-shrink: 0;
    align-items: center;
    color: var(--text-list-item-leading, var(--text-tertiary));
    .panel-item.is-loading & {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    .panel-item.is-loading & {
      width: 24px;
      height: 24px;
      border-radius: 999px;
    }
    .panel-item.is-loading &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
  }
  .ss-canvas {
    position: absolute;
    inset: 0;
    touch-action: none;
    & canvas {
      display: block;
    }
  }
  .panel-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-list-item-title, var(--text-primary));
    .panel-item.is-loading & {
      color: transparent !important;
      background-color: var(--bg-list-item-skeleton);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      height: 10px;
    }
    .panel-item.is-loading & {
      width: 60%;
      height: 12px;
    }
    .panel-item.is-loading &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg-list-item-skeleton-shimmer);
      animation: panel-skeleton 1.4s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .panel-item.is-loading &::after {
        animation: none;
      }
    }
  }
  .ss-template-skeleton {
    border-radius: var(--radius-card-md, var(--radius-xl));
    background: var(--ss-surface);
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    overflow: hidden;
    height: 196px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient( 110deg, var(--ss-text) 30%, var(--ss-text) 50%, var(--ss-text) 70% );
      @supports (color: color-mix(in lab, red, red)) {
        background: linear-gradient( 110deg, color-mix(in srgb, var(--ss-text) 3%, transparent) 30%, color-mix(in srgb, var(--ss-text) 8%, transparent) 50%, color-mix(in srgb, var(--ss-text) 3%, transparent) 70% );
      }
      background-size: 200% 100%;
      animation: ss-shimmer 1.6s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &::before {
        animation: none;
      }
    }
  }
  .is-loading {
    &.carousel__slide {
      background-color: var(--bg-carousel-skeleton);
      position: relative;
      overflow: hidden;
    }
    &.carousel__slide::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--bg-carousel-skeleton-sweep);
      background-size: 200% 100%;
      animation: carousel-skeleton 1.4s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.carousel__slide::after {
        animation: none;
      }
    }
    &.carousel .carousel__viewport {
      background-color: var(--bg-carousel-skeleton);
      background-image: var(--bg-carousel-skeleton-sweep);
      background-size: 200% 100%;
      animation: carousel-skeleton 1.4s linear infinite;
      min-height: 200px;
    }
    @media (prefers-reduced-motion: reduce) {
      &.carousel .carousel__viewport {
        animation: none;
      }
    }
  }
  .uploader--gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    & .uploader__zone {
      height: 140px;
      padding: 10px;
      gap: 6px;
      order: 99;
    }
    & .uploader__icon {
      width: 38px;
      height: 38px;
      font-size: 16px;
    }
    & .uploader__title {
      font-size: 13px;
    }
    & .uploader__subtitle {
      display: none;
    }
    & .uploader__previews {
      display: contents;
    }
    & .uploader__previews .uploader__item {
      position: relative;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      overflow: hidden;
      height: 140px;
    }
    & .uploader__previews .uploader__thumb {
      width: 100%;
      height: 100%;
      border-radius: 0;
      font-size: 24px;
    }
    & .uploader__previews .uploader__meta {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 6px 8px;
      background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100% );
      color: #fff;
    }
    & .uploader__previews .uploader__name {
      color: #fff;
      font-size: 12px;
    }
    & .uploader__previews .uploader__detail {
      color: rgba(255, 255, 255, 0.8);
      font-size: 10.5px;
    }
    & .uploader__previews .uploader__actions {
      position: absolute;
      top: 4px;
      right: 4px;
    }
    & .uploader__previews .uploader__item.is-success::before {
      content: '\f00c';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free', sans-serif;
      font-weight: 900;
      position: absolute;
      z-index: 1;
      top: 4px;
      left: 4px;
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full);
      background-color: var(--bg-success-subtle);
      color: var(--text-success);
      font-size: 11px;
      line-height: 1;
      box-shadow: inset 0 0 0 1px var(--border-success), var(--shadow-sm);
    }
    & .uploader__previews .uploader__btn {
      background-color: color-mix(in oklch, #000 50%, transparent);
      color: #fff;
    }
    & .uploader__previews .uploader__btn:hover {
      background-color: color-mix(in oklch, #000 70%, transparent);
      color: #fff;
    }
  }
  .carousel__counter {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: var(--bg-carousel-counter);
    color: var(--text-carousel-counter);
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    &[data-position='bottom-right'] {
      top: auto;
      left: auto;
      right: 12px;
      bottom: 12px;
    }
    &[data-position='bottom-left'] {
      top: auto;
      bottom: 12px;
    }
    &[data-position='top-right'] {
      left: auto;
      right: 12px;
    }
    .carousel__slide-badge ~ & {
      left: auto;
      right: 12px;
    }
    .carousel__slide:has(.carousel__slide-badge) ~ & {
      left: auto;
      right: 12px;
    }
  }
  .panel-list {
    width: 100%;
    background-color: var(--bg-list, var(--alpha-white-100));
    border-radius: var(--radius-list, 0.375rem);
    --pl-pad-x: var(--space-list-item-x, 1rem);
    --pl-pad-y: var(--space-list-item-y, 0.5rem);
    &:not(.no-hover) .panel-item:not(.no-hover):not(.is-disabled):not( [aria-disabled='true'] ):hover {
      background-color: var(--bg-list-item-hover, var(--bg-primary-subtle));
    }
    &.list-indicator .panel-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    &.list-indicator .panel-item[aria-current='true']::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    &.list-compact {
      --pl-pad-y: var(--space-list-item-y-compact, 0.375rem);
    }
    &.list-relaxed {
      --pl-pad-y: var(--space-list-item-y-relaxed, 0.75rem);
    }
    &.list-xs {
      --pl-pad-y: var(--space-list-item-y-xs, 0.25rem);
    }
    &.list-sm {
      --pl-pad-y: var(--space-list-item-y-sm, 0.375rem);
    }
    &.list-md {
      --pl-pad-y: var(--space-list-item-y-md, 0.5rem);
    }
    &.list-lg {
      --pl-pad-y: var(--space-list-item-y-lg, 0.75rem);
    }
    &.list-xl {
      --pl-pad-y: var(--space-list-item-y-xl, 1rem);
    }
    &.list-borderless {
      border-color: var(--alpha-0);
      background-color: transparent;
    }
    &.list-borderless .panel-item {
      border-color: var(--alpha-0);
    }
    &.list-inset-dividers .panel-item {
      border-bottom-color: var(--alpha-0);
    }
    &.list-inset-dividers .panel-item::after {
      content: '';
      position: absolute;
      left: var(--space-list-inset, 3rem);
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: var(--border-list-divider, var(--border-primary-subtle));
    }
    &.list-inset-dividers .panel-item:last-child::after {
      display: none;
    }
  }
  .docs-toc {
    grid-area: toc;
    border-left: 1px solid var(--border-divider);
    background-color: var(--bg-primary);
    overflow-y: auto;
    &.is-empty {
      display: none;
    }
    @media (max-width: 1280px) {
      position: fixed;
      top: var(--docs-header-height);
      right: 0;
      bottom: 0;
      width: var(--docs-toc-tray-width);
      max-width: 86vw;
      transform: translateX(100%);
      transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 60;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
      overscroll-behavior: contain;
      body.is-docs-toc-open & {
        transform: translateX(0);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
  .uploader__previews--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    & .uploader__item {
      position: relative;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      overflow: hidden;
    }
    & .uploader__thumb {
      width: 100%;
      height: 110px;
      border-radius: 0;
      font-size: 28px;
    }
    & .uploader__meta {
      padding: 8px 10px 10px;
      gap: 4px;
    }
    & .uploader__actions {
      position: absolute;
      top: 6px;
      right: 6px;
      opacity: 0;
      transition: opacity 120ms ease;
    }
    & .uploader__item:hover .uploader__actions, & .uploader__item:focus-within .uploader__actions {
      opacity: 1;
    }
    & .uploader__btn {
      background-color: var(--bg-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklch, var(--bg-primary) 80%, transparent);
      }
      backdrop-filter: blur(4px);
    }
    & .uploader__progress {
      margin: 0;
      border-radius: 0;
    }
    & .uploader__item.is-success::before {
      content: '\f00c';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free', sans-serif;
      font-weight: 900;
      position: absolute;
      z-index: 1;
      top: 6px;
      left: 6px;
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full);
      background-color: var(--bg-success-subtle);
      color: var(--text-success);
      font-size: 11px;
      line-height: 1;
      box-shadow: inset 0 0 0 1px var(--border-success), var(--shadow-sm);
    }
    @media (prefers-reduced-motion: reduce) {
      & .uploader__actions {
        transition: none;
      }
    }
  }
  .carousel__slide-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--bg-carousel-status);
    color: var(--text-carousel);
    font-size: 10.5px;
    font-weight: 500;
    backdrop-filter: blur(6px);
    & ~ .carousel__counter {
      left: auto;
      right: 12px;
    }
    .carousel__slide:has(&) ~ .carousel__counter {
      left: auto;
      right: 12px;
    }
  }
  .carousel__controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    & .carousel__btn {
      width: 30px;
      height: 30px;
      font-size: 12px;
    }
  }
  .carousel__slide-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 160ms ease, transform 160ms ease;
    .carousel:hover & {
      opacity: 1;
      transform: translateY(0);
    }
    .carousel:focus-within & {
      opacity: 1;
      transform: translateY(0);
    }
    .carousel.is-fullscreen & {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .ss-compass {
    position: absolute;
    top: 70px;
    right: 14px;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-xl);
    overflow: visible;
    background: var(--ss-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-surface) 92%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--ss-border), var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    z-index: 4;
    transition: transform 160ms ease;
    &:hover {
      transform: scale(1.04);
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus), var(--shadow-md);
    }
  }
  .ss-viewport-ctrls {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 6px;
  }
  .docs-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border-radius: var(--docs-radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
    position: relative;
    &.is-hidden {
      display: none;
    }
    &:hover {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
    }
    .docs-nav__item.is-active & {
      background-image: linear-gradient( to right, var(--text-brand-primary) 0%, var(--text-brand-primary) 55%, transparent 100% );
      @supports (color: color-mix(in lab, red, red)) {
        background-image: linear-gradient( to right, color-mix(in oklch, var(--text-brand-primary) 18%, transparent) 0%, color-mix(in oklch, var(--text-brand-primary) 6%, transparent) 55%, transparent 100% );
      }
      background-color: transparent;
      color: var(--text-info, var(--text-primary));
    }
    .docs-nav__item.is-active &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 2px;
      border-radius: 2px;
      background-color: var(--text-info, var(--text-primary));
    }
  }
  .is-active {
    &.docs-nav__item .docs-nav__link {
      background-image: linear-gradient( to right, var(--text-brand-primary) 0%, var(--text-brand-primary) 55%, transparent 100% );
      @supports (color: color-mix(in lab, red, red)) {
        background-image: linear-gradient( to right, color-mix(in oklch, var(--text-brand-primary) 18%, transparent) 0%, color-mix(in oklch, var(--text-brand-primary) 6%, transparent) 55%, transparent 100% );
      }
      background-color: transparent;
      color: var(--text-info, var(--text-primary));
    }
    &.docs-nav__item .docs-nav__link::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 2px;
      border-radius: 2px;
      background-color: var(--text-info, var(--text-primary));
    }
    &.docs-nav__item .docs-nav__link-icon {
      color: inherit;
    }
    &.docs-toc__link {
      color: var(--text-info, var(--text-primary));
      border-color: var(--text-info, var(--text-primary));
      font-weight: 600;
    }
  }
  .docs-nav__item {
    list-style: none;
    &.is-active .docs-nav__link {
      background-image: linear-gradient( to right, var(--text-brand-primary) 0%, var(--text-brand-primary) 55%, transparent 100% );
      @supports (color: color-mix(in lab, red, red)) {
        background-image: linear-gradient( to right, color-mix(in oklch, var(--text-brand-primary) 18%, transparent) 0%, color-mix(in oklch, var(--text-brand-primary) 6%, transparent) 55%, transparent 100% );
      }
      background-color: transparent;
      color: var(--text-info, var(--text-primary));
    }
    &.is-active .docs-nav__link::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 2px;
      border-radius: 2px;
      background-color: var(--text-info, var(--text-primary));
    }
    &.is-active .docs-nav__link-icon {
      color: inherit;
    }
  }
  .active {
    &.panel-item {
      background-color: var(--bg-list-item-active, var(--bg-secondary));
    }
    .panel-list.list-indicator &.panel-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    .panel-list--indicator &.panel-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    .panel-list--cards &.panel-item {
      box-shadow: var(--shadow-list-card-active);
    }
  }
  .list-indicator {
    &.panel-list .panel-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    & .panel-list .panel-item[aria-current='true']::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
  }
  .panel-list--indicator {
    & .panel-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
    & .panel-item[aria-current='true']::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--size-list-indicator, 3px);
      background-color: var(--bg-list-indicator, var(--border-focus));
      border-radius: 0 2px 2px 0;
    }
  }
  .panel-item--with-indicator {
    &.item-success::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
    }
    &.item-warning::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
    }
    &.item-danger::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
    }
    &.item-info::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
    }
    &.item-success::before {
      background-color: var(--bg-list-indicator-success);
    }
    &.item-warning::before {
      background-color: var(--bg-list-indicator-warning);
    }
    &.item-danger::before {
      background-color: var(--bg-list-indicator-danger);
    }
    &.item-info::before {
      background-color: var(--bg-list-indicator-info);
    }
  }
  .item-danger {
    & .panel-item--with-indicator::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
    }
    &.panel-item--with-indicator::before {
      background-color: var(--bg-list-indicator-danger);
    }
    &.panel-item {
      background-color: var(--bg-list-item-danger, var(--bg-danger-subtle));
    }
  }
  .item-info {
    & .panel-item--with-indicator::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
    }
    &.panel-item--with-indicator::before {
      background-color: var(--bg-list-indicator-info);
    }
    &.panel-item {
      background-color: var(--bg-list-item-info, var(--bg-info-subtle));
    }
  }
  .item-success {
    &.panel-item--with-indicator::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
    }
    &.panel-item--with-indicator::before {
      background-color: var(--bg-list-indicator-success);
    }
    &.panel-item {
      background-color: var(--bg-list-item-success, var(--bg-success-subtle));
    }
  }
  .item-warning {
    & .panel-item--with-indicator::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
    }
    &.panel-item--with-indicator::before {
      background-color: var(--bg-list-indicator-warning);
    }
    &.panel-item {
      background-color: var(--bg-list-item-warning, var(--bg-warning-subtle));
    }
  }
  .docs-edge {
    position: fixed;
    top: var(--docs-header-height);
    bottom: 0;
    width: var(--docs-edge-hitbox);
    z-index: 55;
    background: transparent;
    display: none;
  }
  .ss-quick-create {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-xl);
    background: var(--ss-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-surface) 95%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--ss-border), var(--shadow-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 12.5px;
    max-width: 720px;
    animation: ss-toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
    &[hidden] {
      display: none;
    }
  }
  .step__substep {
    display: flex;
    gap: 8px;
    padding: 4px 0 4px 14px;
    position: relative;
    font-size: 12px;
    color: var(--text-step-subtitle);
    cursor: default;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12px;
      width: 8px;
      height: 1px;
      background-color: var(--border-step-indicator);
    }
    &.is-current {
      color: var(--text-step-title-current);
      font-weight: 500;
    }
    &.is-completed {
      color: var(--text-step-title);
    }
    &.is-completed::after {
      content: '\f00c';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      color: var(--bg-step-completed);
      margin-left: auto;
      font-size: 10px;
    }
  }
  .ss-scene-nav {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-lg);
    background: var(--ss-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-surface) 92%, transparent);
    }
    backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px var(--ss-border), var(--shadow-md);
    font-size: 12px;
    color: var(--ss-text);
  }
  .docs-search__icon {
    .docs-search:focus-within & {
      color: var(--text-brand-primary);
    }
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 12px;
  }
  .docs-sidebar__search {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--bg-primary);
    padding: 12px 10px 10px;
    margin: 0 0 8px;
    border-bottom: 1px dotted var(--border-secondary, var(--border-primary));
  }
  .collapse-section__header {
    .collapse-section > & {
      background-color: var(--bg-collapse-section-header);
      border-bottom: 1px solid var(--border-collapse-divider);
    }
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-collapse-trigger);
    .collapse-section--flush > & {
      background-color: transparent;
    }
    &.is-sticky {
      position: sticky;
      top: 0;
      z-index: 2;
      backdrop-filter: blur(8px);
      background-color: var(--bg-collapse-section-header);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix( in oklab, var(--bg-collapse-section-header) 85%, transparent );
      }
    }
  }
  .panel-list-subheader {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-list-section-header, var(--text-tertiary));
    background-color: var(--bg-list-section-header, var(--bg-primary-subtle));
    border-color: var(--border-list-divider, var(--border-primary-subtle));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    .panel-list--sectioned > & {
      position: sticky;
      top: 0;
      z-index: 2;
    }
  }
  .panel-list-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-list-header, var(--text-secondary));
    border-color: var(--border-list-header, var(--border-primary-subtle));
    background-color: var(--bg-list-header, var(--bg-primary-subtle));
    &.is-sticky {
      position: sticky;
      top: 0;
      z-index: 2;
      backdrop-filter: blur(8px);
      background-color: var(--bg-list-header);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix( in oklab, var(--bg-list-header) 80%, transparent );
      }
    }
    .panel-list--sectioned > & {
      position: sticky;
      top: 0;
      z-index: 2;
    }
  }
  .emoji-picker__category-label {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 4px 4px;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    background-color: var(--bg-popover, var(--bg-card));
  }
  .docs-toc__sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--bg-primary);
    padding: 28px 20px;
  }
  .is-sticky {
    &.collapse-section__header {
      position: sticky;
      top: 0;
      z-index: 2;
      backdrop-filter: blur(8px);
      background-color: var(--bg-collapse-section-header);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix( in oklab, var(--bg-collapse-section-header) 85%, transparent );
      }
    }
    & .collapse-trigger {
      position: sticky;
      top: 0;
      z-index: 2;
      backdrop-filter: blur(8px);
      background-color: var(--bg-collapse-section-header);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix( in oklab, var(--bg-collapse-section-header) 85%, transparent );
      }
    }
  }
  .is-sticky {
    &.panel-list-header {
      position: sticky;
      top: 0;
      z-index: 2;
      backdrop-filter: blur(8px);
      background-color: var(--bg-list-header);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix( in oklab, var(--bg-list-header) 80%, transparent );
      }
    }
  }
  .panel-list--sectioned {
    & > .panel-list-header {
      position: sticky;
      top: 0;
      z-index: 2;
    }
    & > .panel-list-subheader {
      position: sticky;
      top: 0;
      z-index: 2;
    }
    & .panel-list__section + .panel-list__section {
      border-top: 1px solid var(--border-list-divider);
    }
  }
  .carousel__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--bg-carousel-progress-track);
    z-index: 4;
    overflow: hidden;
    & ~ .carousel__dots {
      bottom: 10px;
    }
    .carousel:has(&) .carousel__dots {
      bottom: 10px;
    }
    .carousel--player & {
      display: block;
    }
  }
  .panel-list--inset-dividers {
    & .panel-item {
      border-bottom-color: var(--alpha-0);
    }
    & .panel-item::after {
      content: '';
      position: absolute;
      left: var(--space-list-inset, 3rem);
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: var(--border-list-divider, var(--border-primary-subtle));
    }
    & .panel-item:last-child::after {
      display: none;
    }
  }
  .media__figure {
    position: relative;
    flex: 0 0 auto;
    width: var(--media-figure-size);
    height: var(--media-figure-size);
    border-radius: var(--media-figure-radius);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: calc(var(--media-figure-size) * 0.42);
    & > img, & > svg, & > picture {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    &[data-status]::after {
      content: '';
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 30%;
      height: 30%;
      border-radius: var(--radius-full);
      background-color: var(--text-tertiary);
      box-shadow: 0 0 0 2px var(--bg-primary);
    }
    &[data-status='online']::after {
      background-color: var(--text-success);
    }
    &[data-status='busy']::after {
      background-color: var(--text-danger);
    }
    &[data-status='away']::after {
      background-color: var(--text-warning);
    }
    &[data-status='offline']::after {
      background-color: var(--text-tertiary);
    }
  }
  .ss-minimap {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 220px;
    height: 160px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--ss-border), var(--shadow-md);
  }
  .ss-tool__kbd {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 8.5px;
    color: var(--ss-muted);
    opacity: 0.7;
    .ss-tool.is-active & {
      color: var(--ss-accent);
    }
  }
  .dropdown-menu-base {
    position: absolute;
    z-index: 9999;
    display: none;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: var(--spacing);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    min-width: 10rem;
    right: 0;
    left: auto;
    background-color: var(--bg-dropdown);
    border-color: var(--border-dropdown);
    color: var(--text-dropdown);
    backdrop-filter: var(--blur-dropdown-backdrop);
    box-shadow: var(--shadow-dropdown);
  }
  .ss-toast {
    position: absolute;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-xl);
    background: var(--ss-surface);
    box-shadow: inset 0 0 0 1px var(--ss-border), var(--shadow-lg);
    z-index: 20;
    font-size: 12.5px;
    max-width: 540px;
    animation: ss-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
    & i {
      color: var(--ss-accent);
      font-size: 16px;
    }
  }
  .carousel__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--alpha-black-30);
    backdrop-filter: blur(4px);
    .carousel__progress ~ & {
      bottom: 10px;
    }
    .carousel:has(.carousel__progress) & {
      bottom: 10px;
    }
    .carousel--minimal & {
      display: none;
    }
    .carousel--compact & {
      display: none;
    }
  }
  .ss-status {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ss-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-surface) 92%, transparent);
    }
    backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px var(--ss-border), var(--shadow-md);
    font-size: 11.5px;
    color: var(--ss-text);
  }
  .ss-shell {
    --ss-canvas: var(--bg-studio-canvas, var(--bg-canvas, var(--bg-overlay)));
    --ss-bg: var(--ss-canvas);
    --ss-surface: var(--bg-card);
    --ss-surface-soft: var(--bg-card);
    @supports (color: color-mix(in lab, red, red)) {
      --ss-surface-soft: color-mix(in srgb, var(--bg-card) 80%, transparent);
    }
    --ss-border: var(--border-default);
    --ss-divider: var(--border-divider);
    --ss-text: var(--text-primary);
    --ss-muted: var(--text-tertiary);
    --ss-accent: var(--border-brand);
    --ss-accent-solid: var(--bg-brand-solid);
    --ss-accent-solid-hover: var(--bg-brand-solid-hover);
    --ss-on-accent: var(--text-on-brand);
    --ss-focus: var(--border-focus);
    position: relative;
    width: 100%;
    height: calc( 100vh - var(--height-app-header, 56px) - var(--height-app-footer, 0px) );
    min-height: 600px;
    display: flex;
    flex-direction: column;
    background: var(--ss-bg);
    color: var(--ss-text);
    overflow: hidden;
    isolation: isolate;
    &.is-presenting .ss-topbar {
      display: none;
    }
    &.is-presenting .ss-left {
      display: none;
    }
    &.is-presenting .ss-right {
      display: none;
    }
    &.is-presenting .ss-timeline {
      display: none;
    }
    &.is-presenting .ss-viewport__chrome {
      opacity: 0.5;
    }
  }
  .inline-edit__affix-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    margin-left: -1px;
    background-color: var(--bg-input-addon, var(--utility-neutral-100));
    color: var(--text-inline-edit-muted);
    font-family: 'Space Mono', monospace;
    font-size: calc(var(--ie-font-size) - 0.5px);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    border-top-right-radius: var(--ie-radius);
    border-bottom-right-radius: var(--ie-radius);
    position: relative;
    z-index: 0;
    .inline-edit__field:focus ~ & {
      box-shadow: inset 0 0 0 1px var(--border-focus), var(--shadow-xs);
    }
  }
  .step-content {
    min-width: 0;
    padding-right: var(--space-step-end, 1rem);
    position: relative;
    z-index: 1;
    .stepper-horizontal &, .stepper-vertical & {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: var(--size-step-indicator);
    }
    .stepper-pill & {
      padding-right: 0;
    }
    .stepper-card & {
      padding-right: 0;
    }
    .stepper-chevron .step & {
      padding-right: 0;
    }
    .stepper-timeline & {
      border-radius: var(--radius-lg);
      padding: calc(var(--spacing) * 3);
      background-color: var(--bg-step-card);
      border: 1px solid var(--border-step-card);
      flex: 1;
      padding-right: 12px;
    }
  }
  .inline-edit__affix-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    background-color: var(--bg-input-addon, var(--utility-neutral-100));
    color: var(--text-inline-edit-muted);
    font-family: 'Space Mono', monospace;
    font-size: calc(var(--ie-font-size) - 0.5px);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    border-top-left-radius: var(--ie-radius);
    border-bottom-left-radius: var(--ie-radius);
    position: relative;
    z-index: 0;
    &:has(+ .inline-edit__field:focus) {
      box-shadow: inset 0 0 0 1px var(--border-focus), var(--shadow-xs);
    }
  }
  .ss-popover {
    position: absolute;
    z-index: 250;
    min-width: 280px;
    padding: 12px;
    border-radius: var(--radius-xl);
    background: var(--ss-surface);
    box-shadow: inset 0 0 0 1px var(--ss-border), var(--shadow-xl);
  }
  .dashboard-grid__widget {
    --dash-widget-fill: transparent;
    --dash-widget-ring: transparent;
    --dash-widget-shadow: none;
    --dash-widget-radius: var(--radius-card-md, var(--radius-xl));
    --dash-pad: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--dash-widget-radius);
    @media (max-width: 640px) {
      &[class*='--span-'] {
        grid-column: 1 / -1;
      }
    }
  }
  .stepper-chevron {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--border-step-pill);
    & .step {
      position: relative;
      margin: 0;
      display: flex;
      &.collapse.show {
        display: flex;
      }
      flex: 1;
      align-items: center;
      gap: calc(var(--spacing) * 2);
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 2);
      background-color: var(--bg-step-chevron);
      color: var(--text-step-chevron);
      clip-path: polygon( 0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50% );
      margin-right: -10px;
      min-height: 0;
    }
    & .step::before {
      content: none;
    }
    & .step:first-child {
      clip-path: polygon( 0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100% );
    }
    & .step:last-child {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
      margin-right: 0;
    }
    & .step .step-indicator {
      width: 18px;
      height: 18px;
      background: transparent;
      color: inherit;
      border: 0;
      box-shadow: none;
      font-size: 10px;
    }
    & .step .step-content {
      padding-right: 0;
    }
    & .step .step-title {
      font-size: 12.5px;
      color: inherit;
    }
    & .step .step-subtitle {
      display: none;
    }
    & .step .step-connector {
      display: none;
    }
    & .step.is-current {
      background-color: var(--bg-step-chevron-current);
      color: var(--text-step-chevron-current);
      font-weight: 500;
    }
    & .step.is-completed {
      background-color: var(--bg-step-chevron-completed);
      color: var(--text-step-chevron-completed);
    }
    & .step.is-error {
      background-color: var(--bg-step-chevron-error);
      color: var(--text-step-chevron-error);
    }
    [data-contrast='high'] & .step {
      box-shadow: 0 0 0 2px currentColor inset;
    }
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .uploader__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .carousel__viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
    &::-webkit-scrollbar {
      display: none;
    }
    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
    .carousel--vertical & {
      overflow-x: hidden;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      height: var(--carousel-vertical-height, 20rem);
    }
    .carousel--split & {
      padding: 0 10% 0 10%;
    }
    .carousel.is-empty & {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }
    .carousel.is-loading & {
      background-color: var(--bg-carousel-skeleton);
      background-image: var(--bg-carousel-skeleton-sweep);
      background-size: 200% 100%;
      animation: carousel-skeleton 1.4s linear infinite;
      min-height: 200px;
    }
    @media (prefers-reduced-motion: reduce) {
      .carousel.is-loading & {
        animation: none;
      }
    }
    .carousel.is-error & {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      flex-direction: column;
      gap: 6px;
      padding: 24px;
    }
    .carousel.is-fullscreen & {
      height: 100vh;
    }
  }
  .carousel__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: var(--bg-carousel-thumbnail);
    transition: border-color 140ms ease, opacity 140ms ease, transform 140ms ease;
    position: relative;
    opacity: 0.7;
    &:hover {
      opacity: 1;
      background-color: var(--bg-carousel-thumbnail-hover);
    }
    &.is-active {
      opacity: 1;
      border-color: var(--border-focus);
      background-color: var(--bg-carousel-thumbnail-active);
    }
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
    .carousel--side-thumbs > .carousel__thumbs & {
      width: 68px;
      height: 52px;
    }
  }
  .ss-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ss-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    & i {
      font-size: 14px;
    }
    &:hover {
      color: var(--ss-text);
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 6%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    &.is-active {
      color: var(--ss-accent);
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 14%, transparent);
      }
    }
    &.is-active .ss-tool__kbd {
      color: var(--ss-accent);
    }
  }
  .color-swatch {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 100ms;
    transition-duration: 100ms;
    width: 1rem;
    height: 1rem;
    background-color: var(--swatch-color, transparent);
    outline: 1px solid var(--border-color-swatch);
    outline-offset: -1px;
  }
  .uploader__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 0;
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-secondary);
    min-width: 0;
    transition: box-shadow 120ms ease, background-color 120ms ease;
    &.is-success {
      box-shadow: inset 0 0 0 1px var(--border-success);
    }
    &.is-error {
      box-shadow: inset 0 0 0 2px var(--text-danger);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--text-danger) 55%, var(--border-secondary));
      }
      background-color: var(--text-danger);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklch, var(--text-danger) 4%, var(--bg-primary));
      }
    }
    &.is-success .uploader__thumb {
      color: var(--text-success);
      background-color: var(--bg-success-subtle);
    }
    &.is-error .uploader__thumb {
      color: var(--text-danger);
      background-color: var(--bg-danger-subtle);
    }
    &.is-success .uploader__detail {
      color: var(--text-success);
    }
    &.is-error .uploader__detail {
      color: var(--text-danger);
    }
    &.is-success .uploader__progress > span {
      background-color: var(--text-success);
      width: 100% !important;
    }
    &.is-error .uploader__progress > span {
      background-color: var(--text-danger);
    }
    &:not(.is-uploading):not(.is-error) .uploader__progress {
      display: none;
    }
  }
  .docs-search {
    position: relative;
    display: block;
    width: 100%;
  }
  .docs-overview__search {
    position: relative;
    display: block;
    flex: 1 1 auto;
    max-width: 420px;
  }
  .uploader__zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--uploader-gap);
    padding: var(--uploader-padding-y) var(--uploader-padding-x);
    border: 0;
    border-radius: var(--uploader-radius);
    background-color: var(--uploader-bg);
    color: var(--text-tertiary);
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--uploader-ring), var(--uploader-shadow);
    transition: box-shadow 120ms ease, background-color 120ms ease, color 120ms ease;
    -webkit-user-select: none;
    user-select: none;
    &:hover {
      box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--uploader-shadow);
      background-color: var(--uploader-bg-hover);
    }
    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--uploader-ring-focus), var(--uploader-shadow);
    }
    .uploader:has(.uploader__input:focus-visible) &, .uploader__input:focus-visible + & {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--uploader-ring-focus), var(--uploader-shadow);
    }
    .uploader.is-dragover &, &.is-dragover {
      box-shadow: inset 0 0 0 2px var(--uploader-ring-focus), var(--uploader-shadow);
      background-color: var(--uploader-accent-bg);
      color: var(--uploader-accent);
    }
    &.is-dragover .uploader__icon {
      transform: translateY(-2px) scale(1.04);
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    .uploader.is-disabled & {
      cursor: not-allowed;
    }
  }
  .wizard-step {
    display: none;
    position: relative;
    &.is-active {
      display: block;
    }
    .wizard[data-wizard-anim='slide'] &.is-active {
      animation: wizard-slide-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .wizard[data-wizard-anim='slide'][data-wizard-dir='back'] &.is-active {
      animation-name: wizard-slide-in-back;
    }
    @media (prefers-reduced-motion: reduce) {
      .wizard[data-wizard-anim='slide'] &.is-active {
        animation: none;
      }
    }
  }
  .radio-base {
    display: inline-flex;
    cursor: pointer;
    appearance: none;
    border-radius: var(--radius-full);
    border-style: var(--tw-border-style);
    border-width: 1px;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-radio);
    border-color: var(--border-radio);
    position: relative;
    --radio-dot-size: 0.5rem;
  }
  .ss-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 32px;
    border-radius: var(--radius-card-md, var(--radius-xl));
    background: linear-gradient( 135deg, var(--ss-accent) 0%, var(--ss-surface) 65% );
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient( 135deg, color-mix(in srgb, var(--ss-accent) 10%, var(--ss-surface)) 0%, var(--ss-surface) 65% );
    }
    overflow: hidden;
    @media (max-width: 760px) {
      grid-template-columns: 1fr;
      padding: 24px;
    }
  }
  .ss-viewport {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--ss-canvas);
  }
  .wizard-body {
    padding: calc(var(--spacing) * 4);
    position: relative;
    .wizard.wizard--side-rail & {
      flex: 1;
      overflow-y: auto;
      padding: 0;
    }
    .wizard--floating & {
      padding: 0;
    }
  }
  .collapse-section--danger {
    position: relative;
    border-left-width: 3px !important;
    border-left-style: solid;
    border-left-color: var(--border-collapse-intent-danger);
  }
  .collapse-section--info {
    position: relative;
    border-left-width: 3px !important;
    border-left-style: solid;
    border-left-color: var(--border-collapse-intent-info);
  }
  .collapse-section--success {
    position: relative;
    border-left-width: 3px !important;
    border-left-style: solid;
    border-left-color: var(--border-collapse-intent-success);
  }
  .collapse-section--warning {
    position: relative;
    border-left-width: 3px !important;
    border-left-style: solid;
    border-left-color: var(--border-collapse-intent-warning);
  }
  .\!relative {
    position: relative !important;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0;
  }
  .-inset-x-px {
    inset-inline: -1px;
  }
  .inset-x-0 {
    inset-inline: 0;
  }
  .inset-x-3 {
    inset-inline: calc(var(--spacing) * 3);
  }
  .inset-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }
  .inset-x-13 {
    inset-inline: calc(var(--spacing) * 13);
  }
  .inset-y-0 {
    inset-block: 0;
  }
  .inset-y-0\.5 {
    inset-block: calc(var(--spacing) * 0.5);
  }
  .end-3 {
    inset-inline-end: calc(var(--spacing) * 3);
  }
  .stepper-horizontal {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: flex-start;
    gap: var(--space-step-between, 1rem);
    & .step {
      flex: 1;
    }
    & .step-connector {
      height: var(--size-step-connector);
      top: calc(var(--size-step-indicator) / 2 - var(--size-step-connector) / 2);
      left: calc(var(--size-step-indicator) + var(--space-step-content));
      right: var(--space-step-end, 1rem);
      border-radius: 999px;
    }
    & .step:last-child .step-connector {
      display: none;
    }
  }
  .stepper-vertical {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    & .step {
      padding-bottom: 0;
      min-height: var(--height-step-vertical, 4rem);
    }
    & .step:last-child {
      min-height: 0;
    }
    & .step-connector {
      width: var(--size-step-connector);
      left: calc(var(--size-step-indicator) / 2 - var(--size-step-connector) / 2);
      top: calc(var(--size-step-indicator) + 8px);
      bottom: 0;
      border-radius: 999px;
    }
    & .step:last-child .step-connector {
      display: none;
    }
    & .step-connector-fill {
      height: 0;
      width: 100%;
    }
    & .step.is-completed .step-connector-fill {
      height: 100%;
    }
    &.stepper--dotted .step-connector {
      background-image: repeating-linear-gradient( 0, var(--bg-step-connector), var(--bg-step-connector) 3px, transparent 3px, transparent 7px );
    }
  }
  .stepper-timeline {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    gap: 0;
    --size-step-indicator: 32px;
    & .step {
      padding-bottom: calc(var(--spacing) * 6);
      min-height: 0;
    }
    & .step:last-child {
      padding-bottom: 0;
    }
    & .step-content {
      border-radius: var(--radius-lg);
      padding: calc(var(--spacing) * 3);
      background-color: var(--bg-step-card);
      border: 1px solid var(--border-step-card);
      flex: 1;
      padding-right: 12px;
    }
    & .step-title {
      font-size: 14px;
    }
    & .step-subtitle {
      font-size: 12px;
    }
    & .step .step-connector {
      width: 2px;
      left: calc(var(--size-step-indicator) / 2 - 1px);
      top: calc(var(--size-step-indicator) + 8px);
      bottom: -8px;
    }
  }
  .-top-0\.5 {
    top: calc(var(--spacing) * -0.5);
  }
  .-top-0\.25 {
    top: calc(var(--spacing) * -0.25);
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .-top-2\.5 {
    top: calc(var(--spacing) * -2.5);
  }
  .-top-3 {
    top: calc(var(--spacing) * -3);
  }
  .-top-4 {
    top: calc(var(--spacing) * -4);
  }
  .-top-5 {
    top: calc(var(--spacing) * -5);
  }
  .-top-6 {
    top: calc(var(--spacing) * -6);
  }
  .-top-12 {
    top: calc(var(--spacing) * -12);
  }
  .-top-\[19px\] {
    top: calc(19px * -1);
  }
  .-top-\[24px\] {
    top: calc(24px * -1);
  }
  .-top-\[141px\] {
    top: calc(141px * -1);
  }
  .-top-px {
    top: -1px;
  }
  .top-0 {
    top: 0;
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1 {
    top: var(--spacing);
  }
  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-2\.5 {
    top: calc(var(--spacing) * 2.5);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-5 {
    top: calc(var(--spacing) * 5);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .top-10 {
    top: calc(var(--spacing) * 10);
  }
  .top-12 {
    top: calc(var(--spacing) * 12);
  }
  .top-14 {
    top: calc(var(--spacing) * 14);
  }
  .top-16 {
    top: calc(var(--spacing) * 16);
  }
  .top-18 {
    top: calc(var(--spacing) * 18);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-24 {
    top: calc(var(--spacing) * 24);
  }
  .top-26 {
    top: calc(var(--spacing) * 26);
  }
  .top-28 {
    top: calc(var(--spacing) * 28);
  }
  .top-100 {
    top: calc(var(--spacing) * 100);
  }
  .top-\[7px\] {
    top: 7px;
  }
  .top-full {
    top: 100%;
  }
  .docs-edge--right {
    right: 0;
    @media (hover: hover) and (pointer: fine) and (max-width: 1280px) {
      display: block;
    }
  }
  .-right-0\.5 {
    right: calc(var(--spacing) * -0.5);
  }
  .-right-0\.25 {
    right: calc(var(--spacing) * -0.25);
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .-right-1\/4 {
    right: calc(calc(1 / 4 * 100%) * -1);
  }
  .-right-2\/3 {
    right: calc(calc(2 / 3 * 100%) * -1);
  }
  .-right-4 {
    right: calc(var(--spacing) * -4);
  }
  .-right-10 {
    right: calc(var(--spacing) * -10);
  }
  .-right-11 {
    right: calc(var(--spacing) * -11);
  }
  .-right-12 {
    right: calc(var(--spacing) * -12);
  }
  .-right-16 {
    right: calc(var(--spacing) * -16);
  }
  .-right-\[3\.667px\] {
    right: calc(3.667px * -1);
  }
  .-right-\[67\.09px\] {
    right: calc(67.09px * -1);
  }
  .-right-px {
    right: -1px;
  }
  .right-0 {
    right: 0;
  }
  .right-0\.5 {
    right: calc(var(--spacing) * 0.5);
  }
  .right-1 {
    right: var(--spacing);
  }
  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }
  .right-1\/2 {
    right: calc(1 / 2 * 100%);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-2\.5 {
    right: calc(var(--spacing) * 2.5);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-3\.5 {
    right: calc(var(--spacing) * 3.5);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-8 {
    right: calc(var(--spacing) * 8);
  }
  .right-12 {
    right: calc(var(--spacing) * 12);
  }
  .right-16 {
    right: calc(var(--spacing) * 16);
  }
  .right-22 {
    right: calc(var(--spacing) * 22);
  }
  .right-\[0\.125rem\] {
    right: 0.125rem;
  }
  .right-\[47\%\] {
    right: 47%;
  }
  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -0.5);
  }
  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }
  .-bottom-1\.5 {
    bottom: calc(var(--spacing) * -1.5);
  }
  .-bottom-2 {
    bottom: calc(var(--spacing) * -2);
  }
  .-bottom-3 {
    bottom: calc(var(--spacing) * -3);
  }
  .-bottom-5 {
    bottom: calc(var(--spacing) * -5);
  }
  .-bottom-6 {
    bottom: calc(var(--spacing) * -6);
  }
  .-bottom-10 {
    bottom: calc(var(--spacing) * -10);
  }
  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }
  .-bottom-14 {
    bottom: calc(var(--spacing) * -14);
  }
  .-bottom-24 {
    bottom: calc(var(--spacing) * -24);
  }
  .-bottom-\[3\.667px\] {
    bottom: calc(3.667px * -1);
  }
  .-bottom-px {
    bottom: -1px;
  }
  .bottom-0 {
    bottom: 0;
  }
  .bottom-0\.5 {
    bottom: calc(var(--spacing) * 0.5);
  }
  .bottom-1 {
    bottom: var(--spacing);
  }
  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-2\.5 {
    bottom: calc(var(--spacing) * 2.5);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-8 {
    bottom: calc(var(--spacing) * 8);
  }
  .bottom-9 {
    bottom: calc(var(--spacing) * 9);
  }
  .bottom-10 {
    bottom: calc(var(--spacing) * 10);
  }
  .bottom-14 {
    bottom: calc(var(--spacing) * 14);
  }
  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }
  .bottom-23 {
    bottom: calc(var(--spacing) * 23);
  }
  .bottom-\[15px\] {
    bottom: 15px;
  }
  .bottom-\[53px\] {
    bottom: 53px;
  }
  .bottom-\[var\(--stripe-height\)\] {
    bottom: var(--stripe-height);
  }
  .docs-edge--left {
    left: 0;
    @media (hover: hover) and (pointer: fine) and (max-width: 960px) {
      display: block;
    }
  }
  .-left-4 {
    left: calc(var(--spacing) * -4);
  }
  .-left-10 {
    left: calc(var(--spacing) * -10);
  }
  .-left-12 {
    left: calc(var(--spacing) * -12);
  }
  .-left-18 {
    left: calc(var(--spacing) * -18);
  }
  .-left-\[5px\] {
    left: calc(5px * -1);
  }
  .left-0 {
    left: 0;
  }
  .left-1\.5 {
    left: calc(var(--spacing) * 1.5);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-3\.5 {
    left: calc(var(--spacing) * 3.5);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-5 {
    left: calc(var(--spacing) * 5);
  }
  .left-6 {
    left: calc(var(--spacing) * 6);
  }
  .left-8 {
    left: calc(var(--spacing) * 8);
  }
  .left-12 {
    left: calc(var(--spacing) * 12);
  }
  .left-14 {
    left: calc(var(--spacing) * 14);
  }
  .left-16 {
    left: calc(var(--spacing) * 16);
  }
  .left-24 {
    left: calc(var(--spacing) * 24);
  }
  .left-28 {
    left: calc(var(--spacing) * 28);
  }
  .left-50 {
    left: calc(var(--spacing) * 50);
  }
  .left-\[-98px\] {
    left: -98px;
  }
  .left-\[-218px\] {
    left: -218px;
  }
  .left-\[20px\] {
    left: 20px;
  }
  .left-\[47\%\] {
    left: 47%;
  }
  .left-\[53\%\] {
    left: 53%;
  }
  .left-\[187px\] {
    left: 187px;
  }
  .isolate {
    isolation: isolate;
  }
  .carousel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background-color: var(--bg-carousel-control);
    color: var(--text-carousel-control);
    border: 1px solid var(--border-carousel-control);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease, opacity 140ms ease;
    z-index: 4;
    &:hover {
      background-color: var(--bg-carousel-control-hover);
    }
    &:active {
      background-color: var(--bg-carousel-control-active);
      transform: scale(0.96);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
    .carousel__controls & {
      width: 30px;
      height: 30px;
      font-size: 12px;
    }
  }
  .ss-topbar {
    .ss-shell.is-presenting & {
      display: none;
    }
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid var(--ss-divider);
    background-color: var(--ss-surface);
    z-index: 5;
  }
  .docs-header {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 520px) 1fr;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-divider);
    z-index: 30;
    @media (max-width: 960px) {
      grid-template-columns: 1fr auto;
    }
  }
  .inline-edit-popover {
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-inline-edit-popover);
    border-radius: var(--radius-xl);
    padding: 10px 12px;
    min-width: 240px;
    max-width: 360px;
    z-index: 50;
  }
  .-z-\[999\] {
    z-index: calc(999 * -1);
  }
  .z-0 {
    z-index: 0;
  }
  .z-1 {
    z-index: 1;
  }
  .z-2 {
    z-index: 2;
  }
  .z-3 {
    z-index: 3;
  }
  .z-4 {
    z-index: 4;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-60 {
    z-index: 60;
  }
  .z-1500 {
    z-index: 1500;
  }
  .z-\[2\] {
    z-index: 2;
  }
  .z-\[30\] {
    z-index: 30;
  }
  .z-\[99\] {
    z-index: 99;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[999\] {
    z-index: 999;
  }
  .z-\[1500\] {
    z-index: 1500;
  }
  .z-\[var\(--z-behind\)\] {
    z-index: var(--z-behind);
  }
  .z-\[var\(--z-index\)\] {
    z-index: var(--z-index);
  }
  .z-\[…\] {
    z-index: …;
  }
  .order-2 {
    order: 2;
  }
  .order-3 {
    order: 3;
  }
  .order-first {
    order: -9999;
  }
  .order-last {
    order: 9999;
  }
  .dashboard-grid__section {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .ss-recent-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 16px;
    border-radius: var(--radius-card-md, var(--radius-xl));
    border: 1px dashed var(--ss-divider);
    color: var(--ss-muted);
    & i {
      font-size: 28px;
      color: var(--ss-muted);
      opacity: 0.6;
    }
  }
  .col-3 {
    grid-column: 3;
  }
  .col-4 {
    grid-column: 4;
  }
  .col-6 {
    grid-column: 6;
  }
  .col-auto {
    grid-column: auto;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
  .col-span-5 {
    grid-column: span 5 / span 5;
  }
  .col-span-6 {
    grid-column: span 6 / span 6;
  }
  .col-span-7 {
    grid-column: span 7 / span 7;
  }
  .col-span-8 {
    grid-column: span 8 / span 8;
  }
  .col-span-9 {
    grid-column: span 9 / span 9;
  }
  .col-span-10 {
    grid-column: span 10 / span 10;
  }
  .col-span-12 {
    grid-column: span 12 / span 12;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .dashboard-grid__widget--span-1 {
    grid-column: span 1;
  }
  .dashboard-grid__widget--span-2 {
    grid-column: span 2;
  }
  .dashboard-grid__widget--span-3 {
    grid-column: span 3;
  }
  .dashboard-grid__widget--span-4 {
    grid-column: span 4;
  }
  .dashboard-grid__widget--span-5 {
    grid-column: span 5;
  }
  .dashboard-grid__widget--span-6 {
    grid-column: span 6;
  }
  .dashboard-grid__widget--span-8 {
    grid-column: span 8;
  }
  .dashboard-grid__widget--span-12 {
    grid-column: span 12;
  }
  .dashboard-grid__widget--span-full {
    grid-column: 1 / -1;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .col-start-4 {
    grid-column-start: 4;
  }
  .dashboard-grid__widget--row-2 {
    grid-row: span 2;
  }
  .dashboard-grid__widget--row-3 {
    grid-row: span 3;
  }
  .dashboard-grid__widget--row-full {
    grid-row: 1 / -1;
  }
  .row-2 {
    grid-row: 2;
  }
  .row-span-2 {
    grid-row: span 2 / span 2;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .docs-rule {
    border: 1px solid var(--border-table-container, var(--border-divider));
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    font-size: 12.5px;
    line-height: 1.5;
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & {
      background-color: var(--bg-primary);
    }
    & p {
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--text-secondary);
      margin: 0;
      padding: 14px;
    }
    & .docs-list {
      font-size: 12.5px;
      line-height: 1.5;
      padding: 14px 14px 14px 32px;
    }
    & .docs-list > li {
      margin-bottom: 4px;
    }
    & .docs-list > li:last-child {
      margin-bottom: 0;
    }
  }
  .docs-list {
    & code {
      background-color: transparent;
      padding: 0;
      border-radius: 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.92em;
      color: var(--text-primary);
    }
    list-style: disc outside;
    padding: 0 0 0 20px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    & > li {
      display: list-item;
      margin: 0 0 6px 0;
      padding-left: 4px;
    }
    & > li:last-child {
      margin-bottom: 0;
    }
    & > li::marker {
      color: var(--text-tertiary);
    }
    .docs-rule & {
      font-size: 12.5px;
      line-height: 1.5;
      padding: 14px 14px 14px 32px;
    }
    .docs-rule & > li {
      margin-bottom: 4px;
    }
    .docs-rule & > li:last-child {
      margin-bottom: 0;
    }
  }
  .docs-ordered-list {
    list-style: decimal outside;
    padding: 0 0 0 24px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    & > li {
      display: list-item;
      margin: 0 0 8px 0;
      padding-left: 4px;
    }
    & > li:last-child {
      margin-bottom: 0;
    }
    & > li::marker {
      color: var(--text-tertiary);
      font-family: 'Space Mono', monospace;
      font-size: 12px;
    }
  }
  .docs-partial {
    & .code-block {
      font-size: 11px !important;
      line-height: 1.5 !important;
    }
    & pre code {
      font-size: 11px !important;
      line-height: 1.5 !important;
    }
    & > [data-ds-section] {
      padding-bottom: 0 !important;
      border-bottom: 0 !important;
      margin-bottom: 0 !important;
    }
    & .section-title {
      font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
      font-size: 22px !important;
      font-weight: 700 !important;
      line-height: 1.2 !important;
      color: var(--text-primary) !important;
      margin: 16px 0 4px !important;
      letter-spacing: -0.015em !important;
    }
    & [data-ds-sub] {
      scroll-margin-top: 12px;
    }
  }
  .inline-edit__display {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: var(--ie-pad-y) var(--ie-pad-x);
    border-radius: var(--ie-radius);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    user-select: text;
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }
    &:hover .inline-edit__trigger {
      background-color: var(--bg-inline-edit-trigger-hover);
      color: var(--text-inline-edit-trigger-hover);
    }
    .inline-edit.is-editing > &, .inline-edit.inline-edit--editing > & {
      display: none;
    }
    .inline-edit.is-success & {
      color: var(--text-inline-edit-success);
    }
    .inline-edit.is-readonly & {
      cursor: not-allowed;
    }
    .inline-edit--link & {
      color: var(--text-inline-link-edit);
      text-decoration: underline dotted;
      text-underline-offset: 3px;
    }
    .inline-edit--link &:hover {
      color: var(--text-inline-link-edit-hover);
    }
    .inline-edit--quiet & {
      padding-left: 0;
      padding-right: 0;
    }
    .inline-edit--button & {
      box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
      background-color: var(--bg-input);
      padding: 5px 10px;
    }
    .inline-edit--button &:hover {
      box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
      background-color: var(--bg-inline-edit-hover);
    }
    .inline-edit--cell & {
      width: 100%;
    }
    .inline-edit--cell & .inline-edit__trigger {
      margin-left: auto;
    }
    .inline-edit--card & {
      flex: 1;
    }
    .inline-edit--card & .inline-edit__trigger {
      margin-left: auto;
    }
    .inline-edit--textarea & {
      width: 100%;
      align-items: stretch;
    }
  }
  .stepper-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    border-radius: var(--radius-full);
    padding: var(--spacing);
    background-color: var(--bg-step-pill);
    border: 1px solid var(--border-step-pill);
    width: auto;
    & .step {
      margin: 0;
      display: flex;
      &.collapse.show {
        display: flex;
      }
      align-items: center;
      gap: calc(var(--spacing) * 2);
      border-radius: var(--radius-full);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: var(--spacing);
      color: var(--text-step-pill);
      min-height: 0;
      flex: 0 0 auto;
    }
    & .step::before {
      content: none;
    }
    & .step-indicator {
      width: 18px;
      height: 18px;
      font-size: 10px;
      box-shadow: none;
      background: transparent;
      border: 0;
      color: inherit;
    }
    & .step-content {
      padding-right: 0;
    }
    & .step-title {
      font-size: 12.5px;
      color: inherit;
    }
    & .step-subtitle {
      display: none;
    }
    & .step-connector {
      display: none;
    }
    & .step.is-current {
      background-color: var(--bg-step-pill-current);
      color: var(--text-step-pill-current);
    }
    & .step.is-completed {
      color: var(--bg-step-pill-completed);
    }
    & .step.is-completed .step-indicator {
      color: inherit;
    }
    [data-contrast='high'] & .step.is-current {
      box-shadow: 0 0 0 2px currentColor inset;
    }
  }
  .stepper-card {
    display: grid;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    & .step {
      margin: 0;
      flex-direction: column;
      align-items: flex-start;
      border-radius: var(--radius-lg);
      border-style: var(--tw-border-style);
      border-width: 1px;
      padding: calc(var(--spacing) * 3);
      background-color: var(--bg-step-card);
      border-color: var(--border-step-card);
      box-shadow: var(--shadow-step-card);
      min-height: 0;
      gap: 8px;
      transition: box-shadow 160ms ease, transform 160ms ease;
    }
    & .step::before {
      content: none;
    }
    & .step .step-connector {
      display: none;
    }
    & .step-content {
      padding-right: 0;
    }
    & .step.is-current {
      box-shadow: var(--shadow-step-card-current);
      transform: translateY(-1px);
    }
    & .step.is-clickable:hover {
      transform: translateY(-1px);
    }
  }
  .docs-checklist {
    & code {
      background-color: transparent;
      padding: 0;
      border-radius: 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.92em;
      color: var(--text-primary);
    }
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    & li {
      display: grid;
      grid-template-columns: 20px 1fr;
      align-items: start;
      gap: 10px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.5;
    }
    & li > i {
      color: var(--text-success);
      font-size: 14px;
      line-height: 1.4;
    }
  }
  .docs-overview__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 26px;
  }
  .wizard-summary {
    margin: 0 16px 12px;
    padding: 0;
    background-color: transparent;
    color: var(--text-danger);
    border: 0;
    font-size: 12.5px;
    &[hidden] {
      display: none;
    }
  }
  .ss-steps {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0 20px;
    border-bottom: 1px solid var(--ss-divider);
  }
  .ss-topbar__sep {
    width: 1px;
    height: 22px;
    background: var(--ss-divider);
    margin: 0 4px;
  }
  .docs-canvas {
    max-width: var(--docs-canvas-max);
    margin: 0 auto;
    padding: 40px var(--docs-gutter) 96px;
    transition: opacity 120ms ease;
    body[data-docs-loading='1'] & {
      opacity: 0.6;
    }
  }
  .docs-hero__lead {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 60ch;
    margin: 0;
  }
  .docs-page-header__lead {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 64ch;
    margin: 0;
  }
  .media--clickable {
    cursor: pointer;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--radius-lg);
    transition: background-color var(--duration-fast) var(--ease-default);
    text-decoration: none;
    color: inherit;
    &:hover {
      background-color: var(--bg-secondary);
    }
    &:hover .media__chevron {
      transform: translateX(2px);
      color: var(--text-secondary);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: -2px;
    }
    &:active {
      background-color: var(--bg-tertiary);
    }
    &.media--card {
      margin: 0;
    }
  }
  .docs-section__heading {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 8px 0 4px;
    scroll-margin-top: 12px;
  }
  .media--selected {
    background-color: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--bg-brand-solid) 8%, transparent);
    }
    border-radius: var(--radius-lg);
    padding: 8px 10px;
    margin: 0 -10px;
    & .media__title {
      color: var(--text-link);
    }
  }
  .media--card {
    background-color: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 14px 16px;
    box-shadow: inset 0 0 0 1px var(--border-divider), var(--shadow-xs);
    &.media--clickable {
      margin: 0;
    }
  }
  .wizard-summary__list {
    margin: 0;
    padding-left: 18px;
  }
  .docs-hero__title {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
  }
  .docs-page-header__title {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 8px;
  }
  .section-title {
    .docs-partial & {
      font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
      font-size: 22px !important;
      font-weight: 700 !important;
      line-height: 1.2 !important;
      color: var(--text-primary) !important;
      margin: 16px 0 4px !important;
      letter-spacing: -0.015em !important;
    }
  }
  .docs-section__subheading {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 4px 0 2px;
  }
  .-m-1 {
    margin: calc(var(--spacing) * -1);
  }
  .-m-4 {
    margin: calc(var(--spacing) * -4);
  }
  .m-0 {
    margin: 0;
  }
  .m-2 {
    margin: calc(var(--spacing) * 2);
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .m-auto {
    margin: auto;
  }
  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }
  .-mx-6 {
    margin-inline: calc(var(--spacing) * -6);
  }
  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * 0.5);
  }
  .mx-1 {
    margin-inline: var(--spacing);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }
  .mx-\[3px\] {
    margin-inline: 3px;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-my-0\.5 {
    margin-block: calc(var(--spacing) * -0.5);
  }
  .-my-1 {
    margin-block: calc(var(--spacing) * -1);
  }
  .-my-2 {
    margin-block: calc(var(--spacing) * -2);
  }
  .-my-8 {
    margin-block: calc(var(--spacing) * -8);
  }
  .-my-px {
    margin-block: -1px;
  }
  .my-0 {
    margin-block: 0;
  }
  .my-1 {
    margin-block: var(--spacing);
  }
  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .my-3\.5 {
    margin-block: calc(var(--spacing) * 3.5);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }
  .my-auto {
    margin-block: auto;
  }
  .media__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: 'Space Mono', monospace;
    font-size: var(--media-meta-size);
    color: var(--text-tertiary);
    margin-top: 4px;
    & > * + *::before {
      content: '·';
      margin-right: 6px;
      color: var(--text-quaternary);
      opacity: 0.6;
    }
  }
  .panel-item-meta {
    margin-top: calc(var(--spacing) * 0.5);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    font-family: 'Space Mono', monospace;
    color: var(--text-list-item-meta, var(--text-list-item-subtitle));
    & > * + *::before {
      content: '·';
      margin-right: 6px;
      opacity: 0.6;
    }
  }
  .carousel__slide-meta {
    margin-top: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    color: var(--text-carousel-meta);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    & > * + *::before {
      content: '·';
      margin-right: 6px;
      opacity: 0.6;
    }
  }
  .media--stacked {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    & .media__figure {
      margin-bottom: 6px;
    }
    & .media__trailing {
      margin-left: 0;
      margin-top: 6px;
    }
  }
  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
    :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: decimal;
    }
    :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C""\201D""\2018""\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: open-quote;
    }
    :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: close-quote;
    }
    :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: "`";
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: "`";
    }
    :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: none;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: none;
    }
    :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: top;
    }
    :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      text-align: start;
    }
    :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    --tw-prose-body: oklch(37.3% 0.034 259.733);
    --tw-prose-headings: oklch(21% 0.034 264.665);
    --tw-prose-lead: oklch(44.6% 0.03 256.802);
    --tw-prose-links: oklch(21% 0.034 264.665);
    --tw-prose-bold: oklch(21% 0.034 264.665);
    --tw-prose-counters: oklch(55.1% 0.027 264.364);
    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
    --tw-prose-hr: oklch(92.8% 0.006 264.531);
    --tw-prose-quotes: oklch(21% 0.034 264.665);
    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-captions: oklch(55.1% 0.027 264.364);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
    --tw-prose-code: oklch(21% 0.034 264.665);
    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
    :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .dashboard-grid__widget--flush {
    --dash-widget-fill: var(--bg-card, var(--alpha-white-100));
    --dash-widget-ring: var(--border-card, var(--border-primary));
    --dash-widget-shadow: var(--shadow-xs);
    padding: 0;
    overflow: hidden;
    background-color: var(--dash-widget-fill);
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
    & .dashboard-grid__widget-header {
      margin-bottom: 0;
      padding: 14px 16px 12px;
      border-bottom: 1px solid var(--border-divider);
    }
    & .dashboard-grid__widget-body {
      padding: 12px 16px 14px;
    }
    & .dashboard-grid__widget-footer {
      margin-top: 0;
      padding: 10px 16px;
    }
  }
  .step__substeps {
    margin-top: 4px;
    padding-left: 6px;
    border-left: 1px dashed var(--border-step-indicator);
    margin-left: calc(var(--size-step-indicator) / 2 - 0.5px);
  }
  .uploader__progress {
    margin-top: 4px;
    height: 4px;
    width: 100%;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    & > span {
      display: block;
      height: 100%;
      width: 0%;
      background-color: var(--uploader-accent);
      border-radius: var(--radius-full);
      transition: width 120ms linear;
    }
    @media (prefers-reduced-motion: reduce) {
      & > span {
        transition: none;
      }
    }
  }
  .inline-edit--textarea {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    & .inline-edit__display {
      width: 100%;
      align-items: stretch;
    }
    & .inline-edit__editor {
      width: 100%;
      align-items: stretch;
    }
    & .inline-edit__value {
      white-space: pre-wrap;
      overflow: visible;
      text-overflow: clip;
    }
    & textarea.inline-edit__field {
      min-height: 80px;
      resize: vertical;
      line-height: 1.5;
      font-family: inherit;
    }
    & .inline-edit__actions {
      margin-top: 6px;
      justify-content: flex-end;
    }
  }
  .inline-edit__feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
    font-size: 11.5px;
    color: var(--text-inline-edit-muted);
    flex-basis: 100%;
    .inline-edit:has(&) {
      flex-wrap: wrap;
    }
    .inline-edit:has(&) .inline-edit__editor {
      flex-wrap: nowrap;
    }
  }
  .inline-edit__actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    .inline-edit--textarea & {
      margin-top: 6px;
      justify-content: flex-end;
    }
  }
  .docs-prev-next {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border-divider);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .accordion {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-accordion);
    color: var(--text-accordion-title);
    & > * + * {
      border-top: 1px solid var(--border-accordion-divider);
    }
    &.accordion--xs {
      --accordion-py: 0.375rem;
      --accordion-py-body: 0.5rem;
      --accordion-px: 0.625rem;
      --accordion-fs: 11.5px;
    }
    &.accordion--sm {
      --accordion-py: 0.5rem;
      --accordion-py-body: 0.625rem;
      --accordion-px: 0.75rem;
      --accordion-fs: 12.5px;
    }
    &.accordion--md {
      --accordion-py: 0.625rem;
      --accordion-py-body: 0.75rem;
      --accordion-px: 1rem;
      --accordion-fs: 13px;
    }
    &.accordion--lg {
      --accordion-py: 0.875rem;
      --accordion-py-body: 1rem;
      --accordion-px: 1.125rem;
      --accordion-fs: 14px;
    }
    &.accordion--xl {
      --accordion-py: 1.125rem;
      --accordion-py-body: 1.125rem;
      --accordion-px: 1.25rem;
      --accordion-fs: 15px;
    }
    .accordion__body > & {
      margin-top: 8px;
      border-left: 2px solid var(--border-accordion-divider);
      padding-left: 8px;
    }
    .accordion__body > & > .accordion__item {
      --accordion-py: 0.375rem;
      --accordion-py-body: 0.5rem;
      --accordion-fs: 12px;
    }
  }
  .panel-item-detail__toolbar {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing);
  }
  .dashboard-grid__widget-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-divider);
    font-size: 11px;
    color: var(--text-tertiary);
    .dashboard-grid__widget--flush & {
      margin-top: 0;
      padding: 10px 16px;
    }
  }
  .media__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
  }
  .panel-item-detail {
    margin-top: calc(var(--spacing) * 2);
    display: none;
    padding-top: calc(var(--spacing) * 3);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-list-item-subtitle);
    border-top: 1px dashed var(--border-list-divider);
    .panel-item.is-expanded & {
      display: block;
    }
  }
  .step-subtitle {
    margin-top: var(--spacing);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    color: var(--text-step-subtitle);
    .step.is-disabled & {
      color: var(--text-step-disabled);
    }
    .step.is-locked & {
      color: var(--text-step-disabled);
    }
    .step.is-skipped & {
      color: var(--text-step-skipped);
      text-decoration: line-through;
      text-decoration-color: var(--border-step-skipped);
      text-decoration-thickness: 1px;
    }
    .stepper-pill & {
      display: none;
    }
    .stepper-chevron .step & {
      display: none;
    }
    .stepper-timeline & {
      font-size: 12px;
    }
  }
  .step-bar__track {
    margin-top: auto;
    width: 100%;
    overflow: hidden;
    height: var(--h-step-bar, 4px);
    border-radius: var(--radius-step-bar, 999px);
    background-color: var(--bg-step-connector);
    .step-bar__section.is-clickable:hover & {
      opacity: 0.8;
    }
  }
  .accordion__body {
    .accordion__panel > & {
      min-height: 0;
      overflow: hidden;
    }
    padding: 0 var(--accordion-px, 1rem) var(--accordion-py-body, 0.75rem);
    font-size: calc(var(--accordion-fs, 13px) - 1px);
    line-height: 1.55;
    color: var(--text-accordion-body);
    .accordion--filled .accordion__item[open] > .accordion__panel > & {
      background-color: var(--bg-accordion-body-filled);
    }
    & > .accordion {
      margin-top: 8px;
      border-left: 2px solid var(--border-accordion-divider);
      padding-left: 8px;
    }
    & > .accordion > .accordion__item {
      --accordion-py: 0.375rem;
      --accordion-py-body: 0.5rem;
      --accordion-fs: 12px;
    }
  }
  .media--comfortable {
    & .media__body {
      gap: 4px;
    }
    & .media__description, & .media__meta {
      margin-top: 6px;
    }
    & .media__actions {
      margin-top: 10px;
    }
  }
  .media--compact {
    & .media__body {
      gap: 0;
    }
    & .media__description, & .media__meta {
      margin-top: 2px;
    }
    & .media__actions {
      margin-top: 6px;
    }
  }
  .accordion--sub {
    margin-top: 8px;
    border-left: 2px solid var(--border-accordion-divider);
    padding-left: 8px;
    & > .accordion__item {
      --accordion-py: 0.375rem;
      --accordion-py-body: 0.5rem;
      --accordion-fs: 12px;
    }
  }
  .dashboard-grid__widget-subtitle {
    margin-top: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .carousel__footer-meta {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    color: var(--text-carousel-on-light-muted);
    margin-top: 2px;
  }
  .wizard-subtitle {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 80%;
    color: var(--text-wizard-subtitle);
  }
  .panel-item-description {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-list-item-description, var(--text-list-item-subtitle));
    line-height: 1.5;
  }
  .carousel__slide-caption {
    font-size: 12.5px;
    margin-top: 3px;
    color: var(--text-carousel-muted);
    line-height: 1.4;
  }
  .media__description {
    font-size: var(--media-subtitle-size);
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 4px;
  }
  .wizard-step__description {
    margin-top: var(--spacing);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    color: var(--text-wizard-step-description, var(--text-tertiary));
  }
  .\!mt-0 {
    margin-top: 0 !important;
  }
  .-mt-0\.5 {
    margin-top: calc(var(--spacing) * -0.5);
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .-mt-7 {
    margin-top: calc(var(--spacing) * -7);
  }
  .-mt-8 {
    margin-top: calc(var(--spacing) * -8);
  }
  .-mt-9 {
    margin-top: calc(var(--spacing) * -9);
  }
  .-mt-12 {
    margin-top: calc(var(--spacing) * -12);
  }
  .-mt-16 {
    margin-top: calc(var(--spacing) * -16);
  }
  .-mt-17 {
    margin-top: calc(var(--spacing) * -17);
  }
  .-mt-\[26px\] {
    margin-top: calc(26px * -1);
  }
  .-mt-px {
    margin-top: -1px;
  }
  .mt-0 {
    margin-top: 0;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-40 {
    margin-top: calc(var(--spacing) * 40);
  }
  .mt-\[10\%\] {
    margin-top: 10%;
  }
  .mt-\[13px\] {
    margin-top: 13px;
  }
  .mt-auto {
    margin-top: auto;
  }
  .collapse-trigger__chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-collapse-chevron);
    transition: transform 200ms var(--ease-collapse, ease), color 120ms ease;
    margin-left: 2px;
    &::before {
      content: '\f078';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      font-size: 11px;
    }
    .collapse-trigger[aria-expanded='true'] & {
      transform: rotate(180deg);
      color: var(--text-collapse-chevron-open);
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    .collapse-trigger--inset & {
      margin-left: 0;
      margin-right: 2px;
    }
    .collapse-trigger.is-loading & {
      display: none;
    }
  }
  .accordion__chevron {
    .accordion__item > summary:has(> &)::after {
      content: none;
    }
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-accordion-chevron);
    transition: transform 180ms ease, color 120ms ease;
    &::before {
      content: '\f078';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      font-size: 11px;
    }
    .accordion__item[open] > summary > & {
      transform: rotate(180deg);
    }
    .accordion--inset > .accordion__item > summary > & {
      margin-left: 0;
      margin-right: 2px;
    }
  }
  .accordion--inset {
    & > .accordion__item > summary {
      flex-direction: row-reverse;
    }
    & > .accordion__item > summary::after {
      margin-left: 0;
      margin-right: 2px;
    }
    & > .accordion__item > summary > .accordion__chevron {
      margin-left: 0;
      margin-right: 2px;
    }
  }
  .collapse-trigger--inset {
    flex-direction: row-reverse;
    &::after {
      margin-left: 0;
      margin-right: 2px;
    }
    & .collapse-trigger__chevron {
      margin-left: 0;
      margin-right: 2px;
    }
  }
  .media--reverse {
    flex-direction: row-reverse;
    & .media__trailing {
      margin-left: 0;
      margin-right: auto;
    }
  }
  .inline-edit__msg {
    line-height: 1.35;
    .inline-edit.is-error & {
      color: var(--text-inline-edit-error);
    }
    .inline-edit.is-success & {
      color: var(--text-inline-edit-success);
    }
    .inline-edit.is-validating &::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 6px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: 999px;
      animation: ie-spin 600ms linear infinite;
      vertical-align: -1px;
    }
    @media (prefers-reduced-motion: reduce) {
      .inline-edit.is-validating &::before {
        animation: none;
      }
    }
  }
  .is-validating {
    &.inline-edit .inline-edit__msg::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 6px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: 999px;
      animation: ie-spin 600ms linear infinite;
      vertical-align: -1px;
    }
    @media (prefers-reduced-motion: reduce) {
      &.inline-edit .inline-edit__msg::before {
        animation: none;
      }
    }
  }
  .uploader__detail {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    & > * + *::before {
      content: '·';
      margin-right: 6px;
      opacity: 0.6;
    }
  }
  .carousel--split {
    & .carousel__slide {
      flex: 0 0 80%;
      margin-right: 12px;
      scroll-snap-align: center;
    }
    & .carousel__viewport {
      padding: 0 10% 0 10%;
    }
  }
  .is-broken {
    &.carousel__slide {
      background-color: var(--bg-carousel-error);
      color: var(--text-carousel-error);
      font-size: 12px;
    }
    &.carousel__slide::before {
      content: '\f127';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      font-size: 28px;
      margin-right: 8px;
    }
  }
  .-mr-1 {
    margin-right: calc(var(--spacing) * -1);
  }
  .-mr-2 {
    margin-right: calc(var(--spacing) * -2);
  }
  .-mr-px {
    margin-right: -1px;
  }
  .mr-0\.5 {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .mr-1 {
    margin-right: var(--spacing);
  }
  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-auto {
    margin-right: auto;
  }
  .dashboard-grid__widget-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin-bottom: 12px;
    .dashboard-grid__widget--flush & {
      margin-bottom: 0;
      padding: 14px 16px 12px;
      border-bottom: 1px solid var(--border-divider);
    }
  }
  .step-bar__label {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 0.5);
    .stepper-bar--label-sm & {
      margin-bottom: calc(var(--spacing) * 1.5);
    }
    .stepper-bar--label-lg & {
      margin-bottom: calc(var(--spacing) * 2.5);
    }
  }
  .docs-cat__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px dotted var(--border-secondary, var(--border-primary));
  }
  .docs-page-header__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--text-tertiary);
    font-size: 12px;
    & a {
      color: var(--text-secondary);
      text-decoration: none;
    }
    & a:hover {
      color: var(--text-primary);
    }
  }
  .docs-empty {
    padding: 56px;
    text-align: center;
    color: var(--text-tertiary);
    border: 1px dashed var(--border-divider);
    border-radius: var(--docs-radius);
    & i {
      font-size: 28px;
      opacity: 0.5;
      display: block;
      margin-bottom: 12px;
    }
  }
  .docs-nav__group {
    margin-bottom: 14px;
    &.is-hidden {
      display: none;
    }
  }
  .media--loading {
    & .media__figure, & .media__title, & .media__subtitle {
      color: transparent !important;
      border-radius: var(--radius-sm);
      background: linear-gradient( 90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63% );
      background-size: 200% 100%;
      animation: media-shimmer var(--duration-progress-indeterminate, 1.2s) var(--ease-default) infinite;
    }
    & .media__title {
      height: 12px;
      width: 60%;
      margin-bottom: 6px;
    }
    & .media__subtitle {
      height: 10px;
      width: 40%;
    }
    @media (prefers-reduced-motion: reduce) {
      & .media__figure, & .media__title, & .media__subtitle {
        animation: none;
      }
    }
  }
  .stepper-bar--label-sm {
    & .step-bar__title {
      font-size: 0.6875rem;
      line-height: var(--tw-leading, 1rem);
      letter-spacing: var(--tw-tracking, 0.01em);
    }
    & .step-bar__number {
      width: 16px;
      height: 16px;
      font-size: 0.563rem;
      line-height: var(--tw-leading, 1rem);
    }
    & .step-bar__sub {
      font-size: 0.563rem;
      line-height: var(--tw-leading, 1rem);
    }
    & .step-bar__label {
      margin-bottom: calc(var(--spacing) * 1.5);
    }
  }
  .wizard-step__header {
    .wizard-step--fill & {
      flex-shrink: 0;
    }
    margin-bottom: calc(var(--spacing) * 4);
  }
  .docs-page-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-divider);
  }
  .media__overline {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    line-height: 1;
    margin-bottom: 2px;
  }
  .docs-toc__heading {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }
  .inline-edit-popover__header {
    font-size: 11px;
    color: var(--text-inline-edit-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    font-family: 'Space Mono', monospace;
  }
  .wizard-summary__title {
    font-weight: 600;
    margin-bottom: 4px;
  }
  .\!mb-0 {
    margin-bottom: 0 !important;
  }
  .\!mb-2 {
    margin-bottom: calc(var(--spacing) * 2) !important;
  }
  .\!mb-3 {
    margin-bottom: calc(var(--spacing) * 3) !important;
  }
  .-mb-1 {
    margin-bottom: calc(var(--spacing) * -1);
  }
  .-mb-2 {
    margin-bottom: calc(var(--spacing) * -2);
  }
  .-mb-\[1px\] {
    margin-bottom: calc(1px * -1);
  }
  .-mb-px {
    margin-bottom: -1px;
  }
  .docs-cat {
    margin-bottom: 26px;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-4\! {
    margin-bottom: calc(var(--spacing) * 4) !important;
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-6\! {
    margin-bottom: calc(var(--spacing) * 6) !important;
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .inline-edit__editor {
    display: none;
    align-items: stretch;
    gap: var(--ie-gap);
    min-width: 0;
    flex: 1 1 auto;
    .inline-edit.is-editing > &, .inline-edit.inline-edit--editing > & {
      display: inline-flex;
    }
    &:has(.inline-edit__affix-prefix), &:has(.inline-edit__affix-suffix) {
      gap: 0;
    }
    &:has(.inline-edit__affix-prefix) .inline-edit__actions, &:has(.inline-edit__affix-suffix) .inline-edit__actions {
      margin-left: var(--ie-gap);
    }
    .inline-edit:has(.inline-edit__feedback) & {
      flex-wrap: nowrap;
    }
    .inline-edit--cell & {
      width: 100%;
    }
    .inline-edit--textarea & {
      width: 100%;
      align-items: stretch;
    }
    .inline-edit--color & input[type='color'] {
      width: 28px;
      height: 28px;
      padding: 0;
      box-shadow: inset 0 0 0 1px var(--border-input);
      border: 0;
      border-radius: var(--ie-radius);
      cursor: pointer;
      background: transparent;
    }
    .inline-edit--tags & {
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 4px 6px;
      background-color: var(--bg-input);
      box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
      border: 0;
      border-radius: var(--ie-radius);
      min-height: 30px;
    }
    .inline-edit--tags &:focus-within {
      box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
    }
    .inline-edit--tags & .inline-edit__field {
      box-shadow: none;
      background: transparent;
      padding: 2px 4px;
      min-width: 80px;
      flex: 1;
    }
    .inline-edit--tags & .inline-edit__field:hover, .inline-edit--tags & .inline-edit__field:focus {
      box-shadow: none;
    }
    .inline-edit--rating & {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
  }
  .accordion__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: var(--accordion-py, 0.625rem) var(--accordion-px, 1rem);
    font-size: var(--accordion-fs, 13px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-accordion-title);
    background-color: var(--bg-accordion-trigger);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background-color 120ms ease, color 120ms ease;
    &:hover {
      background-color: var(--bg-accordion-trigger-hover);
    }
    &:active {
      background-color: var(--bg-accordion-trigger-active);
    }
    &:focus-visible {
      outline: none;
      box-shadow: var(--ring-accordion-focus);
    }
    &::after {
      content: '\f078';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      font-size: 11px;
      color: var(--text-accordion-chevron);
      margin-left: 2px;
      flex: 0 0 auto;
      transition: transform 180ms ease, color 120ms ease;
    }
    &:hover::after {
      color: var(--text-accordion-chevron-hover);
    }
    @media (prefers-reduced-motion: reduce) {
      &::after {
        transition: none;
      }
    }
  }
  .inline-edit--cell {
    display: flex;
    width: 100%;
    --ie-pad-y: 6px;
    --ie-pad-x: 10px;
    & .inline-edit__display {
      width: 100%;
    }
    & .inline-edit__display .inline-edit__trigger {
      margin-left: auto;
    }
    & .inline-edit__editor {
      width: 100%;
    }
    & .inline-edit__field {
      width: 100%;
    }
  }
  .media__trailing {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-tertiary);
    font-size: 12px;
    & > .badge, & > .chip, & > .tag {
      flex-shrink: 0;
    }
  }
  .step__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 9.5px;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: 1px;
  }
  .is-completed {
    &.step__substep {
      color: var(--text-step-title);
    }
    &.step__substep::after {
      content: '\f00c';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      color: var(--bg-step-completed);
      margin-left: auto;
      font-size: 10px;
    }
    &.step .step-connector-fill {
      width: 100%;
    }
    .stepper-vertical &.step .step-connector-fill {
      height: 100%;
    }
    &.step .step-indicator {
      background-color: var(--bg-step-completed);
      border-color: var(--border-step-completed);
      color: var(--text-step-completed);
    }
    &.step.is-clickable:not(.is-disabled):hover .step-indicator {
      background-color: var(--bg-step-completed-hover);
    }
    &.step.is-clickable:not(.is-disabled):active .step-indicator {
      background-color: var(--bg-step-completed-active);
    }
    .stepper-pill &.step {
      color: var(--bg-step-pill-completed);
    }
    .stepper-pill &.step .step-indicator {
      color: inherit;
    }
    .stepper-chevron &.step {
      background-color: var(--bg-step-chevron-completed);
      color: var(--text-step-chevron-completed);
    }
    &.stepper-mobile__dot {
      background-color: var(--bg-step-completed);
    }
    &.step-bar__section .step-bar__fill {
      width: 100%;
    }
    &.step-bar__section .step-bar__number {
      background-color: var(--bg-step-completed);
      border-color: var(--border-step-completed);
      color: var(--text-step-completed);
    }
    &.step-bar__section .step-bar__title {
      color: var(--text-step-title);
    }
    &.step-bar__sub {
      color: var(--text-step-title);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    .wizard-rail .stepper &.step {
      cursor: pointer;
    }
    .wizard-rail .stepper &.step:hover .step-title {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
  }
  .uploader--inline {
    & .uploader__zone {
      flex-direction: row;
      text-align: left;
      padding: 10px 14px;
      gap: 10px;
    }
    & .uploader__icon {
      width: 32px;
      height: 32px;
      font-size: 14px;
      border-radius: var(--radius-md);
    }
    & .uploader__title {
      font-size: 13px;
    }
    & .uploader__subtitle {
      font-size: 12px;
    }
    & .uploader__action {
      margin-left: auto;
    }
  }
  .accordion__title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .accordion__item.is-required &::after {
      content: '*';
      color: var(--border-accordion-danger);
      margin-left: 4px;
      font-weight: 600;
    }
  }
  .docs-catalog-card__meta {
    margin-left: auto;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-quaternary);
  }
  .is-required {
    &.accordion__item .accordion__title-text::after {
      content: '*';
      color: var(--border-accordion-danger);
      margin-left: 4px;
      font-weight: 600;
    }
  }
  .-ml-0\.75 {
    margin-left: calc(var(--spacing) * -0.75);
  }
  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }
  .-ml-2 {
    margin-left: calc(var(--spacing) * -2);
  }
  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }
  .-ml-\[3px\] {
    margin-left: calc(3px * -1);
  }
  .-ml-px {
    margin-left: -1px;
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-0\.75 {
    margin-left: calc(var(--spacing) * 0.75);
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-1\.25 {
    margin-left: calc(var(--spacing) * 1.25);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }
  .ml-7 {
    margin-left: calc(var(--spacing) * 7);
  }
  .ml-16 {
    margin-left: calc(var(--spacing) * 16);
  }
  .ml-24 {
    margin-left: calc(var(--spacing) * 24);
  }
  .ml-auto {
    margin-left: auto;
  }
  .box-border {
    box-sizing: border-box;
  }
  .box-content {
    box-sizing: content-box;
  }
  .wizard {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--bg-wizard);
    border-color: var(--border-wizard);
    &.wizard--side-rail {
      display: flex;
      &.collapse.show {
        display: flex;
      }
      height: 100%;
      flex-direction: row;
      overflow: hidden;
      border-radius: var(--radius-none);
      border-style: var(--tw-border-style);
      border-width: 0px;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-top-color: var(--border-wizard, var(--border-primary));
    }
    &.wizard--side-rail .wizard-rail {
      flex-shrink: 0;
      overflow-y: auto;
      width: var(--width-wizard-rail, 14rem);
      background-color: var(--bg-wizard-rail, var(--bg-primary-subtle));
      border-right: 1px solid var(--border-wizard-divider);
      padding: var(--padding-wizard-rail, 1rem);
    }
    &.wizard--side-rail .wizard-content {
      display: flex;
      &.collapse.show {
        display: flex;
      }
      min-height: 0;
      min-width: 0;
      flex: 1;
      flex-direction: column;
      background-color: var(--bg-wizard-content, var(--bg-modal));
    }
    &.wizard--side-rail .wizard-header {
      flex-shrink: 0;
    }
    &.wizard--side-rail .wizard-body {
      flex: 1;
      overflow-y: auto;
      padding: 0;
    }
    &.wizard--side-rail .wizard-footer {
      flex-shrink: 0;
    }
    &[data-wizard-anim='slide'] .wizard-step.is-active {
      animation: wizard-slide-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    &[data-wizard-anim='slide'][data-wizard-dir='back'] .wizard-step.is-active {
      animation-name: wizard-slide-in-back;
    }
    @media (prefers-reduced-motion: reduce) {
      &[data-wizard-anim='slide'] .wizard-step.is-active {
        animation: none;
      }
    }
    &.wizard--side-rail.wizard--compact .wizard-rail {
      width: var(--width-wizard-rail-compact, 11rem);
      padding: var(--padding-wizard-rail-compact, 0.75rem);
    }
  }
  .wizard--side-rail {
    &.wizard {
      display: flex;
      &.collapse.show {
        display: flex;
      }
      height: 100%;
      flex-direction: row;
      overflow: hidden;
      border-radius: var(--radius-none);
      border-style: var(--tw-border-style);
      border-width: 0px;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-top-color: var(--border-wizard, var(--border-primary));
    }
    &.wizard .wizard-rail {
      flex-shrink: 0;
      overflow-y: auto;
      width: var(--width-wizard-rail, 14rem);
      background-color: var(--bg-wizard-rail, var(--bg-primary-subtle));
      border-right: 1px solid var(--border-wizard-divider);
      padding: var(--padding-wizard-rail, 1rem);
    }
    &.wizard .wizard-content {
      display: flex;
      &.collapse.show {
        display: flex;
      }
      min-height: 0;
      min-width: 0;
      flex: 1;
      flex-direction: column;
      background-color: var(--bg-wizard-content, var(--bg-modal));
    }
    &.wizard .wizard-header {
      flex-shrink: 0;
    }
    &.wizard .wizard-body {
      flex: 1;
      overflow-y: auto;
      padding: 0;
    }
    &.wizard .wizard-footer {
      flex-shrink: 0;
    }
    &.wizard.wizard--compact .wizard-rail {
      width: var(--width-wizard-rail-compact, 11rem);
      padding: var(--padding-wizard-rail-compact, 0.75rem);
    }
  }
  .wizard-step--fill {
    &.is-active {
      display: flex;
      &.collapse.show {
        display: flex;
      }
      height: 100%;
      min-height: 0;
      flex-direction: column;
      overflow: hidden;
    }
    & .wizard-step__header {
      flex-shrink: 0;
    }
  }
  .is-active {
    &.wizard-step {
      display: block;
    }
    &.wizard-step--fill {
      display: flex;
      &.collapse.show {
        display: flex;
      }
      height: 100%;
      min-height: 0;
      flex-direction: column;
      overflow: hidden;
    }
    .wizard[data-wizard-anim='slide'] &.wizard-step {
      animation: wizard-slide-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .wizard[data-wizard-anim='slide'][data-wizard-dir='back'] &.wizard-step {
      animation-name: wizard-slide-in-back;
    }
    @media (prefers-reduced-motion: reduce) {
      .wizard[data-wizard-anim='slide'] &.wizard-step {
        animation: none;
      }
    }
  }
  .docs-shell {
    display: grid;
    grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr) var( --docs-toc-width );
    grid-template-rows: var(--docs-header-height) minmax(0, 1fr);
    grid-template-areas: 'header header header' 'sidebar main toc';
    height: 100vh;
    min-height: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: grid-template-columns 220ms cubic-bezier(0.4, 0, 0.2, 1);
    @media (max-width: 1280px) {
      grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
      grid-template-areas: 'header header' 'sidebar main';
    }
    @media (max-width: 960px) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--docs-header-height) minmax(0, 1fr);
      grid-template-areas: 'header' 'main';
    }
  }
  .docs-hero__logo {
    height: 52px;
    width: auto;
    max-width: 240px;
    display: block;
  }
  .inline-edit__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    .inline-edit.is-empty & {
      display: none;
    }
    .inline-edit--textarea & {
      white-space: pre-wrap;
      overflow: visible;
      text-overflow: clip;
    }
    .inline-edit--number &, .inline-edit--currency & {
      font-variant-numeric: tabular-nums;
    }
    .inline-edit--toggle & {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .inline-edit--toggle &[data-value='true']::before, .inline-edit--toggle &[data-value='false']::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background-color: currentColor;
    }
    .inline-edit--toggle &[data-value='true']::before {
      background-color: var(--utility-green-500);
    }
    .inline-edit--toggle &[data-value='false']::before {
      background-color: var(--utility-neutral-400);
    }
    .inline-edit--color & {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .inline-edit--color &::before {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: var(--radius-xs);
      background-color: var(--ie-color-swatch, var(--utility-neutral-300));
      box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.12);
    }
    .inline-edit--tags & {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 4px;
      white-space: normal;
      overflow: visible;
    }
    .inline-edit--rating & {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
  }
  .uploader__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--uploader-icon-box);
    height: var(--uploader-icon-box);
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    color: var(--text-tertiary);
    font-size: var(--uploader-icon-size);
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs);
    transition: transform 200ms ease, color 120ms ease, box-shadow 120ms ease;
    .uploader.is-dragover &, .uploader__zone.is-dragover & {
      transform: translateY(-2px) scale(1.04);
      color: var(--uploader-accent);
      box-shadow: inset 0 0 0 1px var(--uploader-accent), var(--shadow-xs);
    }
    .uploader.is-success & {
      color: var(--text-success);
      box-shadow: var(--shadow-xs);
    }
    .uploader.is-error & {
      color: var(--text-danger);
      box-shadow: var(--shadow-xs);
    }
    .uploader.is-uploading & {
      animation: uploader-pulse 1.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .uploader.is-uploading & {
        animation: none;
      }
      transition: none;
    }
  }
  .inline-edit__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    color: var(--text-inline-edit-trigger);
    font-size: var(--ie-trigger-size);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 140ms ease, transform 140ms ease, background-color 120ms ease, color 120ms ease;
    flex: 0 0 auto;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
      transform: none;
    }
    .inline-edit:hover &, .inline-edit:focus-within &, .inline-edit.is-empty & {
      opacity: 1;
      transform: translateX(0);
    }
    .inline-edit__display:hover & {
      background-color: var(--bg-inline-edit-trigger-hover);
      color: var(--text-inline-edit-trigger-hover);
    }
    .inline-edit.is-readonly & {
      display: none;
    }
    [data-contrast='high'] & {
      opacity: 1;
    }
  }
  .uploader__thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 16px;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .uploader__item.is-success & {
      color: var(--text-success);
      background-color: var(--bg-success-subtle);
    }
    .uploader__item.is-error & {
      color: var(--text-danger);
      background-color: var(--bg-danger-subtle);
    }
  }
  .accordion__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-accordion-description);
    font-size: 14px;
  }
  .collapse-trigger__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-collapse-chevron);
  }
  .docs-header__logo-mark {
    height: 26px;
    width: 26px;
    flex: none;
    display: block;
  }
  .panel-item-handle {
    display: inline-flex;
    flex-shrink: 0;
    cursor: grab;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
    width: 18px;
    height: 18px;
    color: var(--text-list-handle);
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease;
    .panel-list--sortable .panel-item:hover & {
      opacity: 1;
    }
    .panel-list--sortable .panel-item:focus-within & {
      opacity: 1;
    }
    &:hover {
      color: var(--text-list-handle-hover);
    }
    &:active {
      cursor: grabbing;
    }
    &::before {
      content: '\f58e';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
      font-weight: 300;
      font-size: 12px;
    }
  }
  .step-bar__number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    width: 18px;
    height: 18px;
    background-color: var(--bg-step-indicator);
    border: 1px solid var(--border-step-indicator);
    color: var(--text-step-indicator);
    .step-bar__section.is-completed & {
      background-color: var(--bg-step-completed);
      border-color: var(--border-step-completed);
      color: var(--text-step-completed);
    }
    .step-bar__section.is-current & {
      background-color: var(--bg-step-current);
      border-color: var(--border-step-current);
      color: var(--text-step-current);
    }
    .stepper-bar--label-sm & {
      width: 16px;
      height: 16px;
      font-size: 0.563rem;
      line-height: var(--tw-leading, 1rem);
    }
    .stepper-bar--label-md & {
      width: 18px;
      height: 18px;
      font-size: 0.6875rem;
      line-height: var(--tw-leading, 1rem);
      letter-spacing: var(--tw-tracking, 0.01em);
    }
    .stepper-bar--label-lg & {
      width: 22px;
      height: 22px;
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
    .stepper-bar--text-only & {
      display: none;
    }
  }
  .panel-item-checkbox {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    .panel-list--selectable & {
      display: inline-flex;
    }
    .panel-list--selectable & input[type='checkbox'] {
      width: 16px;
      height: 16px;
    }
  }
  .is-loading {
    &.collapse-trigger::after {
      content: '';
      width: 12px;
      height: 12px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: var(--radius-full);
      animation: collapse-spin 600ms linear infinite;
      transform: none !important;
    }
    &.collapse-trigger .collapse-trigger__chevron {
      display: none;
    }
    @media (prefers-reduced-motion: reduce) {
      &.collapse-trigger::after {
        animation: none;
      }
    }
  }
  .panel-item__chevron {
    .panel-item-trailing & {
      width: 14px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--text-list-item-leading, var(--text-tertiary));
      transition: transform 160ms ease, color 160ms ease;
    }
    .panel-item:hover & {
      transform: translateX(2px);
      color: var(--text-list-item-title);
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
  .emoji-picker__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background-color: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    transition: background-color 100ms ease, transform 100ms ease;
  }
  .docs-header__toc-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--docs-radius-sm);
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    &:hover {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }
    & i {
      font-size: 14px;
    }
    @media (max-width: 1280px) {
      display: inline-flex;
    }
    body.is-docs-toc-empty & {
      display: none;
    }
  }
  .docs-header__sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--docs-radius-sm);
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    &:hover {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }
    & i {
      font-size: 14px;
    }
    @media (max-width: 960px) {
      display: inline-flex;
    }
  }
  .uploader__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    &:hover {
      background-color: var(--bg-secondary);
      color: var(--text-secondary);
    }
    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--border-focus);
    }
  }
  .ss-vc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ss-muted);
    cursor: pointer;
    &:hover {
      color: var(--ss-text);
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 6%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    &.is-active {
      color: var(--ss-accent);
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 14%, transparent);
      }
    }
    & i {
      font-size: 13px;
    }
  }
  .ss-panel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ss-muted);
    cursor: pointer;
    &:hover {
      color: var(--ss-text);
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 6%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .inline-edit--color {
    & .inline-edit__value {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    & .inline-edit__value::before {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: var(--radius-xs);
      background-color: var(--ie-color-swatch, var(--utility-neutral-300));
      box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.12);
    }
    & input.inline-edit__field {
      padding-left: 12px;
    }
    & .inline-edit__editor input[type='color'] {
      width: 28px;
      height: 28px;
      padding: 0;
      box-shadow: inset 0 0 0 1px var(--border-input);
      border: 0;
      border-radius: var(--ie-radius);
      cursor: pointer;
      background: transparent;
    }
  }
  .scrollbar {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: var(--scrollbar-width, 16px);
      height: var(--scrollbar-height, 16px);
    }
  }
  .scrollbar-thin {
    &::-webkit-scrollbar-track {
      background-color: var(--scrollbar-track);
      border-radius: var(--scrollbar-track-radius);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: var(--scrollbar-thumb-radius);
    }
    &::-webkit-scrollbar-corner {
      background-color: var(--scrollbar-corner);
      border-radius: var(--scrollbar-corner-radius);
    }
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
    &::-webkit-scrollbar {
      display: block;
      width: 8px;
      height: 8px;
    }
  }
  .carousel__thumbs {
    display: flex;
    gap: 6px;
    padding: 8px;
    background-color: var(--bg-carousel-thumb-rail);
    border-top: 1px solid var(--border-carousel);
    overflow-x: auto;
    scrollbar-width: thin;
    .carousel--filmstrip & {
      display: flex;
    }
    .carousel--side-thumbs > & {
      flex-direction: column;
      border-top: 0;
      border-right: 1px solid var(--border-carousel);
      overflow-y: auto;
      overflow-x: hidden;
      width: 84px;
    }
    .carousel--side-thumbs > & .carousel__thumb {
      width: 68px;
      height: 52px;
    }
    @media (max-width: 640px) {
      .carousel--side-thumbs > & {
        flex-direction: row;
        width: auto;
        border-right: 0;
        border-top: 1px solid var(--border-carousel);
        overflow-x: auto;
      }
    }
  }
  .carousel--side-thumbs {
    display: grid;
    grid-template-columns: 84px 1fr;
    & > .carousel__thumbs {
      flex-direction: column;
      border-top: 0;
      border-right: 1px solid var(--border-carousel);
      overflow-y: auto;
      overflow-x: hidden;
      width: 84px;
    }
    & > .carousel__thumbs .carousel__thumb {
      width: 68px;
      height: 52px;
    }
    @media (max-width: 640px) {
      grid-template-columns: 1fr;
      & > .carousel__thumbs {
        flex-direction: row;
        width: auto;
        border-right: 0;
        border-top: 1px solid var(--border-carousel);
        overflow-x: auto;
      }
    }
  }
  .uploader--button {
    display: inline-flex;
    width: auto;
    & .uploader__zone {
      flex-direction: row;
      gap: 8px;
      padding: 8px 14px;
      border-radius: var(--radius-lg);
      box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
      background-color: var(--bg-primary);
    }
    & .uploader__zone:hover {
      background-color: var(--bg-secondary);
      box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
    }
    & .uploader__icon {
      width: 18px;
      height: 18px;
      font-size: 13px;
      background: transparent;
      color: var(--text-secondary);
      box-shadow: none;
    }
    & .uploader__title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
    }
    & .uploader__subtitle, & .uploader__action {
      display: none;
    }
  }
  .docs-tile__icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-info, var(--text-primary));
    & img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
  }
  .carousel__empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--utility-neutral-100);
    color: var(--utility-neutral-500);
    font-size: 18px;
  }
  .panel-list-empty__icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-list-item-hover, var(--bg-primary-subtle));
    color: var(--text-list-item-leading, var(--text-tertiary));
    font-size: 14px;
  }
  .docs-sidebar__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--docs-radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
    &:hover {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
    }
    & i {
      width: 14px;
      text-align: center;
      color: var(--text-tertiary);
      font-size: 13px;
    }
    & img {
      width: 14px;
      height: 14px;
      object-fit: contain;
    }
  }
  .inline-edit--toggle {
    & .inline-edit__value {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    & .inline-edit__value[data-value='true']::before, & .inline-edit__value[data-value='false']::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background-color: currentColor;
    }
    & .inline-edit__value[data-value='true']::before {
      background-color: var(--utility-green-500);
    }
    & .inline-edit__value[data-value='false']::before {
      background-color: var(--utility-neutral-400);
    }
  }
  .media--inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    & .media__figure {
      width: 18px;
      height: 18px;
      border-radius: var(--radius-sm);
      font-size: 9px;
    }
    & .media__title {
      font-size: 12.5px;
      font-weight: 500;
    }
  }
  .ss-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    & input {
      width: 28px;
      height: 16px;
    }
  }
  .collapse-horizontal {
    &.collapsing {
      width: 0;
      height: auto;
      overflow: hidden;
      transition: width var(--duration-collapse, 350ms) var(--ease-collapse, ease);
    }
    @media (prefers-reduced-motion: reduce) {
      &.collapsing {
        transition: none;
      }
    }
    &.collapse.show {
      display: inline-block;
    }
  }
  .carousel--compact {
    border-radius: 0.5rem;
    & .carousel__prev {
      width: 28px;
      height: 28px;
      font-size: 11px;
    }
    & .carousel__next {
      width: 28px;
      height: 28px;
      font-size: 11px;
    }
    & .carousel__dots {
      display: none;
    }
  }
  .carousel__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    .carousel--contain & {
      object-fit: contain;
      background-color: var(--bg-carousel-surface);
    }
    .carousel--product & {
      object-fit: contain;
    }
    .carousel.is-fullscreen & {
      object-fit: contain;
    }
  }
  .carousel__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .panel-list--selectable {
    & .panel-item-checkbox {
      display: inline-flex;
    }
    & .panel-item-checkbox input[type='checkbox'] {
      width: 16px;
      height: 16px;
    }
  }
  .ss-topbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--ss-text);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    &:hover {
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 6%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .ss-quick-axis {
    display: inline-flex;
    padding: 2px;
    border-radius: 7px;
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 6%, transparent);
    }
    gap: 1px;
    & button {
      height: 26px;
      min-width: 32px;
      padding: 0 8px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--ss-muted);
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      cursor: pointer;
    }
    & button.is-active {
      background: var(--ss-surface);
      color: var(--ss-text);
      box-shadow: var(--shadow-xs);
    }
    & button:hover {
      color: var(--ss-text);
    }
    & button:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .ss-quick-rot {
    display: inline-flex;
    padding: 2px;
    border-radius: 7px;
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 6%, transparent);
    }
    gap: 1px;
    & button {
      height: 26px;
      min-width: 32px;
      padding: 0 8px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--ss-muted);
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      cursor: pointer;
    }
    & button:hover {
      color: var(--ss-text);
    }
    & button:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .ss-quick-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 60px;
    & span {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--ss-muted);
    }
    & input {
      height: 28px;
      padding: 0 8px;
      border: 0;
      border-radius: var(--radius-lg);
      background: var(--ss-surface);
      color: var(--ss-text);
      font-size: 12.5px;
      font-family: inherit;
      box-shadow: inset 0 0 0 1px var(--ss-divider);
    }
    & input:focus, & input:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .docs-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-divider);
    border-radius: 4px;
  }
  .docs-anim-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 56px;
    padding: 0 14px;
    border-radius: 8px;
    background-color: var(--bg-info-subtle, var(--bg-secondary));
    color: var(--text-brand-primary);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
  }
  .ss-timeline {
    .ss-shell.is-presenting & {
      display: none;
    }
    flex: 0 0 0;
    height: 0;
    overflow: hidden;
    border-top: 1px solid var(--ss-divider);
    background: var(--ss-surface);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    transition: flex-basis 220ms ease, height 220ms ease;
    &.is-visible {
      flex-basis: 64px;
      height: 64px;
    }
  }
  .ss-left-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--ss-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
    & i {
      font-size: 12px;
    }
    &:hover {
      color: var(--ss-text);
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 4%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    &.is-active {
      color: var(--ss-accent);
      border-bottom-color: var(--ss-accent);
      background: var(--ss-surface);
    }
  }
  .docs-anim-stage__replay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    height: 24px;
    border: 1px solid var(--border-divider);
    border-radius: 999px;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    &:hover {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
      border-color: var(--text-brand-primary);
    }
    & i {
      font-size: 10px;
      transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    &.is-spinning i {
      transform: rotate(360deg);
    }
  }
  .input-base {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 #0000;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm))) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    transition: box-shadow 100ms ease, background-color 100ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .wizard-content {
    .wizard.wizard--side-rail & {
      display: flex;
      &.collapse.show {
        display: flex;
      }
      min-height: 0;
      min-width: 0;
      flex: 1;
      flex-direction: column;
      background-color: var(--bg-wizard-content, var(--bg-modal));
    }
  }
  .inline-edit--tags {
    & .inline-edit__value {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 4px;
      white-space: normal;
      overflow: visible;
    }
    & .inline-edit__editor {
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 4px 6px;
      background-color: var(--bg-input);
      box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
      border: 0;
      border-radius: var(--ie-radius);
      min-height: 30px;
    }
    & .inline-edit__editor:focus-within {
      box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
    }
    & .inline-edit__editor .inline-edit__field {
      box-shadow: none;
      background: transparent;
      padding: 2px 4px;
      min-width: 80px;
      flex: 1;
    }
    & .inline-edit__editor .inline-edit__field:hover, & .inline-edit__editor .inline-edit__field:focus {
      box-shadow: none;
    }
  }
  .ss-main {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    min-height: 0;
    overflow: hidden;
    @media (max-width: 1200px) {
      grid-template-columns: 240px 1fr 280px;
    }
    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }
  .ss-asset-library {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    &.is-collapsed .ss-asset-library__body {
      display: none;
    }
    &.is-collapsed .ss-asset-library__tabs {
      display: none;
    }
    &.is-collapsed .ss-asset-library__search {
      display: none;
    }
  }
  .dashboard-grid__widget-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    .dashboard-grid__widget--flush & {
      padding: 12px 16px 14px;
    }
  }
  .ss-inspector {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-top: 1px solid var(--ss-divider);
  }
  .ss-layer-panel {
    flex: 0 0 40%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    -webkit-user-select: none;
    user-select: none;
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    min-height: var(--ctl-h, var(--control-h-sm));
    line-height: var(--ctl-line, var(--control-line-sm));
    font-size: var(--ctl-fs, var(--control-fs-sm));
    padding-block: calc((var(--ctl-h, var(--control-h-sm)) - var(--ctl-line, var(--control-line-sm)) - 2 * var(--control-border)) / 2);
    padding-inline: var(--ctl-px, calc(var(--spacing) * 3));
    -webkit-tap-highlight-color: transparent;
    transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
  }
  .accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-collapse, 260ms) var(--ease-collapse, cubic-bezier(0.4, 0, 0.2, 1));
    .accordion__item[open] > & {
      grid-template-rows: 1fr;
    }
    & > .accordion__body {
      min-height: 0;
      overflow: hidden;
    }
    & > * {
      min-height: 0;
      overflow: hidden;
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    .accordion--filled .accordion__item[open] > & > .accordion__body {
      background-color: var(--bg-accordion-body-filled);
    }
  }
  .is-error {
    &.carousel {
      background-color: var(--bg-carousel-error);
      color: var(--text-carousel-error);
    }
    &.carousel .carousel__viewport {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      flex-direction: column;
      gap: 6px;
      padding: 24px;
    }
  }
  .ss-right {
    .ss-shell.is-presenting & {
      display: none;
    }
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ss-surface);
    border-right: 1px solid var(--ss-divider);
    overflow: hidden;
    border-right: 0;
    border-left: 1px solid var(--ss-divider);
    @media (max-width: 900px) {
      display: none;
    }
  }
  .ss-left {
    .ss-shell.is-presenting & {
      display: none;
    }
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ss-surface);
    border-right: 1px solid var(--ss-divider);
    overflow: hidden;
    @media (max-width: 900px) {
      display: none;
    }
  }
  .docs-anim-stage__body {
    padding: 32px 24px;
    min-height: 120px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }
  .is-empty {
    &.carousel {
      background-color: var(--bg-carousel-empty);
      border-style: dashed;
      color: var(--text-carousel-on-light-muted);
    }
    &.carousel .carousel__viewport {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }
  }
  .docs-header__search {
    @media (max-width: 960px) {
      display: none;
    }
    justify-self: center;
    width: 100%;
    max-width: 480px;
  }
  .step-bar__section {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    flex: 1;
    flex-direction: column;
    &.is-completed .step-bar__fill {
      width: 100%;
    }
    &.is-completed .step-bar__number {
      background-color: var(--bg-step-completed);
      border-color: var(--border-step-completed);
      color: var(--text-step-completed);
    }
    &.is-completed .step-bar__title {
      color: var(--text-step-title);
    }
    &.is-current .step-bar__fill {
      width: var(--step-bar-progress, 50%);
    }
    &.is-current .step-bar__number {
      background-color: var(--bg-step-current);
      border-color: var(--border-step-current);
      color: var(--text-step-current);
    }
    &.is-current .step-bar__title {
      color: var(--text-step-title-current);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    &.is-clickable {
      cursor: pointer;
    }
    &.is-clickable:hover .step-bar__track {
      opacity: 0.8;
    }
  }
  .ss-cargo-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-lg);
    border: 0;
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 3%, transparent);
    }
    color: var(--ss-text);
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    &:hover {
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 12%, transparent);
      }
      box-shadow: inset 0 0 0 1px var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-accent) 40%, var(--ss-divider));
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    & i {
      color: var(--ss-muted);
      font-size: 11px;
    }
  }
  .ss-parent-crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-lg);
    border: 0;
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 3%, transparent);
    }
    color: var(--ss-text);
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    &:hover {
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 12%, transparent);
      }
      box-shadow: inset 0 0 0 1px var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-accent) 40%, var(--ss-divider));
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    & i {
      color: var(--ss-muted);
      font-size: 11px;
    }
  }
  .ss-cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ss-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    &:hover {
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 12%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    &.is-focused {
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 12%, transparent);
      }
    }
    & i {
      color: var(--ss-muted);
      font-size: 12px;
    }
  }
  .inline-edit-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-inline-edit-row, var(--border-divider));
    &:last-child {
      border-bottom: 0;
    }
    & .inline-edit {
      width: 100%;
    }
  }
  .stepper-bar {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    width: 100%;
    gap: var(--gap-step-bar, 3px);
    &.stepper-bar--sm {
      --h-step-bar: 3px;
      --gap-step-bar: 2px;
    }
    &.stepper-bar--md {
      --h-step-bar: 4px;
      --gap-step-bar: 3px;
    }
    &.stepper-bar--lg {
      --h-step-bar: 6px;
      --gap-step-bar: 4px;
    }
  }
  .accordion__title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.35;
  }
  .collapse-trigger__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .media__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .uploader__meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .dashboard-grid {
    --dash-gap: 16px;
    --dash-cols: 1;
    --dash-min: 240px;
    display: grid;
    grid-template-columns: repeat(var(--dash-cols), minmax(0, 1fr));
    gap: var(--dash-gap);
    min-width: 0;
  }
  .docs-header__title {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
  }
  .docs-header__brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .panel-item-row {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .docs-sidebar__footer {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--border-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ss-toolbar {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 8px 16px;
  }
  .ss-topbar__center {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .accordion__meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-accordion-meta);
    & kbd {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: var(--radius-sm);
      font-family: 'Space Mono', monospace;
      font-size: 10px;
      color: var(--text-collapse-meta);
      background-color: var(--bg-list-item-kbd, var(--utility-neutral-100));
      border: 1px solid var(--border-list-item-kbd, var(--utility-neutral-200));
      line-height: 1;
    }
    & .kbd {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: var(--radius-sm);
      font-family: 'Space Mono', monospace;
      font-size: 10px;
      color: var(--text-collapse-meta);
      background-color: var(--bg-list-item-kbd, var(--utility-neutral-100));
      border: 1px solid var(--border-list-item-kbd, var(--utility-neutral-200));
      line-height: 1;
    }
  }
  .panel-list-search {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-color: var(--border-list-divider, var(--border-primary-subtle));
    background-color: transparent;
    & input {
      flex: 1;
      background-color: transparent;
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
      color: var(--text-list-item, var(--text-primary));
    }
    & i {
      color: var(--text-list-item-leading, var(--text-tertiary));
      font-size: 12px;
    }
  }
  .collapse-trigger__meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-collapse-meta);
  }
  .ss-color-row {
    display: flex;
    align-items: center;
    gap: 4px;
    & .ss-input--color {
      flex: 1;
    }
  }
  .uploader__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .docs-hero__brand {
    flex: none;
    display: flex;
    align-items: center;
  }
  .ss-left-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ss-divider);
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 3%, transparent);
    }
  }
  .wizard-footer {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding: calc(var(--spacing) * 4);
    border-color: var(--border-wizard-divider);
    .wizard.wizard--side-rail & {
      flex-shrink: 0;
    }
    .wizard--floating & {
      border: 0;
      padding: 12px 0;
    }
  }
  .dashboard-grid__widget-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .docs-page-header__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .ss-asset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: var(--radius-lg);
    background: var(--ss-surface-soft);
    color: var(--ss-text);
    cursor: grab;
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
    &:hover {
      transform: translateY(-1px);
      box-shadow: inset 0 0 0 1px var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-accent) 50%, var(--ss-border));
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    &:active {
      cursor: grabbing;
    }
  }
  .panel-item__expand-trigger {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: var(--spacing);
    -webkit-user-select: none;
    user-select: none;
    &::after {
      content: '\f078';
      font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro';
      font-weight: 300;
      font-size: 10px;
      color: var(--text-quaternary, var(--text-tertiary));
      transition: transform 160ms ease;
    }
    .panel-item.is-expanded &::after {
      transform: rotate(180deg);
    }
    @media (prefers-reduced-motion: reduce) {
      &::after {
        transition: none;
      }
    }
  }
  .docs-catalog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-divider);
    border-radius: var(--docs-radius);
    background-color: var(--bg-primary);
    overflow: hidden;
    text-decoration: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    &:hover {
      border-color: var(--border-brand);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }
  }
  .ss-template {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card-md, var(--radius-xl));
    background: var(--ss-surface);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    transition: transform 160ms ease, box-shadow 160ms ease;
    &:hover {
      transform: translateY(-1px);
      box-shadow: inset 0 0 0 1px var(--ss-accent), var(--shadow-md);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-accent) 35%, var(--ss-border)), var(--shadow-md);
      }
      text-decoration: none;
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus), var(--shadow-md);
    }
  }
  .is-empty {
    &.inline-edit .inline-edit__value {
      display: none;
    }
    &.inline-edit .inline-edit__trigger {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .is-expanded {
    &.panel-item .panel-item-detail {
      display: block;
    }
    &.panel-item .panel-item__expand-trigger::after {
      transform: rotate(180deg);
    }
  }
  .skeleton {
    display: block;
    --skeleton-shimmer-duration: 1.5s;
    border-radius: var(--radius-sm);
    background: linear-gradient( 90deg, var(--bg-skeleton) 25%, var(--bg-skeleton-highlight) 37%, var(--bg-skeleton) 63% );
    background-size: 200% 100%;
    animation: shimmer var(--skeleton-shimmer-duration) var(--ease-default) infinite;
  }
  .checkbox-base {
    display: inline-block;
    cursor: pointer;
    appearance: none;
    border-style: var(--tw-border-style);
    border-width: 1px;
    vertical-align: middle;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    -webkit-user-select: none;
    user-select: none;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-checkbox);
    border-color: var(--border-checkbox);
  }
  .docs-header__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
    border-radius: var(--docs-radius-sm);
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    &:hover {
      background-color: var(--bg-secondary);
      color: var(--text-primary);
    }
    & i {
      font-size: 13px;
    }
    @media (max-width: 1080px) {
      & span {
        display: none;
      }
    }
  }
  .ss-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 7px;
    border: 0;
    background: transparent;
    color: var(--ss-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    & i {
      font-size: 11px;
    }
    &:hover {
      color: var(--ss-text);
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 4%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    &.is-active {
      background: var(--ss-surface);
      color: var(--ss-text);
      box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--ss-border);
    }
  }
  .ss-units__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 3%, transparent);
    }
    &:hover {
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 6%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .ss-layer__row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .inline-popover-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    &:hover .inline-popover-edit__trigger {
      opacity: 1;
    }
  }
  .is-readonly {
    &.inline-edit {
      background-color: var(--bg-inline-edit-readonly);
      color: var(--text-inline-edit-readonly);
      cursor: not-allowed;
    }
    &.inline-edit .inline-edit__display {
      cursor: not-allowed;
    }
    &.inline-edit .inline-edit__trigger {
      display: none;
    }
  }
  .docs-token {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-divider);
    border-radius: var(--docs-radius-sm);
    background-color: var(--bg-primary);
  }
  .emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding-bottom: 6px;
  }
  .panel-list--two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    & .panel-item:nth-child(odd) {
      border-right: 1px solid var(--border-list-divider);
    }
    @media (max-width: 640px) {
      grid-template-columns: 1fr;
      & .panel-item:nth-child(odd) {
        border-right: 0;
      }
    }
  }
  .docs-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    @media (max-width: 520px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }
  }
  .docs-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    @media (max-width: 720px) {
      grid-template-columns: 1fr;
    }
  }
  .docs-stage--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
  .docs-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .docs-token-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
  }
  .ss-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
  }
  .ss-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 8px;
  }
  .ss-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }
  .panel-list-empty {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    color: var(--text-list-item-subtitle, var(--text-tertiary));
  }
  .ss-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    border: 2px dashed var(--ss-border);
    border-radius: 12px;
    text-align: center;
    color: var(--ss-muted);
    & i {
      font-size: 26px;
    }
    &.is-over {
      border-color: var(--ss-accent);
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 6%, transparent);
      }
      color: var(--ss-text);
    }
  }
  .docs-hero {
    border: 1px solid var(--border-divider);
    border-radius: var(--docs-radius);
    padding: 36px 32px;
    background: radial-gradient( ellipse at top left, var(--text-brand-primary), transparent 60% ), var(--bg-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( ellipse at top left, color-mix(in oklch, var(--text-brand-primary) 8%, transparent), transparent 60% ), var(--bg-primary);
    }
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .carousel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
  }
  .docs-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--border-divider);
    border-radius: var(--docs-radius);
    background-color: var(--bg-primary);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
    &:hover {
      border-color: var(--text-info, var(--border-primary));
      background-color: var(--utility-neutral-100);
    }
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) &:hover {
      background-color: var(--bg-secondary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix( in oklch, var(--bg-secondary) 60%, var(--bg-primary) );
      }
    }
  }
  .docs-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    & code {
      background-color: transparent;
      padding: 0;
      border-radius: 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.92em;
      color: var(--text-primary);
    }
    & pre code {
      font-size: 11px !important;
      line-height: 1.5 !important;
    }
  }
  .docs-prev-next__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--border-divider);
    border-radius: var(--docs-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
    background-color: var(--bg-primary);
    &:hover {
      background-color: #ffffff;
    }
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) &:hover {
      background-color: var(--bg-tertiary, var(--bg-secondary));
    }
  }
  .docs-card {
    border: 1px solid var(--border-divider);
    border-radius: var(--docs-radius);
    padding: 16px;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .panel-list--cards {
    background-color: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    & .panel-item {
      border: 1px solid var(--border-list-card);
      border-radius: var(--radius-lg, 0.5rem);
      background-color: var(--bg-list-card);
      box-shadow: var(--shadow-list-card);
      transition: box-shadow 160ms ease, transform 160ms ease;
    }
    & .panel-item:hover {
      box-shadow: var(--shadow-list-card-hover);
    }
    & .panel-item.active {
      box-shadow: var(--shadow-list-card-active);
    }
    & .panel-item[aria-current='true'] {
      box-shadow: var(--shadow-list-card-active);
    }
  }
  .uploader__previews {
    display: flex;
    flex-direction: column;
    gap: 8px;
    &:empty {
      display: none;
    }
  }
  .collapse-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .docs-nav__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .docs-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .docs-toc__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .inline-edit-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ss-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .collapse-section {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-collapse-section);
    & > .collapse-section__header {
      background-color: var(--bg-collapse-section-header);
      border-bottom: 1px solid var(--border-collapse-divider);
    }
    & > .collapse-trigger {
      background-color: var(--bg-collapse-section-header);
      border-bottom: 1px solid var(--border-collapse-divider);
    }
    & > .collapse-trigger[aria-expanded='false'] {
      border-bottom-color: transparent;
    }
    .collapse-group--joined > & {
      border-radius: 0;
      border-bottom: 0;
    }
    .collapse-group--joined > &:first-child {
      border-top-left-radius: var(--radius-lg);
      border-top-right-radius: var(--radius-lg);
    }
    .collapse-group--joined > &:last-child {
      border-bottom-left-radius: var(--radius-lg);
      border-bottom-right-radius: var(--radius-lg);
      border-bottom: 1px solid var(--border-collapse);
    }
    .collapse-group--joined > & + & {
      border-top: 1px solid var(--border-collapse-divider);
    }
  }
  .media-list {
    display: flex;
    flex-direction: column;
    & > .media + .media, & > * + .media {
      border-top: 1px solid var(--border-divider);
    }
    & .media {
      padding-top: 12px;
      padding-bottom: 12px;
    }
    & .media:first-child {
      padding-top: 0;
    }
    & .media:last-child {
      padding-bottom: 0;
    }
  }
  .carousel--filmstrip {
    display: flex;
    flex-direction: column;
    & .carousel__thumbs {
      display: flex;
    }
  }
  .carousel__track {
    display: flex;
    .carousel--vertical & {
      flex-direction: column;
    }
  }
  .docs-page-header__row {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .docs-stage {
    border: 1px solid var(--border-table-container, var(--border-divider));
    border-radius: 10px;
    overflow: hidden;
    &:has(.dropdown, .dropdown-menu, .combobox, .combobox__panel) {
      overflow: visible;
    }
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & {
      background-color: var(--bg-primary);
    }
    padding: 24px;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & {
      background-color: var(--bg-primary);
    }
  }
  .docs-example__stage {
    padding: 24px;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & {
      background-color: var(--bg-primary);
    }
    &:is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) {
      background-color: oklch(18% 0.01 250);
      color: oklch(95% 0 0);
    }
  }
  .stepper-mobile {
    display: flex;
    &.collapse.show {
      display: flex;
    }
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 3);
    border-color: var(--border-step-pill);
    background-color: var(--bg-step-pill);
  }
  .docs-anim-stage__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--bg-secondary);
  }
  .docs-prev-next__direction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    .docs-prev-next__item--next & {
      justify-content: flex-end;
    }
  }
  .docs-example__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-divider);
    background-color: var(--bg-secondary);
  }
  .docs-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background-color: var(--text-info, var(--text-primary));
    color: var(--bg-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    &:hover {
      opacity: 0.92;
      color: var(--bg-primary);
    }
  }
  .docs-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
  }
  .inline-edit__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 11.5px;
    line-height: 1;
    border-radius: 999px;
    background-color: var( --bg-inline-edit-tag, var(--bg-badge, var(--utility-neutral-100)) );
    color: var(--text-inline-edit-tag, var(--text-inline-edit));
  }
  .ss-viewport-ctrls__group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-lg);
    background: var(--ss-surface);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-surface) 92%, transparent);
    }
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px var(--ss-border), var(--shadow-md);
  }
  .docs-rule__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-divider);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    .docs-rule--do & {
      color: var(--text-success);
      background: linear-gradient( 90deg, var(--bg-success-subtle) 0%, var(--bg-success-subtle) 40%, transparent 100% ), #ffffff;
      border-bottom-color: var(--border-success-subtle, var(--bg-success-subtle));
    }
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .docs-rule--do & {
      background: linear-gradient( 90deg, var(--bg-success-subtle) 0%, var(--bg-success-subtle) 40%, transparent 100% ), var(--bg-primary);
    }
    .docs-rule--dont & {
      color: var(--text-danger);
      background: linear-gradient( 90deg, var(--bg-danger-subtle) 0%, var(--bg-danger-subtle) 40%, transparent 100% ), #ffffff;
      border-bottom-color: var(--border-danger-subtle, var(--bg-danger-subtle));
    }
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) .docs-rule--dont & {
      background: linear-gradient( 90deg, var(--bg-danger-subtle) 0%, var(--bg-danger-subtle) 40%, transparent 100% ), var(--bg-primary);
    }
  }
  .docs-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background-color: transparent;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
  }
  .docs-nav__group-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    & i {
      font-size: 11px;
      opacity: 0.8;
    }
  }
  .ss-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--ss-text);
    & i {
      font-size: 20px;
      color: var(--ss-accent);
    }
  }
  .docs-catalog-card__body {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
  }
  .ss-topbar__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ss-muted);
    padding-left: 8px;
  }
  .inline-edit--rating {
    & .inline-edit__value {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    & .inline-edit__editor {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    & .inline-edit__editor .inline-edit__star:hover, & .inline-edit__editor .inline-edit__star:hover ~ .inline-edit__star {
      color: var(--utility-amber-300);
    }
    &.is-editing {
      gap: 6px;
    }
  }
  .docs-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
    &:hover {
      color: var(--text-primary);
    }
  }
  .dashboard-grid__section-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .inline-edit-popover__body {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .inline-link-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .ss-topbar__left {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ss-topbar__right {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .wizard-actions {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .docs-header__version {
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--docs-radius-sm);
    background-color: var(--text-brand-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklch, var(--text-brand-primary) 12%, transparent);
    }
    color: var(--text-brand-primary);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .kbd {
    .panel-item-trailing & {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: 4px;
      font-family: 'Space Mono', monospace;
      font-size: 10px;
      color: var(--text-list-item-kbd);
      background-color: var(--bg-list-item-kbd);
      border: 1px solid var(--border-list-item-kbd);
      box-shadow: 0 1px 0 var(--border-list-item-kbd);
      line-height: 1;
    }
  }
  .kbd {
    .accordion__meta & {
      display: inline-flex;
      align-items: center;
      padding: 1px 5px;
      border-radius: var(--radius-sm);
      font-family: 'Space Mono', monospace;
      font-size: 10px;
      color: var(--text-collapse-meta);
      background-color: var(--bg-list-item-kbd, var(--utility-neutral-100));
      border: 1px solid var(--border-list-item-kbd, var(--utility-neutral-200));
      line-height: 1;
    }
  }
  .docs-hero__status {
    display: inline-flex;
    align-items: center;
  }
  .ss-mode-switcher {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-lg);
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 4%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    gap: 2px;
  }
  .is-editing {
    &.inline-edit > .inline-edit__display {
      display: none;
    }
    &.inline-edit > .inline-edit__editor {
      display: inline-flex;
    }
    &.inline-edit--rating {
      gap: 6px;
    }
  }
  .docs-grid {
    display: grid;
    gap: 12px;
  }
  .stepper-mobile__dots {
    display: inline-flex;
    gap: 6px;
  }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .line-clamp-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }
  .panel-item-description--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .text-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .carousel--minimal {
    & .carousel__prev {
      opacity: 0;
    }
    & .carousel__next {
      opacity: 0;
    }
    &:hover .carousel__prev {
      opacity: 0.85;
    }
    &:hover .carousel__next {
      opacity: 0.85;
    }
    &:focus-within .carousel__prev {
      opacity: 0.85;
    }
    &:focus-within .carousel__next {
      opacity: 0.85;
    }
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    & .carousel__dots {
      display: none;
    }
  }
  .docs-toc__link {
    display: block;
    padding: 4px 10px;
    border-left: 2px solid transparent;
    color: var(--text-tertiary);
    font-size: 12.5px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease;
    &:hover {
      color: var(--text-primary);
    }
    &.is-active {
      color: var(--text-info, var(--text-primary));
      border-color: var(--text-info, var(--text-primary));
      font-weight: 600;
    }
  }
  .inline-edit--card {
    --ie-pad-y: 8px;
    --ie-pad-x: 12px;
    --ie-radius: var(--radius-lg);
    display: flex;
    box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
    background-color: var(--bg-input);
    &:hover:not(.is-editing) {
      box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
      background-color: var(--bg-input);
    }
  }
  .inline-edit__placeholder {
    color: var(--text-inline-edit-placeholder);
    font-style: italic;
    .inline-edit:not(.is-empty) & {
      display: none;
    }
  }
  .is-presenting {
    &.ss-shell .ss-topbar {
      display: none;
    }
    & .ss-shell .ss-left {
      display: none;
    }
    & .ss-shell .ss-right {
      display: none;
    }
    & .ss-shell .ss-timeline {
      display: none;
    }
    &.ss-shell .ss-viewport__chrome {
      opacity: 0.5;
    }
  }
  .is-collapsed {
    &.ss-asset-library .ss-asset-library__body {
      display: none;
    }
    & .ss-asset-library .ss-asset-library__tabs {
      display: none;
    }
    & .ss-asset-library .ss-asset-library__search {
      display: none;
    }
  }
  .inline-edit--editing {
    &.inline-edit > .inline-edit__display {
      display: none;
    }
    &.inline-edit > .inline-edit__editor {
      display: inline-flex;
    }
  }
  .is-hidden {
    &.docs-nav__group {
      display: none;
    }
    &.docs-nav__link {
      display: none;
    }
  }
  .block {
    display: block;
  }
  .carousel--player {
    & .carousel__progress {
      display: block;
    }
  }
  .contents {
    display: contents;
  }
  .docs-hero__logo--on-dark {
    display: none;
  }
  .flex {
    display: flex;
  }
  .flex {
    &.collapse.show {
      display: flex;
    }
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .is-empty {
    &.docs-toc {
      display: none;
    }
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-row {
    display: table-row;
  }
  .field-sizing-content {
    field-sizing: content;
  }
  .aspect-3\/2 {
    aspect-ratio: 3/2;
  }
  .aspect-4\/3 {
    aspect-ratio: 4/3;
  }
  .aspect-\[\.65\] {
    aspect-ratio: .65;
  }
  .aspect-\[0\.3\] {
    aspect-ratio: 0.3;
  }
  .aspect-\[0\.66\] {
    aspect-ratio: 0.66;
  }
  .aspect-\[0\.793\] {
    aspect-ratio: 0.793;
  }
  .aspect-\[1\.5\] {
    aspect-ratio: 1.5;
  }
  .aspect-\[1\.6\] {
    aspect-ratio: 1.6;
  }
  .aspect-\[1\.33\] {
    aspect-ratio: 1.33;
  }
  .aspect-\[3\] {
    aspect-ratio: 3;
  }
  .aspect-\[4\/1\] {
    aspect-ratio: 4/1;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .carousel--1-1 {
    & .carousel__slide {
      aspect-ratio: 1 / 1;
    }
  }
  .carousel--3-4 {
    & .carousel__slide {
      aspect-ratio: 3 / 4;
    }
  }
  .carousel--4-3 {
    & .carousel__slide {
      aspect-ratio: 4 / 3;
    }
  }
  .carousel--16-9 {
    & .carousel__slide {
      aspect-ratio: 16 / 9;
    }
  }
  .carousel--21-9 {
    & .carousel__slide {
      aspect-ratio: 21 / 9;
    }
  }
  .docs-nav__link-icon {
    color: var(--text-tertiary);
    font-size: 12px;
    width: 14px;
    &:is(img) {
      width: 18px;
    }
    text-align: center;
    &img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      flex: 0 0 auto;
    }
    .docs-nav__item.is-active & {
      color: inherit;
    }
  }
  .is-loading {
    &.accordion__item > summary::after {
      content: '';
      width: 12px;
      height: 12px;
      border: 1.5px solid currentColor;
      border-right-color: transparent;
      border-radius: var(--radius-full);
      animation: accordion-spin 600ms linear infinite;
      transform: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
      &.accordion__item > summary::after {
        animation: none;
      }
    }
  }
  .ss-range {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 8%, transparent);
    }
    appearance: none;
    accent-color: var(--ss-accent);
    &:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 3px var(--ss-focus);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-focus) 40%, transparent);
      }
    }
    &::-webkit-slider-thumb {
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: var(--ss-surface);
      border: 2px solid var(--ss-accent);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
    }
    &::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: var(--ss-surface);
      border: 2px solid var(--ss-accent);
      cursor: pointer;
    }
  }
  .carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--bg-carousel-indicator);
    border: 0;
    cursor: pointer;
    transition: background-color 140ms ease, width 200ms ease;
    &:hover {
      background-color: var(--bg-carousel-indicator-hover);
    }
    &.is-active {
      width: 18px;
      background-color: var(--bg-brand-solid);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
    @media (pointer: coarse) {
      width: 8px;
      height: 8px;
      &.is-active {
        width: 22px;
      }
    }
  }
  .ss-input {
    &[disabled] {
      opacity: 0.55;
      cursor: not-allowed;
    }
    width: 100%;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--ss-surface);
    color: var(--ss-text);
    font-size: 12.5px;
    font-family: inherit;
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    &:focus, &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .inline-edit__star {
    width: 16px;
    height: 16px;
    background: transparent;
    border: 0;
    color: var(--utility-amber-400);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    border-radius: var(--radius-xs);
    &[data-active='false'] {
      color: var(--utility-neutral-300);
    }
    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--border-focus);
    }
    .inline-edit--rating .inline-edit__editor &:hover, .inline-edit--rating .inline-edit__editor &:hover ~ & {
      color: var(--utility-amber-300);
    }
  }
  .ss-color-clear {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ss-muted);
    cursor: pointer;
    line-height: 1;
    font-size: 13px;
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    &:hover {
      color: var(--ss-text);
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 6%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .ss-tl__btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--ss-muted);
    cursor: pointer;
    &:hover {
      color: var(--ss-text);
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 6%, transparent);
      }
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
    &.is-active {
      color: var(--ss-accent);
    }
  }
  .ss-modal__close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--ss-muted);
    cursor: pointer;
    &:hover {
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 6%, transparent);
      }
      color: var(--ss-text);
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .step-indicator--dot {
    width: calc(var(--size-step-indicator) * 0.4);
    height: calc(var(--size-step-indicator) * 0.4);
    align-self: center;
  }
  .collapsing {
    height: 0;
    overflow: hidden;
    transition: height var(--duration-collapse, 350ms) var(--ease-collapse, ease);
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    &.collapse-horizontal {
      width: 0;
      height: auto;
      overflow: hidden;
      transition: width var(--duration-collapse, 350ms) var(--ease-collapse, ease);
    }
    @media (prefers-reduced-motion: reduce) {
      &.collapse-horizontal {
        transition: none;
      }
    }
  }
  .step-connector-fill {
    height: 100%;
    width: 0;
    border-radius: var(--radius-full);
    background-color: var(--bg-step-connector-fill);
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1), height 200ms cubic-bezier(0.4, 0, 0.2, 1);
    .stepper-vertical & {
      height: 0;
      width: 100%;
    }
    .step.is-completed & {
      width: 100%;
    }
    .stepper-vertical .step.is-completed & {
      height: 100%;
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
    .stepper--gradient & {
      background: linear-gradient( 90deg, var(--bg-step-completed) 0%, var(--bg-step-current) 100% );
    }
  }
  .stepper-mobile__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--bg-step-connector);
    transition: width 160ms ease, background-color 160ms ease;
    &.is-completed {
      background-color: var(--bg-step-completed);
    }
    &.is-current {
      width: 18px;
      border-radius: 999px;
      background-color: var(--bg-step-current);
    }
  }
  .step-bar__fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background-color: var(--bg-step-bar-fill, var(--bg-step-connector-fill));
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
    .step-bar__section.is-completed & {
      width: 100%;
    }
    .step-bar__section.is-current & {
      width: var(--step-bar-progress, 50%);
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
  .docs-status__dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background-color: currentColor;
  }
  .ss-select {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--ss-surface);
    color: var(--ss-text);
    font-size: 12.5px;
    font-family: inherit;
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    &:focus, &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .docs-token__swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-divider);
  }
  .skeleton--avatar-sm {
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
  }
  .carousel__progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--bg-brand-solid);
    transition: width 100ms linear;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
  .stepper-bar--label-md {
    & .step-bar__title {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
    & .step-bar__number {
      width: 18px;
      height: 18px;
      font-size: 0.6875rem;
      line-height: var(--tw-leading, 1rem);
      letter-spacing: var(--tw-tracking, 0.01em);
    }
  }
  .media__chevron {
    width: 12px;
    height: 12px;
    color: var(--text-tertiary);
    transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .size-1 {
    width: var(--spacing);
    height: var(--spacing);
  }
  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }
  .size-1\.25 {
    width: calc(var(--spacing) * 1.25);
    height: calc(var(--spacing) * 1.25);
  }
  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }
  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-3\! {
    width: calc(var(--spacing) * 3) !important;
    height: calc(var(--spacing) * 3) !important;
  }
  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-4\! {
    width: calc(var(--spacing) * 4) !important;
    height: calc(var(--spacing) * 4) !important;
  }
  .size-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .size-13 {
    width: calc(var(--spacing) * 13);
    height: calc(var(--spacing) * 13);
  }
  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .size-18 {
    width: calc(var(--spacing) * 18);
    height: calc(var(--spacing) * 18);
  }
  .size-20 {
    width: calc(var(--spacing) * 20);
    height: calc(var(--spacing) * 20);
  }
  .size-22 {
    width: calc(var(--spacing) * 22);
    height: calc(var(--spacing) * 22);
  }
  .size-24 {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
  }
  .size-36 {
    width: calc(var(--spacing) * 36);
    height: calc(var(--spacing) * 36);
  }
  .size-40 {
    width: calc(var(--spacing) * 40);
    height: calc(var(--spacing) * 40);
  }
  .size-120 {
    width: calc(var(--spacing) * 120);
    height: calc(var(--spacing) * 120);
  }
  .size-\[5\.25px\] {
    width: 5.25px;
    height: 5.25px;
  }
  .size-\[6\.13px\] {
    width: 6.13px;
    height: 6.13px;
  }
  .size-\[7\.88px\] {
    width: 7.88px;
    height: 7.88px;
  }
  .size-\[7px\] {
    width: 7px;
    height: 7px;
  }
  .size-\[8\.75px\] {
    width: 8.75px;
    height: 8.75px;
  }
  .size-\[10\.5px\] {
    width: 10.5px;
    height: 10.5px;
  }
  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }
  .size-\[68px\] {
    width: 68px;
    height: 68px;
  }
  .size-\[136px\] {
    width: 136px;
    height: 136px;
  }
  .size-\[192px\] {
    width: 192px;
    height: 192px;
  }
  .size-\[200px\] {
    width: 200px;
    height: 200px;
  }
  .size-\[272px\] {
    width: 272px;
    height: 272px;
  }
  .size-auto {
    width: auto;
    height: auto;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .size-max {
    width: max-content;
    height: max-content;
  }
  .checkbox-md {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .ss-topbar__name {
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius-lg);
    border: 0;
    background: transparent;
    color: var(--ss-text);
    font-size: 13.5px;
    font-weight: 500;
    min-width: 220px;
    &:hover {
      background: var(--ss-text);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-text) 4%, transparent);
      }
    }
    &:focus {
      outline: 0;
      background: var(--ss-surface-soft);
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .docs-anim-sample--big {
    height: 92px;
    min-width: 140px;
    font-size: 13px;
    border-radius: 12px;
  }
  .emoji-picker__search {
    flex: 1;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-input, var(--border-divider));
    border-radius: 8px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 120ms ease;
  }
  .ss-input--color {
    .ss-color-row & {
      flex: 1;
    }
    padding: 2px;
    height: 28px;
  }
  .is-visible {
    &.ss-timeline {
      flex-basis: 64px;
      height: 64px;
    }
  }
  .ss-input--inline {
    height: 22px;
    padding: 0 4px;
    font-size: 12.5px;
    font-weight: 500;
  }
  .\!h-11 {
    height: calc(var(--spacing) * 11) !important;
  }
  .\!h-\[20px\] {
    height: 20px !important;
  }
  .\!h-auto {
    height: auto !important;
  }
  .h-0 {
    height: 0;
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-1\/2 {
    height: calc(1 / 2 * 100%);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-16\.5 {
    height: calc(var(--spacing) * 16.5);
  }
  .h-17 {
    height: calc(var(--spacing) * 17);
  }
  .h-18 {
    height: calc(var(--spacing) * 18);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-20\.5 {
    height: calc(var(--spacing) * 20.5);
  }
  .h-22 {
    height: calc(var(--spacing) * 22);
  }
  .h-23\.5 {
    height: calc(var(--spacing) * 23.5);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-24\.5 {
    height: calc(var(--spacing) * 24.5);
  }
  .h-25\.5 {
    height: calc(var(--spacing) * 25.5);
  }
  .h-26 {
    height: calc(var(--spacing) * 26);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-29\.5 {
    height: calc(var(--spacing) * 29.5);
  }
  .h-30 {
    height: calc(var(--spacing) * 30);
  }
  .h-31\.5 {
    height: calc(var(--spacing) * 31.5);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-33 {
    height: calc(var(--spacing) * 33);
  }
  .h-34\.25 {
    height: calc(var(--spacing) * 34.25);
  }
  .h-35\.75 {
    height: calc(var(--spacing) * 35.75);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-37 {
    height: calc(var(--spacing) * 37);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-41\.5 {
    height: calc(var(--spacing) * 41.5);
  }
  .h-41\.75 {
    height: calc(var(--spacing) * 41.75);
  }
  .h-44 {
    height: calc(var(--spacing) * 44);
  }
  .h-45\.25 {
    height: calc(var(--spacing) * 45.25);
  }
  .h-46 {
    height: calc(var(--spacing) * 46);
  }
  .h-47 {
    height: calc(var(--spacing) * 47);
  }
  .h-47\.5 {
    height: calc(var(--spacing) * 47.5);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-50 {
    height: calc(var(--spacing) * 50);
  }
  .h-50\! {
    height: calc(var(--spacing) * 50) !important;
  }
  .h-51 {
    height: calc(var(--spacing) * 51);
  }
  .h-51\.5 {
    height: calc(var(--spacing) * 51.5);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-53 {
    height: calc(var(--spacing) * 53);
  }
  .h-53\.5 {
    height: calc(var(--spacing) * 53.5);
  }
  .h-54 {
    height: calc(var(--spacing) * 54);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-60 {
    height: calc(var(--spacing) * 60);
  }
  .h-60\! {
    height: calc(var(--spacing) * 60) !important;
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-65 {
    height: calc(var(--spacing) * 65);
  }
  .h-68 {
    height: calc(var(--spacing) * 68);
  }
  .h-70 {
    height: calc(var(--spacing) * 70);
  }
  .h-71\.5 {
    height: calc(var(--spacing) * 71.5);
  }
  .h-72 {
    height: calc(var(--spacing) * 72);
  }
  .h-75\.5 {
    height: calc(var(--spacing) * 75.5);
  }
  .h-78 {
    height: calc(var(--spacing) * 78);
  }
  .h-80 {
    height: calc(var(--spacing) * 80);
  }
  .h-86 {
    height: calc(var(--spacing) * 86);
  }
  .h-90 {
    height: calc(var(--spacing) * 90);
  }
  .h-94 {
    height: calc(var(--spacing) * 94);
  }
  .h-96 {
    height: calc(var(--spacing) * 96);
  }
  .h-100 {
    height: calc(var(--spacing) * 100);
  }
  .h-102 {
    height: calc(var(--spacing) * 102);
  }
  .h-104 {
    height: 26rem;
  }
  .h-108 {
    height: calc(var(--spacing) * 108);
  }
  .h-110 {
    height: 28rem;
  }
  .h-118 {
    height: 30rem;
  }
  .h-122 {
    height: calc(var(--spacing) * 122);
  }
  .h-127 {
    height: calc(var(--spacing) * 127);
  }
  .h-128 {
    height: calc(var(--spacing) * 128);
  }
  .h-140 {
    height: 36rem;
  }
  .h-154 {
    height: 40rem;
  }
  .h-160 {
    height: 42rem;
  }
  .h-170 {
    height: calc(var(--spacing) * 170);
  }
  .h-170\.5 {
    height: calc(var(--spacing) * 170.5);
  }
  .h-183 {
    height: calc(var(--spacing) * 183);
  }
  .h-200 {
    height: calc(var(--spacing) * 200);
  }
  .h-240 {
    height: calc(var(--spacing) * 240);
  }
  .h-260 {
    height: calc(var(--spacing) * 260);
  }
  .h-\[1em\] {
    height: 1em;
  }
  .h-\[2\.5px\] {
    height: 2.5px;
  }
  .h-\[13px\] {
    height: 13px;
  }
  .h-\[18px\] {
    height: 18px;
  }
  .h-\[20\%\] {
    height: 20%;
  }
  .h-\[22px\] {
    height: 22px;
  }
  .h-\[24px\] {
    height: 24px;
  }
  .h-\[27rem\] {
    height: 27rem;
  }
  .h-\[36px\] {
    height: 36px;
  }
  .h-\[42px\] {
    height: 42px;
  }
  .h-\[44px\] {
    height: 44px;
  }
  .h-\[47px\] {
    height: 47px;
  }
  .h-\[50vh\] {
    height: 50vh;
  }
  .h-\[60px\] {
    height: 60px;
  }
  .h-\[72px\] {
    height: 72px;
  }
  .h-\[73px\] {
    height: 73px;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .h-\[160px\] {
    height: 160px;
  }
  .h-\[172px\] {
    height: 172px;
  }
  .h-\[250px\] {
    height: 250px;
  }
  .h-\[300px\] {
    height: 300px;
  }
  .h-\[440px\] {
    height: 440px;
  }
  .h-\[460px\] {
    height: 460px;
  }
  .h-\[500px\] {
    height: 500px;
  }
  .h-\[560px\] {
    height: 560px;
  }
  .h-\[579px\] {
    height: 579px;
  }
  .h-\[912px\] {
    height: 912px;
  }
  .h-\[calc\(100\%-72px\)\] {
    height: calc(100% - 72px);
  }
  .h-auto {
    height: auto;
  }
  .h-dvh {
    height: 100dvh;
  }
  .h-fit {
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .h-max {
    height: max-content;
  }
  .h-min {
    height: min-content;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
  }
  .h-svh {
    height: 100svh;
  }
  .max-h-5 {
    max-height: calc(var(--spacing) * 5);
  }
  .max-h-9 {
    max-height: calc(var(--spacing) * 9);
  }
  .max-h-10 {
    max-height: calc(var(--spacing) * 10);
  }
  .max-h-44 {
    max-height: calc(var(--spacing) * 44);
  }
  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }
  .max-h-56\! {
    max-height: calc(var(--spacing) * 56) !important;
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-64\! {
    max-height: calc(var(--spacing) * 64) !important;
  }
  .max-h-68 {
    max-height: calc(var(--spacing) * 68);
  }
  .max-h-70 {
    max-height: calc(var(--spacing) * 70);
  }
  .max-h-76 {
    max-height: calc(var(--spacing) * 76);
  }
  .max-h-80\! {
    max-height: calc(var(--spacing) * 80) !important;
  }
  .max-h-88\.5 {
    max-height: calc(var(--spacing) * 88.5);
  }
  .max-h-90 {
    max-height: calc(var(--spacing) * 90);
  }
  .max-h-92 {
    max-height: calc(var(--spacing) * 92);
  }
  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }
  .max-h-106 {
    max-height: calc(var(--spacing) * 106);
  }
  .max-h-125\.5 {
    max-height: calc(var(--spacing) * 125.5);
  }
  .max-h-131\.5 {
    max-height: calc(var(--spacing) * 131.5);
  }
  .max-h-168\.5 {
    max-height: calc(var(--spacing) * 168.5);
  }
  .max-h-\[42vh\] {
    max-height: 42vh;
  }
  .max-h-\[320px\] {
    max-height: 320px;
  }
  .max-h-\[400px\] {
    max-height: 400px;
  }
  .max-h-\[520px\] {
    max-height: 520px;
  }
  .max-h-\[calc\(100vh-64px\)\] {
    max-height: calc(100vh - 64px);
  }
  .max-h-\[calc\(var\(--visual-viewport-height\)-var\(--modal-pt\)-var\(--modal-pb\)\)\] {
    max-height: calc(var(--visual-viewport-height) - var(--modal-pt) - var(--modal-pb));
  }
  .max-h-\[inherit\] {
    max-height: inherit;
  }
  .max-h-full {
    max-height: 100%;
  }
  .max-h-svh {
    max-height: 100svh;
  }
  .docs-sidebar__inner {
    transition: opacity 160ms ease;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 24px 12px;
  }
  .docs-anim-stage__body--tall {
    min-height: 200px;
  }
  .min-h-0 {
    min-height: 0;
  }
  .min-h-6 {
    min-height: calc(var(--spacing) * 6);
  }
  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }
  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }
  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }
  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }
  .min-h-31\.5 {
    min-height: calc(var(--spacing) * 31.5);
  }
  .min-h-33\.5 {
    min-height: calc(var(--spacing) * 33.5);
  }
  .min-h-37 {
    min-height: calc(var(--spacing) * 37);
  }
  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }
  .min-h-41 {
    min-height: calc(var(--spacing) * 41);
  }
  .min-h-47 {
    min-height: calc(var(--spacing) * 47);
  }
  .min-h-49 {
    min-height: calc(var(--spacing) * 49);
  }
  .min-h-53 {
    min-height: calc(var(--spacing) * 53);
  }
  .min-h-55 {
    min-height: calc(var(--spacing) * 55);
  }
  .min-h-57 {
    min-height: calc(var(--spacing) * 57);
  }
  .min-h-60 {
    min-height: calc(var(--spacing) * 60);
  }
  .min-h-70\.5 {
    min-height: calc(var(--spacing) * 70.5);
  }
  .min-h-73 {
    min-height: calc(var(--spacing) * 73);
  }
  .min-h-80 {
    min-height: calc(var(--spacing) * 80);
  }
  .min-h-90 {
    min-height: calc(var(--spacing) * 90);
  }
  .min-h-120 {
    min-height: calc(var(--spacing) * 120);
  }
  .min-h-160 {
    min-height: 42rem;
  }
  .min-h-\[2rem\] {
    min-height: 2rem;
  }
  .min-h-\[8rem\] {
    min-height: 8rem;
  }
  .min-h-\[9rem\] {
    min-height: 9rem;
  }
  .min-h-\[17rem\] {
    min-height: 17rem;
  }
  .min-h-\[22rem\] {
    min-height: 22rem;
  }
  .min-h-\[24rem\] {
    min-height: 24rem;
  }
  .min-h-\[26rem\] {
    min-height: 26rem;
  }
  .min-h-\[30px\] {
    min-height: 30px;
  }
  .min-h-\[140px\] {
    min-height: 140px;
  }
  .min-h-\[295\.13px\] {
    min-height: 295.13px;
  }
  .min-h-\[320px\] {
    min-height: 320px;
  }
  .min-h-\[325px\] {
    min-height: 325px;
  }
  .min-h-dvh {
    min-height: 100dvh;
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .inline-edit--currency {
    & .inline-edit__value {
      font-variant-numeric: tabular-nums;
    }
    & .inline-edit__field {
      font-variant-numeric: tabular-nums;
    }
    & input.inline-edit__field {
      text-align: right;
      width: 100px;
      min-width: 0;
      flex: 0 0 auto;
    }
  }
  .inline-edit--number {
    & .inline-edit__value {
      font-variant-numeric: tabular-nums;
    }
    & .inline-edit__field {
      font-variant-numeric: tabular-nums;
    }
    & input.inline-edit__field {
      text-align: right;
      width: 100px;
      min-width: 0;
      flex: 0 0 auto;
    }
  }
  .wizard-rail {
    .wizard.wizard--side-rail & {
      flex-shrink: 0;
      overflow-y: auto;
      width: var(--width-wizard-rail, 14rem);
      background-color: var(--bg-wizard-rail, var(--bg-primary-subtle));
      border-right: 1px solid var(--border-wizard-divider);
      padding: var(--padding-wizard-rail, 1rem);
    }
    .wizard--top-bar & {
      width: 100%;
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
      padding: calc(var(--spacing) * 3);
      border-bottom: 1px solid var(--border-wizard-divider);
    }
    & .stepper .step.is-completed {
      cursor: pointer;
    }
    & .stepper .step.is-visited {
      cursor: pointer;
    }
    & .stepper .step.is-completed:hover .step-title {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
    & .stepper .step.is-visited:hover .step-title {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
    .wizard.wizard--side-rail.wizard--compact & {
      width: var(--width-wizard-rail-compact, 11rem);
      padding: var(--padding-wizard-rail-compact, 0.75rem);
    }
  }
  .docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    & th {
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-divider);
      vertical-align: top;
    }
    & td {
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-divider);
      vertical-align: top;
    }
    & th {
      color: var(--text-tertiary);
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background-color: var(--bg-secondary);
    }
    & code {
      white-space: nowrap;
    }
  }
  .is-current {
    &.step__substep {
      color: var(--text-step-title-current);
      font-weight: 500;
    }
    &.step .step-indicator {
      background-color: var(--bg-step-current);
      border-color: var(--border-step-current);
      color: var(--text-step-current);
      transform: scale(1.04);
    }
    &.step .step-title {
      color: var(--text-step-title-current);
    }
    &.step.is-clickable:not(.is-disabled):hover .step-indicator {
      background-color: var(--bg-step-current-hover);
    }
    &.step.is-clickable:not(.is-disabled):active .step-indicator {
      background-color: var(--bg-step-current-active);
    }
    .stepper-pill &.step {
      background-color: var(--bg-step-pill-current);
      color: var(--text-step-pill-current);
    }
    .stepper-card &.step {
      box-shadow: var(--shadow-step-card-current);
      transform: translateY(-1px);
    }
    .stepper-chevron &.step {
      background-color: var(--bg-step-chevron-current);
      color: var(--text-step-chevron-current);
      font-weight: 500;
    }
    &.stepper-mobile__dot {
      width: 18px;
      border-radius: 999px;
      background-color: var(--bg-step-current);
    }
    &.step-bar__section .step-bar__fill {
      width: var(--step-bar-progress, 50%);
    }
    &.step-bar__section .step-bar__number {
      background-color: var(--bg-step-current);
      border-color: var(--border-step-current);
      color: var(--text-step-current);
    }
    &.step-bar__section .step-bar__title {
      color: var(--text-step-title-current);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    &.step-bar__sub {
      color: var(--text-step-title-current);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    [data-contrast='high'] .stepper-pill &.step {
      box-shadow: 0 0 0 2px currentColor inset;
    }
  }
  .stepper {
    width: 100%;
    --stepper-anim: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --bg-step-current: var(--bg-brand-solid);
    --bg-step-current-hover: var(--bg-brand-solid-hover);
    --bg-step-current-active: var(--bg-brand-solid-active);
    --text-step-current: var(--text-on-brand);
    --bg-step-completed: var(--bg-brand-solid);
    --bg-step-completed-hover: var(--bg-brand-solid-hover);
    --bg-step-completed-active: var(--bg-brand-solid-active);
    --text-step-completed: var(--text-on-brand);
    --bg-step-connector-fill: var(--bg-brand-solid);
    --shadow-step-card-current: 0 0 0 2px var(--border-focus), 0 6px 14px oklch(0% 0 0 / 0.08);
    --bg-step-pill-current: var(--bg-brand-solid);
    --text-step-pill-current: var(--text-on-brand);
    --bg-step-chevron-current: var(--bg-brand-solid);
    --text-step-chevron-current: var(--text-on-brand);
    --halo-step-in-progress: var(--bg-brand-solid);
    @supports (color: color-mix(in lab, red, red)) {
      --halo-step-in-progress: color-mix(in oklch, var(--bg-brand-solid) 26%, transparent);
    }
    --text-step-subtitle: var(--text-tertiary);
    .wizard-rail & .step.is-completed {
      cursor: pointer;
    }
    .wizard-rail & .step.is-visited {
      cursor: pointer;
    }
    .wizard-rail & .step.is-completed:hover .step-title {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
    .wizard-rail & .step.is-visited:hover .step-title {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
  }
  .ss-ai__textarea {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--ss-surface);
    color: var(--ss-text);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    resize: vertical;
    box-shadow: inset 0 0 0 1px var(--ss-divider);
    &:focus, &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-focus);
    }
  }
  .wizard--top-bar {
    & .wizard-rail {
      width: 100%;
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
      padding: calc(var(--spacing) * 3);
      border-bottom: 1px solid var(--border-wizard-divider);
    }
  }
  .is-active {
    &.carousel__dot {
      width: 18px;
      background-color: var(--bg-brand-solid);
    }
    &.carousel__thumb {
      opacity: 1;
      border-color: var(--border-focus);
      background-color: var(--bg-carousel-thumbnail-active);
    }
    @media (pointer: coarse) {
      &.carousel__dot {
        width: 22px;
      }
    }
  }
  .is-success {
    &.uploader {
      --uploader-accent: var(--text-success);
      --uploader-accent-bg: var(--bg-success-subtle);
      --uploader-ring: var(--border-success);
    }
    &.uploader__item {
      box-shadow: inset 0 0 0 1px var(--border-success);
    }
    &.uploader__item .uploader__thumb {
      color: var(--text-success);
      background-color: var(--bg-success-subtle);
    }
    &.uploader__item .uploader__detail {
      color: var(--text-success);
    }
    &.uploader__item .uploader__progress > span {
      background-color: var(--text-success);
      width: 100% !important;
    }
  }
  .wizard--compact {
    &.wizard.wizard--side-rail .wizard-rail {
      width: var(--width-wizard-rail-compact, 11rem);
      padding: var(--padding-wizard-rail-compact, 0.75rem);
    }
  }
  .docs-search__input {
    width: 100%;
    padding-left: 32px;
    padding-right: 56px;
    &::placeholder {
      color: var(--text-tertiary);
    }
    &:focus + .docs-search__hint {
      opacity: 0;
    }
  }
  .docs-overview__search-input {
    width: 100%;
    padding-left: 36px;
  }
  .\!w-12 {
    width: calc(var(--spacing) * 12) !important;
  }
  .\!w-16 {
    width: calc(var(--spacing) * 16) !important;
  }
  .\!w-20 {
    width: calc(var(--spacing) * 20) !important;
  }
  .\!w-32 {
    width: calc(var(--spacing) * 32) !important;
  }
  .\!w-44 {
    width: calc(var(--spacing) * 44) !important;
  }
  .\!w-48 {
    width: calc(var(--spacing) * 48) !important;
  }
  .\!w-56 {
    width: calc(var(--spacing) * 56) !important;
  }
  .\!w-72 {
    width: calc(var(--spacing) * 72) !important;
  }
  .\!w-\[20px\] {
    width: 20px !important;
  }
  .\!w-auto {
    width: auto !important;
  }
  .w-\(--trigger-width\) {
    width: var(--trigger-width);
  }
  .w-0 {
    width: 0;
  }
  .w-0\.5 {
    width: calc(var(--spacing) * 0.5);
  }
  .w-1 {
    width: var(--spacing);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .w-1\/3 {
    width: calc(1 / 3 * 100%);
  }
  .w-1\/4 {
    width: calc(1 / 4 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-2\/3 {
    width: calc(2 / 3 * 100%);
  }
  .w-2\/5 {
    width: calc(2 / 5 * 100%);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-3\/4 {
    width: calc(3 / 4 * 100%);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-4\/6 {
    width: calc(4 / 6 * 100%);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-5\/6 {
    width: calc(5 / 6 * 100%);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-7\.5 {
    width: calc(var(--spacing) * 7.5);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-8\.5 {
    width: calc(var(--spacing) * 8.5);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-11\.5 {
    width: calc(var(--spacing) * 11.5);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-13 {
    width: calc(var(--spacing) * 13);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-18 {
    width: calc(var(--spacing) * 18);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-23 {
    width: calc(var(--spacing) * 23);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-26 {
    width: calc(var(--spacing) * 26);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-30 {
    width: calc(var(--spacing) * 30);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-35\.5 {
    width: calc(var(--spacing) * 35.5);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-38 {
    width: calc(var(--spacing) * 38);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-40\.25 {
    width: calc(var(--spacing) * 40.25);
  }
  .w-42 {
    width: calc(var(--spacing) * 42);
  }
  .w-42\.5 {
    width: calc(var(--spacing) * 42.5);
  }
  .w-43 {
    width: calc(var(--spacing) * 43);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-45 {
    width: calc(var(--spacing) * 45);
  }
  .w-46\.25 {
    width: calc(var(--spacing) * 46.25);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-48\.5 {
    width: calc(var(--spacing) * 48.5);
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-54 {
    width: calc(var(--spacing) * 54);
  }
  .w-55 {
    width: calc(var(--spacing) * 55);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-57\.5 {
    width: calc(var(--spacing) * 57.5);
  }
  .w-60 {
    width: calc(var(--spacing) * 60);
  }
  .w-62 {
    width: calc(var(--spacing) * 62);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-66 {
    width: calc(var(--spacing) * 66);
  }
  .w-70 {
    width: calc(var(--spacing) * 70);
  }
  .w-71 {
    width: calc(var(--spacing) * 71);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-75 {
    width: calc(var(--spacing) * 75);
  }
  .w-78\.5 {
    width: calc(var(--spacing) * 78.5);
  }
  .w-79 {
    width: calc(var(--spacing) * 79);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-82 {
    width: calc(var(--spacing) * 82);
  }
  .w-82\.5 {
    width: calc(var(--spacing) * 82.5);
  }
  .w-87 {
    width: calc(var(--spacing) * 87);
  }
  .w-90 {
    width: calc(var(--spacing) * 90);
  }
  .w-92 {
    width: calc(var(--spacing) * 92);
  }
  .w-93\.5 {
    width: calc(var(--spacing) * 93.5);
  }
  .w-96 {
    width: calc(var(--spacing) * 96);
  }
  .w-98 {
    width: calc(var(--spacing) * 98);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-105 {
    width: calc(var(--spacing) * 105);
  }
  .w-106 {
    width: calc(var(--spacing) * 106);
  }
  .w-108 {
    width: calc(var(--spacing) * 108);
  }
  .w-120 {
    width: calc(var(--spacing) * 120);
  }
  .w-133 {
    width: calc(var(--spacing) * 133);
  }
  .w-144 {
    width: calc(var(--spacing) * 144);
  }
  .w-160 {
    width: 42rem;
  }
  .w-180 {
    width: calc(var(--spacing) * 180);
  }
  .w-200 {
    width: calc(var(--spacing) * 200);
  }
  .w-\[1\%\] {
    width: 1%;
  }
  .w-\[3\%\] {
    width: 3%;
  }
  .w-\[3px\] {
    width: 3px;
  }
  .w-\[4\%\] {
    width: 4%;
  }
  .w-\[4\.5rem\] {
    width: 4.5rem;
  }
  .w-\[5\%\] {
    width: 5%;
  }
  .w-\[6\%\] {
    width: 6%;
  }
  .w-\[7\%\] {
    width: 7%;
  }
  .w-\[8\%\] {
    width: 8%;
  }
  .w-\[9\%\] {
    width: 9%;
  }
  .w-\[10\%\] {
    width: 10%;
  }
  .w-\[10px\] {
    width: 10px;
  }
  .w-\[11\%\] {
    width: 11%;
  }
  .w-\[12\%\] {
    width: 12%;
  }
  .w-\[12px\] {
    width: 12px;
  }
  .w-\[13\%\] {
    width: 13%;
  }
  .w-\[14\%\] {
    width: 14%;
  }
  .w-\[15\%\] {
    width: 15%;
  }
  .w-\[16\%\] {
    width: 16%;
  }
  .w-\[16rem\] {
    width: 16rem;
  }
  .w-\[18\%\] {
    width: 18%;
  }
  .w-\[20\%\] {
    width: 20%;
  }
  .w-\[22\%\] {
    width: 22%;
  }
  .w-\[24\%\] {
    width: 24%;
  }
  .w-\[25\%\] {
    width: 25%;
  }
  .w-\[26\%\] {
    width: 26%;
  }
  .w-\[28\%\] {
    width: 28%;
  }
  .w-\[30\%\] {
    width: 30%;
  }
  .w-\[32\%\] {
    width: 32%;
  }
  .w-\[32px\] {
    width: 32px;
  }
  .w-\[34\%\] {
    width: 34%;
  }
  .w-\[35\%\] {
    width: 35%;
  }
  .w-\[40\%\] {
    width: 40%;
  }
  .w-\[40px\] {
    width: 40px;
  }
  .w-\[40vw\] {
    width: 40vw;
  }
  .w-\[42vw\] {
    width: 42vw;
  }
  .w-\[44px\] {
    width: 44px;
  }
  .w-\[45\%\] {
    width: 45%;
  }
  .w-\[50px\] {
    width: 50px;
  }
  .w-\[56px\] {
    width: 56px;
  }
  .w-\[60\%\] {
    width: 60%;
  }
  .w-\[60px\] {
    width: 60px;
  }
  .w-\[64px\] {
    width: 64px;
  }
  .w-\[70px\] {
    width: 70px;
  }
  .w-\[80\%\] {
    width: 80%;
  }
  .w-\[80px\] {
    width: 80px;
  }
  .w-\[88px\] {
    width: 88px;
  }
  .w-\[90px\] {
    width: 90px;
  }
  .w-\[92px\] {
    width: 92px;
  }
  .w-\[96px\] {
    width: 96px;
  }
  .w-\[100px\] {
    width: 100px;
  }
  .w-\[104px\] {
    width: 104px;
  }
  .w-\[110px\] {
    width: 110px;
  }
  .w-\[120px\] {
    width: 120px;
  }
  .w-\[128px\] {
    width: 128px;
  }
  .w-\[132px\] {
    width: 132px;
  }
  .w-\[135px\] {
    width: 135px;
  }
  .w-\[150\%\] {
    width: 150%;
  }
  .w-\[150px\] {
    width: 150px;
  }
  .w-\[160px\] {
    width: 160px;
  }
  .w-\[172px\] {
    width: 172px;
  }
  .w-\[200px\] {
    width: 200px;
  }
  .w-\[220px\] {
    width: 220px;
  }
  .w-\[232px\] {
    width: 232px;
  }
  .w-\[244px\] {
    width: 244px;
  }
  .w-\[248px\] {
    width: 248px;
  }
  .w-\[250px\] {
    width: 250px;
  }
  .w-\[260px\] {
    width: 260px;
  }
  .w-\[280px\] {
    width: 280px;
  }
  .w-\[300px\] {
    width: 300px;
  }
  .w-\[320px\] {
    width: 320px;
  }
  .w-\[330px\] {
    width: 330px;
  }
  .w-\[340px\] {
    width: 340px;
  }
  .w-\[360px\] {
    width: 360px;
  }
  .w-\[380px\] {
    width: 380px;
  }
  .w-\[400px\] {
    width: 400px;
  }
  .w-\[420px\] {
    width: 420px;
  }
  .w-\[450px\] {
    width: 450px;
  }
  .w-\[473px\] {
    width: 473px;
  }
  .w-\[480px\] {
    width: 480px;
  }
  .w-\[500px\] {
    width: 500px;
  }
  .w-\[520px\] {
    width: 520px;
  }
  .w-\[600px\] {
    width: 600px;
  }
  .w-\[620px\] {
    width: 620px;
  }
  .w-\[calc\(100\%\+80px\)\] {
    width: calc(100% + 80px);
  }
  .w-\[…\] {
    width: …;
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .w-lg {
    width: var(--container-lg);
  }
  .w-max {
    width: max-content;
  }
  .w-md {
    width: var(--container-md);
  }
  .w-min {
    width: min-content;
  }
  .w-px {
    width: 1px;
  }
  .w-screen {
    width: 100vw;
  }
  .w-sm {
    width: var(--container-sm);
  }
  .w-xl {
    width: var(--container-xl);
  }
  .docs-section__lead {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 70ch;
    & code {
      background-color: transparent;
      padding: 0;
      border-radius: 0;
      font-family: 'Space Mono', monospace;
      font-size: 0.92em;
      color: var(--text-primary);
    }
  }
  .panel-list-empty__body {
    max-width: var(--container-xs);
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    opacity: 80%;
  }
  .max-w-\(--breakpoint-sm\) {
    max-width: var(--breakpoint-sm);
  }
  .max-w-\(--breakpoint-xl\) {
    max-width: var(--breakpoint-xl);
  }
  .max-w-0 {
    max-width: 0;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-23\.5 {
    max-width: calc(var(--spacing) * 23.5);
  }
  .max-w-24 {
    max-width: calc(var(--spacing) * 24);
  }
  .max-w-35\.5 {
    max-width: calc(var(--spacing) * 35.5);
  }
  .max-w-40 {
    max-width: calc(var(--spacing) * 40);
  }
  .max-w-44 {
    max-width: calc(var(--spacing) * 44);
  }
  .max-w-45 {
    max-width: calc(var(--spacing) * 45);
  }
  .max-w-50 {
    max-width: calc(var(--spacing) * 50);
  }
  .max-w-56 {
    max-width: calc(var(--spacing) * 56);
  }
  .max-w-60 {
    max-width: calc(var(--spacing) * 60);
  }
  .max-w-67 {
    max-width: calc(var(--spacing) * 67);
  }
  .max-w-70 {
    max-width: calc(var(--spacing) * 70);
  }
  .max-w-71 {
    max-width: calc(var(--spacing) * 71);
  }
  .max-w-72 {
    max-width: calc(var(--spacing) * 72);
  }
  .max-w-74 {
    max-width: calc(var(--spacing) * 74);
  }
  .max-w-76 {
    max-width: calc(var(--spacing) * 76);
  }
  .max-w-78 {
    max-width: calc(var(--spacing) * 78);
  }
  .max-w-88 {
    max-width: calc(var(--spacing) * 88);
  }
  .max-w-90 {
    max-width: calc(var(--spacing) * 90);
  }
  .max-w-96 {
    max-width: calc(var(--spacing) * 96);
  }
  .max-w-98 {
    max-width: calc(var(--spacing) * 98);
  }
  .max-w-100 {
    max-width: calc(var(--spacing) * 100);
  }
  .max-w-114 {
    max-width: calc(var(--spacing) * 114);
  }
  .max-w-120 {
    max-width: calc(var(--spacing) * 120);
  }
  .max-w-128 {
    max-width: calc(var(--spacing) * 128);
  }
  .max-w-132 {
    max-width: 34rem;
  }
  .max-w-140 {
    max-width: 36rem;
  }
  .max-w-148 {
    max-width: calc(var(--spacing) * 148);
  }
  .max-w-160 {
    max-width: 42rem;
  }
  .max-w-180 {
    max-width: calc(var(--spacing) * 180);
  }
  .max-w-200 {
    max-width: calc(var(--spacing) * 200);
  }
  .max-w-240 {
    max-width: calc(var(--spacing) * 240);
  }
  .max-w-270 {
    max-width: calc(var(--spacing) * 270);
  }
  .max-w-\[10rem\] {
    max-width: 10rem;
  }
  .max-w-\[12rem\] {
    max-width: 12rem;
  }
  .max-w-\[14rem\] {
    max-width: 14rem;
  }
  .max-w-\[17\.5rem\] {
    max-width: 17.5rem;
  }
  .max-w-\[80\%\] {
    max-width: 80%;
  }
  .max-w-\[85\%\] {
    max-width: 85%;
  }
  .max-w-\[120px\] {
    max-width: 120px;
  }
  .max-w-\[133px\] {
    max-width: 133px;
  }
  .max-w-\[180px\] {
    max-width: 180px;
  }
  .max-w-\[190px\] {
    max-width: 190px;
  }
  .max-w-\[200px\] {
    max-width: 200px;
  }
  .max-w-\[220px\] {
    max-width: 220px;
  }
  .max-w-\[240px\] {
    max-width: 240px;
  }
  .max-w-\[250px\] {
    max-width: 250px;
  }
  .max-w-\[280px\] {
    max-width: 280px;
  }
  .max-w-\[350px\] {
    max-width: 350px;
  }
  .max-w-\[352px\] {
    max-width: 352px;
  }
  .max-w-\[360px\] {
    max-width: 360px;
  }
  .max-w-\[380px\] {
    max-width: 380px;
  }
  .max-w-\[405px\] {
    max-width: 405px;
  }
  .max-w-\[420px\] {
    max-width: 420px;
  }
  .max-w-\[480px\] {
    max-width: 480px;
  }
  .max-w-\[500px\] {
    max-width: 500px;
  }
  .max-w-\[520px\] {
    max-width: 520px;
  }
  .max-w-\[560px\] {
    max-width: 560px;
  }
  .max-w-\[720px\] {
    max-width: 720px;
  }
  .max-w-\[800px\] {
    max-width: 800px;
  }
  .max-w-\[855px\] {
    max-width: 855px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-prose {
    max-width: 65ch;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .measure {
    max-width: 65ch;
  }
  .measure-long {
    max-width: 80ch;
  }
  .measure-short {
    max-width: 45ch;
  }
  .inline-edit--date {
    & .inline-edit__value {
      font-variant-numeric: tabular-nums;
    }
    & input.inline-edit__field {
      min-width: 0;
      flex: 0 0 auto;
    }
    & input[type='date']::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.6;
    }
    & input[type='date']::-webkit-calendar-picker-indicator:hover {
      opacity: 1;
    }
  }
  .ss-layer__name {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .docs-nav__link-label {
    flex: 1 1 auto;
    min-width: 0;
  }
  .docs-page-header__title-block {
    flex: 1 1 auto;
    min-width: 0;
  }
  .panel-item-content {
    min-width: 0;
    flex: 1;
  }
  .dashboard-grid__widget-title {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .media__title {
    font-size: var(--media-title-size);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .media__subtitle {
    font-size: var(--media-subtitle-size);
    color: var(--text-secondary);
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ss-vc__zoom {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--ss-text);
    min-width: 42px;
    text-align: center;
  }
  .\!min-w-\[20px\] {
    min-width: 20px !important;
  }
  .min-w-0 {
    min-width: 0;
  }
  .min-w-0\.5 {
    min-width: calc(var(--spacing) * 0.5);
  }
  .min-w-2 {
    min-width: calc(var(--spacing) * 2);
  }
  .min-w-6 {
    min-width: calc(var(--spacing) * 6);
  }
  .min-w-7 {
    min-width: calc(var(--spacing) * 7);
  }
  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }
  .min-w-9 {
    min-width: calc(var(--spacing) * 9);
  }
  .min-w-12 {
    min-width: calc(var(--spacing) * 12);
  }
  .min-w-16 {
    min-width: calc(var(--spacing) * 16);
  }
  .min-w-23\.5 {
    min-width: calc(var(--spacing) * 23.5);
  }
  .min-w-24 {
    min-width: calc(var(--spacing) * 24);
  }
  .min-w-30 {
    min-width: calc(var(--spacing) * 30);
  }
  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }
  .min-w-34 {
    min-width: calc(var(--spacing) * 34);
  }
  .min-w-35 {
    min-width: calc(var(--spacing) * 35);
  }
  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }
  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }
  .min-w-43 {
    min-width: calc(var(--spacing) * 43);
  }
  .min-w-44 {
    min-width: calc(var(--spacing) * 44);
  }
  .min-w-46\.5 {
    min-width: calc(var(--spacing) * 46.5);
  }
  .min-w-50 {
    min-width: calc(var(--spacing) * 50);
  }
  .min-w-52 {
    min-width: calc(var(--spacing) * 52);
  }
  .min-w-55 {
    min-width: calc(var(--spacing) * 55);
  }
  .min-w-60 {
    min-width: calc(var(--spacing) * 60);
  }
  .min-w-62\.5 {
    min-width: calc(var(--spacing) * 62.5);
  }
  .min-w-64 {
    min-width: calc(var(--spacing) * 64);
  }
  .min-w-70 {
    min-width: calc(var(--spacing) * 70);
  }
  .min-w-72 {
    min-width: calc(var(--spacing) * 72);
  }
  .min-w-79 {
    min-width: calc(var(--spacing) * 79);
  }
  .min-w-90 {
    min-width: calc(var(--spacing) * 90);
  }
  .min-w-96 {
    min-width: calc(var(--spacing) * 96);
  }
  .min-w-98 {
    min-width: calc(var(--spacing) * 98);
  }
  .min-w-100 {
    min-width: calc(var(--spacing) * 100);
  }
  .min-w-\[12rem\] {
    min-width: 12rem;
  }
  .min-w-\[13rem\] {
    min-width: 13rem;
  }
  .min-w-\[20\%\] {
    min-width: 20%;
  }
  .min-w-\[30\%\] {
    min-width: 30%;
  }
  .min-w-\[36rem\] {
    min-width: 36rem;
  }
  .min-w-\[100px\] {
    min-width: 100px;
  }
  .min-w-\[120px\] {
    min-width: 120px;
  }
  .min-w-\[133px\] {
    min-width: 133px;
  }
  .min-w-\[180px\] {
    min-width: 180px;
  }
  .min-w-\[216px\] {
    min-width: 216px;
  }
  .min-w-\[255px\] {
    min-width: 255px;
  }
  .min-w-\[280px\] {
    min-width: 280px;
  }
  .min-w-\[320px\] {
    min-width: 320px;
  }
  .min-w-\[350px\] {
    min-width: 350px;
  }
  .min-w-\[354px\] {
    min-width: 354px;
  }
  .min-w-\[420px\] {
    min-width: 420px;
  }
  .min-w-\[500px\] {
    min-width: 500px;
  }
  .docs-overview__count {
    flex: 0 0 auto;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-quaternary);
    font-variant-numeric: tabular-nums;
  }
  .inline-edit__counter {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-inline-edit-muted);
    flex: 0 0 auto;
    &.is-near-limit {
      color: var(--text-inline-edit-error);
    }
  }
  .flex-1 {
    flex: 1;
  }
  .flex-4 {
    flex: 4;
  }
  .flex-\[1_0_0\] {
    flex: 1 0 0;
  }
  .flex-none {
    flex: none;
  }
  .wizard-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding: calc(var(--spacing) * 4);
    border-color: var(--border-wizard-divider);
    .wizard.wizard--side-rail & {
      flex-shrink: 0;
    }
    .wizard--floating & {
      border: 0;
      padding: 12px 0;
    }
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .flex-grow-1 {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .grow-0 {
    flex-grow: 0;
  }
  .basis-auto {
    flex-basis: auto;
  }
  .basis-full {
    flex-basis: 100%;
  }
  .table-fixed {
    table-layout: fixed;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-\(--trigger-anchor-point\) {
    transform-origin: var(--trigger-anchor-point);
  }
  .origin-bottom {
    transform-origin: bottom;
  }
  .origin-bottom-left {
    transform-origin: 0 100%;
  }
  .origin-bottom-right {
    transform-origin: 100% 100%;
  }
  .origin-center {
    transform-origin: center;
  }
  .origin-left {
    transform-origin: 0;
  }
  .origin-right {
    transform-origin: 100%;
  }
  .origin-top {
    transform-origin: top;
  }
  .origin-top-left {
    transform-origin: 0 0;
  }
  .origin-top-right {
    transform-origin: 100% 0;
  }
  .-translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * -0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-1\/3 {
    --tw-translate-x: calc(calc(1 / 3 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-3\/4 {
    --tw-translate-x: calc(calc(3 / 4 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-12 {
    --tw-translate-x: calc(var(--spacing) * -12);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[60\%\] {
    --tw-translate-x: calc(60% * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[62\%\] {
    --tw-translate-x: calc(62% * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-1\/2 {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-1\/3 {
    --tw-translate-x: calc(1 / 3 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-5 {
    --tw-translate-x: calc(var(--spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-6 {
    --tw-translate-x: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-48 {
    --tw-translate-x: calc(var(--spacing) * 48);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[1px\] {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[30\%\] {
    --tw-translate-x: 30%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[34px\] {
    --tw-translate-x: 34px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[60\%\] {
    --tw-translate-x: 60%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/4 {
    --tw-translate-y: calc(calc(1 / 4 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-32 {
    --tw-translate-y: calc(var(--spacing) * -32);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-\[5px\] {
    --tw-translate-y: calc(5px * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-\[53px\] {
    --tw-translate-y: calc(53px * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-\[calc\(100\%-4px\)\] {
    --tw-translate-y: calc(calc(100% - 4px) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-1\/4 {
    --tw-translate-y: calc(1 / 4 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-3 {
    --tw-translate-y: calc(var(--spacing) * 3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[3px\] {
    --tw-translate-y: 3px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[10px\] {
    --tw-translate-y: 10px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[22px\] {
    --tw-translate-y: 22px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-125 {
    --tw-scale-x: 125%;
    --tw-scale-y: 125%;
    --tw-scale-z: 125%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .-scale-x-100 {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-\[0\.8\] {
    scale: 0.8;
  }
  .scale-\[0\.78\] {
    scale: 0.78;
  }
  .scale-\[0\.85\] {
    scale: 0.85;
  }
  .scale-\[1\.2\] {
    scale: 1.2;
  }
  .-rotate-45 {
    rotate: calc(45deg * -1);
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .-rotate-180 {
    rotate: calc(180deg * -1);
  }
  .rotate-0 {
    rotate: 0deg;
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[14\.8deg\] {
    rotate: 14.8deg;
  }
  .rotate-\[29\.9deg\] {
    rotate: 29.9deg;
  }
  .-skew-y-\[7deg\] {
    --tw-skew-y: skewY(calc(7deg * -1));
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .is-dragover {
    &.uploader .uploader__zone {
      box-shadow: inset 0 0 0 2px var(--uploader-ring-focus), var(--uploader-shadow);
      background-color: var(--uploader-accent-bg);
      color: var(--uploader-accent);
    }
    &.uploader .uploader__icon {
      transform: translateY(-2px) scale(1.04);
      color: var(--uploader-accent);
    }
    &.uploader .uploader__title {
      color: var(--uploader-accent);
    }
  }
  .\[transform\:var\(--transform-mobile\)\] {
    transform: var(--transform-mobile);
  }
  .is-spinning {
    &.docs-anim-stage__replay i {
      transform: rotate(360deg);
    }
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .zoom-100 {
    zoom: 100%;
  }
  .collapse--fade {
    &.collapse.show {
      animation: collapse-fade-in var(--duration-collapse, 260ms) var(--ease-collapse) both;
    }
    @media (prefers-reduced-motion: reduce) {
      &.collapse.show {
        animation: none;
      }
    }
  }
  .collapse--slide {
    &.collapse.show {
      animation: collapse-slide-in var(--duration-collapse, 260ms) var(--ease-collapse) both;
    }
    @media (prefers-reduced-motion: reduce) {
      &.collapse.show {
        animation: none;
      }
    }
  }
  .is-new {
    &.panel-item {
      animation: panel-item-flash 1.6s ease-out 1;
    }
    @media (prefers-reduced-motion: reduce) {
      &.panel-item {
        animation: none;
      }
    }
  }
  .is-uploading {
    &.uploader .uploader__icon {
      animation: uploader-pulse 1.4s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      &.uploader .uploader__icon {
        animation: none;
      }
    }
  }
  .animate-bounce {
    animation: var(--animate-bounce);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .inline-edit__tag-remove {
    background: transparent;
    border: 0;
    color: var(--text-inline-edit-muted);
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    border-radius: var(--radius-xs);
    &:hover {
      color: var(--text-inline-edit-error);
    }
    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--border-focus);
    }
  }
  .is-disabled {
    &.step {
      cursor: not-allowed;
    }
    &.step .step-indicator {
      background-color: var(--bg-step-disabled);
      border-color: var(--border-step-disabled);
      color: var(--text-step-disabled);
      box-shadow: none;
    }
    &.step .step-title {
      color: var(--text-step-disabled);
    }
    & .step .step-subtitle {
      color: var(--text-step-disabled);
    }
  }
  .is-locked {
    & .step {
      cursor: not-allowed;
    }
    & .step .step-indicator {
      background-color: var(--bg-step-disabled);
      border-color: var(--border-step-disabled);
      color: var(--text-step-disabled);
      box-shadow: none;
    }
    & .step .step-title {
      color: var(--text-step-disabled);
    }
    & .step .step-subtitle {
      color: var(--text-step-disabled);
    }
  }
  .dashboard-grid__widget--clickable {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out);
    &:hover {
      --dash-widget-ring: var(--border-focus);
      @supports (color: color-mix(in lab, red, red)) {
        --dash-widget-ring: color-mix(in oklch, var(--border-focus) 35%, var(--border-card, var(--border-primary)));
      }
      --dash-widget-shadow: var(--shadow-md);
    }
    &:focus-visible {
      outline: 2px solid var(--border-focus);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
  .is-visited {
    .wizard-rail .stepper &.step {
      cursor: pointer;
    }
    .wizard-rail .stepper &.step:hover .step-title {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
  }
  .cursor-auto {
    cursor: auto;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-grab {
    cursor: grab;
  }
  .cursor-grabbing {
    cursor: grabbing;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-progress {
    cursor: progress;
  }
  .panel-list--clickable {
    & .panel-item {
      cursor: pointer;
    }
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }
  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }
  .snap-start {
    scroll-snap-align: start;
  }
  .scroll-mt-4 {
    scroll-margin-top: calc(var(--spacing) * 4);
  }
  .scroll-mt-16 {
    scroll-margin-top: calc(var(--spacing) * 16);
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .scroll-px-4 {
    scroll-padding-inline: calc(var(--spacing) * 4);
  }
  .scroll-py-3 {
    scroll-padding-block: calc(var(--spacing) * 3);
  }
  .scroll-py-10 {
    scroll-padding-block: calc(var(--spacing) * 10);
  }
  .scroll-pb-22 {
    scroll-padding-bottom: calc(var(--spacing) * 22);
  }
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .list-none {
    list-style-type: none;
  }
  .appearance-none {
    appearance: none;
  }
  .columns-2 {
    columns: 2;
  }
  .columns-3 {
    columns: 3;
  }
  .columns-4 {
    columns: 4;
  }
  .columns-auto {
    columns: auto;
  }
  .dashboard-grid--dense {
    grid-auto-flow: dense;
  }
  .grid-flow-col {
    grid-auto-flow: column;
  }
  .grid-flow-row {
    grid-auto-flow: row;
  }
  .auto-rows-\[432px\] {
    grid-auto-rows: 432px;
  }
  .auto-rows-max {
    grid-auto-rows: max-content;
  }
  .auto-rows-min {
    grid-auto-rows: min-content;
  }
  .docs-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    @media (max-width: 720px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (max-width: 520px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .docs-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    @media (max-width: 720px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (max-width: 520px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .dashboard-grid--auto-lg {
    --dash-min: 320px;
    grid-template-columns: repeat(auto-fit, minmax(var(--dash-min), 1fr));
  }
  .dashboard-grid--auto-md {
    --dash-min: 240px;
    grid-template-columns: repeat(auto-fit, minmax(var(--dash-min), 1fr));
  }
  .dashboard-grid--auto-sm {
    --dash-min: 160px;
    grid-template-columns: repeat(auto-fit, minmax(var(--dash-min), 1fr));
  }
  .dashboard-grid--golden {
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    @media (max-width: 768px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .dashboard-grid--hero-side {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    @media (max-width: 768px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .dashboard-grid--side-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    @media (max-width: 768px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .dashboard-grid--split-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    @media (max-width: 768px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .docs-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    @media (max-width: 720px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-1\! {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .grid-cols-\[120px_1fr_1fr_1fr_1fr\] {
    grid-template-columns: 120px 1fr 1fr 1fr 1fr;
  }
  .grid-cols-\[minmax\(\.\.\.\)\] {
    grid-template-columns: minmax(...);
  }
  .grid-cols-\[minmax\(1fr\,768px\)\] {
    grid-template-columns: minmax(1fr,768px);
  }
  .grid-cols-\[minmax\(auto\,768px\)\] {
    grid-template-columns: minmax(auto,768px);
  }
  .grid-cols-\[repeat\(12\,1fr\)\] {
    grid-template-columns: repeat(12,1fr);
  }
  .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .grid-rows-\[repeat\(12\,1fr\)\] {
    grid-template-rows: repeat(12,1fr);
  }
  .docs-anim-stage__body--column {
    flex-direction: column;
    align-items: stretch;
  }
  .docs-stage--column {
    flex-direction: column;
    align-items: stretch;
  }
  .\!flex-col {
    flex-direction: column !important;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col\! {
    flex-direction: column !important;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .\!flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-content-center {
    place-content: center;
  }
  .place-items-center {
    place-items: center;
  }
  .content-start {
    align-content: flex-start;
  }
  .\!items-center {
    align-items: center !important;
  }
  .\!items-stretch {
    align-items: stretch !important;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-start\! {
    align-items: flex-start !important;
  }
  .items-stretch {
    align-items: stretch;
  }
  .media--center {
    align-items: center;
  }
  .media--end {
    align-items: flex-end;
  }
  .docs-prev-next__item--next {
    text-align: right;
    & .docs-prev-next__direction {
      justify-content: flex-end;
    }
  }
  .\!justify-between {
    justify-content: space-between !important;
  }
  .\!justify-end {
    justify-content: flex-end !important;
  }
  .docs-anim-stage__body--centered {
    justify-content: center;
  }
  .docs-stage--centered {
    justify-content: center;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-normal {
    justify-content: normal;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-items-center {
    justify-items: center;
  }
  .accordion--cards {
    background: transparent;
    gap: 8px;
    & > * + * {
      border-top: 0;
    }
    & > .accordion__item {
      border: 1px solid var(--border-accordion);
      border-radius: var(--radius-accordion-item);
      background-color: var(--bg-accordion-card);
      box-shadow: var(--shadow-accordion-card);
      transition: box-shadow 160ms ease, border-color 160ms ease;
      overflow: hidden;
    }
    & > .accordion__item[open] {
      box-shadow: var(--shadow-accordion-card-open);
      border-color: var(--border-accordion-open);
    }
    & > .accordion__item > summary {
      background-color: transparent;
    }
  }
  .collapse-group--joined {
    gap: 0;
    & > .collapse-section {
      border-radius: 0;
      border-bottom: 0;
    }
    & > .collapse-section:first-child {
      border-top-left-radius: var(--radius-lg);
      border-top-right-radius: var(--radius-lg);
    }
    & > .collapse-section:last-child {
      border-bottom-left-radius: var(--radius-lg);
      border-bottom-right-radius: var(--radius-lg);
      border-bottom: 1px solid var(--border-collapse);
    }
    & > .collapse-section + .collapse-section {
      border-top: 1px solid var(--border-collapse-divider);
    }
  }
  .\!gap-0 {
    gap: 0 !important;
  }
  .gap-0 {
    gap: 0;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-0\.75 {
    gap: calc(var(--spacing) * 0.75);
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-1\.25 {
    gap: calc(var(--spacing) * 1.25);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\! {
    gap: calc(var(--spacing) * 2) !important;
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }
  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }
  .gap-20 {
    gap: calc(var(--spacing) * 20);
  }
  .gap-24 {
    gap: calc(var(--spacing) * 24);
  }
  .\!space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0 !important;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)) !important;
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))) !important;
    }
  }
  .-space-y-\[106px\] {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(106px * -1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(106px * -1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .-space-y-\[116\.5px\] {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(116.5px * -1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(116.5px * -1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .-space-y-\[146px\] {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(146px * -1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(146px * -1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .-space-y-\[179px\] {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(179px * -1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(179px * -1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .-space-y-px {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(-1px * var(--tw-space-y-reverse));
      margin-block-end: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-0 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: 0;
      margin-block-end: 0;
    }
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-12 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-16 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-px {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(1px * var(--tw-space-y-reverse));
      margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-1 {
    column-gap: var(--spacing);
  }
  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-16 {
    column-gap: calc(var(--spacing) * 16);
  }
  .-space-x-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -0.5) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -0.5) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-1 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -1.5) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -1.5) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .-space-x-px {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
      margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-1 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
      margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * 0.5);
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-2\.5 {
    row-gap: calc(var(--spacing) * 2.5);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .gap-y-5 {
    row-gap: calc(var(--spacing) * 5);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  .gap-y-11 {
    row-gap: calc(var(--spacing) * 11);
  }
  .gap-y-12 {
    row-gap: calc(var(--spacing) * 12);
  }
  .gap-y-16 {
    row-gap: calc(var(--spacing) * 16);
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .self-stretch {
    align-self: stretch;
  }
  .justify-self-center {
    justify-self: center;
  }
  .docs-example {
    border: 1px solid var(--border-table-container, var(--border-divider));
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    &:has(.dropdown, .dropdown-menu, .combobox, .combobox__panel) {
      overflow: visible;
    }
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & {
      background-color: var(--bg-primary);
    }
  }
  .accordion--bordered {
    border: 1px solid var(--border-accordion);
    border-radius: var(--radius-accordion);
    overflow: hidden;
    & > * + * {
      border-top: 1px solid var(--border-accordion);
    }
    & .accordion__item[open] {
      background-color: var(--bg-accordion-trigger-open);
    }
  }
  .docs-anim-stage {
    border: 1px solid var(--border-table-container, var(--border-divider));
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & {
      background-color: var(--bg-primary);
    }
  }
  .collapse-section--cards {
    border: 1px solid var(--border-collapse);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-accordion-card);
    overflow: hidden;
  }
  .collapse-section--bordered {
    border: 1px solid var(--border-collapse);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .step-indicator--avatar {
    border-width: 2px;
    overflow: hidden;
    background: var(--bg-step-indicator);
  }
  .step-bar__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-step-subtitle);
    .step-bar__section.is-completed & {
      color: var(--text-step-title);
    }
    .step-bar__section.is-current & {
      color: var(--text-step-title-current);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    .stepper-bar--label-sm & {
      font-size: 0.6875rem;
      line-height: var(--tw-leading, 1rem);
      letter-spacing: var(--tw-tracking, 0.01em);
    }
    .stepper-bar--label-md & {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
    .stepper-bar--label-lg & {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
  }
  .uploader__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .accordion__description {
    font-size: calc(var(--accordion-fs, 13px) - 1.5px);
    font-weight: 400;
    color: var(--text-accordion-description);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .media__subtitle--wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .media__title--wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .text-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .combobox {
    .docs-example:has(.dropdown, .dropdown-menu, &, .combobox__panel) {
      overflow: visible;
    }
    .docs-stage:has(.dropdown, .dropdown-menu, &, .combobox__panel) {
      overflow: visible;
    }
  }
  .combobox__panel {
    .docs-example:has(.dropdown, .dropdown-menu, .combobox, &) {
      overflow: visible;
    }
    .docs-stage:has(.dropdown, .dropdown-menu, .combobox, &) {
      overflow: visible;
    }
  }
  .dropdown {
    .docs-example:has(&, .dropdown-menu, .combobox, .combobox__panel) {
      overflow: visible;
    }
    .docs-stage:has(&, .dropdown-menu, .combobox, .combobox__panel) {
      overflow: visible;
    }
  }
  .dropdown-menu {
    .docs-example:has(.dropdown, &, .combobox, .combobox__panel) {
      overflow: visible;
    }
    .docs-stage:has(.dropdown, &, .combobox, .combobox__panel) {
      overflow: visible;
    }
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-clip {
    overflow: clip;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-scroll {
    overflow: scroll;
  }
  .overflow-visible {
    overflow: visible;
  }
  .docs-main {
    grid-area: main;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--bg-primary);
    scroll-behavior: smooth;
  }
  .docs-code {
    border-top: 1px solid var(--border-divider);
    background-color: var(--bg-secondary);
    padding: 12px 14px;
    overflow-x: auto;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-primary);
    white-space: pre;
    line-height: 1.5;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-clip {
    overflow-y: clip;
  }
  .overflow-y-hidden {
    overflow-y: hidden;
  }
  .overscroll-auto {
    overscroll-behavior: auto;
  }
  .overscroll-none {
    overscroll-behavior: none;
  }
  .is-swiping {
    &.carousel__track {
      scroll-behavior: auto;
    }
  }
  .code-inline {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    color: var(--text-primary);
    padding: 1px 5px;
    background-color: var(--bg-secondary);
    border-radius: 4px;
  }
  .accordion--ghost {
    background-color: transparent;
    & > * + * {
      border-top: 0;
    }
    & .accordion__item[open] {
      background-color: transparent;
    }
    & .accordion__item[open] > summary {
      background-color: var(--bg-accordion-trigger-open);
      border-radius: var(--radius-accordion-item);
    }
  }
  .is-ghost {
    &.panel-item {
      border: 2px dashed var(--border-info);
      background-color: var(--bg-info-subtle);
      border-radius: 6px;
    }
  }
  .panel-list--flush {
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }
  .docs-nav__badge {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .ss-units-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ss-text);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ss-text) 6%, transparent);
    }
  }
  .wizard--floating {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    & .wizard-header {
      border: 0;
      padding: 12px 0;
    }
    & .wizard-footer {
      border: 0;
      padding: 12px 0;
    }
    & .wizard-body {
      padding: 0;
    }
  }
  .ss-layer {
    padding: 2px 6px;
    border-radius: 6px;
    &.is-active {
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 8%, transparent);
      }
    }
  }
  .carousel--full {
    --carousel-max-width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .\!rounded-full {
    border-radius: var(--radius-full) !important;
  }
  .\!rounded-lg {
    border-radius: var(--radius-lg) !important;
  }
  .\!rounded-md {
    border-radius: var(--radius-md) !important;
  }
  .\!rounded-none {
    border-radius: var(--radius-none) !important;
  }
  .media__figure--circle {
    border-radius: var(--radius-full);
  }
  .media__figure--square {
    border-radius: var(--radius-sm);
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
  }
  .rounded-\[2px\] {
    border-radius: 2px;
  }
  .rounded-\[2rem\] {
    border-radius: 2rem;
  }
  .rounded-\[3px\] {
    border-radius: 3px;
  }
  .rounded-\[4px\] {
    border-radius: 4px;
  }
  .rounded-\[5px\] {
    border-radius: 5px;
  }
  .rounded-\[6\.77px\] {
    border-radius: 6.77px;
  }
  .rounded-\[7\.9px\] {
    border-radius: 7.9px;
  }
  .rounded-\[7px\] {
    border-radius: 7px;
  }
  .rounded-\[8px\] {
    border-radius: 8px;
  }
  .rounded-\[9\.03px\] {
    border-radius: 9.03px;
  }
  .rounded-\[9px\] {
    border-radius: 9px;
  }
  .rounded-\[10px\] {
    border-radius: 10px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[14px\] {
    border-radius: 14px;
  }
  .rounded-\[17\.92px\] {
    border-radius: 17.92px;
  }
  .rounded-\[20\.91px\] {
    border-radius: 20.91px;
  }
  .rounded-\[20px\] {
    border-radius: 20px;
  }
  .rounded-\[23\.89px\] {
    border-radius: 23.89px;
  }
  .rounded-\[inherit\] {
    border-radius: inherit;
  }
  .rounded-full {
    border-radius: var(--radius-full);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: var(--radius-none);
  }
  .rounded-none\! {
    border-radius: var(--radius-none) !important;
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-xs {
    border-radius: var(--radius-xs);
  }
  .accent-edge-l {
    border-start-start-radius: var(--radius-colored-edge);
    border-end-start-radius: var(--radius-colored-edge);
  }
  .rounded-t {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }
  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-t-\[20px\] {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .rounded-t-\[320px\] {
    border-top-left-radius: 320px;
    border-top-right-radius: 320px;
  }
  .rounded-t-full {
    border-top-left-radius: var(--radius-full);
    border-top-right-radius: var(--radius-full);
  }
  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
  .rounded-t-none {
    border-top-left-radius: var(--radius-none);
    border-top-right-radius: var(--radius-none);
  }
  .rounded-t-xl {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
  }
  .rounded-l-\[80px\] {
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
  }
  .rounded-l-full {
    border-top-left-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
  }
  .rounded-l-lg {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-l-none {
    border-top-left-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
  }
  .rounded-l-xl {
    border-top-left-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }
  .\!rounded-tl-md {
    border-top-left-radius: var(--radius-md) !important;
  }
  .rounded-tl {
    border-top-left-radius: 0.25rem;
  }
  .rounded-tl-\[64px\] {
    border-top-left-radius: 64px;
  }
  .rounded-tl-full {
    border-top-left-radius: var(--radius-full);
  }
  .rounded-tl-none {
    border-top-left-radius: var(--radius-none);
  }
  .rounded-r-\[inherit\] {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
  }
  .rounded-r-full {
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
  }
  .rounded-r-lg {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .rounded-r-none {
    border-top-right-radius: var(--radius-none);
    border-bottom-right-radius: var(--radius-none);
  }
  .rounded-r-xl {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }
  .\!rounded-tr-md {
    border-top-right-radius: var(--radius-md) !important;
  }
  .rounded-tr-\[32px\] {
    border-top-right-radius: 32px;
  }
  .rounded-tr-full {
    border-top-right-radius: var(--radius-full);
  }
  .rounded-tr-lg {
    border-top-right-radius: var(--radius-lg);
  }
  .rounded-tr-none {
    border-top-right-radius: var(--radius-none);
  }
  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }
  .rounded-b-\[20px\] {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .rounded-b-\[24px\] {
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
  }
  .rounded-b-full {
    border-bottom-right-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
  }
  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-b-md {
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .rounded-b-none {
    border-bottom-right-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
  }
  .rounded-b-xl {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }
  .\!rounded-br-md {
    border-bottom-right-radius: var(--radius-md) !important;
  }
  .rounded-br-full {
    border-bottom-right-radius: var(--radius-full);
  }
  .\!rounded-bl-md {
    border-bottom-left-radius: var(--radius-md) !important;
  }
  .rounded-bl-\[1px\] {
    border-bottom-left-radius: 1px;
  }
  .rounded-bl-\[5px\] {
    border-bottom-left-radius: 5px;
  }
  .rounded-bl-\[6px\] {
    border-bottom-left-radius: 6px;
  }
  .rounded-bl-\[32px\] {
    border-bottom-left-radius: 32px;
  }
  .rounded-bl-full {
    border-bottom-left-radius: var(--radius-full);
  }
  .rounded-bl-lg {
    border-bottom-left-radius: var(--radius-lg);
  }
  .\!border-0 {
    border-style: var(--tw-border-style) !important;
    border-width: 0px !important;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-200 {
    border-style: var(--tw-border-style);
    border-width: 200px;
  }
  .border-\[0\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 0.5px;
  }
  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-x {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
  }
  .border-x-0 {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 0px;
  }
  .border-x-2 {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 2px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-t-4 {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  .border-r-\[1\.5px\] {
    border-right-style: var(--tw-border-style);
    border-right-width: 1.5px;
  }
  .\!border-b {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 1px !important;
  }
  .\!border-b-0 {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 0px !important;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-b-4 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }
  .is-skipped {
    &.step .step-indicator {
      background-color: var(--bg-step-skipped);
      border-color: var(--border-step-skipped);
      color: var(--text-step-skipped);
    }
    &.step .step-title {
      color: var(--text-step-skipped);
      text-decoration: line-through;
      text-decoration-color: var(--border-step-skipped);
      text-decoration-thickness: 1px;
    }
    & .step .step-subtitle {
      color: var(--text-step-skipped);
      text-decoration: line-through;
      text-decoration-color: var(--border-step-skipped);
      text-decoration-thickness: 1px;
    }
  }
  .is-error {
    &.step .step-indicator {
      background-color: var(--bg-step-error);
      border-color: var(--border-step-error);
      color: var(--text-step-error);
    }
    &.step .step-title {
      color: var(--text-step-title-error);
    }
    .stepper-chevron &.step {
      background-color: var(--bg-step-chevron-error);
      color: var(--text-step-chevron-error);
    }
  }
  .carousel--panel {
    background-color: var(--bg-popover, var(--alpha-white-100));
    color: var(--text-carousel-on-light);
    border-color: var(--border-carousel);
    & .carousel__slide {
      background-color: var(--bg-carousel-skeleton);
    }
  }
  .is-warning {
    &.step .step-indicator {
      background-color: var(--bg-step-warning);
      border-color: var(--border-step-warning);
      color: var(--text-step-warning);
    }
    &.step .step-title {
      color: var(--text-step-title-warning);
    }
  }
  .is-success {
    &.step .step-indicator {
      background-color: var(--bg-step-success);
      border-color: var(--border-step-success);
      color: var(--text-step-success);
    }
  }
  .list-borderless {
    &.panel-list {
      border-color: var(--alpha-0);
      background-color: transparent;
    }
    &.panel-list .panel-item {
      border-color: var(--alpha-0);
    }
  }
  .panel-list--quiet {
    border-color: var(--alpha-0);
    background-color: transparent;
    & .panel-item {
      border-color: var(--alpha-0);
    }
  }
  .is-over {
    &.ss-upload-zone {
      border-color: var(--ss-accent);
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 6%, transparent);
      }
      color: var(--ss-text);
    }
  }
  .\!border-transparent {
    border-color: transparent !important;
  }
  .border-\[rgb\(\.\.\.\)\] {
    border-color: rgb(...);
  }
  .border-black\/10 {
    border-color: color-mix(in oklab, #000 10%, transparent);
  }
  .border-gray-100 {
    border-color: #f1f3f5;
  }
  .border-gray-200 {
    border-color: #dee1e6;
  }
  .border-gray-400 {
    border-color: #9196a4;
  }
  .border-gray-900 {
    border-color: #23242c;
  }
  .border-success {
    border-color: var(--border-success);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-violet-700 {
    border-color: #482dad;
  }
  .border-white {
    border-color: #fff;
  }
  .border-white\/10 {
    border-color: color-mix(in oklab, #fff 10%, transparent);
  }
  .border-white\/30 {
    border-color: color-mix(in oklab, #fff 30%, transparent);
  }
  .border-white\/50 {
    border-color: color-mix(in oklab, #fff 50%, transparent);
  }
  .is-active {
    &.ss-mode {
      background: var(--ss-surface);
      color: var(--ss-text);
      box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--ss-border);
    }
    &.ss-left-tab {
      color: var(--ss-accent);
      border-bottom-color: var(--ss-accent);
      background: var(--ss-surface);
    }
    &.ss-tool {
      color: var(--ss-accent);
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 14%, transparent);
      }
    }
    &.ss-tool .ss-tool__kbd {
      color: var(--ss-accent);
    }
    &.ss-asset-tab {
      color: var(--ss-text);
      border-bottom-color: var(--ss-accent);
    }
    &.ss-layer {
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 8%, transparent);
      }
    }
    &.ss-vc__btn {
      color: var(--ss-accent);
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 14%, transparent);
      }
    }
    .ss-quick-axis &button {
      background: var(--ss-surface);
      color: var(--ss-text);
      box-shadow: var(--shadow-xs);
    }
    &.ss-tl__btn {
      color: var(--ss-accent);
    }
    &.ss-step {
      color: var(--ss-text);
      border-bottom-color: var(--ss-accent);
    }
    &.ss-step .ss-step__num {
      background: var(--ss-accent);
      color: var(--ss-on-accent);
    }
  }
  .docs-rule--do {
    & .docs-rule__label {
      color: var(--text-success);
      background: linear-gradient( 90deg, var(--bg-success-subtle) 0%, var(--bg-success-subtle) 40%, transparent 100% ), #ffffff;
      border-bottom-color: var(--border-success-subtle, var(--bg-success-subtle));
    }
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & .docs-rule__label {
      background: linear-gradient( 90deg, var(--bg-success-subtle) 0%, var(--bg-success-subtle) 40%, transparent 100% ), var(--bg-primary);
    }
  }
  .docs-rule--dont {
    & .docs-rule__label {
      color: var(--text-danger);
      background: linear-gradient( 90deg, var(--bg-danger-subtle) 0%, var(--bg-danger-subtle) 40%, transparent 100% ), #ffffff;
      border-bottom-color: var(--border-danger-subtle, var(--bg-danger-subtle));
    }
    :is([data-theme='theme-dark'], [data-theme='theme-mica-dark']) & .docs-rule__label {
      background: linear-gradient( 90deg, var(--bg-danger-subtle) 0%, var(--bg-danger-subtle) 40%, transparent 100% ), var(--bg-primary);
    }
  }
  .carousel--product {
    background-color: var(--bg-popover, var(--alpha-white-100));
    color: var(--text-carousel-on-light);
    & .carousel__slide {
      background-color: transparent;
    }
    & .carousel__media {
      object-fit: contain;
    }
    & .carousel__slide img {
      object-fit: contain;
    }
    & .carousel__slide video {
      object-fit: contain;
    }
  }
  .carousel__footer {
    .carousel--card & {
      padding: 10px 14px;
      border-top: 1px solid var(--border-carousel);
      background-color: var(--bg-popover);
      color: var(--text-carousel-on-light);
      font-size: 12.5px;
    }
    padding: 10px 14px;
    border-top: 1px solid var(--border-carousel);
    color: var(--text-carousel-on-light-muted);
    font-size: 12px;
  }
  .carousel--card {
    background-color: var(--bg-popover, var(--alpha-white-100));
    color: var(--text-carousel-on-light);
    & .carousel__footer {
      padding: 10px 14px;
      border-top: 1px solid var(--border-carousel);
      background-color: var(--bg-popover);
      color: var(--text-carousel-on-light);
      font-size: 12.5px;
    }
  }
  .dashboard-grid__widget--ghost {
    --dash-widget-fill: var(--alpha-0);
    --dash-widget-ring: transparent;
    --dash-widget-shadow: none;
    padding: var(--dash-pad);
    color: var(--text-tertiary);
    background-color: var(--dash-widget-fill);
    border: 1px dashed var(--border-primary);
  }
  .dashboard-grid__widget--glass {
    --dash-widget-fill: var(--bg-glass-card, var(--alpha-white-20));
    --dash-widget-ring: var(--border-glass-card, var(--alpha-white-20));
    --dash-widget-shadow: var(--shadow-glass-card, var(--shadow-md));
    padding: var(--dash-pad);
    background-color: var(--dash-widget-fill);
    backdrop-filter: var(--blur-glass-card-sm, blur(10px)) saturate(140%);
    -webkit-backdrop-filter: var(--blur-glass-card-sm, blur(10px)) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .dashboard-grid__widget--elevated {
    --dash-widget-fill: var(--bg-card, var(--alpha-white-100));
    --dash-widget-ring: var(--border-card, var(--border-primary));
    --dash-widget-shadow: var(--shadow-md);
    padding: var(--dash-pad);
    background-color: var(--dash-widget-fill);
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .dashboard-grid__widget--surface {
    --dash-widget-fill: var(--bg-card, var(--alpha-white-100));
    --dash-widget-ring: var(--border-card, var(--border-primary));
    --dash-widget-shadow: var(--shadow-xs);
    padding: var(--dash-pad);
    background-color: var(--dash-widget-fill);
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .dashboard-grid__widget--tinted {
    --dash-widget-fill: var(--bg-secondary);
    --dash-widget-ring: transparent;
    --dash-widget-shadow: none;
    padding: var(--dash-pad);
    background-color: var(--dash-widget-fill);
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .inline-edit--button {
    & .inline-edit__display {
      box-shadow: inset 0 0 0 1px var(--border-input), var(--shadow-xs);
      background-color: var(--bg-input);
      padding: 5px 10px;
    }
    &:hover:not(.is-editing) {
      background-color: transparent;
    }
    & .inline-edit__display:hover {
      box-shadow: inset 0 0 0 1px var(--border-input-hover), var(--shadow-xs);
      background-color: var(--bg-inline-edit-hover);
    }
  }
  .inline-edit--quiet {
    &:hover:not(.is-editing) {
      background-color: transparent;
    }
    & .inline-edit__display {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .inline-edit--link {
    & .inline-edit__display {
      color: var(--text-inline-link-edit);
      text-decoration: underline dotted;
      text-underline-offset: 3px;
    }
    & .inline-edit__display:hover {
      color: var(--text-inline-link-edit-hover);
    }
    &:hover:not(.is-editing) {
      background-color: transparent;
    }
  }
  .is-error {
    &.uploader {
      --uploader-accent: var(--text-danger);
      --uploader-accent-bg: var(--bg-danger-subtle);
      --uploader-ring: var(--text-danger);
      @supports (color: color-mix(in lab, red, red)) {
        --uploader-ring: color-mix(in oklch, var(--text-danger) 45%, var(--border-secondary));
      }
    }
    &.uploader__item {
      box-shadow: inset 0 0 0 2px var(--text-danger);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--text-danger) 55%, var(--border-secondary));
      }
      background-color: var(--text-danger);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklch, var(--text-danger) 4%, var(--bg-primary));
      }
    }
    &.uploader__item .uploader__thumb {
      color: var(--text-danger);
      background-color: var(--bg-danger-subtle);
    }
    &.uploader__item .uploader__detail {
      color: var(--text-danger);
    }
    &.uploader__item .uploader__progress > span {
      background-color: var(--text-danger);
    }
  }
  .is-success {
    &.inline-edit .inline-edit__msg {
      color: var(--text-inline-edit-success);
    }
    &.inline-edit {
      background-color: var(--bg-inline-edit-success-flash);
      box-shadow: var(--shadow-inline-edit-success);
      transition: background-color 320ms ease, box-shadow 320ms ease;
    }
    &.inline-edit .inline-edit__display {
      color: var(--text-inline-edit-success);
    }
  }
  .is-dirty {
    &.inline-edit .inline-edit__field, &.inline-edit .inline-edit__input {
      box-shadow: inset 0 0 0 1px var(--utility-amber-500), var(--shadow-xs);
    }
    &.inline-edit .inline-edit__field:focus, &.inline-edit .inline-edit__input:focus {
      box-shadow: inset 0 0 0 2px var(--border-focus), var(--shadow-xs);
    }
    &.inline-edit .inline-edit__btn--save {
      color: var(--utility-amber-600);
      background-color: var(--bg-inline-edit-success-flash);
    }
  }
  .is-error {
    &.inline-edit .inline-edit__msg {
      color: var(--text-inline-edit-error);
    }
    &.inline-edit .inline-edit__field, &.inline-edit .inline-edit__input {
      box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-xs);
      background-color: var(--bg-inline-edit-error);
    }
    &.inline-edit .inline-edit__field:focus, &.inline-edit .inline-edit__input:focus {
      box-shadow: inset 0 0 0 2px var(--border-input-error-focus), var(--shadow-xs);
    }
  }
  .docs-anim-sample--ghost {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
  }
  .docs-example__stage--dark {
    background-color: oklch(18% 0.01 250);
    color: oklch(95% 0 0);
  }
  .docs-nav__badge--experimental {
    background-color: var(--bg-purple-subtle, var(--bg-secondary));
    color: var(--text-purple, var(--text-secondary));
  }
  .inline-edit__btn--cancel {
    &:hover {
      background-color: var(--bg-inline-edit-error);
      color: var(--text-inline-edit-error);
    }
  }
  .inline-edit__btn--save {
    &:hover {
      background-color: var(--bg-inline-edit-success-flash);
      color: var(--text-inline-edit-success);
    }
  }
  .media__figure--danger {
    background-color: var(--bg-danger-subtle);
    color: var(--text-danger);
  }
  .media__figure--success {
    background-color: var(--bg-success-subtle);
    color: var(--text-success);
  }
  .media__figure--tinted {
    background-color: var(--bg-info-subtle);
    color: var(--text-info);
  }
  .media__figure--warning {
    background-color: var(--bg-warning-subtle);
    color: var(--text-warning);
  }
  .uploader__btn--danger {
    &:hover {
      background-color: var(--bg-danger-subtle);
      color: var(--text-danger);
    }
  }
  .panel-list--ladder {
    background-color: transparent;
    border: 0;
    & .panel-item {
      background-color: transparent;
      border-bottom: 1px solid var(--border-list-divider);
    }
    & .panel-item:last-child {
      border-bottom: 0;
    }
    & .panel-item:hover {
      background-color: transparent;
      box-shadow: inset 3px 0 0 var(--border-list-divider);
    }
  }
  .inline-edit--error {
    &.inline-edit .inline-edit__field, &.inline-edit .inline-edit__input {
      box-shadow: inset 0 0 0 1px var(--border-input-error), var(--shadow-xs);
      background-color: var(--bg-inline-edit-error);
    }
    &.inline-edit .inline-edit__field:focus, &.inline-edit .inline-edit__input:focus {
      box-shadow: inset 0 0 0 2px var(--border-input-error-focus), var(--shadow-xs);
    }
  }
  .collapse-section--flush {
    background-color: transparent;
    & > .collapse-trigger {
      background-color: transparent;
    }
    & > .collapse-section__header {
      background-color: transparent;
    }
  }
  .panel-list--virtual {
    background-color: transparent;
    border: 0;
    & .panel-item {
      border-bottom: 0;
    }
  }
  .accordion--filled {
    & .accordion__item[open] > .accordion__panel > .accordion__body {
      background-color: var(--bg-accordion-body-filled);
    }
    & .accordion__item[open] > *:not(summary):not(.accordion__panel) {
      background-color: var(--bg-accordion-body-filled);
    }
  }
  .accordion--flush {
    & > .accordion__item {
      background-color: transparent;
    }
    & > * + * {
      border-top: 1px solid var(--border-accordion-divider);
    }
  }
  .media__figure--ghost {
    background-color: transparent;
    border: 1px dashed var(--border-divider);
  }
  .uploader--quiet {
    & .uploader__zone {
      background-color: transparent;
    }
    & .uploader__zone:hover {
      background-color: var(--uploader-bg-hover);
    }
  }
  .\!bg-gray-50 {
    background-color: #f9fafb !important;
  }
  .\!bg-green-500 {
    background-color: #3fbf57 !important;
  }
  .\!bg-transparent {
    background-color: transparent !important;
  }
  .bg-\[\#1877F2\] {
    background-color: #1877F2;
  }
  .bg-\[\#EA4C89\] {
    background-color: #EA4C89;
  }
  .bg-\[\#F4D9D0\] {
    background-color: #F4D9D0;
  }
  .bg-\[color\:var\(--bg-primary\)\] {
    background-color: var(--bg-primary);
  }
  .bg-\[color\:var\(--bg-secondary\)\] {
    background-color: var(--bg-secondary);
  }
  .bg-amber-500 {
    background-color: #f5a300;
  }
  .bg-amber-500\/10 {
    background-color: color-mix(in oklab, #f5a300 10%, transparent);
  }
  .bg-black {
    background-color: #000;
  }
  .bg-black\/10 {
    background-color: color-mix(in oklab, #000 10%, transparent);
  }
  .bg-black\/40 {
    background-color: color-mix(in oklab, #000 40%, transparent);
  }
  .bg-blue-500 {
    background-color: #2f6fe4;
  }
  .bg-blue-500\/10 {
    background-color: color-mix(in oklab, #2f6fe4 10%, transparent);
  }
  .bg-brand-50 {
    background-color: var(--color-brand-50);
  }
  .bg-brand-100 {
    background-color: var(--color-brand-100);
  }
  .bg-brand-600 {
    background-color: var(--color-brand-600);
  }
  .bg-brand-700 {
    background-color: var(--color-brand-700);
  }
  .bg-current {
    background-color: currentcolor;
  }
  .bg-cyan-500\/10 {
    background-color: color-mix(in oklab, #2fa9c6 10%, transparent);
  }
  .bg-danger {
    background-color: var(--bg-danger) !important;
  }
  .bg-emerald-500 {
    background-color: #28b37e;
  }
  .bg-emerald-500\/10 {
    background-color: color-mix(in oklab, #28b37e 10%, transparent);
  }
  .bg-gray {
    background-color: #5c5f6b;
  }
  .bg-gray-50 {
    background-color: #f9fafb;
  }
  .bg-gray-100 {
    background-color: #f1f3f5;
  }
  .bg-gray-200 {
    background-color: #dee1e6;
  }
  .bg-gray-200\/80 {
    background-color: color-mix(in oklab, #dee1e6 80%, transparent);
  }
  .bg-gray-500 {
    background-color: #5c5f6b;
  }
  .bg-gray-700 {
    background-color: #3e404a;
  }
  .bg-gray-800 {
    background-color: #2f3038;
  }
  .bg-gray-900 {
    background-color: #23242c;
  }
  .bg-green-500 {
    background-color: #3fbf57;
  }
  .bg-green-500\/10 {
    background-color: color-mix(in oklab, #3fbf57 10%, transparent);
  }
  .bg-indigo-100 {
    background-color: #e0e4fd;
  }
  .bg-indigo-500 {
    background-color: #4656e9;
  }
  .bg-indigo-500\/10 {
    background-color: color-mix(in oklab, #4656e9 10%, transparent);
  }
  .bg-info {
    background-color: var(--bg-info) !important;
  }
  .bg-neutral-100 {
    background-color: #f6f6f6;
  }
  .bg-neutral-800 {
    background-color: #2b2b2b;
  }
  .bg-neutral-900 {
    background-color: #212121;
  }
  .bg-orange-400 {
    background-color: #e78a32;
  }
  .bg-orange-500 {
    background-color: #ec6a2a;
  }
  .bg-pink-500 {
    background-color: #e94284;
  }
  .bg-purple-500 {
    background-color: #8337e2;
  }
  .bg-purple-500\/10 {
    background-color: color-mix(in oklab, #8337e2 10%, transparent);
  }
  .bg-red-500 {
    background-color: #ec4c3c;
  }
  .bg-red-500\/10 {
    background-color: color-mix(in oklab, #ec4c3c 10%, transparent);
  }
  .bg-sky-500 {
    background-color: #3fa6dd;
  }
  .bg-slate-500 {
    background-color: #5b647c;
  }
  .bg-slate-500\/10 {
    background-color: color-mix(in oklab, #5b647c 10%, transparent);
  }
  .bg-success {
    background-color: var(--bg-success) !important;
  }
  .bg-teal-500 {
    background-color: #299e9b;
  }
  .bg-teal-500\/10 {
    background-color: color-mix(in oklab, #299e9b 10%, transparent);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-warning {
    background-color: var(--bg-warning) !important;
  }
  .bg-white {
    background-color: #fff;
  }
  .bg-white\/10 {
    background-color: color-mix(in oklab, #fff 10%, transparent);
  }
  .bg-white\/20 {
    background-color: color-mix(in oklab, #fff 20%, transparent);
  }
  .bg-white\/70 {
    background-color: color-mix(in oklab, #fff 70%, transparent);
  }
  .bg-yellow-500 {
    background-color: #f4c200;
  }
  .bg-yellow-500\/10 {
    background-color: color-mix(in oklab, #f4c200 10%, transparent);
  }
  .bg-zinc-400 {
    background-color: #949499;
  }
  .carousel__slide-badge--danger {
    background-color: var(--utility-red-600);
  }
  .carousel__slide-badge--info {
    background-color: var(--utility-blue-600);
  }
  .carousel__slide-badge--success {
    background-color: var(--utility-green-600);
  }
  .carousel__slide-badge--warning {
    background-color: var(--utility-amber-600);
  }
  .is-multi-selected {
    &.panel-item {
      background-color: var(--bg-list-item-selected, var(--color-brand-50));
    }
  }
  .selected {
    &.panel-item {
      background-color: var(--bg-list-item-selected, var(--color-brand-50));
    }
  }
  .bg-linear-to-b {
    --tw-gradient-position: to bottom;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-bl {
    --tw-gradient-position: to bottom left;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom left in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-br {
    --tw-gradient-position: to bottom right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to bottom right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-r {
    --tw-gradient-position: to right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-t {
    --tw-gradient-position: to top;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to top in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-to-tr {
    --tw-gradient-position: to top right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to top right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-linear-\(--gradient-light\) {
    --tw-gradient-position: var(--gradient-light);
    background-image: linear-gradient(var(--tw-gradient-stops,var(--gradient-light)));
  }
  .inline-edit--select {
    & select.inline-edit__field {
      padding-right: 26px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 12px;
    }
  }
  .stepper--dotted {
    & .step-connector {
      background: transparent;
      background-image: repeating-linear-gradient( 90deg, var(--bg-step-connector), var(--bg-step-connector) 3px, transparent 3px, transparent 7px );
    }
    &.stepper-vertical .step-connector {
      background-image: repeating-linear-gradient( 0, var(--bg-step-connector), var(--bg-step-connector) 3px, transparent 3px, transparent 7px );
    }
  }
  .bg-\[url\(\/shared-assets\/spirals-blue\.webp\)\] {
    background-image: url(/shared-assets/spirals-blue.webp);
  }
  .from-\[\#A5C0EE\] {
    --tw-gradient-from: #A5C0EE;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#A6C0FE\] {
    --tw-gradient-from: #A6C0FE;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#E0C3FC\] {
    --tw-gradient-from: #E0C3FC;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#FBC2EB\] {
    --tw-gradient-from: #FBC2EB;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#FBC5EC\] {
    --tw-gradient-from: #FBC5EC;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#FFEAF6\] {
    --tw-gradient-from: #FFEAF6;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[rgba\(0\,0\,0\,0\.02\)\] {
    --tw-gradient-from: rgba(0,0,0,0.02);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-amber-400 {
    --tw-gradient-from: #f9b61a;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/10 {
    --tw-gradient-from: color-mix(in oklab, #000 10%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/20 {
    --tw-gradient-from: color-mix(in oklab, #000 20%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/40 {
    --tw-gradient-from: color-mix(in oklab, #000 40%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-brand-800 {
    --tw-gradient-from: var(--color-brand-800);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-brand-900 {
    --tw-gradient-from: var(--color-brand-900);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-600 {
    --tw-gradient-from: #4a4d58;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-200\/40 {
    --tw-gradient-from: color-mix(in oklab, #b0bdfc 40%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-400 {
    --tw-gradient-from: #7c8ffc;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-neutral-50 {
    --tw-gradient-from: #fafafa;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-neutral-800 {
    --tw-gradient-from: #2b2b2b;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-neutral-900 {
    --tw-gradient-from: #212121;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-pink-400 {
    --tw-gradient-from: #ee519d;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-sky-400 {
    --tw-gradient-from: #47b0ed;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-teal-400 {
    --tw-gradient-from: #34c3ca;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-white\/30 {
    --tw-gradient-from: color-mix(in oklab, #fff 30%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-20\% {
    --tw-gradient-from-position: 20%;
  }
  .from-50\% {
    --tw-gradient-from-position: 50%;
  }
  .via-black {
    --tw-gradient-via: #000;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-teal-200\/30 {
    --tw-gradient-via: color-mix(in oklab, #a2f0f0 30%, transparent);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .via-50\% {
    --tw-gradient-via-position: 50%;
  }
  .to-\[\#8EC5FC\] {
    --tw-gradient-to: #8EC5FC;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-\[\#A5C0EE\] {
    --tw-gradient-to: #A5C0EE;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-\[\#A6C0FE\] {
    --tw-gradient-to: #A6C0FE;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-\[\#A18CD1\] {
    --tw-gradient-to: #A18CD1;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-\[\#FBC5EC\] {
    --tw-gradient-to: #FBC5EC;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-\[\#FFEAF6\] {
    --tw-gradient-to: #FFEAF6;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-\[rgba\(0\,0\,0\,0\.17\)\] {
    --tw-gradient-to: rgba(0,0,0,0.17);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-amber-600 {
    --tw-gradient-to: #d48700;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-black {
    --tw-gradient-to: #000;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-black\/0 {
    --tw-gradient-to: color-mix(in oklab, #000 0%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-black\/40 {
    --tw-gradient-to: color-mix(in oklab, #000 40%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-brand-700 {
    --tw-gradient-to: var(--color-brand-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-700 {
    --tw-gradient-to: #3e404a;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-500 {
    --tw-gradient-to: #4656e9;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-600 {
    --tw-gradient-to: #3543c7;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-neutral-200 {
    --tw-gradient-to: #e9e9e9;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-neutral-700 {
    --tw-gradient-to: #3b3b3b;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-neutral-900 {
    --tw-gradient-to: #212121;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-pink-200\/30 {
    --tw-gradient-to: color-mix(in oklab, #f9bdda 30%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-pink-500 {
    --tw-gradient-to: #e94284;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-pink-600 {
    --tw-gradient-to: #c8376e;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-sky-600 {
    --tw-gradient-to: #3185b7;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-teal-600 {
    --tw-gradient-to: #217e7d;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-40\% {
    --tw-gradient-to-position: 40%;
  }
  .to-90\% {
    --tw-gradient-to-position: 90%;
  }
  .mask-x-from-80\% {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
    --tw-mask-right-from-position: 80%;
    --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
    --tw-mask-left-from-position: 80%;
  }
  .mask-b-from-94\% {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
    --tw-mask-bottom-from-position: 94%;
  }
  .mask-b-from-\[calc\(100\%-340px\)\] {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
    --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
    --tw-mask-bottom-from-position: calc(100% - 340px);
  }
  .mask-linear-135 {
    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
    mask-composite: intersect;
    --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
    --tw-mask-linear-position: calc(1deg * 135);
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-center {
    background-position: center;
  }
  .fill-\[\#00BCFF\] {
    fill: #00BCFF;
  }
  .fill-\[\#000\] {
    fill: #000;
  }
  .fill-\[\#23B2E7\] {
    fill: #23B2E7;
  }
  .fill-\[\#D97757\] {
    fill: #D97757;
  }
  .fill-\[\#FD5402\] {
    fill: #FD5402;
  }
  .fill-black {
    fill: #000;
  }
  .fill-brand-600 {
    fill: var(--color-brand-600);
  }
  .fill-brand-700 {
    fill: var(--color-brand-700);
  }
  .fill-current {
    fill: currentcolor;
  }
  .fill-neutral-600 {
    fill: #464646;
  }
  .fill-neutral-700 {
    fill: #3b3b3b;
  }
  .fill-white {
    fill: #fff;
  }
  .fill-yellow-300 {
    fill: #ffd43c;
  }
  .stroke-current {
    stroke: currentcolor;
  }
  .stroke-inherit {
    stroke: inherit;
  }
  .stroke-1 {
    stroke-width: 1;
  }
  .stroke-2 {
    stroke-width: 2;
  }
  .stroke-3 {
    stroke-width: 3;
  }
  .stroke-\[2\.5px\] {
    stroke-width: 2.5px;
  }
  .stroke-\[2\.5px\]\! {
    stroke-width: 2.5px !important;
  }
  .stroke-\[2\.25px\] {
    stroke-width: 2.25px;
  }
  .stroke-\[2\.25px\]\! {
    stroke-width: 2.25px !important;
  }
  .stroke-\[2\.57px\] {
    stroke-width: 2.57px;
  }
  .stroke-\[2\.86px\] {
    stroke-width: 2.86px;
  }
  .stroke-\[2\.625px\] {
    stroke-width: 2.625px;
  }
  .stroke-\[3\.6px\] {
    stroke-width: 3.6px;
  }
  .stroke-\[3px\] {
    stroke-width: 3px;
  }
  .stroke-\[4px\] {
    stroke-width: 4px;
  }
  .stroke-\[12px\] {
    stroke-width: 12px;
  }
  .stroke-\[16px\] {
    stroke-width: 16px;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-center {
    object-position: center;
  }
  .object-left {
    object-position: left;
  }
  .object-left-top {
    object-position: left top;
  }
  .object-top {
    object-position: top;
  }
  .ss-inspector__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--ss-muted);
    & i {
      font-size: 22px;
      opacity: 0.6;
    }
  }
  .docs-overview__empty {
    padding: 44px 0;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 14px;
  }
  .ss-empty {
    padding: 18px 12px;
    text-align: center;
    color: var(--ss-muted);
    font-size: 12px;
  }
  .ss-review {
    text-align: center;
    padding: 32px 16px;
  }
  .docs-sidebar__footer-label {
    padding: 0 10px 2px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .collapse-trigger--lg {
    padding: 0.875rem 1rem;
    font-size: 14px;
  }
  .collapse-trigger--sm {
    padding: 0.5rem 0.75rem;
    font-size: 12.5px;
  }
  .collapse-trigger--xs {
    padding: 0.375rem 0.625rem;
    font-size: 11.5px;
  }
  .ss-topbar__btn--primary {
    background: var(--ss-accent-solid);
    color: var(--ss-on-accent);
    padding: 0 14px;
    font-weight: 500;
    &:hover {
      background: var(--ss-accent-solid-hover);
    }
    &:focus-visible {
      outline: 0;
      box-shadow: inset 0 0 0 2px var(--ss-on-accent);
    }
  }
  .dashboard-grid__widget--danger {
    --dash-widget-ring: var(--border-card, var(--border-primary));
    --dash-widget-shadow: none;
    padding: var(--dash-pad);
    background: radial-gradient( ellipse at top left, var(--text-danger), transparent 60% ), var(--bg-card, var(--alpha-white-100));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( ellipse at top left, color-mix(in oklch, var(--text-danger) 9%, transparent), transparent 60% ), var(--bg-card, var(--alpha-white-100));
    }
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .dashboard-grid__widget--highlighted {
    --dash-widget-ring: var(--border-card, var(--border-primary));
    --dash-widget-shadow: none;
    padding: var(--dash-pad);
    background: radial-gradient( ellipse at top left, var(--text-info), transparent 60% ), var(--bg-card, var(--alpha-white-100));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( ellipse at top left, color-mix(in oklch, var(--text-info) 9%, transparent), transparent 60% ), var(--bg-card, var(--alpha-white-100));
    }
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .dashboard-grid__widget--success {
    --dash-widget-ring: var(--border-card, var(--border-primary));
    --dash-widget-shadow: none;
    padding: var(--dash-pad);
    background: radial-gradient( ellipse at top left, var(--text-success), transparent 60% ), var(--bg-card, var(--alpha-white-100));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( ellipse at top left, color-mix(in oklch, var(--text-success) 9%, transparent), transparent 60% ), var(--bg-card, var(--alpha-white-100));
    }
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .dashboard-grid__widget--warning {
    --dash-widget-ring: var(--border-card, var(--border-primary));
    --dash-widget-shadow: none;
    padding: var(--dash-pad);
    background: radial-gradient( ellipse at top left, var(--text-warning), transparent 60% ), var(--bg-card, var(--alpha-white-100));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient( ellipse at top left, color-mix(in oklch, var(--text-warning) 9%, transparent), transparent 60% ), var(--bg-card, var(--alpha-white-100));
    }
    box-shadow: inset 0 0 0 1px var(--dash-widget-ring), var(--dash-widget-shadow);
  }
  .ss-section {
    padding: 6px 0;
    border-bottom: 1px solid var(--ss-divider);
    &:last-child {
      border-bottom: 0;
    }
  }
  .\!p-0 {
    padding: 0 !important;
  }
  .\!p-2 {
    padding: calc(var(--spacing) * 2) !important;
  }
  .\!p-\[3px\] {
    padding: 3px !important;
  }
  .collapse-section__body {
    padding: 0.75rem 0.875rem;
  }
  .docs-stage--flush {
    padding: 0;
  }
  .p-0 {
    padding: 0;
  }
  .p-0\! {
    padding: 0 !important;
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-0\.75 {
    padding: calc(var(--spacing) * 0.75);
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-1\.25 {
    padding: calc(var(--spacing) * 1.25);
  }
  .p-1\.75 {
    padding: calc(var(--spacing) * 1.75);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-14 {
    padding: calc(var(--spacing) * 14);
  }
  .p-16 {
    padding: calc(var(--spacing) * 16);
  }
  .p-\[0\.9px\] {
    padding: 0.9px;
  }
  .p-\[1\.5px\] {
    padding: 1.5px;
  }
  .p-\[3px\] {
    padding: 3px;
  }
  .p-\[5px\] {
    padding: 5px;
  }
  .p-px {
    padding: 1px;
  }
  .\!px-0 {
    padding-inline: 0 !important;
  }
  .\!px-1 {
    padding-inline: var(--spacing) !important;
  }
  .\!px-2 {
    padding-inline: calc(var(--spacing) * 2) !important;
  }
  .\!px-5 {
    padding-inline: calc(var(--spacing) * 5) !important;
  }
  .px-0 {
    padding-inline: 0;
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-1\.25 {
    padding-inline: calc(var(--spacing) * 1.25);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-2\.25 {
    padding-inline: calc(var(--spacing) * 2.25);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-4\! {
    padding-inline: calc(var(--spacing) * 4) !important;
  }
  .px-4\.5 {
    padding-inline: calc(var(--spacing) * 4.5);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .px-14 {
    padding-inline: calc(var(--spacing) * 14);
  }
  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }
  .px-20 {
    padding-inline: calc(var(--spacing) * 20);
  }
  .px-\[3px\] {
    padding-inline: 3px;
  }
  .px-\[7px\] {
    padding-inline: 7px;
  }
  .px-\[31\.5px\] {
    padding-inline: 31.5px;
  }
  .\!py-0 {
    padding-block: 0 !important;
  }
  .\!py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5) !important;
  }
  .\!py-1 {
    padding-block: var(--spacing) !important;
  }
  .\!py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }
  .\!py-2 {
    padding-block: calc(var(--spacing) * 2) !important;
  }
  .py-0 {
    padding-block: 0;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-0\.25 {
    padding-block: calc(var(--spacing) * 0.25);
  }
  .py-0\.75 {
    padding-block: calc(var(--spacing) * 0.75);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-2\.5\! {
    padding-block: calc(var(--spacing) * 2.5) !important;
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-4\.5 {
    padding-block: calc(var(--spacing) * 4.5);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-5\.5 {
    padding-block: calc(var(--spacing) * 5.5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .py-\[1px\] {
    padding-block: 1px;
  }
  .py-\[5px\] {
    padding-block: 5px;
  }
  .py-\[7px\] {
    padding-block: 7px;
  }
  .py-\[9px\] {
    padding-block: 9px;
  }
  .py-px {
    padding-block: 1px;
  }
  .\!pt-0 {
    padding-top: 0 !important;
  }
  .\!pt-2 {
    padding-top: calc(var(--spacing) * 2) !important;
  }
  .\!pt-\[2px\] {
    padding-top: 2px !important;
  }
  .pt-\(--modal-pt\) {
    padding-top: var(--modal-pt);
  }
  .pt-0 {
    padding-top: 0;
  }
  .pt-0\! {
    padding-top: 0 !important;
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-11 {
    padding-top: calc(var(--spacing) * 11);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pt-28 {
    padding-top: calc(var(--spacing) * 28);
  }
  .pt-32 {
    padding-top: calc(var(--spacing) * 32);
  }
  .pt-\[3px\] {
    padding-top: 3px;
  }
  .pt-\[5px\] {
    padding-top: 5px;
  }
  .pt-\[7px\] {
    padding-top: 7px;
  }
  .pt-\[12px\] {
    padding-top: 12px;
  }
  .pt-\[31px\] {
    padding-top: 31px;
  }
  .pt-\[152px\] {
    padding-top: 152px;
  }
  .pt-\[170px\] {
    padding-top: 170px;
  }
  .pt-px {
    padding-top: 1px;
  }
  .media-list--inset {
    & .media {
      padding-left: 12px;
      padding-right: 12px;
    }
  }
  .\!pr-1 {
    padding-right: var(--spacing) !important;
  }
  .\!pr-4 {
    padding-right: calc(var(--spacing) * 4) !important;
  }
  .\!pr-16 {
    padding-right: calc(var(--spacing) * 16) !important;
  }
  .pr-0 {
    padding-right: 0;
  }
  .pr-0\.75 {
    padding-right: calc(var(--spacing) * 0.75);
  }
  .pr-1 {
    padding-right: var(--spacing);
  }
  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-3\.5 {
    padding-right: calc(var(--spacing) * 3.5);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }
  .pr-9\.5 {
    padding-right: calc(var(--spacing) * 9.5);
  }
  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pr-16 {
    padding-right: calc(var(--spacing) * 16);
  }
  .\!pb-0 {
    padding-bottom: 0 !important;
  }
  .pb-\(--modal-pb\) {
    padding-bottom: var(--modal-pb);
  }
  .pb-0 {
    padding-bottom: 0;
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-13 {
    padding-bottom: calc(var(--spacing) * 13);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pb-28 {
    padding-bottom: calc(var(--spacing) * 28);
  }
  .pb-32 {
    padding-bottom: calc(var(--spacing) * 32);
  }
  .pb-\[2px\] {
    padding-bottom: 2px;
  }
  .pb-\[3px\] {
    padding-bottom: 3px;
  }
  .pb-\[7px\] {
    padding-bottom: 7px;
  }
  .pb-\[21px\] {
    padding-bottom: 21px;
  }
  .pb-\[26px\] {
    padding-bottom: 26px;
  }
  .pb-\[112px\] {
    padding-bottom: 112px;
  }
  .pb-\[clamp\(16px\,8vh\,64px\)\] {
    padding-bottom: clamp(16px, 8vh, 64px);
  }
  .\!pl-3 {
    padding-left: calc(var(--spacing) * 3) !important;
  }
  .\!pl-4 {
    padding-left: calc(var(--spacing) * 4) !important;
  }
  .\!pl-5 {
    padding-left: calc(var(--spacing) * 5) !important;
  }
  .\!pl-7 {
    padding-left: calc(var(--spacing) * 7) !important;
  }
  .\!pl-8 {
    padding-left: calc(var(--spacing) * 8) !important;
  }
  .\!pl-9 {
    padding-left: calc(var(--spacing) * 9) !important;
  }
  .\!pl-12 {
    padding-left: calc(var(--spacing) * 12) !important;
  }
  .\!pl-32 {
    padding-left: calc(var(--spacing) * 32) !important;
  }
  .\!pl-\[2px\] {
    padding-left: 2px !important;
  }
  .pl-0\.75 {
    padding-left: calc(var(--spacing) * 0.75);
  }
  .pl-1 {
    padding-left: var(--spacing);
  }
  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }
  .pl-1\.25 {
    padding-left: calc(var(--spacing) * 1.25);
  }
  .pl-1\.75 {
    padding-left: calc(var(--spacing) * 1.75);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }
  .pl-2\.25 {
    padding-left: calc(var(--spacing) * 2.25);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-4\.5 {
    padding-left: calc(var(--spacing) * 4.5);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-8\.5 {
    padding-left: calc(var(--spacing) * 8.5);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .pl-10\.5 {
    padding-left: calc(var(--spacing) * 10.5);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .pl-12\.5 {
    padding-left: calc(var(--spacing) * 12.5);
  }
  .pl-13 {
    padding-left: calc(var(--spacing) * 13);
  }
  .pl-16 {
    padding-left: calc(var(--spacing) * 16);
  }
  .pl-18 {
    padding-left: calc(var(--spacing) * 18);
  }
  .pl-20 {
    padding-left: calc(var(--spacing) * 20);
  }
  .pl-24 {
    padding-left: calc(var(--spacing) * 24);
  }
  .pl-40 {
    padding-left: calc(var(--spacing) * 40);
  }
  .pl-\[28px\] {
    padding-left: 28px;
  }
  .pl-\[56px\] {
    padding-left: 56px;
  }
  .pl-\[71px\] {
    padding-left: 71px;
  }
  .pl-\[84px\] {
    padding-left: 84px;
  }
  .pl-\[112px\] {
    padding-left: 112px;
  }
  .pl-\[140px\] {
    padding-left: 140px;
  }
  .pl-\[168px\] {
    padding-left: 168px;
  }
  .pl-\[196px\] {
    padding-left: 196px;
  }
  .pl-\[224px\] {
    padding-left: 224px;
  }
  .pl-\[252px\] {
    padding-left: 252px;
  }
  .pl-\[280px\] {
    padding-left: 280px;
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-top {
    vertical-align: top;
  }
  .micro {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    letter-spacing: var(--tw-tracking, 0.02em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    line-height: 1.2;
  }
  .overline {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    line-height: 1.2;
  }
  .eyebrow {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-info, var(--text-tertiary));
  }
  .docs-header__title-main {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.014em;
    color: var(--text-primary);
    white-space: nowrap;
  }
  .dashboard-grid__section-title {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .docs-anim-stage__label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .docs-card__label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .docs-example__label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .docs-header__title-sub {
    font-family: 'Space Mono', 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .docs-hero__eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-info, var(--text-secondary));
  }
  .stepper-mobile__label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-step-subtitle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .docs-token__name {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-primary);
    word-break: break-all;
  }
  .docs-cat__count {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-quaternary);
    font-variant-numeric: tabular-nums;
  }
  .docs-token__value {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
  }
  .font-Inter {
    font-family: 'Inter', sans-serif;
  }
  .font-Manrope {
    font-family: 'Manrope', sans-serif;
  }
  .font-SpaceMono {
    font-family: 'Space Mono', monospace;
  }
  .font-mono {
    font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .display-1 {
    font-size: 4.5rem;
    line-height: var(--tw-leading, 4.75rem);
    letter-spacing: var(--tw-tracking, -0.028em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    line-height: 1.05;
    text-wrap: balance;
  }
  .display-2 {
    font-size: 2.75rem;
    line-height: var(--tw-leading, 3rem);
    letter-spacing: var(--tw-tracking, -0.022em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    line-height: 1.08;
    text-wrap: balance;
  }
  .page-title {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    line-height: 1.15;
  }
  .panel-title {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    line-height: 1.25;
  }
  .caption-sm {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.35;
  }
  .step-title {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-step-title, 13px);
    color: var(--text-step-title);
    .step.is-current & {
      color: var(--text-step-title-current);
    }
    .step.is-disabled & {
      color: var(--text-step-disabled);
    }
    .step.is-locked & {
      color: var(--text-step-disabled);
    }
    .step.is-error & {
      color: var(--text-step-title-error);
    }
    .step.is-warning & {
      color: var(--text-step-title-warning);
    }
    .step.is-skipped & {
      color: var(--text-step-skipped);
      text-decoration: line-through;
      text-decoration-color: var(--border-step-skipped);
      text-decoration-thickness: 1px;
    }
    .stepper-pill & {
      font-size: 12.5px;
      color: inherit;
    }
    .stepper-chevron .step & {
      font-size: 12.5px;
      color: inherit;
    }
    .stepper-timeline & {
      font-size: 14px;
    }
    .wizard-rail .stepper .step.is-completed:hover & {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
    .wizard-rail .stepper .step.is-visited:hover & {
      color: var(--text-wizard-step-title, var(--text-primary));
    }
  }
  .uploader__title {
    font-size: var(--uploader-title-size);
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.4;
    & strong {
      color: var(--text-link);
      font-weight: 600;
    }
    .uploader.is-dragover & {
      color: var(--uploader-accent);
    }
  }
  .\!caption {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    --tw-font-weight: var(--font-weight-normal) !important;
    font-weight: var(--font-weight-normal) !important;
    color: var(--text-tertiary) !important;
    line-height: 1.4 !important;
  }
  .\!label {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
    --tw-font-weight: var(--font-weight-medium) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--text-secondary) !important;
    line-height: 1.35 !important;
  }
  .body {
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    line-height: 1.55;
  }
  .body-lg {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    line-height: 1.55;
  }
  .body-sm {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    line-height: 1.5;
  }
  .body-strong {
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    line-height: 1.5;
  }
  .caption {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.4;
  }
  .drawer-title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;
  }
  .hint {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
    line-height: 1.45;
  }
  .label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 1.35;
  }
  .label-strong {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;
  }
  .modal-title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;
  }
  .page-subtitle {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    line-height: 1.45;
  }
  .section-title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;
  }
  .title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.35;
  }
  .modal-subtitle {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
  }
  .panel-list-empty__title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-list-item-title, var(--text-primary));
  }
  .panel-subtitle {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
  }
  .section-subtitle {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
  }
  .subtitle {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary-alt, var(--text-secondary));
  }
  .wizard-step__title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--text-wizard-step-title, var(--text-primary));
  }
  .wizard-title {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--text-wizard-title);
  }
  .stepper-xl {
    --size-step-indicator: 40px;
    --size-step-connector: 3px;
    --space-step-content: 1.125rem;
    --space-step-end: 1.5rem;
    --space-step-between: 1.75rem;
    --height-step-vertical: 5.5rem;
    --font-step-title: 15px;
    & .step-indicator {
      font-size: 1rem;
      line-height: var(--tw-leading, 1.5rem);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }
  .carousel__slide-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 2px var(--alpha-black-40);
  }
  .stepper-sm {
    --size-step-indicator: 22px;
    --size-step-connector: 2px;
    --space-step-content: 0.625rem;
    --space-step-end: 0.75rem;
    --space-step-between: 1rem;
    --height-step-vertical: 3.75rem;
    --font-step-title: 12px;
    & .step-indicator {
      font-size: 0.6875rem;
      line-height: var(--tw-leading, 1rem);
      letter-spacing: var(--tw-tracking, 0.01em);
    }
  }
  .\!text-2xs {
    font-size: 0.6875rem !important;
    line-height: var(--tw-leading, 1rem) !important;
    letter-spacing: var(--tw-tracking, 0.01em) !important;
  }
  .page-title {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  .text-2xl {
    font-size: 1.5rem;
    line-height: var(--tw-leading, 1.875rem);
    letter-spacing: var(--tw-tracking, -0.01em);
  }
  .text-2xs {
    font-size: 0.6875rem;
    line-height: var(--tw-leading, 1rem);
    letter-spacing: var(--tw-tracking, 0.01em);
  }
  .text-3xl {
    font-size: 1.875rem;
    line-height: var(--tw-leading, 2.25rem);
    letter-spacing: var(--tw-tracking, -0.015em);
  }
  .text-3xs {
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
    letter-spacing: var(--tw-tracking, 0.02em);
  }
  .text-4xl {
    font-size: 2.25rem;
    line-height: var(--tw-leading, 2.625rem);
    letter-spacing: var(--tw-tracking, -0.02em);
  }
  .text-5xl {
    font-size: 2.75rem;
    line-height: var(--tw-leading, 3rem);
    letter-spacing: var(--tw-tracking, -0.022em);
  }
  .text-6xl {
    font-size: 3.5rem;
    line-height: var(--tw-leading, 3.75rem);
    letter-spacing: var(--tw-tracking, -0.025em);
  }
  .text-7xl {
    font-size: 4.5rem;
    line-height: var(--tw-leading, 4.75rem);
    letter-spacing: var(--tw-tracking, -0.028em);
  }
  .text-8xl {
    font-size: 5.5rem;
    line-height: var(--tw-leading, 5.75rem);
    letter-spacing: var(--tw-tracking, -0.03em);
  }
  .text-9xl {
    font-size: 7rem;
    line-height: var(--tw-leading, 7.25rem);
    letter-spacing: var(--tw-tracking, -0.035em);
  }
  .docs-prev-next__desc {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.45;
  }
  .docs-tile__desc {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.4;
  }
  .uploader__hint {
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
  }
  .uploader__subtitle {
    font-size: var(--uploader-subtitle-size);
    color: var(--text-tertiary);
    line-height: 1.4;
  }
  .stepper-lg {
    --size-step-indicator: 34px;
    --size-step-connector: 3px;
    --space-step-content: 1.125rem;
    --space-step-end: 1.25rem;
    --space-step-between: 1.5rem;
    --height-step-vertical: 5rem;
    --font-step-title: 14px;
    & .step-indicator {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
    }
  }
  .stepper-md {
    --size-step-indicator: 28px;
    --size-step-connector: 3px;
    --space-step-content: 0.875rem;
    --space-step-end: 1rem;
    --space-step-between: 1.25rem;
    --height-step-vertical: 4.5rem;
    --font-step-title: 13px;
    & .step-indicator {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
  }
  .stepper-xs {
    --size-step-indicator: 18px;
    --size-step-connector: 2px;
    --space-step-content: 0.5rem;
    --space-step-end: 0.5rem;
    --space-step-between: 0.625rem;
    --height-step-vertical: 3rem;
    --font-step-title: 11px;
    & .step-indicator {
      font-size: 0.563rem;
      line-height: var(--tw-leading, 1rem);
    }
  }
  .body {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
    line-height: 1.5;
  }
  .\!caption {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
  }
  .\!label {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
  }
  .\!text-lg {
    font-size: 1.125rem !important;
    line-height: var(--tw-leading, 1.6875rem) !important;
  }
  .\!text-xs {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
  }
  .\!text-xxs {
    font-size: 0.625rem !important;
    line-height: var(--tw-leading, 0.875rem) !important;
  }
  .caption {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .code-block {
    .docs-partial & {
      font-size: 11px !important;
      line-height: 1.5 !important;
    }
  }
  .label {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .panel-title {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .section-title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .text-base {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .text-lg {
    font-size: 1.125rem;
    line-height: var(--tw-leading, 1.6875rem);
  }
  .text-md {
    font-size: 0.875rem;
    line-height: var(--tw-leading, 1.375rem);
  }
  .text-sm {
    font-size: 0.8125rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .text-sm\/500 {
    font-size: 0.8125rem;
    line-height: calc(var(--spacing) * 500);
  }
  .text-sm\/600 {
    font-size: 0.8125rem;
    line-height: calc(var(--spacing) * 600);
  }
  .text-tiny {
    font-size: 0.563rem;
    line-height: var(--tw-leading, 1rem);
  }
  .text-xl {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .text-xs {
    font-size: 0.75rem;
    line-height: var(--tw-leading, 1.125rem);
  }
  .text-xs\! {
    font-size: 0.75rem !important;
    line-height: var(--tw-leading, 1.125rem) !important;
  }
  .text-xs\/500 {
    font-size: 0.75rem;
    line-height: calc(var(--spacing) * 500);
  }
  .text-xxs {
    font-size: 0.625rem;
    line-height: var(--tw-leading, 0.875rem);
  }
  .title {
    font-size: 1rem;
    line-height: var(--tw-leading, 1.5rem);
  }
  .docs-cat__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .inline-edit-row__label {
    font-size: 12.5px;
    color: var(--text-inline-edit-muted);
    font-weight: 500;
    &.required::after {
      content: ' *';
      color: var(--text-inline-edit-error);
    }
  }
  .carousel__empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-carousel-on-light);
  }
  .carousel__footer-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-carousel-on-light);
  }
  .collapse-trigger__sub {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-collapse-trigger-muted);
  }
  .docs-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .docs-catalog-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .docs-prev-next__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .docs-tile__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .stepper-mobile__current {
    font-size: 14px;
    color: var(--text-step-title);
    font-weight: 600;
  }
  .docs-catalog-card__fallback {
    font-size: 22px;
    color: var(--text-quaternary);
  }
  .inline-popover-edit__value {
    font-size: 13px;
    color: var(--text-inline-edit);
  }
  .docs-page-header__sep {
    font-size: 9px;
    opacity: 0.7;
  }
  .\!text-\[2rem\] {
    font-size: 2rem !important;
  }
  .text-\[\.875rem\] {
    font-size: .875rem;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[40\%\] {
    font-size: 40%;
  }
  .text-\[42\%\] {
    font-size: 42%;
  }
  .step-number {
    .step-indicator > & {
      --tw-leading: 1;
      line-height: 1;
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }
  .leading-3 {
    --tw-leading: calc(var(--spacing) * 3);
    line-height: calc(var(--spacing) * 3);
  }
  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }
  .leading-\[13px\] {
    --tw-leading: 13px;
    line-height: 13px;
  }
  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }
  .leading-\[22px\] {
    --tw-leading: 22px;
    line-height: 22px;
  }
  .leading-\[normal\] {
    --tw-leading: normal;
    line-height: normal;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .lh-loose {
    line-height: 1.8;
  }
  .lh-normal {
    line-height: 1.45;
  }
  .lh-prose {
    line-height: 1.7;
  }
  .lh-relaxed {
    line-height: 1.6;
  }
  .lh-snug {
    line-height: 1.3;
  }
  .lh-tight {
    line-height: 1.15;
  }
  .docs-header__title-descriptor {
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: -0.006em;
  }
  .docs-page-header__current {
    color: var(--text-primary);
    font-weight: 500;
  }
  .\!font-bold {
    --tw-font-weight: var(--font-weight-bold) !important;
    font-weight: var(--font-weight-bold) !important;
  }
  .\!font-light {
    --tw-font-weight: var(--font-weight-light) !important;
    font-weight: var(--font-weight-light) !important;
  }
  .\!font-normal {
    --tw-font-weight: var(--font-weight-normal) !important;
    font-weight: var(--font-weight-normal) !important;
  }
  .\!font-semibold {
    --tw-font-weight: var(--font-weight-semibold) !important;
    font-weight: var(--font-weight-semibold) !important;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-bold\! {
    --tw-font-weight: var(--font-weight-bold) !important;
    font-weight: var(--font-weight-bold) !important;
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-medium\! {
    --tw-font-weight: var(--font-weight-medium) !important;
    font-weight: var(--font-weight-medium) !important;
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .font-semibold\! {
    --tw-font-weight: var(--font-weight-semibold) !important;
    font-weight: var(--font-weight-semibold) !important;
  }
  .text-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .text-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .text-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .text-regular {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .text-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .-tracking-\[1\.2px\] {
    --tw-tracking: calc(1.2px * -1);
    letter-spacing: calc(1.2px * -1);
  }
  .-tracking-\[1\.44px\] {
    --tw-tracking: calc(1.44px * -1);
    letter-spacing: calc(1.44px * -1);
  }
  .tracking-\[0\.6px\] {
    --tw-tracking: 0.6px;
    letter-spacing: 0.6px;
  }
  .tracking-\[1px\] {
    --tw-tracking: 1px;
    letter-spacing: 1px;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .tracking-display {
    letter-spacing: -0.03em;
  }
  .tracking-headline {
    letter-spacing: -0.02em;
  }
  .tracking-snug {
    letter-spacing: -0.01em;
  }
  .tracking-wide-mono {
    letter-spacing: 0.06em;
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-nowrap {
    text-wrap: nowrap;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .wrap-break-word {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .text-nowrap {
    white-space: nowrap;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre {
    white-space: pre;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .required {
    &.inline-edit-row__label::after {
      content: ' *';
      color: var(--text-inline-edit-error);
    }
  }
  .is-selected {
    &.ss-layer__item {
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 14%, transparent);
      }
      color: var(--ss-text);
    }
  }
  .step__badge--ai {
    background: var(--bg-step-badge-ai);
    color: var(--text-step-badge-ai);
  }
  .step__badge--locked {
    background: var(--bg-step-badge-locked);
    color: var(--text-step-badge-locked);
  }
  .step__badge--optional {
    background: var(--bg-step-badge-optional);
    color: var(--text-step-badge-optional);
  }
  .step__badge--required {
    background: var(--bg-step-error);
    color: var(--text-step-error);
  }
  .\!text-white {
    color: #fff !important;
  }
  .docs-status--stable {
    color: var(--text-success);
  }
  .is-near-limit {
    &.inline-edit__counter {
      color: var(--text-inline-edit-error);
    }
  }
  .ss-template--draft {
    & .ss-template__thumb {
      color: var(--text-success);
    }
  }
  .text-\[\#abc\] {
    color: #abc;
  }
  .text-\[\#…\] {
    color: #…;
  }
  .text-amber-500 {
    color: #f5a300;
  }
  .text-black {
    color: #000;
  }
  .text-blue-500 {
    color: #2f6fe4;
  }
  .text-current {
    color: currentcolor;
  }
  .text-cyan-500 {
    color: #2fa9c6;
  }
  .text-danger {
    color: var(--text-danger) !important;
  }
  .text-disabled {
    color: var(--text-disabled) !important;
  }
  .text-emerald-500 {
    color: #28b37e;
  }
  .text-gray-300 {
    color: #c3c7d0;
  }
  .text-gray-400 {
    color: #9196a4;
  }
  .text-gray-500 {
    color: #5c5f6b;
  }
  .text-gray-900 {
    color: #23242c;
  }
  .text-gray-950 {
    color: #16161c;
  }
  .text-green-400 {
    color: #39e28a;
  }
  .text-green-500 {
    color: #3fbf57;
  }
  .text-indigo {
    color: var(--text-indigo) !important;
  }
  .text-indigo {
    color: #4656e9;
  }
  .text-indigo-500 {
    color: #4656e9;
  }
  .text-info {
    color: var(--text-info) !important;
  }
  .text-info-500 {
    color: var(--color-info-500);
  }
  .text-inherit {
    color: inherit;
  }
  .text-mint {
    color: var(--text-mint) !important;
  }
  .text-mint {
    color: #00e8bb;
  }
  .text-muted {
    color: var(--text-tertiary) !important;
  }
  .text-neutral-400 {
    color: #b5b5b5;
  }
  .text-neutral-500 {
    color: #5c5c5c;
  }
  .text-neutral-700 {
    color: #3b3b3b;
  }
  .text-orange {
    color: #e78a32;
  }
  .text-pink {
    color: var(--text-pink) !important;
  }
  .text-pink {
    color: #e94284;
  }
  .text-primary {
    color: var(--text-primary) !important;
  }
  .text-purple {
    color: var(--text-purple) !important;
  }
  .text-purple {
    color: #8337e2;
  }
  .text-purple-500 {
    color: #8337e2;
  }
  .text-red-400 {
    color: #f7796e;
  }
  .text-red-500 {
    color: #ec4c3c;
  }
  .text-rose {
    color: #e24d5c;
  }
  .text-rose-500 {
    color: #e24d5c;
  }
  .text-secondary {
    color: var(--text-secondary) !important;
  }
  .text-sky-500 {
    color: #3fa6dd;
  }
  .text-slate-500 {
    color: #5b647c;
  }
  .text-success {
    color: var(--text-success) !important;
  }
  .text-teal {
    color: var(--text-teal) !important;
  }
  .text-teal {
    color: #299e9b;
  }
  .text-teal-500 {
    color: #299e9b;
  }
  .text-transparent {
    color: transparent;
  }
  .text-violet-500 {
    color: #6b42ec;
  }
  .text-warning {
    color: var(--text-warning) !important;
  }
  .text-white {
    color: #fff;
  }
  .text-white\/50 {
    color: color-mix(in oklab, #fff 50%, transparent);
  }
  .text-white\/60 {
    color: color-mix(in oklab, #fff 60%, transparent);
  }
  .text-white\/70 {
    color: color-mix(in oklab, #fff 70%, transparent);
  }
  .text-white\/80 {
    color: color-mix(in oklab, #fff 80%, transparent);
  }
  .text-yellow {
    color: #f4c200;
  }
  .text-yellow-300 {
    color: #ffd43c;
  }
  .text-yellow-400 {
    color: #f7be12;
  }
  .text-yellow-500 {
    color: #f4c200;
  }
  .text-zinc-400 {
    color: #949499;
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .text-numeric {
    font-variant-numeric: tabular-nums;
  }
  .text-tabular {
    font-variant-numeric: tabular-nums;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .overline {
    text-decoration-line: overline;
  }
  .underline {
    text-decoration-line: underline;
  }
  .decoration-1 {
    text-decoration-thickness: 1px;
  }
  .decoration-\[3px\] {
    text-decoration-thickness: 3px;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-3 {
    text-underline-offset: 3px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .underline-offset-\[0\.218em\] {
    text-underline-offset: 0.218em;
  }
  .\!antialiased {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .placeholder-gray-400 {
    &::placeholder {
      color: #9196a4;
    }
  }
  .caret-transparent {
    caret-color: transparent;
  }
  .is-dragging {
    &.panel-item {
      opacity: 0.55;
      box-shadow: 0 6px 18px oklch(0% 0 0 / 0.16);
    }
  }
  .carousel--image {
    & .carousel__prev {
      opacity: 0;
    }
    & .carousel__next {
      opacity: 0;
    }
    &:hover .carousel__prev {
      opacity: 0.85;
    }
    &:hover .carousel__next {
      opacity: 0.85;
    }
    &:focus-within .carousel__prev {
      opacity: 0.85;
    }
    &:focus-within .carousel__next {
      opacity: 0.85;
    }
  }
  .panel-list--sortable {
    & .panel-item:hover .panel-item-handle {
      opacity: 1;
    }
    & .panel-item:focus-within .panel-item-handle {
      opacity: 1;
    }
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-15 {
    opacity: 15%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-45 {
    opacity: 45%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-55 {
    opacity: 55%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-85 {
    opacity: 85%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .opacity-\[0\.06\] {
    opacity: 0.06;
  }
  .mix-blend-normal {
    mix-blend-mode: normal;
  }
  .mix-blend-screen {
    mix-blend-mode: screen;
  }
  .\!shadow-none {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_-2px_2px_0_rgba\(0\,0\,0\,0\.10\)_inset\,1px_8px_5px_0_rgba\(0\,0\,0\,0\.05\)\,0_3px_3px_0_rgba\(0\,0\,0\,0\.10\)\,0_1px_2px_0_rgba\(0\,0\,0\,0\.10\)\] {
    --tw-shadow: 0 -2px 2px 0 var(--tw-shadow-color, rgba(0,0,0,0.10)) inset, 1px 8px 5px 0 var(--tw-shadow-color, rgba(0,0,0,0.05)), 0 3px 3px 0 var(--tw-shadow-color, rgba(0,0,0,0.10)), 0 1px 2px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0px_1px_0px_0px\] {
    --tw-shadow: 0px 1px 0px 0px var(--tw-shadow-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[inset_0_1px_0_0\] {
    --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[inset_0px_1px_0px_0px\] {
    --tw-shadow: inset 0px 1px 0px 0px var(--tw-shadow-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.03));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs\! {
    --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.03)) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }
  .shadow\/border {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow\/opacity {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow\/ring {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .\!ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-3 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-6 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(6px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[0\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0.5px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[0\.56px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0.56px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[0\.75px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0.75px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[1\.5px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[1\.49px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.49px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[1\.67px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.67px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[3px\] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .inset-ring {
    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .inset-ring-1 {
    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-ring {
    &:focus-visible {
      outline: none;
      box-shadow: var(
      --ring-focus,
      0 0 0 2px #fff,
      0 0 0 4px var(--border-focus, #2f6fe4)
    );
    }
  }
  .is-drop-target {
    &.panel-item {
      box-shadow: inset 0 -2px 0 0 var(--border-info);
    }
  }
  .is-drop-target-above {
    &.panel-item {
      box-shadow: inset 0 2px 0 0 var(--border-info);
    }
  }
  .uploader--solid {
    & .uploader__zone {
      box-shadow: inset 0 0 0 1px var(--border-input), var(--uploader-shadow);
    }
  }
  .ring-\[var\(--border-focus\)\] {
    --tw-ring-color: var(--border-focus);
  }
  .ring-black {
    --tw-ring-color: #000;
  }
  .ring-black\/10 {
    --tw-ring-color: color-mix(in oklab, #000 10%, transparent);
  }
  .ring-blue-500\/40 {
    --tw-ring-color: color-mix(in oklab, #2f6fe4 40%, transparent);
  }
  .ring-transparent {
    --tw-ring-color: transparent;
  }
  .ring-white {
    --tw-ring-color: #fff;
  }
  .ring-white\/30 {
    --tw-ring-color: color-mix(in oklab, #fff 30%, transparent);
  }
  .ring-white\/32 {
    --tw-ring-color: color-mix(in oklab, #fff 32%, transparent);
  }
  .ring-white\/50 {
    --tw-ring-color: color-mix(in oklab, #fff 50%, transparent);
  }
  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .outline-hidden\! {
    --tw-outline-style: none !important;
    outline-style: none !important;
    @media (forced-colors: active) {
      outline: 2px solid transparent !important;
      outline-offset: 2px !important;
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-0 {
    outline-style: var(--tw-outline-style);
    outline-width: 0px;
  }
  .outline-1 {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-2 {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .outline-3 {
    outline-style: var(--tw-outline-style);
    outline-width: 3px;
  }
  .outline-\[0\.5px\] {
    outline-style: var(--tw-outline-style);
    outline-width: 0.5px;
  }
  .outline-\[0\.75px\] {
    outline-style: var(--tw-outline-style);
    outline-width: 0.75px;
  }
  .-outline-offset-1 {
    outline-offset: calc(1px * -1);
  }
  .-outline-offset-2 {
    outline-offset: calc(2px * -1);
  }
  .-outline-offset-\[0\.5px\] {
    outline-offset: calc(0.5px * -1);
  }
  .-outline-offset-\[0\.75px\] {
    outline-offset: calc(0.75px * -1);
  }
  .outline-offset-0 {
    outline-offset: 0px;
  }
  .outline-offset-2 {
    outline-offset: 2px;
  }
  .outline-\(--swatch-color\) {
    outline-color: var(--swatch-color);
  }
  .outline-black\/10 {
    outline-color: color-mix(in oklab, #000 10%, transparent);
  }
  .outline-black\/16 {
    outline-color: color-mix(in oklab, #000 16%, transparent);
  }
  .outline-transparent {
    outline-color: transparent;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-3xl {
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-md {
    --tw-blur: blur(var(--blur-md));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .blur-xs {
    --tw-blur: blur(var(--blur-xs));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .brightness-95 {
    --tw-brightness: brightness(95%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-sm {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .saturate-0 {
    --tw-saturate: saturate(0%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[1\.875px\] {
    --tw-backdrop-blur: blur(1.875px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[2\.14px\] {
    --tw-backdrop-blur: blur(2.14px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[6px\] {
    --tw-backdrop-blur: blur(6px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[8px\] {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[10px\] {
    --tw-backdrop-blur: blur(10px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-lg {
    --tw-backdrop-blur: blur(var(--blur-lg));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-xs {
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[box-shadow\,background-color\] {
    transition-property: box-shadow,background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[inherit\] {
    transition-property: inherit;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .delay-\[-3s\] {
    transition-delay: -3s;
  }
  .duration-50 {
    --tw-duration: 50ms;
    transition-duration: 50ms;
  }
  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .will-change-transform {
    will-change: transform;
  }
  .inline-edit--xs {
    --ie-pad-y: 2px;
    --ie-pad-x: 6px;
    --ie-radius: var(--radius-sm);
    --ie-font-size: 11.5px;
    --ie-line-height: 1.3;
    --ie-min-width: 60px;
    --ie-trigger-size: 11px;
  }
  .uploader--lg {
    --uploader-padding-y: 40px;
    --uploader-padding-x: 32px;
    --uploader-icon-box: 48px;
    --uploader-icon-size: 24px;
    --uploader-title-size: 16px;
    --uploader-subtitle-size: 13.5px;
    --uploader-gap: 14px;
  }
  .uploader--sm {
    --uploader-padding-y: 16px;
    --uploader-padding-x: 16px;
    --uploader-icon-box: 32px;
    --uploader-icon-size: 16px;
    --uploader-title-size: 13px;
    --uploader-subtitle-size: 11.5px;
    --uploader-gap: 8px;
  }
  .inline-edit--lg {
    --ie-pad-y: 6px;
    --ie-pad-x: 12px;
    --ie-radius: var(--radius-lg);
    --ie-font-size: 15px;
    --ie-min-width: 120px;
    --ie-trigger-size: 16px;
  }
  .inline-edit--sm {
    --ie-pad-y: 3px;
    --ie-pad-x: 8px;
    --ie-radius: var(--radius-md);
    --ie-font-size: 12.5px;
    --ie-min-width: 72px;
    --ie-trigger-size: 12px;
  }
  .media--lg {
    --media-figure-size: 56px;
    --media-figure-radius: var(--radius-xl);
    --media-title-size: 15px;
    --media-subtitle-size: 13px;
    --media-gap: 14px;
  }
  .media--sm {
    --media-figure-size: 32px;
    --media-figure-radius: var(--radius-md);
    --media-title-size: 13px;
    --media-subtitle-size: 12px;
    --media-gap: 10px;
  }
  .media--xl {
    --media-figure-size: 72px;
    --media-figure-radius: var(--radius-2xl);
    --media-title-size: 17px;
    --media-subtitle-size: 13.5px;
    --media-gap: 16px;
  }
  .media--xs {
    --media-figure-size: 24px;
    --media-figure-radius: var(--radius-sm);
    --media-title-size: 12.5px;
    --media-subtitle-size: 11.5px;
    --media-gap: 8px;
  }
  .accordion--lg {
    &.accordion {
      --accordion-py: 0.875rem;
      --accordion-py-body: 1rem;
      --accordion-px: 1.125rem;
      --accordion-fs: 14px;
    }
  }
  .accordion--md {
    &.accordion {
      --accordion-py: 0.625rem;
      --accordion-py-body: 0.75rem;
      --accordion-px: 1rem;
      --accordion-fs: 13px;
    }
  }
  .accordion--sm {
    &.accordion {
      --accordion-py: 0.5rem;
      --accordion-py-body: 0.625rem;
      --accordion-px: 0.75rem;
      --accordion-fs: 12.5px;
    }
  }
  .accordion--xl {
    &.accordion {
      --accordion-py: 1.125rem;
      --accordion-py-body: 1.125rem;
      --accordion-px: 1.25rem;
      --accordion-fs: 15px;
    }
  }
  .accordion--xs {
    &.accordion {
      --accordion-py: 0.375rem;
      --accordion-py-body: 0.5rem;
      --accordion-px: 0.625rem;
      --accordion-fs: 11.5px;
    }
  }
  .form-control-lg {
    --ctl-h: var(--control-h-lg);
    --ctl-line: var(--control-line-lg);
    --ctl-fs: var(--control-fs-lg);
    --ctl-px: calc(var(--spacing) * 3.5);
  }
  .form-control-md {
    --ctl-h: var(--control-h-md);
    --ctl-line: var(--control-line-md);
    --ctl-fs: var(--control-fs-md);
    --ctl-px: calc(var(--spacing) * 3);
  }
  .form-control-sm {
    --ctl-h: var(--control-h-sm);
    --ctl-line: var(--control-line-sm);
    --ctl-fs: var(--control-fs-sm);
    --ctl-px: calc(var(--spacing) * 3);
  }
  .form-control-xs {
    --ctl-h: var(--control-h-xs);
    --ctl-line: var(--control-line-xs);
    --ctl-fs: var(--control-fs-xs);
    --ctl-px: calc(var(--spacing) * 2.5);
  }
  .dashboard-grid--cols-3 {
    --dash-cols: 1;
    @media (min-width: 640px) {
      --dash-cols: 2;
    }
    @media (min-width: 1024px) {
      --dash-cols: 3;
    }
  }
  .dashboard-grid--cols-4 {
    --dash-cols: 1;
    @media (min-width: 640px) {
      --dash-cols: 2;
    }
    @media (min-width: 1024px) {
      --dash-cols: 4;
    }
  }
  .dashboard-grid--cols-6 {
    --dash-cols: 1;
    @media (min-width: 640px) {
      --dash-cols: 2;
    }
    @media (min-width: 1024px) {
      --dash-cols: 6;
    }
  }
  .dashboard-grid--cols-12 {
    --dash-cols: 1;
    @media (min-width: 640px) {
      --dash-cols: 4;
    }
    @media (min-width: 1024px) {
      --dash-cols: 12;
    }
  }
  .\!outline-none {
    --tw-outline-style: none !important;
    outline-style: none !important;
  }
  .dashboard-grid--cols-2 {
    --dash-cols: 1;
    @media (min-width: 640px) {
      --dash-cols: 2;
    }
  }
  .list-lg {
    &.panel-list {
      --pl-pad-y: var(--space-list-item-y-lg, 0.75rem);
    }
    & .panel-item {
      --pl-pad-y: var(--space-list-item-y-lg, 0.75rem);
    }
  }
  .list-md {
    &.panel-list {
      --pl-pad-y: var(--space-list-item-y-md, 0.5rem);
    }
    & .panel-item {
      --pl-pad-y: var(--space-list-item-y-md, 0.5rem);
    }
  }
  .list-sm {
    &.panel-list {
      --pl-pad-y: var(--space-list-item-y-sm, 0.375rem);
    }
    & .panel-item {
      --pl-pad-y: var(--space-list-item-y-sm, 0.375rem);
    }
  }
  .list-xl {
    &.panel-list {
      --pl-pad-y: var(--space-list-item-y-xl, 1rem);
    }
    & .panel-item {
      --pl-pad-y: var(--space-list-item-y-xl, 1rem);
    }
  }
  .list-xs {
    &.panel-list {
      --pl-pad-y: var(--space-list-item-y-xs, 0.25rem);
    }
    & .panel-item {
      --pl-pad-y: var(--space-list-item-y-xs, 0.25rem);
    }
  }
  .media--md {
    --media-figure-size: 40px;
    --media-figure-radius: var(--radius-lg);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .stepper-bar--md {
    &.stepper-bar {
      --h-step-bar: 4px;
      --gap-step-bar: 3px;
    }
  }
  .stepper-bar--sm {
    &.stepper-bar {
      --h-step-bar: 3px;
      --gap-step-bar: 2px;
    }
  }
  .\[--column-width\:minmax\(0\,calc\(1280px\/var\(--content-columns\)\)\)\] {
    --column-width: minmax(0,calc(1280px / var(--content-columns)));
  }
  .\[--content-columns\:12\] {
    --content-columns: 12;
  }
  .\[--gutter-columns\:4\] {
    --gutter-columns: 4;
  }
  .\[--modal-pb\:clamp\(16px\,8vh\,64px\)\] {
    --modal-pb: clamp(16px, 8vh, 64px);
  }
  .\[--modal-pt\:16px\] {
    --modal-pt: 16px;
  }
  .\[--scale\:0\.84\] {
    --scale: 0.84;
  }
  .\[--scale\:1\.13\] {
    --scale: 1.13;
  }
  .\[--scale\:1\.365\] {
    --scale: 1.365;
  }
  .\[--stripe-height\:34px\] {
    --stripe-height: 34px;
  }
  .\[animation-delay\:-0\.3s\] {
    animation-delay: -0.3s;
  }
  .\[animation-delay\:-0\.15s\] {
    animation-delay: -0.15s;
  }
  .\[animation-delay\:-120s\] {
    animation-delay: -120s;
  }
  .\[animation-duration\:240s\] {
    animation-duration: 240s;
  }
  .\[stop-color\:var\(--color-fg-quaternary\)\] {
    stop-color: var(--color-fg-quaternary);
  }
  .carousel--evidence {
    & .carousel__slide-overlay {
      background: linear-gradient( 180deg, transparent 0%, var(--alpha-black-70) 100% );
    }
  }
  .carousel--lg {
    --carousel-max-width: 48rem;
  }
  .carousel--md {
    --carousel-max-width: 36rem;
  }
  .carousel--sm {
    --carousel-max-width: 24rem;
  }
  .carousel--vertical {
    --carousel-vertical-height: 20rem;
  }
  .carousel--xs {
    --carousel-max-width: 16rem;
  }
  .dashboard-grid--cols-1 {
    --dash-cols: 1;
  }
  .dashboard-grid--comfortable {
    --dash-gap: 24px;
  }
  .dashboard-grid--compact {
    --dash-gap: 8px;
  }
  .dashboard-grid--gap-0 {
    --dash-gap: 0;
  }
  .dashboard-grid--gap-lg {
    --dash-gap: 24px;
  }
  .dashboard-grid--gap-md {
    --dash-gap: 16px;
  }
  .dashboard-grid--gap-sm {
    --dash-gap: 8px;
  }
  .dashboard-grid--gap-xl {
    --dash-gap: 32px;
  }
  .dashboard-grid--gap-xs {
    --dash-gap: 4px;
  }
  .is-focused {
    & .ss-cmd-item {
      background: var(--ss-accent);
      @supports (color: color-mix(in lab, red, red)) {
        background: color-mix(in srgb, var(--ss-accent) 12%, transparent);
      }
    }
  }
  .list-compact {
    &.panel-list {
      --pl-pad-y: var(--space-list-item-y-compact, 0.375rem);
    }
  }
  .list-relaxed {
    &.panel-list {
      --pl-pad-y: var(--space-list-item-y-relaxed, 0.75rem);
    }
  }
  .panel-list__section {
    .panel-list--sectioned & + & {
      border-top: 1px solid var(--border-list-divider);
    }
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .stepper--gradient {
    & .step-connector-fill {
      background: linear-gradient( 90deg, var(--bg-step-completed) 0%, var(--bg-step-current) 100% );
    }
  }
  .text-shadow-\[0px_0px_48px_rgba\(0\,0\,0\,\.1\)\] {
    text-shadow: 0px 0px 48px var(--tw-text-shadow-color, rgba(0,0,0,.1));
  }
  .\*\:grow {
    :is(& > *) {
      flex-grow: 1;
    }
  }
  .not-group-last\:pb-6 {
    &:not(*:is(:where(.group):last-child *)) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .not-group-last\:pb-8 {
    &:not(*:is(:where(.group):last-child *)) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .not-first\:-mt-px {
    &:not(*:first-child) {
      margin-top: -1px;
    }
  }
  .not-first\:border-t {
    &:not(*:first-child) {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .not-first\:pt-6 {
    &:not(*:first-child) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .not-last\:pr-\[calc\(calc\(var\(--spacing\)\*3\.5\)\+1px\)\] {
    &:not(*:last-child) {
      padding-right: calc(calc(var(--spacing) * 3.5) + 1px);
    }
  }
  .not-last\:pr-\[calc\(calc\(var\(--spacing\)\*4\)\+1px\)\] {
    &:not(*:last-child) {
      padding-right: calc(calc(var(--spacing) * 4) + 1px);
    }
  }
  .not-last\:pr-\[calc\(calc\(var\(--spacing\)\*4\.5\)\+1px\)\] {
    &:not(*:last-child) {
      padding-right: calc(calc(var(--spacing) * 4.5) + 1px);
    }
  }
  .not-focus\:ring-transparent {
    &:not(*:focus) {
      --tw-ring-color: transparent;
    }
  }
  .not-dark\:hidden {
    &:not(*:is(.dark *)) {
      display: none;
    }
  }
  .group-first\:translate-y-1 {
    &:is(:where(.group):first-child *) {
      --tw-translate-y: var(--spacing);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-open\:rotate-180 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 180deg;
    }
  }
  .group-required\:block {
    &:is(:where(.group):required *) {
      display: block;
    }
  }
  .group-invalid\:ring-2 {
    &:is(:where(.group):invalid *) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .group-invalid\:outline-2 {
    &:is(:where(.group):invalid *) {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .group-invalid\:-outline-offset-2 {
    &:is(:where(.group):invalid *) {
      outline-offset: calc(2px * -1);
    }
  }
  .group-invalid\/input\:block {
    &:is(:where(.group\/input):invalid *) {
      display: block;
    }
  }
  .group-invalid\/input\:hidden {
    &:is(:where(.group\/input):invalid *) {
      display: none;
    }
  }
  .group-focus-within\:pointer-events-auto {
    &:is(:where(.group):focus-within *) {
      pointer-events: auto;
    }
  }
  .group-focus-within\:-translate-y-full {
    &:is(:where(.group):focus-within *) {
      --tw-translate-y: -100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-focus-within\:scale-100 {
    &:is(:where(.group):focus-within *) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .group-focus-within\:scale-130 {
    &:is(:where(.group):focus-within *) {
      --tw-scale-x: 130%;
      --tw-scale-y: 130%;
      --tw-scale-z: 130%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .group-focus-within\:scale-\[1\.15\] {
    &:is(:where(.group):focus-within *) {
      scale: 1.15;
    }
  }
  .group-focus-within\:opacity-100 {
    &:is(:where(.group):focus-within *) {
      opacity: 100%;
    }
  }
  .group-focus-within\:ease-out {
    &:is(:where(.group):focus-within *) {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }
  }
  .group-hover\:pointer-events-auto {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        pointer-events: auto;
      }
    }
  }
  .group-hover\:visible {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        visibility: visible;
      }
    }
  }
  .group-hover\:block {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: block;
      }
    }
  }
  .group-hover\:flex {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: flex;
      }
    }
  }
  .group-hover\:flex {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        &.collapse.show {
          display: flex;
        }
      }
    }
  }
  .group-hover\:inline-flex {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: inline-flex;
      }
    }
  }
  .group-hover\:translate-x-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: 0;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:-translate-y-full {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-y: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-130 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 130%;
        --tw-scale-y: 130%;
        --tw-scale-z: 130%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-\[1\.15\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        scale: 1.15;
      }
    }
  }
  .group-hover\:opacity-60 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 60%;
      }
    }
  }
  .group-hover\:opacity-70 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 70%;
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\:ease-out {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out);
      }
    }
  }
  .group-hover\/code-snippet\:opacity-100 {
    &:is(:where(.group\/code-snippet):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/msg\:opacity-100 {
    &:is(:where(.group\/msg):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/progress\:translate-y-0 {
    &:is(:where(.group\/progress):hover *) {
      @media (hover: hover) {
        --tw-translate-y: 0;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\/progress\:opacity-100 {
    &:is(:where(.group\/progress):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/video\:translate-y-0 {
    &:is(:where(.group\/video):hover *) {
      @media (hover: hover) {
        --tw-translate-y: 0;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\/video\:opacity-100 {
    &:is(:where(.group\/video):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/video\:duration-200 {
    &:is(:where(.group\/video):hover *) {
      @media (hover: hover) {
        --tw-duration: 200ms;
        transition-duration: 200ms;
      }
    }
  }
  .group-hover\/video\:ease-out {
    &:is(:where(.group\/video):hover *) {
      @media (hover: hover) {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out);
      }
    }
  }
  .group-focus-visible\:outline-2 {
    &:is(:where(.group):focus-visible *) {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .group-focus-visible\:outline-offset-2 {
    &:is(:where(.group):focus-visible *) {
      outline-offset: 2px;
    }
  }
  .group-focus-visible\/item\:outline-2 {
    &:is(:where(.group\/item):focus-visible *) {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .group-focus-visible\/item\:outline-offset-2 {
    &:is(:where(.group\/item):focus-visible *) {
      outline-offset: 2px;
    }
  }
  .group-active\/play\:scale-\[0\.8\] {
    &:is(:where(.group\/play):active *) {
      scale: 0.8;
    }
  }
  .group-disabled\:cursor-not-allowed {
    &:is(:where(.group):disabled *) {
      cursor: not-allowed;
    }
  }
  .group-disabled\:opacity-50 {
    &:is(:where(.group):disabled *) {
      opacity: 50%;
    }
  }
  .group-has-\[video\:focus-visible\]\/video\:translate-y-0 {
    &:is(:where(.group\/video):has(*:is(video:focus-visible)) *) {
      --tw-translate-y: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .group-has-\[video\:focus-visible\]\/video\:opacity-100 {
    &:is(:where(.group\/video):has(*:is(video:focus-visible)) *) {
      opacity: 100%;
    }
  }
  .group-has-\[video\:focus-visible\]\/video\:duration-200 {
    &:is(:where(.group\/video):has(*:is(video:focus-visible)) *) {
      --tw-duration: 200ms;
      transition-duration: 200ms;
    }
  }
  .group-has-\[video\:focus-visible\]\/video\:ease-out {
    &:is(:where(.group\/video):has(*:is(video:focus-visible)) *) {
      --tw-ease: var(--ease-out);
      transition-timing-function: var(--ease-out);
    }
  }
  .group-has-\[\&\>select\]\:right-0 {
    &:is(:where(.group):has(*>select) *) {
      right: 0;
    }
  }
  .group-has-\[\&\>select\]\:bg-transparent {
    &:is(:where(.group):has(*>select) *) {
      background-color: transparent;
    }
  }
  .group-has-\[\&\>select\]\:pr-6 {
    &:is(:where(.group):has(*>select) *) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .group-has-\[\&\>select\]\:pr-9 {
    &:is(:where(.group):has(*>select) *) {
      padding-right: calc(var(--spacing) * 9);
    }
  }
  .group-has-\[\&\>select\]\:pr-9\.5 {
    &:is(:where(.group):has(*>select) *) {
      padding-right: calc(var(--spacing) * 9.5);
    }
  }
  .group-has-\[\&\>select\]\:pl-0 {
    &:is(:where(.group):has(*>select) *) {
      padding-left: 0;
    }
  }
  .group-has-\[\&\>select\]\:pl-2 {
    &:is(:where(.group):has(*>select) *) {
      padding-left: calc(var(--spacing) * 2);
    }
  }
  .group-has-\[\&\>select\]\:pl-2\.5 {
    &:is(:where(.group):has(*>select) *) {
      padding-left: calc(var(--spacing) * 2.5);
    }
  }
  .group-has-\[\&\>select\]\:pl-3 {
    &:is(:where(.group):has(*>select) *) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .group-has-\[\&\>select\]\:shadow-none {
    &:is(:where(.group):has(*>select) *) {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .group-has-\[\&\>select\]\:ring-0 {
    &:is(:where(.group):has(*>select) *) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .group-aria-expanded\:block {
    &:is(:where(.group)[aria-expanded="true"] *) {
      display: block;
    }
  }
  .group-aria-expanded\:hidden {
    &:is(:where(.group)[aria-expanded="true"] *) {
      display: none;
    }
  }
  .group-aria-expanded\:opacity-0 {
    &:is(:where(.group)[aria-expanded="true"] *) {
      opacity: 0%;
    }
  }
  .group-aria-expanded\:opacity-100 {
    &:is(:where(.group)[aria-expanded="true"] *) {
      opacity: 100%;
    }
  }
  .group-aria-pressed\/field\:inset-2 {
    &:is(:where(.group\/field)[aria-pressed="true"] *) {
      inset: calc(var(--spacing) * 2);
    }
  }
  .placeholder\:text-xs {
    &::placeholder {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
  }
  .placeholder\:text-gray-400 {
    &::placeholder {
      color: #9196a4;
    }
  }
  .before\:pointer-events-none {
    &::before {
      content: var(--tw-content);
      pointer-events: none;
    }
  }
  .before\:absolute {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .before\:inset-0 {
    &::before {
      content: var(--tw-content);
      inset: 0;
    }
  }
  .before\:inset-1 {
    &::before {
      content: var(--tw-content);
      inset: var(--spacing);
    }
  }
  .before\:inset-\[0\.5px\] {
    &::before {
      content: var(--tw-content);
      inset: 0.5px;
    }
  }
  .before\:inset-px {
    &::before {
      content: var(--tw-content);
      inset: 1px;
    }
  }
  .before\:inset-x-0 {
    &::before {
      content: var(--tw-content);
      inset-inline: 0;
    }
  }
  .before\:-top-px {
    &::before {
      content: var(--tw-content);
      top: -1px;
    }
  }
  .before\:top-0 {
    &::before {
      content: var(--tw-content);
      top: 0;
    }
  }
  .before\:bottom-0 {
    &::before {
      content: var(--tw-content);
      bottom: 0;
    }
  }
  .before\:z-1 {
    &::before {
      content: var(--tw-content);
      z-index: 1;
    }
  }
  .before\:z-10 {
    &::before {
      content: var(--tw-content);
      z-index: 10;
    }
  }
  .before\:hidden {
    &::before {
      content: var(--tw-content);
      display: none;
    }
  }
  .before\:size-6 {
    &::before {
      content: var(--tw-content);
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }
  }
  .before\:size-7 {
    &::before {
      content: var(--tw-content);
      width: calc(var(--spacing) * 7);
      height: calc(var(--spacing) * 7);
    }
  }
  .before\:size-8 {
    &::before {
      content: var(--tw-content);
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
    }
  }
  .before\:size-9 {
    &::before {
      content: var(--tw-content);
      width: calc(var(--spacing) * 9);
      height: calc(var(--spacing) * 9);
    }
  }
  .before\:size-full {
    &::before {
      content: var(--tw-content);
      width: 100%;
      height: 100%;
    }
  }
  .before\:h-0\.5 {
    &::before {
      content: var(--tw-content);
      height: calc(var(--spacing) * 0.5);
    }
  }
  .before\:h-px {
    &::before {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .before\:rounded-\[4px\] {
    &::before {
      content: var(--tw-content);
      border-radius: 4px;
    }
  }
  .before\:rounded-\[5px\] {
    &::before {
      content: var(--tw-content);
      border-radius: 5px;
    }
  }
  .before\:rounded-\[6px\] {
    &::before {
      content: var(--tw-content);
      border-radius: 6px;
    }
  }
  .before\:rounded-\[7px\] {
    &::before {
      content: var(--tw-content);
      border-radius: 7px;
    }
  }
  .before\:rounded-\[8px\] {
    &::before {
      content: var(--tw-content);
      border-radius: 8px;
    }
  }
  .before\:rounded-\[9px\] {
    &::before {
      content: var(--tw-content);
      border-radius: 9px;
    }
  }
  .before\:rounded-\[10px\] {
    &::before {
      content: var(--tw-content);
      border-radius: 10px;
    }
  }
  .before\:rounded-\[11px\] {
    &::before {
      content: var(--tw-content);
      border-radius: 11px;
    }
  }
  .before\:rounded-\[inherit\] {
    &::before {
      content: var(--tw-content);
      border-radius: inherit;
    }
  }
  .before\:rounded-full {
    &::before {
      content: var(--tw-content);
      border-radius: var(--radius-full);
    }
  }
  .before\:border {
    &::before {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .before\:border-2 {
    &::before {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 2px;
    }
  }
  .before\:border-\[1\.5px\] {
    &::before {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 1.5px;
    }
  }
  .before\:border-r {
    &::before {
      content: var(--tw-content);
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .before\:border-r-0 {
    &::before {
      content: var(--tw-content);
      border-right-style: var(--tw-border-style);
      border-right-width: 0px;
    }
  }
  .before\:border-b {
    &::before {
      content: var(--tw-content);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .before\:border-b-0 {
    &::before {
      content: var(--tw-content);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .before\:border-l-\[3px\] {
    &::before {
      content: var(--tw-content);
      border-left-style: var(--tw-border-style);
      border-left-width: 3px;
    }
  }
  .before\:border-white\/12 {
    &::before {
      content: var(--tw-content);
      border-color: color-mix(in oklab, #fff 12%, transparent);
    }
  }
  .before\:border-white\/32 {
    &::before {
      content: var(--tw-content);
      border-color: color-mix(in oklab, #fff 32%, transparent);
    }
  }
  .before\:mask-b-from-0\% {
    &::before {
      content: var(--tw-content);
      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
      mask-composite: intersect;
      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
      --tw-mask-bottom-from-position: 0%;
    }
  }
  .before\:mask-linear-135 {
    &::before {
      content: var(--tw-content);
      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
      mask-composite: intersect;
      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
      --tw-mask-linear-position: calc(1deg * 135);
    }
  }
  .before\:mask-linear-to-white\/20 {
    &::before {
      content: var(--tw-content);
      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
      mask-composite: intersect;
      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
      --tw-mask-linear-to-color: color-mix(in oklab, #fff 20%, transparent);
    }
  }
  .before\:mask-\[linear-gradient\(to_bottom\,black_0\%\,transparent_25\%\,transparent_75\%\,black_100\%\)\] {
    &::before {
      content: var(--tw-content);
      mask-image: linear-gradient(to bottom,black 0%,transparent 25%,transparent 75%,black 100%);
    }
  }
  .before\:shadow-\[0px_1px_2px_0px_rgba\(0\,0\,0\,0\.1\)\,0px_3px_3px_0px_rgba\(0\,0\,0\,0\.09\)\,1px_8px_5px_0px_rgba\(0\,0\,0\,0\.05\)\,2px_21px_6px_0px_rgba\(0\,0\,0\,0\)\,0px_0px_0px_1px_rgba\(0\,0\,0\,0\.08\)\,1px_13px_5px_0px_rgba\(0\,0\,0\,0\.01\)\,0px_-2px_2px_0px_rgba\(0\,0\,0\,0\.13\)_inset\] {
    &::before {
      content: var(--tw-content);
      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 3px 3px 0px var(--tw-shadow-color, rgba(0,0,0,0.09)), 1px 8px 5px 0px var(--tw-shadow-color, rgba(0,0,0,0.05)), 2px 21px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0)), 0px 0px 0px 1px var(--tw-shadow-color, rgba(0,0,0,0.08)), 1px 13px 5px 0px var(--tw-shadow-color, rgba(0,0,0,0.01)), 0px -2px 2px 0px var(--tw-shadow-color, rgba(0,0,0,0.13)) inset;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .before\:ring-1 {
    &::before {
      content: var(--tw-content);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .before\:ring-\[0\.5px\] {
    &::before {
      content: var(--tw-content);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0.5px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .before\:ring-black\/10 {
    &::before {
      content: var(--tw-content);
      --tw-ring-color: color-mix(in oklab, #000 10%, transparent);
    }
  }
  .before\:ring-white\/30 {
    &::before {
      content: var(--tw-content);
      --tw-ring-color: color-mix(in oklab, #fff 30%, transparent);
    }
  }
  .before\:ring-inset {
    &::before {
      content: var(--tw-content);
      --tw-ring-inset: inset;
    }
  }
  .not-last\:before\:border-r {
    &:not(*:last-child) {
      &::before {
        content: var(--tw-content);
        border-right-style: var(--tw-border-style);
        border-right-width: 1px;
      }
    }
  }
  .after\:pointer-events-none {
    &::after {
      content: var(--tw-content);
      pointer-events: none;
    }
  }
  .after\:absolute {
    &::after {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .after\:inset-0 {
    &::after {
      content: var(--tw-content);
      inset: 0;
    }
  }
  .after\:-inset-x-1\.5 {
    &::after {
      content: var(--tw-content);
      inset-inline: calc(var(--spacing) * -1.5);
    }
  }
  .after\:-inset-x-2 {
    &::after {
      content: var(--tw-content);
      inset-inline: calc(var(--spacing) * -2);
    }
  }
  .after\:inset-x-0 {
    &::after {
      content: var(--tw-content);
      inset-inline: 0;
    }
  }
  .after\:-inset-y-2 {
    &::after {
      content: var(--tw-content);
      inset-block: calc(var(--spacing) * -2);
    }
  }
  .after\:-inset-y-3 {
    &::after {
      content: var(--tw-content);
      inset-block: calc(var(--spacing) * -3);
    }
  }
  .after\:bottom-0 {
    &::after {
      content: var(--tw-content);
      bottom: 0;
    }
  }
  .after\:left-0 {
    &::after {
      content: var(--tw-content);
      left: 0;
    }
  }
  .after\:block {
    &::after {
      content: var(--tw-content);
      display: block;
    }
  }
  .after\:hidden {
    &::after {
      content: var(--tw-content);
      display: none;
    }
  }
  .after\:size-6 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }
  }
  .after\:size-7 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 7);
      height: calc(var(--spacing) * 7);
    }
  }
  .after\:size-8 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
    }
  }
  .after\:size-8\.5 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 8.5);
      height: calc(var(--spacing) * 8.5);
    }
  }
  .after\:size-9\.5 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 9.5);
      height: calc(var(--spacing) * 9.5);
    }
  }
  .after\:size-10 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 10);
      height: calc(var(--spacing) * 10);
    }
  }
  .after\:size-10\.5 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 10.5);
      height: calc(var(--spacing) * 10.5);
    }
  }
  .after\:size-11\.5 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 11.5);
      height: calc(var(--spacing) * 11.5);
    }
  }
  .after\:h-px {
    &::after {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .after\:w-full {
    &::after {
      content: var(--tw-content);
      width: 100%;
    }
  }
  .after\:-translate-x-full {
    &::after {
      content: var(--tw-content);
      --tw-translate-x: -100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .after\:translate-x-full {
    &::after {
      content: var(--tw-content);
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .after\:rounded-full {
    &::after {
      content: var(--tw-content);
      border-radius: var(--radius-full);
    }
  }
  .after\:border-2 {
    &::after {
      content: var(--tw-content);
      border-style: var(--tw-border-style);
      border-width: 2px;
    }
  }
  .after\:border-t {
    &::after {
      content: var(--tw-content);
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .after\:border-r {
    &::after {
      content: var(--tw-content);
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .after\:border-b {
    &::after {
      content: var(--tw-content);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .after\:bg-gradient-to-l {
    &::after {
      content: var(--tw-content);
      --tw-gradient-position: to left in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
    }
  }
  .after\:bg-gradient-to-r {
    &::after {
      content: var(--tw-content);
      --tw-gradient-position: to right in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops));
    }
  }
  .after\:from-transparent {
    &::after {
      content: var(--tw-content);
      --tw-gradient-from: transparent;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .first\:mt-0 {
    &:first-child {
      margin-top: 0;
    }
  }
  .first\:ml-0 {
    &:first-child {
      margin-left: 0;
    }
  }
  .first\:rounded-l-lg {
    &:first-child {
      border-top-left-radius: var(--radius-lg);
      border-bottom-left-radius: var(--radius-lg);
    }
  }
  .first\:border-t-0 {
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .\*\:first\:mt-auto {
    :is(& > *) {
      &:first-child {
        margin-top: auto;
      }
    }
  }
  .first\:before\:pointer-events-none {
    &:first-child {
      &::before {
        content: var(--tw-content);
        pointer-events: none;
      }
    }
  }
  .first\:before\:absolute {
    &:first-child {
      &::before {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .first\:before\:-left-px {
    &:first-child {
      &::before {
        content: var(--tw-content);
        left: -1px;
      }
    }
  }
  .first\:before\:float-left {
    &:first-child {
      &::before {
        content: var(--tw-content);
        float: left;
      }
    }
  }
  .first\:before\:border-l {
    &:first-child {
      &::before {
        content: var(--tw-content);
        border-left-style: var(--tw-border-style);
        border-left-width: 1px;
      }
    }
  }
  .first\:before\:content-\[attr\(data-placeholder\)\] {
    &:first-child {
      &::before {
        --tw-content: attr(data-placeholder);
        content: var(--tw-content);
      }
    }
  }
  .last\:mr-2 {
    &:last-child {
      margin-right: calc(var(--spacing) * 2);
    }
  }
  .last\:mb-0 {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .last\:flex {
    &:last-child {
      display: flex;
    }
  }
  .last\:flex {
    &:last-child {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .last\:hidden {
    &:last-child {
      display: none;
    }
  }
  .last\:rounded-r-lg {
    &:last-child {
      border-top-right-radius: var(--radius-lg);
      border-bottom-right-radius: var(--radius-lg);
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .last\:border-none {
    &:last-child {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .last\:border-transparent {
    &:last-child {
      border-color: transparent;
    }
  }
  .last\:before\:border-b-0 {
    &:last-child {
      &::before {
        content: var(--tw-content);
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0px;
      }
    }
  }
  .last-of-type\:pb-0 {
    &:last-of-type {
      padding-bottom: 0;
    }
  }
  .autofill\:rounded-lg {
    &:autofill {
      border-radius: var(--radius-lg);
    }
  }
  .autofill\:rounded-t-none {
    &:autofill {
      border-top-left-radius: var(--radius-none);
      border-top-right-radius: var(--radius-none);
    }
  }
  .autofill\:rounded-b-none {
    &:autofill {
      border-bottom-right-radius: var(--radius-none);
      border-bottom-left-radius: var(--radius-none);
    }
  }
  .autofill\:text-primary {
    &:autofill {
      color: var(--text-primary) !important;
    }
  }
  .focus-within\:z-10 {
    &:focus-within {
      z-index: 10;
    }
  }
  .focus-within\:ring-2 {
    &:focus-within {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .group-has-\[\&\>select\]\:focus-within\:ring-0 {
    &:is(:where(.group):has(*>select) *) {
      &:focus-within {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-110 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:cursor-pointer {
    &:hover {
      @media (hover: hover) {
        cursor: pointer;
      }
    }
  }
  .hover\:border-gray-100 {
    &:hover {
      @media (hover: hover) {
        border-color: #f1f3f5;
      }
    }
  }
  .hover\:border-gray-500\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #5c5f6b 40%, transparent);
      }
    }
  }
  .hover\:border-white\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #fff 40%, transparent);
      }
    }
  }
  .hover\:bg-\[\#0C63D4\] {
    &:hover {
      @media (hover: hover) {
        background-color: #0C63D4;
      }
    }
  }
  .hover\:bg-\[\#E62872\] {
    &:hover {
      @media (hover: hover) {
        background-color: #E62872;
      }
    }
  }
  .hover\:bg-\[color\:var\(--bg-secondary\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--bg-secondary);
      }
    }
  }
  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: #f9fafb;
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: #f1f3f5;
      }
    }
  }
  .hover\:bg-gray-200\/40 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #dee1e6 40%, transparent);
      }
    }
  }
  .hover\:bg-gray-300\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #c3c7d0 80%, transparent);
      }
    }
  }
  .hover\:bg-gray-900 {
    &:hover {
      @media (hover: hover) {
        background-color: #23242c;
      }
    }
  }
  .hover\:bg-white\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #fff 10%, transparent);
      }
    }
  }
  .hover\:bg-white\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #fff 20%, transparent);
      }
    }
  }
  .hover\:font-medium\! {
    &:hover {
      @media (hover: hover) {
        --tw-font-weight: var(--font-weight-medium) !important;
        font-weight: var(--font-weight-medium) !important;
      }
    }
  }
  .hover\:text-gray-800 {
    &:hover {
      @media (hover: hover) {
        color: #2f3038;
      }
    }
  }
  .hover\:text-secondary {
    &:hover {
      @media (hover: hover) {
        color: var(--text-secondary) !important;
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: #fff;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-80 {
    &:hover {
      @media (hover: hover) {
        opacity: 80%;
      }
    }
  }
  .hover\:opacity-90 {
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-2xl {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-none {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:ring-white\/40 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: color-mix(in oklab, #fff 40%, transparent);
      }
    }
  }
  .hover\:backdrop-blur-sm {
    &:hover {
      @media (hover: hover) {
        --tw-backdrop-blur: blur(var(--blur-sm));
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:absolute {
    &:focus {
      position: absolute;
    }
  }
  .focus\:top-2 {
    &:focus {
      top: calc(var(--spacing) * 2);
    }
  }
  .focus\:left-2 {
    &:focus {
      left: calc(var(--spacing) * 2);
    }
  }
  .focus\:z-10 {
    &:focus {
      z-index: 10;
    }
  }
  .focus\:z-\[9999\] {
    &:focus {
      z-index: 9999;
    }
  }
  .focus\:z-\[var\(--z-command\)\] {
    &:focus {
      z-index: var(--z-command);
    }
  }
  .focus\:rounded-md {
    &:focus {
      border-radius: var(--radius-md);
    }
  }
  .focus\:border-blue-500 {
    &:focus {
      border-color: #2f6fe4;
    }
  }
  .focus\:border-gray-100 {
    &:focus {
      border-color: #f1f3f5;
    }
  }
  .focus\:bg-white {
    &:focus {
      background-color: #fff;
    }
  }
  .focus\:px-4 {
    &:focus {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .focus\:py-2 {
    &:focus {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .focus\:text-sm {
    &:focus {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
    }
  }
  .focus\:font-medium {
    &:focus {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
  }
  .focus\:text-white {
    &:focus {
      color: #fff;
    }
  }
  .focus\:shadow-sm {
    &:focus {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-0 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-3 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:outline-hidden {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .focus\:outline-2 {
    &:focus {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .focus\:outline-offset-2 {
    &:focus {
      outline-offset: 2px;
    }
  }
  .focus\:outline-offset-4 {
    &:focus {
      outline-offset: 4px;
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:z-1 {
    &:focus-visible {
      z-index: 1;
    }
  }
  .focus-visible\:z-10 {
    &:focus-visible {
      z-index: 10;
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-offset-\[-2px\] {
    &:focus-visible {
      --tw-ring-offset-width: -2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus-visible\:outline-hidden {
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
    }
  }
  .focus-visible\:outline-2 {
    &:focus-visible {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .focus-visible\:-outline-offset-2 {
    &:focus-visible {
      outline-offset: calc(2px * -1);
    }
  }
  .focus-visible\:outline-offset-2 {
    &:focus-visible {
      outline-offset: 2px;
    }
  }
  .focus-visible\:outline-offset-4 {
    &:focus-visible {
      outline-offset: 4px;
    }
  }
  .focus-visible\:outline-white {
    &:focus-visible {
      outline-color: #fff;
    }
  }
  .focus-visible\:ring-inset {
    &:focus-visible {
      --tw-ring-inset: inset;
    }
  }
  .active\:cursor-grabbing {
    &:active {
      cursor: grabbing;
    }
  }
  .active\:bg-black {
    &:active {
      background-color: #000;
    }
  }
  .active\:bg-gray-200 {
    &:active {
      background-color: #dee1e6;
    }
  }
  .active\:bg-gray-300 {
    &:active {
      background-color: #c3c7d0;
    }
  }
  .active\:bg-gray-300\/40 {
    &:active {
      background-color: color-mix(in oklab, #c3c7d0 40%, transparent);
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:border-gray-200 {
    &:disabled {
      border-color: #dee1e6;
    }
  }
  .disabled\:text-disabled {
    &:disabled {
      color: var(--text-disabled) !important;
    }
  }
  .disabled\:text-gray-200 {
    &:disabled {
      color: #dee1e6;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .disabled\:shadow-xs {
    &:disabled {
      --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.03));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .disabled\:\*\:opacity-50 {
    &:disabled {
      :is(& > *) {
        opacity: 50%;
      }
    }
  }
  .disabled\:placeholder\:text-disabled {
    &:disabled {
      &::placeholder {
        color: var(--text-disabled) !important;
      }
    }
  }
  .in-open\:-scale-y-100 {
    :where(*:is([open], :popover-open, :open)) & {
      --tw-scale-y: calc(100% * -1);
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .in-aria-expanded\:-rotate-180 {
    :where(*[aria-expanded="true"]) & {
      rotate: calc(180deg * -1);
    }
  }
  .in-data-input-wrapper\:right-0 {
    :where(*[data-input-wrapper]) & {
      right: 0;
    }
  }
  .in-data-input-wrapper\:flex {
    :where(*[data-input-wrapper]) & {
      display: flex;
    }
  }
  .in-data-input-wrapper\:flex {
    :where(*[data-input-wrapper]) & {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .in-data-input-wrapper\:size-4 {
    :where(*[data-input-wrapper]) & {
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
    }
  }
  .in-data-input-wrapper\:h-full {
    :where(*[data-input-wrapper]) & {
      height: 100%;
    }
  }
  .in-data-input-wrapper\:w-max {
    :where(*[data-input-wrapper]) & {
      width: max-content;
    }
  }
  .in-data-input-wrapper\:gap-1 {
    :where(*[data-input-wrapper]) & {
      gap: var(--spacing);
    }
  }
  .in-data-input-wrapper\:gap-1\.5 {
    :where(*[data-input-wrapper]) & {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .in-data-input-wrapper\:bg-inherit {
    :where(*[data-input-wrapper]) & {
      background-color: inherit;
    }
  }
  .in-data-input-wrapper\:stroke-\[2\.625px\] {
    :where(*[data-input-wrapper]) & {
      stroke-width: 2.625px;
    }
  }
  .in-data-input-wrapper\:px-3 {
    :where(*[data-input-wrapper]) & {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .in-data-input-wrapper\:px-3\.5 {
    :where(*[data-input-wrapper]) & {
      padding-inline: calc(var(--spacing) * 3.5);
    }
  }
  .in-data-input-wrapper\:px-4 {
    :where(*[data-input-wrapper]) & {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .in-data-input-wrapper\:py-2 {
    :where(*[data-input-wrapper]) & {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .in-data-input-wrapper\:py-2\.5 {
    :where(*[data-input-wrapper]) & {
      padding-block: calc(var(--spacing) * 2.5);
    }
  }
  .in-data-input-wrapper\:text-md {
    :where(*[data-input-wrapper]) & {
      font-size: 0.875rem;
      line-height: var(--tw-leading, 1.375rem);
    }
  }
  .in-data-input-wrapper\:font-normal {
    :where(*[data-input-wrapper]) & {
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
    }
  }
  .in-data-input-wrapper\:opacity-100 {
    :where(*[data-input-wrapper]) & {
      opacity: 100%;
    }
  }
  .in-data-input-wrapper\:shadow-none {
    :where(*[data-input-wrapper]) & {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .in-data-input-wrapper\:shadow-xs {
    :where(*[data-input-wrapper]) & {
      --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.03));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .in-data-input-wrapper\:ring-transparent {
    :where(*[data-input-wrapper]) & {
      --tw-ring-color: transparent;
    }
  }
  .in-data-input-wrapper\:group-disabled\:pointer-events-none {
    :where(*[data-input-wrapper]) & {
      &:is(:where(.group):disabled *) {
        pointer-events: none;
      }
    }
  }
  .in-data-input-wrapper\:group-disabled\:cursor-not-allowed {
    :where(*[data-input-wrapper]) & {
      &:is(:where(.group):disabled *) {
        cursor: not-allowed;
      }
    }
  }
  .in-data-input-wrapper\:group-disabled\:bg-transparent {
    :where(*[data-input-wrapper]) & {
      &:is(:where(.group):disabled *) {
        background-color: transparent;
      }
    }
  }
  .in-data-input-wrapper\:group-disabled\:opacity-100 {
    :where(*[data-input-wrapper]) & {
      &:is(:where(.group):disabled *) {
        opacity: 100%;
      }
    }
  }
  .in-data-input-wrapper\:focus\:\!z-50 {
    :where(*[data-input-wrapper]) & {
      &:focus {
        z-index: 50 !important;
      }
    }
  }
  .in-data-input-wrapper\:disabled\:opacity-100 {
    :where(*[data-input-wrapper]) & {
      &:disabled {
        opacity: 100%;
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:-mr-px {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        margin-right: -1px;
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:rounded-l-lg {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        border-top-left-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg);
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:rounded-r-none {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        border-top-right-radius: var(--radius-none);
        border-bottom-right-radius: var(--radius-none);
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:pr-4\.5 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        padding-right: calc(var(--spacing) * 4.5);
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:before\:rounded-r-none {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        &::before {
          content: var(--tw-content);
          border-top-right-radius: var(--radius-none);
          border-bottom-right-radius: var(--radius-none);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:-ml-px {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        margin-left: -1px;
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:rounded-l-none {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        border-top-left-radius: var(--radius-none);
        border-bottom-left-radius: var(--radius-none);
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:rounded-r-lg {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        border-top-right-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:before\:rounded-l-none {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        &::before {
          content: var(--tw-content);
          border-top-left-radius: var(--radius-none);
          border-bottom-left-radius: var(--radius-none);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-\[input-size\=lg\]\:py-2\.5 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-input-size="lg"]) & {
        padding-block: calc(var(--spacing) * 2.5);
      }
    }
  }
  .in-data-input-wrapper\:in-data-\[input-size\=lg\]\:pr-3 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-input-size="lg"]) & {
        padding-right: calc(var(--spacing) * 3);
      }
    }
  }
  .in-data-input-wrapper\:in-data-\[input-size\=lg\]\:pl-3\.5 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-input-size="lg"]) & {
        padding-left: calc(var(--spacing) * 3.5);
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:in-data-\[input-size\=lg\]\:pl-3\.5 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        :where(*[data-input-size="lg"]) & {
          padding-left: calc(var(--spacing) * 3.5);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:in-data-\[input-size\=lg\]\:pr-8 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        :where(*[data-input-size="lg"]) & {
          padding-right: calc(var(--spacing) * 8);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-\[input-size\=md\]\:py-2 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-input-size="md"]) & {
        padding-block: calc(var(--spacing) * 2);
      }
    }
  }
  .in-data-input-wrapper\:in-data-\[input-size\=md\]\:pl-3 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-input-size="md"]) & {
        padding-left: calc(var(--spacing) * 3);
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:in-data-\[input-size\=md\]\:pr-4\.5 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        :where(*[data-input-size="md"]) & {
          padding-right: calc(var(--spacing) * 4.5);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:in-data-\[input-size\=md\]\:pl-3 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        :where(*[data-input-size="md"]) & {
          padding-left: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:in-data-\[input-size\=md\]\:right-3 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        :where(*[data-input-size="md"]) & {
          right: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:in-data-\[input-size\=md\]\:pr-7\.5 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        :where(*[data-input-size="md"]) & {
          padding-right: calc(var(--spacing) * 7.5);
        }
      }
    }
  }
  .in-data-\[input-size\=sm\]\:text-xs {
    :where(*[data-input-size="sm"]) & {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
  }
  .in-data-input-wrapper\:in-data-\[input-size\=sm\]\:px-3 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-input-size="sm"]) & {
        padding-inline: calc(var(--spacing) * 3);
      }
    }
  }
  .in-data-input-wrapper\:in-data-\[input-size\=sm\]\:py-2 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-input-size="sm"]) & {
        padding-block: calc(var(--spacing) * 2);
      }
    }
  }
  .in-data-input-wrapper\:in-data-\[input-size\=sm\]\:text-sm {
    :where(*[data-input-wrapper]) & {
      :where(*[data-input-size="sm"]) & {
        font-size: 0.8125rem;
        line-height: var(--tw-leading, 1.25rem);
      }
    }
  }
  .in-data-input-wrapper\:in-data-leading\:in-data-\[input-size\=sm\]\:pr-3\.5 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-leading]) & {
        :where(*[data-input-size="sm"]) & {
          padding-right: calc(var(--spacing) * 3.5);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:in-data-\[input-size\=sm\]\:right-3 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        :where(*[data-input-size="sm"]) & {
          right: calc(var(--spacing) * 3);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-trailing\:in-data-\[input-size\=sm\]\:pr-6\.5 {
    :where(*[data-input-wrapper]) & {
      :where(*[data-trailing]) & {
        :where(*[data-input-size="sm"]) & {
          padding-right: calc(var(--spacing) * 6.5);
        }
      }
    }
  }
  .in-data-input-wrapper\:in-data-\[size\=sm\]\:text-sm {
    :where(*[data-input-wrapper]) & {
      :where(*[data-size="sm"]) & {
        font-size: 0.8125rem;
        line-height: var(--tw-leading, 1.25rem);
      }
    }
  }
  .in-\[\[role\=gridcell\]\:first-child\]\:after\:hidden {
    :where(*:is([role=gridcell]:first-child)) & {
      &::after {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .in-\[\[role\=gridcell\]\:last-child\]\:after\:hidden {
    :where(*:is([role=gridcell]:last-child)) & {
      &::after {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .has-\[\:focus-visible\]\:opacity-100 {
    &:has(*:is(:focus-visible)) {
      opacity: 100%;
    }
  }
  .has-\[video\:focus-visible\]\:outline-2 {
    &:has(*:is(video:focus-visible)) {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .has-\[video\:focus-visible\]\:outline-offset-4 {
    &:has(*:is(video:focus-visible)) {
      outline-offset: 4px;
    }
  }
  .has-\[\&\>select\]\:shadow-xs {
    &:has(*>select) {
      --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.03));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .has-\[\&\>select\]\:ring-1 {
    &:has(*>select) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .has-\[\&\>select\]\:ring-inset {
    &:has(*>select) {
      --tw-ring-inset: inset;
    }
  }
  .has-\[\&\>select\]\:has-\[input\:focus\]\:ring-2 {
    &:has(*>select) {
      &:has(*:is(input:focus)) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .\*\*\:data-avatar\:rounded-none {
    :is(& *) {
      &[data-avatar] {
        border-radius: var(--radius-none);
      }
    }
  }
  .\*\*\:data-avatar\:bg-transparent {
    :is(& *) {
      &[data-avatar] {
        background-color: transparent;
      }
    }
  }
  .\*\*\:data-avatar\:outline-hidden {
    :is(& *) {
      &[data-avatar] {
        --tw-outline-style: none;
        outline-style: none;
        @media (forced-colors: active) {
          outline: 2px solid transparent;
          outline-offset: 2px;
        }
      }
    }
  }
  .\*\*\:data-avatar-img\:rounded-none {
    :is(& *) {
      &[data-avatar-img] {
        border-radius: var(--radius-none);
      }
    }
  }
  .\*\*\:data-featured-icon\:hidden {
    :is(& *) {
      &[data-featured-icon] {
        display: none;
      }
    }
  }
  .\*\:data-icon\:pointer-events-none {
    :is(& > *) {
      &[data-icon] {
        pointer-events: none;
      }
    }
  }
  .\*\:data-icon\:size-4 {
    :is(& > *) {
      &[data-icon] {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4);
      }
    }
  }
  .\*\:data-icon\:size-5 {
    :is(& > *) {
      &[data-icon] {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
      }
    }
  }
  .\*\:data-icon\:size-6 {
    :is(& > *) {
      &[data-icon] {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
      }
    }
  }
  .\*\:data-icon\:size-7 {
    :is(& > *) {
      &[data-icon] {
        width: calc(var(--spacing) * 7);
        height: calc(var(--spacing) * 7);
      }
    }
  }
  .\*\:data-icon\:shrink-0 {
    :is(& > *) {
      &[data-icon] {
        flex-shrink: 0;
      }
    }
  }
  .\*\:data-icon\:stroke-\[2\.25px\] {
    :is(& > *) {
      &[data-icon] {
        stroke-width: 2.25px;
      }
    }
  }
  .\*\:data-icon\:stroke-\[2\.25px\]\! {
    :is(& > *) {
      &[data-icon] {
        stroke-width: 2.25px !important;
      }
    }
  }
  .\*\:data-icon\:text-current {
    :is(& > *) {
      &[data-icon] {
        color: currentcolor;
      }
    }
  }
  .\*\:data-icon\:text-white\/60 {
    :is(& > *) {
      &[data-icon] {
        color: color-mix(in oklab, #fff 60%, transparent);
      }
    }
  }
  .hover\:\*\:data-icon\:text-white\/70 {
    &:hover {
      @media (hover: hover) {
        :is(& > *) {
          &[data-icon] {
            color: color-mix(in oklab, #fff 70%, transparent);
          }
        }
      }
    }
  }
  .data-icon-leading\:pl-3 {
    &[data-icon-leading] {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .data-icon-leading\:pl-3\.5 {
    &[data-icon-leading] {
      padding-left: calc(var(--spacing) * 3.5);
    }
  }
  .data-icon-leading\:pl-4 {
    &[data-icon-leading] {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .data-icon-only\:p-2 {
    &[data-icon-only] {
      padding: calc(var(--spacing) * 2);
    }
  }
  .data-icon-only\:p-2\.5 {
    &[data-icon-only] {
      padding: calc(var(--spacing) * 2.5);
    }
  }
  .data-icon-only\:p-3 {
    &[data-icon-only] {
      padding: calc(var(--spacing) * 3);
    }
  }
  .data-icon-only\:p-3\.5 {
    &[data-icon-only] {
      padding: calc(var(--spacing) * 3.5);
    }
  }
  .data-icon-only\:px-2\.5 {
    &[data-icon-only] {
      padding-inline: calc(var(--spacing) * 2.5);
    }
  }
  .data-icon-only\:px-3 {
    &[data-icon-only] {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .data-icon-only\:px-3\.5 {
    &[data-icon-only] {
      padding-inline: calc(var(--spacing) * 3.5);
    }
  }
  .in-data-input-wrapper\:data-icon-only\:p-2\.5 {
    :where(*[data-input-wrapper]) & {
      &[data-icon-only] {
        padding: calc(var(--spacing) * 2.5);
      }
    }
  }
  .in-data-input-wrapper\:data-icon-only\:p-3 {
    :where(*[data-input-wrapper]) & {
      &[data-icon-only] {
        padding: calc(var(--spacing) * 3);
      }
    }
  }
  .\*\:data-text\:underline {
    :is(& > *) {
      &[data-text] {
        text-decoration-line: underline;
      }
    }
  }
  .\*\:data-text\:decoration-transparent {
    :is(& > *) {
      &[data-text] {
        text-decoration-color: transparent;
      }
    }
  }
  .\*\:data-text\:underline-offset-2 {
    :is(& > *) {
      &[data-text] {
        text-underline-offset: 2px;
      }
    }
  }
  .\*\:data-text\:underline-offset-3 {
    :is(& > *) {
      &[data-text] {
        text-underline-offset: 3px;
      }
    }
  }
  .\*\:data-text\:underline-offset-4 {
    :is(& > *) {
      &[data-text] {
        text-underline-offset: 4px;
      }
    }
  }
  .hover\:\*\:data-text\:decoration-current {
    &:hover {
      @media (hover: hover) {
        :is(& > *) {
          &[data-text] {
            text-decoration-color: currentcolor;
          }
        }
      }
    }
  }
  .nth-2\:pl-3 {
    &:nth-child(2) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .nth-\[n\+4\]\:hidden {
    &:nth-child(n+4) {
      display: none;
    }
  }
  .nth-\[n\+6\]\:hidden {
    &:nth-child(n+6) {
      display: none;
    }
  }
  .nth-\[n\+7\]\:hidden {
    &:nth-child(n+7) {
      display: none;
    }
  }
  .motion-reduce\:-translate-x-1\/2 {
    @media (prefers-reduced-motion: reduce) {
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .motion-reduce\:animate-none {
    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
  .max-\[400px\]\:size-max {
    @media (width < 400px) {
      width: max-content;
      height: max-content;
    }
  }
  .max-xl\:hidden {
    @media (width < 80rem) {
      display: none;
    }
  }
  .max-xl\:gap-2 {
    @media (width < 80rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .max-xl\:rounded-t-2xl {
    @media (width < 80rem) {
      border-top-left-radius: var(--radius-2xl);
      border-top-right-radius: var(--radius-2xl);
    }
  }
  .max-lg\:order-1 {
    @media (width < 64rem) {
      order: 1;
    }
  }
  .max-lg\:order-last {
    @media (width < 64rem) {
      order: 9999;
    }
  }
  .max-lg\:-mx-4 {
    @media (width < 64rem) {
      margin-inline: calc(var(--spacing) * -4);
    }
  }
  .max-lg\:mr-auto {
    @media (width < 64rem) {
      margin-right: auto;
    }
  }
  .max-lg\:mb-6 {
    @media (width < 64rem) {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  .max-lg\:hidden {
    @media (width < 64rem) {
      display: none;
    }
  }
  .max-lg\:h-dvh {
    @media (width < 64rem) {
      height: 100dvh;
    }
  }
  .max-lg\:max-h-full {
    @media (width < 64rem) {
      max-height: 100%;
    }
  }
  .max-lg\:min-h-0 {
    @media (width < 64rem) {
      min-height: 0;
    }
  }
  .max-lg\:w-full {
    @media (width < 64rem) {
      width: 100%;
    }
  }
  .max-lg\:min-w-80 {
    @media (width < 64rem) {
      min-width: calc(var(--spacing) * 80);
    }
  }
  .max-lg\:min-w-full {
    @media (width < 64rem) {
      min-width: 100%;
    }
  }
  .max-lg\:flex-1 {
    @media (width < 64rem) {
      flex: 1;
    }
  }
  .max-lg\:gap-2 {
    @media (width < 64rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .max-lg\:gap-6 {
    @media (width < 64rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .max-lg\:rounded-none {
    @media (width < 64rem) {
      border-radius: var(--radius-none);
    }
  }
  .max-lg\:border-b {
    @media (width < 64rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .max-lg\:p-4 {
    @media (width < 64rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .max-lg\:px-4 {
    @media (width < 64rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .max-lg\:pb-6 {
    @media (width < 64rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .max-lg\:shadow-none {
    @media (width < 64rem) {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .max-lg\:ring-0 {
    @media (width < 64rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .max-lg\:\*\*\:data-featured-icon\:hidden {
    @media (width < 64rem) {
      :is(& *) {
        &[data-featured-icon] {
          display: none;
        }
      }
    }
  }
  .max-md\:hidden {
    @media (width < 48rem) {
      display: none;
    }
  }
  .max-md\:min-h-22 {
    @media (width < 48rem) {
      min-height: calc(var(--spacing) * 22);
    }
  }
  .max-md\:w-full {
    @media (width < 48rem) {
      width: 100%;
    }
  }
  .max-md\:flex-1 {
    @media (width < 48rem) {
      flex: 1;
    }
  }
  .max-md\:flex-col {
    @media (width < 48rem) {
      flex-direction: column;
    }
  }
  .max-md\:gap-2 {
    @media (width < 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .max-md\:bg-transparent {
    @media (width < 48rem) {
      background-color: transparent;
    }
  }
  .max-md\:p-4 {
    @media (width < 48rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .max-md\:pl-1 {
    @media (width < 48rem) {
      padding-left: var(--spacing);
    }
  }
  .max-md\:pl-4 {
    @media (width < 48rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .max-md\:ring-0 {
    @media (width < 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .max-md\:ring-1 {
    @media (width < 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .max-md\:backdrop-blur-none {
    @media (width < 48rem) {
      --tw-backdrop-blur:  ;
      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    }
  }
  .max-md\:\*\*\:data-label\:hidden {
    @media (width < 48rem) {
      :is(& *) {
        &[data-label] {
          display: none;
        }
      }
    }
  }
  .max-sm\:col-span-2 {
    @media (width < 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .max-sm\:hidden {
    @media (width < 40rem) {
      display: none;
    }
  }
  .max-sm\:h-max {
    @media (width < 40rem) {
      height: max-content;
    }
  }
  .max-sm\:flex-1 {
    @media (width < 40rem) {
      flex: 1;
    }
  }
  .max-sm\:flex-col {
    @media (width < 40rem) {
      flex-direction: column;
    }
  }
  .max-sm\:overflow-y-auto {
    @media (width < 40rem) {
      overflow-y: auto;
    }
  }
  .max-sm\:rounded-xl {
    @media (width < 40rem) {
      border-radius: var(--radius-xl);
    }
  }
  .max-sm\:px-3\.5 {
    @media (width < 40rem) {
      padding-inline: calc(var(--spacing) * 3.5);
    }
  }
  .max-sm\:py-2\.5 {
    @media (width < 40rem) {
      padding-block: calc(var(--spacing) * 2.5);
    }
  }
  .max-sm\:font-medium {
    @media (width < 40rem) {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
  }
  .\*\:max-sm\:grow {
    :is(& > *) {
      @media (width < 40rem) {
        flex-grow: 1;
      }
    }
  }
  .sm\:relative {
    @media (width >= 40rem) {
      position: relative;
    }
  }
  .sm\:end-4 {
    @media (width >= 40rem) {
      inset-inline-end: calc(var(--spacing) * 4);
    }
  }
  .sm\:top-4 {
    @media (width >= 40rem) {
      top: calc(var(--spacing) * 4);
    }
  }
  .sm\:top-12 {
    @media (width >= 40rem) {
      top: calc(var(--spacing) * 12);
    }
  }
  .sm\:top-16 {
    @media (width >= 40rem) {
      top: calc(var(--spacing) * 16);
    }
  }
  .sm\:top-28 {
    @media (width >= 40rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .sm\:-right-1\/3 {
    @media (width >= 40rem) {
      right: calc(calc(1 / 3 * 100%) * -1);
    }
  }
  .sm\:right-4 {
    @media (width >= 40rem) {
      right: calc(var(--spacing) * 4);
    }
  }
  .sm\:order-2 {
    @media (width >= 40rem) {
      order: 2;
    }
  }
  .sm\:order-3 {
    @media (width >= 40rem) {
      order: 3;
    }
  }
  .sm\:col-span-1 {
    @media (width >= 40rem) {
      grid-column: span 1 / span 1;
    }
  }
  .sm\:col-span-2 {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .sm\:mx-0 {
    @media (width >= 40rem) {
      margin-inline: 0;
    }
  }
  .sm\:mx-auto {
    @media (width >= 40rem) {
      margin-inline: auto;
    }
  }
  .sm\:mt-0 {
    @media (width >= 40rem) {
      margin-top: 0;
    }
  }
  .sm\:mt-8 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .sm\:mt-12 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .sm\:mr-0 {
    @media (width >= 40rem) {
      margin-right: 0;
    }
  }
  .sm\:ml-auto {
    @media (width >= 40rem) {
      margin-left: auto;
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .sm\:grid {
    @media (width >= 40rem) {
      display: grid;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:inline-block {
    @media (width >= 40rem) {
      display: inline-block;
    }
  }
  .sm\:inline-flex {
    @media (width >= 40rem) {
      display: inline-flex;
    }
  }
  .sm\:aspect-video {
    @media (width >= 40rem) {
      aspect-ratio: var(--aspect-video);
    }
  }
  .sm\:size-14 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 14);
      height: calc(var(--spacing) * 14);
    }
  }
  .sm\:h-6 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 6);
    }
  }
  .sm\:h-22 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 22);
    }
  }
  .sm\:h-26 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 26);
    }
  }
  .sm\:h-34 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 34);
    }
  }
  .sm\:h-40 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 40);
    }
  }
  .sm\:h-66 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 66);
    }
  }
  .sm\:h-77 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 77);
    }
  }
  .sm\:h-78 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 78);
    }
  }
  .sm\:h-90 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 90);
    }
  }
  .sm\:h-95 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 95);
    }
  }
  .sm\:h-124 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 124);
    }
  }
  .sm\:h-\[120px\] {
    @media (width >= 40rem) {
      height: 120px;
    }
  }
  .sm\:h-auto {
    @media (width >= 40rem) {
      height: auto;
    }
  }
  .sm\:h-full {
    @media (width >= 40rem) {
      height: 100%;
    }
  }
  .sm\:h-screen {
    @media (width >= 40rem) {
      height: 100vh;
    }
  }
  .sm\:max-h-\[273px\] {
    @media (width >= 40rem) {
      max-height: 273px;
    }
  }
  .sm\:min-h-90 {
    @media (width >= 40rem) {
      min-height: calc(var(--spacing) * 90);
    }
  }
  .sm\:w-36 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 36);
    }
  }
  .sm\:w-44 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 44);
    }
  }
  .sm\:w-60 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 60);
    }
  }
  .sm\:w-80 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .sm\:w-100 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 100);
    }
  }
  .sm\:w-120 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 120);
    }
  }
  .sm\:w-\[120\%\] {
    @media (width >= 40rem) {
      width: 120%;
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:w-full {
    @media (width >= 40rem) {
      width: 100%;
    }
  }
  .sm\:max-w-60 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 60);
    }
  }
  .sm\:max-w-70 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 70);
    }
  }
  .sm\:max-w-80 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 80);
    }
  }
  .sm\:max-w-90 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 90);
    }
  }
  .sm\:max-w-100 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 100);
    }
  }
  .sm\:max-w-102 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 102);
    }
  }
  .sm\:max-w-110 {
    @media (width >= 40rem) {
      max-width: 28rem;
    }
  }
  .sm\:max-w-120 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 120);
    }
  }
  .sm\:max-w-128 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 128);
    }
  }
  .sm\:max-w-136 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 136);
    }
  }
  .sm\:max-w-137 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 137);
    }
  }
  .sm\:max-w-140 {
    @media (width >= 40rem) {
      max-width: 36rem;
    }
  }
  .sm\:max-w-152 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 152);
    }
  }
  .sm\:max-w-160 {
    @media (width >= 40rem) {
      max-width: 42rem;
    }
  }
  .sm\:max-w-172 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 172);
    }
  }
  .sm\:max-w-180 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 180);
    }
  }
  .sm\:max-w-200 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 200);
    }
  }
  .sm\:max-w-lg {
    @media (width >= 40rem) {
      max-width: var(--container-lg);
    }
  }
  .sm\:max-w-xs {
    @media (width >= 40rem) {
      max-width: var(--container-xs);
    }
  }
  .sm\:flex-none {
    @media (width >= 40rem) {
      flex: none;
    }
  }
  .sm\:translate-x-12 {
    @media (width >= 40rem) {
      --tw-translate-x: calc(var(--spacing) * 12);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .sm\:translate-y-12 {
    @media (width >= 40rem) {
      --tw-translate-y: calc(var(--spacing) * 12);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .sm\:grid-flow-col {
    @media (width >= 40rem) {
      grid-auto-flow: column;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-5 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-6 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-10 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-\[1fr_112px\] {
    @media (width >= 40rem) {
      grid-template-columns: 1fr 112px;
    }
  }
  .sm\:grid-cols-\[280px_1fr\] {
    @media (width >= 40rem) {
      grid-template-columns: 280px 1fr;
    }
  }
  .sm\:grid-cols-\[335px_max-content\] {
    @media (width >= 40rem) {
      grid-template-columns: 335px max-content;
    }
  }
  .sm\:grid-cols-\[345px_max-content\] {
    @media (width >= 40rem) {
      grid-template-columns: 345px max-content;
    }
  }
  .sm\:grid-cols-\[360px_max-content\] {
    @media (width >= 40rem) {
      grid-template-columns: 360px max-content;
    }
  }
  .sm\:grid-cols-\[repeat\(6\,max-content\)\] {
    @media (width >= 40rem) {
      grid-template-columns: repeat(6,max-content);
    }
  }
  .sm\:grid-rows-2 {
    @media (width >= 40rem) {
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-rows-3 {
    @media (width >= 40rem) {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:\!flex-row {
    @media (width >= 40rem) {
      flex-direction: row !important;
    }
  }
  .sm\:flex-col {
    @media (width >= 40rem) {
      flex-direction: column;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-row-reverse {
    @media (width >= 40rem) {
      flex-direction: row-reverse;
    }
  }
  .sm\:flex-wrap {
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-center {
    @media (width >= 40rem) {
      justify-content: center;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:gap-0 {
    @media (width >= 40rem) {
      gap: 0;
    }
  }
  .sm\:gap-1 {
    @media (width >= 40rem) {
      gap: var(--spacing);
    }
  }
  .sm\:gap-2 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .sm\:gap-3 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-5 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .sm\:gap-6 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .sm\:gap-8 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:gap-16 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .sm\:gap-\[5px\] {
    @media (width >= 40rem) {
      gap: 5px;
    }
  }
  .sm\:gap-y-12 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .sm\:self-center {
    @media (width >= 40rem) {
      align-self: center;
    }
  }
  .sm\:self-start {
    @media (width >= 40rem) {
      align-self: flex-start;
    }
  }
  .sm\:justify-self-center {
    @media (width >= 40rem) {
      justify-self: center;
    }
  }
  .sm\:justify-self-start {
    @media (width >= 40rem) {
      justify-self: flex-start;
    }
  }
  .sm\:rounded-2xl {
    @media (width >= 40rem) {
      border-radius: var(--radius-2xl);
    }
  }
  .sm\:rounded-\[10px\] {
    @media (width >= 40rem) {
      border-radius: 10px;
    }
  }
  .sm\:rounded-\[14px\] {
    @media (width >= 40rem) {
      border-radius: 14px;
    }
  }
  .sm\:rounded-l-xl {
    @media (width >= 40rem) {
      border-top-left-radius: var(--radius-xl);
      border-bottom-left-radius: var(--radius-xl);
    }
  }
  .sm\:rounded-r-xl {
    @media (width >= 40rem) {
      border-top-right-radius: var(--radius-xl);
      border-bottom-right-radius: var(--radius-xl);
    }
  }
  .sm\:rounded-tr-none {
    @media (width >= 40rem) {
      border-top-right-radius: var(--radius-none);
    }
  }
  .sm\:rounded-bl-none {
    @media (width >= 40rem) {
      border-bottom-left-radius: var(--radius-none);
    }
  }
  .sm\:border {
    @media (width >= 40rem) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .sm\:border-t {
    @media (width >= 40rem) {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .sm\:border-l-0 {
    @media (width >= 40rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 0px;
    }
  }
  .sm\:stroke-2 {
    @media (width >= 40rem) {
      stroke-width: 2;
    }
  }
  .sm\:stroke-\[2\.5px\] {
    @media (width >= 40rem) {
      stroke-width: 2.5px;
    }
  }
  .sm\:p-3 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .sm\:p-4 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:p-8 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .sm\:p-12 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .sm\:px-5 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-6\.5 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6.5);
    }
  }
  .sm\:px-8 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .sm\:px-10 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .sm\:py-0\.5 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 0.5);
    }
  }
  .sm\:py-5 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .sm\:py-8 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:py-10 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .sm\:pt-5 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 5);
    }
  }
  .sm\:pt-6 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .sm\:pt-8 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .sm\:pb-0 {
    @media (width >= 40rem) {
      padding-bottom: 0;
    }
  }
  .sm\:pb-6 {
    @media (width >= 40rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .sm\:pb-8 {
    @media (width >= 40rem) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .sm\:pl-\[30vw\] {
    @media (width >= 40rem) {
      padding-left: 30vw;
    }
  }
  .sm\:text-center {
    @media (width >= 40rem) {
      text-align: center;
    }
  }
  .sm\:align-middle {
    @media (width >= 40rem) {
      vertical-align: middle;
    }
  }
  .sm\:shadow-sm {
    @media (width >= 40rem) {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .sm\:\[--modal-pb\:32px\] {
    @media (width >= 40rem) {
      --modal-pb: 32px;
    }
  }
  .sm\:\[--modal-pt\:32px\] {
    @media (width >= 40rem) {
      --modal-pt: 32px;
    }
  }
  .sm\:\[--stripe-height\:48px\] {
    @media (width >= 40rem) {
      --stripe-height: 48px;
    }
  }
  .md\:absolute {
    @media (width >= 48rem) {
      position: absolute;
    }
  }
  .md\:static {
    @media (width >= 48rem) {
      position: static;
    }
  }
  .md\:inset-x-7 {
    @media (width >= 48rem) {
      inset-inline: calc(var(--spacing) * 7);
    }
  }
  .md\:inset-x-8 {
    @media (width >= 48rem) {
      inset-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:-top-10 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * -10);
    }
  }
  .md\:top-0 {
    @media (width >= 48rem) {
      top: 0;
    }
  }
  .md\:top-1\.5 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 1.5);
    }
  }
  .md\:top-1\/2 {
    @media (width >= 48rem) {
      top: calc(1 / 2 * 100%);
    }
  }
  .md\:top-5 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 5);
    }
  }
  .md\:top-8 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 8);
    }
  }
  .md\:top-12 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 12);
    }
  }
  .md\:top-15 {
    @media (width >= 48rem) {
      top: calc(var(--spacing) * 15);
    }
  }
  .md\:top-\[auto\] {
    @media (width >= 48rem) {
      top: auto;
    }
  }
  .md\:-right-1\/4 {
    @media (width >= 48rem) {
      right: calc(calc(1 / 4 * 100%) * -1);
    }
  }
  .md\:-right-6 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * -6);
    }
  }
  .md\:-right-16 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * -16);
    }
  }
  .md\:right-0 {
    @media (width >= 48rem) {
      right: 0;
    }
  }
  .md\:right-1\/2 {
    @media (width >= 48rem) {
      right: calc(1 / 2 * 100%);
    }
  }
  .md\:right-2 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 2);
    }
  }
  .md\:right-4 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 4);
    }
  }
  .md\:right-5 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 5);
    }
  }
  .md\:right-6 {
    @media (width >= 48rem) {
      right: calc(var(--spacing) * 6);
    }
  }
  .md\:right-\[-65px\] {
    @media (width >= 48rem) {
      right: -65px;
    }
  }
  .md\:-bottom-1\/3 {
    @media (width >= 48rem) {
      bottom: calc(calc(1 / 3 * 100%) * -1);
    }
  }
  .md\:-bottom-8 {
    @media (width >= 48rem) {
      bottom: calc(var(--spacing) * -8);
    }
  }
  .md\:-bottom-30 {
    @media (width >= 48rem) {
      bottom: calc(var(--spacing) * -30);
    }
  }
  .md\:bottom-0 {
    @media (width >= 48rem) {
      bottom: 0;
    }
  }
  .md\:bottom-2 {
    @media (width >= 48rem) {
      bottom: calc(var(--spacing) * 2);
    }
  }
  .md\:left-0 {
    @media (width >= 48rem) {
      left: 0;
    }
  }
  .md\:left-2 {
    @media (width >= 48rem) {
      left: calc(var(--spacing) * 2);
    }
  }
  .md\:left-8 {
    @media (width >= 48rem) {
      left: calc(var(--spacing) * 8);
    }
  }
  .md\:left-18 {
    @media (width >= 48rem) {
      left: calc(var(--spacing) * 18);
    }
  }
  .md\:order-1 {
    @media (width >= 48rem) {
      order: 1;
    }
  }
  .md\:order-first {
    @media (width >= 48rem) {
      order: -9999;
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:col-span-3 {
    @media (width >= 48rem) {
      grid-column: span 3 / span 3;
    }
  }
  .md\:col-span-4 {
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .md\:col-span-5 {
    @media (width >= 48rem) {
      grid-column: span 5 / span 5;
    }
  }
  .md\:col-span-6 {
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .md\:col-span-8 {
    @media (width >= 48rem) {
      grid-column: span 8 / span 8;
    }
  }
  .md\:col-span-9 {
    @media (width >= 48rem) {
      grid-column: span 9 / span 9;
    }
  }
  .md\:col-span-10 {
    @media (width >= 48rem) {
      grid-column: span 10 / span 10;
    }
  }
  .md\:m-0 {
    @media (width >= 48rem) {
      margin: 0;
    }
  }
  .md\:mx-0 {
    @media (width >= 48rem) {
      margin-inline: 0;
    }
  }
  .md\:mx-2 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .md\:mx-8 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:mx-auto {
    @media (width >= 48rem) {
      margin-inline: auto;
    }
  }
  .md\:my-12 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .md\:prose-lg {
    @media (width >= 48rem) {
      font-size: 1.125rem;
      line-height: 1.7777778;
      :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.3333333em;
        margin-bottom: 1.3333333em;
      }
      :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 1.2222222em;
        line-height: 1.4545455;
        margin-top: 1.0909091em;
        margin-bottom: 1.0909091em;
      }
      :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.6666667em;
        margin-bottom: 1.6666667em;
        padding-inline-start: 1em;
      }
      :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 2.6666667em;
        margin-top: 0;
        margin-bottom: 0.8333333em;
        line-height: 1;
      }
      :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 1.6666667em;
        margin-top: 1.8666667em;
        margin-bottom: 1.0666667em;
        line-height: 1.3333333;
      }
      :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 1.3333333em;
        margin-top: 1.6666667em;
        margin-bottom: 0.6666667em;
        line-height: 1.5;
      }
      :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.7777778em;
        margin-bottom: 0.4444444em;
        line-height: 1.5555556;
      }
      :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.7777778em;
        margin-bottom: 1.7777778em;
      }
      :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.7777778em;
        margin-bottom: 1.7777778em;
      }
      :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
        margin-bottom: 0;
      }
      :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.7777778em;
        margin-bottom: 1.7777778em;
      }
      :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 0.8888889em;
        border-radius: 0.3125rem;
        padding-top: 0.2222222em;
        padding-inline-end: 0.4444444em;
        padding-bottom: 0.2222222em;
        padding-inline-start: 0.4444444em;
      }
      :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 0.8888889em;
      }
      :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 0.8666667em;
      }
      :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 0.875em;
      }
      :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 0.8888889em;
        line-height: 1.75;
        margin-top: 2em;
        margin-bottom: 2em;
        border-radius: 0.375rem;
        padding-top: 1em;
        padding-inline-end: 1.5em;
        padding-bottom: 1em;
        padding-inline-start: 1.5em;
      }
      :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.3333333em;
        margin-bottom: 1.3333333em;
        padding-inline-start: 1.5555556em;
      }
      :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.3333333em;
        margin-bottom: 1.3333333em;
        padding-inline-start: 1.5555556em;
      }
      :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0.6666667em;
        margin-bottom: 0.6666667em;
      }
      :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-inline-start: 0.4444444em;
      }
      :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-inline-start: 0.4444444em;
      }
      :where(.md\:prose-lg > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0.8888889em;
        margin-bottom: 0.8888889em;
      }
      :where(.md\:prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.3333333em;
      }
      :where(.md\:prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-bottom: 1.3333333em;
      }
      :where(.md\:prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.3333333em;
      }
      :where(.md\:prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-bottom: 1.3333333em;
      }
      :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0.8888889em;
        margin-bottom: 0.8888889em;
      }
      :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.3333333em;
        margin-bottom: 1.3333333em;
      }
      :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.3333333em;
      }
      :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0.6666667em;
        padding-inline-start: 1.5555556em;
      }
      :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 3.1111111em;
        margin-bottom: 3.1111111em;
      }
      :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
      }
      :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
      }
      :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
      }
      :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
      }
      :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 0.8888889em;
        line-height: 1.5;
      }
      :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-inline-end: 0.75em;
        padding-bottom: 0.75em;
        padding-inline-start: 0.75em;
      }
      :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-inline-start: 0;
      }
      :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-inline-end: 0;
      }
      :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-top: 0.75em;
        padding-inline-end: 0.75em;
        padding-bottom: 0.75em;
        padding-inline-start: 0.75em;
      }
      :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-inline-start: 0;
      }
      :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-inline-end: 0;
      }
      :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.7777778em;
        margin-bottom: 1.7777778em;
      }
      :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
        margin-bottom: 0;
      }
      :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-size: 0.8888889em;
        line-height: 1.5;
        margin-top: 1em;
      }
      :where(.md\:prose-lg > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
      }
      :where(.md\:prose-lg > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-bottom: 0;
      }
    }
  }
  .md\:-mt-8 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * -8);
    }
  }
  .md\:-mt-24 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * -24);
    }
  }
  .md\:-mt-26 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * -26);
    }
  }
  .md\:mt-0 {
    @media (width >= 48rem) {
      margin-top: 0;
    }
  }
  .md\:mt-0\.5 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 0.5);
    }
  }
  .md\:mt-2 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .md\:mt-2\.5 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 2.5);
    }
  }
  .md\:mt-3 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .md\:mt-4 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .md\:mt-5 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 5);
    }
  }
  .md\:mt-6 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .md\:mt-8 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .md\:mt-12 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .md\:mt-16 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .md\:mt-20 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 20);
    }
  }
  .md\:mt-24 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 24);
    }
  }
  .md\:mt-auto {
    @media (width >= 48rem) {
      margin-top: auto;
    }
  }
  .md\:-mr-8 {
    @media (width >= 48rem) {
      margin-right: calc(var(--spacing) * -8);
    }
  }
  .md\:mr-0 {
    @media (width >= 48rem) {
      margin-right: 0;
    }
  }
  .md\:mb-0 {
    @media (width >= 48rem) {
      margin-bottom: 0;
    }
  }
  .md\:mb-2 {
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .md\:-ml-0\.5 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * -0.5);
    }
  }
  .md\:-ml-2 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * -2);
    }
  }
  .md\:-ml-4 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * -4);
    }
  }
  .md\:-ml-8 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * -8);
    }
  }
  .md\:ml-0 {
    @media (width >= 48rem) {
      margin-left: 0;
    }
  }
  .md\:ml-3 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * 3);
    }
  }
  .md\:ml-24 {
    @media (width >= 48rem) {
      margin-left: calc(var(--spacing) * 24);
    }
  }
  .md\:ml-auto {
    @media (width >= 48rem) {
      margin-left: auto;
    }
  }
  .md\:line-clamp-3 {
    @media (width >= 48rem) {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
  }
  .md\:line-clamp-none {
    @media (width >= 48rem) {
      overflow: visible;
      display: block;
      -webkit-box-orient: horizontal;
      -webkit-line-clamp: unset;
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .md\:grid {
    @media (width >= 48rem) {
      display: grid;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:inline {
    @media (width >= 48rem) {
      display: inline;
    }
  }
  .md\:inline-block {
    @media (width >= 48rem) {
      display: inline-block;
    }
  }
  .md\:inline-flex {
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .md\:aspect-\[0\.75\] {
    @media (width >= 48rem) {
      aspect-ratio: 0.75;
    }
  }
  .md\:size-6 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }
  }
  .md\:size-14 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 14);
      height: calc(var(--spacing) * 14);
    }
  }
  .md\:size-16 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 16);
      height: calc(var(--spacing) * 16);
    }
  }
  .md\:size-20 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 20);
      height: calc(var(--spacing) * 20);
    }
  }
  .md\:size-24 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 24);
      height: calc(var(--spacing) * 24);
    }
  }
  .md\:size-\[62px\] {
    @media (width >= 48rem) {
      width: 62px;
      height: 62px;
    }
  }
  .md\:size-\[88px\] {
    @media (width >= 48rem) {
      width: 88px;
      height: 88px;
    }
  }
  .md\:size-\[232px\] {
    @media (width >= 48rem) {
      width: 232px;
      height: 232px;
    }
  }
  .md\:size-\[328px\] {
    @media (width >= 48rem) {
      width: 328px;
      height: 328px;
    }
  }
  .md\:size-auto {
    @media (width >= 48rem) {
      width: auto;
      height: auto;
    }
  }
  .md\:h-8 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 8);
    }
  }
  .md\:h-10 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 10);
    }
  }
  .md\:h-12 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 12);
    }
  }
  .md\:h-18 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 18);
    }
  }
  .md\:h-19 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 19);
    }
  }
  .md\:h-32 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 32);
    }
  }
  .md\:h-36 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 36);
    }
  }
  .md\:h-42 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 42);
    }
  }
  .md\:h-60 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 60);
    }
  }
  .md\:h-60\.5 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 60.5);
    }
  }
  .md\:h-64 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 64);
    }
  }
  .md\:h-64\.5 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 64.5);
    }
  }
  .md\:h-74 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 74);
    }
  }
  .md\:h-80 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 80);
    }
  }
  .md\:h-90 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 90);
    }
  }
  .md\:h-95 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 95);
    }
  }
  .md\:h-96 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 96);
    }
  }
  .md\:h-100 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 100);
    }
  }
  .md\:h-101 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 101);
    }
  }
  .md\:h-110 {
    @media (width >= 48rem) {
      height: 28rem;
    }
  }
  .md\:h-114 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 114);
    }
  }
  .md\:h-115 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 115);
    }
  }
  .md\:h-120 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 120);
    }
  }
  .md\:h-124 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 124);
    }
  }
  .md\:h-126 {
    @media (width >= 48rem) {
      height: 32rem;
    }
  }
  .md\:h-128 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 128);
    }
  }
  .md\:h-129 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 129);
    }
  }
  .md\:h-139\.5 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 139.5);
    }
  }
  .md\:h-140 {
    @media (width >= 48rem) {
      height: 36rem;
    }
  }
  .md\:h-145 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 145);
    }
  }
  .md\:h-160 {
    @media (width >= 48rem) {
      height: 42rem;
    }
  }
  .md\:h-180 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 180);
    }
  }
  .md\:h-200 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 200);
    }
  }
  .md\:h-210 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 210);
    }
  }
  .md\:h-240 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 240);
    }
  }
  .md\:h-\[32rem\] {
    @media (width >= 48rem) {
      height: 32rem;
    }
  }
  .md\:h-\[120\%\] {
    @media (width >= 48rem) {
      height: 120%;
    }
  }
  .md\:h-\[360px\] {
    @media (width >= 48rem) {
      height: 360px;
    }
  }
  .md\:h-auto {
    @media (width >= 48rem) {
      height: auto;
    }
  }
  .md\:h-full {
    @media (width >= 48rem) {
      height: 100%;
    }
  }
  .md\:max-h-100 {
    @media (width >= 48rem) {
      max-height: calc(var(--spacing) * 100);
    }
  }
  .md\:max-h-105 {
    @media (width >= 48rem) {
      max-height: calc(var(--spacing) * 105);
    }
  }
  .md\:max-h-204 {
    @media (width >= 48rem) {
      max-height: calc(var(--spacing) * 204);
    }
  }
  .md\:min-h-43 {
    @media (width >= 48rem) {
      min-height: calc(var(--spacing) * 43);
    }
  }
  .md\:min-h-45 {
    @media (width >= 48rem) {
      min-height: calc(var(--spacing) * 45);
    }
  }
  .md\:min-h-59\.5 {
    @media (width >= 48rem) {
      min-height: calc(var(--spacing) * 59.5);
    }
  }
  .md\:min-h-100 {
    @media (width >= 48rem) {
      min-height: calc(var(--spacing) * 100);
    }
  }
  .md\:min-h-128 {
    @media (width >= 48rem) {
      min-height: calc(var(--spacing) * 128);
    }
  }
  .md\:min-h-140 {
    @media (width >= 48rem) {
      min-height: 36rem;
    }
  }
  .md\:min-h-240 {
    @media (width >= 48rem) {
      min-height: calc(var(--spacing) * 240);
    }
  }
  .md\:min-h-\[912px\] {
    @media (width >= 48rem) {
      min-height: 912px;
    }
  }
  .md\:min-h-screen {
    @media (width >= 48rem) {
      min-height: 100vh;
    }
  }
  .md\:w-0 {
    @media (width >= 48rem) {
      width: 0;
    }
  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1 / 2 * 100%);
    }
  }
  .md\:w-8 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 8);
    }
  }
  .md\:w-18 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 18);
    }
  }
  .md\:w-22 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 22);
    }
  }
  .md\:w-38 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 38);
    }
  }
  .md\:w-48 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 48);
    }
  }
  .md\:w-56 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 56);
    }
  }
  .md\:w-60 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 60);
    }
  }
  .md\:w-64 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 64);
    }
  }
  .md\:w-70 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 70);
    }
  }
  .md\:w-74\.5 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 74.5);
    }
  }
  .md\:w-78\.5 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 78.5);
    }
  }
  .md\:w-80 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .md\:w-90 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 90);
    }
  }
  .md\:w-95 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 95);
    }
  }
  .md\:w-100 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 100);
    }
  }
  .md\:w-120 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 120);
    }
  }
  .md\:w-140 {
    @media (width >= 48rem) {
      width: 36rem;
    }
  }
  .md\:w-160 {
    @media (width >= 48rem) {
      width: 42rem;
    }
  }
  .md\:w-\[135px\] {
    @media (width >= 48rem) {
      width: 135px;
    }
  }
  .md\:w-\[313px\] {
    @media (width >= 48rem) {
      width: 313px;
    }
  }
  .md\:w-\[624px\] {
    @media (width >= 48rem) {
      width: 624px;
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:w-full {
    @media (width >= 48rem) {
      width: 100%;
    }
  }
  .md\:w-max {
    @media (width >= 48rem) {
      width: max-content;
    }
  }
  .md\:w-screen {
    @media (width >= 48rem) {
      width: 100vw;
    }
  }
  .md\:max-w-3xl {
    @media (width >= 48rem) {
      max-width: var(--container-3xl);
    }
  }
  .md\:max-w-5xl {
    @media (width >= 48rem) {
      max-width: var(--container-5xl);
    }
  }
  .md\:max-w-7xl {
    @media (width >= 48rem) {
      max-width: var(--container-7xl);
    }
  }
  .md\:max-w-40 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 40);
    }
  }
  .md\:max-w-44 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 44);
    }
  }
  .md\:max-w-45 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 45);
    }
  }
  .md\:max-w-70 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 70);
    }
  }
  .md\:max-w-71\.5 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 71.5);
    }
  }
  .md\:max-w-76 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 76);
    }
  }
  .md\:max-w-78\.5 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 78.5);
    }
  }
  .md\:max-w-79 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 79);
    }
  }
  .md\:max-w-84 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 84);
    }
  }
  .md\:max-w-90 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 90);
    }
  }
  .md\:max-w-96 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 96);
    }
  }
  .md\:max-w-100 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 100);
    }
  }
  .md\:max-w-110 {
    @media (width >= 48rem) {
      max-width: 28rem;
    }
  }
  .md\:max-w-112 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 112);
    }
  }
  .md\:max-w-120 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 120);
    }
  }
  .md\:max-w-140 {
    @media (width >= 48rem) {
      max-width: 36rem;
    }
  }
  .md\:max-w-160 {
    @media (width >= 48rem) {
      max-width: 42rem;
    }
  }
  .md\:max-w-180 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 180);
    }
  }
  .md\:max-w-192 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 192);
    }
  }
  .md\:max-w-200 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 200);
    }
  }
  .md\:max-w-240 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 240);
    }
  }
  .md\:max-w-266 {
    @media (width >= 48rem) {
      max-width: calc(var(--spacing) * 266);
    }
  }
  .md\:max-w-\[50vw\] {
    @media (width >= 48rem) {
      max-width: 50vw;
    }
  }
  .md\:max-w-\[135px\] {
    @media (width >= 48rem) {
      max-width: 135px;
    }
  }
  .md\:max-w-\[345px\] {
    @media (width >= 48rem) {
      max-width: 345px;
    }
  }
  .md\:max-w-\[calc\(100\%-40px\)\] {
    @media (width >= 48rem) {
      max-width: calc(100% - 40px);
    }
  }
  .md\:max-w-full {
    @media (width >= 48rem) {
      max-width: 100%;
    }
  }
  .md\:max-w-lg {
    @media (width >= 48rem) {
      max-width: var(--container-lg);
    }
  }
  .md\:max-w-none {
    @media (width >= 48rem) {
      max-width: none;
    }
  }
  .md\:max-w-sm {
    @media (width >= 48rem) {
      max-width: var(--container-sm);
    }
  }
  .md\:max-w-xl {
    @media (width >= 48rem) {
      max-width: var(--container-xl);
    }
  }
  .md\:max-w-xs {
    @media (width >= 48rem) {
      max-width: var(--container-xs);
    }
  }
  .md\:min-w-\[240px\] {
    @media (width >= 48rem) {
      min-width: 240px;
    }
  }
  .md\:min-w-\[320px\] {
    @media (width >= 48rem) {
      min-width: 320px;
    }
  }
  .md\:min-w-\[448px\] {
    @media (width >= 48rem) {
      min-width: 448px;
    }
  }
  .md\:flex-1 {
    @media (width >= 48rem) {
      flex: 1;
    }
  }
  .md\:shrink-0 {
    @media (width >= 48rem) {
      flex-shrink: 0;
    }
  }
  .md\:grow-0 {
    @media (width >= 48rem) {
      flex-grow: 0;
    }
  }
  .md\:-translate-x-1\/2 {
    @media (width >= 48rem) {
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:-translate-x-2 {
    @media (width >= 48rem) {
      --tw-translate-x: calc(var(--spacing) * -2);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:-translate-x-full {
    @media (width >= 48rem) {
      --tw-translate-x: -100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-x-0 {
    @media (width >= 48rem) {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-x-2\/3 {
    @media (width >= 48rem) {
      --tw-translate-x: calc(2 / 3 * 100%);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-x-\[9px\] {
    @media (width >= 48rem) {
      --tw-translate-x: 9px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-x-\[45px\] {
    @media (width >= 48rem) {
      --tw-translate-x: 45px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-x-\[53px\] {
    @media (width >= 48rem) {
      --tw-translate-x: 53px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-x-\[70\%\] {
    @media (width >= 48rem) {
      --tw-translate-x: 70%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:-translate-y-1\/2 {
    @media (width >= 48rem) {
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:-translate-y-\[1px\] {
    @media (width >= 48rem) {
      --tw-translate-y: calc(1px * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:-translate-y-\[15px\] {
    @media (width >= 48rem) {
      --tw-translate-y: calc(15px * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-y-2 {
    @media (width >= 48rem) {
      --tw-translate-y: calc(var(--spacing) * 2);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-y-3 {
    @media (width >= 48rem) {
      --tw-translate-y: calc(var(--spacing) * 3);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-y-3\.5 {
    @media (width >= 48rem) {
      --tw-translate-y: calc(var(--spacing) * 3.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-y-12 {
    @media (width >= 48rem) {
      --tw-translate-y: calc(var(--spacing) * 12);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:translate-y-\[37px\] {
    @media (width >= 48rem) {
      --tw-translate-y: 37px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .md\:\[transform\:var\(--transform-desktop\)\] {
    @media (width >= 48rem) {
      transform: var(--transform-desktop);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-5 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-6 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-7 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-8 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-12 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-\[1fr_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .md\:grid-cols-\[1fr_240px\] {
    @media (width >= 48rem) {
      grid-template-columns: 1fr 240px;
    }
  }
  .md\:grid-cols-\[9rem_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 9rem 1fr;
    }
  }
  .md\:grid-cols-\[11rem_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 11rem 1fr;
    }
  }
  .md\:grid-cols-\[384px_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 384px 1fr;
    }
  }
  .md\:grid-cols-\[auto_1fr\] {
    @media (width >= 48rem) {
      grid-template-columns: auto 1fr;
    }
  }
  .md\:flex-col {
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:flex-row-reverse {
    @media (width >= 48rem) {
      flex-direction: row-reverse;
    }
  }
  .md\:flex-nowrap {
    @media (width >= 48rem) {
      flex-wrap: nowrap;
    }
  }
  .md\:flex-wrap {
    @media (width >= 48rem) {
      flex-wrap: wrap;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-center {
    @media (width >= 48rem) {
      justify-content: center;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .md\:justify-normal {
    @media (width >= 48rem) {
      justify-content: normal;
    }
  }
  .md\:justify-start {
    @media (width >= 48rem) {
      justify-content: flex-start;
    }
  }
  .md\:justify-items-center {
    @media (width >= 48rem) {
      justify-items: center;
    }
  }
  .md\:justify-items-end {
    @media (width >= 48rem) {
      justify-items: end;
    }
  }
  .md\:justify-items-start {
    @media (width >= 48rem) {
      justify-items: start;
    }
  }
  .md\:gap-0 {
    @media (width >= 48rem) {
      gap: 0;
    }
  }
  .md\:gap-0\.5 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 0.5);
    }
  }
  .md\:gap-1 {
    @media (width >= 48rem) {
      gap: var(--spacing);
    }
  }
  .md\:gap-1\.5 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .md\:gap-2 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .md\:gap-3 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-5 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .md\:gap-6 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-8 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-12 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-16 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .md\:gap-20 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .md\:gap-24 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 24);
    }
  }
  .md\:-space-y-16 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * -16) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * -16) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:-space-y-\[83px\] {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(83px * -1) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(83px * -1) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:-space-y-\[126px\] {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(126px * -1) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(126px * -1) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:space-y-6 {
    @media (width >= 48rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .md\:gap-y-6 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-y-8 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-y-12 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-y-16 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .md\:self-auto {
    @media (width >= 48rem) {
      align-self: auto;
    }
  }
  .md\:self-center {
    @media (width >= 48rem) {
      align-self: center;
    }
  }
  .md\:self-end {
    @media (width >= 48rem) {
      align-self: flex-end;
    }
  }
  .md\:self-start {
    @media (width >= 48rem) {
      align-self: flex-start;
    }
  }
  .md\:justify-self-center {
    @media (width >= 48rem) {
      justify-self: center;
    }
  }
  .md\:truncate {
    @media (width >= 48rem) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .md\:overflow-hidden {
    @media (width >= 48rem) {
      overflow: hidden;
    }
  }
  .md\:overflow-visible {
    @media (width >= 48rem) {
      overflow: visible;
    }
  }
  .md\:rounded-2xl {
    @media (width >= 48rem) {
      border-radius: var(--radius-2xl);
    }
  }
  .md\:rounded-3xl {
    @media (width >= 48rem) {
      border-radius: var(--radius-3xl);
    }
  }
  .md\:rounded-\[10px\] {
    @media (width >= 48rem) {
      border-radius: 10px;
    }
  }
  .md\:rounded-\[15\.06px\] {
    @media (width >= 48rem) {
      border-radius: 15.06px;
    }
  }
  .md\:rounded-\[15\.16px\] {
    @media (width >= 48rem) {
      border-radius: 15.16px;
    }
  }
  .md\:rounded-\[17\.57px\] {
    @media (width >= 48rem) {
      border-radius: 17.57px;
    }
  }
  .md\:rounded-\[17\.68px\] {
    @media (width >= 48rem) {
      border-radius: 17.68px;
    }
  }
  .md\:rounded-\[20\.08px\] {
    @media (width >= 48rem) {
      border-radius: 20.08px;
    }
  }
  .md\:rounded-\[20\.21px\] {
    @media (width >= 48rem) {
      border-radius: 20.21px;
    }
  }
  .md\:rounded-\[20\.91px\] {
    @media (width >= 48rem) {
      border-radius: 20.91px;
    }
  }
  .md\:rounded-\[20px\] {
    @media (width >= 48rem) {
      border-radius: 20px;
    }
  }
  .md\:rounded-\[21px\] {
    @media (width >= 48rem) {
      border-radius: 21px;
    }
  }
  .md\:rounded-\[23\.58px\] {
    @media (width >= 48rem) {
      border-radius: 23.58px;
    }
  }
  .md\:rounded-\[24\.5px\] {
    @media (width >= 48rem) {
      border-radius: 24.5px;
    }
  }
  .md\:rounded-\[24px\] {
    @media (width >= 48rem) {
      border-radius: 24px;
    }
  }
  .md\:rounded-\[26\.91px\] {
    @media (width >= 48rem) {
      border-radius: 26.91px;
    }
  }
  .md\:rounded-\[26\.95px\] {
    @media (width >= 48rem) {
      border-radius: 26.95px;
    }
  }
  .md\:rounded-\[28px\] {
    @media (width >= 48rem) {
      border-radius: 28px;
    }
  }
  .md\:rounded-\[32px\] {
    @media (width >= 48rem) {
      border-radius: 32px;
    }
  }
  .md\:rounded-lg {
    @media (width >= 48rem) {
      border-radius: var(--radius-lg);
    }
  }
  .md\:rounded-none {
    @media (width >= 48rem) {
      border-radius: var(--radius-none);
    }
  }
  .md\:rounded-xl {
    @media (width >= 48rem) {
      border-radius: var(--radius-xl);
    }
  }
  .md\:rounded-t-2xl {
    @media (width >= 48rem) {
      border-top-left-radius: var(--radius-2xl);
      border-top-right-radius: var(--radius-2xl);
    }
  }
  .md\:rounded-t-none {
    @media (width >= 48rem) {
      border-top-left-radius: var(--radius-none);
      border-top-right-radius: var(--radius-none);
    }
  }
  .md\:rounded-l-2xl {
    @media (width >= 48rem) {
      border-top-left-radius: var(--radius-2xl);
      border-bottom-left-radius: var(--radius-2xl);
    }
  }
  .md\:rounded-tl-\[92px\] {
    @media (width >= 48rem) {
      border-top-left-radius: 92px;
    }
  }
  .md\:rounded-tr-\[64px\] {
    @media (width >= 48rem) {
      border-top-right-radius: 64px;
    }
  }
  .md\:rounded-bl-\[64px\] {
    @media (width >= 48rem) {
      border-bottom-left-radius: 64px;
    }
  }
  .md\:border-y {
    @media (width >= 48rem) {
      border-block-style: var(--tw-border-style);
      border-block-width: 1px;
    }
  }
  .md\:border-t {
    @media (width >= 48rem) {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .md\:border-t-0 {
    @media (width >= 48rem) {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .md\:border-r {
    @media (width >= 48rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .md\:border-b {
    @media (width >= 48rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .md\:border-b-0 {
    @media (width >= 48rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .md\:border-l-2 {
    @media (width >= 48rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 2px;
    }
  }
  .md\:border-none {
    @media (width >= 48rem) {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .md\:bg-transparent {
    @media (width >= 48rem) {
      background-color: transparent;
    }
  }
  .md\:stroke-\[14px\] {
    @media (width >= 48rem) {
      stroke-width: 14px;
    }
  }
  .md\:stroke-\[16px\] {
    @media (width >= 48rem) {
      stroke-width: 16px;
    }
  }
  .md\:p-0 {
    @media (width >= 48rem) {
      padding: 0;
    }
  }
  .md\:p-0\.5 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 0.5);
    }
  }
  .md\:p-1 {
    @media (width >= 48rem) {
      padding: var(--spacing);
    }
  }
  .md\:p-2 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .md\:p-3 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .md\:p-4 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .md\:p-5 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:p-8 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .md\:p-10 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .md\:p-12 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .md\:p-16 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .md\:p-\[3\.5px\] {
    @media (width >= 48rem) {
      padding: 3.5px;
    }
  }
  .md\:p-\[3px\] {
    @media (width >= 48rem) {
      padding: 3px;
    }
  }
  .md\:p-\[4\.5px\] {
    @media (width >= 48rem) {
      padding: 4.5px;
    }
  }
  .md\:p-\[5\.4px\] {
    @media (width >= 48rem) {
      padding: 5.4px;
    }
  }
  .md\:px-0 {
    @media (width >= 48rem) {
      padding-inline: 0;
    }
  }
  .md\:px-2 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .md\:px-3 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .md\:px-4 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .md\:px-5 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-8 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:px-10 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .md\:px-12 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .md\:px-20 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .md\:py-0 {
    @media (width >= 48rem) {
      padding-block: 0;
    }
  }
  .md\:py-0\.5 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 0.5);
    }
  }
  .md\:py-3 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .md\:py-3\! {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3) !important;
    }
  }
  .md\:py-3\.5 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3.5);
    }
  }
  .md\:py-4 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .md\:py-5 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .md\:py-6 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .md\:py-8 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .md\:py-10 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .md\:py-12 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .md\:py-16 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .md\:py-24 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .md\:py-32 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  .md\:pt-0 {
    @media (width >= 48rem) {
      padding-top: 0;
    }
  }
  .md\:pt-0\.5 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 0.5);
    }
  }
  .md\:pt-1 {
    @media (width >= 48rem) {
      padding-top: var(--spacing);
    }
  }
  .md\:pt-2 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 2);
    }
  }
  .md\:pt-2\.5 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 2.5);
    }
  }
  .md\:pt-3 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 3);
    }
  }
  .md\:pt-4 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  .md\:pt-5 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 5);
    }
  }
  .md\:pt-6 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .md\:pt-8 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .md\:pt-10 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 10);
    }
  }
  .md\:pt-16 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 16);
    }
  }
  .md\:pt-20 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 20);
    }
  }
  .md\:pt-24 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 24);
    }
  }
  .md\:pt-40 {
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 40);
    }
  }
  .md\:pt-\[15vh\] {
    @media (width >= 48rem) {
      padding-top: 15vh;
    }
  }
  .md\:pt-\[75px\] {
    @media (width >= 48rem) {
      padding-top: 75px;
    }
  }
  .md\:pt-\[94px\] {
    @media (width >= 48rem) {
      padding-top: 94px;
    }
  }
  .md\:pr-0 {
    @media (width >= 48rem) {
      padding-right: 0;
    }
  }
  .md\:pr-2 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 2);
    }
  }
  .md\:pr-3 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 3);
    }
  }
  .md\:pr-4 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 4);
    }
  }
  .md\:pr-5 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 5);
    }
  }
  .md\:pr-6 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .md\:pr-8 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .md\:pr-12 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 12);
    }
  }
  .md\:pr-18 {
    @media (width >= 48rem) {
      padding-right: calc(var(--spacing) * 18);
    }
  }
  .md\:pb-0 {
    @media (width >= 48rem) {
      padding-bottom: 0;
    }
  }
  .md\:pb-4 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .md\:pb-5 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 5);
    }
  }
  .md\:pb-6 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .md\:pb-7 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 7);
    }
  }
  .md\:pb-8 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .md\:pb-10 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 10);
    }
  }
  .md\:pb-12 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }
  .md\:pb-16 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 16);
    }
  }
  .md\:pb-24 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 24);
    }
  }
  .md\:pb-28 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 28);
    }
  }
  .md\:pb-40 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 40);
    }
  }
  .md\:pb-48 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 48);
    }
  }
  .md\:pb-\[270px\] {
    @media (width >= 48rem) {
      padding-bottom: 270px;
    }
  }
  .md\:pl-0 {
    @media (width >= 48rem) {
      padding-left: 0;
    }
  }
  .md\:pl-4 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .md\:pl-5 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 5);
    }
  }
  .md\:pl-6 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .md\:pl-6\.5 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 6.5);
    }
  }
  .md\:pl-8 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 8);
    }
  }
  .md\:pl-10 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 10);
    }
  }
  .md\:pl-12 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 12);
    }
  }
  .md\:pl-16 {
    @media (width >= 48rem) {
      padding-left: calc(var(--spacing) * 16);
    }
  }
  .md\:text-center {
    @media (width >= 48rem) {
      text-align: center;
    }
  }
  .md\:text-left {
    @media (width >= 48rem) {
      text-align: left;
    }
  }
  .md\:text-right {
    @media (width >= 48rem) {
      text-align: right;
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.625rem);
      letter-spacing: var(--tw-tracking, -0.02em);
    }
  }
  .md\:text-lg {
    @media (width >= 48rem) {
      font-size: 1.125rem;
      line-height: var(--tw-leading, 1.6875rem);
    }
  }
  .md\:text-md {
    @media (width >= 48rem) {
      font-size: 0.875rem;
      line-height: var(--tw-leading, 1.375rem);
    }
  }
  .md\:text-sm {
    @media (width >= 48rem) {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
  }
  .md\:whitespace-normal {
    @media (width >= 48rem) {
      white-space: normal;
    }
  }
  .md\:whitespace-nowrap {
    @media (width >= 48rem) {
      white-space: nowrap;
    }
  }
  .md\:text-primary {
    @media (width >= 48rem) {
      color: var(--text-primary) !important;
    }
  }
  .md\:decoration-4 {
    @media (width >= 48rem) {
      text-decoration-thickness: 4px;
    }
  }
  .md\:shadow-lg {
    @media (width >= 48rem) {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:shadow-xl {
    @media (width >= 48rem) {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:shadow-xs {
    @media (width >= 48rem) {
      --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.03));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-1 {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-6 {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(6px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-8 {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-\[1\.25px\] {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.25px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-\[1\.26px\] {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.26px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-\[1\.68px\] {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.68px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-\[1\.75px\] {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.75px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-\[1px\] {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:ring-\[2px\] {
    @media (width >= 48rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .md\:drop-shadow-none {
    @media (width >= 48rem) {
      --tw-drop-shadow:  ;
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
  .md\:\[--scale\:1\.3\] {
    @media (width >= 48rem) {
      --scale: 1.3;
    }
  }
  .md\:\[--scale\:1\.641\] {
    @media (width >= 48rem) {
      --scale: 1.641;
    }
  }
  .md\:\[--scale\:2\.1\] {
    @media (width >= 48rem) {
      --scale: 2.1;
    }
  }
  .md\:\[--scale\:2\.099\] {
    @media (width >= 48rem) {
      --scale: 2.099;
    }
  }
  .md\:first\:hidden {
    @media (width >= 48rem) {
      &:first-child {
        display: none;
      }
    }
  }
  .md\:last\:flex {
    @media (width >= 48rem) {
      &:last-child {
        display: flex;
      }
    }
  }
  .md\:last\:flex {
    @media (width >= 48rem) {
      &:last-child {
        &.collapse.show {
          display: flex;
        }
      }
    }
  }
  .md\:max-lg\:hidden {
    @media (width >= 48rem) {
      @media (width < 64rem) {
        display: none;
      }
    }
  }
  .lg\:absolute {
    @media (width >= 64rem) {
      position: absolute;
    }
  }
  .lg\:fixed {
    @media (width >= 64rem) {
      position: fixed;
    }
  }
  .lg\:relative {
    @media (width >= 64rem) {
      position: relative;
    }
  }
  .lg\:static {
    @media (width >= 64rem) {
      position: static;
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:inset-0 {
    @media (width >= 64rem) {
      inset: 0;
    }
  }
  .lg\:inset-y-0 {
    @media (width >= 64rem) {
      inset-block: 0;
    }
  }
  .lg\:top-0 {
    @media (width >= 64rem) {
      top: 0;
    }
  }
  .lg\:top-5 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 5);
    }
  }
  .lg\:top-6 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 6);
    }
  }
  .lg\:top-14 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 14);
    }
  }
  .lg\:top-18 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 18);
    }
  }
  .lg\:top-26 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 26);
    }
  }
  .lg\:top-auto {
    @media (width >= 64rem) {
      top: auto;
    }
  }
  .lg\:right-0 {
    @media (width >= 64rem) {
      right: 0;
    }
  }
  .lg\:right-5 {
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 5);
    }
  }
  .lg\:right-6 {
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 6);
    }
  }
  .lg\:right-8 {
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 8);
    }
  }
  .lg\:right-12 {
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 12);
    }
  }
  .lg\:right-12\.5 {
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 12.5);
    }
  }
  .lg\:right-62 {
    @media (width >= 64rem) {
      right: calc(var(--spacing) * 62);
    }
  }
  .lg\:right-auto {
    @media (width >= 64rem) {
      right: auto;
    }
  }
  .lg\:bottom-0 {
    @media (width >= 64rem) {
      bottom: 0;
    }
  }
  .lg\:bottom-\[33px\] {
    @media (width >= 64rem) {
      bottom: 33px;
    }
  }
  .lg\:left-0 {
    @media (width >= 64rem) {
      left: 0;
    }
  }
  .lg\:left-4\.5 {
    @media (width >= 64rem) {
      left: calc(var(--spacing) * 4.5);
    }
  }
  .lg\:left-12 {
    @media (width >= 64rem) {
      left: calc(var(--spacing) * 12);
    }
  }
  .lg\:left-18 {
    @media (width >= 64rem) {
      left: calc(var(--spacing) * 18);
    }
  }
  .lg\:left-24 {
    @media (width >= 64rem) {
      left: calc(var(--spacing) * 24);
    }
  }
  .lg\:left-auto {
    @media (width >= 64rem) {
      left: auto;
    }
  }
  .lg\:order-0 {
    @media (width >= 64rem) {
      order: 0;
    }
  }
  .lg\:order-first {
    @media (width >= 64rem) {
      order: -9999;
    }
  }
  .lg\:order-last {
    @media (width >= 64rem) {
      order: 9999;
    }
  }
  .lg\:order-none {
    @media (width >= 64rem) {
      order: 0;
    }
  }
  .lg\:col-auto {
    @media (width >= 64rem) {
      grid-column: auto;
    }
  }
  .lg\:col-span-1 {
    @media (width >= 64rem) {
      grid-column: span 1 / span 1;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:col-span-6 {
    @media (width >= 64rem) {
      grid-column: span 6 / span 6;
    }
  }
  .lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .lg\:col-span-8 {
    @media (width >= 64rem) {
      grid-column: span 8 / span 8;
    }
  }
  .lg\:col-start-2 {
    @media (width >= 64rem) {
      grid-column-start: 2;
    }
  }
  .lg\:row-span-2 {
    @media (width >= 64rem) {
      grid-row: span 2 / span 2;
    }
  }
  .lg\:row-start-1 {
    @media (width >= 64rem) {
      grid-row-start: 1;
    }
  }
  .lg\:-mx-8 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * -8);
    }
  }
  .lg\:mx-0 {
    @media (width >= 64rem) {
      margin-inline: 0;
    }
  }
  .lg\:mx-auto {
    @media (width >= 64rem) {
      margin-inline: auto;
    }
  }
  .lg\:-mt-10 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * -10);
    }
  }
  .lg\:-mt-16 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * -16);
    }
  }
  .lg\:mt-0 {
    @media (width >= 64rem) {
      margin-top: 0;
    }
  }
  .lg\:mt-2 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .lg\:mt-3 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .lg\:mt-5 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 5);
    }
  }
  .lg\:mt-6 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .lg\:mt-auto {
    @media (width >= 64rem) {
      margin-top: auto;
    }
  }
  .lg\:-mr-100 {
    @media (width >= 64rem) {
      margin-right: calc(var(--spacing) * -100);
    }
  }
  .lg\:-mr-264 {
    @media (width >= 64rem) {
      margin-right: calc(var(--spacing) * -264);
    }
  }
  .lg\:mr-9\.5 {
    @media (width >= 64rem) {
      margin-right: calc(var(--spacing) * 9.5);
    }
  }
  .lg\:mb-4 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .lg\:mb-24 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 24);
    }
  }
  .lg\:-ml-0 {
    @media (width >= 64rem) {
      margin-left: 0;
    }
  }
  .lg\:-ml-4 {
    @media (width >= 64rem) {
      margin-left: calc(var(--spacing) * -4);
    }
  }
  .lg\:ml-0 {
    @media (width >= 64rem) {
      margin-left: 0;
    }
  }
  .lg\:ml-3 {
    @media (width >= 64rem) {
      margin-left: calc(var(--spacing) * 3);
    }
  }
  .lg\:ml-auto {
    @media (width >= 64rem) {
      margin-left: auto;
    }
  }
  .lg\:line-clamp-3 {
    @media (width >= 64rem) {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
  }
  .lg\:line-clamp-none {
    @media (width >= 64rem) {
      overflow: visible;
      display: block;
      -webkit-box-orient: horizontal;
      -webkit-line-clamp: unset;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .lg\:grid {
    @media (width >= 64rem) {
      display: grid;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:inline {
    @media (width >= 64rem) {
      display: inline;
    }
  }
  .lg\:inline-flex {
    @media (width >= 64rem) {
      display: inline-flex;
    }
  }
  .lg\:table-cell {
    @media (width >= 64rem) {
      display: table-cell;
    }
  }
  .lg\:h-0 {
    @media (width >= 64rem) {
      height: 0;
    }
  }
  .lg\:h-8 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 8);
    }
  }
  .lg\:h-30 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 30);
    }
  }
  .lg\:h-36 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 36);
    }
  }
  .lg\:h-37\.5 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 37.5);
    }
  }
  .lg\:h-44 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 44);
    }
  }
  .lg\:h-46 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 46);
    }
  }
  .lg\:h-50 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 50);
    }
  }
  .lg\:h-57 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 57);
    }
  }
  .lg\:h-57\.5 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 57.5);
    }
  }
  .lg\:h-58 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 58);
    }
  }
  .lg\:h-60 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 60);
    }
  }
  .lg\:h-60\! {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 60) !important;
    }
  }
  .lg\:h-63 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 63);
    }
  }
  .lg\:h-64 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 64);
    }
  }
  .lg\:h-66 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 66);
    }
  }
  .lg\:h-70 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 70);
    }
  }
  .lg\:h-73\.5 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 73.5);
    }
  }
  .lg\:h-74 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 74);
    }
  }
  .lg\:h-80 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 80);
    }
  }
  .lg\:h-82 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 82);
    }
  }
  .lg\:h-96 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 96);
    }
  }
  .lg\:h-100 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 100);
    }
  }
  .lg\:h-103 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 103);
    }
  }
  .lg\:h-104 {
    @media (width >= 64rem) {
      height: 26rem;
    }
  }
  .lg\:h-115 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 115);
    }
  }
  .lg\:h-120 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 120);
    }
  }
  .lg\:h-128 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 128);
    }
  }
  .lg\:h-129 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 129);
    }
  }
  .lg\:h-132 {
    @media (width >= 64rem) {
      height: 34rem;
    }
  }
  .lg\:h-140 {
    @media (width >= 64rem) {
      height: 36rem;
    }
  }
  .lg\:h-142 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 142);
    }
  }
  .lg\:h-148 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 148);
    }
  }
  .lg\:h-160 {
    @media (width >= 64rem) {
      height: 42rem;
    }
  }
  .lg\:h-163\.5 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 163.5);
    }
  }
  .lg\:h-168\.5 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 168.5);
    }
  }
  .lg\:h-180 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 180);
    }
  }
  .lg\:h-192 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 192);
    }
  }
  .lg\:h-200 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 200);
    }
  }
  .lg\:h-277 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 277);
    }
  }
  .lg\:h-\[251px\] {
    @media (width >= 64rem) {
      height: 251px;
    }
  }
  .lg\:h-auto {
    @media (width >= 64rem) {
      height: auto;
    }
  }
  .lg\:h-full {
    @media (width >= 64rem) {
      height: 100%;
    }
  }
  .lg\:h-svh {
    @media (width >= 64rem) {
      height: 100svh;
    }
  }
  .lg\:max-h-100 {
    @media (width >= 64rem) {
      max-height: calc(var(--spacing) * 100);
    }
  }
  .lg\:max-h-140 {
    @media (width >= 64rem) {
      max-height: 36rem;
    }
  }
  .lg\:max-h-168\.5 {
    @media (width >= 64rem) {
      max-height: calc(var(--spacing) * 168.5);
    }
  }
  .lg\:max-h-180 {
    @media (width >= 64rem) {
      max-height: calc(var(--spacing) * 180);
    }
  }
  .lg\:max-h-240 {
    @media (width >= 64rem) {
      max-height: calc(var(--spacing) * 240);
    }
  }
  .lg\:max-h-252 {
    @media (width >= 64rem) {
      max-height: calc(var(--spacing) * 252);
    }
  }
  .lg\:max-h-none {
    @media (width >= 64rem) {
      max-height: none;
    }
  }
  .lg\:min-h-25\.5 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 25.5);
    }
  }
  .lg\:min-h-37 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 37);
    }
  }
  .lg\:min-h-64 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 64);
    }
  }
  .lg\:min-h-70 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 70);
    }
  }
  .lg\:min-h-93 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 93);
    }
  }
  .lg\:min-h-112 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 112);
    }
  }
  .lg\:min-h-120 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 120);
    }
  }
  .lg\:min-h-140 {
    @media (width >= 64rem) {
      min-height: 36rem;
    }
  }
  .lg\:min-h-142 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 142);
    }
  }
  .lg\:min-h-149\.5 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 149.5);
    }
  }
  .lg\:min-h-160 {
    @media (width >= 64rem) {
      min-height: 42rem;
    }
  }
  .lg\:min-h-177 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 177);
    }
  }
  .lg\:min-h-180 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 180);
    }
  }
  .lg\:min-h-240 {
    @media (width >= 64rem) {
      min-height: calc(var(--spacing) * 240);
    }
  }
  .lg\:min-h-\[97px\] {
    @media (width >= 64rem) {
      min-height: 97px;
    }
  }
  .lg\:min-h-screen {
    @media (width >= 64rem) {
      min-height: 100vh;
    }
  }
  .lg\:w-\(--width\) {
    @media (width >= 64rem) {
      width: var(--width);
    }
  }
  .lg\:w-1\/2 {
    @media (width >= 64rem) {
      width: calc(1 / 2 * 100%);
    }
  }
  .lg\:w-40 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 40);
    }
  }
  .lg\:w-60 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 60);
    }
  }
  .lg\:w-61 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 61);
    }
  }
  .lg\:w-72 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 72);
    }
  }
  .lg\:w-80 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .lg\:w-87 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 87);
    }
  }
  .lg\:w-90 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 90);
    }
  }
  .lg\:w-92\.5 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 92.5);
    }
  }
  .lg\:w-95\.5 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 95.5);
    }
  }
  .lg\:w-98 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 98);
    }
  }
  .lg\:w-100 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 100);
    }
  }
  .lg\:w-105 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 105);
    }
  }
  .lg\:w-110 {
    @media (width >= 64rem) {
      width: 28rem;
    }
  }
  .lg\:w-120 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 120);
    }
  }
  .lg\:w-125 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 125);
    }
  }
  .lg\:w-128 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 128);
    }
  }
  .lg\:w-133 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 133);
    }
  }
  .lg\:w-140 {
    @media (width >= 64rem) {
      width: 36rem;
    }
  }
  .lg\:w-180 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 180);
    }
  }
  .lg\:w-192 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 192);
    }
  }
  .lg\:w-\[50vw\] {
    @media (width >= 64rem) {
      width: 50vw;
    }
  }
  .lg\:w-\[calc\(100\%\+48px\)\] {
    @media (width >= 64rem) {
      width: calc(100% + 48px);
    }
  }
  .lg\:w-auto {
    @media (width >= 64rem) {
      width: auto;
    }
  }
  .lg\:w-full {
    @media (width >= 64rem) {
      width: 100%;
    }
  }
  .lg\:w-max {
    @media (width >= 64rem) {
      width: max-content;
    }
  }
  .lg\:lg\:max-w-5xl {
    @media (width >= 64rem) {
      @media (width >= 64rem) {
        max-width: var(--container-5xl);
      }
    }
  }
  .lg\:max-w-\(--breakpoint-md\) {
    @media (width >= 64rem) {
      max-width: var(--breakpoint-md);
    }
  }
  .lg\:max-w-\(--breakpoint-sm\) {
    @media (width >= 64rem) {
      max-width: var(--breakpoint-sm);
    }
  }
  .lg\:max-w-3xl {
    @media (width >= 64rem) {
      max-width: var(--container-3xl);
    }
  }
  .lg\:max-w-5xl {
    @media (width >= 64rem) {
      max-width: var(--container-5xl);
    }
  }
  .lg\:max-w-60 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 60);
    }
  }
  .lg\:max-w-61 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 61);
    }
  }
  .lg\:max-w-62 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 62);
    }
  }
  .lg\:max-w-70 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 70);
    }
  }
  .lg\:max-w-78 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 78);
    }
  }
  .lg\:max-w-78\.5 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 78.5);
    }
  }
  .lg\:max-w-87\.5 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 87.5);
    }
  }
  .lg\:max-w-98 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 98);
    }
  }
  .lg\:max-w-100 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 100);
    }
  }
  .lg\:max-w-120 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 120);
    }
  }
  .lg\:max-w-126 {
    @media (width >= 64rem) {
      max-width: 32rem;
    }
  }
  .lg\:max-w-140 {
    @media (width >= 64rem) {
      max-width: 36rem;
    }
  }
  .lg\:max-w-144 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 144);
    }
  }
  .lg\:max-w-150 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 150);
    }
  }
  .lg\:max-w-160 {
    @media (width >= 64rem) {
      max-width: 42rem;
    }
  }
  .lg\:max-w-180 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 180);
    }
  }
  .lg\:max-w-210 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 210);
    }
  }
  .lg\:max-w-256 {
    @media (width >= 64rem) {
      max-width: calc(var(--spacing) * 256);
    }
  }
  .lg\:max-w-\[50vw\] {
    @media (width >= 64rem) {
      max-width: 50vw;
    }
  }
  .lg\:max-w-lg {
    @media (width >= 64rem) {
      max-width: var(--container-lg);
    }
  }
  .lg\:max-w-md {
    @media (width >= 64rem) {
      max-width: var(--container-md);
    }
  }
  .lg\:max-w-none {
    @media (width >= 64rem) {
      max-width: none;
    }
  }
  .lg\:max-w-sm {
    @media (width >= 64rem) {
      max-width: var(--container-sm);
    }
  }
  .lg\:max-w-xl {
    @media (width >= 64rem) {
      max-width: var(--container-xl);
    }
  }
  .lg\:max-w-xs {
    @media (width >= 64rem) {
      max-width: var(--container-xs);
    }
  }
  .lg\:min-w-34 {
    @media (width >= 64rem) {
      min-width: calc(var(--spacing) * 34);
    }
  }
  .lg\:min-w-52\.5 {
    @media (width >= 64rem) {
      min-width: calc(var(--spacing) * 52.5);
    }
  }
  .lg\:min-w-70 {
    @media (width >= 64rem) {
      min-width: calc(var(--spacing) * 70);
    }
  }
  .lg\:min-w-85 {
    @media (width >= 64rem) {
      min-width: calc(var(--spacing) * 85);
    }
  }
  .lg\:min-w-98 {
    @media (width >= 64rem) {
      min-width: calc(var(--spacing) * 98);
    }
  }
  .lg\:min-w-\[291px\] {
    @media (width >= 64rem) {
      min-width: 291px;
    }
  }
  .lg\:min-w-\[320px\] {
    @media (width >= 64rem) {
      min-width: 320px;
    }
  }
  .lg\:min-w-\[345px\] {
    @media (width >= 64rem) {
      min-width: 345px;
    }
  }
  .lg\:min-w-\[480px\] {
    @media (width >= 64rem) {
      min-width: 480px;
    }
  }
  .lg\:flex-1 {
    @media (width >= 64rem) {
      flex: 1;
    }
  }
  .lg\:translate-x-0 {
    @media (width >= 64rem) {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:translate-y-1\/4 {
    @media (width >= 64rem) {
      --tw-translate-y: calc(1 / 4 * 100%);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:scale-75 {
    @media (width >= 64rem) {
      --tw-scale-x: 75%;
      --tw-scale-y: 75%;
      --tw-scale-z: 75%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .lg\:rotate-345 {
    @media (width >= 64rem) {
      rotate: 345deg;
    }
  }
  .lg\:\[transform\:var\(--transform-desktop\)\] {
    @media (width >= 64rem) {
      transform: var(--transform-desktop);
    }
  }
  .lg\:auto-rows-\[360px\] {
    @media (width >= 64rem) {
      grid-auto-rows: 360px;
    }
  }
  .lg\:grid-cols-1 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-5 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-6 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-8 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-11 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(11, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[1fr_1fr_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  .lg\:grid-cols-\[1fr_240px\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr 240px;
    }
  }
  .lg\:grid-cols-\[1fr_320px\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr 320px;
    }
  }
  .lg\:grid-cols-\[1fr_480px\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr 480px;
    }
  }
  .lg\:grid-cols-\[1fr_max-content\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr max-content;
    }
  }
  .lg\:grid-cols-\[1fr_minmax\(160px\,max-content\)\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr minmax(160px,max-content);
    }
  }
  .lg\:grid-cols-\[2fr_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 2fr 1fr;
    }
  }
  .lg\:grid-cols-\[15rem_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 15rem 1fr;
    }
  }
  .lg\:grid-cols-\[148px_148px\] {
    @media (width >= 64rem) {
      grid-template-columns: 148px 148px;
    }
  }
  .lg\:grid-cols-\[384px_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 384px 1fr;
    }
  }
  .lg\:grid-cols-\[416px_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 416px 1fr;
    }
  }
  .lg\:grid-cols-\[640px_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 640px 1fr;
    }
  }
  .lg\:grid-cols-\[auto_auto\] {
    @media (width >= 64rem) {
      grid-template-columns: auto auto;
    }
  }
  .lg\:grid-cols-\[auto_auto_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: auto auto 1fr;
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 20rem;
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) 1fr;
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(0\,512px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(0,512px);
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(0\,560px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(0,560px);
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(400px\,512px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(400px,512px);
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(400px\,640px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(400px,640px);
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(480px\,512px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(480px,512px);
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(560px\,1fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(560px,1fr);
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(560px\,640px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(560px,640px);
    }
  }
  .lg\:grid-cols-\[minmax\(200px\,280px\)_minmax\(560px\,720px\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(200px,280px) minmax(560px,720px);
    }
  }
  .lg\:grid-cols-\[repeat\(3\,auto\)\] {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3,auto);
    }
  }
  .lg\:grid-cols-\[repeat\(3\,minmax\(0\,384px\)\)\] {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3,minmax(0,384px));
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:flex-row-reverse {
    @media (width >= 64rem) {
      flex-direction: row-reverse;
    }
  }
  .lg\:flex-nowrap {
    @media (width >= 64rem) {
      flex-wrap: nowrap;
    }
  }
  .lg\:flex-wrap {
    @media (width >= 64rem) {
      flex-wrap: wrap;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:items-end {
    @media (width >= 64rem) {
      align-items: flex-end;
    }
  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:justify-between {
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .lg\:justify-end {
    @media (width >= 64rem) {
      justify-content: flex-end;
    }
  }
  .lg\:justify-start {
    @media (width >= 64rem) {
      justify-content: flex-start;
    }
  }
  .lg\:justify-items-start {
    @media (width >= 64rem) {
      justify-items: start;
    }
  }
  .lg\:gap-0 {
    @media (width >= 64rem) {
      gap: 0;
    }
  }
  .lg\:gap-1 {
    @media (width >= 64rem) {
      gap: var(--spacing);
    }
  }
  .lg\:gap-1\.5 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .lg\:gap-2 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .lg\:gap-3 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .lg\:gap-4 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .lg\:gap-5 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .lg\:gap-6 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-8 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-10 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-16 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:gap-24 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 24);
    }
  }
  .lg\:gap-32 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 32);
    }
  }
  .lg\:-space-y-8 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * -8) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .lg\:-space-y-\[183px\] {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(183px * -1) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(183px * -1) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .lg\:gap-x-8 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-y-4 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 4);
    }
  }
  .lg\:gap-y-5 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 5);
    }
  }
  .lg\:gap-y-6 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-y-8 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-y-12 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-y-16 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:self-center {
    @media (width >= 64rem) {
      align-self: center;
    }
  }
  .lg\:truncate {
    @media (width >= 64rem) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .lg\:overflow-auto {
    @media (width >= 64rem) {
      overflow: auto;
    }
  }
  .lg\:overflow-hidden {
    @media (width >= 64rem) {
      overflow: hidden;
    }
  }
  .lg\:overflow-visible {
    @media (width >= 64rem) {
      overflow: visible;
    }
  }
  .lg\:overflow-y-clip {
    @media (width >= 64rem) {
      overflow-y: clip;
    }
  }
  .lg\:rounded-2xl {
    @media (width >= 64rem) {
      border-radius: var(--radius-2xl);
    }
  }
  .lg\:rounded-\[20px\] {
    @media (width >= 64rem) {
      border-radius: 20px;
    }
  }
  .lg\:rounded-none {
    @media (width >= 64rem) {
      border-radius: var(--radius-none);
    }
  }
  .lg\:rounded-xl {
    @media (width >= 64rem) {
      border-radius: var(--radius-xl);
    }
  }
  .lg\:rounded-tl-\[24px\] {
    @media (width >= 64rem) {
      border-top-left-radius: 24px;
    }
  }
  .lg\:rounded-tl-\[32px\] {
    @media (width >= 64rem) {
      border-top-left-radius: 32px;
    }
  }
  .lg\:rounded-tl-\[40px\] {
    @media (width >= 64rem) {
      border-top-left-radius: 40px;
    }
  }
  .lg\:rounded-tl-\[160px\] {
    @media (width >= 64rem) {
      border-top-left-radius: 160px;
    }
  }
  .lg\:rounded-tl-xl {
    @media (width >= 64rem) {
      border-top-left-radius: var(--radius-xl);
    }
  }
  .lg\:rounded-r-none {
    @media (width >= 64rem) {
      border-top-right-radius: var(--radius-none);
      border-bottom-right-radius: var(--radius-none);
    }
  }
  .lg\:border-t {
    @media (width >= 64rem) {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .lg\:border-b {
    @media (width >= 64rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .lg\:border-l {
    @media (width >= 64rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .lg\:border-none {
    @media (width >= 64rem) {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .lg\:bg-transparent {
    @media (width >= 64rem) {
      background-color: transparent;
    }
  }
  .lg\:object-left {
    @media (width >= 64rem) {
      object-position: left;
    }
  }
  .lg\:p-5 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .lg\:p-6 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .lg\:p-8 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .lg\:p-12 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .lg\:p-16 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .lg\:px-0 {
    @media (width >= 64rem) {
      padding-inline: 0;
    }
  }
  .lg\:px-2 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .lg\:px-3 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .lg\:px-4 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .lg\:px-5 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .lg\:px-6 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:px-11 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 11);
    }
  }
  .lg\:px-14 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 14);
    }
  }
  .lg\:px-16 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .lg\:px-20 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .lg\:py-0 {
    @media (width >= 64rem) {
      padding-block: 0;
    }
  }
  .lg\:py-1 {
    @media (width >= 64rem) {
      padding-block: var(--spacing);
    }
  }
  .lg\:py-3 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .lg\:py-4 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .lg\:py-5 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .lg\:py-6 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .lg\:py-8 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .lg\:py-11 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 11);
    }
  }
  .lg\:py-12 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .lg\:py-14 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .lg\:py-24 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .lg\:pt-0 {
    @media (width >= 64rem) {
      padding-top: 0;
    }
  }
  .lg\:pt-1 {
    @media (width >= 64rem) {
      padding-top: var(--spacing);
    }
  }
  .lg\:pt-2 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 2);
    }
  }
  .lg\:pt-2\.5 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 2.5);
    }
  }
  .lg\:pt-4 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  .lg\:pt-5 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 5);
    }
  }
  .lg\:pt-6 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .lg\:pt-10 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 10);
    }
  }
  .lg\:pt-12 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 12);
    }
  }
  .lg\:pt-16 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 16);
    }
  }
  .lg\:pt-24 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 24);
    }
  }
  .lg\:pt-32 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 32);
    }
  }
  .lg\:pt-40 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 40);
    }
  }
  .lg\:pr-0 {
    @media (width >= 64rem) {
      padding-right: 0;
    }
  }
  .lg\:pr-6 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 6);
    }
  }
  .lg\:pr-8 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 8);
    }
  }
  .lg\:pr-10 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 10);
    }
  }
  .lg\:pr-16 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 16);
    }
  }
  .lg\:pr-24 {
    @media (width >= 64rem) {
      padding-right: calc(var(--spacing) * 24);
    }
  }
  .lg\:pb-0 {
    @media (width >= 64rem) {
      padding-bottom: 0;
    }
  }
  .lg\:pb-2 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 2);
    }
  }
  .lg\:pb-4 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .lg\:pb-5 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 5);
    }
  }
  .lg\:pb-6 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .lg\:pb-8 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .lg\:pb-24 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 24);
    }
  }
  .lg\:pl-0 {
    @media (width >= 64rem) {
      padding-left: 0;
    }
  }
  .lg\:pl-1 {
    @media (width >= 64rem) {
      padding-left: var(--spacing);
    }
  }
  .lg\:pl-3 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 3);
    }
  }
  .lg\:pl-4 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .lg\:pl-5 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 5);
    }
  }
  .lg\:pl-6 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 6);
    }
  }
  .lg\:pl-8 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 8);
    }
  }
  .lg\:pl-10 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 10);
    }
  }
  .lg\:pl-12 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 12);
    }
  }
  .lg\:pl-18 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 18);
    }
  }
  .lg\:pl-21 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 21);
    }
  }
  .lg\:pl-24 {
    @media (width >= 64rem) {
      padding-left: calc(var(--spacing) * 24);
    }
  }
  .lg\:text-center {
    @media (width >= 64rem) {
      text-align: center;
    }
  }
  .lg\:text-left {
    @media (width >= 64rem) {
      text-align: left;
    }
  }
  .lg\:text-right {
    @media (width >= 64rem) {
      text-align: right;
    }
  }
  .lg\:text-md {
    @media (width >= 64rem) {
      font-size: 0.875rem;
      line-height: var(--tw-leading, 1.375rem);
    }
  }
  .lg\:text-sm {
    @media (width >= 64rem) {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
    }
  }
  .lg\:text-xl {
    @media (width >= 64rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
  }
  .lg\:font-semibold {
    @media (width >= 64rem) {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }
  .lg\:whitespace-normal {
    @media (width >= 64rem) {
      white-space: normal;
    }
  }
  .lg\:decoration-4 {
    @media (width >= 64rem) {
      text-decoration-thickness: 4px;
    }
  }
  .lg\:shadow-lg {
    @media (width >= 64rem) {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .lg\:shadow-sm {
    @media (width >= 64rem) {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .lg\:shadow-xs {
    @media (width >= 64rem) {
      --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.03));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .lg\:ring-0 {
    @media (width >= 64rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .lg\:ring-1 {
    @media (width >= 64rem) {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .lg\:shadow-transparent {
    @media (width >= 64rem) {
      --tw-shadow-color: transparent;
      @supports (color: color-mix(in lab, red, red)) {
        --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
      }
    }
  }
  .lg\:drop-shadow-none {
    @media (width >= 64rem) {
      --tw-drop-shadow:  ;
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
  .lg\:\[--scale\:1\.57\] {
    @media (width >= 64rem) {
      --scale: 1.57;
    }
  }
  .lg\:\[--stripe-height\:72px\] {
    @media (width >= 64rem) {
      --stripe-height: 72px;
    }
  }
  .lg\:ring-inset {
    @media (width >= 64rem) {
      --tw-ring-inset: inset;
    }
  }
  .lg\:after\:border-b-0 {
    @media (width >= 64rem) {
      &::after {
        content: var(--tw-content);
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0px;
      }
    }
  }
  .lg\:\*\*\:data-label\:hidden {
    @media (width >= 64rem) {
      :is(& *) {
        &[data-label] {
          display: none;
        }
      }
    }
  }
  .xl\:absolute {
    @media (width >= 80rem) {
      position: absolute;
    }
  }
  .xl\:static {
    @media (width >= 80rem) {
      position: static;
    }
  }
  .xl\:sticky {
    @media (width >= 80rem) {
      position: sticky;
    }
  }
  .xl\:inset-0 {
    @media (width >= 80rem) {
      inset: 0;
    }
  }
  .xl\:top-2 {
    @media (width >= 80rem) {
      top: calc(var(--spacing) * 2);
    }
  }
  .xl\:bottom-12 {
    @media (width >= 80rem) {
      bottom: calc(var(--spacing) * 12);
    }
  }
  .xl\:-left-10 {
    @media (width >= 80rem) {
      left: calc(var(--spacing) * -10);
    }
  }
  .xl\:col-span-2 {
    @media (width >= 80rem) {
      grid-column: span 2 / span 2;
    }
  }
  .xl\:col-span-3 {
    @media (width >= 80rem) {
      grid-column: span 3 / span 3;
    }
  }
  .xl\:col-span-9 {
    @media (width >= 80rem) {
      grid-column: span 9 / span 9;
    }
  }
  .xl\:row-span-2 {
    @media (width >= 80rem) {
      grid-row: span 2 / span 2;
    }
  }
  .xl\:mx-0 {
    @media (width >= 80rem) {
      margin-inline: 0;
    }
  }
  .xl\:line-clamp-4 {
    @media (width >= 80rem) {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }
  }
  .xl\:block {
    @media (width >= 80rem) {
      display: block;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      &.collapse.show {
        display: flex;
      }
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:inline-flex {
    @media (width >= 80rem) {
      display: inline-flex;
    }
  }
  .xl\:size-15 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 15);
      height: calc(var(--spacing) * 15);
    }
  }
  .xl\:size-30\.5 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 30.5);
      height: calc(var(--spacing) * 30.5);
    }
  }
  .xl\:h-36 {
    @media (width >= 80rem) {
      height: calc(var(--spacing) * 36);
    }
  }
  .xl\:h-50 {
    @media (width >= 80rem) {
      height: calc(var(--spacing) * 50);
    }
  }
  .xl\:h-87\.25 {
    @media (width >= 80rem) {
      height: calc(var(--spacing) * 87.25);
    }
  }
  .xl\:h-103 {
    @media (width >= 80rem) {
      height: calc(var(--spacing) * 103);
    }
  }
  .xl\:w-50 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 50);
    }
  }
  .xl\:w-62 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 62);
    }
  }
  .xl\:w-80 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 80);
    }
  }
  .xl\:w-91\.5 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 91.5);
    }
  }
  .xl\:w-120 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 120);
    }
  }
  .xl\:w-140 {
    @media (width >= 80rem) {
      width: 36rem;
    }
  }
  .xl\:w-206 {
    @media (width >= 80rem) {
      width: calc(var(--spacing) * 206);
    }
  }
  .xl\:w-\[calc\(100\%\+40px\)\] {
    @media (width >= 80rem) {
      width: calc(100% + 40px);
    }
  }
  .xl\:w-full {
    @media (width >= 80rem) {
      width: 100%;
    }
  }
  .xl\:w-screen {
    @media (width >= 80rem) {
      width: 100vw;
    }
  }
  .xl\:max-w-3xl {
    @media (width >= 80rem) {
      max-width: var(--container-3xl);
    }
  }
  .xl\:max-w-93\.5 {
    @media (width >= 80rem) {
      max-width: calc(var(--spacing) * 93.5);
    }
  }
  .xl\:max-w-140 {
    @media (width >= 80rem) {
      max-width: 36rem;
    }
  }
  .xl\:max-w-lg {
    @media (width >= 80rem) {
      max-width: var(--container-lg);
    }
  }
  .xl\:max-w-md {
    @media (width >= 80rem) {
      max-width: var(--container-md);
    }
  }
  .xl\:max-w-none {
    @media (width >= 80rem) {
      max-width: none;
    }
  }
  .xl\:min-w-100 {
    @media (width >= 80rem) {
      min-width: calc(var(--spacing) * 100);
    }
  }
  .xl\:min-w-\[560px\] {
    @media (width >= 80rem) {
      min-width: 560px;
    }
  }
  .xl\:-translate-x-\[107\%\] {
    @media (width >= 80rem) {
      --tw-translate-x: calc(107% * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .xl\:scale-100 {
    @media (width >= 80rem) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-12 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-\[880px_1fr\] {
    @media (width >= 80rem) {
      grid-template-columns: 880px 1fr;
    }
  }
  .xl\:grid-cols-\[minmax\(0\,1fr\)_300px\] {
    @media (width >= 80rem) {
      grid-template-columns: minmax(0,1fr) 300px;
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:flex-nowrap {
    @media (width >= 80rem) {
      flex-wrap: nowrap;
    }
  }
  .xl\:items-center {
    @media (width >= 80rem) {
      align-items: center;
    }
  }
  .xl\:items-start {
    @media (width >= 80rem) {
      align-items: flex-start;
    }
  }
  .xl\:justify-end {
    @media (width >= 80rem) {
      justify-content: flex-end;
    }
  }
  .xl\:justify-items-stretch {
    @media (width >= 80rem) {
      justify-items: stretch;
    }
  }
  .xl\:gap-3 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .xl\:gap-5 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .xl\:gap-6 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .xl\:gap-8 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .xl\:gap-x-6 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .xl\:gap-x-8 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .xl\:rounded-lg {
    @media (width >= 80rem) {
      border-radius: var(--radius-lg);
    }
  }
  .xl\:p-0 {
    @media (width >= 80rem) {
      padding: 0;
    }
  }
  .xl\:p-4 {
    @media (width >= 80rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .xl\:px-8 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .xl\:pt-0 {
    @media (width >= 80rem) {
      padding-top: 0;
    }
  }
  .xl\:pt-\[clamp\(64px\,10vh\,243px\)\] {
    @media (width >= 80rem) {
      padding-top: clamp(64px, 10vh, 243px);
    }
  }
  .xl\:pb-0 {
    @media (width >= 80rem) {
      padding-bottom: 0;
    }
  }
  .xl\:text-lg {
    @media (width >= 80rem) {
      font-size: 1.125rem;
      line-height: var(--tw-leading, 1.6875rem);
    }
  }
  .xl\:text-xl {
    @media (width >= 80rem) {
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
    }
  }
  .xl\:\[clip-path\:polygon\(10\%_0\%\,_100\%_0\%\,_100\%_100\%\,_0\%_100\%\)\] {
    @media (width >= 80rem) {
      clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
  }
  .\32 xl\:h-128 {
    @media (width >= 96rem) {
      height: calc(var(--spacing) * 128);
    }
  }
  .\32 xl\:grid-cols-5 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .\32 xl\:pt-\[136px\] {
    @media (width >= 96rem) {
      padding-top: 136px;
    }
  }
  .dark\:block {
    &:is(.dark *) {
      display: block;
    }
  }
  .dark\:hidden {
    &:is(.dark *) {
      display: none;
    }
  }
  .dark\:border {
    &:is(.dark *) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .dark\:border-b {
    &:is(.dark *) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .dark\:border-blue-200 {
    &:is(.dark *) {
      border-color: #bfd6ff;
    }
  }
  .dark\:border-gray-500 {
    &:is(.dark *) {
      border-color: #5c5f6b;
    }
  }
  .dark\:border-gray-600\/80 {
    &:is(.dark *) {
      border-color: color-mix(in oklab, #4a4d58 80%, transparent);
    }
  }
  .dark\:border-gray-700 {
    &:is(.dark *) {
      border-color: #3e404a;
    }
  }
  .dark\:border-gray-800 {
    &:is(.dark *) {
      border-color: #2f3038;
    }
  }
  .dark\:border-gray-800\/80 {
    &:is(.dark *) {
      border-color: color-mix(in oklab, #2f3038 80%, transparent);
    }
  }
  .dark\:border-gray-900 {
    &:is(.dark *) {
      border-color: #23242c;
    }
  }
  .dark\:border-transparent {
    &:is(.dark *) {
      border-color: transparent;
    }
  }
  .dark\:border-white\/10 {
    &:is(.dark *) {
      border-color: color-mix(in oklab, #fff 10%, transparent);
    }
  }
  .dark\:\!bg-gray-700 {
    &:is(.dark *) {
      background-color: #3e404a !important;
    }
  }
  .dark\:bg-gray-400 {
    &:is(.dark *) {
      background-color: #9196a4;
    }
  }
  .dark\:bg-gray-600 {
    &:is(.dark *) {
      background-color: #4a4d58;
    }
  }
  .dark\:bg-gray-700 {
    &:is(.dark *) {
      background-color: #3e404a;
    }
  }
  .dark\:bg-gray-700\/50 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, #3e404a 50%, transparent);
    }
  }
  .dark\:bg-gray-800 {
    &:is(.dark *) {
      background-color: #2f3038;
    }
  }
  .dark\:bg-gray-800\/40 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, #2f3038 40%, transparent);
    }
  }
  .dark\:bg-gray-900 {
    &:is(.dark *) {
      background-color: #23242c;
    }
  }
  .dark\:bg-gray-900\/10 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, #23242c 10%, transparent);
    }
  }
  .dark\:bg-gray-950 {
    &:is(.dark *) {
      background-color: #16161c;
    }
  }
  .dark\:bg-indigo-300 {
    &:is(.dark *) {
      background-color: #b0bdfc;
    }
  }
  .dark\:bg-indigo-500\/40 {
    &:is(.dark *) {
      background-color: color-mix(in oklab, #4656e9 40%, transparent);
    }
  }
  .dark\:bg-orange-300 {
    &:is(.dark *) {
      background-color: #f6aa6a;
    }
  }
  .dark\:bg-purple-300 {
    &:is(.dark *) {
      background-color: #c188f4;
    }
  }
  .dark\:bg-teal-300 {
    &:is(.dark *) {
      background-color: #68e0e1;
    }
  }
  .dark\:bg-transparent {
    &:is(.dark *) {
      background-color: transparent;
    }
  }
  .dark\:bg-linear-\(--gradient-dark\) {
    &:is(.dark *) {
      --tw-gradient-position: var(--gradient-dark);
      background-image: linear-gradient(var(--tw-gradient-stops,var(--gradient-dark)));
    }
  }
  .dark\:from-gray-700 {
    &:is(.dark *) {
      --tw-gradient-from: #3e404a;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:to-gray-800 {
    &:is(.dark *) {
      --tw-gradient-to: #2f3038;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  .dark\:fill-black {
    &:is(.dark *) {
      fill: #000;
    }
  }
  .dark\:text-blue-300 {
    &:is(.dark *) {
      color: #91b5ff;
    }
  }
  .dark\:text-gray-300 {
    &:is(.dark *) {
      color: #c3c7d0;
    }
  }
  .dark\:text-gray-400 {
    &:is(.dark *) {
      color: #9196a4;
    }
  }
  .dark\:text-gray-500 {
    &:is(.dark *) {
      color: #5c5f6b;
    }
  }
  .dark\:text-green-300 {
    &:is(.dark *) {
      color: #7cffae;
    }
  }
  .dark\:text-indigo-200 {
    &:is(.dark *) {
      color: #b0bdfc;
    }
  }
  .dark\:text-white {
    &:is(.dark *) {
      color: #fff;
    }
  }
  .dark\:text-white\/50 {
    &:is(.dark *) {
      color: color-mix(in oklab, #fff 50%, transparent);
    }
  }
  .dark\:placeholder-gray-500 {
    &:is(.dark *) {
      &::placeholder {
        color: #5c5f6b;
      }
    }
  }
  .dark\:opacity-100 {
    &:is(.dark *) {
      opacity: 100%;
    }
  }
  .dark\:ring-gray-900 {
    &:is(.dark *) {
      --tw-ring-color: #23242c;
    }
  }
  .dark\:brightness-\[0\.2\] {
    &:is(.dark *) {
      --tw-brightness: brightness(0.2);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
  .dark\:backdrop-blur {
    &:is(.dark *) {
      --tw-backdrop-blur: blur(8px);
      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    }
  }
  .dark\:outline-none {
    &:is(.dark *) {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .dark\:placeholder\:text-gray-500 {
    &:is(.dark *) {
      &::placeholder {
        color: #5c5f6b;
      }
    }
  }
  .dark\:hover\:border-gray-800 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: #2f3038;
        }
      }
    }
  }
  .dark\:hover\:border-white\/40 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          border-color: color-mix(in oklab, #fff 40%, transparent);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-600\/80 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in oklab, #4a4d58 80%, transparent);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-700 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: #3e404a;
        }
      }
    }
  }
  .dark\:hover\:bg-gray-700\/80 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in oklab, #3e404a 80%, transparent);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: #2f3038;
        }
      }
    }
  }
  .dark\:hover\:bg-gray-800\/80 {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in oklab, #2f3038 80%, transparent);
        }
      }
    }
  }
  .dark\:hover\:text-white {
    &:is(.dark *) {
      &:hover {
        @media (hover: hover) {
          color: #fff;
        }
      }
    }
  }
  .dark\:focus\:border-blue-500 {
    &:is(.dark *) {
      &:focus {
        border-color: #2f6fe4;
      }
    }
  }
  .dark\:focus\:border-gray-800 {
    &:is(.dark *) {
      &:focus {
        border-color: #2f3038;
      }
    }
  }
  .dark\:focus\:bg-gray-800\/90 {
    &:is(.dark *) {
      &:focus {
        background-color: color-mix(in oklab, #2f3038 90%, transparent);
      }
    }
  }
  .dark\:focus\:shadow-sm {
    &:is(.dark *) {
      &:focus {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .dark\:active\:bg-gray-600\/60 {
    &:is(.dark *) {
      &:active {
        background-color: color-mix(in oklab, #4a4d58 60%, transparent);
      }
    }
  }
  .dark\:active\:bg-gray-700\/50 {
    &:is(.dark *) {
      &:active {
        background-color: color-mix(in oklab, #3e404a 50%, transparent);
      }
    }
  }
  .dark\:active\:bg-gray-700\/60 {
    &:is(.dark *) {
      &:active {
        background-color: color-mix(in oklab, #3e404a 60%, transparent);
      }
    }
  }
  .dark\:active\:bg-gray-800 {
    &:is(.dark *) {
      &:active {
        background-color: #2f3038;
      }
    }
  }
  .dark\:active\:bg-gray-900\/80 {
    &:is(.dark *) {
      &:active {
        background-color: color-mix(in oklab, #23242c 80%, transparent);
      }
    }
  }
  .md\:dark\:block {
    @media (width >= 48rem) {
      &:is(.dark *) {
        display: block;
      }
    }
  }
  .\[\&_\*\:first-of-type\]\:pl-0\! {
    & *:first-of-type {
      padding-left: 0 !important;
    }
  }
  .\[\&_\.recharts-area-area\]\:translate-y-\[6px\] {
    & .recharts-area-area {
      --tw-translate-y: 6px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .\[\&_\.recharts-area-area\]\:\[clip-path\:inset\(0_0_6px_0\)\] {
    & .recharts-area-area {
      clip-path: inset(0 0 6px 0);
    }
  }
  .\[\&_\.recharts-text\]\:text-sm {
    & .recharts-text {
      font-size: 0.8125rem;
      line-height: var(--tw-leading, 1.25rem);
    }
  }
  .\[\&_\.recharts-text\]\:text-xs {
    & .recharts-text {
      font-size: 0.75rem;
      line-height: var(--tw-leading, 1.125rem);
    }
  }
  .sm\:\[\&_\[data-label\]\]\:hidden {
    @media (width >= 40rem) {
      & [data-label] {
        display: none;
      }
    }
  }
  .lg\:\[\&_\[data-label\]\]\:hidden {
    @media (width >= 64rem) {
      & [data-label] {
        display: none;
      }
    }
  }
  .\[\&_\[role\=tab\]\]\:flex-1 {
    & [role=tab] {
      flex: 1;
    }
  }
  .\[\&_\[role\=tab\]\]\:hover\:bg-white\/10 {
    & [role=tab] {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in oklab, #fff 10%, transparent);
        }
      }
    }
  }
  .\[\&_a\]\:rounded-xs {
    & a {
      border-radius: var(--radius-xs);
    }
  }
  .\[\&_a\]\:underline {
    & a {
      text-decoration-line: underline;
    }
  }
  .\[\&_a\]\:underline-offset-2 {
    & a {
      text-underline-offset: 2px;
    }
  }
  .\[\&_a\]\:transition {
    & a {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  .\[\&_a\]\:duration-100 {
    & a {
      --tw-duration: 100ms;
      transition-duration: 100ms;
    }
  }
  .\[\&_a\]\:ease-linear {
    & a {
      --tw-ease: linear;
      transition-timing-function: linear;
    }
  }
  .\[\&_a\]\:focus-visible\:outline-2 {
    & a {
      &:focus-visible {
        outline-style: var(--tw-outline-style);
        outline-width: 2px;
      }
    }
  }
  .\[\&_a\]\:focus-visible\:outline-offset-2 {
    & a {
      &:focus-visible {
        outline-offset: 2px;
      }
    }
  }
  .\[\&_svg\:not\(\[data-icon\]\)\]\:hidden {
    & svg:not([data-icon]) {
      display: none;
    }
  }
  .\[\&_td\]\:p-0 {
    & td {
      padding: 0;
    }
  }
  .\[\&_tr\]\:border-b-4 {
    & tr {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 4px;
    }
  }
  .\[\&_tr\]\:border-transparent {
    & tr {
      border-color: transparent;
    }
  }
  .\[\&_tr\:last-of-type\]\:border-none {
    & tr:last-of-type {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .md\:\[\&\+\*\]\:mt-0\! {
    @media (width >= 48rem) {
      &+* {
        margin-top: 0 !important;
      }
    }
  }
  .\[\&\:\:-moz-range-thumb\]\:h-3 {
    &::-moz-range-thumb {
      height: calc(var(--spacing) * 3);
    }
  }
  .\[\&\:\:-moz-range-thumb\]\:w-3 {
    &::-moz-range-thumb {
      width: calc(var(--spacing) * 3);
    }
  }
  .\[\&\:\:-moz-range-thumb\]\:appearance-none {
    &::-moz-range-thumb {
      appearance: none;
    }
  }
  .\[\&\:\:-moz-range-thumb\]\:rounded-full {
    &::-moz-range-thumb {
      border-radius: var(--radius-full);
    }
  }
  .\[\&\:\:-moz-range-thumb\]\:border-0 {
    &::-moz-range-thumb {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .\[\&\:\:-moz-range-thumb\]\:bg-white {
    &::-moz-range-thumb {
      background-color: #fff;
    }
  }
  .\[\&\:\:-webkit-details-marker\]\:hidden {
    &::-webkit-details-marker {
      display: none;
    }
  }
  .\[\&\:\:-webkit-resizer\]\:bg-\(image\:--resize-handle-bg\) {
    &::-webkit-resizer {
      background-image: var(--resize-handle-bg);
    }
  }
  .\[\&\:\:-webkit-resizer\]\:bg-contain {
    &::-webkit-resizer {
      background-size: contain;
    }
  }
  .dark\:\[\&\:\:-webkit-resizer\]\:bg-\(image\:--resize-handle-bg-dark\) {
    &:is(.dark *) {
      &::-webkit-resizer {
        background-image: var(--resize-handle-bg-dark);
      }
    }
  }
  .\[\&\:\:-webkit-scrollbar\]\:w-2 {
    &::-webkit-scrollbar {
      width: calc(var(--spacing) * 2);
    }
  }
  .\[\&\:\:-webkit-scrollbar-track\]\:rounded-full {
    &::-webkit-scrollbar-track {
      border-radius: var(--radius-full);
    }
  }
  .\[\&\:\:-webkit-slider-thumb\]\:h-3 {
    &::-webkit-slider-thumb {
      height: calc(var(--spacing) * 3);
    }
  }
  .\[\&\:\:-webkit-slider-thumb\]\:w-3 {
    &::-webkit-slider-thumb {
      width: calc(var(--spacing) * 3);
    }
  }
  .\[\&\:\:-webkit-slider-thumb\]\:translate-x-0 {
    &::-webkit-slider-thumb {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
    &::-webkit-slider-thumb {
      appearance: none;
    }
  }
  .\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
    &::-webkit-slider-thumb {
      border-radius: var(--radius-full);
    }
  }
  .\[\&\>\*\:first-of-type\]\:pl-0\! {
    &>*:first-of-type {
      padding-left: 0 !important;
    }
  }
  .lg\:\[\&\>\*\:first-of-type\]\:pl-5 {
    @media (width >= 64rem) {
      &>*:first-of-type {
        padding-left: calc(var(--spacing) * 5);
      }
    }
  }
  .\[\&\>\*\:not\(\[data-icon\=loading\]\)\]\:invisible {
    &>*:not([data-icon=loading]) {
      visibility: hidden;
    }
  }
  .\[\&\>\*\:not\(\[data-icon\=loading\]\)\:not\(\[data-text\]\)\]\:hidden {
    &>*:not([data-icon=loading]):not([data-text]) {
      display: none;
    }
  }
  .\[\&\>\.shiki\]\:overflow-x-auto {
    &>.shiki {
      overflow-x: auto;
    }
  }
  .\[\&\>code\]\:w-full {
    &>code {
      width: 100%;
    }
  }
  .\[\&\>p\+p\]\:mt-4\.5 {
    &>p+p {
      margin-top: calc(var(--spacing) * 4.5);
    }
  }
  .\[\&\>td\]\:after\:absolute {
    &>td {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .\[\&\>td\]\:after\:inset-x-0 {
    &>td {
      &::after {
        content: var(--tw-content);
        inset-inline: 0;
      }
    }
  }
  .\[\&\>td\]\:after\:bottom-0 {
    &>td {
      &::after {
        content: var(--tw-content);
        bottom: 0;
      }
    }
  }
  .\[\&\>td\]\:after\:h-px {
    &>td {
      &::after {
        content: var(--tw-content);
        height: 1px;
      }
    }
  }
  .\[\&\>td\]\:after\:w-full {
    &>td {
      &::after {
        content: var(--tw-content);
        width: 100%;
      }
    }
  }
  .last\:\[\&\>td\]\:after\:hidden {
    &:last-child {
      &>td {
        &::after {
          content: var(--tw-content);
          display: none;
        }
      }
    }
  }
  .\[\&\>td\]\:focus-visible\:after\:opacity-0 {
    &>td {
      &:focus-visible {
        &::after {
          content: var(--tw-content);
          opacity: 0%;
        }
      }
    }
  }
  .focus-visible\:\[\&\>td\]\:after\:opacity-0 {
    &:focus-visible {
      &>td {
        &::after {
          content: var(--tw-content);
          opacity: 0%;
        }
      }
    }
  }
  .lg\:\[\&\>td\:first-of-type\]\:pl-3 {
    @media (width >= 64rem) {
      &>td:first-of-type {
        padding-left: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:\[\&\>tr\>\*\:first-of-type\]\:pl-5 {
    @media (width >= 64rem) {
      &>tr>*:first-of-type {
        padding-left: calc(var(--spacing) * 5);
      }
    }
  }
  .\[\&\>tr\>th\]\:after\:pointer-events-none {
    &>tr>th {
      &::after {
        content: var(--tw-content);
        pointer-events: none;
      }
    }
  }
  .\[\&\>tr\>th\]\:after\:absolute {
    &>tr>th {
      &::after {
        content: var(--tw-content);
        position: absolute;
      }
    }
  }
  .\[\&\>tr\>th\]\:after\:inset-x-0 {
    &>tr>th {
      &::after {
        content: var(--tw-content);
        inset-inline: 0;
      }
    }
  }
  .\[\&\>tr\>th\]\:after\:bottom-0 {
    &>tr>th {
      &::after {
        content: var(--tw-content);
        bottom: 0;
      }
    }
  }
  .\[\&\>tr\>th\]\:after\:h-px {
    &>tr>th {
      &::after {
        content: var(--tw-content);
        height: 1px;
      }
    }
  }
  .\[\&\>tr\>th\]\:focus-visible\:after\:bg-transparent {
    &>tr>th {
      &:focus-visible {
        &::after {
          content: var(--tw-content);
          background-color: transparent;
        }
      }
    }
  }
  .lg\:\[\&\>tr\>th\:first-of-type\]\:rounded-l-xl {
    @media (width >= 64rem) {
      &>tr>th:first-of-type {
        border-top-left-radius: var(--radius-xl);
        border-bottom-left-radius: var(--radius-xl);
      }
    }
  }
  .lg\:\[\&\>tr\>th\:first-of-type\]\:pl-3 {
    @media (width >= 64rem) {
      &>tr>th:first-of-type {
        padding-left: calc(var(--spacing) * 3);
      }
    }
  }
  .lg\:\[\&\>tr\>th\:last-of-type\]\:rounded-r-xl {
    @media (width >= 64rem) {
      &>tr>th:last-of-type {
        border-top-right-radius: var(--radius-xl);
        border-bottom-right-radius: var(--radius-xl);
      }
    }
  }
  .\[\[data-self\=true\]\+\&\]\:mt-3 {
    [data-self=true]+& {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .\[\[data-self\=true\]\+\&\]\:mt-6 {
    [data-self=true]+& {
      margin-top: calc(var(--spacing) * 6);
    }
  }
}
@layer base {
  * {
    scrollbar-color: initial;
    scrollbar-width: initial;
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-linear {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-radial {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-conic {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-left {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-right {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-bottom {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-top {
  syntax: "*";
  inherits: false;
  initial-value: linear-gradient(#fff, #fff);
}
@property --tw-mask-right-from-position {
  syntax: "*";
  inherits: false;
  initial-value: 0%;
}
@property --tw-mask-right-to-position {
  syntax: "*";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-right-from-color {
  syntax: "*";
  inherits: false;
  initial-value: black;
}
@property --tw-mask-right-to-color {
  syntax: "*";
  inherits: false;
  initial-value: transparent;
}
@property --tw-mask-left-from-position {
  syntax: "*";
  inherits: false;
  initial-value: 0%;
}
@property --tw-mask-left-to-position {
  syntax: "*";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-left-from-color {
  syntax: "*";
  inherits: false;
  initial-value: black;
}
@property --tw-mask-left-to-color {
  syntax: "*";
  inherits: false;
  initial-value: transparent;
}
@property --tw-mask-bottom-from-position {
  syntax: "*";
  inherits: false;
  initial-value: 0%;
}
@property --tw-mask-bottom-to-position {
  syntax: "*";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-bottom-from-color {
  syntax: "*";
  inherits: false;
  initial-value: black;
}
@property --tw-mask-bottom-to-color {
  syntax: "*";
  inherits: false;
  initial-value: transparent;
}
@property --tw-mask-linear-position {
  syntax: "*";
  inherits: false;
  initial-value: 0deg;
}
@property --tw-mask-linear-from-position {
  syntax: "*";
  inherits: false;
  initial-value: 0%;
}
@property --tw-mask-linear-to-position {
  syntax: "*";
  inherits: false;
  initial-value: 100%;
}
@property --tw-mask-linear-from-color {
  syntax: "*";
  inherits: false;
  initial-value: black;
}
@property --tw-mask-linear-to-color {
  syntax: "*";
  inherits: false;
  initial-value: transparent;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-border-style: solid;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-tracking: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-leading: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-space-x-reverse: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-space-y-reverse: 0;
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-divide-x-reverse: 0;
      --tw-scroll-snap-strictness: proximity;
      --tw-content: "";
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-y-reverse: 0;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-mask-linear: linear-gradient(#fff, #fff);
      --tw-mask-radial: linear-gradient(#fff, #fff);
      --tw-mask-conic: linear-gradient(#fff, #fff);
      --tw-mask-left: linear-gradient(#fff, #fff);
      --tw-mask-right: linear-gradient(#fff, #fff);
      --tw-mask-bottom: linear-gradient(#fff, #fff);
      --tw-mask-top: linear-gradient(#fff, #fff);
      --tw-mask-right-from-position: 0%;
      --tw-mask-right-to-position: 100%;
      --tw-mask-right-from-color: black;
      --tw-mask-right-to-color: transparent;
      --tw-mask-left-from-position: 0%;
      --tw-mask-left-to-position: 100%;
      --tw-mask-left-from-color: black;
      --tw-mask-left-to-color: transparent;
      --tw-mask-bottom-from-position: 0%;
      --tw-mask-bottom-to-position: 100%;
      --tw-mask-bottom-from-color: black;
      --tw-mask-bottom-to-color: transparent;
      --tw-mask-linear-position: 0deg;
      --tw-mask-linear-from-position: 0%;
      --tw-mask-linear-to-position: 100%;
      --tw-mask-linear-from-color: black;
      --tw-mask-linear-to-color: transparent;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-text-shadow-color: initial;
      --tw-text-shadow-alpha: 100%;
    }
  }
}

/*# sourceMappingURL=site.css.map */