/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: "Junicode", ui-serif, Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --container-2xl: 42rem;
    --container-6xl: 72rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-semibold: 600;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-or: #f5c518;
    --color-argent: #ffffff;
    --color-gules: #d21f1f;
    --color-azure: #1f4fb0;
    --color-vert: #1d8a3c;
    --color-purpure: #7e3a8e;
    --color-sable: #141414;
  }
}
@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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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:where(:not(iframe)) {
    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 {
  .charges {
    position: absolute;
    inset: var(--field-top, 0%) 0 0;
    z-index: 1;
    & > * {
      position: absolute;
      aspect-ratio: 1;
      translate: -50% -50%;
      object-fit: contain;
    }
    &:where(:has( > :nth-child(1):last-child)) > :where(:nth-child(1)) {
      left: 50%;
      top: 45%;
      width: var(--charge-size, 50%);
    }
    &:where(:has( > :nth-child(2):last-child)) > :where(:nth-child(1)) {
      left: 50%;
      top: 24%;
      width: var(--charge-size, 30%);
    }
    &:where(:has( > :nth-child(2):last-child)) > :where(:nth-child(2)) {
      left: 50%;
      top: 66%;
      width: var(--charge-size, 30%);
    }
    &:where(:has( > :nth-child(3):last-child)) > :where(:nth-child(1)) {
      left: 28%;
      top: 25%;
      width: var(--charge-size, 28%);
    }
    &:where(:has( > :nth-child(3):last-child)) > :where(:nth-child(2)) {
      left: 72%;
      top: 25%;
      width: var(--charge-size, 28%);
    }
    &:where(:has( > :nth-child(3):last-child)) > :where(:nth-child(3)) {
      left: 50%;
      top: 64%;
      width: var(--charge-size, 28%);
    }
    &:where(:has( > :nth-child(4):last-child)) > :where(:nth-child(1)) {
      left: 30%;
      top: 24%;
      width: var(--charge-size, 24%);
    }
    &:where(:has( > :nth-child(4):last-child)) > :where(:nth-child(2)) {
      left: 70%;
      top: 24%;
      width: var(--charge-size, 24%);
    }
    &:where(:has( > :nth-child(4):last-child)) > :where(:nth-child(3)) {
      left: 32%;
      top: 60%;
      width: var(--charge-size, 24%);
    }
    &:where(:has( > :nth-child(4):last-child)) > :where(:nth-child(4)) {
      left: 68%;
      top: 60%;
      width: var(--charge-size, 24%);
    }
    &:where(:has( > :nth-child(6):last-child)) > :where(:nth-child(1)) {
      left: 20%;
      top: 18%;
      width: var(--charge-size, 20%);
    }
    &:where(:has( > :nth-child(6):last-child)) > :where(:nth-child(2)) {
      left: 50%;
      top: 18%;
      width: var(--charge-size, 20%);
    }
    &:where(:has( > :nth-child(6):last-child)) > :where(:nth-child(3)) {
      left: 80%;
      top: 18%;
      width: var(--charge-size, 20%);
    }
    &:where(:has( > :nth-child(6):last-child)) > :where(:nth-child(4)) {
      left: 35%;
      top: 42%;
      width: var(--charge-size, 20%);
    }
    &:where(:has( > :nth-child(6):last-child)) > :where(:nth-child(5)) {
      left: 65%;
      top: 42%;
      width: var(--charge-size, 20%);
    }
    &:where(:has( > :nth-child(6):last-child)) > :where(:nth-child(6)) {
      left: 50%;
      top: 66%;
      width: var(--charge-size, 20%);
    }
  }
  .cross-argent {
    position: relative;
    --between-size: 18%;
    --between-1-x: 20%;
    --between-1-y: 17%;
    --between-2-x: 80%;
    --between-2-y: 17%;
    --between-3-x: 24%;
    --between-3-y: 72%;
    --between-4-x: 76%;
    --between-4-y: 72%;
    --on-size: 15%;
    --on-1-1-x: 50%;
    --on-1-1-y: 45%;
    --on-5-1-x: 50%;
    --on-5-1-y: 15%;
    --on-5-2-x: 18%;
    --on-5-2-y: 45%;
    --on-5-3-x: 50%;
    --on-5-3-y: 45%;
    --on-5-4-x: 82%;
    --on-5-4-y: 45%;
    --on-5-5-x: 50%;
    --on-5-5-y: 80%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-argent));
      background-image: linear-gradient(to right, transparent calc(40% - 0.5px), var(--color-argent) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px)), linear-gradient(to bottom, transparent calc(35% - 0.5px), var(--color-argent) calc(35% + 0.5px) calc(55% - 0.5px), transparent calc(55% + 0.5px));
      background-size: 100% 100%, 100% 100%;
      background-position: 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(calc(40% - 3% * var(--fimbriated, 0)) 0, calc(60% + 3% * var(--fimbriated, 0)) 0, calc(60% + 3% * var(--fimbriated, 0)) calc(35% - 2.5% * var(--fimbriated, 0)), 100% calc(35% - 2.5% * var(--fimbriated, 0)), 100% calc(55% + 2.5% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) calc(55% + 2.5% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) calc(55% + 2.5% * var(--fimbriated, 0)), 0 calc(55% + 2.5% * var(--fimbriated, 0)), 0 calc(35% - 2.5% * var(--fimbriated, 0)), calc(40% - 3% * var(--fimbriated, 0)) calc(35% - 2.5% * var(--fimbriated, 0)));
    }
  }
  .cross-azure {
    position: relative;
    --between-size: 18%;
    --between-1-x: 20%;
    --between-1-y: 17%;
    --between-2-x: 80%;
    --between-2-y: 17%;
    --between-3-x: 24%;
    --between-3-y: 72%;
    --between-4-x: 76%;
    --between-4-y: 72%;
    --on-size: 15%;
    --on-1-1-x: 50%;
    --on-1-1-y: 45%;
    --on-5-1-x: 50%;
    --on-5-1-y: 15%;
    --on-5-2-x: 18%;
    --on-5-2-y: 45%;
    --on-5-3-x: 50%;
    --on-5-3-y: 45%;
    --on-5-4-x: 82%;
    --on-5-4-y: 45%;
    --on-5-5-x: 50%;
    --on-5-5-y: 80%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-azure));
      background-image: linear-gradient(to right, transparent calc(40% - 0.5px), var(--color-azure) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px)), linear-gradient(to bottom, transparent calc(35% - 0.5px), var(--color-azure) calc(35% + 0.5px) calc(55% - 0.5px), transparent calc(55% + 0.5px));
      background-size: 100% 100%, 100% 100%;
      background-position: 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(calc(40% - 3% * var(--fimbriated, 0)) 0, calc(60% + 3% * var(--fimbriated, 0)) 0, calc(60% + 3% * var(--fimbriated, 0)) calc(35% - 2.5% * var(--fimbriated, 0)), 100% calc(35% - 2.5% * var(--fimbriated, 0)), 100% calc(55% + 2.5% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) calc(55% + 2.5% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) calc(55% + 2.5% * var(--fimbriated, 0)), 0 calc(55% + 2.5% * var(--fimbriated, 0)), 0 calc(35% - 2.5% * var(--fimbriated, 0)), calc(40% - 3% * var(--fimbriated, 0)) calc(35% - 2.5% * var(--fimbriated, 0)));
    }
  }
  .cross-gules {
    position: relative;
    --between-size: 18%;
    --between-1-x: 20%;
    --between-1-y: 17%;
    --between-2-x: 80%;
    --between-2-y: 17%;
    --between-3-x: 24%;
    --between-3-y: 72%;
    --between-4-x: 76%;
    --between-4-y: 72%;
    --on-size: 15%;
    --on-1-1-x: 50%;
    --on-1-1-y: 45%;
    --on-5-1-x: 50%;
    --on-5-1-y: 15%;
    --on-5-2-x: 18%;
    --on-5-2-y: 45%;
    --on-5-3-x: 50%;
    --on-5-3-y: 45%;
    --on-5-4-x: 82%;
    --on-5-4-y: 45%;
    --on-5-5-x: 50%;
    --on-5-5-y: 80%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-gules));
      background-image: linear-gradient(to right, transparent calc(40% - 0.5px), var(--color-gules) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px)), linear-gradient(to bottom, transparent calc(35% - 0.5px), var(--color-gules) calc(35% + 0.5px) calc(55% - 0.5px), transparent calc(55% + 0.5px));
      background-size: 100% 100%, 100% 100%;
      background-position: 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(calc(40% - 3% * var(--fimbriated, 0)) 0, calc(60% + 3% * var(--fimbriated, 0)) 0, calc(60% + 3% * var(--fimbriated, 0)) calc(35% - 2.5% * var(--fimbriated, 0)), 100% calc(35% - 2.5% * var(--fimbriated, 0)), 100% calc(55% + 2.5% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) calc(55% + 2.5% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) calc(55% + 2.5% * var(--fimbriated, 0)), 0 calc(55% + 2.5% * var(--fimbriated, 0)), 0 calc(35% - 2.5% * var(--fimbriated, 0)), calc(40% - 3% * var(--fimbriated, 0)) calc(35% - 2.5% * var(--fimbriated, 0)));
    }
  }
  .saltire-argent {
    position: relative;
    --between-size: 16%;
    --between-1-x: 50%;
    --between-1-y: 13%;
    --between-2-x: 14%;
    --between-2-y: 50%;
    --between-3-x: 86%;
    --between-3-y: 50%;
    --between-4-x: 50%;
    --between-4-y: 84%;
    --on-size: 14%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-5-1-x: 22%;
    --on-5-1-y: 22%;
    --on-5-2-x: 78%;
    --on-5-2-y: 22%;
    --on-5-3-x: 50%;
    --on-5-3-y: 50%;
    --on-5-4-x: 22%;
    --on-5-4-y: 78%;
    --on-5-5-x: 78%;
    --on-5-5-y: 78%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-argent));
      background-image: linear-gradient(to top right, transparent calc(42.5% - 0.5px), var(--color-argent) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(42.5% - 0.5px), var(--color-argent) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px));
      background-size: 100% 100%, 100% 100%;
      background-position: 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(0 0, calc(15% + 3.905% * var(--fimbriated, 0)) 0, 50% calc(35% - 3.905% * var(--fimbriated, 0)), calc(85% - 3.905% * var(--fimbriated, 0)) 0, 100% 0, 100% calc(15% + 3.905% * var(--fimbriated, 0)), calc(65% + 3.905% * var(--fimbriated, 0)) 50%, 100% calc(85% - 3.905% * var(--fimbriated, 0)), 100% 100%, calc(85% - 3.905% * var(--fimbriated, 0)) 100%, 50% calc(65% + 3.905% * var(--fimbriated, 0)), calc(15% + 3.905% * var(--fimbriated, 0)) 100%, 0 100%, 0 calc(85% - 3.905% * var(--fimbriated, 0)), calc(35% - 3.905% * var(--fimbriated, 0)) 50%, 0 calc(15% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .saltire-gules {
    position: relative;
    --between-size: 16%;
    --between-1-x: 50%;
    --between-1-y: 13%;
    --between-2-x: 14%;
    --between-2-y: 50%;
    --between-3-x: 86%;
    --between-3-y: 50%;
    --between-4-x: 50%;
    --between-4-y: 84%;
    --on-size: 14%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-5-1-x: 22%;
    --on-5-1-y: 22%;
    --on-5-2-x: 78%;
    --on-5-2-y: 22%;
    --on-5-3-x: 50%;
    --on-5-3-y: 50%;
    --on-5-4-x: 22%;
    --on-5-4-y: 78%;
    --on-5-5-x: 78%;
    --on-5-5-y: 78%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-gules));
      background-image: linear-gradient(to top right, transparent calc(42.5% - 0.5px), var(--color-gules) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(42.5% - 0.5px), var(--color-gules) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px));
      background-size: 100% 100%, 100% 100%;
      background-position: 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(0 0, calc(15% + 3.905% * var(--fimbriated, 0)) 0, 50% calc(35% - 3.905% * var(--fimbriated, 0)), calc(85% - 3.905% * var(--fimbriated, 0)) 0, 100% 0, 100% calc(15% + 3.905% * var(--fimbriated, 0)), calc(65% + 3.905% * var(--fimbriated, 0)) 50%, 100% calc(85% - 3.905% * var(--fimbriated, 0)), 100% 100%, calc(85% - 3.905% * var(--fimbriated, 0)) 100%, 50% calc(65% + 3.905% * var(--fimbriated, 0)), calc(15% + 3.905% * var(--fimbriated, 0)) 100%, 0 100%, 0 calc(85% - 3.905% * var(--fimbriated, 0)), calc(35% - 3.905% * var(--fimbriated, 0)) 50%, 0 calc(15% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .fess-argent {
    position: relative;
    --between-size: 20%;
    --between-1-x: 30%;
    --between-1-y: 15%;
    --between-2-x: 70%;
    --between-2-y: 15%;
    --between-3-x: 50%;
    --between-3-y: 78%;
    --on-size: 22%;
    --on-1-1-x: 50%;
    --on-1-1-y: 45%;
    --on-2-1-x: 30%;
    --on-2-1-y: 45%;
    --on-2-2-x: 70%;
    --on-2-2-y: 45%;
    --on-3-1-x: 20%;
    --on-3-1-y: 45%;
    --on-3-2-x: 50%;
    --on-3-2-y: 45%;
    --on-3-3-x: 80%;
    --on-3-3-y: 45%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-argent));
      background-image: linear-gradient(to bottom, transparent calc(30% - 0.5px), var(--color-argent) calc(30% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(0 calc(30% - 2.5% * var(--fimbriated, 0)), 100% calc(30% - 2.5% * var(--fimbriated, 0)), 100% calc(60% + 2.5% * var(--fimbriated, 0)), 0 calc(60% + 2.5% * var(--fimbriated, 0)));
    }
  }
  .fess-azure {
    position: relative;
    --between-size: 20%;
    --between-1-x: 30%;
    --between-1-y: 15%;
    --between-2-x: 70%;
    --between-2-y: 15%;
    --between-3-x: 50%;
    --between-3-y: 78%;
    --on-size: 22%;
    --on-1-1-x: 50%;
    --on-1-1-y: 45%;
    --on-2-1-x: 30%;
    --on-2-1-y: 45%;
    --on-2-2-x: 70%;
    --on-2-2-y: 45%;
    --on-3-1-x: 20%;
    --on-3-1-y: 45%;
    --on-3-2-x: 50%;
    --on-3-2-y: 45%;
    --on-3-3-x: 80%;
    --on-3-3-y: 45%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-azure));
      background-image: linear-gradient(to bottom, transparent calc(30% - 0.5px), var(--color-azure) calc(30% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(0 calc(30% - 2.5% * var(--fimbriated, 0)), 100% calc(30% - 2.5% * var(--fimbriated, 0)), 100% calc(60% + 2.5% * var(--fimbriated, 0)), 0 calc(60% + 2.5% * var(--fimbriated, 0)));
    }
  }
  .fess-or {
    position: relative;
    --between-size: 20%;
    --between-1-x: 30%;
    --between-1-y: 15%;
    --between-2-x: 70%;
    --between-2-y: 15%;
    --between-3-x: 50%;
    --between-3-y: 78%;
    --on-size: 22%;
    --on-1-1-x: 50%;
    --on-1-1-y: 45%;
    --on-2-1-x: 30%;
    --on-2-1-y: 45%;
    --on-2-2-x: 70%;
    --on-2-2-y: 45%;
    --on-3-1-x: 20%;
    --on-3-1-y: 45%;
    --on-3-2-x: 50%;
    --on-3-2-y: 45%;
    --on-3-3-x: 80%;
    --on-3-3-y: 45%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-or));
      background-image: linear-gradient(to bottom, transparent calc(30% - 0.5px), var(--color-or) calc(30% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(0 calc(30% - 2.5% * var(--fimbriated, 0)), 100% calc(30% - 2.5% * var(--fimbriated, 0)), 100% calc(60% + 2.5% * var(--fimbriated, 0)), 0 calc(60% + 2.5% * var(--fimbriated, 0)));
    }
  }
  .bend-azure {
    position: relative;
    --between-size: 24%;
    --between-1-x: 70%;
    --between-1-y: 26%;
    --between-2-x: 30%;
    --between-2-y: 68%;
    --on-size: 18%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-2-1-x: 33%;
    --on-2-1-y: 33%;
    --on-2-2-x: 67%;
    --on-2-2-y: 67%;
    --on-3-1-x: 24%;
    --on-3-1-y: 24%;
    --on-3-2-x: 50%;
    --on-3-2-y: 50%;
    --on-3-3-x: 76%;
    --on-3-3-y: 76%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-azure));
      background-image: linear-gradient(to top right, transparent calc(40% - 0.5px), var(--color-azure) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(0 0, calc(20% + 3.905% * var(--fimbriated, 0)) 0, 100% calc(80% - 3.905% * var(--fimbriated, 0)), 100% 100%, calc(80% - 3.905% * var(--fimbriated, 0)) 100%, 0 calc(20% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .bend-or {
    position: relative;
    --between-size: 24%;
    --between-1-x: 70%;
    --between-1-y: 26%;
    --between-2-x: 30%;
    --between-2-y: 68%;
    --on-size: 18%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-2-1-x: 33%;
    --on-2-1-y: 33%;
    --on-2-2-x: 67%;
    --on-2-2-y: 67%;
    --on-3-1-x: 24%;
    --on-3-1-y: 24%;
    --on-3-2-x: 50%;
    --on-3-2-y: 50%;
    --on-3-3-x: 76%;
    --on-3-3-y: 76%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-or));
      background-image: linear-gradient(to top right, transparent calc(40% - 0.5px), var(--color-or) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(0 0, calc(20% + 3.905% * var(--fimbriated, 0)) 0, 100% calc(80% - 3.905% * var(--fimbriated, 0)), 100% 100%, calc(80% - 3.905% * var(--fimbriated, 0)) 100%, 0 calc(20% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .bend-sable {
    position: relative;
    --between-size: 24%;
    --between-1-x: 70%;
    --between-1-y: 26%;
    --between-2-x: 30%;
    --between-2-y: 68%;
    --on-size: 18%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-2-1-x: 33%;
    --on-2-1-y: 33%;
    --on-2-2-x: 67%;
    --on-2-2-y: 67%;
    --on-3-1-x: 24%;
    --on-3-1-y: 24%;
    --on-3-2-x: 50%;
    --on-3-2-y: 50%;
    --on-3-3-x: 76%;
    --on-3-3-y: 76%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-sable));
      background-image: linear-gradient(to top right, transparent calc(40% - 0.5px), var(--color-sable) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(0 0, calc(20% + 3.905% * var(--fimbriated, 0)) 0, 100% calc(80% - 3.905% * var(--fimbriated, 0)), 100% 100%, calc(80% - 3.905% * var(--fimbriated, 0)) 100%, 0 calc(20% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .bend-sinister-gules {
    position: relative;
    --between-size: 24%;
    --between-1-x: 30%;
    --between-1-y: 26%;
    --between-2-x: 70%;
    --between-2-y: 68%;
    --on-size: 18%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-2-1-x: 67%;
    --on-2-1-y: 33%;
    --on-2-2-x: 33%;
    --on-2-2-y: 67%;
    --on-3-1-x: 76%;
    --on-3-1-y: 24%;
    --on-3-2-x: 50%;
    --on-3-2-y: 50%;
    --on-3-3-x: 24%;
    --on-3-3-y: 76%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-gules));
      background-image: linear-gradient(to bottom right, transparent calc(40% - 0.5px), var(--color-gules) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(100% 0, calc(80% - 3.905% * var(--fimbriated, 0)) 0, 0 calc(80% - 3.905% * var(--fimbriated, 0)), 0 100%, calc(20% + 3.905% * var(--fimbriated, 0)) 100%, 100% calc(20% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .bend-sinister-vert {
    position: relative;
    --between-size: 24%;
    --between-1-x: 30%;
    --between-1-y: 26%;
    --between-2-x: 70%;
    --between-2-y: 68%;
    --on-size: 18%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-2-1-x: 67%;
    --on-2-1-y: 33%;
    --on-2-2-x: 33%;
    --on-2-2-y: 67%;
    --on-3-1-x: 76%;
    --on-3-1-y: 24%;
    --on-3-2-x: 50%;
    --on-3-2-y: 50%;
    --on-3-3-x: 24%;
    --on-3-3-y: 76%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-vert));
      background-image: linear-gradient(to bottom right, transparent calc(40% - 0.5px), var(--color-vert) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(100% 0, calc(80% - 3.905% * var(--fimbriated, 0)) 0, 0 calc(80% - 3.905% * var(--fimbriated, 0)), 0 100%, calc(20% + 3.905% * var(--fimbriated, 0)) 100%, 100% calc(20% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .pale-argent {
    position: relative;
    --between-size: 18%;
    --between-1-x: 18%;
    --between-1-y: 42%;
    --between-2-x: 82%;
    --between-2-y: 42%;
    --on-size: 20%;
    --on-1-1-x: 50%;
    --on-1-1-y: 45%;
    --on-2-1-x: 50%;
    --on-2-1-y: 28%;
    --on-2-2-x: 50%;
    --on-2-2-y: 62%;
    --on-3-1-x: 50%;
    --on-3-1-y: 18%;
    --on-3-2-x: 50%;
    --on-3-2-y: 45%;
    --on-3-3-x: 50%;
    --on-3-3-y: 72%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-argent));
      background-image: linear-gradient(to right, transparent calc(35% - 0.5px), var(--color-argent) calc(35% + 0.5px) calc(65% - 0.5px), transparent calc(65% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(calc(35% - 3% * var(--fimbriated, 0)) 0, calc(65% + 3% * var(--fimbriated, 0)) 0, calc(65% + 3% * var(--fimbriated, 0)) 100%, calc(35% - 3% * var(--fimbriated, 0)) 100%);
    }
  }
  .pale-or {
    position: relative;
    --between-size: 18%;
    --between-1-x: 18%;
    --between-1-y: 42%;
    --between-2-x: 82%;
    --between-2-y: 42%;
    --on-size: 20%;
    --on-1-1-x: 50%;
    --on-1-1-y: 45%;
    --on-2-1-x: 50%;
    --on-2-1-y: 28%;
    --on-2-2-x: 50%;
    --on-2-2-y: 62%;
    --on-3-1-x: 50%;
    --on-3-1-y: 18%;
    --on-3-2-x: 50%;
    --on-3-2-y: 45%;
    --on-3-3-x: 50%;
    --on-3-3-y: 72%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-or));
      background-image: linear-gradient(to right, transparent calc(35% - 0.5px), var(--color-or) calc(35% + 0.5px) calc(65% - 0.5px), transparent calc(65% + 0.5px));
      background-size: 100% 100%;
      background-position: 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(calc(35% - 3% * var(--fimbriated, 0)) 0, calc(65% + 3% * var(--fimbriated, 0)) 0, calc(65% + 3% * var(--fimbriated, 0)) 100%, calc(35% - 3% * var(--fimbriated, 0)) 100%);
    }
  }
  .chevron-argent {
    position: relative;
    --between-size: 22%;
    --between-1-x: 24%;
    --between-1-y: 22%;
    --between-2-x: 76%;
    --between-2-y: 22%;
    --between-3-x: 50%;
    --between-3-y: 70%;
    --on-size: 12%;
    --on-1-1-x: 50%;
    --on-1-1-y: 36%;
    --on-3-1-x: 20%;
    --on-3-1-y: 65%;
    --on-3-2-x: 50%;
    --on-3-2-y: 36%;
    --on-3-3-x: 80%;
    --on-3-3-y: 65%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-argent));
      background-image: linear-gradient(to bottom right, transparent calc(31.5% - 0.5px), var(--fimbriation, transparent) calc(31.5% + 0.5px) calc(37.5% - 0.5px), transparent calc(37.5% + 0.5px)), linear-gradient(to top right, transparent calc(62.5% - 0.5px), var(--fimbriation, transparent) calc(62.5% + 0.5px) calc(68.5% - 0.5px), transparent calc(68.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(37.5% - 0.5px), var(--color-argent) calc(37.5% + 0.5px) calc(47.5% - 0.5px), transparent calc(47.5% + 0.5px)), linear-gradient(to top right, transparent calc(52.5% - 0.5px), var(--color-argent) calc(52.5% + 0.5px) calc(62.5% - 0.5px), transparent calc(62.5% + 0.5px));
      background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
      background-position: 0 0, 0 0, 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(50% calc(25% - 3.905% * var(--fimbriated, 0)), 100% calc(75% - 3.905% * var(--fimbriated, 0)), 100% calc(95% + 3.905% * var(--fimbriated, 0)), 50% calc(45% + 3.905% * var(--fimbriated, 0)), 0 calc(95% + 3.905% * var(--fimbriated, 0)), 0 calc(75% - 3.905% * var(--fimbriated, 0)));
    }
  }
  .chevron-azure {
    position: relative;
    --between-size: 22%;
    --between-1-x: 24%;
    --between-1-y: 22%;
    --between-2-x: 76%;
    --between-2-y: 22%;
    --between-3-x: 50%;
    --between-3-y: 70%;
    --on-size: 12%;
    --on-1-1-x: 50%;
    --on-1-1-y: 36%;
    --on-3-1-x: 20%;
    --on-3-1-y: 65%;
    --on-3-2-x: 50%;
    --on-3-2-y: 36%;
    --on-3-3-x: 80%;
    --on-3-3-y: 65%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-azure));
      background-image: linear-gradient(to bottom right, transparent calc(31.5% - 0.5px), var(--fimbriation, transparent) calc(31.5% + 0.5px) calc(37.5% - 0.5px), transparent calc(37.5% + 0.5px)), linear-gradient(to top right, transparent calc(62.5% - 0.5px), var(--fimbriation, transparent) calc(62.5% + 0.5px) calc(68.5% - 0.5px), transparent calc(68.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(37.5% - 0.5px), var(--color-azure) calc(37.5% + 0.5px) calc(47.5% - 0.5px), transparent calc(47.5% + 0.5px)), linear-gradient(to top right, transparent calc(52.5% - 0.5px), var(--color-azure) calc(52.5% + 0.5px) calc(62.5% - 0.5px), transparent calc(62.5% + 0.5px));
      background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
      background-position: 0 0, 0 0, 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(50% calc(25% - 3.905% * var(--fimbriated, 0)), 100% calc(75% - 3.905% * var(--fimbriated, 0)), 100% calc(95% + 3.905% * var(--fimbriated, 0)), 50% calc(45% + 3.905% * var(--fimbriated, 0)), 0 calc(95% + 3.905% * var(--fimbriated, 0)), 0 calc(75% - 3.905% * var(--fimbriated, 0)));
    }
  }
  .chevron-gules {
    position: relative;
    --between-size: 22%;
    --between-1-x: 24%;
    --between-1-y: 22%;
    --between-2-x: 76%;
    --between-2-y: 22%;
    --between-3-x: 50%;
    --between-3-y: 70%;
    --on-size: 12%;
    --on-1-1-x: 50%;
    --on-1-1-y: 36%;
    --on-3-1-x: 20%;
    --on-3-1-y: 65%;
    --on-3-2-x: 50%;
    --on-3-2-y: 36%;
    --on-3-3-x: 80%;
    --on-3-3-y: 65%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-gules));
      background-image: linear-gradient(to bottom right, transparent calc(31.5% - 0.5px), var(--fimbriation, transparent) calc(31.5% + 0.5px) calc(37.5% - 0.5px), transparent calc(37.5% + 0.5px)), linear-gradient(to top right, transparent calc(62.5% - 0.5px), var(--fimbriation, transparent) calc(62.5% + 0.5px) calc(68.5% - 0.5px), transparent calc(68.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(37.5% - 0.5px), var(--color-gules) calc(37.5% + 0.5px) calc(47.5% - 0.5px), transparent calc(47.5% + 0.5px)), linear-gradient(to top right, transparent calc(52.5% - 0.5px), var(--color-gules) calc(52.5% + 0.5px) calc(62.5% - 0.5px), transparent calc(62.5% + 0.5px));
      background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
      background-position: 0 0, 0 0, 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(50% calc(25% - 3.905% * var(--fimbriated, 0)), 100% calc(75% - 3.905% * var(--fimbriated, 0)), 100% calc(95% + 3.905% * var(--fimbriated, 0)), 50% calc(45% + 3.905% * var(--fimbriated, 0)), 0 calc(95% + 3.905% * var(--fimbriated, 0)), 0 calc(75% - 3.905% * var(--fimbriated, 0)));
    }
  }
  .chevron-or {
    position: relative;
    --between-size: 22%;
    --between-1-x: 24%;
    --between-1-y: 22%;
    --between-2-x: 76%;
    --between-2-y: 22%;
    --between-3-x: 50%;
    --between-3-y: 70%;
    --on-size: 12%;
    --on-1-1-x: 50%;
    --on-1-1-y: 36%;
    --on-3-1-x: 20%;
    --on-3-1-y: 65%;
    --on-3-2-x: 50%;
    --on-3-2-y: 36%;
    --on-3-3-x: 80%;
    --on-3-3-y: 65%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-or));
      background-image: linear-gradient(to bottom right, transparent calc(31.5% - 0.5px), var(--fimbriation, transparent) calc(31.5% + 0.5px) calc(37.5% - 0.5px), transparent calc(37.5% + 0.5px)), linear-gradient(to top right, transparent calc(62.5% - 0.5px), var(--fimbriation, transparent) calc(62.5% + 0.5px) calc(68.5% - 0.5px), transparent calc(68.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(37.5% - 0.5px), var(--color-or) calc(37.5% + 0.5px) calc(47.5% - 0.5px), transparent calc(47.5% + 0.5px)), linear-gradient(to top right, transparent calc(52.5% - 0.5px), var(--color-or) calc(52.5% + 0.5px) calc(62.5% - 0.5px), transparent calc(62.5% + 0.5px));
      background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
      background-position: 0 0, 0 0, 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(50% calc(25% - 3.905% * var(--fimbriated, 0)), 100% calc(75% - 3.905% * var(--fimbriated, 0)), 100% calc(95% + 3.905% * var(--fimbriated, 0)), 50% calc(45% + 3.905% * var(--fimbriated, 0)), 0 calc(95% + 3.905% * var(--fimbriated, 0)), 0 calc(75% - 3.905% * var(--fimbriated, 0)));
    }
  }
  .chevron-sable {
    position: relative;
    --between-size: 22%;
    --between-1-x: 24%;
    --between-1-y: 22%;
    --between-2-x: 76%;
    --between-2-y: 22%;
    --between-3-x: 50%;
    --between-3-y: 70%;
    --on-size: 12%;
    --on-1-1-x: 50%;
    --on-1-1-y: 36%;
    --on-3-1-x: 20%;
    --on-3-1-y: 65%;
    --on-3-2-x: 50%;
    --on-3-2-y: 36%;
    --on-3-3-x: 80%;
    --on-3-3-y: 65%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-sable));
      background-image: linear-gradient(to bottom right, transparent calc(31.5% - 0.5px), var(--fimbriation, transparent) calc(31.5% + 0.5px) calc(37.5% - 0.5px), transparent calc(37.5% + 0.5px)), linear-gradient(to top right, transparent calc(62.5% - 0.5px), var(--fimbriation, transparent) calc(62.5% + 0.5px) calc(68.5% - 0.5px), transparent calc(68.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(37.5% - 0.5px), var(--color-sable) calc(37.5% + 0.5px) calc(47.5% - 0.5px), transparent calc(47.5% + 0.5px)), linear-gradient(to top right, transparent calc(52.5% - 0.5px), var(--color-sable) calc(52.5% + 0.5px) calc(62.5% - 0.5px), transparent calc(62.5% + 0.5px));
      background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
      background-position: 0 0, 0 0, 0 0, 0 0;
      background-repeat: no-repeat;
      clip-path: polygon(50% calc(25% - 3.905% * var(--fimbriated, 0)), 100% calc(75% - 3.905% * var(--fimbriated, 0)), 100% calc(95% + 3.905% * var(--fimbriated, 0)), 50% calc(45% + 3.905% * var(--fimbriated, 0)), 0 calc(95% + 3.905% * var(--fimbriated, 0)), 0 calc(75% - 3.905% * var(--fimbriated, 0)));
    }
  }
  .pall-argent {
    position: relative;
    --between-size: 18%;
    --between-1-x: 50%;
    --between-1-y: 11%;
    --between-2-x: 18%;
    --between-2-y: 56%;
    --between-3-x: 82%;
    --between-3-y: 56%;
    --on-size: 14%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-3-1-x: 22%;
    --on-3-1-y: 22%;
    --on-3-2-x: 78%;
    --on-3-2-y: 22%;
    --on-3-3-x: 50%;
    --on-3-3-y: 75%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-argent));
      background-image: linear-gradient(to right, transparent calc(60% - 0.5px), var(--fimbriation, transparent) calc(60% + 0.5px) calc(72% - 0.5px), transparent calc(72% + 0.5px)), linear-gradient(to right, transparent calc(28% - 0.5px), var(--fimbriation, transparent) calc(28% + 0.5px) calc(40% - 0.5px), transparent calc(40% + 0.5px)), linear-gradient(to bottom right, transparent calc(31.25% - 0.5px), var(--fimbriation, transparent) calc(31.25% + 0.5px) calc(46.25% - 0.5px), transparent calc(46.25% + 0.5px)), linear-gradient(to top right, transparent calc(53.75% - 0.5px), var(--fimbriation, transparent) calc(53.75% + 0.5px) calc(68.75% - 0.5px), transparent calc(68.75% + 0.5px)), linear-gradient(to top right, transparent calc(42.5% - 0.5px), var(--color-argent) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(42.5% - 0.5px), var(--color-argent) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px)), linear-gradient(to right, transparent calc(40% - 0.5px), var(--color-argent) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 45%, 100% 45%, 40% 40%, 40% 40%, 100% 100%, 100% 100%, 100% 45%;
      background-position: 0 100%, 0 100%, 100% 50%, 0 50%, 0 0, 0 0, 0 100%;
      background-repeat: no-repeat;
      clip-path: polygon(0 0, calc(15% + 3.905% * var(--fimbriated, 0)) 0, 50% calc(35% - 3.905% * var(--fimbriated, 0)), calc(85% - 3.905% * var(--fimbriated, 0)) 0, 100% 0, 100% calc(15% + 3.905% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) calc(55% + 0.905% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) calc(55% + 0.905% * var(--fimbriated, 0)), 0 calc(15% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .pall-gules {
    position: relative;
    --between-size: 18%;
    --between-1-x: 50%;
    --between-1-y: 11%;
    --between-2-x: 18%;
    --between-2-y: 56%;
    --between-3-x: 82%;
    --between-3-y: 56%;
    --on-size: 14%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-3-1-x: 22%;
    --on-3-1-y: 22%;
    --on-3-2-x: 78%;
    --on-3-2-y: 22%;
    --on-3-3-x: 50%;
    --on-3-3-y: 75%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-gules));
      background-image: linear-gradient(to right, transparent calc(60% - 0.5px), var(--fimbriation, transparent) calc(60% + 0.5px) calc(72% - 0.5px), transparent calc(72% + 0.5px)), linear-gradient(to right, transparent calc(28% - 0.5px), var(--fimbriation, transparent) calc(28% + 0.5px) calc(40% - 0.5px), transparent calc(40% + 0.5px)), linear-gradient(to bottom right, transparent calc(31.25% - 0.5px), var(--fimbriation, transparent) calc(31.25% + 0.5px) calc(46.25% - 0.5px), transparent calc(46.25% + 0.5px)), linear-gradient(to top right, transparent calc(53.75% - 0.5px), var(--fimbriation, transparent) calc(53.75% + 0.5px) calc(68.75% - 0.5px), transparent calc(68.75% + 0.5px)), linear-gradient(to top right, transparent calc(42.5% - 0.5px), var(--color-gules) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(42.5% - 0.5px), var(--color-gules) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px)), linear-gradient(to right, transparent calc(40% - 0.5px), var(--color-gules) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 45%, 100% 45%, 40% 40%, 40% 40%, 100% 100%, 100% 100%, 100% 45%;
      background-position: 0 100%, 0 100%, 100% 50%, 0 50%, 0 0, 0 0, 0 100%;
      background-repeat: no-repeat;
      clip-path: polygon(0 0, calc(15% + 3.905% * var(--fimbriated, 0)) 0, 50% calc(35% - 3.905% * var(--fimbriated, 0)), calc(85% - 3.905% * var(--fimbriated, 0)) 0, 100% 0, 100% calc(15% + 3.905% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) calc(55% + 0.905% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) calc(55% + 0.905% * var(--fimbriated, 0)), 0 calc(15% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .pall-or {
    position: relative;
    --between-size: 18%;
    --between-1-x: 50%;
    --between-1-y: 11%;
    --between-2-x: 18%;
    --between-2-y: 56%;
    --between-3-x: 82%;
    --between-3-y: 56%;
    --on-size: 14%;
    --on-1-1-x: 50%;
    --on-1-1-y: 50%;
    --on-3-1-x: 22%;
    --on-3-1-y: 22%;
    --on-3-2-x: 78%;
    --on-3-2-y: 22%;
    --on-3-3-x: 50%;
    --on-3-3-y: 75%;
    &::before {
      content: "";
      position: absolute;
      inset: var(--field-top, 0%) 0 0;
      --fimbriated: inherit;
      --fimbriation: inherit;
      background-color: var(--fimbriation, var(--color-or));
      background-image: linear-gradient(to right, transparent calc(60% - 0.5px), var(--fimbriation, transparent) calc(60% + 0.5px) calc(72% - 0.5px), transparent calc(72% + 0.5px)), linear-gradient(to right, transparent calc(28% - 0.5px), var(--fimbriation, transparent) calc(28% + 0.5px) calc(40% - 0.5px), transparent calc(40% + 0.5px)), linear-gradient(to bottom right, transparent calc(31.25% - 0.5px), var(--fimbriation, transparent) calc(31.25% + 0.5px) calc(46.25% - 0.5px), transparent calc(46.25% + 0.5px)), linear-gradient(to top right, transparent calc(53.75% - 0.5px), var(--fimbriation, transparent) calc(53.75% + 0.5px) calc(68.75% - 0.5px), transparent calc(68.75% + 0.5px)), linear-gradient(to top right, transparent calc(42.5% - 0.5px), var(--color-or) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px)), linear-gradient(to bottom right, transparent calc(42.5% - 0.5px), var(--color-or) calc(42.5% + 0.5px) calc(57.5% - 0.5px), transparent calc(57.5% + 0.5px)), linear-gradient(to right, transparent calc(40% - 0.5px), var(--color-or) calc(40% + 0.5px) calc(60% - 0.5px), transparent calc(60% + 0.5px));
      background-size: 100% 45%, 100% 45%, 40% 40%, 40% 40%, 100% 100%, 100% 100%, 100% 45%;
      background-position: 0 100%, 0 100%, 100% 50%, 0 50%, 0 0, 0 0, 0 100%;
      background-repeat: no-repeat;
      clip-path: polygon(0 0, calc(15% + 3.905% * var(--fimbriated, 0)) 0, 50% calc(35% - 3.905% * var(--fimbriated, 0)), calc(85% - 3.905% * var(--fimbriated, 0)) 0, 100% 0, 100% calc(15% + 3.905% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) calc(55% + 0.905% * var(--fimbriated, 0)), calc(60% + 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) 100%, calc(40% - 3% * var(--fimbriated, 0)) calc(55% + 0.905% * var(--fimbriated, 0)), 0 calc(15% + 3.905% * var(--fimbriated, 0)));
    }
  }
  .chief-argent {
    position: relative;
    --field-top: 30%;
    --chief-points-y: calc(-15% / 0.7);
    --chief-points-size: 18%;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--color-argent);
      clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    }
  }
  .chief-azure {
    position: relative;
    --field-top: 30%;
    --chief-points-y: calc(-15% / 0.7);
    --chief-points-size: 18%;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--color-azure);
      clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    }
  }
  .chief-gules {
    position: relative;
    --field-top: 30%;
    --chief-points-y: calc(-15% / 0.7);
    --chief-points-size: 18%;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--color-gules);
      clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    }
  }
  .chief-or {
    position: relative;
    --field-top: 30%;
    --chief-points-y: calc(-15% / 0.7);
    --chief-points-size: 18%;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--color-or);
      clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    }
  }
  .escutcheon {
    position: relative;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border-radius: 0 0 50% 50% / 0 0 45% 45%;
    box-shadow: 0 0 0 2px var(--color-sable);
  }
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .on:has( > :nth-child(1):last-child) > :nth-child(1) {
    left: var(--on-1-1-x, 50%);
    top: var(--on-1-1-y, 45%);
    width: var(--charge-size, var(--on-size, 50%));
  }
  .on:has( > :nth-child(2):last-child) > :nth-child(1) {
    left: var(--on-2-1-x, 50%);
    top: var(--on-2-1-y, 24%);
    width: var(--charge-size, var(--on-size, 30%));
  }
  .on:has( > :nth-child(2):last-child) > :nth-child(2) {
    left: var(--on-2-2-x, 50%);
    top: var(--on-2-2-y, 66%);
    width: var(--charge-size, var(--on-size, 30%));
  }
  .on:has( > :nth-child(3):last-child) > :nth-child(1) {
    left: var(--on-3-1-x, 28%);
    top: var(--on-3-1-y, 25%);
    width: var(--charge-size, var(--on-size, 28%));
  }
  .on:has( > :nth-child(3):last-child) > :nth-child(2) {
    left: var(--on-3-2-x, 72%);
    top: var(--on-3-2-y, 25%);
    width: var(--charge-size, var(--on-size, 28%));
  }
  .on:has( > :nth-child(3):last-child) > :nth-child(3) {
    left: var(--on-3-3-x, 50%);
    top: var(--on-3-3-y, 64%);
    width: var(--charge-size, var(--on-size, 28%));
  }
  .on:has( > :nth-child(5):last-child) > :nth-child(1) {
    left: var(--on-5-1-x);
    top: var(--on-5-1-y);
    width: var(--charge-size, var(--on-size, 16%));
  }
  .on:has( > :nth-child(5):last-child) > :nth-child(2) {
    left: var(--on-5-2-x);
    top: var(--on-5-2-y);
    width: var(--charge-size, var(--on-size, 16%));
  }
  .on:has( > :nth-child(5):last-child) > :nth-child(3) {
    left: var(--on-5-3-x);
    top: var(--on-5-3-y);
    width: var(--charge-size, var(--on-size, 16%));
  }
  .on:has( > :nth-child(5):last-child) > :nth-child(4) {
    left: var(--on-5-4-x);
    top: var(--on-5-4-y);
    width: var(--charge-size, var(--on-size, 16%));
  }
  .on:has( > :nth-child(5):last-child) > :nth-child(5) {
    left: var(--on-5-5-x);
    top: var(--on-5-5-y);
    width: var(--charge-size, var(--on-size, 16%));
  }
  .in-bend:has( > :nth-child(2):last-child) > :nth-child(1) {
    left: 30%;
    top: 26%;
    width: var(--charge-size, 28%);
  }
  .in-bend:has( > :nth-child(2):last-child) > :nth-child(2) {
    left: 70%;
    top: 64%;
    width: var(--charge-size, 28%);
  }
  .in-bend:has( > :nth-child(3):last-child) > :nth-child(1) {
    left: 22%;
    top: 16%;
    width: var(--charge-size, 22%);
  }
  .in-bend:has( > :nth-child(3):last-child) > :nth-child(2) {
    left: 50%;
    top: 45%;
    width: var(--charge-size, 22%);
  }
  .in-bend:has( > :nth-child(3):last-child) > :nth-child(3) {
    left: 78%;
    top: 74%;
    width: var(--charge-size, 22%);
  }
  .in-fess:has( > :nth-child(2):last-child) > :nth-child(1) {
    left: 30%;
    top: 45%;
    width: var(--charge-size, 30%);
  }
  .in-fess:has( > :nth-child(2):last-child) > :nth-child(2) {
    left: 70%;
    top: 45%;
    width: var(--charge-size, 30%);
  }
  .in-fess:has( > :nth-child(3):last-child) > :nth-child(1) {
    left: 22%;
    top: 45%;
    width: var(--charge-size, 24%);
  }
  .in-fess:has( > :nth-child(3):last-child) > :nth-child(2) {
    left: 50%;
    top: 45%;
    width: var(--charge-size, 24%);
  }
  .in-fess:has( > :nth-child(3):last-child) > :nth-child(3) {
    left: 78%;
    top: 45%;
    width: var(--charge-size, 24%);
  }
  .in-pale:has( > :nth-child(2):last-child) > :nth-child(1) {
    left: 50%;
    top: 24%;
    width: var(--charge-size, 30%);
  }
  .in-pale:has( > :nth-child(2):last-child) > :nth-child(2) {
    left: 50%;
    top: 66%;
    width: var(--charge-size, 30%);
  }
  .in-pale:has( > :nth-child(3):last-child) > :nth-child(1) {
    left: 50%;
    top: 16%;
    width: var(--charge-size, 22%);
  }
  .in-pale:has( > :nth-child(3):last-child) > :nth-child(2) {
    left: 50%;
    top: 43%;
    width: var(--charge-size, 22%);
  }
  .in-pale:has( > :nth-child(3):last-child) > :nth-child(3) {
    left: 50%;
    top: 70%;
    width: var(--charge-size, 22%);
  }
  .between > :nth-child(1) {
    left: var(--between-1-x);
    top: var(--between-1-y);
    width: var(--charge-size, var(--between-size));
  }
  .between > :nth-child(2) {
    left: var(--between-2-x);
    top: var(--between-2-y);
    width: var(--charge-size, var(--between-size));
  }
  .between > :nth-child(3) {
    left: var(--between-3-x);
    top: var(--between-3-y);
    width: var(--charge-size, var(--between-size));
  }
  .between > :nth-child(4) {
    left: var(--between-4-x);
    top: var(--between-4-y);
    width: var(--charge-size, var(--between-size));
  }
  .charges > .in-base {
    left: 50%;
    top: 84%;
    width: var(--charge-size, 22%);
  }
  .charges > .in-chief {
    left: 50%;
    top: var(--chief-points-y, 15%);
    width: var(--charge-size, var(--chief-points-size, 22%));
  }
  .charges > .in-dexter-base {
    left: 30%;
    top: 72%;
    width: var(--charge-size, 22%);
  }
  .charges > .in-dexter-chief {
    left: 25%;
    top: var(--chief-points-y, 17%);
    width: var(--charge-size, var(--chief-points-size, 22%));
  }
  .charges > .in-fess-point {
    left: 50%;
    top: 45%;
    width: var(--charge-size, 22%);
  }
  .charges > .in-honour-point {
    left: 50%;
    top: 30%;
    width: var(--charge-size, 22%);
  }
  .charges > .in-nombril-point {
    left: 50%;
    top: 60%;
    width: var(--charge-size, 22%);
  }
  .charges > .in-sinister-base {
    left: 70%;
    top: 72%;
    width: var(--charge-size, 22%);
  }
  .charges > .in-sinister-chief {
    left: 75%;
    top: var(--chief-points-y, 17%);
    width: var(--charge-size, var(--chief-points-size, 22%));
  }
  .top-0 {
    top: 0px;
  }
  .z-10 {
    z-index: 10;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .examples {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    margin-block: 2rem;
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .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-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .ml-auto {
    margin-left: auto;
  }
  .per-pale {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .per-fess {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: 1fr;
  }
  .quarterly {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .hidden {
    display: none;
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .max-h-screen {
    max-height: 100vh;
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .resize {
    resize: both;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .bordure-argent {
    border-style: solid;
    border-width: 0.75rem;
    border-color: var(--color-argent);
  }
  .bordure-or {
    border-style: solid;
    border-width: 0.75rem;
    border-color: var(--color-or);
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-argent\/30 {
    border-color: color-mix(in srgb, #ffffff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-argent) 30%, transparent);
    }
  }
  .border-azure {
    border-color: var(--color-azure);
  }
  .border-sable {
    border-color: var(--color-sable);
  }
  .gyronny-or-gules {
    background-color: var(--color-gules);
    background-image: linear-gradient(to bottom left, var(--color-or) 50%, var(--color-gules) 50%), linear-gradient(to bottom right, var(--color-gules) 50%, var(--color-or) 50%), linear-gradient(to bottom left, var(--color-gules) 50%, var(--color-or) 50%), linear-gradient(to bottom right, var(--color-or) 50%, var(--color-gules) 50%);
    background-size: 50% 50%;
    background-position: left top, right top, right bottom, left bottom;
    background-repeat: no-repeat;
  }
  .gyronny-or-sable {
    background-color: var(--color-sable);
    background-image: linear-gradient(to bottom left, var(--color-or) 50%, var(--color-sable) 50%), linear-gradient(to bottom right, var(--color-sable) 50%, var(--color-or) 50%), linear-gradient(to bottom left, var(--color-sable) 50%, var(--color-or) 50%), linear-gradient(to bottom right, var(--color-or) 50%, var(--color-sable) 50%);
    background-size: 50% 50%;
    background-position: left top, right top, right bottom, left bottom;
    background-repeat: no-repeat;
  }
  .bezant {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-or);
  }
  .hurt {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-azure);
  }
  .pellet {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-sable);
  }
  .plate {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-argent);
  }
  .torteau {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-gules);
  }
  .argent {
    background-color: var(--color-argent);
  }
  .azure {
    background-color: var(--color-azure);
  }
  .bg-azure {
    background-color: var(--color-azure);
  }
  .gules {
    background-color: var(--color-gules);
  }
  .or {
    background-color: var(--color-or);
  }
  .purpure {
    background-color: var(--color-purpure);
  }
  .sable {
    background-color: var(--color-sable);
  }
  .vert {
    background-color: var(--color-vert);
  }
  .quarterly-azure-argent {
    background-image: linear-gradient(to right, var(--color-azure) 50%, var(--color-argent) 50%), linear-gradient(to right, var(--color-argent) 50%, var(--color-azure) 50%);
    background-size: 100% 50%, 100% 100%;
    background-position: top, top;
    background-repeat: no-repeat;
  }
  .quarterly-or-gules {
    background-image: linear-gradient(to right, var(--color-or) 50%, var(--color-gules) 50%), linear-gradient(to right, var(--color-gules) 50%, var(--color-or) 50%);
    background-size: 100% 50%, 100% 100%;
    background-position: top, top;
    background-repeat: no-repeat;
  }
  .per-bend-sinister-gules-argent {
    background-image: linear-gradient(to bottom right, var(--color-gules) 50%, var(--color-argent) 50%);
  }
  .per-bend-vert-or {
    background-image: linear-gradient(to bottom left, var(--color-vert) 50%, var(--color-or) 50%);
  }
  .per-fess-azure-argent {
    background-image: linear-gradient(to bottom, var(--color-azure) 50%, var(--color-argent) 50%);
  }
  .per-fess-or-azure {
    background-image: linear-gradient(to bottom, var(--color-or) 50%, var(--color-azure) 50%);
  }
  .per-pale-azure-gules {
    background-image: linear-gradient(to right, var(--color-azure) 50%, var(--color-gules) 50%);
  }
  .per-pale-or-gules {
    background-image: linear-gradient(to right, var(--color-or) 50%, var(--color-gules) 50%);
  }
  .per-pale-sable-purpure {
    background-image: linear-gradient(to right, var(--color-sable) 50%, var(--color-purpure) 50%);
  }
  .annulet {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2239%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%2214%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .billet {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Crect%20x%3D%2228%22%20y%3D%224%22%20width%3D%2244%22%20height%3D%2292%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .charge-\[url\(charges\/heart\.svg\)\] {
    mask-image: url(charges/heart.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .charge-\[url\(…\)\] {
    mask-image: url(…);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .crescent {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2235%22%20r%3D%2235%22%2F%3E%3C%2Fmask%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2254%22%20r%3D%2242%22%20mask%3D%22url(%23m)%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .fleur-de-lis {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M50%202C61%2016%2064%2036%2055%2056H45C36%2036%2039%2016%2050%202Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M55%2056C57%2038%2070%2024%2084%2026C97%2029%2099%2046%2089%2052C92%2044%2087%2037%2080%2039C71%2042%2066%2050%2066%2056Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M45%2056C43%2038%2030%2024%2016%2026C3%2029%201%2046%2011%2052C8%2044%2013%2037%2020%2039C29%2042%2034%2050%2034%2056Z%22%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2228%22%20y%3D%2256%22%20width%3D%2244%22%20height%3D%229%22%20rx%3D%222%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M45%2065H55C55%2074%2053%2082%2050%2090C47%2082%2045%2074%2045%2065Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M58%2065C62%2074%2072%2080%2084%2078C80%2088%2064%2090%2056%2074Z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M42%2065C38%2074%2028%2080%2016%2078C20%2088%2036%2090%2044%2074Z%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .lozenge {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpolygon%20points%3D%2250%2C2%2084%2C50%2050%2C98%2016%2C50%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .mullet {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpolygon%20points%3D%2250%2C5%2060.77763038603479%2C38.165864391140964%2095.65071278216737%2C38.16718427000252%2067.43857228278793%2C58.66613560885904%2078.2136921100387%2C91.83281572999748%2050%2C71.336%2021.786307889961293%2C91.83281572999748%2032.56142771721207%2C58.66613560885904%204.349287217832625%2C38.16718427000253%2039.22236961396521%2C38.16586439114097%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .roundel {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2246%22%2F%3E%3C%2Fsvg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  .mask-repeat {
    mask-repeat: repeat;
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .text-center {
    text-align: center;
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .text-argent {
    color: var(--color-argent);
  }
  .text-azure {
    color: var(--color-azure);
  }
  .text-gules {
    color: var(--color-gules);
  }
  .text-or {
    color: var(--color-or);
  }
  .text-purpure {
    color: var(--color-purpure);
  }
  .text-sable {
    color: var(--color-sable);
  }
  .text-sable\/50 {
    color: color-mix(in srgb, #141414 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-sable) 50%, transparent);
    }
  }
  .italic {
    font-style: italic;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .fimbriated-argent {
    --fimbriated: 1;
    --fimbriation: var(--color-argent);
  }
  .fimbriated-or {
    --fimbriated: 1;
    --fimbriation: var(--color-or);
  }
  .charge-size-11 {
    --charge-size: calc(11 * 1%);
  }
  .charge-size-15 {
    --charge-size: calc(15 * 1%);
  }
  .charge-size-16 {
    --charge-size: calc(16 * 1%);
  }
  .charge-size-20 {
    --charge-size: calc(20 * 1%);
  }
  .charge-size-75 {
    --charge-size: calc(75 * 1%);
  }
  .charge-size-\[2rem\] {
    --charge-size: 2rem;
  }
  :is(.\*\:flex > *) {
    display: flex;
  }
  :is(.\*\:items-center > *) {
    align-items: center;
  }
  :is(.\*\:justify-center > *) {
    justify-content: center;
  }
  :is(.\*\:rounded-full > *) {
    border-radius: calc(infinity * 1px);
  }
  :is(.\*\:argent > *) {
    background-color: var(--color-argent);
  }
  :is(.\*\:text-xs > *) {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .group-aria-expanded\:block:is(:where(.group)[aria-expanded="true"] *) {
    display: block;
  }
  .group-aria-expanded\:hidden:is(:where(.group)[aria-expanded="true"] *) {
    display: none;
  }
  @media (hover: hover) {
    .hover\:text-argent:hover {
      color: var(--color-argent);
    }
    .hover\:text-or:hover {
      color: var(--color-or);
    }
  }
  @media (width >= 40rem) {
    .sm\:inline {
      display: inline;
    }
  }
  @media (width >= 48rem) {
    .md\:static {
      position: static;
    }
    .md\:mt-0 {
      margin-top: 0px;
    }
    .md\:per-pale {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
    .md\:block {
      display: block;
    }
    .md\:grid {
      display: grid;
    }
    .md\:hidden {
      display: none;
    }
    .md\:grid-cols-\[11rem_1fr\] {
      grid-template-columns: 11rem 1fr;
    }
    .md\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
  }
}
@property --fimbriated {
  syntax: "*";
  inherits: false;
}
@property --fimbriation {
  syntax: "*";
  inherits: false;
}
@font-face {
  font-family: "Junicode";
  src: url("fonts/JunicodeVF-Roman.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Junicode";
  src: url("fonts/JunicodeVF-Italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@layer base {
  html {
    scroll-behavior: smooth;
  }
  a {
    color: var(--color-azure);
    text-decoration-line: underline;
    text-underline-offset: 2px;
    &:hover {
      @media (hover: hover) {
        color: var(--color-gules);
      }
    }
  }
  nav a {
    color: var(--color-sable);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-gules);
      }
    }
  }
  header nav a {
    color: var(--color-argent);
    &:hover {
      @media (hover: hover) {
        color: var(--color-or);
      }
    }
  }
  nav a[aria-current] {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  nav > ul > li > a {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  nav ul ul {
    margin-top: var(--spacing);
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: color-mix(in srgb, #141414 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sable) 20%, transparent);
    }
    font-size: 0.9375rem;
  }
  header nav ul ul {
    border-color: color-mix(in srgb, #ffffff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-argent) 30%, transparent);
    }
  }
  nav ul ul a {
    margin-left: -1px;
    display: block;
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: transparent;
    padding-left: calc(var(--spacing) * 3);
  }
  nav ul ul a[aria-current] {
    border-color: var(--color-gules);
    text-decoration-line: none;
  }
  header nav ul ul a[aria-current] {
    border-color: var(--color-or);
  }
  main [id] {
    scroll-margin-top: calc(var(--spacing) * 24);
    @media (width >= 48rem) {
      scroll-margin-top: calc(var(--spacing) * 8);
    }
  }
  main :is(h1, h2, h3) {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  main h2 {
    margin-top: calc(var(--spacing) * 20);
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  main h3 {
    margin-top: calc(var(--spacing) * 12);
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  main > section > p {
    margin-bottom: calc(var(--spacing) * 4);
    max-width: 65ch;
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  code {
    font-family: var(--font-mono);
    font-size: 0.85em;
  }
  pre {
    overflow-x: auto;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #141414 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sable) 30%, transparent);
    }
    padding: calc(var(--spacing) * 3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@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-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --fimbriated: initial;
      --fimbriation: initial;
      --tw-font-weight: initial;
    }
  }
}