/* src/entrypoints/app/public/reset.css */
@layer reset {
  *, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
  }

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

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

  input, button, textarea, select {
    font: inherit;
  }
}

/* src/entrypoints/app/public/font-normalize.css */
@layer reset {
  @font-face {
    font-family: Source Sans Pro Web;
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: url("/static/fonts/source-sans-pro/sourcesanspro-light-webfont.woff2") format(woff2);
  }

  @font-face {
    font-family: Source Sans Pro Web;
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url("/static/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2") format(woff2);
  }

  @font-face {
    font-family: Source Sans Pro Web;
    font-style: normal;
    font-weight: 700;
    font-display: fallback;
    src: url("/static/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2") format(woff2);
  }

  @font-face {
    font-family: Source Sans Pro Web;
    font-style: italic;
    font-weight: 300;
    font-display: fallback;
    src: url("/static/fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2") format(woff2);
  }

  @font-face {
    font-family: Source Sans Pro Web;
    font-style: italic;
    font-weight: 400;
    font-display: fallback;
    src: url("/static/fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2") format(woff2);
  }

  @font-face {
    font-family: Source Sans Pro Web;
    font-style: italic;
    font-weight: 700;
    font-display: fallback;
    src: url("/static/fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2") format(woff2);
  }

  @font-face {
    font-family: Roboto Mono Web;
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: url("/static/fonts/roboto-mono/roboto-mono-v5-latin-300.woff2") format(woff2);
  }

  @font-face {
    font-family: Roboto Mono Web;
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url("/static/fonts/roboto-mono/roboto-mono-v5-latin-regular.woff2") format(woff2);
  }

  @font-face {
    font-family: Roboto Mono Web;
    font-style: normal;
    font-weight: 700;
    font-display: fallback;
    src: url("/static/fonts/roboto-mono/roboto-mono-v5-latin-700.woff2") format(woff2);
  }
}

/* src/entrypoints/app/public/tokens.css */
@layer tokens {
  @property --flex-color-bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #f7f9fa;
  }

  @property --flex-color-surface {
    syntax: "<color>";
    inherits: true;
    initial-value: #fff;
  }

  @property --flex-color-border {
    syntax: "<color>";
    inherits: true;
    initial-value: #c6cace;
  }

  @property --flex-color-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #1b1b1b;
  }

  @property --flex-color-text-muted {
    syntax: "<color>";
    inherits: true;
    initial-value: #5c5c5c;
  }

  @property --flex-color-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #005ea2;
  }

  @property --flex-color-success {
    syntax: "<color>";
    inherits: true;
    initial-value: #216e1f;
  }

  @property --flex-color-error {
    syntax: "<color>";
    inherits: true;
    initial-value: #b50909;
  }

  @property --flex-color-ink {
    syntax: "<color>";
    inherits: true;
    initial-value: #71767a;
  }

  @property --flex-color-table-header {
    syntax: "<color>";
    inherits: true;
    initial-value: #dfe1e2;
  }

  @property --flex-color-on-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #fff;
  }

  @property --flex-color-info {
    syntax: "<color>";
    inherits: true;
    initial-value: #00bde3;
  }

  @property --flex-color-info-lighter {
    syntax: "<color>";
    inherits: true;
    initial-value: #e7f6f8;
  }

  @property --flex-color-warning {
    syntax: "<color>";
    inherits: true;
    initial-value: #face00;
  }

  @property --flex-color-warning-lighter {
    syntax: "<color>";
    inherits: true;
    initial-value: #faf3d1;
  }

  @property --flex-color-error-lighter {
    syntax: "<color>";
    inherits: true;
    initial-value: #f4e3db;
  }

  @property --flex-color-success-lighter {
    syntax: "<color>";
    inherits: true;
    initial-value: #e0f7f6;
  }

  @property --flex-space-3xs {
    syntax: "<length>";
    inherits: true;
    initial-value: 1px;
  }

  @property --flex-space-2xs {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
  }

  @property --flex-space-xs {
    syntax: "<length>";
    inherits: true;
    initial-value: 4px;
  }

  @property --flex-space-sm {
    syntax: "<length>";
    inherits: true;
    initial-value: 8px;
  }

  @property --flex-space-md {
    syntax: "<length>";
    inherits: true;
    initial-value: 16px;
  }

  @property --flex-space-lg {
    syntax: "<length>";
    inherits: true;
    initial-value: 24px;
  }

  @property --flex-space-xl {
    syntax: "<length>";
    inherits: true;
    initial-value: 32px;
  }

  @property --flex-focus-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
  }

  @property --flex-focus-offset-inset {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }

  @property --flex-control-max-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 480px;
  }

  @property --flex-control-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 40px;
  }

  @property --flex-control-padding {
    syntax: "<length>";
    inherits: true;
    initial-value: 8px;
  }

  @property --flex-control-margin-top {
    syntax: "<length>";
    inherits: true;
    initial-value: 8px;
  }

  :root[data-theme="light"] {
    --buncss-light: initial;
    --buncss-dark: ;
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    --buncss-light: ;
    --buncss-dark: initial;
    color-scheme: dark;
  }

  :root {
    --buncss-light: initial;
    --buncss-dark: ;
    color-scheme: light dark;
    --flex-gray-1: #fcfcfc;
    --flex-gray-2: #f9f9f9;
    --flex-gray-3: #f6f6f6;
    --flex-gray-4: #f3f3f3;
    --flex-gray-5: #f0f0f0;
    --flex-gray-10: #e6e6e6;
    --flex-gray-20: #c9c9c9;
    --flex-gray-30: #adadad;
    --flex-gray-40: #919191;
    --flex-gray-50: #757575;
    --flex-gray-60: #5c5c5c;
    --flex-gray-70: #454545;
    --flex-gray-80: #2e2e2e;
    --flex-gray-90: #1b1b1b;
    --flex-gray-100: #000;
    --flex-gray-cool-1: #fbfcfd;
    --flex-gray-cool-2: #f7f9fa;
    --flex-gray-cool-3: #f5f6f7;
    --flex-gray-cool-4: #f1f3f6;
    --flex-gray-cool-5: #edeff0;
    --flex-gray-cool-10: #dfe1e2;
    --flex-gray-cool-20: #c6cace;
    --flex-gray-cool-30: #a9aeb1;
    --flex-gray-cool-40: #8d9297;
    --flex-gray-cool-50: #71767a;
    --flex-gray-cool-60: #565c65;
    --flex-gray-cool-70: #3d4551;
    --flex-gray-cool-80: #2d2e2f;
    --flex-gray-cool-90: #1c1d1f;
    --flex-gray-warm-1: #fcfcfb;
    --flex-gray-warm-2: #f9f9f7;
    --flex-gray-warm-3: #f6f6f2;
    --flex-gray-warm-4: #f5f5f0;
    --flex-gray-warm-5: #f0f0ec;
    --flex-gray-warm-10: #e6e6e2;
    --flex-gray-warm-20: #cac9c0;
    --flex-gray-warm-30: #afaea2;
    --flex-gray-warm-40: #929285;
    --flex-gray-warm-50: #76766a;
    --flex-gray-warm-60: #5d5d52;
    --flex-gray-warm-70: #454540;
    --flex-gray-warm-80: #2e2e2a;
    --flex-gray-warm-90: #171716;
    --flex-red-5: #f9eeee;
    --flex-red-10: #f8e1de;
    --flex-red-20: #f7bbb1;
    --flex-red-30: #f2938c;
    --flex-red-40: #e9695f;
    --flex-red-50: #d83933;
    --flex-red-60: #a23737;
    --flex-red-70: #6f3331;
    --flex-red-80: #3e2927;
    --flex-red-90: #1b1616;
    --flex-red-vivid-5: #fff3f2;
    --flex-red-vivid-10: #fde0db;
    --flex-red-vivid-20: #fdb8ae;
    --flex-red-vivid-30: #ff8d7b;
    --flex-red-vivid-40: #fb5a47;
    --flex-red-vivid-50: #e52207;
    --flex-red-vivid-60: #b50909;
    --flex-red-vivid-70: #8b0a03;
    --flex-red-vivid-80: #5c1111;
    --flex-red-cool-5: #f8eff1;
    --flex-red-cool-10: #f3e1e4;
    --flex-red-cool-20: #ecbec6;
    --flex-red-cool-30: #e09aa6;
    --flex-red-cool-40: #e16b80;
    --flex-red-cool-50: #cd425b;
    --flex-red-cool-60: #9e394b;
    --flex-red-cool-70: #68363f;
    --flex-red-cool-80: #40282c;
    --flex-red-cool-90: #1e1517;
    --flex-red-cool-vivid-5: #fff2f5;
    --flex-red-cool-vivid-10: #f8dfe2;
    --flex-red-cool-vivid-20: #f8b9c5;
    --flex-red-cool-vivid-30: #fd8ba0;
    --flex-red-cool-vivid-40: #f45d79;
    --flex-red-cool-vivid-50: #e41d3d;
    --flex-red-cool-vivid-60: #b21d38;
    --flex-red-cool-vivid-70: #822133;
    --flex-red-cool-vivid-80: #4f1c24;
    --flex-red-warm-5: #f6efea;
    --flex-red-warm-10: #f4e3db;
    --flex-red-warm-20: #ecc0a7;
    --flex-red-warm-30: #dca081;
    --flex-red-warm-40: #d27a56;
    --flex-red-warm-50: #c3512c;
    --flex-red-warm-60: #805039;
    --flex-red-warm-70: #524236;
    --flex-red-warm-80: #332d29;
    --flex-red-warm-90: #1f1c18;
    --flex-red-warm-vivid-5: #fff5ee;
    --flex-red-warm-vivid-10: #fce1d4;
    --flex-red-warm-vivid-20: #f6bd9c;
    --flex-red-warm-vivid-30: #f39268;
    --flex-red-warm-vivid-40: #ef5e25;
    --flex-red-warm-vivid-50: #d54309;
    --flex-red-warm-vivid-60: #9c3d10;
    --flex-red-warm-vivid-70: #63340f;
    --flex-red-warm-vivid-80: #3e2a1e;
    --flex-orange-5: #f6efe9;
    --flex-orange-10: #f2e4d4;
    --flex-orange-20: #f3bf90;
    --flex-orange-30: #f09860;
    --flex-orange-40: #dd7533;
    --flex-orange-50: #a86437;
    --flex-orange-60: #775540;
    --flex-orange-70: #524236;
    --flex-orange-80: #332d27;
    --flex-orange-90: #1b1614;
    --flex-orange-vivid-5: #fef2e4;
    --flex-orange-vivid-10: #fce2c5;
    --flex-orange-vivid-20: #ffbc78;
    --flex-orange-vivid-30: #fa9441;
    --flex-orange-vivid-40: #e66f0e;
    --flex-orange-vivid-50: #c05600;
    --flex-orange-vivid-60: #8c471c;
    --flex-orange-vivid-70: #5f3617;
    --flex-orange-vivid-80: #352313;
    --flex-orange-warm-5: #faeee5;
    --flex-orange-warm-10: #fbe0d0;
    --flex-orange-warm-20: #f7bca2;
    --flex-orange-warm-30: #f3966d;
    --flex-orange-warm-40: #e17141;
    --flex-orange-warm-50: #bd5727;
    --flex-orange-warm-60: #914734;
    --flex-orange-warm-70: #633a32;
    --flex-orange-warm-80: #3d2925;
    --flex-orange-warm-90: #1c1615;
    --flex-orange-warm-vivid-5: #fff3ea;
    --flex-orange-warm-vivid-10: #ffe2d1;
    --flex-orange-warm-vivid-20: #fbbaa7;
    --flex-orange-warm-vivid-30: #fc906d;
    --flex-orange-warm-vivid-40: #ff580a;
    --flex-orange-warm-vivid-50: #cf4900;
    --flex-orange-warm-vivid-60: #a72f10;
    --flex-orange-warm-vivid-70: #782312;
    --flex-orange-warm-vivid-80: #3d231d;
    --flex-gold-5: #f5f0e6;
    --flex-gold-10: #f1e5cd;
    --flex-gold-20: #dec69a;
    --flex-gold-30: #c7a97b;
    --flex-gold-40: #ad8b65;
    --flex-gold-50: #8e704f;
    --flex-gold-60: #6b5947;
    --flex-gold-70: #4d4438;
    --flex-gold-80: #322d26;
    --flex-gold-90: #191714;
    --flex-gold-vivid-5: #fef0c8;
    --flex-gold-vivid-10: #ffe396;
    --flex-gold-vivid-20: #ffbe2e;
    --flex-gold-vivid-30: #e5a000;
    --flex-gold-vivid-40: #c2850c;
    --flex-gold-vivid-50: #936f38;
    --flex-gold-vivid-60: #7a591a;
    --flex-gold-vivid-70: #5c410a;
    --flex-gold-vivid-80: #3b2b15;
    --flex-yellow-5: #faf3d1;
    --flex-yellow-10: #f5e6af;
    --flex-yellow-20: #e6c74c;
    --flex-yellow-30: #c9ab48;
    --flex-yellow-40: #a88f48;
    --flex-yellow-50: #8a7237;
    --flex-yellow-60: #6b5a39;
    --flex-yellow-70: #504332;
    --flex-yellow-80: #332d27;
    --flex-yellow-90: #1a1614;
    --flex-yellow-vivid-5: #fff5c2;
    --flex-yellow-vivid-10: #fee685;
    --flex-yellow-vivid-20: #face00;
    --flex-yellow-vivid-30: #ddaa01;
    --flex-yellow-vivid-40: #b38c00;
    --flex-yellow-vivid-50: #947100;
    --flex-yellow-vivid-60: #776017;
    --flex-yellow-vivid-70: #5c4809;
    --flex-yellow-vivid-80: #422d19;
    --flex-green-5: #eaf4dd;
    --flex-green-10: #dfeacd;
    --flex-green-20: #b8d293;
    --flex-green-30: #9bb672;
    --flex-green-40: #7d9b4e;
    --flex-green-50: #607f35;
    --flex-green-60: #4c6424;
    --flex-green-70: #3c4a29;
    --flex-green-80: #293021;
    --flex-green-90: #161814;
    --flex-green-vivid-5: #ddf9c7;
    --flex-green-vivid-10: #c5ee93;
    --flex-green-vivid-20: #98d035;
    --flex-green-vivid-30: #7fb135;
    --flex-green-vivid-40: #719f2a;
    --flex-green-vivid-50: #538200;
    --flex-green-vivid-60: #466c04;
    --flex-green-vivid-70: #2f4a0b;
    --flex-green-vivid-80: #243413;
    --flex-green-cool-5: #ecf3ec;
    --flex-green-cool-10: #dbebde;
    --flex-green-cool-20: #b4d0b9;
    --flex-green-cool-30: #86b98e;
    --flex-green-cool-40: #5e9f69;
    --flex-green-cool-50: #4d8055;
    --flex-green-cool-60: #446443;
    --flex-green-cool-70: #37493b;
    --flex-green-cool-80: #28312a;
    --flex-green-cool-90: #1a1f1a;
    --flex-green-cool-vivid-5: #e3f5e1;
    --flex-green-cool-vivid-10: #b7f5bd;
    --flex-green-cool-vivid-20: #70e17b;
    --flex-green-cool-vivid-30: #21c834;
    --flex-green-cool-vivid-40: #00a91c;
    --flex-green-cool-vivid-50: #008817;
    --flex-green-cool-vivid-60: #216e1f;
    --flex-green-cool-vivid-70: #154c21;
    --flex-green-cool-vivid-80: #19311e;
    --flex-green-warm-5: #f1f4d7;
    --flex-green-warm-10: #e7eab7;
    --flex-green-warm-20: #cbd17a;
    --flex-green-warm-30: #a6b557;
    --flex-green-warm-40: #8a984b;
    --flex-green-warm-50: #6f7a41;
    --flex-green-warm-60: #5a5f38;
    --flex-green-warm-70: #45472f;
    --flex-green-warm-80: #2d2f21;
    --flex-green-warm-90: #171712;
    --flex-green-warm-vivid-5: #f5fbc1;
    --flex-green-warm-vivid-10: #e7f434;
    --flex-green-warm-vivid-20: #c5d30a;
    --flex-green-warm-vivid-30: #a3b72c;
    --flex-green-warm-vivid-40: #7e9c1d;
    --flex-green-warm-vivid-50: #6a7d00;
    --flex-green-warm-vivid-60: #5a6613;
    --flex-green-warm-vivid-70: #4b4e10;
    --flex-green-warm-vivid-80: #38380b;
    --flex-cyan-5: #e7f6f8;
    --flex-cyan-10: #ccecf2;
    --flex-cyan-20: #99deea;
    --flex-cyan-30: #5dc0d1;
    --flex-cyan-40: #449dac;
    --flex-cyan-50: #168092;
    --flex-cyan-60: #2a646d;
    --flex-cyan-70: #2c4a4e;
    --flex-cyan-80: #203133;
    --flex-cyan-90: #111819;
    --flex-cyan-vivid-5: #e5faff;
    --flex-cyan-vivid-10: #a8f2ff;
    --flex-cyan-vivid-20: #52daf2;
    --flex-cyan-vivid-30: #00bde3;
    --flex-cyan-vivid-40: #009ec1;
    --flex-cyan-vivid-50: #0081a1;
    --flex-cyan-vivid-60: #00687d;
    --flex-cyan-vivid-70: #0e4f5c;
    --flex-cyan-vivid-80: #093b44;
    --flex-mint-5: #dbf6ed;
    --flex-mint-10: #c7efe2;
    --flex-mint-20: #92d9bb;
    --flex-mint-30: #5abf95;
    --flex-mint-40: #34a37e;
    --flex-mint-50: #2e8367;
    --flex-mint-60: #286846;
    --flex-mint-70: #204e34;
    --flex-mint-80: #193324;
    --flex-mint-90: #0d1a12;
    --flex-mint-vivid-5: #c9fbeb;
    --flex-mint-vivid-10: #83fcd4;
    --flex-mint-vivid-20: #0ceda6;
    --flex-mint-vivid-30: #04c585;
    --flex-mint-vivid-40: #00a871;
    --flex-mint-vivid-50: #008659;
    --flex-mint-vivid-60: #146947;
    --flex-mint-vivid-70: #0c4e29;
    --flex-mint-vivid-80: #0d351e;
    --flex-mint-cool-5: #e0f7f6;
    --flex-mint-cool-10: #c4eeeb;
    --flex-mint-cool-20: #9bd4cf;
    --flex-mint-cool-30: #6fbab3;
    --flex-mint-cool-40: #4f9e99;
    --flex-mint-cool-50: #40807e;
    --flex-mint-cool-60: #376462;
    --flex-mint-cool-70: #2a4b45;
    --flex-mint-cool-80: #203131;
    --flex-mint-cool-90: #111818;
    --flex-mint-cool-vivid-5: #d5fbf3;
    --flex-mint-cool-vivid-10: #7efbe1;
    --flex-mint-cool-vivid-20: #29e1cb;
    --flex-mint-cool-vivid-30: #1dc2ae;
    --flex-mint-cool-vivid-40: #00a398;
    --flex-mint-cool-vivid-50: #008480;
    --flex-mint-cool-vivid-60: #0f6460;
    --flex-mint-cool-vivid-70: #0b4b3f;
    --flex-mint-cool-vivid-80: #123131;
    --flex-blue-5: #eff6fb;
    --flex-blue-10: #d9e8f6;
    --flex-blue-20: #aacdec;
    --flex-blue-30: #73b3e7;
    --flex-blue-40: #4f97d1;
    --flex-blue-50: #2378c3;
    --flex-blue-60: #2c608a;
    --flex-blue-70: #274863;
    --flex-blue-80: #1f303e;
    --flex-blue-90: #11181d;
    --flex-blue-vivid-5: #e8f5ff;
    --flex-blue-vivid-10: #cfe8ff;
    --flex-blue-vivid-20: #a1d3ff;
    --flex-blue-vivid-30: #58b4ff;
    --flex-blue-vivid-40: #2491ff;
    --flex-blue-vivid-50: #0076d6;
    --flex-blue-vivid-60: #005ea2;
    --flex-blue-vivid-70: #0b4778;
    --flex-blue-vivid-80: #112f4e;
    --flex-blue-cool-5: #e7f2f5;
    --flex-blue-cool-10: #dae9ee;
    --flex-blue-cool-20: #adcfdc;
    --flex-blue-cool-30: #82b4c9;
    --flex-blue-cool-40: #6499af;
    --flex-blue-cool-50: #3a7d95;
    --flex-blue-cool-60: #2e6276;
    --flex-blue-cool-70: #224a58;
    --flex-blue-cool-80: #14333d;
    --flex-blue-cool-90: #0f191c;
    --flex-blue-cool-vivid-5: #e1f3f8;
    --flex-blue-cool-vivid-10: #c3ebfa;
    --flex-blue-cool-vivid-20: #97d4ea;
    --flex-blue-cool-vivid-30: #59b9de;
    --flex-blue-cool-vivid-40: #28a0cb;
    --flex-blue-cool-vivid-50: #0d7ea2;
    --flex-blue-cool-vivid-60: #07648d;
    --flex-blue-cool-vivid-70: #074b69;
    --flex-blue-cool-vivid-80: #002d3f;
    --flex-blue-warm-5: #ecf1f7;
    --flex-blue-warm-10: #e1e7f1;
    --flex-blue-warm-20: #bbcae4;
    --flex-blue-warm-30: #98afd2;
    --flex-blue-warm-40: #7292c7;
    --flex-blue-warm-50: #4a77b4;
    --flex-blue-warm-60: #345d96;
    --flex-blue-warm-70: #2f4668;
    --flex-blue-warm-80: #252f3e;
    --flex-blue-warm-90: #13171f;
    --flex-blue-warm-vivid-5: #edf5ff;
    --flex-blue-warm-vivid-10: #d4e5ff;
    --flex-blue-warm-vivid-20: #adcdff;
    --flex-blue-warm-vivid-30: #81aefc;
    --flex-blue-warm-vivid-40: #5994f6;
    --flex-blue-warm-vivid-50: #2672de;
    --flex-blue-warm-vivid-60: #0050d8;
    --flex-blue-warm-vivid-70: #1a4480;
    --flex-blue-warm-vivid-80: #162e51;
    --flex-indigo-5: #efeff8;
    --flex-indigo-10: #e5e4fa;
    --flex-indigo-20: #c5c5f3;
    --flex-indigo-30: #a5a8eb;
    --flex-indigo-40: #8889db;
    --flex-indigo-50: #676cc8;
    --flex-indigo-60: #4d52af;
    --flex-indigo-70: #3d4076;
    --flex-indigo-80: #2b2c40;
    --flex-indigo-90: #16171f;
    --flex-indigo-vivid-5: #f0f0ff;
    --flex-indigo-vivid-10: #e0e0ff;
    --flex-indigo-vivid-20: #ccceff;
    --flex-indigo-vivid-30: #a3a7fa;
    --flex-indigo-vivid-40: #8289ff;
    --flex-indigo-vivid-50: #656bd7;
    --flex-indigo-vivid-60: #4a50c4;
    --flex-indigo-vivid-70: #3333a3;
    --flex-indigo-vivid-80: #212463;
    --flex-indigo-cool-5: #eef0f9;
    --flex-indigo-cool-10: #e1e6f9;
    --flex-indigo-cool-20: #bbc8f5;
    --flex-indigo-cool-30: #96abee;
    --flex-indigo-cool-40: #6b8ee8;
    --flex-indigo-cool-50: #496fd8;
    --flex-indigo-cool-60: #3f57a6;
    --flex-indigo-cool-70: #374274;
    --flex-indigo-cool-80: #292d42;
    --flex-indigo-cool-90: #151622;
    --flex-indigo-cool-vivid-5: #edf0ff;
    --flex-indigo-cool-vivid-10: #dee5ff;
    --flex-indigo-cool-vivid-20: #b8c8ff;
    --flex-indigo-cool-vivid-30: #94adff;
    --flex-indigo-cool-vivid-40: #628ef4;
    --flex-indigo-cool-vivid-50: #4866ff;
    --flex-indigo-cool-vivid-60: #3e4ded;
    --flex-indigo-cool-vivid-70: #222fbf;
    --flex-indigo-cool-vivid-80: #1b2b85;
    --flex-indigo-warm-5: #f1eff7;
    --flex-indigo-warm-10: #e7e3fa;
    --flex-indigo-warm-20: #cbc4f2;
    --flex-indigo-warm-30: #afa5e8;
    --flex-indigo-warm-40: #9287d8;
    --flex-indigo-warm-50: #7665d1;
    --flex-indigo-warm-60: #5e519e;
    --flex-indigo-warm-70: #453c7b;
    --flex-indigo-warm-80: #2e2c40;
    --flex-indigo-warm-90: #18161d;
    --flex-indigo-warm-vivid-5: #f5f2ff;
    --flex-indigo-warm-vivid-10: #e4deff;
    --flex-indigo-warm-vivid-20: #cfc4fd;
    --flex-indigo-warm-vivid-30: #b69fff;
    --flex-indigo-warm-vivid-40: #967efb;
    --flex-indigo-warm-vivid-50: #745fe9;
    --flex-indigo-warm-vivid-60: #5942d2;
    --flex-indigo-warm-vivid-70: #3d2c9d;
    --flex-indigo-warm-vivid-80: #261f5b;
    --flex-violet-5: #f4f1f9;
    --flex-violet-10: #ebe3f9;
    --flex-violet-20: #d0c3e9;
    --flex-violet-30: #b8a2e3;
    --flex-violet-40: #9d84d2;
    --flex-violet-50: #8168b3;
    --flex-violet-60: #665190;
    --flex-violet-70: #4c3d69;
    --flex-violet-80: #312b3f;
    --flex-violet-90: #18161d;
    --flex-violet-vivid-5: #f7f2ff;
    --flex-violet-vivid-10: #ede3ff;
    --flex-violet-vivid-20: #d5bfff;
    --flex-violet-vivid-30: #c39deb;
    --flex-violet-vivid-40: #ad79e9;
    --flex-violet-vivid-50: #9355dc;
    --flex-violet-vivid-60: #783cb9;
    --flex-violet-vivid-70: #54278f;
    --flex-violet-vivid-80: #39215e;
    --flex-violet-warm-5: #f8f0f9;
    --flex-violet-warm-10: #f6dff8;
    --flex-violet-warm-20: #e2bee4;
    --flex-violet-warm-30: #d29ad8;
    --flex-violet-warm-40: #bf77c8;
    --flex-violet-warm-50: #b04abd;
    --flex-violet-warm-60: #864381;
    --flex-violet-warm-70: #5c395a;
    --flex-violet-warm-80: #382936;
    --flex-violet-warm-90: #1b151b;
    --flex-violet-warm-vivid-5: #fef2ff;
    --flex-violet-warm-vivid-10: #fbdcff;
    --flex-violet-warm-vivid-20: #f4b2ff;
    --flex-violet-warm-vivid-30: #ee83ff;
    --flex-violet-warm-vivid-40: #d85bef;
    --flex-violet-warm-vivid-50: #be32d0;
    --flex-violet-warm-vivid-60: #93348c;
    --flex-violet-warm-vivid-70: #711e6c;
    --flex-violet-warm-vivid-80: #481441;
    --flex-magenta-5: #f9f0f2;
    --flex-magenta-10: #f6e1e8;
    --flex-magenta-20: #f0bbcc;
    --flex-magenta-30: #e895b3;
    --flex-magenta-40: #e0699f;
    --flex-magenta-50: #c84281;
    --flex-magenta-60: #8b4566;
    --flex-magenta-70: #66364b;
    --flex-magenta-80: #402731;
    --flex-magenta-90: #1b1617;
    --flex-magenta-vivid-5: #fff2f5;
    --flex-magenta-vivid-10: #ffddea;
    --flex-magenta-vivid-20: #ffb4cf;
    --flex-magenta-vivid-30: #ff87b2;
    --flex-magenta-vivid-40: #fd4496;
    --flex-magenta-vivid-50: #d72d79;
    --flex-magenta-vivid-60: #ab2165;
    --flex-magenta-vivid-70: #731f44;
    --flex-magenta-vivid-80: #4f172e;
    --flex-white: #fff;
    --flex-black: #000;
    --flex-color-bg: var(--buncss-light, var(--flex-white)) var(--buncss-dark, var(--flex-gray-90));
    --flex-color-bg-subtle: var(--buncss-light, var(--flex-gray-5)) var(--buncss-dark, var(--flex-gray-80));
    --flex-color-surface: var(--buncss-light, var(--flex-white)) var(--buncss-dark, var(--flex-gray-80));
    --flex-color-border: var(--buncss-light, var(--flex-gray-cool-10)) var(--buncss-dark, var(--flex-gray-70));
    --flex-color-text: var(--buncss-light, var(--flex-gray-90)) var(--buncss-dark, var(--flex-gray-5));
    --flex-color-text-muted: var(--buncss-light, var(--flex-gray-cool-60)) var(--buncss-dark, var(--flex-gray-cool-30));
    --flex-color-ink: var(--buncss-light, var(--flex-gray-cool-50)) var(--buncss-dark, var(--flex-gray-cool-30));
    --flex-color-table-header: var(--buncss-light, var(--flex-gray-cool-10)) var(--buncss-dark, var(--flex-gray-70));
    --flex-color-on-accent: var(--flex-white);
    --flex-color-accent: var(--buncss-light, var(--flex-blue-vivid-60)) var(--buncss-dark, var(--flex-blue-30));
    --flex-color-link: var(--buncss-light, var(--flex-blue-vivid-60)) var(--buncss-dark, var(--flex-blue-vivid-30));
    --flex-color-link-visited: var(--buncss-light, var(--flex-violet-vivid-70)) var(--buncss-dark, var(--flex-violet-vivid-30));
    --flex-color-link-hover: var(--buncss-light, var(--flex-blue-warm-vivid-70)) var(--buncss-dark, var(--flex-blue-vivid-20));
    --flex-color-link-active: var(--buncss-light, var(--flex-blue-warm-vivid-80)) var(--buncss-dark, var(--flex-blue-vivid-10));
    --flex-color-focus: var(--buncss-light, var(--flex-blue-vivid-40)) var(--buncss-dark, var(--flex-blue-vivid-30));
    --flex-color-tooltip-bg: var(--buncss-light, var(--flex-gray-90)) var(--buncss-dark, var(--flex-gray-5));
    --flex-color-tooltip-text: var(--buncss-light, var(--flex-gray-5)) var(--buncss-dark, var(--flex-gray-90));
    --flex-color-info: var(--buncss-light, var(--flex-cyan-vivid-30)) var(--buncss-dark, var(--flex-cyan-vivid-20));
    --flex-color-info-lighter: var(--buncss-light, var(--flex-cyan-5)) var(--buncss-dark, var(--flex-cyan-80));
    --flex-color-success: var(--buncss-light, var(--flex-green-cool-vivid-40)) var(--buncss-dark, var(--flex-green-cool-vivid-20));
    --flex-color-success-lighter: var(--buncss-light, var(--flex-green-cool-5)) var(--buncss-dark, var(--flex-green-cool-80));
    --flex-color-warning: var(--buncss-light, var(--flex-gold-vivid-20)) var(--buncss-dark, var(--flex-yellow-vivid-30));
    --flex-color-warning-lighter: var(--buncss-light, var(--flex-yellow-5)) var(--buncss-dark, var(--flex-yellow-80));
    --flex-color-error: var(--buncss-light, var(--flex-red-warm-vivid-50)) var(--buncss-dark, var(--flex-red-vivid-20));
    --flex-color-error-lighter: var(--buncss-light, var(--flex-red-warm-10)) var(--buncss-dark, var(--flex-red-warm-80));
    --flex-color-emergency: var(--flex-red-warm-vivid-60);
    --flex-color-disabled: var(--flex-gray-50);
    --flex-color-disabled-light: var(--flex-gray-40);
    --flex-color-disabled-lighter: var(--flex-gray-20);
    --flex-color-disabled-dark: var(--flex-gray-70);
    --flex-space-3xs: 1px;
    --flex-space-2xs: 2px;
    --flex-space-xs: 4px;
    --flex-space-sm: 8px;
    --flex-space-md: 16px;
    --flex-space-lg: 24px;
    --flex-space-xl: 32px;
    --flex-content-narrow: 45ch;
    --flex-content-default: 60rem;
    --flex-content-wide: 85ch;
    --flex-content-max-width: 60rem;
    --flex-sidebar-width: 15rem;
    --flex-sidebar-max-offset: 120px;
    --flex-bp-sm: 37.5rem;
    --flex-bp-md: 48rem;
    --flex-bp-lg: 64rem;
    --flex-radius-sm: 4px;
    --flex-radius-md: 8px;
    --flex-radius-bubble: 14px;
    --flex-shadow-md: 0 4px 12px #00000026;
    --flex-font-sans: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    --flex-font-mono: "Roboto Mono Web", "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
    --flex-text-xs: .7em;
    --flex-text-sm: .82em;
    --flex-text-base: .9em;
    --flex-text-uswds: 1.06rem;
    --flex-text-tag: .875rem;
    --flex-focus-ring: 4px solid var(--flex-color-accent);
    --flex-focus-offset: 2px;
    --flex-focus-offset-inset: 0px;
    --flex-control-max-width: 30rem;
    --flex-control-height: 2.5rem;
    --flex-control-padding: .5rem;
    --flex-control-margin-top: .5rem;
    --flex-control-border: 1px solid var(--flex-color-text-muted);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --buncss-light: ;
      --buncss-dark: initial;
    }
  }
}

