@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-zinc-900: #18181b;
    --color-black: #000000;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --font-weight-normal: 400;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --leading-normal: 1.5;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --color-brand-500: #3892f8;
    --color-brand-600: #797979;
    --color-brand-700: #50c878;
    --color-brand-800: #2f4f4f;
    --color-brand-900: #94112a;
    --color-surface-50: #f3f6f7;
    --color-surface-100: #e3e6ea;
    --color-surface-200: #cad1d7;
    --color-surface-300: #a5b1bb;
    --color-surface-400: #788798;
    --color-surface-500: #5d6c7d;
    --color-surface-600: #505c69;
    --color-surface-700: #454e59;
    --color-surface-800: #3e444c;
    --color-surface-900: #33373e;
    --color-text-50: #000000;
    --color-text-100: #3c3c3c;
    --color-text-400: #5d5d5d;
    --color-text-700: #b0b0b0;
    --color-text-900: #e7e7e7;
    --color-white-50: #ffffff;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0;
  }
  .inset-6 {
    inset: calc(var(--spacing) * 6);
  }
  .top-0 {
    top: 0;
  }
  .top-8 {
    top: calc(var(--spacing) * 8);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .right-8 {
    right: calc(var(--spacing) * 8);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .isolate {
    isolation: isolate;
  }
  .z-0 {
    z-index: 0;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[700\] {
    z-index: 700;
  }
  .order-first {
    order: -9999;
  }
  .order-last {
    order: 9999;
  }
  .container {
    width: 100%;
    @media (width >= 640px) {
      max-width: 640px;
    }
    @media (width >= 768px) {
      max-width: 768px;
    }
    @media (width >= 1024px) {
      max-width: 1024px;
    }
    @media (width >= 1280px) {
      max-width: 1280px;
    }
    @media (width >= 1536px) {
      max-width: 1536px;
    }
  }
  .-m-1 {
    margin: calc(var(--spacing) * -1);
  }
  .-m-1\.5 {
    margin: calc(var(--spacing) * -1.5);
  }
  .m-0 {
    margin: 0;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .prose-markdown {
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: calc(var(--spacing) * 10);
      margin-bottom: 0;
      margin-left: calc(var(--spacing) * 10);
      text-align: justify;
      font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
      font-size: 1.12rem;
      line-height: var(--tw-leading, 1.75rem);
      --tw-leading: 1.3;
      line-height: 1.3;
      color: var(--color-brand-600);
      a {
        text-decoration-line: none;
        &:hover {
          text-decoration-line: none;
        }
        &:visited {
          text-decoration-line: none;
        }
      }
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: 0;
      margin-left: 0;
      --tw-leading: 1.0;
      line-height: 1.0;
      color: var(--color-brand-700);
      a {
        text-decoration-line: none;
        &:hover {
          text-decoration-line: none;
        }
        &:visited {
          text-decoration-line: none;
        }
      }
    }
    :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: calc(var(--spacing) * 3);
      margin-left: 0;
      text-align: left;
      font-family: Lora;
      font-size: 3.75rem;
      line-height: var(--tw-leading, 4.50rem);
      --tw-leading: 1.2000000000000002;
      line-height: 1.2000000000000002;
      --tw-font-weight: 600.0;
      font-weight: 600.0;
      --tw-tracking: 0.1rem;
      letter-spacing: 0.1rem;
      color: var(--color-brand-800);
      a {
        text-decoration-line: none;
        &:hover {
          text-decoration-line: none;
        }
        &:visited {
          text-decoration-line: none;
        }
      }
    }
    :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: calc(var(--spacing) * 3);
      margin-left: 0;
      text-align: left;
      font-family: Lora;
      font-size: 3.00rem;
      line-height: var(--tw-leading, 3.50rem);
      --tw-leading: 1.2000000000000002;
      line-height: 1.2000000000000002;
      --tw-font-weight: 600.0;
      font-weight: 600.0;
      --tw-tracking: 0.05rem;
      letter-spacing: 0.05rem;
      color: var(--color-brand-800);
      a {
        text-decoration-line: none;
        &:hover {
          text-decoration-line: none;
        }
        &:visited {
          text-decoration-line: none;
        }
      }
    }
    :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: calc(var(--spacing) * 3);
      margin-left: 0;
      text-align: left;
      font-family: Lora;
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.50rem);
      --tw-leading: 1.2000000000000002;
      line-height: 1.2000000000000002;
      --tw-font-weight: 600.0;
      font-weight: 600.0;
      --tw-tracking: 0.05rem;
      letter-spacing: 0.05rem;
      color: var(--color-brand-800);
      a {
        text-decoration-line: none;
        &:hover {
          text-decoration-line: none;
        }
        &:visited {
          text-decoration-line: none;
        }
      }
    }
    :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: calc(var(--spacing) * 3);
      margin-left: 0;
      font-family: Lora;
      font-size: 1.88rem;
      line-height: var(--tw-leading, 2.25rem);
      --tw-leading: 1.1;
      line-height: 1.1;
      --tw-font-weight: 500.0;
      font-weight: 500.0;
      --tw-tracking: 0.05rem;
      letter-spacing: 0.05rem;
      color: var(--color-brand-800);
      a {
        text-decoration-line: none;
        &:hover {
          text-decoration-line: none;
        }
        &:visited {
          text-decoration-line: none;
        }
      }
    }
    :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: calc(var(--spacing) * 3);
      margin-left: 0;
      text-align: left;
      font-family: Lora;
      font-size: 1.50rem;
      line-height: var(--tw-leading, 2.00rem);
      --tw-leading: 1.1;
      line-height: 1.1;
      --tw-font-weight: 500.0;
      font-weight: 500.0;
      --tw-tracking: 0.1rem;
      letter-spacing: 0.1rem;
      color: var(--color-brand-800);
      a {
        text-decoration-line: none;
        &:hover {
          text-decoration-line: none;
        }
        &:visited {
          text-decoration-line: none;
        }
      }
    }
    :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: calc(var(--spacing) * 3);
      margin-left: 0;
      text-align: left;
      font-family: Lora;
      font-size: 1.25rem;
      line-height: var(--tw-leading, 1.75rem);
      --tw-leading: 1.1;
      line-height: 1.1;
      --tw-font-weight: 500.0;
      font-weight: 500.0;
      --tw-tracking: 0.05rem;
      letter-spacing: 0.05rem;
      color: var(--color-brand-800);
      a {
        text-decoration-line: none;
        &:hover {
          text-decoration-line: none;
        }
        &:visited {
          text-decoration-line: none;
        }
      }
    }
    :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: calc(var(--spacing) * 2);
      margin-bottom: calc(var(--spacing) * 2);
    }
    :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-position: inside;
      list-style-type: decimal;
      padding-left: calc(var(--spacing) * 6);
      font-family: Jost;
      font-size: 1.12rem;
      line-height: var(--tw-leading, 1.75rem);
      --tw-leading: 1.3;
      line-height: 1.3;
    }
    :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-right: 0;
      margin-bottom: calc(var(--spacing) * 3);
      margin-left: 0;
      text-align: left;
      font-family: Jost;
      font-size: 1.12rem;
      line-height: var(--tw-leading, 1.75rem);
      --tw-leading: 1.3;
      line-height: 1.3;
      a {
        color: var(--color-brand-600);
        text-decoration-line: underline;
        &:hover {
          color: var(--color-brand-900);
          text-decoration-line: underline;
        }
        &:visited {
          color: var(--color-brand-800);
          text-decoration-line: underline;
        }
      }
    }
    :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-position: inside;
      list-style-type: disc;
      padding-left: calc(var(--spacing) * 6);
      font-family: Jost;
      font-size: 1.12rem;
      line-height: var(--tw-leading, 1.75rem);
      --tw-leading: 1.3;
      line-height: 1.3;
    }
  }
  .mt-0 {
    margin-top: 0;
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mr-0 {
    margin-right: 0;
  }
  .mr-auto {
    margin-right: auto;
  }
  .-mb-1 {
    margin-bottom: calc(var(--spacing) * -1);
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-28 {
    margin-bottom: calc(var(--spacing) * 28);
  }
  .ml-0 {
    margin-left: 0;
  }
  .ml-1 {
    margin-left: var(--spacing);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .aspect-\[1\.343815565109253\] {
    aspect-ratio: 1.343815565109253;
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-\[94vh\] {
    height: 94vh;
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-screen {
    height: 100vh;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-\[24rem\] {
    width: 24rem;
  }
  .w-\[44px\] {
    width: 44px;
  }
  .w-\[360x\] {
    width: 360x;
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .max-w-\[80ch\] {
    max-width: 80ch;
  }
  .max-w-\[100\%\] {
    max-width: 100%;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .origin-center {
    transform-origin: center;
  }
  .origin-top {
    transform-origin: top;
  }
  .translate-x-0 {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[0px\] {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-3 {
    --tw-translate-y: calc(var(--spacing) * -3);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-20 {
    --tw-translate-y: calc(var(--spacing) * 20);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-\[0px\] {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-x-\[100\%\] {
    --tw-scale-x: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-y-\[100\%\] {
    --tw-scale-y: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[0deg\] {
    rotate: 0deg;
  }
  .skew-x-\[-20deg\] {
    --tw-skew-x: skewX(-20deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .skew-x-\[0deg\] {
    --tw-skew-x: skewX(0deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .skew-y-\[0deg\] {
    --tw-skew-y: skewY(0deg);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .transform-gpu {
    transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-auto {
    cursor: auto;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-flow-row {
    grid-auto-flow: row;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .content-center {
    align-content: center;
  }
  .content-normal {
    align-content: normal;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-normal {
    justify-content: normal;
  }
  .justify-items-center {
    justify-items: center;
  }
  .justify-items-end {
    justify-items: end;
  }
  .justify-items-normal {
    justify-items: normal;
  }
  .gap-0 {
    gap: 0;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }
  .gap-x-0 {
    column-gap: 0;
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-0 {
    row-gap: 0;
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .self-center {
    align-self: center;
  }
  .self-start {
    align-self: flex-start;
  }
  .justify-self-center {
    justify-self: center;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .rounded-md {
    border-radius: 0.375rem;
  }
  .rounded-tl {
    border-top-left-radius: 0.24rem;
  }
  .rounded-tl-2xl {
    border-top-left-radius: 1.0rem;
  }
  .rounded-tl-full {
    border-top-left-radius: 36.0rem;
  }
  .rounded-tl-md {
    border-top-left-radius: 0.375rem;
  }
  .rounded-tl-none {
    border-top-left-radius: 0.0rem;
  }
  .rounded-tr {
    border-top-right-radius: 0.24rem;
  }
  .rounded-tr-2xl {
    border-top-right-radius: 1.0rem;
  }
  .rounded-tr-full {
    border-top-right-radius: 36.0rem;
  }
  .rounded-tr-md {
    border-top-right-radius: 0.375rem;
  }
  .rounded-tr-none {
    border-top-right-radius: 0.0rem;
  }
  .rounded-br {
    border-bottom-right-radius: 0.24rem;
  }
  .rounded-br-2xl {
    border-bottom-right-radius: 1.0rem;
  }
  .rounded-br-full {
    border-bottom-right-radius: 36.0rem;
  }
  .rounded-br-md {
    border-bottom-right-radius: 0.375rem;
  }
  .rounded-br-none {
    border-bottom-right-radius: 0.0rem;
  }
  .rounded-bl {
    border-bottom-left-radius: 0.24rem;
  }
  .rounded-bl-2xl {
    border-bottom-left-radius: 1.0rem;
  }
  .rounded-bl-full {
    border-bottom-left-radius: 36.0rem;
  }
  .rounded-bl-md {
    border-bottom-left-radius: 0.375rem;
  }
  .rounded-bl-none {
    border-bottom-left-radius: 0.0rem;
  }
  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0.0rem;
  }
  .border-t-1 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0.06rem;
  }
  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0.125rem;
  }
  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0.0rem;
  }
  .border-r-1 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0.06rem;
  }
  .border-r-2 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0.125rem;
  }
  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0.0rem;
  }
  .border-b-1 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0.06rem;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0.125rem;
  }
  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0.0rem;
  }
  .border-l-1 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0.06rem;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0.125rem;
  }
  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }
  .border-brand-500\/\[100\%\] {
    border-color: var(--color-brand-500);
  }
  .border-surface-200 {
    border-color: var(--color-surface-200);
  }
  .border-surface-400 {
    border-color: var(--color-surface-400);
  }
  .border-surface-400\/\[100\%\] {
    border-color: var(--color-surface-400);
  }
  .border-surface-500\/\[100\%\] {
    border-color: var(--color-surface-500);
  }
  .border-surface-600\/\(--border-opacity\) {
    border-color: #505c69;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-surface-600) var(--border-opacity), transparent);
    }
  }
  .border-surface-900 {
    border-color: var(--color-surface-900);
  }
  .border-surface-900\/\[100\%\] {
    border-color: var(--color-surface-900);
  }
  .bg-black\/25 {
    background-color: color-mix(in srgb, #000000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
  }
  .bg-brand-500\/\(--bgColorOpacity\) {
    background-color: #3892f8;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand-500) var(--bgColorOpacity), transparent);
    }
  }
  .bg-brand-800\/\(--bgColorOpacity\) {
    background-color: #2f4f4f;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand-800) var(--bgColorOpacity), transparent);
    }
  }
  .bg-brand-900\/\(--bgColorOpacity\) {
    background-color: #94112a;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-brand-900) var(--bgColorOpacity), transparent);
    }
  }
  .bg-surface-50 {
    background-color: var(--color-surface-50);
  }
  .bg-surface-50\/\(--overlayColorOpacity\) {
    background-color: #f3f6f7;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-surface-50) var(--overlayColorOpacity), transparent);
    }
  }
  .bg-surface-50\/\[0\%\] {
    background-color: color-mix(in srgb, #f3f6f7 0%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-surface-50) 0%, transparent);
    }
  }
  .bg-surface-100 {
    background-color: var(--color-surface-100);
  }
  .bg-surface-100\/\(--bgColorOpacity\) {
    background-color: #e3e6ea;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-surface-100) var(--bgColorOpacity), transparent);
    }
  }
  .bg-surface-100\/\(--mobile-menu-bg-opacity\) {
    background-color: #e3e6ea;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-surface-100) var(--mobile-menu-bg-opacity), transparent);
    }
  }
  .bg-surface-200\/\(--bgColorOpacity\) {
    background-color: #cad1d7;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-surface-200) var(--bgColorOpacity), transparent);
    }
  }
  .bg-surface-700\/\(--bg-opacity\) {
    background-color: #454e59;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-surface-700) var(--bg-opacity), transparent);
    }
  }
  .bg-surface-900\/\(--mobile-backdrop-bg-opacity\) {
    background-color: #33373e;
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-surface-900) var(--mobile-backdrop-bg-opacity), transparent);
    }
  }
  .bg-\[url\(\.\.\/resources\/home_images\/bible-banner-2\.jpg\)\] {
    background-image: url(../resources/home_images/bible-banner-2.jpg);
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-center {
    background-position: center;
  }
  .bg-no-repeat {
    background-repeat: no-repeat;
  }
  .fill-brand-600\/\(--svgOpacity\) {
    fill: #797979;
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-brand-600) var(--svgOpacity), transparent);
    }
  }
  .fill-brand-800\/\(--svgOpacity\) {
    fill: #2f4f4f;
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-brand-800) var(--svgOpacity), transparent);
    }
  }
  .fill-surface-900\/\(--svgOpacity\) {
    fill: #33373e;
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-surface-900) var(--svgOpacity), transparent);
    }
  }
  .fill-text-400\/\(--svgOpacity\) {
    fill: #5d5d5d;
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-text-400) var(--svgOpacity), transparent);
    }
  }
  .fill-text-900\/\(--svgOpacity\) {
    fill: #e7e7e7;
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-text-900) var(--svgOpacity), transparent);
    }
  }
  .fill-white-50\/\(--svgOpacity\) {
    fill: #ffffff;
    @supports (color: color-mix(in lab, red, red)) {
      fill: color-mix(in oklab, var(--color-white-50) var(--svgOpacity), transparent);
    }
  }
  .object-center {
    object-position: center;
  }
  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .pt-0 {
    padding-top: 0;
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pr-0 {
    padding-right: 0;
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-3\.5 {
    padding-right: calc(var(--spacing) * 3.5);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }
  .pb-0 {
    padding-bottom: 0;
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pl-0 {
    padding-left: 0;
  }
  .pl-1 {
    padding-left: var(--spacing);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-20 {
    padding-left: calc(var(--spacing) * 20);
  }
  .text-center {
    text-align: center;
  }
  .text-justify {
    text-align: justify;
  }
  .text-left {
    text-align: left;
  }
  .text-start {
    text-align: start;
  }
  .font-body {
    font-family: Jost;
  }
  .font-heading {
    font-family: Lora;
  }
  .text-2xl {
    font-size: 1.50rem;
    line-height: var(--tw-leading, 2.00rem);
  }
  .text-base {
    font-size: 1.00rem;
    line-height: var(--tw-leading, 1.50rem);
  }
  .text-lg {
    font-size: 1.12rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .text-sm {
    font-size: 0.88rem;
    line-height: var(--tw-leading, 1.25rem);
  }
  .text-xl {
    font-size: 1.25rem;
    line-height: var(--tw-leading, 1.75rem);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .font-\[400\] {
    --tw-font-weight: 400;
    font-weight: 400;
  }
  .font-\[500\] {
    --tw-font-weight: 500;
    font-weight: 500;
  }
  .font-\[600\] {
    --tw-font-weight: 600;
    font-weight: 600;
  }
  .font-\[700\] {
    --tw-font-weight: 700;
    font-weight: 700;
  }
  .font-\[800\] {
    --tw-font-weight: 800;
    font-weight: 800;
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-brand-600 {
    color: var(--color-brand-600);
  }
  .text-brand-600\/\(--svgOpacity\) {
    color: #797979;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-brand-600) var(--svgOpacity), transparent);
    }
  }
  .text-brand-800 {
    color: var(--color-brand-800);
  }
  .text-brand-800\/\(--svgOpacity\) {
    color: #2f4f4f;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-brand-800) var(--svgOpacity), transparent);
    }
  }
  .text-brand-800\/\(--textColorOpacity\) {
    color: #2f4f4f;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-brand-800) var(--textColorOpacity), transparent);
    }
  }
  .text-brand-900 {
    color: var(--color-brand-900);
  }
  .text-brand-900\/\(--nav-item-text-opacity\) {
    color: #94112a;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-brand-900) var(--nav-item-text-opacity), transparent);
    }
  }
  .text-brand-900\/\(--text-opacity\) {
    color: #94112a;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-brand-900) var(--text-opacity), transparent);
    }
  }
  .text-brand-900\/\(--textColorOpacity\) {
    color: #94112a;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-brand-900) var(--textColorOpacity), transparent);
    }
  }
  .text-surface-50\/\(--buttonFontAndTextStylesColorOpacity\) {
    color: #f3f6f7;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-surface-50) var(--buttonFontAndTextStylesColorOpacity), transparent);
    }
  }
  .text-surface-400 {
    color: var(--color-surface-400);
  }
  .text-surface-900\/\(--svgOpacity\) {
    color: #33373e;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-surface-900) var(--svgOpacity), transparent);
    }
  }
  .text-text-50 {
    color: var(--color-text-50);
  }
  .text-text-50\/\(--buttonFontAndTextStylesColorOpacity\) {
    color: #000000;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-text-50) var(--buttonFontAndTextStylesColorOpacity), transparent);
    }
  }
  .text-text-50\/\(--inputFontAndTextStylesColorOpacity\) {
    color: #000000;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-text-50) var(--inputFontAndTextStylesColorOpacity), transparent);
    }
  }
  .text-text-50\/\(--textColorOpacity\) {
    color: #000000;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-text-50) var(--textColorOpacity), transparent);
    }
  }
  .text-text-100 {
    color: var(--color-text-100);
  }
  .text-text-100\/\(--textColorOpacity\) {
    color: #3c3c3c;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-text-100) var(--textColorOpacity), transparent);
    }
  }
  .text-text-400\/\(--svgOpacity\) {
    color: #5d5d5d;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-text-400) var(--svgOpacity), transparent);
    }
  }
  .text-text-400\/\(--textColorOpacity\) {
    color: #5d5d5d;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-text-400) var(--textColorOpacity), transparent);
    }
  }
  .text-text-700 {
    color: var(--color-text-700);
  }
  .text-text-900 {
    color: var(--color-text-900);
  }
  .text-text-900\/\(--buttonFontAndTextStylesColorOpacity\) {
    color: #e7e7e7;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-text-900) var(--buttonFontAndTextStylesColorOpacity), transparent);
    }
  }
  .text-text-900\/\(--svgOpacity\) {
    color: #e7e7e7;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-text-900) var(--svgOpacity), transparent);
    }
  }
  .text-white-50\/\(--svgOpacity\) {
    color: #ffffff;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white-50) var(--svgOpacity), transparent);
    }
  }
  .normal-case {
    text-transform: none;
  }
  .not-italic {
    font-style: normal;
  }
  .placeholder-text-100 {
    &::placeholder {
      color: var(--color-text-100);
    }
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .opacity-\[100\%\] {
    opacity: 100%;
  }
  .mix-blend-normal {
    mix-blend-mode: normal;
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 3px 3px 5px 0px var(--tw-shadow-color, rgba(0,0,0,0.30));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 7px 7px 4px 0px var(--tw-shadow-color, rgba(0,0,0,0.30));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-zinc-900\/5 {
    --tw-ring-color: color-mix(in srgb, #18181b 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 5%, transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-\[1px\] {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-offset-\[0px\] {
    outline-offset: 0px;
  }
  .outline-surface-300\/\[100\%\] {
    outline-color: var(--color-surface-300);
  }
  .backdrop-blur-\[0px\] {
    --tw-backdrop-blur: blur(0px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-none {
    --tw-backdrop-blur:  ;
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-none {
    transition-property: none;
  }
  .delay-\[0ms\] {
    transition-delay: 0ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-\[300ms\] {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .\[--bg-opacity\:100\%\] {
    --bg-opacity: 100%;
  }
  .\[--bgColorOpacity\:100\%\] {
    --bgColorOpacity: 100%;
  }
  .\[--border-opacity\:95\%\] {
    --border-opacity: 95%;
  }
  .\[--box-shadow-opacity\:100\%\] {
    --box-shadow-opacity: 100%;
  }
  .\[--buttonFontAndTextStylesColorOpacity\:100\%\] {
    --buttonFontAndTextStylesColorOpacity: 100%;
  }
  .\[--inputFontAndTextStylesColorOpacity\:100\%\] {
    --inputFontAndTextStylesColorOpacity: 100%;
  }
  .\[--mobile-backdrop-bg-opacity\:20\%\] {
    --mobile-backdrop-bg-opacity: 20%;
  }
  .\[--mobile-menu-bg-opacity\:100\%\] {
    --mobile-menu-bg-opacity: 100%;
  }
  .\[--nav-item-text-opacity\:100\%\] {
    --nav-item-text-opacity: 100%;
  }
  .\[--overlayColorOpacity\:30\%\] {
    --overlayColorOpacity: 30%;
  }
  .\[--svgOpacity\:100\%\] {
    --svgOpacity: 100%;
  }
  .\[--text-opacity\:100\%\] {
    --text-opacity: 100%;
  }
  .\[--textColorOpacity\:100\%\] {
    --textColorOpacity: 100%;
  }
  .text-shadow-none {
    text-shadow: none;
  }
  .text-shadow-sm {
    text-shadow: 3px 3px 5px var(--tw-text-shadow-color, rgba(0,0,0,0.30));
  }
  .hover\:translate-x-\[0px\] {
    &:hover {
      @media (hover: hover) {
        --tw-translate-x: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:translate-y-\[0px\] {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-x-\[100\%\] {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-x-\[130\%\] {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 130%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-y-\[100\%\] {
    &:hover {
      @media (hover: hover) {
        --tw-scale-y: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-y-\[130\%\] {
    &:hover {
      @media (hover: hover) {
        --tw-scale-y: 130%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-\[100\%\] {
    &:hover {
      @media (hover: hover) {
        scale: 100%;
      }
    }
  }
  .hover\:rotate-\[0deg\] {
    &:hover {
      @media (hover: hover) {
        rotate: 0deg;
      }
    }
  }
  .hover\:skew-x-\[0deg\] {
    &:hover {
      @media (hover: hover) {
        --tw-skew-x: skewX(0deg);
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
      }
    }
  }
  .hover\:skew-y-\[0deg\] {
    &:hover {
      @media (hover: hover) {
        --tw-skew-y: skewY(0deg);
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
      }
    }
  }
  .hover\:rounded-tl {
    &:hover {
      @media (hover: hover) {
        border-top-left-radius: 0.24rem;
      }
    }
  }
  .hover\:rounded-tr {
    &:hover {
      @media (hover: hover) {
        border-top-right-radius: 0.24rem;
      }
    }
  }
  .hover\:rounded-br {
    &:hover {
      @media (hover: hover) {
        border-bottom-right-radius: 0.24rem;
      }
    }
  }
  .hover\:rounded-bl {
    &:hover {
      @media (hover: hover) {
        border-bottom-left-radius: 0.24rem;
      }
    }
  }
  .hover\:border-solid {
    &:hover {
      @media (hover: hover) {
        --tw-border-style: solid;
        border-style: solid;
      }
    }
  }
  .hover\:border-brand-700\/\[100\%\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-brand-700);
      }
    }
  }
  .hover\:border-surface-700\/\(--border-opacity\) {
    &:hover {
      @media (hover: hover) {
        border-color: #454e59;
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-surface-700) var(--border-opacity), transparent);
        }
      }
    }
  }
  .hover\:bg-brand-700\/\(--bgColorOpacityEnd\) {
    &:hover {
      @media (hover: hover) {
        background-color: #50c878;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-brand-700) var(--bgColorOpacityEnd), transparent);
        }
      }
    }
  }
  .hover\:bg-brand-800\/\(--bgColorOpacityEnd\) {
    &:hover {
      @media (hover: hover) {
        background-color: #2f4f4f;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-brand-800) var(--bgColorOpacityEnd), transparent);
        }
      }
    }
  }
  .hover\:bg-surface-200\/\(--bgColorOpacityEnd\) {
    &:hover {
      @media (hover: hover) {
        background-color: #cad1d7;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-surface-200) var(--bgColorOpacityEnd), transparent);
        }
      }
    }
  }
  .hover\:bg-surface-800\/\(--bg-opacity\) {
    &:hover {
      @media (hover: hover) {
        background-color: #3e444c;
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-surface-800) var(--bg-opacity), transparent);
        }
      }
    }
  }
  .hover\:fill-brand-500\/\(--svgOpacity\) {
    &:hover {
      @media (hover: hover) {
        fill: #3892f8;
        @supports (color: color-mix(in lab, red, red)) {
          fill: color-mix(in oklab, var(--color-brand-500) var(--svgOpacity), transparent);
        }
      }
    }
  }
  .hover\:fill-surface-50\/\(--svgOpacity\) {
    &:hover {
      @media (hover: hover) {
        fill: #f3f6f7;
        @supports (color: color-mix(in lab, red, red)) {
          fill: color-mix(in oklab, var(--color-surface-50) var(--svgOpacity), transparent);
        }
      }
    }
  }
  .hover\:fill-surface-600\/\(--svgOpacity\) {
    &:hover {
      @media (hover: hover) {
        fill: #505c69;
        @supports (color: color-mix(in lab, red, red)) {
          fill: color-mix(in oklab, var(--color-surface-600) var(--svgOpacity), transparent);
        }
      }
    }
  }
  .hover\:text-brand-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-brand-500);
      }
    }
  }
  .hover\:text-brand-500\/\(--svgOpacity\) {
    &:hover {
      @media (hover: hover) {
        color: #3892f8;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-brand-500) var(--svgOpacity), transparent);
        }
      }
    }
  }
  .hover\:text-brand-800\/\(--nav-item-text-opacity\) {
    &:hover {
      @media (hover: hover) {
        color: #2f4f4f;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-brand-800) var(--nav-item-text-opacity), transparent);
        }
      }
    }
  }
  .hover\:text-brand-800\/\(--text-opacity\) {
    &:hover {
      @media (hover: hover) {
        color: #2f4f4f;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-brand-800) var(--text-opacity), transparent);
        }
      }
    }
  }
  .hover\:text-surface-50\/\(--buttonFontAndTextStylesColorOpacityHover\) {
    &:hover {
      @media (hover: hover) {
        color: #f3f6f7;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-surface-50) var(--buttonFontAndTextStylesColorOpacityHover), transparent);
        }
      }
    }
  }
  .hover\:text-surface-50\/\(--svgOpacity\) {
    &:hover {
      @media (hover: hover) {
        color: #f3f6f7;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-surface-50) var(--svgOpacity), transparent);
        }
      }
    }
  }
  .hover\:text-surface-600\/\(--svgOpacity\) {
    &:hover {
      @media (hover: hover) {
        color: #505c69;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-surface-600) var(--svgOpacity), transparent);
        }
      }
    }
  }
  .hover\:text-text-50 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-text-50);
      }
    }
  }
  .hover\:text-text-50\/\(--buttonFontAndTextStylesColorOpacityHover\) {
    &:hover {
      @media (hover: hover) {
        color: #000000;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-text-50) var(--buttonFontAndTextStylesColorOpacityHover), transparent);
        }
      }
    }
  }
  .hover\:text-text-900\/\(--buttonFontAndTextStylesColorOpacityHover\) {
    &:hover {
      @media (hover: hover) {
        color: #e7e7e7;
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-text-900) var(--buttonFontAndTextStylesColorOpacityHover), transparent);
        }
      }
    }
  }
  .hover\:transition-all {
    &:hover {
      @media (hover: hover) {
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
      }
    }
  }
  .hover\:\[--bg-opacity\:100\%\] {
    &:hover {
      @media (hover: hover) {
        --bg-opacity: 100%;
      }
    }
  }
  .hover\:\[--bgColorOpacityEnd\:100\%\] {
    &:hover {
      @media (hover: hover) {
        --bgColorOpacityEnd: 100%;
      }
    }
  }
  .hover\:\[--border-opacity\:95\%\] {
    &:hover {
      @media (hover: hover) {
        --border-opacity: 95%;
      }
    }
  }
  .hover\:\[--buttonFontAndTextStylesColorOpacityHover\:100\%\] {
    &:hover {
      @media (hover: hover) {
        --buttonFontAndTextStylesColorOpacityHover: 100%;
      }
    }
  }
  .hover\:\[--nav-item-text-opacity\:100\%\] {
    &:hover {
      @media (hover: hover) {
        --nav-item-text-opacity: 100%;
      }
    }
  }
  .hover\:\[--svgOpacity\:100\%\] {
    &:hover {
      @media (hover: hover) {
        --svgOpacity: 100%;
      }
    }
  }
  .hover\:\[--text-opacity\:100\%\] {
    &:hover {
      @media (hover: hover) {
        --text-opacity: 100%;
      }
    }
  }
  .hover\:text-shadow-md {
    &:hover {
      @media (hover: hover) {
        text-shadow: 4px 4px 6px var(--tw-text-shadow-color, rgba(0,0,0,0.30));
      }
    }
  }
  .hover\:text-shadow-none {
    &:hover {
      @media (hover: hover) {
        text-shadow: none;
      }
    }
  }
  .focus\:border-solid {
    &:focus {
      --tw-border-style: solid;
      border-style: solid;
    }
  }
  .focus\:border-surface-900\/\[100\%\] {
    &:focus {
      border-color: var(--color-surface-900);
    }
  }
  .focus\:ring-0 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .aria-\[current\=page\]\:text-brand-800\/\(--nav-item-text-opacity\) {
    &[aria-current="page"] {
      color: #2f4f4f;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-brand-800) var(--nav-item-text-opacity), transparent);
      }
    }
  }
  .aria-\[current\=page\]\:text-brand-800\/\(--text-opacity\) {
    &[aria-current="page"] {
      color: #2f4f4f;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-brand-800) var(--text-opacity), transparent);
      }
    }
  }
  .aria-\[current\=page\]\:\[--nav-item-text-opacity\:100\%\] {
    &[aria-current="page"] {
      --nav-item-text-opacity: 100%;
    }
  }
  .aria-\[current\=page\]\:\[--text-opacity\:100\%\] {
    &[aria-current="page"] {
      --text-opacity: 100%;
    }
  }
  .aria-\[current\=page\]\:text-shadow-none {
    &[aria-current="page"] {
      text-shadow: none;
    }
  }
  .data-\[active-child\]\:text-brand-800\/\(--nav-item-text-opacity\) {
    &[data-active-child] {
      color: #2f4f4f;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-brand-800) var(--nav-item-text-opacity), transparent);
      }
    }
  }
  .data-\[active-child\]\:\[--nav-item-text-opacity\:100\%\] {
    &[data-active-child] {
      --nav-item-text-opacity: 100%;
    }
  }
  .data-\[active-child\]\:text-shadow-none {
    &[data-active-child] {
      text-shadow: none;
    }
  }
  .sm\:w-96 {
    @media (width >= 640px) {
      width: calc(var(--spacing) * 96);
    }
  }
  .sm\:flex-col {
    @media (width >= 640px) {
      flex-direction: column;
    }
  }
  .sm\:justify-between {
    @media (width >= 640px) {
      justify-content: space-between;
    }
  }
  .sm\:text-2xl {
    @media (width >= 640px) {
      font-size: 1.50rem;
      line-height: var(--tw-leading, 2.00rem);
    }
  }
  .sm\:text-3xl {
    @media (width >= 640px) {
      font-size: 1.88rem;
      line-height: var(--tw-leading, 2.25rem);
    }
  }
  .md\:mt-0 {
    @media (width >= 768px) {
      margin-top: 0;
    }
  }
  .md\:mr-0 {
    @media (width >= 768px) {
      margin-right: 0;
    }
  }
  .md\:mb-24 {
    @media (width >= 768px) {
      margin-bottom: calc(var(--spacing) * 24);
    }
  }
  .md\:ml-0 {
    @media (width >= 768px) {
      margin-left: 0;
    }
  }
  .md\:w-36 {
    @media (width >= 768px) {
      width: calc(var(--spacing) * 36);
    }
  }
  .md\:gap-y-2 {
    @media (width >= 768px) {
      row-gap: calc(var(--spacing) * 2);
    }
  }
  .md\:text-center {
    @media (width >= 768px) {
      text-align: center;
    }
  }
  .md\:text-2xl {
    @media (width >= 768px) {
      font-size: 1.50rem;
      line-height: var(--tw-leading, 2.00rem);
    }
  }
  .md\:text-3xl {
    @media (width >= 768px) {
      font-size: 1.88rem;
      line-height: var(--tw-leading, 2.25rem);
    }
  }
  .md\:text-4xl {
    @media (width >= 768px) {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.50rem);
    }
  }
  .lg\:flex {
    @media (width >= 1024px) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 1024px) {
      display: none;
    }
  }
  .lg\:w-56 {
    @media (width >= 1024px) {
      width: calc(var(--spacing) * 56);
    }
  }
  .lg\:flex-1 {
    @media (width >= 1024px) {
      flex: 1;
    }
  }
  .lg\:justify-end {
    @media (width >= 1024px) {
      justify-content: flex-end;
    }
  }
  .lg\:text-3xl {
    @media (width >= 1024px) {
      font-size: 1.88rem;
      line-height: var(--tw-leading, 2.25rem);
    }
  }
  .lg\:text-4xl {
    @media (width >= 1024px) {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.50rem);
    }
  }
  .lg\:text-5xl {
    @media (width >= 1024px) {
      font-size: 3.00rem;
      line-height: var(--tw-leading, 3.50rem);
    }
  }
  .xl\:mt-0 {
    @media (width >= 1280px) {
      margin-top: 0;
    }
  }
  .xl\:mr-0 {
    @media (width >= 1280px) {
      margin-right: 0;
    }
  }
  .xl\:mb-28 {
    @media (width >= 1280px) {
      margin-bottom: calc(var(--spacing) * 28);
    }
  }
  .xl\:ml-0 {
    @media (width >= 1280px) {
      margin-left: 0;
    }
  }
  .xl\:w-64 {
    @media (width >= 1280px) {
      width: calc(var(--spacing) * 64);
    }
  }
  .xl\:flex-col {
    @media (width >= 1280px) {
      flex-direction: column;
    }
  }
  .xl\:text-4xl {
    @media (width >= 1280px) {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.50rem);
    }
  }
  .xl\:text-5xl {
    @media (width >= 1280px) {
      font-size: 3.00rem;
      line-height: var(--tw-leading, 3.50rem);
    }
  }
  .xl\:text-6xl {
    @media (width >= 1280px) {
      font-size: 3.75rem;
      line-height: var(--tw-leading, 4.50rem);
    }
  }
  .\32 xl\:w-\[420px\] {
    @media (width >= 1536px) {
      width: 420px;
    }
  }
  .\32 xl\:text-4xl {
    @media (width >= 1536px) {
      font-size: 2.25rem;
      line-height: var(--tw-leading, 2.50rem);
    }
  }
  .\32 xl\:text-6xl {
    @media (width >= 1536px) {
      font-size: 3.75rem;
      line-height: var(--tw-leading, 4.50rem);
    }
  }
  .\[\&_a\]\:font-\[400\] {
    & a {
      --tw-font-weight: 400;
      font-weight: 400;
    }
  }
  .\[\&_a\]\:text-brand-500 {
    & a {
      color: var(--color-brand-500);
    }
  }
  .\[\&_a\]\:no-underline {
    & a {
      text-decoration-line: none;
    }
  }
  .\[\&_a\:hover\]\:font-\[400\] {
    & a:hover {
      --tw-font-weight: 400;
      font-weight: 400;
    }
  }
  .\[\&_a\:hover\]\:text-brand-800 {
    & a:hover {
      color: var(--color-brand-800);
    }
  }
  .\[\&_a\:hover\]\:no-underline {
    & a:hover {
      text-decoration-line: none;
    }
  }
  .\[\&_a\:visited\]\:font-\[400\] {
    & a:visited {
      --tw-font-weight: 400;
      font-weight: 400;
    }
  }
  .\[\&_a\:visited\]\:text-brand-800 {
    & a:visited {
      color: var(--color-brand-800);
    }
  }
  .\[\&_a\:visited\]\:no-underline {
    & a:visited {
      text-decoration-line: none;
    }
  }
  .\[\&\>\*\]\:col-start-1 {
    &>* {
      grid-column-start: 1;
    }
  }
  .\[\&\>\*\]\:row-start-1 {
    &>* {
      grid-row-start: 1;
    }
  }
  .\[\&\>\*\]\:min-w-0 {
    &>* {
      min-width: 0;
    }
  }
}
@layer base {
  [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
    appearance: none;
    background-color: #fff;
    border-color: #6a7282;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000;
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-color: #155dfc;
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      border-color: #155dfc;
    }
  }
  input::placeholder,textarea::placeholder {
    color: #6a7282;
    opacity: 1;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-date-and-time-value {
    min-height: 1.5em;
  }
  ::-webkit-date-and-time-value {
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
    padding-top: 0;
    padding-bottom: 0;
  }
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236a7282' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }
  [multiple],[size]:where(select:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
    background-size: initial;
    padding-right: 0.75rem;
    print-color-adjust: unset;
  }
  [type='checkbox'],[type='radio'] {
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #155dfc;
    background-color: #fff;
    border-color: #6a7282;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
  }
  [type='checkbox'] {
    border-radius: 0px;
  }
  [type='radio'] {
    border-radius: 100%;
  }
  [type='checkbox']:focus,[type='radio']:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #155dfc;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  [type='checkbox']:checked,[type='radio']:checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  [type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  [type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  [type='checkbox']:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
  [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
  }
  [type='file'] {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit;
  }
  [type='file']:focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
  }
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-text-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-text-shadow-color: initial;
      --tw-text-shadow-alpha: 100%;
    }
  }
}