/* src/entrypoints/app/public/compositions.css */
@layer composition {
  .l-stack {
    display: flex;
    gap: var(--stack-space, var(--flex-space-md));
    flex-direction: column;
  }

  .l-stack[data-space="lg"] {
    --stack-space: var(--flex-space-xl);
  }

  .l-stack[data-space="xl"] {
    --stack-space: var(--flex-space-2xl);
  }

  .l-cluster {
    display: flex;
    gap: var(--cluster-space, var(--flex-space-sm));
    flex-wrap: wrap;
    align-items:  center;
  }

  .l-center {
    max-inline-size: var(--flex-content-max-width);
    padding-inline: var(--flex-space-md);
    padding-block: var(--flex-space-lg);
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .l-sidebar {
    display: flex;
    gap: var(--flex-space-lg);
    container-type: inline-size;
    flex-wrap: wrap;
  }

  .l-sidebar > :first-child {
    flex-grow: 1;
    flex-basis: 20rem;
  }

  .l-sidebar > :last-child {
    flex-grow: 999;
    flex-basis: 0;
    min-inline-size: 50%;
  }

  @container (inline-size <= 40rem) {
    .l-sidebar > :first-child {
      flex-basis: 100%;
    }

    .l-sidebar > :last-child {
      min-inline-size: 100%;
    }
  }

  .l-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 250px), 100%), 1fr));
    gap: var(--grid-space, var(--flex-space-md));
    container-type: inline-size;
  }

  .l-switcher {
    display: flex;
    gap: var(--switcher-space, var(--flex-space-md));
    flex-wrap: wrap;
  }

  .l-switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold, 30rem)  - 100%) * 999);
  }
}

/* src/entrypoints/app/public/page-layouts.css */
@layer composition {
  .l-page-content, .l-page-main {
    display: grid;
    grid-template-columns: [full-start] minmax(var(--flex-space-md), 1fr) [feature-start] minmax(0, 5rem) [popout-start] minmax(0, 2rem) [content-start] min(var(--flex-content-default), calc(100% - var(--flex-space-md) * 2)) [content-end] minmax(0, 2rem) [popout-end] minmax(0, 5rem) [feature-end] minmax(var(--flex-space-md), 1fr) [full-end];
    row-gap: var(--flex-space-md);
    container-type: inline-size;
    container-name: page-content;
  }

  .l-page-content > *, .l-page-main > * {
    grid-column: content;
    min-inline-size: 0;
  }

  .l-page-content > .l-popout, .l-page-main > .l-popout {
    grid-column: popout;
  }

  .l-page-content > .l-feature, .l-page-main > .l-feature {
    grid-column: feature;
  }

  .l-page-content > .l-full, .l-page-main > .l-full {
    grid-column: full;
  }

  .l-page-content {
    max-inline-size: var(--flex-content-max-width);
    padding-block: var(--flex-space-lg);
    inline-size: 100%;
  }

  .l-page-content--full {
    padding: 0;
  }

  .l-page-content[data-width="narrow"], .l-page-main[data-width="narrow"] {
    --flex-content-default: var(--flex-content-narrow);
  }

  .l-page-content[data-width="wide"], .l-page-main[data-width="wide"] {
    --flex-content-default: var(--flex-content-wide);
  }

  .l-page-sidebar-start {
    display: grid;
    grid-template-columns: var(--flex-sidebar-width) minmax(0, 1fr);
    gap: var(--flex-space-lg);
    max-inline-size: var(--flex-content-max-width);
    padding-inline: var(--flex-space-md);
    padding-block: var(--flex-space-lg);
    inline-size: 100%;
  }

  .l-page-sidebar-start > .l-page-sidebar {
    position: sticky;
    z-index: 1;
    max-block-size: calc(100vh - var(--flex-sidebar-max-offset));
    overflow-y: auto;
    container-type: inline-size;
    container-name: page-sidebar;
    padding-inline-start: var(--flex-space-md);
    top: var(--flex-space-md);
  }

  .l-page-sidebar-start > .l-page-main {
    min-inline-size: 0;
  }

  @media (max-width: 48rem) {
    .l-page-sidebar-start {
      grid-template-columns: minmax(0, 1fr);
    }

    .l-page-sidebar-start > .l-page-sidebar {
      position: static;
      overflow-y: visible;
      border-block-end: 1px solid var(--flex-color-border);
      max-block-size: none;
      padding-block-end: var(--flex-space-md);
      padding-inline-start: var(--flex-space-md);
      padding-inline-end: var(--flex-space-md);
    }
  }

  .l-page-sidebar-end {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--flex-sidebar-width);
    gap: var(--flex-space-lg);
    max-inline-size: var(--flex-content-max-width);
    padding-inline: var(--flex-space-md);
    padding-block: var(--flex-space-lg);
    inline-size: 100%;
  }

  .l-page-sidebar-end > .l-page-main {
    min-inline-size: 0;
  }

  .l-page-sidebar-end > .l-page-sidebar {
    container-type: inline-size;
    container-name: page-sidebar;
    padding-inline-end: var(--flex-space-md);
  }

  @media (max-width: 48rem) {
    .l-page-sidebar-end {
      grid-template-columns: minmax(0, 1fr);
    }

    .l-page-sidebar-end > .l-page-sidebar {
      border-block-start: 1px solid var(--flex-color-border);
      padding-block-start: var(--flex-space-md);
      padding-inline-start: var(--flex-space-md);
      padding-inline-end: var(--flex-space-md);
    }
  }

  .conversational-form-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    align-items:  start;
  }

  @media (max-width: 64rem) {
    .conversational-form-layout {
      grid-template-columns: 1fr;
    }

    .conversational-form-layout__assistant {
      position: sticky;
      z-index: 10;
      max-block-size: 50vh;
      bottom: 0;
    }
  }

  .conversational-form-layout__form {
    display: flex;
    gap: var(--flex-space-md);
    padding: var(--flex-space-lg);
    max-inline-size: var(--flex-content-default);
    flex-direction: column;
  }

  .conversational-form-layout__assistant {
    position: sticky;
    border-inline-start: 1px solid var(--flex-color-border);
    display: flex;
    flex-direction: column;
    max-block-size: 100dvh;
    top: 0;
  }

  .conversational-form-layout .field-collected {
    animation: field-flash .6s ease-out;
  }

  @keyframes field-flash {
    from {
      background: var(--flex-color-bg-subtle);
    }

    to {
      background: none;
    }
  }
}

/* src/entrypoints/app/public/base.css */
@layer base {
  html {
    font-family: var(--flex-font-sans);
    font-size: 100%;
    line-height: 1.15;
  }

  body {
    display: flex;
    color: var(--flex-color-text);
    background: var(--flex-color-bg);
    flex-direction: column;
    min-block-size: 100vh;
  }

  main {
    flex: 1;
  }

  h1, h2, h3 {
    font-weight: 600;
  }

  h1 + *, h2 + *, h3 + * {
    margin-block-start: var(--flex-space-sm);
  }

  * + h2, * + h3 {
    margin-block-start: var(--flex-space-lg);
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.43em;
  }

  h3 {
    font-size: 1.17em;
  }

  a {
    color: var(--flex-color-accent);
    text-decoration: underline;
  }

  a:hover {
    text-decoration: none;
  }

  :focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset);
  }

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

/* src/entrypoints/app/public/base-classes.css */
@layer base {
  .flex-control, .flex-input, .flex-select, .flex-textarea {
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    background-color: var(--flex-color-surface);
    border: var(--flex-control-border);
    appearance: none;
    display: block;
    max-inline-size: var(--flex-control-max-width);
    padding: var(--flex-control-padding);
    border-radius: 0;
    inline-size: 100%;
    margin-block-start: var(--flex-control-margin-top);
    line-height: 1.3;
  }

  .flex-control:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset-inset);
  }

  .flex-input:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset-inset);
  }

  .flex-select:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset-inset);
  }

  .flex-textarea:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset-inset);
  }

  .flex-control:disabled, .flex-input:disabled, .flex-select:disabled, .flex-textarea:disabled {
    background-color: var(--flex-color-bg);
    color: var(--flex-color-text-muted);
    cursor: not-allowed;
  }

  .flex-input[data-state="error"], .flex-textarea[data-state="error"], .flex-select[data-state="error"] {
    border-color: var(--flex-color-error);
    border-width: 4px;
  }

  .flex-input[data-state="success"], .flex-textarea[data-state="success"] {
    border-color: var(--flex-color-success);
    border-width: 4px;
  }

  .flex-prose, .flex-label, .flex-error-message, .flex-legend {
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    line-height: 1.3;
  }

  .flex-checkbox__label, .flex-radio__label {
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-weight: 400;
    line-height: 1.3;
  }

  .flex-checkbox__input:focus-visible + .flex-checkbox__label:before {
    outline: .25rem solid var(--flex-color-accent);
    outline-offset: .25rem;
  }

  .flex-radio__input:focus-visible + .flex-radio__label:before {
    outline: .25rem solid var(--flex-color-accent);
    outline-offset: .25rem;
  }

  .flex-checkbox__input:disabled + .flex-checkbox__label, .flex-radio__input:disabled + .flex-radio__label {
    color: var(--flex-color-disabled);
    cursor: not-allowed;
  }

  .flex-alert:before, .flex-site-alert__body:before {
    content: "";
    position: absolute;
    background-color: var(--flex-color-text);
    mask-size: contain;
    mask-repeat: no-repeat;
  }
}

/* src/design-system/components/flex-accordion/styles.css */
@layer block {
  flex-accordion {
    display: block;
    overflow: hidden;
    min-inline-size: 0;
  }

  flex-accordion[data-variant="bordered"] .flex-accordion__button {
    border-inline: 1px solid var(--flex-color-border);
  }

  flex-accordion[data-variant="bordered"] .flex-accordion__content {
    border-inline: 1px solid var(--flex-color-border);
  }

  .flex-accordion__heading {
    margin: 0;
  }

  .flex-accordion__button {
    display: flex;
    padding: var(--flex-space-md);
    background-color: var(--flex-color-bg-subtle);
    border: none;
    border-block-end: 1px solid var(--flex-color-border);
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    cursor: pointer;
    text-align: start;
    justify-content: space-between;
    align-items:  center;
    inline-size: 100%;
    font-weight: 700;
  }

  .flex-accordion__button:hover {
    background-color: var(--flex-color-border);
  }

  .flex-accordion__button:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -4px;
    z-index: 1;
    position: relative;
  }

  .flex-accordion__button:after {
    content: "";
    background-color: var(--flex-color-text);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    flex-shrink: 0;
    block-size: 1.5rem;
    inline-size: 1.5rem;
    margin-inline-start: var(--flex-space-md);
  }

  .flex-accordion__button[aria-expanded="true"]:after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3C/svg%3E");
  }

  .flex-accordion__content {
    padding: var(--flex-space-md);
    border-block-end: 1px solid var(--flex-color-border);
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    line-height: 1.5;
  }

  .flex-accordion__content[hidden] {
    display: none;
  }
}

/* src/design-system/components/flex-alert/styles.css */
@layer block {
  .flex-alert {
    position: relative;
    background-color: var(--flex-color-info-lighter);
    border-inline-start: var(--flex-space-sm) solid var(--flex-color-info);
    color: var(--flex-color-text);
    padding-block-start: 1rem;
    padding-block-end: 1rem;
    padding-inline-start: 3.5rem;
    padding-inline-end: 1.25rem;
  }

  .flex-alert:before {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    top: var(--flex-space-md);
  }

  .flex-alert:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: var(--flex-space-md);
  }

  .flex-alert:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: var(--flex-space-md);
  }

  .flex-alert:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: var(--flex-space-md);
  }

  .flex-alert:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: var(--flex-space-md);
  }

  .flex-alert:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: var(--flex-space-md);
  }

  .flex-alert:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: var(--flex-space-md);
  }

  .flex-alert[data-variant="info"]:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
  }

  .flex-alert:not([data-variant]):before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
  }

  .flex-alert[data-variant="success"]:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  }

  .flex-alert[data-variant="warning"]:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
  }

  .flex-alert[data-variant="error"]:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  }

  .flex-alert[data-variant="emergency"]:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  }

  .flex-alert[data-variant="info"] {
    background-color: var(--flex-color-info-lighter);
    border-inline-start-color: var(--flex-color-info);
  }

  .flex-alert[data-variant="warning"] {
    background-color: var(--flex-color-warning-lighter);
    border-inline-start-color: var(--flex-color-warning);
  }

  .flex-alert[data-variant="success"] {
    background-color: var(--flex-color-success-lighter);
    border-inline-start-color: var(--flex-color-success);
  }

  .flex-alert[data-variant="error"] {
    background-color: var(--flex-color-error-lighter);
    border-inline-start-color: var(--flex-color-error);
  }

  .flex-alert[data-variant="emergency"] {
    background-color: var(--flex-color-emergency);
    border-inline-start-color: var(--flex-color-emergency);
    border-inline-start-width: var(--flex-space-md);
    color: var(--flex-color-on-accent);
  }

  .flex-alert[data-variant="emergency"] .flex-alert__heading {
    color: var(--flex-color-on-accent);
  }

  .flex-alert[data-variant="emergency"] .flex-alert__text {
    color: var(--flex-color-on-accent);
  }

  .flex-alert[data-variant="emergency"] a {
    color: var(--flex-color-on-accent);
  }

  .flex-alert[data-variant="emergency"]:before {
    background-color: var(--flex-color-on-accent);
  }

  .flex-alert[data-slim] {
    padding-block: var(--flex-space-xs);
    border-inline-start-width: var(--flex-space-xs);
    padding-inline-start: var(--flex-space-md);
  }

  .flex-alert[data-slim]:before {
    display: none;
  }

  .flex-alert[data-no-icon] {
    padding-inline-start: var(--flex-space-lg);
  }

  .flex-alert[data-no-icon]:before {
    display: none;
  }

  .flex-alert__heading {
    font-weight: 700;
    font-size: var(--flex-text-uswds);
    margin-block-end: var(--flex-space-xs);
    line-height: 1.5;
  }

  .flex-alert__text {
    font-weight: 400;
    font-size: var(--flex-text-uswds);
    margin: 0;
    line-height: 1.5;
  }
}

/* src/design-system/components/flex-icon/styles.css */
@layer block {
  .flex-icon {
    display: inline-block;
    fill: currentColor;
    vertical-align: middle;
    overflow: hidden;
    block-size: 1em;
    inline-size: 1em;
  }

  .flex-icon[data-size="3"] {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

  .flex-icon[data-size="4"] {
    block-size: 2rem;
    inline-size: 2rem;
  }

  .flex-icon[data-size="5"] {
    block-size: 2.5rem;
    inline-size: 2.5rem;
  }

  .flex-icon[data-size="6"] {
    block-size: 3rem;
    inline-size: 3rem;
  }

  .flex-icon[data-size="7"] {
    block-size: 3.5rem;
    inline-size: 3.5rem;
  }

  .flex-icon[data-size="8"] {
    block-size: 4rem;
    inline-size: 4rem;
  }

  .flex-icon[data-size="9"] {
    block-size: 4.5rem;
    inline-size: 4.5rem;
  }
}

/* src/design-system/components/flex-layout/styles.css */
@layer block {
  .site-footer {
    border-block-start: 1px solid var(--flex-color-border);
    padding-block: var(--flex-space-md);
    margin-block-start: var(--flex-space-xl);
  }

  .site-footer .l-center {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .site-footer p {
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
  }

  .catalog-sidebar {
    font-size: var(--flex-text-base);
    border-inline-end: 1px solid var(--flex-color-border);
    overflow-y: auto;
    position: sticky;
    max-block-size: calc(100vh - 120px);
    padding-inline-end: var(--flex-space-lg);
    top: var(--flex-space-md);
  }

  .catalog-sidebar h2 {
    font-size: var(--flex-text-base);
    color: var(--flex-color-text);
    margin-block-end: var(--flex-space-sm);
    font-weight: 600;
  }

  .catalog-sidebar ul {
    list-style: none;
    padding: 0;
  }

  .catalog-sidebar li {
    margin-block-end: var(--flex-space-xs);
  }

  .catalog-sidebar a {
    color: var(--flex-color-text);
    text-decoration: none;
    font-size: var(--flex-text-sm);
  }

  .catalog-sidebar a:hover {
    color: var(--flex-color-accent);
  }

  .catalog-sidebar a[aria-current="page"] {
    color: var(--flex-color-accent);
    font-weight: 600;
  }

  .catalog-nav-toggle > summary {
    display: none;
  }

  @media (max-width: 48rem) {
    .catalog-sidebar {
      position: static;
      overflow-y: visible;
      border-inline-end: none;
      border-block-end: 1px solid var(--flex-color-border);
      max-block-size: none;
      margin-block-end: var(--flex-space-md);
      padding-block-end: var(--flex-space-md);
      padding-inline-end: 0;
    }

    .catalog-nav-toggle > summary {
      display: block;
      cursor: pointer;
      font-weight: 600;
      font-size: var(--flex-text-base);
      color: var(--flex-color-accent);
      padding-block: var(--flex-space-sm);
      list-style: none;
    }

    .catalog-nav-toggle > summary::marker {
      display: none;
    }

    .catalog-nav-toggle > summary:before {
      content: "▶︎";
      display: inline-block;
      margin-inline-end: var(--flex-space-xs);
      transition: transform .15s;
      font-size: .7em;
    }

    .catalog-nav-toggle[open] > summary:before {
      transform: rotate(90deg);
    }
  }
}

/* src/design-system/components/flex-badge/styles.css */
@layer block {
  .badge {
    display: inline-block;
    font-size: var(--flex-text-tag);
    border-radius: var(--flex-radius-bubble);
    padding: .125rem .5rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .badge[data-status="draft"] {
    background: var(--flex-color-warning-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-status="working"] {
    background: var(--flex-color-info-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-status="stable"] {
    background: var(--flex-color-success-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-status="deprecated"] {
    background: var(--flex-color-error-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-variant="tag"] {
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    color: var(--flex-color-text-muted);
    font-weight: 400;
  }

  .badge[data-variant="milestone"] {
    background: var(--flex-color-info-lighter);
    color: var(--flex-color-text);
    font-weight: 500;
  }

  .badge[data-state="open"] {
    background: var(--flex-color-success-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-state="closed"] {
    background: var(--flex-color-error-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-status="ready"] {
    background: var(--flex-color-success-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-status="extracting"] {
    background: var(--flex-color-info-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-status="error"] {
    background: var(--flex-color-error-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-kind="uswds-derived"] {
    background-color: var(--flex-color-info-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-kind="custom"] {
    background-color: var(--flex-color-surface);
    color: var(--flex-color-text);
    border: 1px solid var(--flex-color-border);
  }

  .badge[data-delivery="static"] {
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    color: var(--flex-color-text-muted);
  }

  .badge[data-delivery="conversational"] {
    background: var(--flex-color-info-lighter);
    color: var(--flex-color-text);
  }

  .badge[data-delivery="hybrid"] {
    background: var(--flex-color-warning-lighter);
    color: var(--flex-color-text);
  }
}

/* src/design-system/components/flex-card/styles.css */
@layer block {
  .flex-card {
    max-inline-size: none;
    margin-block-end: 2rem;
  }

  .flex-card:last-child {
    margin-block-end: 2rem;
  }

  .flex-card__container {
    color: var(--flex-color-text);
    background-color: var(--flex-color-surface);
    border-width: 2px;
    border-color: var(--flex-gray-cool-10);
    display: flex;
    position: relative;
    border-style: solid;
    border-radius: .5rem;
    flex-direction: column;
    block-size: 100%;
    margin-inline-start: .5rem;
    margin-inline-end: .5rem;
    font-size: 1.06rem;
    line-height: 1.5;
  }

  .flex-card:not([data-variant="flag"]) .flex-card__container > :only-child {
    padding: 1.5rem;
  }

  .flex-card__header {
    padding-block-start: 1.5rem;
    padding-block-end: .5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
  }

  .flex-card__header:last-child {
    padding-block-end: 1.5rem;
  }

  .flex-card__heading {
    margin: 0;
    font-size: 1.34rem;
    line-height: 1.2;
  }

  .flex-card__media {
    order: -1;
    min-block-size: 1px;
  }

  .flex-card .flex-card__img {
    display: block;
  }

  .flex-card__img {
    background-color: var(--flex-gray-5);
    position: relative;
    overflow: hidden;
  }

  .flex-card__img img {
    display: block;
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }

  .flex-card__media[data-inset-media], .flex-card [data-inset-media] .flex-card__media {
    padding-block-start: 1.5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
  }

  .flex-card__media[data-inset-media] .flex-card__img, .flex-card [data-inset-media] .flex-card__img {
    border-radius: 0;
  }

  .flex-card__body {
    flex: auto;
    padding-block-start: .5rem;
    padding-block-end: .5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
  }

  .flex-card__body:last-child {
    padding-block-end: 1.5rem;
  }

  .flex-card__body:first-child {
    padding-block-start: 1.5rem;
  }

  .flex-card__body:only-child {
    padding-block-start: 1.5rem;
    padding-block-end: 1.5rem;
  }

  .flex-card__footer {
    padding-block-start: .5rem;
    padding-block-end: 1.5rem;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1.5rem;
  }

  .flex-card__body > :last-child, .flex-card__header > :last-child {
    margin-block-end: 0;
    padding-block-end: 0;
  }

  .flex-card__body > :first-child, .flex-card__header > :first-child {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .flex-card__body > :only-child, .flex-card__header > :only-child {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .flex-card[data-variant="header-first"] .flex-card__media {
    order: 0;
  }

  .flex-card[data-variant="header-first"] .flex-card__header {
    padding-block-end: .5rem;
  }

  .flex-card[data-variant="header-first"] .flex-card__body {
    padding-block-start: .5rem;
  }

  .flex-card[data-variant="header-first"] .flex-card__img {
    border-radius: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__media {
    display: flex;
    overflow: hidden;
    position: absolute;
    inline-size: 15rem;
    top: 0;
    bottom: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__media:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__media:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__media:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__media:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__media:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__media:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__img {
    border-radius: 0;
  }

  .flex-card[data-variant="flag"] .flex-card__body, .flex-card[data-variant="flag"] .flex-card__footer, .flex-card[data-variant="flag"] .flex-card__header {
    margin-inline-start: 15rem;
  }

  .flex-card[data-variant="flag"][data-media-right] .flex-card__media:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  .flex-card[data-variant="flag"][data-media-right] .flex-card__media:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  .flex-card[data-variant="flag"][data-media-right] .flex-card__media:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  .flex-card[data-variant="flag"][data-media-right] .flex-card__media:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  .flex-card[data-variant="flag"][data-media-right] .flex-card__media:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  .flex-card[data-variant="flag"][data-media-right] .flex-card__media:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  .flex-card[data-variant="flag"][data-media-right] .flex-card__img {
    border-radius: 0;
  }

  .flex-card[data-variant="flag"][data-media-right] .flex-card__body, .flex-card[data-variant="flag"][data-media-right] .flex-card__footer, .flex-card[data-variant="flag"][data-media-right] .flex-card__header {
    margin-inline-start: 0;
    margin-inline-end: 15rem;
  }

  @container (inline-size <= 30rem) {
    .flex-card[data-variant="flag"] .flex-card__media {
      position: static;
      inline-size: auto;
    }

    .flex-card[data-variant="flag"] .flex-card__img {
      border-radius: 0;
      border-start-start-radius: calc(.5rem - 2px);
      border-start-end-radius: calc(.5rem - 2px);
    }

    .flex-card[data-variant="flag"] .flex-card__body, .flex-card[data-variant="flag"] .flex-card__footer, .flex-card[data-variant="flag"] .flex-card__header {
      margin-inline-start: 0;
      margin-inline-end: 0;
    }

    .flex-card[data-variant="flag"][data-media-right] .flex-card__img {
      border-radius: 0;
      border-start-start-radius: calc(.5rem - 2px);
      border-start-end-radius: calc(.5rem - 2px);
    }
  }

  .flex-card-group {
    list-style-type: none;
    display: flex;
    container-type: inline-size;
    flex-flow: wrap;
    align-items: stretch;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: -.5rem;
    margin-inline-end: -.5rem;
    padding-inline-start: 0;
  }

  .flex-card-group > .flex-card {
    margin-inline-start: .5rem;
    margin-inline-end: .5rem;
  }

  .content-card {
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    padding: var(--flex-space-lg);
  }

  .content-card h2 {
    color: var(--flex-color-text);
    margin-block-end: var(--flex-space-xs);
    font-size: 1.1em;
    font-weight: 600;
  }

  .content-card h2 a {
    color: var(--flex-color-accent);
    text-decoration: none;
  }

  .content-card h2 a:hover {
    text-decoration: underline;
  }

  .content-card p {
    font-size: var(--flex-text-base);
    color: var(--flex-color-text-muted);
    line-height: 1.5;
  }

  .content-card .card-meta {
    display: flex;
    gap: var(--flex-space-xs);
    flex-wrap: wrap;
    margin-block-start: var(--flex-space-sm);
  }

  .catalog-group-label {
    font-size: var(--flex-font-size-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--flex-color-text-muted);
    margin-block-end: var(--flex-space-sm);
    font-weight: 600;
  }

  nav[aria-label="Filter components by kind"] a[aria-current="page"] {
    color: var(--flex-color-accent);
    text-decoration: underline;
    font-weight: 700;
  }
}

/* src/design-system/components/flex-prose/styles.css */
@layer block {
  .prose {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    line-height: 1.5;
  }

  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    clear: both;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .prose h1 {
    margin-block-start: var(--flex-space-xl);
    margin-block-end: var(--flex-space-md);
    font-size: 2.44rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .prose h2 {
    margin-block-start: var(--flex-space-lg);
    margin-block-end: var(--flex-space-sm);
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .prose h3 {
    margin-block-start: var(--flex-space-lg);
    margin-block-end: var(--flex-space-sm);
    font-size: 1.34rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .prose h4 {
    margin-block-start: var(--flex-space-lg);
    margin-block-end: var(--flex-space-sm);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .prose h5 {
    margin-block-start: var(--flex-space-md);
    margin-block-end: var(--flex-space-xs);
    font-size: .91rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .prose h6 {
    letter-spacing: .025em;
    text-transform: uppercase;
    margin-block-start: var(--flex-space-md);
    margin-block-end: var(--flex-space-xs);
    font-size: .87rem;
    font-weight: 400;
    line-height: 1.1;
  }

  .prose p {
    max-inline-size: 68ex;
    margin-block-end: 1em;
    line-height: 1.5;
  }

  .prose ul, .prose ol {
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 3ch;
    line-height: 1.5;
  }

  .prose li {
    max-inline-size: 68ex;
    margin-block-end: .25em;
  }

  .prose li:last-child, .prose ul:last-child, .prose ol:last-child {
    margin-block-end: 0;
  }

  .prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol {
    margin-block-start: .25em;
  }

  .prose code {
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-sm);
    background: var(--flex-color-bg);
    border-radius: var(--flex-radius-sm);
    padding: .125rem .375rem;
  }

  .prose pre {
    background: var(--flex-color-bg);
    padding: var(--flex-space-md);
    border-radius: var(--flex-radius-md);
    overflow-x: auto;
    margin-block-end: var(--flex-space-md);
  }

  .prose pre code {
    background: none;
    padding: 0;
  }

  .prose a {
    color: var(--flex-color-accent);
    text-decoration: underline;
  }

  .prose a:hover {
    text-decoration: none;
  }

  .prose .task-list-item {
    list-style: none;
    margin-inline-start: calc(-1 * var(--flex-space-lg));
  }

  .prose .task-list-item input[type="checkbox"] {
    margin-inline-end: var(--flex-space-xs);
  }

  .prose strong {
    font-weight: 700;
  }

  .prose hr {
    border: none;
    border-block-start: 1px solid var(--flex-color-border);
    margin: var(--flex-space-lg) 0;
  }

  .prose table {
    font-size: var(--flex-text-uswds);
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--flex-color-text);
    inline-size: 100%;
    margin: 1.25rem 0;
    line-height: 1.5;
  }

  .prose th {
    background-clip: padding-box;
    background-color: var(--flex-color-table-header);
    color: var(--flex-color-text);
    text-align: start;
    border: 1px solid var(--flex-color-text);
    padding: .5rem 1rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .prose td {
    background-color: var(--flex-color-surface);
    border: 1px solid var(--flex-color-text);
    padding: .5rem 1rem;
    font-weight: 400;
  }
}

/* src/design-system/components/flex-button/styles.css */
@layer block {
  .flex-button {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-on-accent);
    background-color: var(--flex-color-accent);
    border-radius: var(--flex-radius-sm);
    display: inline-flex;
    justify-content: center;
    align-items:  center;
    column-gap: var(--flex-space-sm);
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    border: 0;
    margin-inline-end: var(--flex-space-sm);
    padding: 12px 20px;
    font-weight: 700;
    line-height: .9;
  }

  .flex-button:hover {
    background-color: color-mix(in srgb, var(--flex-color-accent) 85%, black);
  }

  .flex-button:active {
    background-color: color-mix(in srgb, var(--flex-color-accent) 70%, black);
  }

  .flex-button:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: 2px;
  }

  .flex-button:disabled {
    background-color: var(--flex-color-disabled-lighter);
    color: var(--flex-color-disabled-dark);
    cursor: not-allowed;
  }

  .flex-button[data-variant="secondary"] {
    background-color: var(--flex-red-60);
    color: var(--flex-color-on-accent);
    box-shadow: none;
  }

  .flex-button[data-variant="secondary"]:hover {
    background-color: color-mix(in srgb, var(--flex-red-60) 85%, black);
  }

  .flex-button[data-variant="secondary"]:active {
    background-color: color-mix(in srgb, var(--flex-red-60) 70%, black);
  }

  .flex-button[data-variant="secondary"]:disabled {
    background-color: var(--flex-color-disabled-lighter);
    color: var(--flex-color-disabled-dark);
    box-shadow: none;
  }

  .flex-button[data-variant="accent-cool"] {
    background-color: var(--flex-cyan-vivid-30);
    color: var(--flex-gray-90);
  }

  .flex-button[data-variant="accent-cool"]:hover {
    background-color: color-mix(in srgb, var(--flex-cyan-vivid-30) 85%, black);
  }

  .flex-button[data-variant="accent-cool"]:active {
    background-color: color-mix(in srgb, var(--flex-cyan-vivid-30) 70%, black);
  }

  .flex-button[data-variant="accent-cool"]:disabled {
    background-color: var(--flex-color-disabled-lighter);
    color: var(--flex-color-disabled-dark);
  }

  .flex-button[data-variant="accent-warm"] {
    background-color: var(--flex-orange-vivid-30);
    color: var(--flex-gray-90);
  }

  .flex-button[data-variant="accent-warm"]:hover {
    background-color: color-mix(in srgb, var(--flex-orange-vivid-30) 85%, black);
  }

  .flex-button[data-variant="accent-warm"]:active {
    background-color: color-mix(in srgb, var(--flex-orange-vivid-30) 70%, black);
  }

  .flex-button[data-variant="accent-warm"]:disabled {
    background-color: var(--flex-color-disabled-lighter);
    color: var(--flex-color-disabled-dark);
  }

  .flex-button[data-variant="base"] {
    background-color: var(--flex-gray-90);
    color: var(--flex-color-on-accent);
  }

  .flex-button[data-variant="base"]:hover {
    background-color: color-mix(in srgb, var(--flex-gray-90) 85%, black);
  }

  .flex-button[data-variant="base"]:active {
    background-color: color-mix(in srgb, var(--flex-gray-90) 70%, black);
  }

  .flex-button[data-variant="base"]:disabled {
    background-color: var(--flex-color-disabled-lighter);
    color: var(--flex-color-disabled-dark);
  }

  .flex-button[data-variant="outline"] {
    color: var(--flex-color-accent);
    box-shadow: inset 0 0 0 2px var(--flex-color-accent);
    background-color: #0000;
  }

  .flex-button[data-variant="outline"]:hover {
    background-color: color-mix(in srgb, var(--flex-color-accent) 8%, transparent);
  }

  .flex-button[data-variant="outline"]:active {
    background-color: color-mix(in srgb, var(--flex-color-accent) 16%, transparent);
  }

  .flex-button[data-variant="outline"]:disabled {
    color: var(--flex-color-disabled-dark);
    box-shadow: inset 0 0 0 2px var(--flex-color-disabled-lighter);
    background-color: #0000;
  }

  .flex-button[data-variant="inverse"] {
    color: var(--flex-color-on-accent);
    box-shadow: inset 0 0 0 2px var(--flex-color-on-accent);
    background-color: #0000;
  }

  .flex-button[data-variant="inverse"]:hover {
    background-color: color-mix(in srgb, var(--flex-color-on-accent) 16%, transparent);
  }

  .flex-button[data-variant="inverse"]:active {
    background-color: color-mix(in srgb, var(--flex-color-on-accent) 24%, transparent);
  }

  .flex-button[data-variant="inverse"]:disabled {
    color: var(--flex-color-disabled-dark);
    box-shadow: inset 0 0 0 2px var(--flex-color-disabled-lighter);
  }

  .flex-button[data-variant="unstyled"] {
    color: var(--flex-color-accent);
    text-decoration: underline;
    cursor: pointer;
    background-color: #0000;
    border: none;
    border-radius: 0;
    margin-inline-end: 0;
    padding: 0;
    font-weight: 400;
  }

  .flex-button[data-variant="unstyled"]:hover {
    color: color-mix(in srgb, var(--flex-color-accent) 85%, black);
    background-color: #0000;
  }

  .flex-button[data-variant="unstyled"]:active {
    color: color-mix(in srgb, var(--flex-color-accent) 70%, black);
    background-color: #0000;
  }

  .flex-button[data-variant="unstyled"]:disabled {
    color: var(--flex-color-disabled-dark);
    background-color: #0000;
  }

  .flex-button[data-size="big"] {
    padding: 16px 24px;
    font-size: 1.46rem;
  }

  .flex-button[data-size="small"] {
    padding: var(--flex-space-xs) var(--flex-space-sm);
    font-size: var(--flex-text-xs);
  }
}

/* src/design-system/components/flex-label/styles.css */
@layer block {
  .flex-label {
    display: block;
    max-inline-size: var(--flex-control-max-width);
    margin-block-start: 1.5rem;
    font-weight: normal;
  }

  .flex-label__optional {
    color: var(--flex-color-text-muted);
    font-style: normal;
    font-weight: normal;
  }
}

/* src/design-system/components/flex-text-input/styles.css */
@layer block {
  .flex-input {
    block-size: var(--flex-control-height);
  }

  .flex-input[readonly] {
    background-color: var(--flex-color-bg);
  }

  .flex-input[data-state="error"] {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }

  .flex-input[data-state="success"] {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }

  .flex-input[data-width="2xs"] {
    max-inline-size: 5ex;
  }

  .flex-input[data-width="xs"] {
    max-inline-size: 9ex;
  }

  .flex-input[data-width="sm"] {
    max-inline-size: 13ex;
  }

  .flex-input[data-width="md"] {
    max-inline-size: 20ex;
  }

  .flex-input[data-width="lg"] {
    max-inline-size: 30ex;
  }

  .flex-input[data-width="xl"] {
    max-inline-size: 40ex;
  }

  .flex-input[data-width="2xl"] {
    max-inline-size: 50ex;
  }
}

/* src/design-system/components/flex-textarea/styles.css */
@layer block {
  .flex-textarea {
    resize: vertical;
    min-block-size: 160px;
  }

  .flex-textarea[data-state="error"] {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }

  .flex-textarea[data-state="success"] {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }
}

/* src/design-system/components/flex-error-message/styles.css */
@layer block {
  .flex-error-message {
    color: var(--flex-color-error);
    display: block;
    padding-block-start: .25rem;
    padding-block-end: .25rem;
    font-weight: 700;
  }
}

/* src/design-system/components/flex-tag/styles.css */
@layer block {
  .flex-tag {
    color: var(--flex-white);
    text-transform: uppercase;
    background-color: var(--flex-gray-cool-60);
    display: inline;
    border-radius: 2px;
    margin-inline-end: .25rem;
    padding: 1px .5rem;
    font-size: .93rem;
  }

  .flex-tag:only-of-type {
    margin-inline-end: 0;
  }

  .flex-tag[data-size="big"] {
    font-size: var(--flex-text-uswds);
    padding-inline-start: .5rem;
    padding-inline-end: .5rem;
  }
}

/* src/design-system/components/flex-link/styles.css */
@layer block {
  .flex-link {
    color: var(--flex-color-link);
    text-decoration: underline;
    display: inline;
  }

  .flex-link:visited {
    color: var(--flex-color-link-visited);
  }

  .flex-link:hover {
    color: var(--flex-color-link-hover);
  }

  .flex-link:active {
    color: var(--flex-color-link-active);
  }

  .flex-link:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

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

  .flex-link--external:after {
    content: "";
    display: inline;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.75ex 1.75ex;
    block-size: 1.75ex;
    inline-size: 1.75ex;
    margin-block-start: .7ex;
    margin-inline-start: 2px;
    padding-inline-start: 1.75ex;
  }

  @supports (mask: url("")) {
    .flex-link--external:after {
      background: none;
      background-color: currentColor;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E"), linear-gradient(#0000, #0000);
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: 1.75ex 1.75ex;
    }
  }
}

/* src/design-system/components/flex-list/styles.css */
@layer block {
  .flex-list {
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 3ch;
    line-height: 1.5;
  }

  .flex-list:last-child {
    margin-block-end: 0;
  }

  .flex-list li {
    max-inline-size: 68ex;
    margin-block-end: .25em;
  }

  .flex-list li:last-child {
    margin-block-end: 0;
  }

  .flex-list ol {
    margin-block-start: .25em;
  }

  .flex-list ul {
    margin-block-start: .25em;
  }

  .flex-list[data-variant="unstyled"] {
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
  }

  .flex-list[data-variant="unstyled"] > li {
    max-inline-size: unset;
    margin-block-end: 0;
  }
}

/* src/design-system/components/flex-collection/styles.css */
@layer block {
  .flex-collection {
    list-style-type: none;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 0;
    font-size: 1.06rem;
    line-height: 1.5;
  }

  .flex-collection:last-child {
    margin-block-end: 0;
  }

  .flex-collection[data-variant="condensed"] .flex-collection__item {
    margin-block-start: .5rem;
    margin-block-end: .5rem;
    padding-block-start: .5rem;
  }

  .flex-collection__item {
    list-style-type: none;
    border-block-start: 1px solid var(--flex-color-border);
    display: flex;
    align-items:  flex-start;
    max-inline-size: 68ex;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    padding-block-start: 1rem;
    padding-inline-start: 0;
  }

  .flex-collection__item:last-child {
    margin-block-end: 0;
  }

  .flex-collection__img {
    flex-shrink: 0;
    inline-size: 5rem;
    margin-inline-end: 1rem;
  }

  .flex-collection__img img {
    display: block;
    block-size: auto;
    inline-size: 100%;
  }

  .flex-collection__body {
    flex: 1;
  }

  .flex-collection__heading {
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 1.13rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .flex-collection__heading a {
    color: var(--flex-color-accent);
    text-decoration: underline;
  }

  .flex-collection__heading a:hover {
    color: var(--flex-blue-warm-vivid-70);
  }

  .flex-collection__description {
    margin-block-start: .5rem;
    margin-block-end: .5rem;
  }

  .flex-collection__meta {
    list-style-type: none;
    margin-block-start: .25rem;
    margin-block-end: 0;
    padding-inline-start: 0;
  }

  .flex-collection__meta > li {
    max-inline-size: unset;
    margin-block-end: 0;
  }

  .flex-collection__meta-item {
    display: block;
    margin-block-start: .25rem;
    margin-inline-end: .5rem;
    font-size: .93rem;
    line-height: 1.3;
  }
}

/* src/design-system/components/flex-table/styles.css */
@layer block {
  .flex-table {
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--flex-color-text);
    text-align: start;
    inline-size: 100%;
    margin: 1.25rem 0;
    font-size: 1.06rem;
    line-height: 1.5;
  }

  .flex-table caption {
    text-align: start;
    margin-block-end: .75rem;
    font-size: 1rem;
    font-weight: 700;
  }

  .flex-table th, .flex-table td {
    border: 1px solid var(--flex-color-text);
    padding: .5rem 1rem;
  }

  .flex-table th {
    text-align: start;
    background-clip: padding-box;
    background-color: var(--flex-color-table-header);
    color: var(--flex-color-text);
    font-weight: 700;
    line-height: 1.3;
  }

  .flex-table td {
    background-color: var(--flex-color-surface);
    font-weight: 400;
  }

  .flex-table thead td {
    background-clip: padding-box;
    background-color: var(--flex-color-table-header);
    color: var(--flex-color-text);
    line-height: 1.3;
  }

  .flex-table[data-variant="borderless"] th {
    border-block-start: 0;
    border-inline-start: 0;
    border-inline-end: 0;
  }

  .flex-table[data-variant="borderless"] td {
    border-inline-start: 0;
    border-inline-end: 0;
  }

  .flex-table[data-variant="borderless"] th, .flex-table[data-variant="borderless"] thead td {
    background-color: var(--flex-color-surface);
  }

  .flex-table[data-striped] tbody tr:nth-child(odd) td {
    background-color: var(--flex-gray-5);
    color: var(--flex-color-text);
  }

  .flex-table[data-compact] td, .flex-table[data-compact] th {
    padding: .25rem .75rem;
  }

  .flex-table[data-sticky-header] thead th {
    position: sticky;
    z-index: 1;
    top: 0;
  }

  .flex-table__container {
    overflow-y: hidden;
    overflow-x: auto;
    margin: 1.25rem 0;
  }

  .flex-table__container .flex-table {
    margin: 0;
  }

  .flex-table__container[data-scrollable] td {
    white-space: nowrap;
  }

  @media (max-width: 37.4375rem) {
    .flex-table[data-stacked] thead {
      display: none;
    }

    .flex-table[data-stacked] th, .flex-table[data-stacked] td {
      display: block;
      border-block-end-width: 0;
      inline-size: 100%;
    }

    .flex-table[data-stacked] tr {
      border-block-end: .25rem solid var(--flex-color-text);
      border-block-start-width: 0;
      inline-size: 100%;
    }

    .flex-table[data-stacked] tr td:first-child, .flex-table[data-stacked] tr th:first-child {
      border-block-start-width: 0;
    }

    .flex-table[data-stacked] tr:nth-child(odd) td {
      background-color: inherit;
    }

    .flex-table[data-stacked] tr:first-child td:first-child, .flex-table[data-stacked] tr:first-child th:first-child {
      border-block-start: .25rem solid var(--flex-color-text);
    }

    .flex-table[data-stacked] td[data-label], .flex-table[data-stacked] th[data-label] {
      padding-block-end: .75rem;
    }

    .flex-table[data-stacked] td[data-label]:before, .flex-table[data-stacked] th[data-label]:before {
      content: attr(data-label);
      display: block;
      margin: -.5rem -1rem 0;
      padding: .75rem 1rem .25rem;
      font-weight: 700;
    }

    .flex-table[data-stacked-header] thead {
      display: none;
    }

    .flex-table[data-stacked-header] th, .flex-table[data-stacked-header] td {
      display: block;
      border-block-end-width: 0;
      inline-size: 100%;
    }

    .flex-table[data-stacked-header] tr {
      border-block-end: .25rem solid var(--flex-color-text);
      border-block-start-width: 0;
      inline-size: 100%;
    }

    .flex-table[data-stacked-header] tr td:first-child, .flex-table[data-stacked-header] tr th:first-child {
      background-color: var(--flex-color-table-header);
      color: var(--flex-color-text);
      border-block-start-width: 0;
      padding: .75rem 1rem;
      font-size: 1.06rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .flex-table[data-stacked-header] tr td:first-child:before, .flex-table[data-stacked-header] tr th:first-child:before {
      display: none;
    }

    .flex-table[data-stacked-header] tr:first-child td:first-child, .flex-table[data-stacked-header] tr:first-child th:first-child {
      border-block-start: .25rem solid var(--flex-color-text);
    }

    .flex-table[data-stacked-header] td[data-label], .flex-table[data-stacked-header] th[data-label] {
      padding-block-end: .75rem;
    }

    .flex-table[data-stacked-header] td[data-label]:before, .flex-table[data-stacked-header] th[data-label]:before {
      content: attr(data-label);
      display: block;
      margin: -.5rem -1rem 0;
      padding: .75rem 1rem .25rem;
      font-weight: 700;
    }
  }
}

/* src/design-system/components/flex-breadcrumb/styles.css */
@layer block {
  .flex-breadcrumb {
    color: var(--flex-color-text);
    background-color: var(--flex-color-bg);
    padding-block-start: 1rem;
    padding-block-end: 1rem;
    padding-inline-start: 0;
    padding-inline-end: 0;
    font-size: 1.06rem;
    line-height: 1.3;
  }

  .flex-breadcrumb:not([data-variant="wrap"]) .flex-breadcrumb__list {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .flex-breadcrumb__list {
    list-style-type: none;
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: -.25rem;
    margin-inline-end: -.25rem;
    padding: .25rem;
  }

  .flex-breadcrumb__list-item {
    display: inline;
    white-space: normal;
  }

  .flex-breadcrumb__list-item:not(:last-child):after {
    content: "";
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    background: none;
    background-color: var(--flex-gray-60);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E"), linear-gradient(#0000, #0000);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: 2ex 2ex;
    block-size: 2ex;
    inline-size: 2ex;
    margin-inline-start: 0;
    margin-inline-end: 0;
    bottom: -.2em;
  }

  .flex-breadcrumb__list-item[aria-current="page"] {
    font-weight: normal;
  }

  .flex-breadcrumb__link {
    color: var(--flex-color-link);
    display: inline;
    text-decoration: none;
  }

  .flex-breadcrumb__link:hover {
    color: var(--flex-color-link-hover);
    text-decoration: underline;
  }

  .flex-breadcrumb__link:visited {
    color: var(--flex-color-link-visited);
  }

  .flex-breadcrumb__link:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }
}

/* src/design-system/components/flex-side-navigation/styles.css */
@layer block {
  .flex-sidenav {
    list-style-type: none;
    border-block-end: 1px solid var(--flex-color-border);
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    font-size: 1.06rem;
    line-height: 1.3;
  }

  .flex-sidenav > li {
    max-inline-size: unset;
    margin-block-end: 0;
  }

  .flex-sidenav__item {
    border-block-start: 1px solid var(--flex-color-border);
  }

  .flex-sidenav__link {
    display: block;
    text-decoration: none;
    color: var(--flex-color-text-muted);
    padding: .5rem 1rem;
  }

  .flex-sidenav__link:hover {
    background-color: var(--flex-color-bg-subtle);
    text-decoration: none;
    color: var(--flex-color-link);
  }

  .flex-sidenav__link:focus {
    outline-offset: 0;
    outline: .25rem solid var(--flex-color-focus);
  }

  .flex-sidenav__link--current {
    position: relative;
    color: var(--flex-color-link);
    font-weight: 700;
  }

  .flex-sidenav__link--current:after {
    background-color: var(--flex-color-link);
    content: "";
    display: block;
    position: absolute;
    border-radius: 99rem;
    inline-size: .25rem;
    top: .25rem;
    bottom: .25rem;
  }

  .flex-sidenav__link--current:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 0;
  }

  .flex-sidenav__link--current:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 0;
  }

  .flex-sidenav__link--current:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 0;
  }

  .flex-sidenav__link--current:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 0;
  }

  .flex-sidenav__link--current:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 0;
  }

  .flex-sidenav__link--current:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 0;
  }

  .flex-sidenav__sublist {
    list-style-type: none;
    margin: 0;
    padding-inline-start: 0;
    font-size: 1rem;
  }

  .flex-sidenav__sublist > li {
    max-inline-size: unset;
    margin-block-end: 0;
  }

  .flex-sidenav__sublist .flex-sidenav__item {
    border-block-start: 1px solid var(--flex-color-border);
    font-size: .93rem;
  }

  .flex-sidenav__sublist .flex-sidenav__link {
    padding-inline-start: 2rem;
  }

  .flex-sidenav__sublist .flex-sidenav__link--current:after {
    display: none;
  }

  .flex-sidenav__sublist .flex-sidenav__sublist .flex-sidenav__link {
    padding-inline-start: 3rem;
  }
}

/* src/design-system/components/flex-pagination/styles.css */
@layer block {
  .flex-pagination {
    color: var(--flex-color-text);
    background-color: var(--flex-color-bg);
    display: flex;
    justify-content: center;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    font-size: 1.06rem;
    line-height: 1.5;
  }

  .flex-pagination .flex-icon {
    block-size: 1.13rem;
    inline-size: 1.13rem;
  }

  .flex-pagination__list {
    list-style-type: none;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items:  center;
    inline-size: auto;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
  }

  .flex-pagination__item {
    display: inline-flex;
    flex: 1 0 auto;
    justify-content: center;
    block-size: 2.5rem;
    min-inline-size: 2.5rem;
    margin-inline-start: .25rem;
    margin-inline-end: .25rem;
    line-height: 1;
  }

  .flex-pagination__item--previous {
    margin-inline-end: 1.25rem;
  }

  .flex-pagination__item--next {
    margin-inline-start: 1.25rem;
  }

  .flex-pagination__link {
    color: var(--flex-color-link);
    display: inline-flex;
    text-decoration: none;
    align-items:  center;
    gap: .25rem;
  }

  .flex-pagination__link:hover {
    color: var(--flex-color-link-hover);
  }

  .flex-pagination__link:focus {
    color: var(--flex-color-link-hover);
  }

  .flex-pagination__link:active {
    color: var(--flex-color-link-hover);
  }

  .flex-pagination__link:visited {
    color: var(--flex-color-link);
  }

  .flex-pagination__link:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

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

  .flex-pagination__button {
    color: var(--flex-color-link);
    display: inline-flex;
    text-decoration: none;
    border: 1px solid #1b1b1b33;
    border-radius: .25rem;
    justify-content: center;
    align-items:  center;
    inline-size: 100%;
    padding: .5rem;
  }

  .flex-pagination__button:hover {
    color: var(--flex-color-link-hover);
    border-color: var(--flex-color-link-hover);
  }

  .flex-pagination__button:focus {
    color: var(--flex-color-link-hover);
    border-color: var(--flex-color-link-hover);
  }

  .flex-pagination__button:active {
    color: var(--flex-color-link-hover);
    border-color: var(--flex-color-link-hover);
  }

  .flex-pagination__button:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

  .flex-pagination__button--current {
    background-color: var(--flex-color-text);
    color: var(--flex-color-bg);
    border-color: #0000;
  }

  .flex-pagination__button--current:hover {
    background-color: var(--flex-color-text);
    color: var(--flex-color-bg);
  }

  .flex-pagination__button--current:focus {
    background-color: var(--flex-color-text);
    color: var(--flex-color-bg);
  }

  .flex-pagination__button--current:active {
    background-color: var(--flex-color-text);
    color: var(--flex-color-bg);
  }

  .flex-pagination__overflow {
    display: inline-flex;
    user-select: none;
    justify-content: center;
    align-items:  center;
    block-size: 100%;
    inline-size: 100%;
  }
}

/* src/design-system/components/flex-search/styles.css */
@layer block {
  .flex-search {
    position: relative;
    display: flex;
    inline-size: 100%;
    font-size: 1.06rem;
    line-height: 1.5;
  }

  .flex-search:after {
    clear: both;
    content: "";
    display: block;
  }

  .flex-search[data-size="big"] .flex-search__input {
    block-size: 3rem;
    font-size: 1.06rem;
  }

  .flex-search[data-size="big"] .flex-search__submit {
    block-size: 3rem;
    padding-inline-start: 2rem;
    padding-inline-end: 2rem;
    font-size: 1.46rem;
  }

  .flex-search[data-size="small"] .flex-search__input {
    block-size: 2rem;
    padding: .25rem .5rem;
    font-size: .93rem;
  }

  .flex-search[data-size="small"] .flex-search__submit {
    block-size: 2rem;
    padding-inline-start: .5rem;
    padding-inline-end: .5rem;
    font-size: .93rem;
  }

  .flex-search[data-size="small"] .flex-search__submit-text {
    position: absolute;
  }

  .flex-search[data-size="small"] .flex-search__submit-text:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: -999em;
  }

  .flex-search[data-size="small"] .flex-search__submit-text:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: -999em;
  }

  .flex-search[data-size="small"] .flex-search__submit-text:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: -999em;
  }

  .flex-search[data-size="small"] .flex-search__submit-text:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: -999em;
  }

  .flex-search[data-size="small"] .flex-search__submit-text:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: -999em;
  }

  .flex-search[data-size="small"] .flex-search__submit-text:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: -999em;
  }

  .flex-search[data-size="small"] .flex-search__submit:before {
    mask-size: 1.25rem 1.25rem;
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }

  .flex-search__label {
    display: block;
    position: absolute;
    font-size: 1.06rem;
    font-weight: normal;
  }

  .flex-search__label:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: -999em;
  }

  .flex-search__label:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: -999em;
  }

  .flex-search__label:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: -999em;
  }

  .flex-search__label:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: -999em;
  }

  .flex-search__label:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: -999em;
  }

  .flex-search__label:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: -999em;
  }

  .flex-search__input {
    color: var(--flex-color-text);
    border-style: solid;
    border-width: 1px;
    border-color: var(--flex-color-text-muted);
    box-sizing: border-box;
    appearance: none;
    outline-offset: -2px;
    border-inline-end: none;
    border-radius: 0;
    flex: 1;
    block-size: 2.5rem;
    margin: 0;
    padding-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: .5rem;
    padding-inline-end: .5rem;
    font-size: 1rem;
    line-height: 1.3;
  }

  .flex-search__input:focus {
    outline: .25rem solid var(--flex-color-focus);
  }

  .flex-search__submit {
    font-weight: 700;
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-on-accent);
    background-color: var(--flex-color-accent);
    cursor: pointer;
    display: inline-flex;
    border: 0;
    border-radius: 0;
    justify-content: center;
    align-items:  center;
    gap: .25rem;
    block-size: 2.5rem;
    margin: 0;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
    line-height: .9;
  }

  .flex-search__submit:hover {
    background-color: color-mix(in srgb, var(--flex-color-accent) 85%, black);
  }

  .flex-search__submit:active {
    background-color: color-mix(in srgb, var(--flex-color-accent) 70%, black);
  }

  .flex-search__submit:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

  .flex-search__submit:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"), linear-gradient(#0000, #0000);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: 1.5rem 1.5rem;
    background-color: currentColor;
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

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

/* src/design-system/components/flex-checkbox/styles.css */
@layer block {
  .flex-checkbox {
    background-color: var(--flex-color-surface);
  }

  .flex-checkbox__input {
    position: absolute;
    left: -999em;
    right: auto;
  }

  .flex-checkbox__input:checked + .flex-checkbox__label:before {
    background-color: var(--flex-color-accent);
    box-shadow: 0 0 0 2px var(--flex-color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='50' viewBox='0 0 65 50'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z'/%3E%3C/svg%3E"), linear-gradient(#0000, #0000);
    background-position: center;
    background-repeat: no-repeat;
    background-size: .75rem;
  }

  .flex-checkbox__input:focus + .flex-checkbox__label:before {
    outline: .25rem solid var(--flex-blue-vivid-40);
    outline-offset: .25rem;
  }

  .flex-checkbox__input:disabled + .flex-checkbox__label:before {
    background-color: var(--flex-color-surface);
    box-shadow: 0 0 0 2px var(--flex-color-disabled);
  }

  .flex-checkbox__input[data-indeterminate] + .flex-checkbox__label:before {
    background-color: var(--flex-color-accent);
    box-shadow: 0 0 0 2px var(--flex-color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M2.9 35.9c0 1.1.4 2 1.2 2.8s1.7 1.2 2.8 1.2h50.2c1.1 0 2-.4 2.8-1.2s1.2-1.7 1.2-2.8V28c0-1.1-.4-2-1.2-2.8S58.2 24 57.1 24H6.9c-1.1 0-2 .4-2.8 1.2S2.9 26.9 2.9 28z' clip-rule='evenodd'/%3E%3C/svg%3E"), linear-gradient(#0000, #0000);
    background-position: center;
    background-repeat: no-repeat;
    background-size: .75rem;
  }

  .flex-checkbox__input[data-indeterminate]:disabled + .flex-checkbox__label:before {
    box-shadow: 0 0 0 2px var(--flex-color-disabled);
  }

  .flex-checkbox__label {
    margin-block-start: .75rem;
    padding-inline-start: 2rem;
  }

  .flex-checkbox__label:before {
    content: " ";
    display: block;
    position: absolute;
    background-color: var(--flex-color-surface);
    box-shadow: 0 0 0 2px var(--flex-color-text);
    outline: 2px solid #0000;
    outline-offset: 2px;
    border-radius: 2px;
    block-size: 1.25rem;
    inline-size: 1.25rem;
    margin-block-start: .064rem;
    margin-inline-start: 2px;
  }

  .flex-checkbox__label:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-checkbox__label:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-checkbox__label:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-checkbox__label:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-checkbox__label:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-checkbox__label:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-checkbox[data-variant="tile"] .flex-checkbox__input + .flex-checkbox__label {
    background-color: var(--flex-color-surface);
    border: 2px solid var(--flex-gray-20);
    color: var(--flex-color-text);
    display: inherit;
    border-radius: .25rem;
    margin-block-start: .5rem;
    padding-block-start: .75rem;
    padding-block-end: .75rem;
    padding-inline-start: 2.5rem;
    padding-inline-end: 1rem;
  }

  .flex-checkbox[data-variant="tile"] .flex-checkbox__input:checked + .flex-checkbox__label {
    background-color: color-mix(in srgb, var(--flex-color-accent) 10%, transparent);
    border-color: var(--flex-color-accent);
  }

  .flex-checkbox[data-variant="tile"] .flex-checkbox__input:disabled + .flex-checkbox__label {
    border-color: var(--flex-gray-10);
  }

  .flex-checkbox[data-variant="tile"] .flex-checkbox__input:disabled:checked + .flex-checkbox__label {
    background-color: var(--flex-color-surface);
  }

  .flex-checkbox[data-variant="tile"] .flex-checkbox__input:disabled[data-indeterminate] + .flex-checkbox__label {
    background-color: var(--flex-color-surface);
  }

  .flex-checkbox[data-variant="tile"] .flex-checkbox__input[data-indeterminate] + .flex-checkbox__label {
    background-color: color-mix(in srgb, var(--flex-color-accent) 10%, transparent);
    border-color: var(--flex-color-accent);
  }
}

/* src/design-system/components/flex-radio/styles.css */
@layer block {
  .flex-radio {
    background-color: var(--flex-color-surface);
  }

  .flex-radio[data-variant="tile"] .flex-radio__input + .flex-radio__label {
    background-color: var(--flex-color-surface);
    border: 2px solid var(--flex-gray-20);
    color: var(--flex-color-text);
    display: inherit;
    border-radius: .25rem;
    margin-block-start: .5rem;
    padding: .75rem 1rem .75rem 2.5rem;
  }

  .flex-radio[data-variant="tile"] .flex-radio__input:checked + .flex-radio__label {
    background-color: color-mix(in srgb, var(--flex-color-accent) 10%, transparent);
    border-color: var(--flex-color-accent);
  }

  .flex-radio[data-variant="tile"] .flex-radio__input:disabled + .flex-radio__label {
    border-color: var(--flex-gray-10);
  }

  .flex-radio[data-variant="tile"] .flex-radio__input:disabled:checked + .flex-radio__label {
    background-color: var(--flex-color-surface);
  }

  .flex-radio__input {
    position: absolute;
    left: -999em;
    right: auto;
  }

  .flex-radio__label {
    margin-block-start: .75rem;
    padding-inline-start: 2rem;
  }

  .flex-radio__label:before {
    content: " ";
    display: block;
    position: absolute;
    background-color: var(--flex-color-surface);
    box-shadow: 0 0 0 2px var(--flex-color-text);
    outline: 2px solid #0000;
    outline-offset: 2px;
    border-radius: 99rem;
    block-size: 1.25rem;
    inline-size: 1.25rem;
    margin-block-start: .064rem;
    margin-inline-start: 2px;
  }

  .flex-radio__label:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-radio__label:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-radio__label:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-radio__label:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-radio__label:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-radio__label:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-radio__input:checked + .flex-radio__label:before {
    background-color: var(--flex-color-accent);
    box-shadow: 0 0 0 2px var(--flex-color-accent), inset 0 0 0 2px var(--flex-color-surface);
  }

  .flex-radio__input:focus + .flex-radio__label:before {
    outline: .25rem solid var(--flex-blue-vivid-40);
    outline-offset: .25rem;
  }

  .flex-radio__input:disabled + .flex-radio__label:before {
    background-color: var(--flex-color-surface);
    box-shadow: 0 0 0 2px var(--flex-color-disabled);
  }

  .flex-radio__input:checked:disabled + .flex-radio__label:before {
    background-color: var(--flex-color-disabled);
    box-shadow: 0 0 0 2px var(--flex-color-disabled), inset 0 0 0 2px var(--flex-color-surface);
  }
}

/* src/design-system/components/flex-select/styles.css */
@layer block {
  .flex-select {
    block-size: var(--flex-control-height);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23565c65' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 10px 6px;
    padding-inline-end: 2rem;
  }

  .flex-select[multiple] {
    background-image: none;
    block-size: auto;
    padding-inline-end: 0;
  }

  .flex-select[data-state="error"] {
    border-width: 4px;
    border-color: var(--flex-color-error);
    padding-block-start: 4px;
    padding-block-end: 4px;
  }

  .flex-select option {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :root[data-theme="dark"] .flex-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23a9aeb1' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .flex-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23a9aeb1' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    }
  }
}

/* src/design-system/components/flex-button-group/styles.css */
@layer block {
  .flex-button-group {
    display: flex;
    list-style-type: none;
    flex-flow: row;
    align-items: stretch;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: -.25rem;
    margin-inline-end: -.25rem;
    padding-inline-start: 0;
  }

  .flex-button-group[data-variant="segmented"] {
    flex-flow: row;
    justify-content: flex-start;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .flex-button-group[data-variant="segmented"] .flex-button {
    position: relative;
    border-radius: 0;
  }

  .flex-button-group[data-variant="segmented"] .flex-button:hover {
    z-index: 2;
  }

  .flex-button-group[data-variant="segmented"] .flex-button:active {
    z-index: 2;
  }

  .flex-button-group[data-variant="segmented"] .flex-button:focus {
    z-index: 3;
  }

  .flex-button-group__item {
    margin: .25rem;
  }

  .flex-button-group__item:last-child {
    margin-inline-end: 0;
  }

  .flex-button-group__item .flex-button {
    block-size: 100%;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:first-child > .flex-button {
    margin-inline-end: -1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:first-child > .flex-button:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--flex-radius-sm);
    border-top-left-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:first-child > .flex-button:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--flex-radius-sm);
    border-top-left-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:first-child > .flex-button:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--flex-radius-sm);
    border-top-left-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:first-child > .flex-button:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--flex-radius-sm);
    border-top-right-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:first-child > .flex-button:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--flex-radius-sm);
    border-top-right-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:first-child > .flex-button:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--flex-radius-sm);
    border-top-right-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:last-child > .flex-button {
    margin-inline-start: -1px;
    margin-inline-end: 0;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:last-child > .flex-button:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--flex-radius-sm);
    border-top-left-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:last-child > .flex-button:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--flex-radius-sm);
    border-top-left-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:last-child > .flex-button:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: var(--flex-radius-sm);
    border-top-left-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:last-child > .flex-button:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--flex-radius-sm);
    border-top-right-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:last-child > .flex-button:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--flex-radius-sm);
    border-top-right-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:last-child > .flex-button:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: var(--flex-radius-sm);
    border-top-right-radius: var(--flex-radius-sm);
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:-webkit-any(:first-child, :last-child))) > .flex-button {
    border-radius: 0;
    margin-inline-start: -1px;
    margin-inline-end: -1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:-moz-any(:first-child, :last-child))) > .flex-button {
    border-radius: 0;
    margin-inline-start: -1px;
    margin-inline-end: -1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:is(:first-child, :last-child))) > .flex-button {
    border-radius: 0;
    margin-inline-start: -1px;
    margin-inline-end: -1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:last-child)) .flex-button:before {
    border-inline-end: 1px solid color-mix(in srgb, var(--flex-color-accent) 70%, black);
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    block-size: 100%;
    inline-size: 1px;
    top: 0;
    bottom: 0;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:last-child)) .flex-button:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    right: 1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:last-child)) .flex-button:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    right: 1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:last-child)) .flex-button:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    right: 1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:last-child)) .flex-button:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    left: 1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:last-child)) .flex-button:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    left: 1px;
  }

  .flex-button-group[data-variant="segmented"] .flex-button-group__item:where(:not(:last-child)) .flex-button:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    left: 1px;
  }
}