.container{max-width:100%;}
@media (min-width: 640px){.container{max-width:640px}}
@media (min-width: 768px){.container{max-width:768px}}
@media (min-width: 1024px){.container{max-width:1024px}}
@media (min-width: 1280px){.container{max-width:1280px}}
@media (min-width: 1536px){.container{max-width:1536px}}[data-rwx-droparea] {
    width: auto !important;
}
/* [data-rwx-droparea] {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
} */
/* Members Only — LAYOUT ONLY.
 * Elements emits Tailwind utilities inside @layer utilities; this file is UNLAYERED and so beats
 * them regardless of specificity. Never name a property a native control governs (fill, border,
 * radius, padding, margin, type) for an element carrying that control classes. */
.fpm-denied { border-width: 1px; border-style: solid; border-radius: 8px; }
.fpm-denied .fpm-msg { margin: 0; }
.fpm-denied p + p { margin-top: .5rem; }
.fpm-login-link { text-decoration: underline; }
/* .fpm-diag removed 2026-07-20 — the on-page store diagnostic disclosed the absolute store path
   to anonymous visitors. It now goes to error_log as [fp-members]; no element carries this class. */
.fpm-editnote { display: inline-flex; align-items: center; gap: .45em; margin-bottom: .75rem; padding: .4em .7em;
  font-size: 12px; color: #6b7280; border: 1px dashed #cbd5e1; border-radius: 6px; background: rgba(148,163,184,.08); }
.fpm-editnote svg { flex: 0 0 auto; opacity: .8; }
/* Member Logout — LAYOUT ONLY.
 * Elements emits Tailwind utilities inside @layer utilities; this file is UNLAYERED and so beats
 * them regardless of specificity. Never name a property a native control governs (fill, border,
 * radius, padding, margin, type) for an element carrying that control classes. */
/* A COLUMN: button first, email underneath.
 *
 * It was a horizontal row, which made centring ill-defined — with the email pinned to the left,
 * the button could only centre in whatever space was left over (measured 359/178 rather than
 * 269/269). Stacking removes the conflict: the button well spans the full width whether the email
 * is shown or not, so the dropped Button's own auto margins centre it identically either way.
 * Measured in a 600px box, button offsets are 269/269 with the email BOTH on and off.
 *
 * Column also means align-items defaults to `stretch`, which is what makes the well full-width —
 * no `flex: 1` needed, and none wanted, since in a column that would stretch it VERTICALLY. */
.fpm-logout-row { display: flex; flex-direction: column; gap: .4rem; }
/* .fpm-submit removed 2026-07-20 — there is no built-in button any more. The sign-out button is a
   stock Elements Button dropped into the well, and it brings its own cursor and every other
   property with it. */
/* NO `opacity: .8` here any more. It was a hardcoded dim to make the email read as secondary text,
   which was harmless while nothing controlled its colour — but the Email Text group now has a real
   Color picker, and a fixed 80% would render every colour the user chooses slightly wrong with no
   control to explain it. Same principle as never restating a property a native control governs:
   pick the default in the control, not in unlayered CSS. */
.fpm-who { }
.fpm-editnote { display: inline-flex; align-items: center; gap: .45em; margin-bottom: .75rem; padding: .4em .7em;
  font-size: 12px; color: #6b7280; border: 1px dashed #cbd5e1; border-radius: 6px; background: rgba(148,163,184,.08); }
.fpm-editnote svg { flex: 0 0 auto; opacity: .8; }

/* Bring-your-own-button well. MUST BE FULL WIDTH.
 *
 * It was `display: inline-block`, which shrink-wraps — so the dropped Button had no free space
 * inside it and its own auto margins did nothing. Widening the ROW alone did not help, because
 * the flex child is this wrapper, not the Button: the trap merely moved a level down. Measured
 * in a 600px row, button offsets: inline-block 0/537 (never centres), stretched 269/269.
 *
 * GENERAL RULE: every box between the layout box and the dropped component must be full width,
 * or the component's own Spacing control cannot position it. One shrink-wrapping wrapper anywhere
 * in the chain is enough to break it.
 *
 * Only the stretch is named here — never a property the dropped component's own controls govern. */
.fpm-byob { align-self: stretch; }

/* EMAIL ADDRESSES MUST BE ABLE TO BREAK.
 *
 * Measured 2026-07-21 in a 320px container: a 53-character address with no hyphen in it —
 * christopherwentworthfitzgerald@verylongdomainname.org — overflowed by 106px and forced the whole
 * page to scroll sideways. Addresses WITH a hyphen happen to survive, because browsers already
 * treat "-" as a break opportunity, which is exactly why this is easy to miss in casual testing.
 * overflow-wrap:anywhere fixed it at every width tried.
 *
 * No control governs overflow-wrap, so declaring it here competes with nothing. */
.fpm-who { overflow-wrap: anywhere; }
/* Member Admin — LAYOUT ONLY.
 * Elements emits Tailwind utilities inside @layer utilities; this file is UNLAYERED and therefore
 * beats them regardless of specificity. Measured live: w-12 alone = 48px, w-12 plus a
 * :where(.fpr-icon){width:16px} "floor" = 16px. A floor is an override, not a fallback.
 * So: never name a property a native control governs for an element carrying that control's
 * classes — no colour, fill, border, radius, padding, margin or font here for those elements.
 * If Preview and the published page ever disagree on styling, that is a bug signal: it means this
 * file is competing with a control. */

.fpma-table { width: 100%; border-collapse: collapse; }
.fpma-table th { text-align: left; font-weight: 600; }
/* Row rule colour comes from the Table palette (rowBorderColor) as a border-COLOR utility; only
   the width and style are set here, which no control emits for this element. */
.fpma-row { border-bottom-width: 1px; border-bottom-style: solid; }

/* NO `white-space: nowrap` here any more.
 *
 * It was the single largest cause of the table overflowing. Measured: the Actions column alone was
 * 382px of a 765px minimum table width, because nowrap forbade the five action links from wrapping.
 * Letting them wrap drops the table's true minimum to 406px, so it fits from about 480px up —
 * which is what makes a phones-only card layout sufficient rather than needing one on tablets too. */
.fpma-actions { }
.fpma-actform { display: inline; }
.fpma-act { background: none; border: 0; cursor: pointer; text-decoration: underline; }
.fpma-act + .fpma-act, .fpma-actform + .fpma-actform .fpma-act { margin-left: .5rem; }
.fpma-act-danger { text-decoration-style: dotted; }

.fpma-you { opacity: .6; font-size: .85em; }
.fpma-none { opacity: .4; }

/* The "why they are asking" row. It sits directly under its own account row, so its top border is
   removed to read as a continuation of that row rather than as a separate record — otherwise the
   card appears to be two people. The label stacks above the prose because the text runs long.
   No colour, fill or padding here: cell padding is the Table control's, and the row rule colour is
   border-surface-200 on the element itself. */
.fpma-noterow { border-top: 0; }
/* NOT set: padding on .fpma-note. Tightening the gap above the note by zeroing its top padding was
   the obvious move and would have silently overridden the Table group's Cell Padding control —
   the same fault this component set hit five times in one day. border-top:0 alone is enough to
   read the note as a continuation, and it competes with nothing. */
.fpma-note-label { display: block; font-weight: 600; opacity: .7; margin-bottom: .15rem; }
.fpma-note-body { display: block; opacity: .9; }
.fpma-status { text-transform: capitalize; }
.fpma-status-pending::before { content: "\25CB\00A0"; }   /* hollow circle */
.fpma-status-suspended::before { content: "\2298\00A0"; } /* circled slash */
.fpma-status-active::before { content: "\25CF\00A0"; }    /* filled circle */

.fpma-reveal { border-width: 1px; border-style: solid; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.fpma-pw code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15em; user-select: all; }
.fpma-note { font-size: .85em; opacity: .75; }

/* A COLUMN: email field, then the button underneath — matching the other four components.
 *
 * NO `align-items` here. It was `flex-end` while this was a row, and hardcoding it now would beat
 * the Create Form → Align control, which is exactly the mistake that left the Fill picker and the
 * form width dead earlier today. The control owns this property; the CSS must not mention it.
 *
 * NO `flex-wrap` either: it only mattered for a row, where the note wrapped to a second line. */
.fpma-create { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
/* `width: 100%` IS REQUIRED for the Field Width control to do anything.
 *
 * That control emits max-width, and max-width only CAPS — it cannot expand a box that is already
 * shrink-wrapped. With Align set to Center the flex item shrink-wraps to its content, so without
 * this line every Field Width setting produced the same 203px box: a control sitting in the
 * inspector doing nothing, which is the failure this component set has hit four times today.
 * Measured in a 900px panel, Align=Center: no width -> 203px at every setting; with width:100% ->
 * 448px at Medium, 512px at Large, 900px at Full width, still centred (input centre 450 = row
 * centre 450).
 *
 * width and max-width are different properties, so this does not restate what the control governs;
 * it is the pairing that makes the control effective. Do not remove it. */
.fpma-field { display: flex; flex-direction: column; gap: .25rem; width: 100%; }

/* Bring-your-own-button well — DELIBERATELY NO `align-self` HERE, unlike the other components.
 *
 * The others hardcode `align-self: stretch` because their forms have no alignment control: the well
 * must not shrink-wrap, or the dropped Button has no free space and its own auto margins cannot
 * position it (measured on Logout: 0/537 shrink-wrapped vs 269/269 stretched).
 *
 * Admin DOES have a control — Create Form → Align. `align-self` on the child overrides the parent's
 * `align-items`, so declaring it here would pin the button while the control moved only the email
 * field: "Align: Center" would centre the caption and field and leave the button stretched full
 * width. That is the same class of bug as the dead Fill picker, just wearing a layout costume.
 *
 * Letting it inherit gives one coherent control: Stretch (the default) keeps the well full width so
 * the Button's own margins still work, Center shrink-wraps and centres field and button together,
 * Start/End move both. Do not add align-self back.
 *
 * (It was `align-self: flex-end` one build ago, which was right while .fpma-create was a ROW — the
 * cross axis was vertical then and flex-end meant "bottom-align with the field". The value did not
 * become wrong; the axis under it changed.)
 *
 * THERE IS INTENTIONALLY NO .fpma-byob RULE BELOW THIS COMMENT. The comment is the rule. */

.fpma-create .fpma-note { margin: 0; }

/* ===========================================================================================
   RESPONSIVE: the roster becomes CARDS on phones.
   ===========================================================================================
   Measured before writing this (900px reference, 16px text):
     with white-space:nowrap   table minimum 765px — overflowed iPhone SE by 477px, iPhone 12 by
                               407px, and even iPad portrait by 29px
     with wrapping allowed     table minimum 406px — fits from about 480px up
   So nowrap came off (above), and only phones need a different layout. The cut is 640px, the
   theme's `sm` breakpoint, which sits comfortably clear of the 406px floor rather than right on it.

   Below that each row becomes a card: the header row is hidden and every cell carries its own
   caption from the data-label attribute in the template. Nothing is hidden and no horizontal
   scrolling is introduced — the action links, which are the reason to open this page at all, stay
   reachable rather than sitting off-screen to the right.

   WHAT THIS DELIBERATELY DOES NOT SET: padding on th/td. That belongs to the Table group's Padding
   control (pt-2 pb-2 pl-3 pr-3), and restating it here would beat the control — the failure this component
   set has hit five times today. Row rule colour likewise stays with border-surface-200; only the
   border WIDTH and STYLE are named, which no control emits for this element. */
@media (max-width: 39.9375rem) {
  .fpma-table,
  .fpma-table tbody,
  .fpma-table tr,
  .fpma-table td { display: block; width: 100%; }

  /* Visually hidden, not display:none — the column names still belong to the accessibility tree
     even though each cell now shows its own caption. */
  .fpma-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* Each row is a card. The existing .fpma-row rule already supplies the bottom rule and its
     colour comes from the control, so only the card spacing is added here. */
  .fpma-row { margin-bottom: 1rem; padding-bottom: .25rem; }
  .fpma-row:last-child { margin-bottom: 0; }

  /* Caption left, value right — the usual definition-list reading order on a narrow screen. */
  .fpma-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .fpma-table td::before {
    content: attr(data-label);
    font-weight: 600;
    flex: 0 0 auto;
    opacity: .7;
  }

  /* The note carries no data-label, so the generic td rule above would give it an EMPTY ::before
     and then flex the label and the prose into two columns on a phone. Block, and drop the empty
     pseudo-element entirely. The note row also loses its card margin: it belongs to the row above
     it, and a gap here would split one account across two apparent cards. */
  .fpma-table td.fpma-note { display: block; }
  .fpma-table td.fpma-note::before { content: none; }
  .fpma-row.fpma-noterow { margin-bottom: 1rem; }
  .fpma-row:has(+ .fpma-noterow) { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

  /* Actions stack full width under their caption rather than fighting for the right-hand column. */
  .fpma-table td.fpma-actions { display: block; }
  .fpma-table td.fpma-actions::before { display: block; margin-bottom: .35rem; }
  .fpma-actform { display: block; }
  .fpma-actform + .fpma-actform { margin-top: .35rem; }
  .fpma-act + .fpma-act,
  .fpma-actform + .fpma-actform .fpma-act { margin-left: 0; }
}

.fpm-editnote { display: inline-flex; align-items: center; gap: .45em; margin-bottom: .75rem; padding: .4em .7em;
  font-size: 12px; color: #6b7280; border: 1px dashed #cbd5e1; border-radius: 6px; background: rgba(148,163,184,.08); }
.fpm-editnote svg { flex: 0 0 auto; opacity: .8; }

/* EMAIL ADDRESSES MUST BE ABLE TO BREAK.
 *
 * Measured 2026-07-21 in a 320px container: a 53-character address with no hyphen in it —
 * christopherwentworthfitzgerald@verylongdomainname.org — overflowed by 106px and forced the whole
 * page to scroll sideways. Addresses WITH a hyphen happen to survive, because browsers already
 * treat "-" as a break opportunity, which is exactly why this is easy to miss in casual testing.
 * overflow-wrap:anywhere fixed it at every width tried.
 *
 * No control governs overflow-wrap, so declaring it here competes with nothing. */
.fpma-table td, .fpma-reveal, .fpma-pw code { overflow-wrap: anywhere; }
/* QA Admin — LAYOUT ONLY.
 * Elements emits Tailwind utilities inside @layer utilities; this file is UNLAYERED and therefore
 * beats them regardless of specificity. Never name a property a native control governs for an
 * element carrying that control's classes — no colour, fill, border, radius, padding, margin or
 * font here for those elements. If Preview and the published page disagree on styling, this file is
 * competing with a control: that is a bug signal, not a quirk. */

.fpqa-heading { margin: 0 0 .25rem; }
.fpqa-loglink { text-decoration: underline; }
.fpqa-sub { margin: 1.5rem 0 .25rem; }
.fpqa-note { font-size: .85em; opacity: .75; margin: .5rem 0 0; }
/* Orphaned overrides: a short list, so a plain list is right. overflow-wrap because
   these are email addresses and a long one must not push the page sideways. */
.fpqa-orphans { margin: .5rem 0; padding-left: 1.25rem; overflow-wrap: anywhere; }

/* The limits row wraps rather than scrolling: four fields plus a button will not fit on a phone,
   and a horizontally scrolling form is worse than a taller one. */
.fpqa-form { margin-top: .5rem; }
.fpqa-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.fpqa-field { display: flex; flex-direction: column; gap: .25rem; }
.fpqa-label { font-size: .85em; font-weight: 600; }

/* The model select needs room for its ARROW, which the browser draws at the right edge INSIDE the
 * padding box rather than reserving space for it. Measured at 16px: the longest option, "Standard
 * (Sonnet 4.6)", is 161px of text; browser auto-width came to 187px — text plus the 24px of padding
 * and nothing for the arrow. So the arrow lands on top of the closing bracket, which is what you saw.
 *
 * The fix is WIDTH, not padding. Padding here belongs to the Fields → Padding control and restating
 * it in CSS would beat the control — the failure this component set hit repeatedly today. Width is
 * governed by nothing, so it is ours to set. 14rem leaves comfortable headroom over the measured
 * 187px, which matters because the theme font is not the font that measurement was taken in.
 *
 * max-width keeps it inside a narrow screen; the number inputs get the same guard. */
.fpqa-field select { min-width: 14rem; }
.fpqa-field select,
.fpqa-field input { max-width: 100%; }

.fpqa-table { width: 100%; border-collapse: collapse; }
.fpqa-table th { text-align: left; font-weight: 600; }
/* Row rule COLOUR comes from the Table palette (rowBorderColor); only width and style are set here,
   which no control emits for this element. */
.fpqa-row-line { border-bottom-width: 1px; border-bottom-style: solid; }

.fpqa-quota { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* 5.5rem was too narrow: a number input reserves room for its spinner arrows, so the "unlimited"
   placeholder was clipped to "unlimite" with the arrows on top of it. Sized for the longest
   placeholder plus the spinner rather than for the digits alone. */
.fpqa-quota-input { width: 9rem; min-width: 9rem; }
.fpqa-hint { font-size: .72em; opacity: .7; }

/* Actions are text links, not buttons: they sit inside table rows and per-row buttons would make
   the table heavy. Padding/fill/border are NOT set — nothing here competes with a control, because
   no control targets these. */
.fpqa-act { background: none; border: 0; cursor: pointer; text-decoration: underline; font: inherit; color: inherit; }
.fpqa-act-go { font-weight: 600; }

/* Email addresses must be able to break. Measured 2026-07-21 in a 320px container: a 53-character
   address with no hyphen in it overflowed by 106px and forced the page to scroll sideways.
   Addresses WITH a hyphen survive, because browsers already break at "-", which is exactly why this
   is easy to miss in casual testing. No control governs overflow-wrap. */
.fpqa-table td, .fpqa-preview { overflow-wrap: anywhere; }

/* ===========================================================================================
   RESPONSIVE: the roster becomes CARDS on phones, same treatment as Member Admin.
   Below the theme's `sm` breakpoint the header row is hidden and every cell carries its own
   caption from the data-label attribute in the template. Nothing is hidden and no horizontal
   scrolling is introduced.
   Padding on th/td is deliberately NOT set here — that belongs to the Table group's Cell Padding
   control, and restating it would beat the control. */
@media (max-width: 39.9375rem) {
  /* LIMITS FORM — one field per line.
     It already wrapped, but wrapping alone left four differently-sized boxes stacked raggedly, and
     the 14rem select could still crowd a 320px screen. Below the breakpoint each field takes the
     full width and the button spans it, which is both tidier and easier to hit with a thumb.
     min-width is reset to auto or the select's 14rem floor would force a horizontal scrollbar on a
     narrow phone — a min-width set for desktop is exactly the kind of thing that survives into
     mobile and quietly breaks it. */
  .fpqa-row { flex-direction: column; align-items: stretch; }
  .fpqa-field { width: 100%; }
  .fpqa-field select { min-width: 0; width: 100%; }
  .fpqa-field input { width: 100%; }
  .fpqa-act-go { align-self: stretch; padding: .5rem 0; }

  /* Quota cell: the input and Set button on one line, hint underneath. */
  .fpqa-quota-input { width: auto; min-width: 0; flex: 1 1 6rem; }

  .fpqa-table,
  .fpqa-table tbody,
  .fpqa-table tr,
  .fpqa-table td { display: block; width: 100%; }

  /* Visually hidden, not display:none — the column names still belong to the accessibility tree
     even though each cell now shows its own caption. */
  .fpqa-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .fpqa-row-line { margin-bottom: 1rem; padding-bottom: .25rem; }
  .fpqa-row-line:last-child { margin-bottom: 0; }

  .fpqa-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .fpqa-table td::before { content: attr(data-label); font-weight: 600; flex: 0 0 auto; opacity: .7; }

  /* The quota cell holds a form, so it gets the caption on its own line rather than fighting the
     input for the right-hand side. */
  .fpqa-table td:last-child { display: block; }
  .fpqa-table td:last-child::before { display: block; margin-bottom: .35rem; }
}

.fpm-editnote { display: inline-flex; align-items: center; gap: .45em; margin-bottom: .75rem; padding: .4em .7em;
  font-size: 12px; color: #6b7280; border: 1px dashed #cbd5e1; border-radius: 6px; background: rgba(148,163,184,.08); }
.fpm-editnote svg { flex: 0 0 auto; opacity: .8; }
/* [data-rwx-droparea] {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
} */
 [x-cloak] {display: block !important;} /* Display block for testing only -  none by default */