/* src/design-system/components/flex-footer/styles.css */
@layer block {
  .flex-footer {
    font-size: 1.06rem;
    line-height: 1.5;
  }

  .flex-footer__return-to-top {
    padding-inline: var(--flex-space-md);
    background-color: var(--flex-color-bg-subtle);
    border-block-start: 1px solid var(--flex-color-border);
    text-align: end;
    padding-block-start: .75rem;
    padding-block-end: .75rem;
    line-height: .9;
  }

  .flex-footer__return-to-top a {
    color: var(--flex-color-link);
    text-decoration: underline;
  }

  .flex-footer__return-to-top a:visited {
    color: var(--flex-color-link-visited);
  }

  .flex-footer__return-to-top a:hover {
    color: var(--flex-color-link-hover);
  }

  .flex-footer__return-to-top a:active {
    color: var(--flex-color-link-active);
  }

  .flex-footer__return-to-top a:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

  .flex-footer__primary {
    background-color: var(--flex-color-bg-subtle);
  }

  .flex-footer__primary-container {
    max-inline-size: var(--flex-content-max-width);
    padding-inline: var(--flex-space-md);
  }

  .flex-footer__primary-content {
    line-height: 1.1;
  }

  .flex-footer__primary-link {
    color: var(--flex-color-text);
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--flex-text-sm);
    border: 0;
    padding: .75rem 0;
  }

  .flex-footer__primary-link:hover {
    text-decoration: underline;
  }

  .flex-footer__nav {
    max-inline-size: var(--flex-content-max-width);
    padding-inline: var(--flex-space-md);
  }

  .flex-footer__nav > ul {
    list-style-type: none;
    display: flex;
    gap: var(--flex-space-md);
    flex-wrap: wrap;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
  }

  .flex-footer__secondary {
    color: var(--flex-color-text);
    background-color: var(--flex-color-border);
    padding-block-start: 1.25rem;
    padding-block-end: 1.25rem;
  }

  .flex-footer__secondary-container {
    max-inline-size: var(--flex-content-max-width);
    padding-inline: var(--flex-space-md);
    display: flex;
    justify-content: space-between;
    align-items:  center;
  }

  .flex-footer__secondary a {
    color: var(--flex-color-text);
  }

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

  .flex-footer__logo-img {
    block-size: 3rem;
  }

  .flex-footer__logo-heading {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.1;
  }

  .flex-footer__contact-info {
    display: inline-block;
  }

  .flex-footer__contact-info a {
    color: var(--flex-color-text);
    text-decoration: none;
  }

  .flex-footer__secondary-link {
    margin-inline-start: 0;
    padding: 0;
    line-height: 1.1;
  }

  .flex-footer__secondary-link + .flex-footer__secondary-link {
    padding-block-start: 1rem;
  }

  .flex-footer__secondary-link a {
    color: var(--flex-color-link);
    text-decoration: underline;
  }

  .flex-footer__secondary-link a:visited {
    color: var(--flex-color-link-visited);
  }

  .flex-footer__secondary-link a:hover {
    color: var(--flex-color-link-hover);
  }

  .flex-footer__secondary-link a:active {
    color: var(--flex-color-link-active);
  }

  .flex-footer__secondary-link a:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

  .flex-footer:not([data-variant]) .flex-footer__logo, .flex-footer[data-variant="slim"] .flex-footer__logo {
    align-items:  center;
  }

  .flex-footer:not([data-variant]) .flex-footer__logo-img, .flex-footer[data-variant="slim"] .flex-footer__logo-img {
    block-size: 3rem;
  }

  .flex-footer:not([data-variant]) .flex-footer__contact-info, .flex-footer[data-variant="slim"] .flex-footer__contact-info {
    margin-block-start: 0;
    padding-block-start: 1rem;
    padding-block-end: 1rem;
  }

  .flex-footer[data-variant="medium"] .flex-footer__nav {
    padding-inline-start: 2rem;
    padding-inline-end: 2rem;
  }

  .flex-footer[data-variant="medium"] .flex-footer__logo {
    align-items:  center;
  }

  .flex-footer[data-variant="big"] .flex-footer__nav {
    border-block-end: none;
  }

  .flex-footer[data-variant="big"] .flex-footer__primary-content {
    line-height: 1.1;
  }
}

/* src/design-system/components/flex-header/styles.css */
@layer block {
  flex-header {
    display: block;
  }

  .flex-header {
    background-color: var(--flex-color-surface);
    border-block-end: 1px solid var(--flex-color-border);
    font-size: 1.06rem;
    line-height: 1.5;
  }

  .flex-header__inner {
    padding-inline: var(--flex-space-md);
    display: flex;
    justify-content: space-between;
    align-items:  center;
  }

  .flex-header__logo {
    flex-shrink: 0;
    padding-block-start: .75rem;
    padding-block-end: .75rem;
  }

  .flex-header__logo-link {
    color: var(--flex-color-text);
    text-decoration: none;
  }

  .flex-header__logo-link:hover {
    text-decoration: underline;
  }

  .flex-header__logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .flex-header__menu-btn {
    display: none;
    background-color: var(--flex-color-accent);
    color: var(--flex-color-on-accent);
    box-shadow: none;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    flex: 0 auto;
    block-size: 3rem;
    padding-inline-start: .75rem;
    padding-inline-end: .75rem;
    font-size: .87rem;
    font-weight: 400;
  }

  .flex-header__menu-btn:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

  .flex-header__menu-btn:hover {
    background-color: var(--flex-color-link-hover);
  }

  .flex-header__nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items:  center;
    inline-size: 100%;
    padding: 0 0 0 .5rem;
  }

  .flex-header__close-btn {
    display: none;
    box-shadow: none;
    color: currentColor;
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
    float: right;
    background-color: #0000;
    border: 0;
    border-radius: 0;
    flex: none;
    block-size: 3rem;
    inline-size: 3rem;
    margin: -.75rem -1rem 1rem auto;
    padding: 0;
    font-size: .87rem;
    font-weight: 400;
  }

  .flex-header__close-btn:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

  .flex-header__close-btn:hover {
    text-decoration: underline;
  }

  .flex-header__nav-list {
    display: flex;
    list-style: none;
    flex-direction: row;
    align-items:  center;
    inline-size: auto;
    margin: 0;
    padding: 0;
  }

  .flex-header__nav-item {
    font-size: .93rem;
    line-height: .9;
  }

  .flex-header__nav-link {
    display: flex;
    color: var(--flex-color-text-muted);
    text-decoration: none;
    align-items:  center;
    block-size: 100%;
    padding: 1rem;
    font-weight: 700;
  }

  .flex-header__nav-link:hover {
    color: var(--flex-color-accent);
  }

  .flex-header__nav-link--current, .flex-header__nav-link:hover {
    position: relative;
  }

  .flex-header__nav-link--current:after, .flex-header__nav-link:hover:after {
    background-color: var(--flex-color-accent);
    content: "";
    display: block;
    position: absolute;
    border-radius: 0;
    block-size: .25rem;
    bottom: -.25rem;
    left: 1rem;
    right: 1rem;
  }

  .flex-header__user-menu {
    position: relative;
    margin-inline-start: auto;
    padding-inline-start: var(--flex-space-sm);
  }

  .flex-header__user-trigger {
    display: inline-flex;
    align-items:  center;
    gap: var(--flex-space-xs);
    padding: var(--flex-space-xs) var(--flex-space-sm);
    color: var(--flex-color-text);
    font: inherit;
    cursor: pointer;
    background: none;
    border: 1px solid #0000;
    border-radius: 999px;
  }

  .flex-header__user-trigger:hover {
    border-color: var(--flex-color-border);
    background: #00000008;
  }

  .flex-header__user-trigger:focus-visible {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 2px;
  }

  .flex-header__avatar {
    display: block;
    border-radius: 50%;
  }

  .flex-header__avatar--lg {
    block-size: 3rem;
    inline-size: 3rem;
  }

  .flex-header__user-caret {
    color: var(--flex-color-text-muted);
    block-size: .75rem;
    inline-size: .75rem;
  }

  .flex-header__user-panel {
    position: absolute;
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    box-shadow: var(--flex-shadow-md);
    padding: var(--flex-space-sm) 0;
    z-index: 500;
    min-inline-size: 16rem;
    top: calc(100% + var(--flex-space-xs));
  }

  .flex-header__user-panel:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-header__user-panel:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-header__user-panel:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-header__user-panel:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-header__user-panel:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-header__user-panel:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-header__user-panel[hidden] {
    display: none;
  }

  .flex-header__user-identity {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-sm) var(--flex-space-md);
  }

  .flex-header__user-name {
    color: var(--flex-color-text);
    font-weight: 700;
    line-height: 1.2;
  }

  .flex-header__user-login {
    color: var(--flex-color-text-muted);
    font-size: .85rem;
    line-height: 1.2;
  }

  .flex-header__user-divider {
    background: var(--flex-color-border);
    margin-block: var(--flex-space-xs);
    border: 0;
    block-size: 1px;
  }

  .flex-header__user-theme {
    padding: var(--flex-space-xs) var(--flex-space-md);
  }

  .flex-header__user-theme .flex-theme-toggle {
    margin-inline-start: 0;
    padding-inline-start: 0;
  }

  .flex-header__user-settings {
    padding: 0 var(--flex-space-md);
  }

  .flex-header__user-settings-link {
    display: block;
    padding: var(--flex-space-xs) var(--flex-space-sm);
    color: var(--flex-color-text);
    text-decoration: none;
    border-radius: var(--flex-radius-sm);
    border: 1px solid #0000;
    font-weight: 700;
  }

  .flex-header__user-settings-link:hover {
    background: var(--flex-color-accent);
    color: var(--flex-color-on-accent);
    border-color: var(--flex-color-accent);
  }

  .flex-header__user-settings-link:focus-visible {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 2px;
  }

  .flex-header__user-signout {
    padding: 0 var(--flex-space-md) var(--flex-space-xs);
  }

  .flex-header__user-signout-btn {
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    padding: var(--flex-space-xs) var(--flex-space-sm);
    font: inherit;
    color: var(--flex-color-text);
    cursor: pointer;
    background: none;
    inline-size: 100%;
    font-weight: 700;
  }

  .flex-header__user-signout-btn:hover {
    background: var(--flex-color-accent);
    color: var(--flex-color-on-accent);
    border-color: var(--flex-color-accent);
  }

  .flex-header__user-signout-btn:focus-visible {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 2px;
  }

  .flex-header__overlay {
    position: fixed;
    z-index: 400;
    background: #000000b3;
    inset: 0;
  }

  @media (max-width: 63.9375rem) {
    .flex-header__inner {
      border-block-end: 1px solid var(--flex-color-border);
      align-items:  center;
    }

    .flex-header__menu-btn {
      display: block;
    }

    .flex-header__nav {
      position: fixed;
      background: var(--flex-color-surface);
      display: none;
      overflow-y: auto;
      z-index: 500;
      border-inline-end: 0;
      flex-direction: column;
      justify-content: flex-start;
      inline-size: 15rem;
      padding: 1rem;
      top: 0;
      bottom: 0;
    }

    .flex-header__nav.is-visible {
      display: flex;
      animation: flex-header-slidein .3s ease-in-out;
    }

    .flex-header__close-btn {
      display: block;
    }

    .flex-header__nav-list {
      flex-direction: column;
      align-items: stretch;
      inline-size: 100%;
    }

    .flex-header__nav-item {
      border-block-start: 1px solid var(--flex-color-border);
    }

    .flex-header__nav-link {
      padding-block-start: .75rem;
      padding-block-end: .75rem;
      padding-inline-start: 1rem;
      padding-inline-end: 1rem;
    }

    .flex-header__nav-link--current:after, .flex-header__nav-link:hover:after {
      display: none;
    }

    .flex-header__nav-link--current {
      color: var(--flex-color-accent);
      font-weight: 700;
    }

    .flex-header__user-menu {
      display: contents;
    }

    .flex-header__user-trigger {
      display: none;
    }

    .flex-header__user-panel, .flex-header__user-panel[hidden] {
      display: block;
      position: static;
      border: 0;
      border-block-start: 2px solid var(--flex-color-border);
      box-shadow: none;
      padding: var(--flex-space-md) 0 0;
      background: none;
      border-radius: 0;
      order: 99;
      min-inline-size: 0;
      margin-block-start: var(--flex-space-sm);
      inset: auto;
    }

    .flex-header__user-identity, .flex-header__user-theme, .flex-header__user-settings, .flex-header__user-signout {
      padding-inline-start: 0;
      padding-inline-end: 0;
    }

    .flex-header__nav > .flex-theme-toggle {
      border-block-start: 2px solid var(--flex-color-border);
      order: 99;
      inline-size: 100%;
      margin-block-start: var(--flex-space-sm);
      margin-inline-start: 0;
      padding-block-start: var(--flex-space-md);
      padding-inline-start: 0;
    }
  }

  @keyframes flex-header-slidein {
    0% {
      transform: translateX(15rem);
    }

    100% {
      transform: translateX(0);
    }
  }

  .flex-header__nav > .flex-theme-toggle {
    display: flex;
    flex-shrink: 0;
    align-items:  center;
    margin-inline-start: auto;
    padding-inline-start: var(--flex-space-sm);
  }

  .flex-theme-toggle__fieldset {
    display: flex;
    border: 0;
    align-items:  center;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .flex-theme-toggle__legend {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
  }

  .flex-theme-toggle__option {
    display: flex;
  }

  .flex-theme-toggle__input {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
  }

  .flex-theme-toggle__label {
    display: flex;
    cursor: pointer;
    border: 1px solid var(--flex-color-border);
    color: var(--flex-color-text-muted);
    background: none;
    justify-content: center;
    align-items:  center;
    block-size: 2rem;
    inline-size: 2rem;
  }

  .flex-theme-toggle__option:first-child .flex-theme-toggle__label {
    border-radius: var(--flex-radius-sm) 0 0 var(--flex-radius-sm);
  }

  .flex-theme-toggle__option:last-child .flex-theme-toggle__label {
    border-radius: 0 var(--flex-radius-sm) var(--flex-radius-sm) 0;
  }

  .flex-theme-toggle__option:not(:first-child) .flex-theme-toggle__label {
    border-inline-start: 0;
  }

  .flex-theme-toggle__input:checked + .flex-theme-toggle__label {
    background: var(--flex-color-accent);
    border-color: var(--flex-color-accent);
    color: var(--flex-color-on-accent);
  }

  .flex-theme-toggle__input:focus-visible + .flex-theme-toggle__label {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 2px;
    z-index: 1;
    position: relative;
  }

  .flex-theme-toggle__icon {
    fill: currentColor;
    block-size: 1rem;
    inline-size: 1rem;
  }
}

/* src/design-system/components/flex-banner/styles.css */
@layer block {
  flex-banner {
    display: block;
  }

  .flex-banner {
    background-color: var(--flex-color-bg-subtle);
    padding-block-end: 0;
    font-size: .87rem;
    line-height: 1.5;
  }

  .flex-banner__header {
    color: var(--flex-color-text);
    min-block-size: 0;
    padding-block-start: .5rem;
    padding-block-end: .5rem;
    font-size: .8rem;
  }

  .flex-banner__inner {
    padding-inline: var(--flex-space-md);
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-items:  center;
  }

  .flex-banner__header-text {
    margin-inline-end: .5rem;
  }

  .flex-banner__header-text p {
    display: flex;
    align-items:  center;
    gap: .5rem;
    margin: 0;
    font-size: .8rem;
    line-height: 1.1;
  }

  .flex-banner__header-flag {
    vertical-align: middle;
    block-size: auto;
    inline-size: 1rem;
    margin-inline-end: .25rem;
  }

  .flex-banner__button {
    box-shadow: none;
    text-align: start;
    color: var(--flex-color-link);
    display: block;
    text-decoration: none;
    cursor: pointer;
    background-color: #0000;
    border: 0;
    border-radius: 0;
    block-size: auto;
    inline-size: auto;
    margin: 0;
    padding: 0;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.1;
  }

  .flex-banner__button:hover {
    text-decoration: underline;
    color: var(--flex-color-link-hover);
  }

  .flex-banner__button:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

  .flex-banner__button:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-color: var(--flex-color-link);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    block-size: .75rem;
    inline-size: .75rem;
    margin-inline-start: .25rem;
    transition: transform .15s;
  }

  .flex-banner__button[aria-expanded="true"]:after {
    transform: rotate(180deg);
  }

  .flex-banner__button-text {
    text-decoration: underline;
  }

  .flex-banner__content {
    padding-inline: var(--flex-space-md);
    overflow: hidden;
    color: var(--flex-color-text);
    background-color: #0000;
    padding-block-start: .25rem;
    padding-block-end: 1rem;
    font-size: .87rem;
  }

  .flex-banner__guidance {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .flex-banner__guidance-gov, .flex-banner__guidance-ssl {
    display: flex;
    flex: 40%;
    align-items:  flex-start;
    min-inline-size: 200px;
    max-inline-size: 64ex;
  }

  :is(.flex-banner__guidance-gov, .flex-banner__guidance-ssl) p {
    margin-block-start: 0;
    margin-block-end: .25rem;
    font-size: .87rem;
    line-height: 1.5;
  }

  :is(.flex-banner__guidance-gov, .flex-banner__guidance-ssl) p:last-child {
    margin-block-end: 0;
  }

  .flex-banner__icon {
    flex-shrink: 0;
    inline-size: 2.5rem;
    margin-inline-end: .5rem;
  }

  .flex-banner__icon-img {
    fill: var(--flex-color-accent);
    block-size: 2.5rem;
    inline-size: 2.5rem;
  }

  .flex-banner__guidance-text p {
    margin-block-start: 0;
    margin-block-end: .25rem;
    font-size: .87rem;
    line-height: 1.5;
  }

  .flex-banner__guidance-text p:last-child {
    margin-block-end: 0;
  }
}

/* src/design-system/components/flex-identifier/styles.css */
@layer block {
  .flex-identifier {
    color: var(--flex-white);
    background-color: var(--flex-gray-90);
    padding-block-end: 1rem;
    font-size: 1.06rem;
    line-height: 1.3;
  }

  .flex-identifier__container {
    padding-inline: var(--flex-space-md);
    max-inline-size: var(--flex-content-max-width);
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .flex-identifier__section {
    padding-block-start: 1rem;
    padding-block-end: 1rem;
  }

  .flex-identifier__section--masthead .flex-identifier__container {
    display: flex;
    align-items:  center;
  }

  .flex-identifier__logos {
    display: flex;
    margin-inline-end: 1rem;
  }

  .flex-identifier__logo {
    text-decoration: none;
    display: block;
    block-size: 3rem;
  }

  .flex-identifier__logo + .flex-identifier__logo {
    margin-inline-start: .5rem;
  }

  .flex-identifier__logo-img {
    block-size: 100%;
    inline-size: auto;
  }

  .flex-identifier__identity {
    flex: 1;
    margin-block-start: 0;
  }

  .flex-identifier__identity-disclaimer, .flex-identifier__identity-domain {
    margin: 0;
    padding: 0;
  }

  .flex-identifier__identity-domain {
    color: var(--flex-gray-cool-30);
  }

  .flex-identifier__identity-disclaimer {
    font-weight: 700;
  }

  .flex-identifier__identity-disclaimer a {
    color: var(--flex-gray-cool-10);
  }

  .flex-identifier__identity-disclaimer a:visited {
    color: var(--flex-gray-cool-10);
  }

  .flex-identifier__identity-disclaimer a:active {
    color: var(--flex-gray-5);
  }

  .flex-identifier__identity-disclaimer a:hover {
    color: var(--flex-gray-5);
  }

  .flex-identifier__required-links-list {
    list-style-type: none;
    column-count: 2;
    column-fill: balance;
    column-gap: 2rem;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
  }

  @media (min-width: 48rem) {
    .flex-identifier__required-links-list {
      column-count: 4;
    }
  }

  .flex-identifier__required-links-list-item {
    break-inside: avoid;
    margin-block-end: .5rem;
  }

  .flex-identifier__required-links-list-item:last-child {
    margin-block-end: 0;
  }

  .flex-identifier__required-link, .flex-identifier__required-link:visited {
    color: var(--flex-gray-cool-30);
    display: inline-block;
  }

  .flex-identifier__required-link:active, .flex-identifier__required-link:hover {
    color: var(--flex-gray-cool-10);
  }

  .flex-identifier__usagov-description {
    margin: 0;
  }

  .flex-identifier__section--usagov a {
    color: var(--flex-gray-cool-10);
    font-weight: 700;
  }

  .flex-identifier__section--usagov a:visited {
    color: var(--flex-gray-cool-10);
  }

  .flex-identifier__section--usagov a:active {
    color: var(--flex-gray-5);
  }

  .flex-identifier__section--usagov a:hover {
    color: var(--flex-gray-5);
  }
}

/* src/design-system/components/flex-form/styles.css */
@layer block {
  .flex-form {
    font-size: var(--flex-text-uswds);
    max-inline-size: 32em;
    line-height: 1.3;
  }

  .flex-form[data-size="large"] {
    max-inline-size: 46rem;
  }

  .flex-form :where(.flex-input, .flex-textarea, .flex-select) {
    max-inline-size: none;
  }

  .flex-form .flex-button {
    margin-block-start: 1.5rem;
  }

  .flex-form abbr[title="required"] {
    text-decoration: none;
  }

  .flex-form .flex-form-group {
    margin-block-start: 1rem;
  }

  .flex-form .flex-form-group .flex-label:first-child {
    margin-block-start: 0;
  }

  .flex-form .flex-form-group[data-state="error"] {
    border-inline-start: .25rem solid var(--flex-color-error);
    position: relative;
    margin-inline-start: -1.25rem;
    padding-inline-start: 1rem;
  }

  .flex-form .flex-label {
    margin-block-start: 0;
  }

  .flex-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .flex-form fieldset + fieldset {
    margin-block-start: var(--flex-space-xl);
  }

  .flex-form legend {
    margin-block-end: .5rem;
    padding: 0;
    font-size: 1.34rem;
    font-weight: 700;
  }
}

/* src/design-system/components/flex-form-review/styles.css */
@layer block {
  .flex-summary-list {
    margin: 0;
    padding: 0;
  }

  .flex-summary-list__row {
    display: flex;
    justify-content: space-between;
    gap: var(--flex-space-md);
    padding: var(--flex-space-sm) 0;
    border-bottom: 1px solid var(--flex-color-border);
  }

  .flex-summary-list__key {
    flex: none;
    max-width: 50%;
    font-weight: 700;
  }

  .flex-summary-list__value {
    text-align: right;
    margin: 0;
  }
}

/* src/design-system/components/flex-form-step-text/styles.css */
@layer block {
  .flex-form-step-text {
    display: block;
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    margin-bottom: var(--flex-space-xs);
    font-weight: normal;
  }
}

/* src/design-system/components/flex-form-error-summary/styles.css */
@layer block {
  .flex-form-error-summary {
    border-left: .25rem solid var(--flex-color-error);
    padding: var(--flex-space-lg);
    margin-bottom: var(--flex-space-lg);
  }

  .flex-form-error-summary:focus {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset);
  }

  .flex-form-error-summary h2 {
    margin: 0 0 var(--flex-space-sm) 0;
    font-size: 1.17rem;
    font-weight: 700;
  }

  .flex-form-error-summary ul {
    margin: 0;
    padding-left: 1.25rem;
  }

  .flex-form-error-summary li {
    margin-bottom: var(--flex-space-xs);
  }

  .flex-form-error-summary a {
    color: var(--flex-color-error);
    font-weight: 700;
  }
}

/* src/design-system/components/flex-validation/styles.css */
@layer block {
  .flex-validation {
    font-size: var(--flex-text-uswds);
    margin-block-start: var(--flex-space-xs);
    line-height: 1.5;
  }

  .flex-validation[data-state="error"] .flex-validation__message {
    color: var(--flex-color-error);
    font-weight: 700;
  }

  .flex-validation[data-state="success"] .flex-validation__message {
    color: var(--flex-color-success);
    font-weight: 700;
  }

  .flex-validation-summary {
    font-size: var(--flex-text-uswds);
    border-inline-start: .25rem solid var(--flex-color-error);
    margin-block-end: 1.5rem;
    padding: 1rem 1.25rem;
    line-height: 1.5;
  }

  .flex-validation-summary__heading {
    color: var(--flex-color-error);
    margin: 0 0 .5rem;
    font-size: 1.34rem;
    font-weight: 700;
  }

  .flex-validation-summary__list {
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
  }

  .flex-validation-summary__list li {
    margin-block-end: .25rem;
  }

  .flex-validation-summary__list a {
    color: var(--flex-color-error);
    text-decoration: underline;
  }

  .flex-validation-summary__list a:hover {
    text-decoration: none;
  }

  .flex-checklist {
    list-style: none;
    font-size: var(--flex-text-uswds);
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }

  .flex-checklist__item {
    text-indent: -2.5rem;
    margin-block-start: .5rem;
    margin-block-end: 0;
    margin-inline-start: 2.5rem;
  }

  .flex-checklist__item:before {
    content: " ";
    display: inline-block;
    block-size: 1rem;
    inline-size: 2rem;
    margin-inline-start: -.25rem;
    margin-inline-end: .75rem;
  }

  .flex-checklist__item[data-state="checked"]:before {
    content: "✓";
    color: var(--flex-color-success);
    font-weight: 700;
  }
}

/* src/design-system/components/flex-input-prefix-suffix/styles.css */
@layer block {
  .flex-input-group {
    font-size: var(--flex-text-uswds);
    appearance: none;
    border: 1px solid var(--flex-gray-cool-60);
    color: var(--flex-color-text);
    display: flex;
    max-inline-size: var(--flex-control-max-width);
    block-size: var(--flex-control-height);
    position: relative;
    border-radius: 0;
    align-items:  center;
    inline-size: 100%;
    margin-block-start: var(--flex-control-margin-top);
    padding: 0;
    line-height: 1.3;
  }

  .flex-input-group .flex-input {
    border: 0;
    block-size: 100%;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
    margin-block-start: 0;
  }

  .flex-input-group .flex-input:focus-visible {
    outline: none;
  }

  .flex-input-group:focus-within {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset-inset);
  }

  .flex-input-group[data-state="error"] {
    border-width: 4px;
    border-color: var(--flex-color-error);
  }

  .flex-input-group[data-state="success"] {
    border-width: 4px;
    border-color: var(--flex-color-success);
  }

  .flex-input-group:has(.flex-input:disabled) .flex-input-group__prefix {
    color: var(--flex-color-disabled-dark);
    background-color: var(--flex-color-disabled-lighter);
    cursor: not-allowed;
  }

  .flex-input-group:has(.flex-input:disabled) .flex-input-group__suffix {
    color: var(--flex-color-disabled-dark);
    background-color: var(--flex-color-disabled-lighter);
    cursor: not-allowed;
  }

  .flex-input-group__prefix, .flex-input-group__suffix {
    color: var(--flex-color-ink);
    user-select: none;
    white-space: nowrap;
    display: flex;
    align-items:  center;
    padding: 0 .5rem;
    line-height: 0;
  }

  .flex-input-group__suffix {
    position: absolute;
  }

  .flex-input-group__suffix:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-input-group__suffix:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-input-group__suffix:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-input-group__suffix:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-input-group__suffix:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-input-group__suffix:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-input-group:has(.flex-input-group__suffix) .flex-input {
    padding-inline-end: 2.5rem;
  }

  .flex-input-group:has(.flex-input-group__prefix) .flex-input {
    padding-inline-start: 2.5rem;
    padding-inline-end: .5rem;
  }

  .flex-input-group__prefix {
    position: absolute;
  }

  .flex-input-group__prefix:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-input-group__prefix:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-input-group__prefix:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-input-group__prefix:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-input-group__prefix:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-input-group__prefix:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }
}

/* src/design-system/components/flex-site-alert/styles.css */
@layer block {
  .flex-site-alert {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    line-height: 1.5;
  }

  .flex-site-alert[data-variant="info"] {
    background-color: var(--flex-color-info-lighter);
    border-inline-start: .5rem solid var(--flex-color-info);
  }

  .flex-site-alert[data-variant="info"] .flex-site-alert__body {
    padding-inline-start: 4.25rem;
  }

  .flex-site-alert[data-variant="info"] .flex-site-alert__body:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    block-size: 2rem;
    inline-size: 2rem;
    top: .6667rem;
  }

  .flex-site-alert[data-variant="info"] .flex-site-alert__body:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 1.0833rem;
  }

  .flex-site-alert[data-variant="info"] .flex-site-alert__body:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 1.0833rem;
  }

  .flex-site-alert[data-variant="info"] .flex-site-alert__body:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 1.0833rem;
  }

  .flex-site-alert[data-variant="info"] .flex-site-alert__body:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 1.0833rem;
  }

  .flex-site-alert[data-variant="info"] .flex-site-alert__body:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 1.0833rem;
  }

  .flex-site-alert[data-variant="info"] .flex-site-alert__body:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 1.0833rem;
  }

  .flex-site-alert[data-variant="emergency"] {
    background-color: var(--flex-color-emergency);
    border-inline-start: .5rem solid var(--flex-color-emergency);
    color: var(--flex-color-on-accent);
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__body {
    padding-inline-start: 4.25rem;
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__body:before {
    background-color: var(--flex-color-on-accent);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    block-size: 2rem;
    inline-size: 2rem;
    top: .6667rem;
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__body:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 1.0833rem;
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__body:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 1.0833rem;
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__body:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 1.0833rem;
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__body:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 1.0833rem;
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__body:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 1.0833rem;
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__body:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 1.0833rem;
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__heading {
    color: var(--flex-color-on-accent);
  }

  .flex-site-alert[data-variant="emergency"] .flex-site-alert__text {
    color: var(--flex-color-on-accent);
  }

  .flex-site-alert[data-variant="emergency"] a {
    color: var(--flex-color-on-accent);
  }

  .flex-site-alert[data-slim] .flex-site-alert__body {
    padding-inline-start: 1.75rem;
  }

  .flex-site-alert[data-slim] .flex-site-alert__body:before {
    display: none;
  }

  .flex-site-alert[data-no-icon] .flex-site-alert__body {
    padding-inline-start: 1.75rem;
  }

  .flex-site-alert[data-no-icon] .flex-site-alert__body:before {
    display: none;
  }

  .flex-site-alert__body {
    position: relative;
    max-inline-size: 64rem;
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding: 1rem 1.75rem;
  }

  .flex-site-alert__heading {
    margin: 0 0 .5rem;
    font-size: 1.46rem;
    font-weight: 700;
    line-height: .9;
  }

  .flex-site-alert__text {
    font-weight: 400;
    font-size: var(--flex-text-uswds);
    margin: 0;
    line-height: 1.5;
  }
}

/* src/design-system/components/flex-preview-banner/styles.css */
@layer block {
  .flex-preview-banner {
    background-color: var(--flex-color-warning-lighter);
    border-block-end: 2px solid var(--flex-color-warning);
    color: var(--flex-color-text);
    font-size: var(--flex-text-uswds);
    line-height: 1.5;
  }

  .flex-preview-banner__body {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-sm) var(--flex-space-md);
    flex-wrap: wrap;
    max-inline-size: 64rem;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .flex-preview-banner__label {
    padding: 0 var(--flex-space-xs);
    border-radius: var(--flex-radius-sm);
    background-color: var(--flex-color-warning);
    color: var(--flex-color-text);
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .flex-preview-banner__text {
    flex: 20rem;
  }

  .flex-preview-banner__branch {
    font-family: var(--flex-font-mono);
  }

  .flex-preview-banner__sha {
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-xs);
  }

  .flex-preview-banner__link {
    color: var(--flex-color-text);
    text-decoration: underline;
    font-weight: 600;
  }

  .flex-preview-banner__link:hover, .flex-preview-banner__link:focus {
    text-decoration: none;
  }
}

/* src/design-system/components/flex-summary-box/styles.css */
@layer block {
  .flex-summary-box {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    background-color: var(--flex-color-info-lighter);
    border: 1px solid var(--flex-cyan-20);
    position: relative;
    border-radius: .25rem;
    margin-block-start: 1rem;
    padding: 1.5rem;
    line-height: 1.5;
  }

  .flex-summary-box__heading {
    margin: 0 0 .5rem;
    font-size: 1.46rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .flex-summary-box__text {
    margin: 0;
  }

  .flex-summary-box__text ul {
    margin: 0;
    padding-inline-start: 2ch;
  }

  .flex-summary-box__text ol {
    margin: 0;
    padding-inline-start: 2ch;
  }

  .flex-summary-box__text li:last-child {
    margin-block-end: 0;
  }
}

/* src/design-system/components/flex-step-indicator/styles.css */
@layer block {
  .flex-step-indicator {
    font-size: var(--flex-text-uswds);
    background-color: var(--flex-color-bg);
    margin-block-end: 2rem;
    line-height: 1.1;
  }

  .flex-step-indicator__segments {
    counter-reset: flex-step-indicator;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .flex-step-indicator__segment {
    counter-increment: flex-step-indicator;
    position: relative;
    flex: 1;
    min-block-size: .5rem;
    max-inline-size: 15rem;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
  }

  .flex-step-indicator__segment:after {
    background-color: var(--flex-gray-40);
    content: "";
    display: block;
    position: absolute;
    block-size: .5rem;
    top: 0;
    left: 0;
    right: 0;
  }

  .flex-step-indicator__segment[data-state="complete"]:after {
    background-color: var(--flex-color-text);
  }

  .flex-step-indicator__segment[data-state="complete"] .flex-step-indicator__segment-label {
    color: var(--flex-color-text);
  }

  .flex-step-indicator__segment[data-state="current"]:after {
    background-color: var(--flex-color-accent);
  }

  .flex-step-indicator__segment[data-state="current"] .flex-step-indicator__segment-label {
    color: var(--flex-color-accent);
    font-weight: 700;
  }

  .flex-step-indicator__segment-label {
    color: var(--flex-gray-cool-60);
    display: block;
    font-size: var(--flex-text-uswds);
    text-align: start;
    margin-block-start: 1rem;
    padding-inline-end: 2rem;
  }

  .flex-step-indicator__header {
    display: flex;
    align-items: baseline;
  }

  .flex-step-indicator__heading {
    color: var(--flex-color-text);
    margin: 2rem 0 0;
    font-size: 1.46rem;
    font-weight: 700;
  }

  .flex-step-indicator__current-step {
    font-feature-settings: "tnum" 1, "kern" 1;
    background-color: var(--flex-color-accent);
    color: var(--flex-color-on-accent);
    display: inline-block;
    text-align: center;
    border-radius: 99rem;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    padding: calc(1.25rem - 1.1ex);
    font-weight: 400;
  }

  .flex-step-indicator__heading-text {
    margin-inline-start: .5rem;
  }

  .flex-step-indicator[data-variant="no-labels"] .flex-step-indicator__segment-label {
    display: none;
  }

  .flex-step-indicator[data-variant="no-labels"] .flex-step-indicator__segment {
    margin-block-start: 0;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
  }

  .flex-step-indicator[data-variant="no-labels"] .flex-step-indicator__segment:before {
    display: none;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment, .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment {
    margin-block-start: 1.25rem;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment:before, .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:before {
    font-feature-settings: "tnum" 1, "kern" 1;
    background-color: var(--flex-color-bg);
    box-shadow: inset 0 0 0 .25rem var(--flex-gray-40), 0 0 0 .25rem var(--flex-color-bg);
    color: var(--flex-gray-cool-60);
    content: counter(flex-step-indicator);
    display: block;
    position: absolute;
    text-align: center;
    z-index: 100;
    border-radius: 99rem;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    padding: calc(1.25rem - .9ex);
    font-weight: 700;
    line-height: .9;
    top: -1rem;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment:last-child:after, .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:last-child:after {
    display: none;
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment[data-state="complete"]:before, .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment[data-state="complete"]:before {
    background-color: var(--flex-color-text);
    box-shadow: 0 0 0 .25rem var(--flex-color-bg);
    color: var(--flex-color-on-accent);
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment[data-state="current"]:before, .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment[data-state="current"]:before {
    background-color: var(--flex-color-accent);
    box-shadow: 0 0 0 .25rem var(--flex-color-bg);
    color: var(--flex-color-on-accent);
  }

  .flex-step-indicator[data-variant="counters"] .flex-step-indicator__segment-label {
    margin-block-start: 2rem;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment {
    margin-block-start: .75rem;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment:before {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    padding: calc(.25rem + 1px);
    font-size: .93rem;
    top: -.5rem;
  }

  .flex-step-indicator[data-variant="small-counters"] .flex-step-indicator__segment-label {
    margin-block-start: 1.5rem;
  }

  .flex-step-indicator[data-variant="centered"] .flex-step-indicator__segment-label {
    text-align: center;
    padding-inline-end: 0;
  }
}

/* src/design-system/components/flex-process-list/styles.css */
@layer block {
  .flex-process-list {
    font-size: var(--flex-text-uswds);
    list-style-type: none;
    counter-reset: flex-numbered-list;
    position: relative;
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 20px 0 0 1rem;
    line-height: 1.5;
  }

  .flex-process-list > li {
    max-inline-size: unset;
    margin-block-end: 0;
  }

  .flex-process-list > .flex-process-list__item {
    max-inline-size: 72ex;
  }

  .flex-process-list__item {
    border-inline-start: .5rem solid var(--flex-blue-10);
    font-size: var(--flex-text-uswds);
    margin-block-end: 0;
    padding-block-end: 2rem;
    padding-inline-start: 2rem;
  }

  .flex-process-list__item:last-child {
    border-inline-start: .5rem solid #0000;
  }

  .flex-process-list__item:before {
    background-color: var(--flex-color-bg);
    border: .25rem solid var(--flex-color-text);
    box-shadow: 0 0 0 .25rem var(--flex-color-bg);
    color: var(--flex-color-text);
    content: counter(flex-numbered-list, decimal);
    counter-increment: flex-numbered-list;
    display: flex;
    position: absolute;
    border-radius: 99rem;
    flex-direction: row;
    justify-content: center;
    align-items:  center;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    margin-block-start: -.4rem;
    font-size: 1.46rem;
    font-weight: 700;
    line-height: .9;
  }

  .flex-process-list__item:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-process-list__item:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-process-list__item:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  .flex-process-list__item:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-process-list__item:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-process-list__item:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  .flex-process-list__item > :first-child {
    margin-block-start: 0;
  }

  .flex-process-list__item > :last-child {
    margin-block-end: 0;
  }

  .flex-process-list__item ul {
    list-style-type: disc;
  }

  .flex-process-list__item ul li:last-child {
    margin-block-end: 0;
  }

  .flex-process-list__heading {
    color: var(--flex-color-text);
    margin: 0;
    font-size: 1.46rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .flex-process-list__heading + * {
    margin-block-start: .25rem;
  }
}

/* src/design-system/components/flex-character-count/styles.css */
@layer block {
  flex-character-count {
    display: block;
  }

  .flex-character-count__message {
    display: inline-block;
    color: var(--flex-color-text);
    padding-block-start: .25rem;
    font-size: 1rem;
    line-height: 1.3;
  }

  .flex-character-count__message[data-state="error"] {
    color: var(--flex-color-error);
    font-weight: 700;
  }
}

/* src/design-system/components/flex-memorable-date/styles.css */
@layer block {
  flex-memorable-date {
    display: block;
  }

  .flex-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .flex-legend {
    margin-block-end: .5rem;
    padding: 0;
    font-size: 1.34rem;
    font-weight: 700;
  }

  .flex-memorable-date__fields {
    display: flex;
    flex-wrap: wrap;
  }

  .flex-memorable-date__field {
    flex: 0 auto;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    margin-block-start: 1rem;
    margin-inline-end: 1rem;
  }

  .flex-memorable-date__field .flex-label {
    margin-block-start: 0;
  }

  .flex-memorable-date__field--month input, .flex-memorable-date__field--day input {
    inline-size: 3rem;
  }

  .flex-memorable-date__field--year input {
    inline-size: 4.5rem;
  }
}

/* src/design-system/components/flex-input-mask/styles.css */
@layer block {
  flex-input-mask {
    display: block;
  }

  .flex-input-mask__wrapper {
    position: relative;
    display: inline-block;
    max-inline-size: var(--flex-control-max-width);
    inline-size: 100%;
  }

  .flex-input-mask__input {
    position: relative;
    z-index: 1;
    background-color: #0000;
  }

  .flex-input-mask__overlay {
    position: absolute;
    padding: var(--flex-control-padding);
    font-size: var(--flex-text-uswds);
    block-size: var(--flex-control-height);
    display: flex;
    color: var(--flex-color-text-muted);
    pointer-events: none;
    white-space: pre;
    z-index: 0;
    align-items:  center;
    margin-block-start: var(--flex-control-margin-top);
    line-height: 1.3;
    top: 0;
  }

  .flex-input-mask__overlay:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-input-mask__overlay:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-input-mask__overlay:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-input-mask__overlay:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-input-mask__overlay:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-input-mask__overlay:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }
}

/* src/design-system/components/flex-range-slider/styles.css */
@layer block {
  flex-range-slider {
    display: block;
  }

  .flex-range-slider__wrapper {
    display: flex;
    flex-direction: row;
    align-items:  center;
  }

  .flex-range-slider__input {
    appearance: none;
    max-inline-size: var(--flex-control-max-width);
    font-size: var(--flex-text-uswds);
    background: none;
    border: 0;
    block-size: 2.5rem;
    inline-size: 100%;
    margin-block-start: .5rem;
    padding-inline-start: 1px;
    padding-inline-end: 1px;
  }

  .flex-range-slider__input:focus {
    outline: 0;
  }

  .flex-range-slider__input:focus::-webkit-slider-thumb {
    background-color: var(--flex-color-bg);
    box-shadow: 0 0 0 2px var(--flex-color-focus);
  }

  .flex-range-slider__input:focus::-moz-range-thumb {
    background-color: var(--flex-color-bg);
    box-shadow: 0 0 0 2px var(--flex-color-focus);
  }

  .flex-range-slider__input::-webkit-slider-runnable-track {
    background-color: var(--flex-color-bg-subtle);
    border: 1px solid var(--flex-color-text-muted);
    cursor: pointer;
    border-radius: 99rem;
    block-size: 1rem;
    inline-size: 100%;
  }

  .flex-range-slider__input::-moz-range-track {
    background-color: var(--flex-color-bg-subtle);
    border: 1px solid var(--flex-color-text-muted);
    cursor: pointer;
    border-radius: 99rem;
    block-size: 1rem;
    inline-size: 100%;
  }

  .flex-range-slider__input::-webkit-slider-thumb {
    appearance: none;
    background: var(--flex-color-bg-subtle);
    box-shadow: 0 0 0 2px var(--flex-color-text-muted);
    cursor: pointer;
    outline: 2px solid #0000;
    border: 0;
    border-radius: 99rem;
    block-size: 1.25rem;
    inline-size: 1.25rem;
    margin-block-start: -.19rem;
  }

  .flex-range-slider__input::-moz-range-thumb {
    background: var(--flex-color-bg-subtle);
    box-shadow: 0 0 0 2px var(--flex-color-text-muted);
    cursor: pointer;
    outline: 2px solid #0000;
    border: 0;
    border-radius: 99rem;
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }

  .flex-range-slider__value {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    min-inline-size: 5%;
    max-inline-size: 5%;
    margin-inline-start: 5px;
    padding-block-start: 5px;
    line-height: 1.3;
  }
}

/* src/design-system/components/flex-file-input/styles.css */
@layer block {
  flex-file-input {
    display: block;
    max-inline-size: var(--flex-control-max-width);
    inline-size: 100%;
  }

  .flex-file-input__target {
    border: 1px dashed var(--flex-gray-cool-30);
    display: block;
    position: relative;
    text-align: center;
    inline-size: 100%;
    margin-block-start: .5rem;
    transition: border-color .15s, background-color .15s;
    font-size: .93rem;
  }

  .flex-file-input__target:hover {
    border-color: var(--flex-gray-60);
  }

  .flex-file-input__target[data-drag-active] {
    border-color: var(--flex-blue-vivid-60);
    background-color: var(--flex-blue-vivid-5);
    border-style: solid;
  }

  .flex-file-input__target--error {
    border-color: var(--flex-color-error);
  }

  .flex-file-input__instructions {
    pointer-events: none;
    position: relative;
    z-index: 3;
    color: var(--flex-color-text);
    padding-block-start: 2rem;
    padding-block-end: 2rem;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }

  .flex-file-input__choose {
    color: var(--flex-blue-vivid-60);
    text-decoration: underline;
    font-weight: 400;
  }

  .flex-file-input__input {
    cursor: pointer;
    position: absolute;
    text-indent: -999em;
    z-index: 1;
    opacity: 0;
    border: 0;
    block-size: 100%;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: .5rem;
    top: 0;
  }

  .flex-file-input__input:focus + .flex-file-input__instructions {
    outline: .25rem solid var(--flex-blue-vivid-40);
    outline-offset: 0;
  }

  .flex-file-input__preview-area {
    margin-block-start: .5rem;
  }

  .flex-file-input__preview {
    display: flex;
    border: 1px solid var(--flex-gray-10);
    background-color: var(--flex-color-surface);
    border-radius: .25rem;
    align-items:  center;
    gap: .75rem;
    margin-block-end: .25rem;
    padding: .5rem;
  }

  .flex-file-input__preview--error {
    border-color: var(--flex-color-error);
    background-color: var(--flex-color-error-lighter);
  }

  .flex-file-input__preview--error .flex-file-input__file-name {
    color: var(--flex-color-error);
    font-weight: 400;
  }

  .flex-file-input__thumbnail {
    object-fit: cover;
    border-radius: .125rem;
    flex-shrink: 0;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .flex-file-input__file-icon {
    display: inline-block;
    background-color: var(--flex-gray-30);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    flex-shrink: 0;
    block-size: 2.5rem;
    inline-size: 2rem;
  }

  .flex-file-input__file-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .125rem;
    min-inline-size: 0;
  }

  .flex-file-input__file-name {
    color: var(--flex-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .93rem;
    font-weight: 700;
  }

  .flex-file-input__file-size {
    color: var(--flex-color-text-muted);
    font-size: .8rem;
  }

  .flex-file-input__remove {
    display: flex;
    color: var(--flex-gray-60);
    cursor: pointer;
    background-color: #0000;
    border: 0;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items:  center;
    block-size: 1.5rem;
    inline-size: 1.5rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
  }

  .flex-file-input__remove:hover {
    background-color: var(--flex-gray-10);
    color: var(--flex-color-text);
  }

  .flex-file-input__remove:focus {
    outline: .25rem solid var(--flex-blue-vivid-40);
    outline-offset: 0;
  }

  .flex-file-input__status {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
  }
}

/* src/design-system/components/flex-language-selector/styles.css */
@layer block {
  flex-language-selector {
    display: flex;
    position: relative;
    justify-content: flex-end;
    align-items:  center;
  }

  flex-language-selector[data-variant="two"] {
    display: inline-flex;
  }

  flex-language-selector[data-variant="two"] .flex-language-selector__link {
    padding: .25rem .5rem;
    font-size: .87rem;
    font-weight: 700;
  }

  .flex-language-selector__button {
    display: inline-flex;
    color: var(--flex-blue-vivid-60);
    cursor: pointer;
    text-decoration: none;
    background-color: #0000;
    border: 0;
    align-items:  center;
    gap: .25rem;
    block-size: 2rem;
    min-inline-size: 3rem;
    padding: .5rem .75rem;
    font-size: .87rem;
    font-weight: 700;
  }

  .flex-language-selector__button:hover {
    text-decoration: underline;
    color: var(--flex-blue-warm-vivid-70);
  }

  .flex-language-selector__button:focus {
    outline: .25rem solid var(--flex-blue-vivid-40);
    outline-offset: 0;
  }

  .flex-language-selector__button:after {
    content: "";
    display: inline-block;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: currentColor;
    block-size: .75rem;
    inline-size: .75rem;
    transition: transform .15s;
  }

  .flex-language-selector__button[aria-expanded="true"]:after {
    transform: rotate(180deg);
  }

  .flex-language-selector__menu {
    position: absolute;
    z-index: 400;
    list-style: none;
    background-color: var(--flex-color-surface);
    border: 1px solid var(--flex-gray-cool-10);
    min-inline-size: 10rem;
    margin: 0;
    padding-block-start: .25rem;
    padding-block-end: .25rem;
    padding-inline-start: 0;
    padding-inline-end: 0;
    top: 100%;
    box-shadow: 0 .25rem .5rem #0000001a;
  }

  .flex-language-selector__menu li {
    margin: 0;
    padding: 0;
  }

  .flex-language-selector__link {
    display: block;
    color: var(--flex-blue-vivid-60);
    text-decoration: none;
    white-space: nowrap;
    padding: .5rem 1rem;
    font-size: .93rem;
  }

  .flex-language-selector__link:hover {
    text-decoration: underline;
    color: var(--flex-blue-warm-vivid-70);
    background-color: var(--flex-gray-5);
  }

  .flex-language-selector__link:focus {
    outline: .25rem solid var(--flex-blue-vivid-40);
    outline-offset: -.25rem;
  }

  .flex-language-selector__link:visited {
    color: var(--flex-violet-vivid-70);
  }
}

/* src/design-system/components/flex-modal/styles.css */
@layer block {
  flex-modal {
    display: none;
  }

  flex-modal:not([hidden]) {
    display: flex;
    position: fixed;
    z-index: 99999;
    justify-content: center;
    align-items:  center;
    inset: 0;
  }

  flex-modal[data-size="large"] .flex-modal__content {
    max-inline-size: 55rem;
  }

  flex-modal[data-size="large"] .flex-modal__main {
    inline-size: 100%;
    max-inline-size: 40rem;
    padding-block-start: 1.25rem;
    padding-block-end: 4rem;
  }

  .flex-modal__overlay {
    position: fixed;
    background: #000000b3;
    inset: 0;
  }

  .flex-modal__content {
    position: relative;
    display: inline-flex;
    background: var(--flex-color-surface);
    overflow-y: auto;
    z-index: 1;
    border-radius: .5rem;
    flex-direction: column-reverse;
    max-block-size: calc(100vh - 3rem);
    inline-size: 100%;
    max-inline-size: 30rem;
    margin: 1.25rem auto;
    padding-block-start: 2rem;
  }

  .flex-modal__main {
    margin: 0 auto;
    padding: .5rem 2rem 2rem;
  }

  .flex-modal__heading {
    font-family: var(--flex-font-serif, Georgia, "Times New Roman", serif);
    margin-block-start: 0;
    font-size: 1.34rem;
    line-height: 1.4;
  }

  .flex-modal__body {
    color: var(--flex-color-text);
    font-size: 1.06rem;
    line-height: 1.5;
  }

  .flex-modal__footer {
    margin-block-start: 1.5rem;
  }

  .flex-modal__close {
    display: flex;
    color: var(--flex-color-text-muted);
    cursor: pointer;
    background-color: #0000;
    border: 0;
    flex-shrink: 0;
    align-self:  flex-end;
    align-items:  center;
    inline-size: auto;
    margin: -2rem 0 0 auto;
    padding: .25rem;
    font-size: .93rem;
  }

  .flex-modal__close:hover {
    color: var(--flex-color-text);
    background-color: #0000;
  }

  .flex-modal__close:active {
    color: var(--flex-color-text);
    background-color: #0000;
  }

  .flex-modal__close:focus {
    outline: .25rem solid var(--flex-color-focus);
    outline-offset: 0;
  }

  .flex-modal__close .flex-icon {
    block-size: 2rem;
    inline-size: 2rem;
    margin: 2px 2px 0 0;
  }
}

/* src/design-system/components/flex-tooltip/styles.css */
@layer block {
  flex-tooltip {
    display: inline-block;
    position: relative;
  }

  .flex-tooltip__trigger {
    cursor: pointer;
  }

  .flex-tooltip__body {
    position: absolute;
    display: none;
    background-color: var(--flex-color-tooltip-bg);
    color: var(--flex-color-tooltip-text);
    white-space: pre;
    z-index: 100000;
    opacity: 0;
    border-radius: .25rem;
    inline-size: auto;
    padding: .5rem;
    transition: opacity 80ms ease-in-out;
    font-size: 1rem;
  }

  .flex-tooltip__body[data-visible] {
    display: block;
    opacity: 1;
  }

  .flex-tooltip__body:after {
    content: "";
    position: absolute;
    border: 5px solid #0000;
  }

  .flex-tooltip__body[data-position-actual="top"]:after {
    border-block-start-color: var(--flex-color-tooltip-bg);
    border-block-end: 0;
    margin-inline-start: -5px;
    top: 100%;
  }

  .flex-tooltip__body[data-position-actual="top"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .flex-tooltip__body[data-position-actual="top"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .flex-tooltip__body[data-position-actual="top"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .flex-tooltip__body[data-position-actual="top"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .flex-tooltip__body[data-position-actual="top"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .flex-tooltip__body[data-position-actual="top"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .flex-tooltip__body[data-position-actual="bottom"]:after {
    border-block-end-color: var(--flex-color-tooltip-bg);
    border-block-start: 0;
    margin-inline-start: -5px;
    bottom: 100%;
  }

  .flex-tooltip__body[data-position-actual="bottom"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .flex-tooltip__body[data-position-actual="bottom"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .flex-tooltip__body[data-position-actual="bottom"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
  }

  .flex-tooltip__body[data-position-actual="bottom"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .flex-tooltip__body[data-position-actual="bottom"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .flex-tooltip__body[data-position-actual="bottom"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 50%;
  }

  .flex-tooltip__body[data-position-actual="left"]:after {
    border-inline-start-color: var(--flex-color-tooltip-bg);
    border-inline-end: 0;
    margin-block-start: -5px;
    top: 50%;
  }

  .flex-tooltip__body[data-position-actual="left"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 100%;
  }

  .flex-tooltip__body[data-position-actual="left"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 100%;
  }

  .flex-tooltip__body[data-position-actual="left"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 100%;
  }

  .flex-tooltip__body[data-position-actual="left"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 100%;
  }

  .flex-tooltip__body[data-position-actual="left"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 100%;
  }

  .flex-tooltip__body[data-position-actual="left"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: 100%;
  }

  .flex-tooltip__body[data-position-actual="right"]:after {
    border-inline-end-color: var(--flex-color-tooltip-bg);
    border-inline-start: 0;
    margin-block-start: -5px;
    top: 50%;
  }

  .flex-tooltip__body[data-position-actual="right"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    right: 100%;
  }

  .flex-tooltip__body[data-position-actual="right"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    right: 100%;
  }

  .flex-tooltip__body[data-position-actual="right"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    right: 100%;
  }

  .flex-tooltip__body[data-position-actual="right"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: 100%;
  }

  .flex-tooltip__body[data-position-actual="right"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: 100%;
  }

  .flex-tooltip__body[data-position-actual="right"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: 100%;
  }
}

/* src/design-system/components/flex-combo-box/styles.css */
@layer block {
  flex-combo-box {
    display: block;
    max-inline-size: var(--flex-control-max-width);
  }

  .flex-combo-box__wrapper {
    position: relative;
    display: flex;
    align-items:  center;
    margin-block-start: var(--flex-control-margin-top);
  }

  .flex-combo-box__input {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    background-color: var(--flex-color-surface);
    border: var(--flex-control-border);
    appearance: none;
    display: block;
    block-size: var(--flex-control-height);
    padding: var(--flex-control-padding);
    border-radius: 0;
    inline-size: 100%;
    margin-block-start: 0;
    padding-inline-end: 4.5rem;
    line-height: 1.3;
  }

  .flex-combo-box__input:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset-inset);
  }

  .flex-combo-box__toggle, .flex-combo-box__clear {
    position: absolute;
    display: flex;
    cursor: pointer;
    color: var(--flex-color-text);
    background: none;
    border: none;
    justify-content: center;
    align-items:  center;
    inline-size: 2.25rem;
    padding: 0;
    top: 0;
    bottom: 0;
  }

  .flex-combo-box__toggle {
    border-inline-start: 1px solid var(--flex-color-ink);
  }

  .flex-combo-box__toggle:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-combo-box__toggle:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-combo-box__toggle:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .flex-combo-box__toggle:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-combo-box__toggle:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-combo-box__toggle:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .flex-combo-box__clear {
    border-inline-start: 1px solid var(--flex-color-ink);
  }

  .flex-combo-box__clear[hidden] {
    display: none;
  }

  .flex-combo-box__toggle:hover, .flex-combo-box__clear:hover {
    background-color: var(--flex-gray-cool-5);
  }

  .flex-combo-box__toggle .flex-icon, .flex-combo-box__clear .flex-icon {
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }

  .flex-combo-box__list {
    position: absolute;
    z-index: 100;
    overflow-y: auto;
    list-style: none;
    background-color: var(--flex-color-surface);
    border: 1px solid var(--flex-color-ink);
    border-block-start: none;
    max-block-size: 12.1em;
    margin: 0;
    padding: 0;
    top: 100%;
    left: 0;
    right: 0;
  }

  .flex-combo-box__list[hidden] {
    display: none;
  }

  .flex-combo-box__option {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    cursor: pointer;
    padding: .5rem;
    line-height: 1.3;
  }

  .flex-combo-box__option:hover {
    background-color: var(--flex-blue-vivid-60);
    color: var(--flex-white);
  }

  .flex-combo-box__option[data-focused] {
    background-color: var(--flex-blue-vivid-60);
    color: var(--flex-white);
  }

  .flex-combo-box__option[aria-selected="true"] {
    background-color: var(--flex-blue-vivid-60);
    color: var(--flex-white);
    font-weight: 700;
  }

  .flex-combo-box__option[hidden] {
    display: none;
  }

  .flex-combo-box__no-results {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text-muted);
    padding: .5rem;
    font-style: italic;
    line-height: 1.3;
  }
}

/* src/design-system/components/flex-date-picker/styles.css */
@layer block {
  flex-date-picker {
    display: block;
    max-inline-size: var(--flex-control-max-width);
  }

  .flex-date-picker__wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-block-start: var(--flex-control-margin-top);
  }

  .flex-date-picker__external-input {
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    background-color: var(--flex-color-surface);
    border: var(--flex-control-border);
    appearance: none;
    display: block;
    block-size: var(--flex-control-height);
    padding: var(--flex-control-padding);
    border-radius: 0;
    inline-size: 100%;
    margin-block-start: 0;
    line-height: 1.3;
  }

  .flex-date-picker__external-input:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset-inset);
  }

  .flex-date-picker__button {
    display: flex;
    background-color: var(--flex-gray-5);
    border: var(--flex-control-border);
    cursor: pointer;
    border-inline-start: none;
    flex-shrink: 0;
    justify-content: center;
    align-items:  center;
    inline-size: 3rem;
    padding: 0;
  }

  .flex-date-picker__button:hover {
    background-color: var(--flex-gray-cool-5);
  }

  .flex-date-picker__button:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset-inset);
  }

  .flex-date-picker__button .flex-icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

  .flex-date-picker__calendar {
    position: absolute;
    z-index: 400;
    background-color: var(--flex-gray-5);
    border: 1px solid var(--flex-color-ink);
    inline-size: 100%;
    max-inline-size: 20rem;
    top: 100%;
    box-shadow: 0 4px 8px #0000001a;
  }

  .flex-date-picker__calendar[hidden] {
    display: none;
  }

  .flex-date-picker__calendar-header {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    padding: .25rem;
  }

  .flex-date-picker__nav {
    display: flex;
    background-color: var(--flex-gray-5);
    cursor: pointer;
    border: none;
    justify-content: center;
    align-items:  center;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    padding: 0;
  }

  .flex-date-picker__nav:hover {
    background-color: var(--flex-gray-cool-20);
  }

  .flex-date-picker__nav:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -4px;
  }

  .flex-date-picker__nav .flex-icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

  .flex-date-picker__month-label {
    font-size: var(--flex-text-uswds);
    text-align: center;
    background-color: var(--flex-gray-5);
    cursor: pointer;
    border: none;
    flex: 1;
    padding: .5rem;
    font-weight: 700;
  }

  .flex-date-picker__month-label:hover {
    background-color: var(--flex-gray-cool-20);
  }

  .flex-date-picker__month-label:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -4px;
  }

  .flex-date-picker__table {
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: center;
    inline-size: 100%;
  }

  .flex-date-picker__table th {
    color: var(--flex-color-text-muted);
    padding: .375rem 0;
    font-size: .87rem;
    font-weight: 400;
  }

  .flex-date-picker__table td {
    padding: 0;
  }

  .flex-date-picker__day {
    display: flex;
    aspect-ratio: 1;
    color: var(--flex-color-text);
    background-color: var(--flex-gray-5);
    cursor: pointer;
    border: none;
    justify-content: center;
    align-items:  center;
    inline-size: 100%;
    padding: 0;
    font-size: .93rem;
    line-height: 1;
  }

  .flex-date-picker__day:not(:disabled):hover {
    background-color: var(--flex-gray-cool-20);
  }

  .flex-date-picker__day:not(:disabled):active {
    background-color: var(--flex-gray-cool-30);
  }

  .flex-date-picker__day:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -4px;
    z-index: 1;
  }

  .flex-date-picker__day:disabled {
    cursor: not-allowed;
    opacity: .4;
  }

  .flex-date-picker__day--outside {
    color: var(--flex-color-text-muted);
    opacity: .4;
  }

  .flex-date-picker__day--today {
    box-shadow: inset 0 0 0 2px var(--flex-color-accent);
    font-weight: 700;
  }

  .flex-date-picker__day--selected {
    background-color: var(--flex-blue-vivid-60);
    color: var(--flex-white);
    font-weight: 700;
  }

  .flex-date-picker__day--selected:not(:disabled):hover {
    background-color: var(--flex-blue-vivid-70);
  }

  .flex-date-picker__day--focused:not(.flex-date-picker__day--selected) {
    background-color: var(--flex-gray-cool-10);
  }

  .flex-date-picker__month-option {
    display: flex;
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    background-color: var(--flex-gray-5);
    cursor: pointer;
    border: none;
    justify-content: center;
    align-items:  center;
    inline-size: 100%;
    padding: .75rem;
  }

  .flex-date-picker__month-option:hover {
    background-color: var(--flex-gray-cool-20);
  }

  .flex-date-picker__month-option:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -4px;
  }

  .flex-date-picker__month-option--selected {
    background-color: var(--flex-blue-vivid-60);
    color: var(--flex-white);
    font-weight: 700;
  }

  .flex-date-picker__month-option--selected:hover {
    background-color: var(--flex-blue-vivid-70);
  }
}

/* src/design-system/components/flex-date-range-picker/styles.css */
@layer block {
  flex-date-range-picker {
    display: block;
    max-inline-size: calc(var(--flex-control-max-width) * 2 + 2rem);
  }

  .flex-date-range-picker__range-start, .flex-date-range-picker__range-end {
    margin-block-end: 1.5rem;
  }

  @media (min-width: 37.5rem) {
    flex-date-range-picker {
      display: flex;
      align-items:  flex-start;
      gap: 2rem;
    }

    .flex-date-range-picker__range-start, .flex-date-range-picker__range-end {
      flex: 1;
      margin-block-end: 0;
    }
  }
}

/* src/design-system/components/flex-time-picker/styles.css */
@layer block {
  flex-time-picker {
    display: block;
    max-inline-size: 10rem;
  }
}

/* src/design-system/components/flex-in-page-nav/styles.css */
@layer block {
  flex-in-page-nav {
    display: block;
  }

  .flex-in-page-nav__nav {
    position: sticky;
    border-inline-start: 1px solid var(--flex-color-border);
    overflow-y: auto;
    max-block-size: calc(100vh - 2rem);
    padding: 0;
    top: 1rem;
  }

  .flex-in-page-nav__heading {
    color: var(--flex-color-text);
    letter-spacing: .025em;
    text-transform: uppercase;
    margin: 0;
    padding: .5rem 1rem;
    font-size: .87rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .flex-in-page-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .flex-in-page-nav__item {
    margin: 0;
  }

  .flex-in-page-nav__item--sub {
    padding-inline-start: 1rem;
  }

  .flex-in-page-nav__link {
    display: block;
    color: var(--flex-color-accent);
    text-decoration: none;
    border-inline-start: 3px solid #0000;
    margin-inline-start: -1px;
    padding: .5rem 1rem;
    font-size: 1rem;
    line-height: 1.15;
  }

  .flex-in-page-nav__link:hover {
    color: var(--flex-color-accent);
    text-decoration: none;
  }

  .flex-in-page-nav__link:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: 0;
  }

  .flex-in-page-nav__link--current, .flex-in-page-nav__link[aria-current="true"] {
    color: var(--flex-color-accent);
    border-inline-start-color: var(--flex-color-accent);
    font-weight: 700;
  }

  .flex-in-page-nav__link:visited:not(.flex-in-page-nav__link--current) {
    color: var(--flex-color-ink);
  }
}

/* src/design-system/components/flex-tab-group/styles.css */
@layer block {
  flex-tab-group {
    display: block;
  }

  flex-tab-group [role="tablist"] {
    display: flex;
    border-block-end: 1px solid var(--flex-color-border);
    gap: 0;
  }

  .flex-tab-group__tab {
    padding: var(--flex-space-sm) var(--flex-space-md);
    border: 1px solid #0000;
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text-muted);
    cursor: pointer;
    position: relative;
    background: none;
    border-block-end: none;
    font-weight: 700;
    top: 1px;
  }

  .flex-tab-group__tab:hover {
    color: var(--flex-color-text);
  }

  .flex-tab-group__tab:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -2px;
    z-index: 1;
  }

  .flex-tab-group__tab[aria-selected="true"] {
    color: var(--flex-color-text);
    border-color: var(--flex-color-border);
    background: var(--flex-color-bg);
    border-block-end-color: var(--flex-color-bg);
  }

  .flex-tab-group__panel {
    padding: var(--flex-space-md);
    border: 1px solid var(--flex-color-border);
    border-block-start: none;
  }

  .flex-tab-group__panel[hidden] {
    display: none;
  }
}

/* src/design-system/components/flex-diagram/styles.css */
@layer block {
  .flex-diagram {
    display: block;
    block-size: auto;
    max-inline-size: 100%;
    margin-block-end: var(--flex-space-lg);
  }

  .flex-diagram__node rect {
    fill: var(--flex-color-surface);
    stroke: var(--flex-color-border);
    stroke-width: 1.5;
  }

  .flex-diagram__node text {
    fill: var(--flex-color-text);
    font-size: 14px;
  }

  .flex-diagram__node-sublabel {
    fill: var(--flex-color-text-muted);
    font-size: 11px;
  }

  .flex-diagram a .flex-diagram__node rect {
    stroke: var(--flex-color-accent);
    cursor: pointer;
  }

  .flex-diagram a .flex-diagram__node text {
    fill: var(--flex-color-accent);
  }

  .flex-diagram a:hover .flex-diagram__node rect {
    fill: color-mix(in srgb, var(--flex-color-accent) 10%, var(--flex-color-surface));
  }

  .flex-diagram a:focus-visible .flex-diagram__node rect {
    outline: 3px solid var(--flex-color-accent);
    outline-offset: 2px;
  }

  .flex-diagram__edge path {
    stroke: var(--flex-color-border);
    stroke-width: 1.5;
  }

  .flex-diagram__edge-label {
    fill: var(--flex-color-text-muted);
    font-size: 12px;
  }

  .flex-diagram marker polygon {
    fill: var(--flex-color-border);
  }

  .flex-diagram__group rect {
    fill: none;
    stroke: var(--flex-color-border);
    stroke-dasharray: 8 4;
    stroke-width: 1;
  }

  .flex-diagram__group-label {
    fill: var(--flex-color-text-muted);
    font-size: 12px;
    font-style: italic;
  }
}

/* src/entrypoints/dashboard/deployment-table.css */
@layer block {
  .deployment-table {
    display: flex;
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    overflow: hidden;
    flex-direction: column;
  }

  .deployment-table__header {
    display: grid;
    grid-template-columns: 1.5rem 1.5fr 1fr 2.5fr 1fr 1fr;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-sm) var(--flex-space-md);
    background-color: var(--flex-color-bg);
    border-bottom: 2px solid var(--flex-color-border);
    font-size: var(--flex-text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--flex-color-text-muted);
    font-weight: 700;
  }

  .deployment-table__section {
    padding: var(--flex-space-sm) var(--flex-space-md);
    background-color: var(--flex-color-bg);
    border-top: 2px solid var(--flex-color-border);
    border-bottom: 1px solid var(--flex-color-border);
    border-left: 4px solid var(--flex-color-border);
    font-weight: 600;
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text);
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  .deployment-table__section--issues {
    border-left-color: var(--flex-color-error);
  }

  .deployment-table__section--active {
    border-left-color: var(--flex-color-link);
  }

  .deployment-table__section--inactive {
    border-left-color: var(--flex-color-border);
  }

  .deployment-table__row {
    border-bottom: 1px solid var(--flex-color-border);
  }

  .deployment-table__row:last-child {
    border-bottom: none;
  }

  .deployment-table__row:nth-child(2n) .deployment-table__summary {
    background-color: var(--flex-color-bg-subtle);
  }

  .deployment-table__summary {
    display: grid;
    grid-template-columns: 1.5rem 1.5fr 1fr 2.5fr 1fr 1fr;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-md) var(--flex-space-md);
    cursor: pointer;
    list-style: none;
    font-size: var(--flex-text-uswds);
    align-items:  center;
  }

  .deployment-table__summary::-webkit-details-marker {
    display: none;
  }

  .deployment-table__summary::marker {
    content: "";
  }

  .deployment-table__summary:before {
    content: "▸";
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
    transition: transform .15s;
  }

  .deployment-table__row[open] .deployment-table__summary:before {
    transform: rotate(90deg);
  }

  .deployment-table__summary:hover {
    background-color: color-mix(in srgb, var(--flex-color-link) 8%, transparent);
  }

  .deployment-table__cell {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-xs);
    min-width: 0;
  }

  .deployment-table__branch {
    overflow-wrap: break-word;
    font-weight: 600;
  }

  .deployment-table__sha {
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-xs);
    flex-shrink: 0;
  }

  .deployment-table__commit-msg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  .deployment-table__link {
    color: var(--flex-color-link);
    text-decoration: none;
  }

  .deployment-table__link:hover {
    text-decoration: underline;
  }

  .deployment-table__muted {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-xs);
  }

  .deployment-table__pr {
    display: inline-flex;
    align-items:  center;
    gap: var(--flex-space-xs);
  }

  .deployment-table__tag {
    display: inline-flex;
    font-size: var(--flex-text-xs);
    border-radius: var(--flex-radius-md);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border: 1px solid;
    align-items:  center;
    padding: 2px 8px;
    font-weight: 700;
  }

  .deployment-table__detail {
    padding: var(--flex-space-md) var(--flex-space-md);
    padding-left: var(--flex-space-xl);
    background-color: var(--flex-color-bg-subtle);
    border-top: 1px solid var(--flex-color-border);
    font-size: var(--flex-text-base);
  }

  .deployment-table__detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--flex-space-xs) var(--flex-space-md);
    margin: 0;
  }

  .deployment-table__detail-list dt {
    color: var(--flex-color-text-muted);
    font-weight: 600;
  }

  .deployment-table__detail-list dd {
    margin: 0;
  }

  .deployment-table__error {
    color: var(--flex-color-error);
  }

  @media (max-width: 768px) {
    .deployment-table__header {
      display: none;
    }

    .deployment-table__summary {
      display: flex;
      gap: var(--flex-space-xs);
      flex-direction: column;
      align-items:  flex-start;
    }

    .deployment-table__summary:before {
      content: none;
    }

    .deployment-table__cell {
      width: 100%;
    }

    .deployment-table__cell:before {
      content: attr(data-label);
      font-size: var(--flex-text-xs);
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--flex-color-text-muted);
      flex-shrink: 0;
      min-width: 6rem;
      font-weight: 700;
    }

    .deployment-table__detail {
      padding-left: var(--flex-space-md);
    }

    .deployment-table__detail-list {
      grid-template-columns: 1fr;
    }
  }
}

/* src/design-system/components/flex-strategy-selector/styles.css */
@layer block {
  .flex-strategy-selector {
    border: none;
    margin: 0;
    padding: 0;
  }

  .flex-strategy-selector__legend {
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-lg);
    font-weight: 600;
    line-height: var(--flex-line-height-heading);
    color: var(--flex-color-text);
    margin-bottom: var(--flex-space-2xs);
  }

  .flex-strategy-selector__hint {
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-sm);
    line-height: var(--flex-line-height-base);
    color: var(--flex-color-text-muted);
    margin-bottom: var(--flex-space-sm);
  }

  .flex-strategy-selector__options {
    display: flex;
    gap: var(--flex-space-xs);
    flex-direction: column;
  }

  .flex-strategy-selector__option {
    display: block;
    position: relative;
    padding: var(--flex-space-md);
    border: 2px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
    cursor: pointer;
    transition: all .15s ease-in-out;
  }

  .flex-strategy-selector__option:hover {
    border-color: var(--flex-color-primary);
    background: var(--flex-color-surface-hover);
  }

  .flex-strategy-selector__option:has(.flex-strategy-selector__input:checked) {
    border-color: var(--flex-color-primary);
    background: var(--flex-color-primary-lighter);
    box-shadow: 0 0 0 2px var(--flex-color-primary-lightest);
  }

  .flex-strategy-selector__option:has(.flex-strategy-selector__input:focus-visible) {
    outline: 2px solid var(--flex-color-focus);
    outline-offset: 2px;
  }

  .flex-strategy-selector__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
  }

  .flex-strategy-selector__content {
    display: flex;
    gap: var(--flex-space-2xs);
    flex-direction: column;
  }

  .flex-strategy-selector__header {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--flex-space-xs);
  }

  .flex-strategy-selector__name {
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-base);
    font-weight: 600;
    line-height: var(--flex-line-height-heading);
    color: var(--flex-color-text);
  }

  .flex-strategy-selector__badges {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-2xs);
    flex-shrink: 0;
  }

  .flex-strategy-selector__description {
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-sm);
    line-height: var(--flex-line-height-base);
    color: var(--flex-color-text);
    margin: 0;
  }

  .flex-strategy-selector__metrics {
    display: flex;
    gap: var(--flex-space-xs);
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-sm);
    line-height: var(--flex-line-height-base);
    color: var(--flex-color-text-muted);
    flex-wrap: wrap;
  }

  .flex-strategy-selector__metric {
    display: inline-block;
  }

  .flex-strategy-selector__metric strong {
    color: var(--flex-color-text);
    font-weight: 600;
  }

  .flex-strategy-selector__link {
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-sm);
    font-weight: 500;
    line-height: var(--flex-line-height-base);
    color: var(--flex-color-primary);
    text-decoration: none;
    align-self:  flex-start;
  }

  .flex-strategy-selector__link:hover {
    text-decoration: underline;
    color: var(--flex-color-primary-dark);
  }

  .flex-strategy-selector__link:focus-visible {
    outline: 2px solid var(--flex-color-focus);
    outline-offset: 2px;
  }
}

/* src/design-system/components/flex-form-editor/styles.css */
@layer block {
  flex-form-editor {
    display: block;
  }
}

/* src/design-system/components/flex-assistant/styles.css */
@layer block {
  flex-assistant {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  flex-assistant[data-closed] {
    display: none;
  }

  .assistant {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .assistant__header {
    display: flex;
    padding: var(--flex-space-sm) var(--flex-space-md);
    border-block-end: 1px solid var(--flex-color-border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items:  center;
  }

  .assistant__title {
    font-weight: 700;
    font-size: var(--flex-text-sm);
  }

  .assistant__close {
    cursor: pointer;
    color: var(--flex-color-text-muted);
    padding: var(--flex-space-xs);
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
  }

  .assistant__close:hover {
    color: var(--flex-color-text);
  }

  .assistant__messages {
    overflow-y: auto;
    padding: var(--flex-space-md);
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
    flex: 1;
  }

  .assistant__message {
    padding: var(--flex-space-sm) var(--flex-space-md);
    border-radius: var(--flex-radius-md, .5rem);
    font-size: var(--flex-text-base);
    color: var(--flex-color-text);
    max-width: 90%;
    line-height: 1.5;
  }

  .assistant__message--user {
    background: var(--flex-color-bg-subtle);
    align-self:  flex-end;
  }

  .assistant__message--assistant {
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    align-self:  flex-start;
  }

  .assistant__message--system {
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text);
    align-self:  center;
  }

  .assistant__input {
    padding: var(--flex-space-sm) var(--flex-space-md);
    border-block-start: 1px solid var(--flex-color-border);
    flex-shrink: 0;
  }

  .assistant__textarea {
    resize: none;
    width: 100%;
    margin-block-end: var(--flex-space-xs);
  }

  .assistant__send {
    float: inline-end;
  }

  .assistant__loading {
    display: flex;
    padding: var(--flex-space-sm) var(--flex-space-md);
    align-self:  flex-start;
    gap: 4px;
  }

  .assistant__loading span {
    background: var(--flex-color-text-muted);
    animation: loading-dot 1.2s infinite;
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .assistant__loading span:nth-child(2) {
    animation-delay: .2s;
  }

  .assistant__loading span:nth-child(3) {
    animation-delay: .4s;
  }

  @keyframes loading-dot {
    0%, 80%, 100% {
      opacity: .3;
    }

    40% {
      opacity: 1;
    }
  }
}

/* src/design-system/components/flex-form-structure/styles.css */
@layer block {
  flex-form-structure {
    display: block;
  }

  .form-structure__header {
    display: flex;
    padding: var(--flex-space-md) var(--flex-space-md) var(--flex-space-sm);
    justify-content: space-between;
    align-items:  center;
  }

  .form-structure__header h2 {
    font-size: var(--flex-text-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--flex-color-text-muted);
    margin: 0;
  }

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

  .form-structure__page {
    position: relative;
    display: flex;
    align-items:  center;
    gap: var(--flex-space-xs);
    padding-inline: var(--flex-space-xs);
    border-radius: var(--flex-radius-sm);
    transition: background-color .1s;
  }

  .form-structure__page:hover, .form-structure__page:focus-within, .form-structure__page--selected {
    background: var(--flex-color-bg-subtle);
  }

  .form-structure__page--selected:before {
    content: "";
    position: absolute;
    inset-block: var(--flex-space-xs);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-accent);
    inline-size: 3px;
  }

  .form-structure__page--selected:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: -1px;
  }

  .form-structure__page--selected:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: -1px;
  }

  .form-structure__page--selected:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: -1px;
  }

  .form-structure__page--selected:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: -1px;
  }

  .form-structure__page--selected:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: -1px;
  }

  .form-structure__page--selected:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: -1px;
  }

  .form-structure__row {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-sm) var(--flex-space-xs);
    cursor: pointer;
    text-align: start;
    color: inherit;
    border-radius: var(--flex-radius-sm);
    background: none;
    border: 0;
    flex: 1;
    min-inline-size: 0;
  }

  .form-structure__row:focus-visible {
    outline: 2px solid var(--flex-color-accent);
    outline-offset: -2px;
  }

  .form-structure__row-index {
    font-variant-numeric: tabular-nums;
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
    text-align: end;
    min-inline-size: 1.75em;
    font-weight: 600;
  }

  .form-structure__row-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-inline-size: 0;
  }

  .form-structure__row-title {
    font-size: var(--flex-text-sm);
    overflow-wrap: anywhere;
    font-weight: 600;
    line-height: 1.3;
  }

  .form-structure__row-meta {
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
    line-height: 1.2;
  }

  .form-structure__actions {
    display: inline-flex;
    align-items:  center;
    gap: var(--flex-space-2xs);
    opacity: .4;
    transition: opacity .12s;
  }

  .form-structure__page:hover .form-structure__actions, .form-structure__page--selected .form-structure__actions, .form-structure__page:focus-within .form-structure__actions {
    opacity: 1;
  }

  .form-structure__icon-btn {
    cursor: pointer;
    padding: var(--flex-space-2xs);
    display: inline-flex;
    color: var(--flex-color-text-muted);
    border-radius: var(--flex-radius-sm);
    background: none;
    border: 0;
    justify-content: center;
    align-items:  center;
  }

  .form-structure__icon-btn:hover:not(:disabled) {
    background: var(--flex-color-bg-subtle);
    color: var(--flex-color-text);
  }

  .form-structure__icon-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
  }

  .form-structure__icon-btn--mini {
    padding: 0;
  }

  .form-structure__reorder {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
  }

  [data-sidebar-icon] {
    block-size: 12px;
    inline-size: 12px;
  }

  .form-structure__icon-btn--mini [data-sidebar-icon] {
    block-size: 14px;
    inline-size: 14px;
  }

  .form-structure__delivery {
    position: relative;
    display: inline-block;
  }

  .form-structure__delivery-menu {
    position: fixed;
    z-index: 100;
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    box-shadow: var(--flex-shadow-md);
    padding: var(--flex-space-2xs);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 14rem;
  }

  .form-structure__delivery-option {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    text-align: start;
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border-radius: var(--flex-radius-sm);
    cursor: pointer;
    color: inherit;
    background: none;
    border: 0;
  }

  .form-structure__delivery-option:hover {
    background: var(--flex-color-bg-subtle);
  }

  .form-structure__delivery-option:focus-visible {
    background: var(--flex-color-bg-subtle);
  }

  .form-structure__delivery-option--current {
    background: var(--flex-color-bg-subtle);
  }

  .form-structure__delivery-option--current .form-structure__delivery-label strong {
    color: var(--flex-color-accent);
  }

  .form-structure__delivery-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .form-structure__delivery-label strong {
    font-size: var(--flex-text-sm);
  }

  .form-structure__delivery-desc {
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
  }

  .form-structure--collapsed {
    display: flex;
    padding: var(--flex-space-sm);
    flex-direction: column;
    align-items:  center;
  }

  .form-structure__toggle {
    cursor: pointer;
    padding: var(--flex-space-xs);
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
    background: none;
    border: none;
  }

  .form-structure__toggle:hover {
    color: var(--flex-color-text);
  }

  .form-structure__mini-list {
    list-style: none;
    margin: var(--flex-space-sm) 0 0;
    display: flex;
    gap: var(--flex-space-xs);
    flex-direction: column;
    align-items:  center;
    padding: 0;
  }

  .form-structure__mini-item {
    display: flex;
    border: 1px solid var(--flex-color-border);
    cursor: pointer;
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text);
    background: none;
    border-radius: 50%;
    justify-content: center;
    align-items:  center;
    block-size: 28px;
    inline-size: 28px;
  }

  .form-structure__mini-item:hover {
    background: var(--flex-color-bg-subtle);
  }
}

/* src/design-system/components/flex-editable-page/styles.css */
@layer block {
  @layer block {
    flex-editable-page {
      display: block;
      padding-block: var(--flex-space-md);
      padding-inline: var(--flex-space-lg);
    }

    .editable-page__header {
      display: flex;
      align-items:  center;
      gap: var(--flex-space-sm);
      padding: var(--flex-space-xs);
      border-radius: var(--flex-radius-md);
      border: 1px solid #0000;
      margin-block-end: var(--flex-space-xl);
    }

    .editable-page__body {
      display: flex;
      gap: var(--flex-space-lg);
      flex-direction: column;
    }

    .editable-page__header--selected {
      position: relative;
      border: 2px solid var(--flex-color-accent);
      background: var(--flex-color-surface);
      padding: var(--flex-space-md) var(--flex-space-sm) var(--flex-space-sm);
      box-shadow: var(--flex-shadow-md), 0 0 0 4px var(--flex-color-bg-subtle);
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .editable-page__header--selected:before {
      content: "Editing page";
      position: absolute;
      background: var(--flex-color-accent);
      color: var(--flex-color-surface);
      font-size: var(--flex-text-xs);
      letter-spacing: .02em;
      padding: 2px var(--flex-space-xs);
      border-radius: var(--flex-radius-sm);
      font-weight: 600;
      top: calc(-1 * var(--flex-space-xs));
    }

    .editable-page__header--selected:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
      left: var(--flex-space-sm);
    }

    .editable-page__header--selected:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
      left: var(--flex-space-sm);
    }

    .editable-page__header--selected:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
      left: var(--flex-space-sm);
    }

    .editable-page__header--selected:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
      right: var(--flex-space-sm);
    }

    .editable-page__header--selected:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
      right: var(--flex-space-sm);
    }

    .editable-page__header--selected:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
      right: var(--flex-space-sm);
    }

    .editable-page__title {
      cursor: pointer;
      border-radius: var(--flex-radius-sm);
      padding-inline: var(--flex-space-2xs);
      flex: 1;
      margin: 0;
      font-weight: 600;
    }

    .editable-page__title:hover {
      outline: 2px solid var(--flex-color-accent);
    }

    .editable-page__title:focus-visible {
      outline: 2px solid var(--flex-color-accent);
    }

    .editable-page__header--selected .editable-page__title {
      cursor: text;
    }

    .editable-page__title-input {
      flex: 1;
      margin-block-start: 0;
      font-size: 1.43em;
      font-weight: 600;
    }

    .editable-page__toolbar {
      display: flex;
      gap: var(--flex-space-2xs);
      flex-wrap: wrap;
      align-items:  center;
    }

    .editable-page__delivery-label {
      display: inline-flex;
      align-items:  center;
      gap: var(--flex-space-2xs);
      font-size: var(--flex-text-xs);
      color: var(--flex-color-text-muted);
    }

    .editable-page__delivery {
      font-size: var(--flex-text-xs);
    }

    .editable-page__footer {
      margin-block-start: var(--flex-space-md);
    }

    .editable-page__empty {
      color: var(--flex-color-text-muted);
      padding: var(--flex-space-md);
    }
  }
}

/* src/design-system/components/flex-editable-group/styles.css */
@layer block {
  @layer block {
    flex-editable-group {
      display: block;
      margin-block-end: var(--flex-space-md);
    }

    .editable-group__fieldset {
      border: 0;
      margin: 0;
      padding: 0;
    }

    .editable-group__fieldset--selected {
      position: relative;
      border: 2px solid var(--flex-color-accent);
      border-radius: var(--flex-radius-md);
      padding: var(--flex-space-md) var(--flex-space-sm) var(--flex-space-sm);
      background: var(--flex-color-surface);
      box-shadow: var(--flex-shadow-md), 0 0 0 4px var(--flex-color-bg-subtle);
    }

    .editable-group__fieldset--selected:before {
      content: "Editing group";
      position: absolute;
      background: var(--flex-color-accent);
      color: var(--flex-color-surface);
      font-size: var(--flex-text-xs);
      letter-spacing: .02em;
      padding: 2px var(--flex-space-xs);
      border-radius: var(--flex-radius-sm);
      font-weight: 600;
      top: calc(-1 * var(--flex-space-xs));
    }

    .editable-group__fieldset--selected:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
      left: var(--flex-space-sm);
    }

    .editable-group__fieldset--selected:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
      left: var(--flex-space-sm);
    }

    .editable-group__fieldset--selected:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
      left: var(--flex-space-sm);
    }

    .editable-group__fieldset--selected:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
      right: var(--flex-space-sm);
    }

    .editable-group__fieldset--selected:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
      right: var(--flex-space-sm);
    }

    .editable-group__fieldset--selected:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
      right: var(--flex-space-sm);
    }

    .editable-group__legend {
      cursor: pointer;
      border-radius: var(--flex-radius-sm);
      padding: 0;
      padding-inline: var(--flex-space-2xs);
      font-weight: 600;
    }

    .editable-group__legend:hover {
      outline: 2px solid var(--flex-color-accent);
    }

    .editable-group__legend:focus-visible {
      outline: 2px solid var(--flex-color-accent);
    }

    .editable-group__legend--selected {
      display: flex;
      justify-content: space-between;
      align-items:  center;
      gap: var(--flex-space-sm);
      cursor: default;
      outline: none;
    }

    .editable-group__legend--selected:hover {
      outline: none;
    }

    .editable-group__legend--selected:focus-visible {
      outline: none;
    }

    .editable-group__title {
      cursor: text;
      padding-inline: var(--flex-space-2xs);
      border-radius: var(--flex-radius-sm);
      font-weight: 600;
    }

    .editable-group__title:hover {
      outline: 2px solid var(--flex-color-accent);
    }

    .editable-group__title:focus-visible {
      outline: 2px solid var(--flex-color-accent);
    }

    .editable-group__title-input {
      font-weight: 600;
      font-size: inherit;
      margin-block-start: 0;
    }

    .editable-group__toolbar {
      display: inline-flex;
      gap: var(--flex-space-xs);
    }

    .editable-group__fields {
      display: flex;
      gap: var(--flex-space-xs);
      flex-direction: column;
      margin-block-start: var(--flex-space-sm);
    }
  }
}

/* src/design-system/components/flex-editable-field/styles.css */
@layer block {
  @layer block {
    flex-editable-field {
      display: block;
    }

    .editable-field__preview {
      cursor: pointer;
      border-radius: var(--flex-radius-md);
      padding: var(--flex-space-sm) var(--flex-space-md);
      margin-inline: calc(-1 * var(--flex-space-md));
      border: 1px solid #0000;
      transition: border-color .1s, background .1s;
    }

    .editable-field__preview:hover {
      border-color: var(--flex-color-border);
      background: var(--flex-color-bg-subtle);
    }

    .editable-field__preview:focus-visible {
      border-color: var(--flex-color-border);
      background: var(--flex-color-bg-subtle);
    }

    .editable-field__edit {
      position: relative;
      margin-block: var(--flex-space-sm);
      padding: var(--flex-space-lg) var(--flex-space-md) var(--flex-space-md);
      border: 2px solid var(--flex-color-accent);
      border-radius: var(--flex-radius-md);
      background: color-mix(in srgb, var(--flex-color-accent) 4%, var(--flex-color-surface));
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--flex-color-accent) 10%, transparent), var(--flex-shadow-md);
    }

    .editable-field__edit-header {
      display: flex;
      justify-content: space-between;
      align-items:  center;
      margin-block-end: var(--flex-space-md);
    }

    .editable-field__edit-badge {
      display: inline-block;
      padding: 2px var(--flex-space-xs);
      border-radius: var(--flex-radius-sm);
      background: var(--flex-color-accent);
      color: var(--flex-color-surface);
      font-size: var(--flex-text-xs);
      letter-spacing: .02em;
      font-weight: 600;
    }

    .editable-field__form {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: var(--flex-space-sm) var(--flex-space-md);
      align-items: baseline;
    }

    .editable-field__form > .flex-label {
      margin-block-start: 0;
      margin-block-end: 0;
      padding-block-start: var(--flex-space-2xs);
    }

    .editable-field__form .flex-input, .editable-field__form .flex-select {
      max-inline-size: none;
      margin-block-start: 0;
    }

    .editable-field__checkbox {
      display: inline-flex;
      align-items:  center;
      gap: var(--flex-space-xs);
      margin-block-start: 0;
    }

    .editable-field__condition {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto;
      gap: var(--flex-space-xs);
      align-items:  center;
    }

    .editable-field__edit-footer {
      display: flex;
      justify-content: space-between;
      align-items:  center;
      gap: var(--flex-space-sm);
      border-block-start: 1px solid var(--flex-color-border);
      margin-block-start: var(--flex-space-lg);
      padding-block-start: var(--flex-space-md);
    }

    .editable-field__edit-actions {
      display: inline-flex;
      align-items:  center;
      gap: var(--flex-space-sm);
    }

    .editable-field__dirty {
      font-size: var(--flex-text-xs);
      color: var(--flex-color-text-muted);
      margin-inline-end: var(--flex-space-xs);
      font-style: italic;
    }
  }
}

/* src/design-system/components/flex-staged-changes/styles.css */
@layer block {
  @layer block {
    flex-staged-changes {
      display: block;
    }

    .staged-changes {
      background: var(--flex-color-surface);
      border: 1px solid var(--flex-color-border);
      border-radius: var(--flex-radius-md);
      padding: var(--flex-space-sm);
      min-inline-size: 22rem;
      max-inline-size: min(32rem, 90vw);
    }

    .staged-changes__title {
      font-size: var(--flex-text-sm);
      margin-block-end: var(--flex-space-xs);
      font-weight: 600;
    }

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

    .staged-changes__item {
      display: flex;
      align-items:  flex-start;
      gap: var(--flex-space-xs);
      font-size: var(--flex-text-xs);
      line-height: 1.4;
    }

    .staged-changes__remove {
      cursor: pointer;
      color: var(--flex-color-text-muted);
      font-size: var(--flex-text-xs);
      background: none;
      border: 0;
      padding: 0;
    }

    .staged-changes__remove:hover {
      color: var(--flex-color-error);
    }

    .staged-changes__empty {
      color: var(--flex-color-text-muted);
      font-size: var(--flex-text-xs);
    }
  }
}

/* src/design-system/components/flex-branch-switcher/styles.css */
@layer block {
  flex-branch-switcher {
    position: relative;
    display: inline-block;
  }

  .flex-branch-switcher__trigger {
    display: inline-flex;
    align-items:  center;
    gap: var(--flex-space-xs);
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
    color: var(--flex-color-text);
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-base);
    cursor: pointer;
  }

  .flex-branch-switcher__trigger:hover {
    background: var(--flex-color-bg-subtle);
  }

  .flex-branch-switcher__trigger:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: var(--flex-focus-offset);
  }

  .flex-branch-switcher__current {
    font-weight: 600;
  }

  .flex-branch-switcher__caret {
    color: var(--flex-color-text-muted);
  }

  .flex-branch-switcher__panel {
    position: absolute;
    z-index: 10;
    padding: var(--flex-space-sm);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    background: var(--flex-color-surface);
    box-shadow: var(--flex-shadow-md);
    min-inline-size: 16rem;
    top: calc(100% + var(--flex-space-xs));
  }

  .flex-branch-switcher__panel:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-branch-switcher__panel:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-branch-switcher__panel:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
  }

  .flex-branch-switcher__panel:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-branch-switcher__panel:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-branch-switcher__panel:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    right: 0;
  }

  .flex-branch-switcher__panel[hidden] {
    display: none;
  }

  .flex-branch-switcher__filter {
    box-sizing: border-box;
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-base);
    inline-size: 100%;
    margin-block-end: var(--flex-space-sm);
  }

  .flex-branch-switcher__list {
    overflow-y: auto;
    list-style: none;
    max-block-size: 16rem;
    margin: 0;
    padding: 0;
  }

  .flex-branch-switcher__option {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border-radius: var(--flex-radius-sm);
  }

  .flex-branch-switcher__option:hover {
    background: var(--flex-color-bg-subtle);
  }

  .flex-branch-switcher__option[aria-selected="true"] {
    background: var(--flex-color-info-lighter);
  }

  .flex-branch-switcher__link {
    color: var(--flex-color-text);
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-base);
    text-decoration: none;
    flex: 1;
  }

  .flex-branch-switcher__link:hover {
    text-decoration: underline;
  }

  .flex-branch-switcher__ahead {
    color: var(--flex-color-text-muted);
    font-family: var(--flex-font-sans);
    font-size: var(--flex-text-xs);
  }

  .flex-branch-switcher__create {
    display: flex;
    gap: var(--flex-space-xs);
    border-block-start: 1px solid var(--flex-color-border);
    margin-block-start: var(--flex-space-sm);
    padding-block-start: var(--flex-space-sm);
  }

  .flex-branch-switcher__create-input {
    box-sizing: border-box;
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-base);
    flex: 1;
    min-inline-size: 0;
  }

  .flex-branch-switcher__create-submit {
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border: 1px solid var(--flex-color-accent);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-accent);
    color: var(--flex-color-on-accent);
    font-size: var(--flex-text-base);
    cursor: pointer;
  }

  .flex-branch-switcher__create-submit:hover {
    background: var(--flex-color-link-hover);
    border-color: var(--flex-color-link-hover);
  }

  .flex-branch-switcher__icon {
    fill: currentcolor;
    flex-shrink: 0;
  }

  .flex-branch-switcher__badge {
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-warning-lighter);
    color: var(--flex-color-text);
    padding: 1px .4rem;
    font-size: .75rem;
    font-weight: 600;
  }

  .flex-branch-switcher__trigger-meta {
    color: var(--flex-color-text-muted);
    font-size: .82rem;
    font-weight: 400;
  }
}

/* src/design-system/components/flex-change-indicator/styles.css */
@layer block {
  .flex-change-indicator {
    display: inline-flex;
    align-items:  center;
    gap: var(--flex-space-xs);
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-xs);
    line-height: 1;
  }

  .flex-change-indicator__dot {
    display: inline-block;
    background: var(--flex-color-text-muted);
    border-radius: 50%;
    block-size: 8px;
    inline-size: 8px;
  }

  .flex-change-indicator[data-variant="modified"] .flex-change-indicator__dot {
    background: var(--flex-color-warning);
  }

  .flex-change-indicator[data-variant="added"] .flex-change-indicator__dot {
    background: var(--flex-color-success);
  }

  .flex-change-indicator[data-variant="removed"] .flex-change-indicator__dot {
    background: var(--flex-color-error);
  }

  .flex-change-indicator__label {
    color: var(--flex-color-text);
  }
}

/* src/design-system/components/flex-semantic-diff/styles.css */
@layer block {
  .flex-semantic-diff {
    display: flex;
    gap: var(--flex-space-lg);
    flex-direction: column;
  }

  .flex-semantic-diff__group {
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
  }

  .flex-semantic-diff__heading {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 600;
  }

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

  .flex-semantic-diff__change {
    display: flex;
    align-items:  flex-start;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-sm) var(--flex-space-md);
    border: 1px solid var(--flex-color-border);
    border-inline-start: 4px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
  }

  .flex-semantic-diff__badge {
    padding: 0 var(--flex-space-xs);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-border);
    color: var(--flex-color-text);
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1.6;
  }

  .flex-semantic-diff__description {
    color: var(--flex-color-text);
    font-size: var(--flex-text-sm);
    line-height: 1.4;
  }

  .flex-semantic-diff__change[data-category="added"] {
    border-inline-start-color: var(--flex-color-success);
  }

  .flex-semantic-diff__change[data-category="added"] .flex-semantic-diff__badge {
    background: var(--flex-color-success-lighter);
    color: var(--flex-color-text);
  }

  .flex-semantic-diff__change[data-category="removed"] {
    border-inline-start-color: var(--flex-color-error);
  }

  .flex-semantic-diff__change[data-category="removed"] .flex-semantic-diff__badge {
    background: var(--flex-color-error-lighter);
    color: var(--flex-color-text);
  }

  .flex-semantic-diff__change[data-category="modified"] {
    border-inline-start-color: var(--flex-color-warning);
  }

  .flex-semantic-diff__change[data-category="modified"] .flex-semantic-diff__badge {
    background: var(--flex-color-warning-lighter);
    color: var(--flex-color-text);
  }

  .flex-semantic-diff__change[data-category="moved"] {
    border-inline-start-color: var(--flex-color-accent);
  }

  .flex-semantic-diff__change[data-category="moved"] .flex-semantic-diff__badge {
    background: var(--flex-color-info-lighter);
    color: var(--flex-color-text);
  }

  .flex-semantic-diff__change[data-category="renamed"] {
    border-inline-start-color: var(--flex-color-info);
  }

  .flex-semantic-diff__change[data-category="renamed"] .flex-semantic-diff__badge {
    background: var(--flex-color-info-lighter);
    color: var(--flex-color-text);
  }

  .flex-semantic-diff__empty {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
    margin: 0;
  }
}

/* src/design-system/components/flex-confidence-badge/styles.css */
@layer block {
  .flex-confidence-badge {
    display: inline-block;
    font-size: var(--flex-text-tag);
    border-radius: var(--flex-radius-bubble);
    white-space: nowrap;
    padding: .125rem .5rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .flex-confidence-badge[data-level="medium"] {
    background: var(--flex-color-warning-lighter);
    color: var(--flex-color-text);
  }

  .flex-confidence-badge[data-level="low"] {
    background: var(--flex-color-error-lighter);
    color: var(--flex-color-text);
  }
}

/* src/design-system/components/flex-variant-callout/styles.css */
@layer block {
  .flex-variant-callout {
    background-color: color-mix(in srgb, var(--flex-color-accent) 4%, var(--flex-color-surface));
    border: 1px solid color-mix(in srgb, var(--flex-color-accent) 30%, var(--flex-color-border));
    border-radius: var(--flex-radius-md);
    padding: var(--flex-space-lg);
    color: var(--flex-color-text);
    --stack-space: var(--flex-space-md);
  }

  .flex-variant-callout__task-label {
    display: block;
    font-size: var(--flex-text-sm);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--flex-color-text-muted);
    font-weight: 600;
  }

  .flex-variant-callout__body {
    --stack-space: var(--flex-space-2xs);
  }

  .flex-variant-callout__variant-name {
    display: block;
    font-size: var(--flex-text-uswds);
    color: var(--flex-color-text);
    font-weight: 600;
    line-height: 1.3;
  }

  .flex-variant-callout__variant-description {
    display: block;
    color: var(--flex-color-text-muted);
  }

  .flex-variant-callout__evaluation-summary {
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    margin: 0;
  }

  .flex-variant-callout__actions {
    --cluster-space: var(--flex-space-sm);
  }
}

/* src/design-system/components/flex-spec-browser/styles.css */
@layer block {
  flex-spec-browser {
    display: block;
    container-type: inline-size;
    container-name: spec-browser;
  }

  .flex-spec-browser {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: var(--flex-space-xl);
    align-items:  start;
    font-size: 1rem;
    line-height: 1.4;
  }

  .flex-spec-browser__sidebar {
    position: sticky;
    overflow-y: auto;
    max-block-size: calc(100vh - 2rem);
    top: var(--flex-space-md);
  }

  .flex-spec-browser__nav {
    border-inline-start: 1px solid var(--flex-color-border);
    padding: 0;
  }

  .flex-spec-browser__nav-heading {
    color: var(--flex-color-text);
    letter-spacing: .025em;
    text-transform: uppercase;
    margin: 0;
    padding: .5rem 1rem;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .flex-spec-browser__nav-section {
    margin-block-end: var(--flex-space-md);
  }

  .flex-spec-browser__nav-subheading {
    color: var(--flex-color-text-muted);
    letter-spacing: .025em;
    text-transform: uppercase;
    margin: 0;
    padding: .25rem 1rem;
    font-size: .82rem;
    font-weight: 600;
  }

  .flex-spec-browser__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .flex-spec-browser__nav-item {
    margin: 0;
  }

  .flex-spec-browser__nav-link {
    display: block;
    color: var(--flex-color-accent);
    text-decoration: none;
    border-inline-start: 3px solid #0000;
    margin-inline-start: -1px;
    padding: .5rem 1rem;
    font-size: 1rem;
    line-height: 1.3;
  }

  .flex-spec-browser__nav-link:hover {
    color: var(--flex-color-accent);
    text-decoration: underline;
  }

  .flex-spec-browser__nav-link:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: 0;
  }

  .flex-spec-browser__nav-link--current, .flex-spec-browser__nav-link[aria-current="true"] {
    color: var(--flex-color-accent);
    border-inline-start-color: var(--flex-color-accent);
    font-weight: 700;
  }

  .flex-spec-browser__nav-link:visited:not(.flex-spec-browser__nav-link--current) {
    color: var(--flex-color-ink);
  }

  .flex-spec-browser__nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .flex-spec-browser__nav-link--sub {
    color: var(--flex-color-text-muted);
    padding-inline-start: 2rem;
    font-size: .9rem;
  }

  .flex-spec-browser__nav-link--sub:hover {
    color: var(--flex-color-accent);
  }

  .flex-spec-browser__nav-num {
    color: var(--flex-color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .flex-spec-browser__content {
    display: flex;
    gap: var(--flex-space-xl);
    flex-direction: column;
    min-inline-size: 0;
  }

  .flex-spec-browser__section {
    display: flex;
    gap: var(--flex-space-md);
    flex-direction: column;
  }

  .flex-spec-browser__section-heading {
    margin: 0;
  }

  .flex-spec-browser__panels {
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
  }

  .flex-spec-browser__panel {
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    background: var(--flex-color-surface);
  }

  .flex-spec-browser__panel[open] {
    box-shadow: 0 1px 2px #0000000a;
  }

  .flex-spec-browser__panel-summary {
    cursor: pointer;
    list-style: none;
    padding: var(--flex-space-sm) var(--flex-space-md);
    display: flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    flex-wrap: wrap;
    font-size: 1.06rem;
    font-weight: 600;
  }

  .flex-spec-browser__panel-summary::-webkit-details-marker {
    display: none;
  }

  .flex-spec-browser__panel-summary:before {
    content: "▸";
    display: inline-block;
    color: var(--flex-color-text-muted);
    flex-shrink: 0;
    transition: transform .15s;
    font-size: .85em;
  }

  .flex-spec-browser__panel-summary:hover .flex-spec-browser__panel-title {
    text-decoration: underline;
  }

  .flex-spec-browser__panel-summary:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -2px;
  }

  .flex-spec-browser__panel[open] > .flex-spec-browser__panel-summary:before {
    transform: rotate(90deg);
  }

  .flex-spec-browser__panel-number {
    color: var(--flex-color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .flex-spec-browser__panel-title {
    flex: auto;
  }

  .flex-spec-browser__panel-meta {
    display: inline-flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    color: var(--flex-color-text-muted);
    font-size: .95rem;
    font-weight: 400;
  }

  .flex-spec-browser__panel-count {
    white-space: nowrap;
  }

  .flex-spec-browser__delivery {
    display: inline-block;
    font-size: var(--flex-text-tag);
    border-radius: var(--flex-radius-bubble);
    padding: .125rem .5rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .flex-spec-browser__delivery[data-delivery="static"] {
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    color: var(--flex-color-text-muted);
  }

  .flex-spec-browser__delivery[data-delivery="conversational"] {
    background: var(--flex-color-info-lighter);
    color: var(--flex-color-text);
  }

  .flex-spec-browser__delivery[data-delivery="hybrid"] {
    background: var(--flex-color-warning-lighter);
    color: var(--flex-color-text);
  }

  .flex-spec-browser__panel-body {
    padding: 0 var(--flex-space-md) var(--flex-space-md);
    display: flex;
    gap: var(--flex-space-sm);
    border-block-start: 1px solid var(--flex-color-border);
    flex-direction: column;
    min-inline-size: 0;
    padding-block-start: var(--flex-space-md);
  }

  .flex-spec-browser__table-wrap {
    overflow-x: auto;
    max-inline-size: 100%;
  }

  .flex-spec-browser__table-wrap .flex-table {
    min-inline-size: max-content;
    margin: 0;
  }

  .flex-spec-browser__table-wrap .flex-table td:first-child, .flex-spec-browser__table-wrap .flex-table th:first-child {
    overflow-wrap: anywhere;
    min-inline-size: 12rem;
    max-inline-size: 24rem;
  }

  .flex-spec-browser__page-groups {
    list-style: none;
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .flex-spec-browser__page-group-title {
    font-weight: 600;
  }

  .flex-spec-browser__page-group-fields {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: .25rem 0 0;
    padding: 0;
  }

  .flex-spec-browser__page-group-fields > li {
    display: flex;
    justify-content: space-between;
    gap: var(--flex-space-sm);
  }

  .flex-spec-browser__condition {
    font-family: var(--flex-font-mono, monospace);
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    color: var(--flex-color-text-muted);
    padding: .05rem .4rem;
    font-size: .9rem;
  }

  @container spec-browser (width <= 48rem) {
    .flex-spec-browser {
      grid-template-columns: 1fr;
    }

    .flex-spec-browser__sidebar {
      position: static;
      max-block-size: none;
    }
  }
}

/* src/design-system/components/flex-spec-diff-browser/styles.css */
@layer block {
  flex-spec-diff-browser {
    display: block;
    container-type: inline-size;
    container-name: spec-diff-browser;
  }

  .flex-spec-diff-browser {
    display: flex;
    gap: var(--flex-space-md);
    flex-direction: column;
    min-inline-size: 0;
    font-size: 1rem;
    line-height: 1.4;
  }

  .flex-spec-diff-browser__overview {
    display: flex;
    gap: var(--flex-space-2xs);
    padding: var(--flex-space-sm) var(--flex-space-md);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    background: var(--flex-color-surface);
    flex-direction: column;
  }

  .flex-spec-diff-browser__overview-empty {
    color: var(--flex-color-text-muted);
    margin: 0;
  }

  .flex-spec-diff-browser__overview-counts {
    color: var(--flex-color-text);
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
  }

  .flex-spec-diff-browser__overview-jumps {
    color: var(--flex-color-text-muted);
    margin: 0;
  }

  .flex-spec-diff-browser__overview-jumps-label {
    color: var(--flex-color-text);
    font-weight: 600;
  }

  .flex-spec-diff-browser__overview-jump {
    color: var(--flex-color-accent);
    text-decoration: none;
  }

  .flex-spec-diff-browser__overview-jump:hover {
    text-decoration: underline;
  }

  .flex-spec-diff-browser__overview-jump:focus-visible {
    text-decoration: underline;
  }

  .flex-spec-diff-browser__overview-sep {
    color: var(--flex-color-text-muted);
  }

  .flex-spec-diff-browser__panels {
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
  }

  .flex-spec-diff-browser__panel {
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    background: var(--flex-color-surface);
    border-inline-start-width: 3px;
  }

  .flex-spec-diff-browser__panel[open] {
    box-shadow: 0 1px 2px #0000000a;
  }

  .flex-spec-diff-browser__panel-summary {
    cursor: pointer;
    list-style: none;
    padding: var(--flex-space-sm) var(--flex-space-md);
    display: flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    flex-wrap: wrap;
    font-size: 1.06rem;
    font-weight: 600;
  }

  .flex-spec-diff-browser__panel-summary::-webkit-details-marker {
    display: none;
  }

  .flex-spec-diff-browser__panel-summary:before {
    content: "▸";
    display: inline-block;
    color: var(--flex-color-text-muted);
    flex-shrink: 0;
    transition: transform .15s;
    font-size: .85em;
  }

  .flex-spec-diff-browser__panel-summary:hover .flex-spec-diff-browser__panel-title {
    text-decoration: underline;
  }

  .flex-spec-diff-browser__panel-summary:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -2px;
  }

  .flex-spec-diff-browser__panel[open] > .flex-spec-diff-browser__panel-summary:before {
    transform: rotate(90deg);
  }

  .flex-spec-diff-browser__panel-number {
    color: var(--flex-color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .flex-spec-diff-browser__panel-title {
    flex: auto;
  }

  .flex-spec-diff-browser__panel-body {
    padding: 0 var(--flex-space-md) var(--flex-space-md);
    display: flex;
    gap: var(--flex-space-sm);
    border-block-start: 1px solid var(--flex-color-border);
    flex-direction: column;
    min-inline-size: 0;
    padding-block-start: var(--flex-space-md);
  }

  .flex-spec-diff-browser__panel[data-change="added"], .flex-spec-diff-browser__group[data-change="added"], .flex-spec-diff-browser__field[data-change="added"] {
    background: var(--flex-color-success-lighter);
    border-inline-start-color: var(--flex-color-success);
  }

  .flex-spec-diff-browser__panel[data-change="modified"], .flex-spec-diff-browser__panel[data-change="renamed"], .flex-spec-diff-browser__group[data-change="modified"], .flex-spec-diff-browser__group[data-change="renamed"], .flex-spec-diff-browser__field[data-change="modified"], .flex-spec-diff-browser__field[data-change="renamed"] {
    background: var(--flex-color-warning-lighter);
    border-inline-start-color: var(--flex-color-warning);
  }

  .flex-spec-diff-browser__panel[data-change="removed"], .flex-spec-diff-browser__group[data-change="removed"], .flex-spec-diff-browser__field[data-change="removed"] {
    background: var(--flex-color-error-lighter);
    border-inline-start-color: var(--flex-color-error);
  }

  .flex-spec-diff-browser__panel[data-change="moved"], .flex-spec-diff-browser__group[data-change="moved"] {
    background: var(--flex-color-info-lighter);
    border-inline-start-color: var(--flex-color-info);
  }

  .flex-spec-diff-browser__field[data-change="removed"] .flex-spec-diff-browser__field-label {
    text-decoration: line-through;
    color: var(--flex-color-text-muted);
  }

  .flex-spec-diff-browser__groups {
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
  }

  .flex-spec-diff-browser__group {
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
    border-inline-start-width: 3px;
  }

  .flex-spec-diff-browser__group-summary {
    cursor: pointer;
    list-style: none;
    padding: var(--flex-space-xs) var(--flex-space-sm);
    display: flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 600;
  }

  .flex-spec-diff-browser__group-summary::-webkit-details-marker {
    display: none;
  }

  .flex-spec-diff-browser__group-summary:before {
    content: "▸";
    display: inline-block;
    color: var(--flex-color-text-muted);
    flex-shrink: 0;
    transition: transform .15s;
    font-size: .8em;
  }

  .flex-spec-diff-browser__group-summary:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -2px;
  }

  .flex-spec-diff-browser__group[open] > .flex-spec-diff-browser__group-summary:before {
    transform: rotate(90deg);
  }

  .flex-spec-diff-browser__group-title {
    flex: auto;
  }

  .flex-spec-diff-browser__group-unchanged {
    color: var(--flex-color-text-muted);
    font-weight: 400;
  }

  .flex-spec-diff-browser__group-body {
    padding: var(--flex-space-xs) var(--flex-space-sm) var(--flex-space-sm);
    display: flex;
    gap: var(--flex-space-2xs);
    border-block-start: 1px solid var(--flex-color-border);
    flex-direction: column;
    min-inline-size: 0;
    padding-block-start: var(--flex-space-xs);
  }

  .flex-spec-diff-browser__field {
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border-radius: var(--flex-radius-sm);
    display: flex;
    gap: var(--flex-space-2xs);
    border-inline-start: 3px solid #0000;
    flex-direction: column;
  }

  .flex-spec-diff-browser__field-row {
    display: flex;
    align-items: baseline;
    gap: var(--flex-space-xs);
    flex-wrap: wrap;
    font-size: 1rem;
  }

  .flex-spec-diff-browser__field-row--was {
    color: var(--flex-color-text-muted);
    text-decoration: line-through;
    font-size: .9rem;
  }

  .flex-spec-diff-browser__field-was-prefix {
    text-decoration: none;
    font-style: italic;
  }

  .flex-spec-diff-browser__field-label {
    color: var(--flex-color-text);
  }

  .flex-spec-diff-browser__field-type {
    color: var(--flex-color-text-muted);
    font-family: var(--flex-font-mono);
    font-size: .85rem;
  }

  .flex-spec-diff-browser__field-required {
    color: var(--flex-color-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .75rem;
    font-weight: 600;
  }

  .flex-spec-diff-browser__badge {
    display: inline-block;
    font-size: var(--flex-text-tag);
    border-radius: var(--flex-radius-bubble);
    white-space: nowrap;
    padding: .125rem .5rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .flex-spec-diff-browser__badge[data-change="added"] {
    background: var(--flex-color-success);
    color: var(--flex-color-surface);
  }

  .flex-spec-diff-browser__badge[data-change="modified"] {
    background: var(--flex-color-warning);
    color: var(--flex-color-text);
  }

  .flex-spec-diff-browser__badge[data-change="renamed"] {
    background: var(--flex-color-warning);
    color: var(--flex-color-text);
  }

  .flex-spec-diff-browser__badge[data-change="removed"] {
    background: var(--flex-color-error);
    color: var(--flex-color-surface);
  }

  .flex-spec-diff-browser__badge[data-change="moved"] {
    background: var(--flex-color-info);
    color: var(--flex-color-surface);
  }
}

/* src/design-system/components/flex-pipeline-panel/styles.css */
@layer block {
  flex-pipeline-panel {
    display: block;
  }

  .pipeline-panel {
    padding: var(--flex-space-sm) var(--flex-space-md);
  }

  .pipeline-panel__header {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    margin-block-end: var(--flex-space-xs);
  }

  .pipeline-panel__title {
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text);
    font-weight: 600;
  }

  .pipeline-panel__dots {
    display: flex;
    align-items:  center;
    gap: 4px;
  }

  .pipeline-panel__dot {
    background: var(--flex-color-border);
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .pipeline-panel__dot[data-state="complete"] {
    background: var(--flex-color-success, #28a745);
  }

  .pipeline-panel__dot[data-state="current"] {
    background: var(--flex-color-accent, #2563eb);
  }

  .pipeline-panel__stage-label {
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
  }

  .pipeline-panel__body {
    font-size: var(--flex-text-base);
  }

  .pipeline-panel__body p {
    margin: 0 0 var(--flex-space-sm);
    line-height: 1.4;
  }

  .pipeline-panel__progress {
    display: flex;
    gap: var(--flex-space-xs);
    flex-direction: column;
  }

  .pipeline-panel__log {
    list-style: none;
    margin: var(--flex-space-xs) 0 0;
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
    overflow-y: auto;
    max-height: 200px;
    padding: 0;
  }

  .pipeline-panel__log li {
    padding: 2px 0;
  }

  .pipeline-panel__dismiss {
    cursor: pointer;
    font-size: var(--flex-text-sm);
    background: none;
    border: none;
    margin-inline-start: var(--flex-space-xs);
  }

  .pipeline-panel__hint {
    margin: var(--flex-space-xs) 0 0;
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
  }

  .pipeline-panel__settings-link {
    display: block;
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
    text-decoration: none;
    margin-block-start: var(--flex-space-sm);
  }

  .pipeline-panel__settings-link:hover {
    color: var(--flex-color-accent);
  }

  .pipeline-panel__error {
    background: var(--flex-color-error-lighter, #f8d7da);
    color: var(--flex-color-error, #842029);
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border-radius: var(--flex-radius-md);
    font-size: var(--flex-text-xs);
    word-break: break-word;
    margin-block-end: var(--flex-space-xs);
  }

  .pipeline-panel__loading {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-xs);
    color: var(--flex-color-text-muted);
    padding: var(--flex-space-xs) 0;
  }

  .pipeline-panel__spinner {
    display: inline-block;
    border: 2px solid var(--flex-color-border);
    border-top-color: var(--flex-color-text-muted);
    animation: pipeline-spin .6s linear infinite;
    border-radius: 50%;
    width: 12px;
    height: 12px;
  }

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

  .pipeline-panel__criteria-list {
    list-style: none;
    margin: 0 0 var(--flex-space-sm);
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    padding: 0;
  }

  .pipeline-panel__criterion {
    display: flex;
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    align-items:  flex-start;
    gap: 4px;
    padding: 4px 6px;
    line-height: 1.3;
  }

  .pipeline-panel__criterion[data-status="approved"] {
    border-color: var(--flex-color-success, #28a745);
    background: var(--flex-color-success-lighter, #d4edda);
  }

  .pipeline-panel__criterion-text {
    font-size: var(--flex-text-xs);
    flex: 1;
  }

  .pipeline-panel__criterion-source {
    color: var(--flex-color-text-muted);
    white-space: nowrap;
    font-size: .65rem;
  }

  .pipeline-panel__criterion-actions {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
  }

  .pipeline-panel__criterion-actions button {
    border: 1px solid var(--flex-color-border);
    cursor: pointer;
    font-size: var(--flex-text-xs);
    background: none;
    border-radius: 3px;
    padding: 0 3px;
    line-height: 1.4;
  }

  .pipeline-panel__criterion-actions button:hover {
    background: var(--flex-gray-5);
  }

  .pipeline-panel__section-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
  }

  .pipeline-panel__section-item {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--flex-space-xs);
    font-size: var(--flex-text-xs);
  }

  .pipeline-panel__complete {
    color: var(--flex-color-success, #28a745);
    font-weight: 600;
    font-size: var(--flex-text-sm);
  }

  .pipeline-panel__corpus {
    margin-block-end: var(--flex-space-sm);
  }

  .pipeline-panel__corpus-title {
    font-size: var(--flex-text-xs);
    cursor: pointer;
    color: var(--flex-color-text);
    font-weight: 600;
  }

  .pipeline-panel__corpus-list {
    list-style: none;
    margin: var(--flex-space-xs) 0 0;
    color: var(--flex-color-text-muted);
    overflow-y: auto;
    max-height: 150px;
    padding: 0;
    font-size: .65rem;
  }

  .pipeline-panel__corpus-list li {
    padding: 1px 0;
  }

  .pipeline-panel__proposal {
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-md);
    padding: var(--flex-space-sm);
    margin-block-start: var(--flex-space-xs);
  }

  .pipeline-panel__proposal-summary {
    margin: 0 0 var(--flex-space-xs);
    font-weight: 500;
  }

  .pipeline-panel__proposal-commands {
    list-style: none;
    margin: 0 0 var(--flex-space-sm);
    overflow-y: auto;
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
    max-height: 200px;
    padding: 0;
  }

  .pipeline-panel__proposal-commands li {
    border-bottom: 1px solid var(--flex-gray-5);
    padding: 2px 0;
  }

  .pipeline-panel__proposal-commands li:last-child {
    border-bottom: none;
  }

  .pipeline-panel__proposal-actions {
    display: flex;
    gap: var(--flex-space-xs);
  }
}

/* src/design-system/components/flex-sidebar-tabs/styles.css */
@layer block {
  flex-sidebar-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .sidebar-tabs__header {
    display: flex;
    border-block-end: 1px solid var(--flex-color-border);
    flex-shrink: 0;
  }

  .sidebar-tabs__tab {
    padding: var(--flex-space-xs) var(--flex-space-sm);
    border: none;
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    cursor: pointer;
    background: none;
    border-block-end: 2px solid #0000;
    flex: 1;
    font-weight: 500;
  }

  .sidebar-tabs__tab[data-active] {
    color: var(--flex-color-text);
    border-block-end-color: var(--flex-color-accent, currentColor);
  }

  .sidebar-tabs__panel {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .sidebar-tabs__panel[hidden], flex-sidebar-tabs .assistant__close {
    display: none;
  }
}

/* src/design-system/components/flex-chat-panel/styles.css */
@layer block {
  @layer block {
    .flex-chat-panel {
      display: flex;
      gap: var(--flex-space-md);
      padding: var(--flex-space-md);
      border: 1px solid var(--flex-color-border);
      border-radius: var(--flex-radius-md);
      background: var(--flex-color-surface);
      flex-direction: column;
    }

    .flex-chat-panel__messages {
      display: flex;
      gap: var(--flex-space-sm);
      overflow-y: auto;
      flex-direction: column;
      max-height: 60vh;
    }

    .flex-chat-panel__message {
      display: flex;
      padding: var(--flex-space-sm) var(--flex-space-md);
      border-radius: var(--flex-radius-md);
      max-width: 85%;
      line-height: 1.5;
    }

    .flex-chat-panel__message[data-role="user"] {
      background: var(--flex-color-primary-lighter);
      color: var(--flex-color-primary-darker);
      align-self:  flex-end;
    }

    .flex-chat-panel__message[data-role="assistant"] {
      background: var(--flex-color-base-lightest);
      color: var(--flex-color-base-darker);
      align-self:  flex-start;
    }

    .flex-chat-panel__message-content {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .flex-chat-panel__form {
      display: flex;
      gap: var(--flex-space-sm);
      border-block-start: 1px solid var(--flex-color-border);
      flex-direction: column;
      padding-block-start: var(--flex-space-sm);
    }

    .flex-chat-panel__input-group {
      display: flex;
    }

    .flex-chat-panel__actions {
      display: flex;
      justify-content: flex-end;
    }

    .flex-chat-panel__finished {
      padding: var(--flex-space-sm) var(--flex-space-md);
      border-radius: var(--flex-radius-md);
      background: var(--flex-color-success-lighter);
      color: var(--flex-color-success-darker);
      text-align: center;
    }
  }
}

/* src/design-system/components/flex-variant-badge/styles.css */
@layer block {
  @layer block {
    .variant-badge {
      display: inline-flex;
      align-items:  center;
      gap: var(--flex-space-2xs);
      padding: var(--flex-space-2xs) var(--flex-space-sm);
      font-size: var(--flex-text-sm);
      color: var(--flex-color-base-darker);
      background: var(--flex-color-base-lightest);
      border: 1px solid var(--flex-color-border);
      border-radius: var(--flex-radius-pill);
      line-height: 1.4;
    }

    .variant-badge a {
      color: inherit;
      text-decoration: underline;
      text-decoration-style: dotted;
    }

    .variant-badge a:hover, .variant-badge a:focus {
      text-decoration-style: solid;
    }

    .variant-badge[data-task="extraction"] {
      background: var(--flex-color-primary-lighter);
    }

    .variant-badge[data-task="shaping"] {
      background: var(--flex-color-accent-warm-lighter);
    }

    .variant-badge[data-task="filling"] {
      background: var(--flex-color-accent-cool-lighter);
    }
  }
}

/* src/entrypoints/app/routes/projects/styles.css */
@layer block {
  .project-summary {
    display: flex;
    gap: var(--flex-space-lg);
    padding-block: var(--flex-space-sm);
    border-block-end: 1px solid var(--flex-color-border);
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
    flex-wrap: wrap;
  }

  .project-summary strong {
    color: var(--flex-color-text);
  }

  .project-back-link {
    font-size: var(--flex-text-sm);
    color: var(--flex-color-link);
    text-decoration: none;
  }

  .project-back-link:hover {
    text-decoration: underline;
  }

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

  .form-page-card {
    display: flex;
    align-items: baseline;
    gap: var(--flex-space-md);
    padding: var(--flex-space-sm);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
  }

  .form-page-card__number {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
    min-inline-size: 1.5rem;
  }

  .form-page-card__body {
    flex: 1;
  }

  .form-page-card__title {
    font-weight: 700;
  }

  .form-page-card__groups {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
    margin-block-start: var(--flex-space-3xs);
  }

  .condition-tag {
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    background: var(--flex-color-surface);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    white-space: nowrap;
    padding: .125rem .375rem;
  }

  .fixture-card-label {
    display: block;
    cursor: pointer;
  }

  .fixture-card-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
  }

  .fixture-card {
    cursor: pointer;
    text-align: start;
    border: 1px solid var(--flex-color-border);
    background: var(--flex-color-surface);
    inline-size: 100%;
    transition: all .15s ease-in-out;
  }

  .fixture-card:hover {
    border-color: var(--flex-color-primary);
    background: var(--flex-color-surface-hover);
  }

  .fixture-card-label:has(.fixture-card-input:checked) .fixture-card {
    border-color: var(--flex-color-primary);
    background: var(--flex-color-primary-lighter);
    box-shadow: 0 0 0 2px var(--flex-color-primary-lightest);
  }

  .fixture-card-label:has(.fixture-card-input:focus-visible) .fixture-card {
    outline: 2px solid var(--flex-color-focus);
    outline-offset: 2px;
  }

  .project-provenance {
    padding-block: var(--flex-space-xs);
    border-bottom: 1px solid var(--flex-color-border);
  }

  .repo-header {
    display: flex;
    gap: var(--flex-space-2xs);
    flex-direction: column;
  }

  .repo-header__path {
    display: flex;
    align-items: baseline;
    gap: var(--flex-space-2xs);
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    flex-wrap: wrap;
  }

  .repo-header__path a {
    color: var(--flex-color-text-muted);
    text-decoration: none;
  }

  .repo-header__path a:hover {
    color: var(--flex-color-link);
    text-decoration: underline;
  }

  .repo-header__path-sep, .repo-header__path-slug {
    color: var(--flex-color-text-muted);
  }

  .repo-header__fork-badge {
    display: inline-flex;
    padding-inline: var(--flex-space-xs);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    font-size: var(--flex-text-sm);
    background: var(--flex-color-surface);
    align-items:  center;
    margin-inline-start: var(--flex-space-sm);
  }

  .repo-header__fork-badge a {
    color: var(--flex-color-link);
  }

  .repo-header__title-row {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--flex-space-md);
    flex-wrap: wrap;
  }

  .repo-header__title {
    margin: 0;
  }

  .repo-header__actions {
    display: flex;
    gap: var(--flex-space-sm);
  }

  .repo-nav {
    border-block-end: 1px solid var(--flex-color-border);
  }

  .repo-nav__list {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .repo-nav__link {
    display: block;
    padding: var(--flex-space-sm) var(--flex-space-md);
    color: var(--flex-color-text-muted);
    text-decoration: none;
    font-size: var(--flex-text-uswds);
    border: 1px solid #0000;
    position: relative;
    border-block-end: none;
    font-weight: 700;
    top: 1px;
  }

  .repo-nav__link:hover {
    color: var(--flex-color-text);
  }

  .repo-nav__link:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -2px;
    z-index: 1;
  }

  .repo-nav__link--current {
    color: var(--flex-color-text);
    border-color: var(--flex-color-border);
    background: var(--flex-color-bg);
    border-block-end-color: var(--flex-color-bg);
  }

  .clone-bar {
    display: flex;
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
    overflow: hidden;
    align-items:  center;
  }

  .clone-bar__url {
    padding: var(--flex-space-sm) var(--flex-space-md);
    font-size: var(--flex-text-uswds);
    word-break: break-all;
    user-select: all;
    flex: 1;
  }

  .clone-bar__copy {
    padding: var(--flex-space-sm) var(--flex-space-md);
    border: none;
    border-inline-start: 1px solid var(--flex-color-border);
    background: var(--flex-color-surface);
    color: var(--flex-color-link);
    font: inherit;
    font-size: var(--flex-text-uswds);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
  }

  .clone-bar__copy:hover {
    background: var(--flex-color-surface-hover);
    color: var(--flex-color-link-hover);
  }

  .clone-bar__copy:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: -2px;
  }

  .delete-confirm__trigger {
    color: var(--flex-color-error);
    cursor: pointer;
    font: inherit;
    font-size: var(--flex-text-sm);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
  }

  .delete-confirm__trigger:hover {
    color: var(--flex-color-error-dark);
  }
}

/* src/entrypoints/app/routes/owner/edit/styles.css */
@layer block {
  .editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--flex-space-lg);
    align-items:  start;
  }

  @media (max-width: 768px) {
    .editor-layout {
      grid-template-columns: 1fr;
    }
  }

  .editor-panel {
    display: flex;
    gap: var(--flex-space-md);
    flex-direction: column;
  }

  .editor-panel--preview {
    position: sticky;
    top: var(--flex-space-md);
  }

  .editor-section {
    display: flex;
    gap: var(--flex-space-sm);
    border-block-end: 1px solid var(--flex-color-border);
    flex-direction: column;
    padding-block-end: var(--flex-space-md);
  }

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

  .editor-page-card {
    display: flex;
    gap: var(--flex-space-2xs);
    padding: var(--flex-space-sm);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
    flex-direction: column;
  }

  .editor-page-card__header {
    display: flex;
    align-items: baseline;
    gap: var(--flex-space-sm);
  }

  .editor-page-card__number {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
    min-inline-size: 1.5rem;
  }

  .editor-page-card__title {
    flex: 1;
    font-weight: 700;
  }

  .editor-page-card__actions {
    display: flex;
    gap: var(--flex-space-2xs);
  }

  .editor-page-card__move-btn {
    padding: var(--flex-space-3xs) var(--flex-space-2xs);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-bg);
    color: var(--flex-color-text);
    cursor: pointer;
    font-size: var(--flex-text-sm);
    line-height: 1;
  }

  .editor-page-card__move-btn:hover {
    background: var(--flex-color-surface-hover);
  }

  .editor-page-card__move-btn:focus-visible {
    outline: var(--flex-focus-ring);
    outline-offset: 2px;
  }

  .editor-page-card__groups {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
  }

  .editor-delivery-form {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-2xs);
    margin-block-start: var(--flex-space-2xs);
  }

  .editor-delivery-select {
    padding: var(--flex-space-3xs) var(--flex-space-xs);
    font-size: var(--flex-text-sm);
    min-inline-size: auto;
  }

  .editor-delivery-btn {
    padding: var(--flex-space-3xs) var(--flex-space-xs);
    font-size: var(--flex-text-sm);
  }

  .editor-diff {
    background: var(--flex-color-surface);
    padding: var(--flex-space-md);
    border: 1px solid var(--flex-color-primary);
    border-radius: var(--flex-radius-sm);
  }

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

  .editor-diff__page {
    display: flex;
    align-items: baseline;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-2xs) var(--flex-space-xs);
    border-radius: var(--flex-radius-sm);
  }

  .editor-diff__page[data-status="added"] {
    background: var(--flex-color-success-lighter);
  }

  .editor-diff__page[data-status="removed"] {
    background: var(--flex-color-error-lighter);
    text-decoration: line-through;
  }

  .editor-diff__page[data-status="modified"] {
    background: var(--flex-color-warning-lighter);
  }

  .editor-diff__page[data-status="moved"] {
    background: var(--flex-color-info-lighter);
  }

  .editor-diff__status {
    font-size: var(--flex-text-sm);
    text-transform: uppercase;
    min-inline-size: 5rem;
    font-weight: 700;
  }

  .editor-diff__title {
    font-weight: 700;
  }

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

  .editor-history__entry {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-2xs) 0;
    border-block-end: 1px solid var(--flex-color-border);
  }

  .preview-page {
    border-block-end: 1px solid var(--flex-color-border);
    padding-block-end: var(--flex-space-md);
  }

  .preview-group {
    padding: var(--flex-space-sm);
    margin-block-start: var(--flex-space-sm);
  }

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

  .preview-field {
    display: flex;
    align-items: baseline;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-3xs) 0;
  }

  .preview-field__label {
    font-weight: 600;
  }

  .editor-breadcrumb__actions {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-xs);
  }

  .editor-breadcrumb__staged {
    position: relative;
  }

  .editor-breadcrumb__staged flex-staged-changes {
    position: absolute;
    z-index: 10;
    box-shadow: var(--flex-shadow-md);
    top: calc(100% + var(--flex-space-2xs));
  }

  .editor-breadcrumb__staged flex-staged-changes:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .editor-breadcrumb__staged flex-staged-changes:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .editor-breadcrumb__staged flex-staged-changes:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    right: 0;
  }

  .editor-breadcrumb__staged flex-staged-changes:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .editor-breadcrumb__staged flex-staged-changes:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }

  .editor-breadcrumb__staged flex-staged-changes:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
  }
}

/* src/entrypoints/app/routes/owner/edit/editor-layout.css */
@layer block {
  .editor-layout {
    --editor-breadcrumb-block-size: 3.5rem;
    display: grid;
    grid-template-columns: 240px 1fr 320px;
    grid-template-rows: auto auto;
  }

  .editor-breadcrumb {
    grid-column: 1 / -1;
    position: sticky;
    z-index: 2;
    padding: var(--flex-space-sm) var(--flex-space-md);
    border-block-end: 1px solid var(--flex-color-border);
    background: var(--flex-color-bg);
    display: flex;
    justify-content: space-between;
    align-items:  center;
    top: 0;
  }

  .editor-breadcrumb h1 {
    font-size: var(--flex-text-base);
    margin: 0;
    font-weight: 400;
  }

  .editor-breadcrumb a {
    color: var(--flex-color-text-muted);
    text-decoration: none;
  }

  .editor-breadcrumb a:hover {
    color: var(--flex-color-accent);
  }

  .editor-breadcrumb strong {
    color: var(--flex-color-text);
    font-weight: 700;
  }

  .editor-breadcrumb__branch-controls {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-sm);
    flex-wrap: wrap;
  }

  .editor-breadcrumb__change {
    display: inline-flex;
    align-items:  center;
    gap: var(--flex-space-2xs);
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
  }

  .editor-breadcrumb__change-label {
    font-weight: 600;
  }

  .editor-breadcrumb__review-link {
    margin-inline-start: var(--flex-space-xs);
  }

  .editor-structure {
    grid-row: 2;
    position: sticky;
    overflow-y: auto;
    max-block-size: calc(100dvh - var(--editor-breadcrumb-block-size));
    border-inline-end: 1px solid var(--flex-color-border);
    align-self:  start;
    top: var(--editor-breadcrumb-block-size);
  }

  .editor-criteria {
    padding: var(--flex-space-sm) var(--flex-space-md);
    border-block-start: 1px solid var(--flex-color-border);
  }

  .editor-criteria__summary {
    font-size: var(--flex-text-sm);
    cursor: pointer;
    color: var(--flex-color-text);
    font-weight: 600;
  }

  .editor-criteria__list {
    list-style: none;
    margin: var(--flex-space-xs) 0 0;
    padding: 0;
  }

  .editor-criteria__item {
    margin: 0;
  }

  .editor-criteria__item[data-status="approved"] {
    border-inline-start: 2px solid var(--flex-color-success, #28a745);
    padding-inline-start: 6px;
  }

  .editor-criteria__link {
    display: block;
    text-align: start;
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    cursor: pointer;
    border-radius: var(--flex-radius-md);
    background: none;
    border: none;
    width: 100%;
    padding: 4px 6px;
    line-height: 1.4;
  }

  .editor-criteria__link:hover {
    background: var(--flex-gray-5);
    color: var(--flex-color-text);
  }

  .editor-criteria__add {
    display: block;
    font-size: var(--flex-text-xs);
    color: var(--flex-color-accent, #2563eb);
    cursor: pointer;
    background: none;
    border: none;
    margin-block-start: var(--flex-space-xs);
    padding: 4px 6px;
  }

  .editor-criteria__add:hover {
    text-decoration: underline;
  }

  .criterion-edit {
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
    margin-block-start: var(--flex-space-md);
  }

  .criterion-edit__label {
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
    font-weight: 600;
  }

  .criterion-edit__textarea {
    resize: vertical;
    width: 100%;
  }

  .criterion-edit__input {
    width: 100%;
  }

  .criterion-edit__actions {
    display: flex;
    gap: var(--flex-space-sm);
  }

  .editor-references {
    padding: var(--flex-space-sm) var(--flex-space-md);
    border-block-start: 1px solid var(--flex-color-border);
  }

  .editor-references__summary {
    font-size: var(--flex-text-sm);
    cursor: pointer;
    color: var(--flex-color-text);
    font-weight: 600;
  }

  .editor-references__list {
    list-style: none;
    margin: var(--flex-space-xs) 0 0;
    padding: 0;
  }

  .editor-references__item {
    margin: 0;
  }

  .editor-references__link {
    display: block;
    text-align: start;
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
    cursor: pointer;
    border-radius: var(--flex-radius-md);
    background: none;
    border: none;
    width: 100%;
    padding: 4px 6px;
  }

  .editor-references__link:hover {
    background: var(--flex-gray-5);
    color: var(--flex-color-text);
  }

  .editor-preview {
    grid-row: 2;
    display: block;
    padding: var(--flex-space-md);
  }

  .editor-preview > flex-editable-page {
    display: block;
    max-inline-size: var(--flex-content-max-width);
    inline-size: 100%;
  }

  .editor-reference-view {
    padding: var(--flex-space-lg);
    max-width: 60rem;
  }

  .editor-reference-view__back {
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    background: none;
    border: none;
    margin-block-end: var(--flex-space-md);
    padding: 0;
  }

  .editor-reference-view__back:hover {
    color: var(--flex-color-text);
  }

  .reference-article__title {
    font-size: var(--flex-text-uswds);
    margin: 0 0 var(--flex-space-xs);
  }

  .reference-article__meta {
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    margin: 0 0 var(--flex-space-md);
  }

  .reference-article__text {
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text);
    line-height: 1.6;
  }

  .editor-assistant {
    grid-row: 2;
    position: sticky;
    max-block-size: calc(100dvh - var(--editor-breadcrumb-block-size));
    border-inline-start: 1px solid var(--flex-color-border);
    align-self:  start;
    top: var(--editor-breadcrumb-block-size);
  }

  .editor-layout:has(flex-assistant[data-closed]) {
    grid-template-columns: 240px 1fr 0;
  }

  .editor-layout:has(.editor-structure[data-collapsed]) {
    grid-template-columns: 48px 1fr 320px;
  }

  .editor-layout:has(flex-assistant[data-closed]):has(.editor-structure[data-collapsed]) {
    grid-template-columns: 48px 1fr 0;
  }

  .editor-breadcrumb__open-assistant {
    display: none;
  }

  .editor-layout:has(flex-assistant[data-closed]) .editor-breadcrumb__open-assistant {
    display: inline-block;
  }

  @media (max-width: 64rem) {
    .editor-layout {
      grid-template-columns: 1fr;
    }

    .editor-structure {
      position: static;
      border-inline-end: none;
      border-block-end: 1px solid var(--flex-color-border);
      max-height: none;
    }

    .editor-assistant {
      position: static;
      border-inline-start: none;
      border-block-start: 1px solid var(--flex-color-border);
      max-height: none;
    }
  }
}

/* src/entrypoints/app/routes/owner/compare/styles.css */
@layer block {
  .compare {
    display: flex;
    gap: var(--flex-space-md);
    padding: var(--flex-space-lg) var(--flex-space-md);
    flex-direction: column;
    min-inline-size: 0;
  }

  .compare__header {
    display: flex;
    gap: var(--flex-space-xs);
    border-block-end: 1px solid var(--flex-color-border);
    flex-direction: column;
    padding-block-end: var(--flex-space-md);
  }

  .compare__breadcrumb {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
  }

  .compare__title {
    font-size: var(--flex-text-xl);
    margin: 0;
  }

  .compare__subtitle {
    color: var(--flex-color-text-muted);
    display: flex;
    align-items:  center;
    gap: var(--flex-space-2xs);
    margin: 0;
  }

  .compare__meta {
    display: flex;
    align-items:  center;
    gap: var(--flex-space-2xs);
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
  }

  .compare__actions {
    display: flex;
    gap: var(--flex-space-sm);
    flex-wrap: wrap;
    margin-block-start: var(--flex-space-xs);
  }

  .compare__actions form {
    margin: 0;
  }

  .compare__tabs {
    display: flex;
    gap: var(--flex-space-md);
    border-block-end: 1px solid var(--flex-color-border);
    flex-wrap: wrap;
    padding-block-end: var(--flex-space-xs);
  }

  .compare__tabs a {
    color: var(--flex-color-text);
    text-decoration: none;
    font-weight: 600;
  }

  .compare__tabs a:hover {
    text-decoration: underline;
  }

  .compare__tabs a:focus-visible {
    text-decoration: underline;
  }

  .compare__panel {
    display: flex;
    gap: var(--flex-space-md);
    flex-direction: column;
  }

  .compare__empty {
    color: var(--flex-color-text-muted);
    font-size: var(--flex-text-sm);
    margin: 0;
  }

  .compare__history {
    list-style: none;
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .compare__history-entry {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: var(--flex-space-sm);
    padding: var(--flex-space-sm) var(--flex-space-md);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
  }

  .compare__history-time {
    color: var(--flex-color-text-muted);
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-xs);
  }

  .compare__history-source {
    padding: 0 var(--flex-space-xs);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-border);
    color: var(--flex-color-text);
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-xs);
    text-transform: uppercase;
    font-weight: 600;
  }

  .compare__history-source[data-source="llm"] {
    background: var(--flex-color-info-lighter);
  }

  .compare__history-source[data-source="manual"] {
    background: var(--flex-color-success-lighter);
  }

  .compare__history-explanation {
    grid-column: 1 / -1;
    color: var(--flex-color-text);
    font-size: var(--flex-text-sm);
    margin: 0;
  }

  .compare__comments {
    list-style: none;
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .compare__comment {
    display: flex;
    gap: var(--flex-space-2xs);
    padding: var(--flex-space-sm) var(--flex-space-md);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
    flex-direction: column;
  }

  .compare__comment-header {
    display: flex;
    align-items: baseline;
    gap: var(--flex-space-sm);
  }

  .compare__comment-author {
    color: var(--flex-color-text);
    font-size: var(--flex-text-sm);
  }

  .compare__comment-time {
    color: var(--flex-color-text-muted);
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-xs);
  }

  .compare__comment-body {
    color: var(--flex-color-text);
    font-size: var(--flex-text-sm);
    white-space: pre-wrap;
  }

  .compare__comment-form {
    display: flex;
    gap: var(--flex-space-sm);
    flex-direction: column;
    margin: 0;
  }

  .compare__comment-label {
    display: flex;
    gap: var(--flex-space-2xs);
    flex-direction: column;
    font-weight: 600;
  }

  .compare__comment-form textarea {
    padding: var(--flex-space-xs);
    border: 1px solid var(--flex-color-border);
    border-radius: var(--flex-radius-sm);
    background: var(--flex-color-surface);
    color: var(--flex-color-text);
    font-family: inherit;
    font-size: var(--flex-text-sm);
    min-height: 6rem;
  }

  .compare__comment-form button {
    align-self:  flex-start;
  }
}

/* src/entrypoints/app/routes/settings/styles.css */
@layer block {
  .variant-settings__header {
    display: flex;
    gap: var(--flex-space-2xs);
    flex-direction: column;
  }

  .variant-settings__layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--flex-space-lg);
    align-items:  start;
  }

  .variant-settings__nav {
    position: sticky;
    top: var(--flex-space-lg);
    display: flex;
    gap: var(--flex-space-md);
    flex-direction: column;
  }

  .variant-settings__nav-group {
    display: flex;
    flex-direction: column;
  }

  .variant-settings__nav-group-label {
    font-size: var(--flex-text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--flex-color-text-muted);
    display: block;
    margin-block-end: var(--flex-space-xs);
    font-weight: 600;
  }

  .variant-settings__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .variant-settings__nav-list li {
    margin: 0;
  }

  .variant-settings__nav-link {
    display: block;
    padding: var(--flex-space-xs) var(--flex-space-sm);
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    text-decoration: none;
    border-radius: var(--flex-radius-md);
  }

  .variant-settings__nav-link:hover {
    color: var(--flex-color-text);
    background: var(--flex-gray-5);
  }

  .variant-settings__content {
    min-inline-size: 0;
  }

  .variant-settings__group {
    display: flex;
    gap: var(--flex-space-md);
    flex-direction: column;
  }

  .variant-settings__group-heading {
    font-size: var(--flex-text-base);
    margin: var(--flex-space-lg) 0 var(--flex-space-sm);
    border-block-end: 1px solid var(--flex-color-border);
    padding-block-end: var(--flex-space-xs);
    font-weight: 600;
  }

  .variant-settings__group-heading:first-child {
    margin-block-start: 0;
  }

  @media (max-width: 64rem) {
    .variant-settings__layout {
      grid-template-columns: 1fr;
    }

    .variant-settings__nav {
      position: static;
      gap: var(--flex-space-sm);
      border-block-end: 1px solid var(--flex-color-border);
      flex-flow: wrap;
      margin-block-end: var(--flex-space-md);
      padding-block-end: var(--flex-space-sm);
    }

    .variant-settings__nav-group {
      align-items:  center;
      gap: var(--flex-space-xs);
      flex-direction: row;
    }

    .variant-settings__nav-group-label {
      display: none;
    }

    .variant-settings__nav-list {
      display: flex;
      gap: var(--flex-space-xs);
    }
  }

  .variant-settings__breadcrumb {
    display: flex;
    align-items: baseline;
    gap: var(--flex-space-2xs);
    font-size: var(--flex-text-sm);
    color: var(--flex-color-text-muted);
    flex-wrap: wrap;
  }

  .variant-settings__breadcrumb-sep, .variant-settings__breadcrumb-current {
    color: var(--flex-color-text-muted);
  }

  .variant-settings__title {
    margin: 0;
  }

  .variant-settings__lede {
    color: var(--flex-color-text-muted);
    max-inline-size: 60ch;
    margin: 0;
  }

  .variant-settings__task {
    display: flex;
    gap: var(--flex-space-sm);
    border-inline-start: 3px solid #0000;
    flex-direction: column;
    padding-inline-start: var(--flex-space-sm);
    scroll-margin-block-start: var(--flex-space-xl);
  }

  .variant-settings__task[data-highlighted="true"] {
    border-inline-start-color: var(--flex-color-accent);
  }

  .variant-settings__task-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--flex-space-sm);
    flex-wrap: wrap;
  }

  .variant-settings__task-heading {
    display: flex;
    gap: var(--flex-space-2xs);
    flex-direction: column;
    flex: 20rem;
    min-inline-size: 0;
  }

  .variant-settings__task-label {
    margin: 0;
    font-size: 1.34rem;
    line-height: 1.2;
  }

  .variant-settings__task-description {
    color: var(--flex-color-text-muted);
    max-inline-size: 60ch;
    margin: 0;
  }

  .variant-settings__task-benchmarks {
    white-space: nowrap;
    font-size: var(--flex-text-sm);
  }

  .variant-settings__options {
    display: flex;
    flex-direction: column;
  }

  .variant-settings__empty {
    color: var(--flex-color-text-muted);
    margin: 0;
  }

  .variant-settings__option-label {
    display: inline;
  }

  .variant-settings__option-name {
    font-weight: 700;
  }

  .variant-settings__option-description {
    color: var(--flex-color-text);
  }

  .variant-settings__option-link {
    white-space: nowrap;
    margin-inline-start: var(--flex-space-2xs);
  }

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

/* src/entrypoints/app/public/utilities.css */
@layer utility {
  .u-visually-hidden {
    clip-path: inset(50%);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
  }

  .u-text-muted {
    color: var(--flex-color-text-muted);
  }

  .flex-mono {
    font-family: var(--flex-font-mono);
    font-size: var(--flex-text-xs);
    color: var(--flex-color-text-muted);
  }

  .flex-empty {
    color: var(--flex-color-text-muted);
    font-style: italic;
  }

  .text-muted {
    color: var(--flex-color-text-muted);
  }

  .text-sm {
    font-size: var(--flex-text-sm);
  }

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

  @media (prefers-contrast: more) {
    :root {
      --flex-color-text-muted: var(--flex-color-text);
      --flex-color-border: var(--flex-color-text);
    }

    .flex-control, .flex-input, .flex-select, .flex-textarea {
      border-width: 2px;
    }

    .flex-button {
      border: 2px solid;
    }
  }

  @media print {
    :root {
      --buncss-light: initial !important;
      --buncss-dark:  !important;
      color-scheme: light !important;
    }

    .flex-header, .flex-footer, .flex-banner, .flex-theme-toggle, .catalog-sidebar {
      display: none !important;
    }

    body {
      background: #fff;
    }

    * {
      box-shadow: none !important;
      text-shadow: none !important;
    }

    main {
      max-inline-size: 100%;
    }

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

/* src/entrypoints/app/public/styles.css */
@layer reset, tokens, composition, base, block, utility;
@import "./reset.css" layer(reset);
@import "./font-normalize.css" layer(reset);
@import "./tokens.css" layer(tokens);
@import "./compositions.css" layer(composition);
@import "./page-layouts.css" layer(composition);
@import "./base.css" layer(base);
@import "./base-classes.css" layer(base);
@import "../../../design-system/components/flex-accordion/styles.css" layer(block);
@import "../../../design-system/components/flex-alert/styles.css" layer(block);
@import "../../../design-system/components/flex-icon/styles.css" layer(block);
@import "../../../design-system/components/flex-layout/styles.css" layer(block);
@import "../../../design-system/components/flex-badge/styles.css" layer(block);
@import "../../../design-system/components/flex-card/styles.css" layer(block);
@import "../../../design-system/components/flex-prose/styles.css" layer(block);
@import "../../../design-system/components/flex-button/styles.css" layer(block);
@import "../../../design-system/components/flex-label/styles.css" layer(block);
@import "../../../design-system/components/flex-text-input/styles.css" layer(block);
@import "../../../design-system/components/flex-textarea/styles.css" layer(block);
@import "../../../design-system/components/flex-error-message/styles.css" layer(block);
@import "../../../design-system/components/flex-tag/styles.css" layer(block);
@import "../../../design-system/components/flex-link/styles.css" layer(block);
@import "../../../design-system/components/flex-list/styles.css" layer(block);
@import "../../../design-system/components/flex-collection/styles.css" layer(block);
@import "../../../design-system/components/flex-table/styles.css" layer(block);
@import "../../../design-system/components/flex-breadcrumb/styles.css" layer(block);
@import "../../../design-system/components/flex-side-navigation/styles.css" layer(block);
@import "../../../design-system/components/flex-pagination/styles.css" layer(block);
@import "../../../design-system/components/flex-search/styles.css" layer(block);
@import "../../../design-system/components/flex-checkbox/styles.css" layer(block);
@import "../../../design-system/components/flex-radio/styles.css" layer(block);
@import "../../../design-system/components/flex-select/styles.css" layer(block);
@import "../../../design-system/components/flex-button-group/styles.css" layer(block);
@import "../../../design-system/components/flex-footer/styles.css" layer(block);
@import "../../../design-system/components/flex-header/styles.css" layer(block);
@import "../../../design-system/components/flex-banner/styles.css" layer(block);
@import "../../../design-system/components/flex-identifier/styles.css" layer(block);
@import "../../../design-system/components/flex-form/styles.css" layer(block);
@import "../../../design-system/components/flex-form-review/styles.css" layer(block);
@import "../../../design-system/components/flex-form-step-text/styles.css" layer(block);
@import "../../../design-system/components/flex-form-error-summary/styles.css" layer(block);
@import "../../../design-system/components/flex-validation/styles.css" layer(block);
@import "../../../design-system/components/flex-input-prefix-suffix/styles.css" layer(block);
@import "../../../design-system/components/flex-site-alert/styles.css" layer(block);
@import "../../../design-system/components/flex-preview-banner/styles.css" layer(block);
@import "../../../design-system/components/flex-summary-box/styles.css" layer(block);
@import "../../../design-system/components/flex-step-indicator/styles.css" layer(block);
@import "../../../design-system/components/flex-process-list/styles.css" layer(block);
@import "../../../design-system/components/flex-character-count/styles.css" layer(block);
@import "../../../design-system/components/flex-memorable-date/styles.css" layer(block);
@import "../../../design-system/components/flex-input-mask/styles.css" layer(block);
@import "../../../design-system/components/flex-range-slider/styles.css" layer(block);
@import "../../../design-system/components/flex-file-input/styles.css" layer(block);
@import "../../../design-system/components/flex-language-selector/styles.css" layer(block);
@import "../../../design-system/components/flex-modal/styles.css" layer(block);
@import "../../../design-system/components/flex-tooltip/styles.css" layer(block);
@import "../../../design-system/components/flex-combo-box/styles.css" layer(block);
@import "../../../design-system/components/flex-date-picker/styles.css" layer(block);
@import "../../../design-system/components/flex-date-range-picker/styles.css" layer(block);
@import "../../../design-system/components/flex-time-picker/styles.css" layer(block);
@import "../../../design-system/components/flex-in-page-nav/styles.css" layer(block);
@import "../../../design-system/components/flex-tab-group/styles.css" layer(block);
@import "../../../design-system/components/flex-diagram/styles.css" layer(block);
@import "../../dashboard/deployment-table.css" layer(block);
@import "../../../design-system/components/flex-strategy-selector/styles.css" layer(block);
@import "../../../design-system/components/flex-form-editor/styles.css" layer(block);
@import "../../../design-system/components/flex-assistant/styles.css" layer(block);
@import "../../../design-system/components/flex-form-structure/styles.css" layer(block);
@import "../../../design-system/components/flex-editable-page/styles.css" layer(block);
@import "../../../design-system/components/flex-editable-group/styles.css" layer(block);
@import "../../../design-system/components/flex-editable-field/styles.css" layer(block);
@import "../../../design-system/components/flex-staged-changes/styles.css" layer(block);
@import "../../../design-system/components/flex-branch-switcher/styles.css" layer(block);
@import "../../../design-system/components/flex-change-indicator/styles.css" layer(block);
@import "../../../design-system/components/flex-semantic-diff/styles.css" layer(block);
@import "../../../design-system/components/flex-confidence-badge/styles.css" layer(block);
@import "../../../design-system/components/flex-variant-callout/styles.css" layer(block);
@import "../../../design-system/components/flex-spec-browser/styles.css" layer(block);
@import "../../../design-system/components/flex-spec-diff-browser/styles.css" layer(block);
@import "../../../design-system/components/flex-pipeline-panel/styles.css" layer(block);
@import "../../../design-system/components/flex-sidebar-tabs/styles.css" layer(block);
@import "../../../design-system/components/flex-chat-panel/styles.css" layer(block);
@import "../../../design-system/components/flex-variant-badge/styles.css" layer(block);
@import "../routes/projects/styles.css" layer(block);
@import "../routes/owner/edit/styles.css" layer(block);
@import "../routes/owner/edit/editor-layout.css" layer(block);
@import "../routes/owner/compare/styles.css" layer(block);
@import "../routes/settings/styles.css" layer(block);
@import "./utilities.css" layer(utility);