@charset "UTF-8";
/*
$breakpoints: (
  "": 0,
  "-sm": 576px,
  "-md": 768px,
  "-lg": 992px,
  "-xl": 1200px
) !default;
*/
:root {
  font-size: 14px; /* výchozí rem */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  /* === UI base (dark UI) === */
  --header:#0e1318;
  --elev1:#242b35;
  --surface-1: var(--elev1);
  --surface-2: color-mix(in oklab, var(--elev1) 82%, black);
  --surface-3: color-mix(in oklab, var(--elev1) 64%, black);
  /* text & borders */
  --text:#e6e9ee;
  --muted:#b9c0ca;
  --icon-contrast:#ffffff;
  --ui-border: rgba(255,255,255,.12);
  /* === STATES (base) === */
  --ok:#317d50;
  --ok-fg:#ffffff;
  --warn:#f59e0b;
  --warn-fg:#ffffff;
  --err:#b72634;
  --err-fg:#ffffff;
  --inf:#187a93;
  --inf-fg:#ffffff;
  /* === Palety (p/s/a, n) === */
  /* Primary (Amber/Gold) p1..p12 */
  --p1:#FFF8E1;
  --p1-fg:#0b0d10;
  --p2:#FFECB3;
  --p2-fg:#0b0d10;
  --p3:#FFE082;
  --p3-fg:#0b0d10;
  --p4:#FFD54F;
  --p4-fg:#0b0d10;
  --p5:#FFCA28;
  --p5-fg:#0b0d10;
  --p6:#FFB300;
  --p6-fg:#0b0d10;
  --p7:#FFA000;
  --p7-fg:#0b0d10;
  --p8:#FF8F00;
  --p8-fg:#ffffff;
  --p9:#FF6F00;
  --p9-fg:#ffffff;
  --p10:#E65100;
  --p10-fg:#ffffff;
  --p11:#BF4900;
  --p11-fg:#ffffff;
  --p12:#993D00;
  --p12-fg:#ffffff;
  /* Secondary (Brown) s1..s12 */
  --s1: #E2DFDD;
  --s1-fg:#0b0d10;
  --s2: #C9C5C3;
  --s2-fg:#0b0d10;
  --s3: #ADA9A7;
  --s3-fg:#0b0d10;
  --s4: #93908E;
  --s4-fg:#0b0d10;
  --s5: #7A7775;
  --s5-fg:#ffffff;
  --s6: #636668;
  --s6-fg:#ffffff; /* hlavní odstín */
  --s7: #555758;
  --s7-fg:#ffffff;
  --s8: #484C50;
  --s8-fg:#ffffff;
  --s9: #403F40;
  --s9-fg:#ffffff;
  --s10: #393C3F;
  --s10-fg:#ffffff;
  --s11: #2A2B2C;
  --s11-fg:#ffffff;
  --s12: #1A1B1C;
  --s12-fg:#ffffff;
  /* Accent (Beige/Ivory) a1..a12 */
  --a1: #FFFAF5;
  --a1-fg:#0b0d10;
  --a2: #FFF4E8;
  --a2-fg:#0b0d10;
  --a3: #FFEBD4;
  --a3-fg:#0b0d10;
  --a4: #FEE1BC;
  --a4-fg:#0b0d10;
  --a5: #FFD7A3;
  --a5-fg:#0b0d10;
  --a6: #FBCB8C;
  --a6-fg:#0b0d10;
  --a7: #F1C178;
  --a7-fg:#0b0d10;
  --a8: #E5B669;
  --a8-fg:#0b0d10;
  --a9: #D8A95D;
  --a9-fg:#ffffff;
  --a10: #C89A52;
  --a10-fg:#ffffff;
  --a11: #B18744;
  --a11-fg:#ffffff;
  --a12: #937037;
  --a12-fg:#ffffff;
  /* Neutral n1..n12 */
  --n1:#f9fafb;
  --n2:#f3f4f6;
  --n3:#e5e7eb;
  --n4:#d1d5db;
  --n5:#9ca3af;
  --n6:#6b7280;
  --n7:#4b5563;
  --n8:#374151;
  --n9:#1f2937;
  --n10:#111827;
  --n11:#0f172a;
  --n12:#0a0f1a;
  /* helpers */
  --soft-alpha:80%;
  --tint-strength:22%;
  --shade-strength:18%;
  /* semantic borders */
  --border-subtle: color-mix(in oklab, var(--ui-border) 70%, var(--n8));
  --border-strong: color-mix(in oklab, var(--ui-border) 30%, var(--n6));
  /* overlay */
  --overlay: color-mix(in oklab, black 60%, transparent);
  /* spacing */
  --inset: 1rem;
  /* ============================================================
     ROLE (nejčastěji používané)
     ============================================================ */
  /* Brand roles */
  --primary: var(--p9);
  --primary-fg: var(--p9-fg);
  --primary-hover: var(--p10);
  --primary-weak: color-mix(in oklab, var(--p7) var(--soft-alpha), var(--elev1));
  --primary-border: var(--n4);
  --secondary: var(--s7);
  --secondary-fg: var(--s7-fg);
  --secondary-hover: var(--s8);
  --secondary-weak: color-mix(in oklab, var(--s7) var(--soft-alpha), var(--elev1));
  --secondary-border: var(--n5);
  --accent: var(--a6);
  --accent-fg: var(--a6-fg);
  --accent-hover: var(--a7);
  --accent-weak: color-mix(in oklab, var(--a6) var(--soft-alpha), var(--elev1));
  --accent-border: var(--a7);
  /* Links (brand-based) */
  --link: var(--p10);
  --link-hover: color-mix(in oklab, var(--p11) 88%, black);
  --link-visited:color-mix(in oklab, var(--p12) 85%, var(--p11));
  /* Semantic roles */
  --success: var(--ok);
  --success-fg: var(--ok-fg);
  --success-hover: color-mix(in oklab, var(--ok) 88%, black);
  --success-weak: color-mix(in oklab, var(--ok) var(--soft-alpha), var(--elev1));
  --success-border: color-mix(in oklab, var(--ok) 80%, white);
  --warning: var(--warn);
  --warning-fg: var(--warn-fg);
  --warning-hover: color-mix(in oklab, var(--warn) 88%, black);
  --warning-weak: color-mix(in oklab, var(--warn) var(--soft-alpha), var(--elev1));
  --warning-border: color-mix(in oklab, var(--warn) 80%, white);
  --error: var(--err);
  --error-fg: var(--err-fg);
  --error-hover: color-mix(in oklab, var(--err) 88%, black);
  --error-weak: color-mix(in oklab, var(--err) var(--soft-alpha), var(--elev1));
  --error-border: color-mix(in oklab, var(--err) 80%, white);
  --info-color: var(--inf);
  --info-fg: var(--inf-fg);
  --info-hover: color-mix(in oklab, var(--inf) 88%, black);
  --info-weak: color-mix(in oklab, var(--inf) var(--soft-alpha), var(--elev1));
  --info-border: color-mix(in oklab, var(--inf) 80%, white);
  /* Focus & selection */
  --ui-ring: color-mix(in oklab, var(--p7) 60%, white);
  --selection-bg: color-mix(in oklab, var(--p7) 30%, var(--n10));
  --selection-fg: var(--icon-contrast);
  /* App */
  --text-app: var(--s10);
  --bg-app:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--n4) 45%, transparent) 12%, transparent 60%),
    radial-gradient(1200px 700px at 110% 20%, color-mix(in oklab, var(--n5) 45%, transparent) 8%, transparent 60%),
    var(--n2);
  --bg-muted: color-mix(in oklab, var(--n10) 80%, black);
  --bg-subtle: color-mix(in oklab, var(--n9) 60%, black);
  /* Shadows */
  --primary-shadow-glow: 0 0 20px var(--n4);
  --secondary-shadow-glow: 0 0 20px var(--s2);
  --accent-shadow-glow: 0 0 20px var(--a2);
  /* ============================================================
     shoelace.style - konfigurace barevnosti komponent
     ============================================================ */
  /* tvé stávající */
  --sl-color-primary-600: var(--primary);
  --sl-input-border-color: var(--s2);
  --sl-input-background-color: white;
  --sl-input-color: var(--n10);
  /* FOCUS: barva orámování („ring“) a border na focusu */
  --sl-input-focus-ring-color: var(--a10);
  /* barva zvýraznění */
  --sl-input-border-color-focus: var(--n4);
  /* barva hranice při focusu */
  /* volitelné: tloušťka a odsazení prstence (globální tokeny) */
  --sl-focus-ring-width: 1px;
  --sl-focus-ring-offset: 1px;
  /* zvedni vrstvy pro popovery/dropdowny, aby přelezly tvůj modal */
  --sl-z-index-dropdown: 20000001;
  --sl-z-index-popover: 20000001;
  --sl-z-index-toast: 20000001;
  --sl-z-index-tooltip: 20000001;
  --sl-z-index-dialog: 20000001;
}

@layer core {
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  /* Document
    ========================================================================== */
  html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }
  /* Sections
    ========================================================================== */
  body {
    margin: 0;
  }
  main {
    display: block;
  }
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  /* Grouping content
    ========================================================================== */
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  pre {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  /* Text-level semantics
    ========================================================================== */
  a {
    background-color: transparent;
  }
  abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp {
    font-family: monospace, monospace;
    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;
  }
  /* Embedded content
    ========================================================================== */
  img {
    border-style: none;
  }
  /* Forms
    ========================================================================== */
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
  }
  button,
  input {
    overflow: visible;
  }
  button,
  select {
    text-transform: none;
  }
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button;
  }
  button::-moz-focus-inner,
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  button:-moz-focusring,
  [type=button]:-moz-focusring,
  [type=reset]:-moz-focusring,
  [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
  }
  progress {
    vertical-align: baseline;
  }
  textarea {
    overflow: auto;
  }
  [type=checkbox],
  [type=radio] {
    box-sizing: border-box;
    padding: 0;
  }
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  [type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }
  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }
  /* Interactive
    ========================================================================== */
  details {
    display: block;
  }
  summary {
    display: list-item;
  }
  /* Misc
    ========================================================================== */
  template {
    display: none;
  }
  [hidden] {
    display: none;
  }
}
@layer core {
  /* ---- Reset & base ---- */
  * {
    box-sizing: border-box;
  }
  /*  ----  Links  ----  */
  a {
    color: var(--link);
    text-decoration: none;
  }
  a:hover {
    color: var(--link-hover);
  }
  a:visited {
    color: var(--link-visited);
  }
}
@layer core {
  /* Data view: target area for snippets */
  [data-view] {
    position: relative;
  }
  /* Data type: prebij vychozi inline ci block vlastnost */
  [data-type=inline] {
    display: inline;
  }
  [data-type=block] {
    display: block;
  }
  /* Roztahovaci prostor do okna */
  .space {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .inset {
    padding: var(--inset);
  }
  /* Set as top desktop*/
  .desktop-top {
    z-index: 66666;
  }
  /* Layer */
  .layer {
    position: absolute;
    container-type: inline-size; /* Důležité aby se obsah choval responzivně jako v prohlížeči při resize... */
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 55555;
  }
}
@layer components {
  [data-component=tinymce-textarea] {
    display: none;
  }
  .mce-image-resize-handles {
    display: none;
  }
  .tox-tinymce {
    height: 100% !important;
    height: 100% !important;
  }
  .tox-promotion {
    display: none !important;
  }
  .tox-statusbar {
    display: none !important;
  }
}
@layer components {
  /* Tooltip sám „nechytá“ myš – kurzor přes bublinu ho neudrží otevřený */
  sl-tooltip::part(base__popup),
  sl-tooltip::part(body),
  sl-tooltip::part(base__arrow) {
    pointer-events: none;
  }
  /* Okamžité skrytí po opuštění cíle */
  sl-tooltip {
    --hide-delay: 0ms;
  }
  /* rohová badge přes ikonu – levý spodní roh */
  .fi__badge {
    position: absolute;
    left: 3px;
    bottom: 1px;
    z-index: 1;
    pointer-events: none; /* klik prochází na <a> */
  }
  /* zmenšení „pilulky“ a ikonky v ní (nepovinné) */
  .fi__badge::part(base) {
    padding: 0.1em 0.25em;
  }
  .fi__badge i {
    font-size: 0.7em;
    line-height: 1;
  }
  /* Breadcrumb */
  /* drž vše na jednom řádku */
  sl-breadcrumb::part(base) {
    display: flex;
    flex-wrap: nowrap; /* žádné zalamování */
    white-space: nowrap;
  }
  /* ať se položky můžou “smrsknout” a dělat trojtečku */
  sl-breadcrumb-item {
    min-width: 0; /* důležité pro flex + ellipsis */
  }
  sl-breadcrumb-item::part(label) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* pro všechny <sl-drawer> */
  sl-drawer {
    /* velikost zásuvky podle směru (top/bottom = výška, left/right = šířka) */
    --size: fit-content;
  }
  /* pojistka na skutečný panel uvnitř shadow DOM */
  sl-drawer::part(panel) {
    max-height: 100%; /* celá výška viewportu; můžeš dát i 100vh */
  }
}
@layer components {
  fieldset,
  legend {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  fieldset {
    padding: 1.5rem 1.25rem 1.25rem;
    border: 1px solid var(--n4);
    border-radius: 0.75rem;
    background: var(--n1);
  }
  legend {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--n9);
    padding: 0 0.25rem 0.25rem 0.25rem;
    /* podtržení brand barvou */
  }
  legend svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    stroke: currentColor;
  }
}
@layer components {
  .button,
  input.button {
    border: 1px solid var(--primary-border);
    background: var(--primary);
    color: var(--primary-fg);
    display: inline-flex;
    gap: 0.25em;
    min-height: var(--button-height, 2.5rem);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0.5em 0.75em;
    margin: 0;
    border-radius: var(--button-radius, 0.5rem);
    font-weight: var(--fw-bold, 600);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
  }
  .button:hover {
    border-color: color-mix(in oklab, var(--primary) var(--soft-alpha));
    background: var(--primary-hover);
    color: var(--primary-fg);
    box-shadow: var(--primary-shadow-glow);
  }
  .button:focus-visible {
    outline: 2px solid var(--ui-ring);
    outline-offset: 2px;
  }
  /* ==== Outlined ==== */
  .button--outlined,
  input.button--outlined {
    border-color: var(--primary-border);
    background-color: transparent;
    color: var(--primary);
  }
  .button--outlined:hover {
    border-color: var(--primary-hover);
    background-color: var(--primary-hover);
    color: var(--primary-fg);
  }
  /* ==== Role varianty ==== */
  .button--secondary {
    border-color: var(--secondary-border);
    background: var(--secondary);
    color: var(--secondary-fg);
  }
  .button--secondary:hover {
    border-color: color-mix(in oklab, var(--secondary-hover) var(--soft-alpha));
    background-color: var(--secondary-hover);
    color: var(--secondary-fg);
  }
  .button--accent {
    border-color: var(--accent-border);
    background-color: var(--accent);
    color: var(--accent-fg);
  }
  .button--accent:hover {
    border-color: color-mix(in oklab, var(--accent) var(--soft-alpha));
    background-color: var(--accent-hover);
    color: var(--accent-fg);
  }
  .button--success {
    border-color: var(--success-border);
    background-color: var(--success);
    color: var(--success-fg);
  }
  .button--success:hover {
    border-color: var(--success-hover);
    background-color: var(--success-hover);
    color: var(--success-fg);
  }
  .button--warning {
    border-color: var(--warning-border);
    background-color: var(--warning);
    color: var(--warning-fg);
  }
  .button--warning:hover {
    border-color: var(--warning-hover);
    background-color: var(--warning-hover);
    color: var(--warning-fg);
  }
  .button--error {
    border-color: var(--error-border);
    background-color: var(--error);
    color: var(--error-fg);
  }
  .button--error:hover {
    border-color: var(--error-hover);
    background-color: var(--error-hover);
    color: var(--error-fg);
  }
  .button--info {
    border-color: var(--info-border);
    background-color: var(--info-color);
    color: var(--info-fg);
  }
  .button--info:hover {
    border-color: var(--info-hover);
    background-color: var(--info-hover);
    color: var(--info-fg);
  }
  /* ==== Neutrals ==== */
  .button--white {
    border-color: var(--n1);
    background-color: var(--n1);
    color: var(--n10);
  }
  .button--white:hover {
    border-color: var(--n2);
    background-color: var(--n2);
  }
  .button--black {
    border-color: var(--n10);
    background-color: var(--n10);
    color: var(--n1);
  }
  .button--black:hover {
    border-color: var(--n7);
    background-color: var(--n7);
  }
  /* ==== Neutral gray ==== */
  .button--gray {
    border-color: var(--n5);
    background-color: var(--n6);
    color: var(--icon-contrast);
  }
  .button--gray:hover {
    border-color: var(--n7);
    background-color: var(--n7);
    color: var(--icon-contrast);
  }
  /* ==== Neutral gray (outlined) ==== */
  .button--gray-outline {
    border-color: var(--n7);
    background-color: transparent;
    color: var(--n7);
  }
  .button--gray-outline:hover {
    border-color: var(--n8);
    background-color: var(--n8);
    color: var(--icon-contrast);
  }
  /* ==== Tvary ==== */
  .button--rounded {
    inline-size: var(--button-height, 2.5rem); /* šířka = výška */
    block-size: var(--button-height, 2.5rem);
    padding: 0; /* žádný horizontální padding */
    border-radius: 50%;
    aspect-ratio: 1; /* pojistka */
  }
  /* ať se SVG pěkně vejde a nedeformuje */
  .button--rounded > svg {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
  }
  /* ==== Velikosti ==== */
  .button--big {
    font-size: 1.3rem;
    padding: 0.75em 1em;
  }
  .button--small {
    font-size: 0.8rem;
    padding: 0.4em 1em;
  }
  .button--wide {
    width: 100%;
  }
  /* ==== Ikony v buttonu ==== */
  .button :where(svg) {
    display: inline-block;
    width: 1.25em; /* nebo 1.5em – větší než text */
    height: 1.25em;
    flex: 0 0 auto;
    vertical-align: -0.125em;
  }
  .button :where(svg, svg *) {
    fill: currentColor;
    stroke: currentColor;
  }
  .button :where(svg[fill=none], svg *[fill=none]) {
    fill: none;
  }
  .button :where(svg[stroke=none], svg *[stroke=none]) {
    stroke: none;
  }
  .button--light {
    background: linear-gradient(135deg, var(--p8), var(--p10));
    color: var(--n12);
    background: var(--n1, #f9fafb);
  }
  .button--light:hover {
    color: var(--a12);
    background: var(--a2);
    border-color: var(--a12);
  }
  .button--dark {
    border-color: var(--n5);
    background: linear-gradient(135deg, var(--s5), var(--s7));
    color: var(--a1);
  }
  .button--dark:hover {
    border-color: var(--a6);
    background: linear-gradient(135deg, var(--s7), var(--s10));
    color: var(--a6);
  }
  .button--danger:hover {
    box-shadow: 0 0 20px var(--error);
  }
  /* Actions tlačítka */
  .buttons {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    gap: 0.25rem;
  }
  /* --- Checkbox button --- */
  .button--checkbox {
    /* rozměry a tvar */
    --button-height: 1.6rem; /* pro kompatibilitu s base */
    width: 1.6rem;
    min-width: 1.6rem; /* drží čtverec při inline-flex */
    height: 1.6rem; /* (min-height už pokrývá, ale explicitní height pomůže v některých resetech) */
    padding: 0; /* bez vnitřních okrajů */
    border-radius: 0.4rem;
    /* vzhled dle tvé .select-btn */
    border: 1px solid var(--primary-border);
    background: linear-gradient(145deg, var(--p1), var(--p3));
    /* chování */
    gap: 0; /* u čtverce typicky bez mezery */
    /* barva obsahu uvnitř (třeba ✓) */
    color: #6b7280;
  }
  .button--checkbox-checked {
    border-color: var(--primary);
    background: linear-gradient(145deg, var(--p7), var(--p8));
    color: #fff;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.22), 0 3px 8px rgba(249, 115, 22, 0.35);
  }
  .button--checkbox:hover {
    border-color: #f97316;
    background: linear-gradient(145deg, var(--p4), var(--p5));
    color: #fff;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.22), 0 3px 8px rgba(148, 136, 127, 0.35);
  }
  /* --- Drag handle --- */
  .drag-handle {
    display: inline-block;
    text-align: center;
    font-size: 1.3em;
    line-height: 1;
    color: var(--n12);
    cursor: grab;
    user-select: none;
  }
  /* ==== Stav disabled ==== */
  .button--disabled,
  .button--disabled:hover {
    border-color: var(--n6);
    background: transparent;
    color: var(--n6);
    cursor: not-allowed;
  }
}
@layer components {
  .bar {
    display: flex;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    gap: 0.4rem;
    width: 100%;
    overflow-x: auto !important;
    align-items: center;
  }
}
@layer components {
  /* Lišta s taby */
  .bar.bar--tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--s2);
    border: 1px solid var(--n4);
    border-bottom: none;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    /* Tab */
  }
  .bar.bar--tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--n3);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--s2-fg);
    background: var(--s1); /* jemné pozadí už v klidu */
    position: relative;
    top: 1px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .bar.bar--tabs .tab:hover {
    background: var(--n1);
    color: var(--n8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .bar.bar--tabs {
    /* Aktivní */
  }
  .bar.bar--tabs .tab.active {
    background: var(--n1);
    color: var(--primary);
    border-color: var(--n4) var(--n4) transparent var(--n4);
    border-bottom: 1px solid var(--n1);
    z-index: 1;
    box-shadow: none;
  }
  .bar.bar--tabs {
    /* Ikony */
  }
  .bar.bar--tabs .tab svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: currentColor;
  }
  /* Obsah */
  .tab__content {
    border: 1px solid var(--n4);
    border-top: none;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    color: var(--n8);
  }
  .bar.bar--tabs-simple {
    background: transparent;
    border: none;
    width: auto;
  }
}
@layer components {
  /* UL jako flex kontejner */
  .pager {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    color: var(--n10);
  }
  /* Položky */
  .pager__item {
    display: inline-flex;
  }
  /* Odkazy a tečky */
  .pager__link,
  .pager__ellipsis {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--n4);
    background: var(--n1);
    color: var(--n9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  }
  /* Hover / Focus */
  .pager__link:hover {
    background: var(--a3, #ffebd4);
    border-color: var(--a5, #ffd7a3);
    transform: translateY(-1px);
  }
  .pager__link:focus-visible {
    outline: 2px solid var(--a6, #fbcb8c);
    outline-offset: 2px;
  }
  /* Aktivní */
  .pager__item.is-active .pager__link {
    background: var(--p7);
    border-color: var(--p9);
    color: var(--n1);
    cursor: default;
    transform: none;
  }
  .pager__item.is-active .pager__link:hover {
    background: var(--p9);
    border-color: var(--p11);
  }
  /* Disabled */
  .pager__item.is-disabled .pager__link {
    background: var(--n2);
    color: var(--n6);
    border-color: var(--n3);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
  }
  /* Trojtečka */
  .pager__ellipsis {
    pointer-events: none;
    border-style: dashed;
    color: var(--n6);
  }
}
@layer components {
  /* === Modal (header + footer bars) === */
  :root {
    --desktop-background: var(--bg-app);
    --desktop-text: var(--text-app);
    --desktop-border: 1px solid var(--p1);
    --desktop-background: var(--bg-app);
    --desktop-text: var(--text-app);
    --desktop-border: 1px solid var(--p1);
    --desktop-header-background: linear-gradient(
      135deg,
      var(--s9),
      var(--s7),
      var(--s9)
    );
    --desktop-header-text: var(--p1);
    --desktop-header-border: var(--n4);
    --desktop-header-shadow: inset 0 -1px 3px var(--n3);
    --desktop-footer-background: linear-gradient(
      135deg,
      var(--s8),
      var(--s6),
      var(--s8)
    );
    --desktop-footer-text: var(--p12);
    --desktop-footer-border: var(--n4);
    --desktop-footer-shadow: inset 0 1px 3px var(--n3);
  }
  .desktop {
    background: var(--modal-background);
    color: var(--modal-text);
    border: var(--modal-border);
    border-radius: 0.95rem;
    box-shadow: 0 0.75rem 2.2rem var(--n5);
  }
  .bar.desktop__bar--header {
    border-bottom: 1px solid var(--desktop-header-border);
    color: var(--mdesktopdal-header-text);
    background: var(--desktop-header-background);
    box-shadow: var(--desktop-header-shadow);
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  }
  .desktop__bar--header .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0%;
  }
  .brand-title {
    font-weight: 800;
    letter-spacing: 0.003em;
    line-height: 1.1;
    font-size: 18px;
    color: var(--p1);
  }
  .brand-sub {
    opacity: 0.7;
    font-weight: 700;
    font-size: 13px;
    margin-top: -2px;
    display: block;
  }
  .bar.desktop__bar--footer {
    border-top: 1px solid var(--desktop-footer-border);
    color: var(--desktop-footer-text);
    background: var(--desktop-footer-background);
    box-shadow: var(--desktop-footer-shadow);
    padding: 0 0.75rem 0 0;
    font-size: 0.85rem;
  }
  .bar.desktop__bar--footer .desktop-bar-switch .button {
    width: 3em;
    height: 3em;
  }
  .bar.desktop__bar--footer .desktop-bar-switch .active {
    background: linear-gradient(135deg, var(--p8), var(--p10));
    color: var(--n12);
    background: var(--n1, #f9fafb);
  }
  /* -- Prepinac plochy --- */
  .controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 999px;
    box-shadow: 0 8px 24px var(--s4);
    border: 1px solid var(--s5);
  }
}
/*
@mixin media($suffix) {
  $md-min: map.get(t.$breakpoints, "-md");       // 768px
  $desktop-min: map.get(t.$breakpoints, "");     // 1200px

  $sm-max: $md-min - 1px;          // 767px
  $md-max: $desktop-min - 1px;     // 1199px

  @if $suffix == "" {
    // Desktop (≥1200px) – default
    @content;

  } @else if $suffix == "-md" {
    // Tablety 768–1199px
    @media screen and (min-width: $md-min) and (max-width: $md-max) {
      @content;
    }

  } @else if $suffix == "-sm" {
    // Mobily ≤767px
    @media screen and (max-width: $sm-max) {
      @content;
    }
  }
}
*/
@layer components {
  :root {
    --modal-background: var(--bg-app);
    --modal-text: var(--text-app);
    --modal-border: 1px solid var(--p1);
    --modal-header-background: var(--s5);
    --modal-header-text: var(--p1);
    --modal-header-border: var(--n4);
    --modal-header-shadow: inset 0 -1px 3px var(--n3);
    --modal-footer-background: var(--s1);
    --modal-footer-text: var(--text-app);
    --modal-footer-border: var(--n4);
    --modal-footer-shadow: inset 0 1px 3px var(--n3);
  }
  .modal {
    display: flex;
    background: var(--modal-background);
    color: var(--modal-text);
    border: var(--modal-border);
    border-radius: 0.95rem;
    box-shadow: 0 0.75rem 2.2rem var(--n5);
  }
  .modal.active {
    outline: solid 1px var(--primary);
  }
  .bar.modal__bar--header {
    border-bottom: 1px solid var(--modal-header-border);
    color: var(--modal-header-text);
    background: var(--modal-header-background);
    box-shadow: var(--modal-header-shadow);
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  }
  .bar.modal__bar--footer {
    border-top: 1px solid var(--modal-footer-border);
    color: var(--modal-footer-text);
    background: var(--modal-footer-background);
    box-shadow: var(--modal-footer-shadow);
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  }
  .modal__title {
    color: var(--p1);
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}
@layer components {
  /* Obal tabulky pro scrollovani */
  .table-wrapper {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    overflow-x: auto;
    align-items: start;
    border: 1px solid var(--n4);
    border-radius: 0.95rem;
    box-shadow: 0 0.75rem 1.85rem var(--a2);
    background: var(--n1);
    flex-shrink: 0;
    flex-wrap: 0;
  }
  /* Tabulka */
  .list-table {
    width: 100%;
    border-collapse: collapse;
  }
  .list-table thead th {
    text-align: left;
    font-weight: 600;
    background: var(--s2);
    color: var(--s2-fg);
    border-bottom: 1px solid var(--n4);
    white-space: nowrap;
  }
  .list-table td {
    border-bottom: 1px solid var(--n3);
    vertical-align: middle;
  }
  .list-table tbody tr:nth-child(even) td {
    background: var(--n2);
  }
  .list-table tbody tr:hover td {
    background-color: var(--p1); /* světle šedá */
  }
  .list-table .td,
  .list-table .th {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100% !important;
    height: 100% !important;
    min-height: 2.3rem;
    flex-wrap: nowrap;
    padding: 0.24em 0.5em;
  }
  .list-table .main {
    min-width: 10rem;
  }
}
@layer components {
  .drawer-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  }
  .drawer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(24, 34, 56, 0.08);
    border-color: transparent;
  }
  .drawer-card:focus-visible {
    outline: 3px solid #111827;
    outline-offset: 3px;
  }
  .drawer-card__icon {
    font-size: 2rem;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 120% at 10% 0%, #eff6ff, #e5e7eb);
    color: var(--primary);
  }
  .drawer-card__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .drawer-card__title {
    margin: 2px 0 4px;
    font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  .drawer-card__desc {
    margin: 0;
    color: #475467;
    font-size: 13.5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .drawer-card:hover {
    transform: translateX(2px);
    opacity: 0.9;
  }
}
@layer components {
  .module-card:hover, .module-card.is-active {
    box-shadow: 0 0 20px var(--a6);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 35%, var(--a3) 60%, rgba(255, 255, 255, 0.05) 100%);
  }
  .module-card, .module-card--static:hover {
    color: var(--n12);
    border-radius: 1.3rem;
    padding: 24px;
    border: 1px solid var(--n3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 35%, rgba(0, 0, 0, 0.18) 60%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .module-card .meta {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 2px;
  }
  .module-card .tile {
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    font-size: 1.5rem;
    display: grid;
    place-items: center;
    color: var(--a1);
    background: linear-gradient(135deg, var(--s5), var(--s6), var(--s7));
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.25);
  }
  .module-card h3 {
    color: var(--primary);
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 4px 0;
    letter-spacing: 0.01em;
  }
  .module-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
  }
}
@layer components {
  /* ====== Layout karty ====== */
  .auth {
    display: grid;
    place-items: center;
    min-height: 80vh;
    padding: clamp(1rem, 3vw, 3rem);
    background: var(--bg-app);
    width: 100%;
    height: 100%;
  }
  .auth__card {
    width: min(92vw, 420px);
    background: white;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary), #000 22%), 0 8px 18px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border: 1px solid var(--n1);
    color: var(--primary);
  }
  /* ====== Brand bar (desktop header vibe) ====== */
  .auth__brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.9rem 1.1rem;
    background: var(--s5);
    color: var(--p1);
    position: relative;
  }
  .auth__brand-sub {
    display: block;
    font-size: 0.8rem;
    opacity: 0.85;
  }
  .auth__logo {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in oklab, var(--primary), #000 12%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary), #000 22%), 0 8px 18px rgba(0, 0, 0, 0.25);
  }
  .auth__logo svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  /* ====== Tělo karty ====== */
  .auth__body {
    padding: 2rem 2rem 2rem;
    background: var(--bg-app);
  }
}
@layer components {
  .pos-card {
    display: grid;
    place-items: center;
    min-width: 180px;
    min-height: 150px;
    gap: 6px;
    padding: 10px 8px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    user-select: none;
  }
  .pos-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #d7dbe0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 35%, var(--a3) 60%, rgba(255, 255, 255, 0.05) 100%);
  }
  .pos-card:active {
    transform: translateY(0);
  }
  .pos-card .pos-label {
    font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #222;
    text-align: center;
  }
  .pos-card:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  }
  /* volitelně pro „zvolenou“ variantu */
  .pos-card.is-active {
    background: #f6faff;
    border-color: #c9ddff;
  }
}
@layer components {
  .comp-card {
    position: relative;
    border: 1px solid var(--n1);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--n3);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  /* obsah karty jako odkaz */
  .comp-card__link {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    background: var(--n1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, var(--n1) 50%, rgba(255, 255, 255, 0.05) 100%);
    color: inherit;
    text-decoration: none;
    min-height: 7rem;
  }
  .comp-card__dir {
    background: var(--s1);
  }
  .comp-card__link:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, var(--a2) 50%, rgba(255, 255, 255, 0.05) 100%);
  }
  .comp-card__link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--primary) 28%, #fff);
    border-radius: calc(1rem - 2px);
  }
  .comp-card__glyph {
    inline-size: 48px;
    block-size: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--n2), var(--n4));
    border: 1px solid #e3e7f5;
    color: var(--primary);
    font-size: 18px;
  }
  .comp-card__type {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--n6);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .comp-card__name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* absolutní akční ikonky vpravo nahoře */
  .comp-card__actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    white-space: nowrap;
    z-index: 2;
  }
}
@layer components {
  .empty-section {
    border: solid 1px var(--s2);
    background: var(--bg-app);
    border-radius: 1rem;
    text-align: center;
    padding: 24px;
    box-shadow: 0 0.5rem 1.5rem var(--s2);
  }
  .empty-section .lead {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
  }
  .empty-section .hint {
    color: var(--n6);
    margin-bottom: 0.5em;
  }
}
@layer components {
  .kb-root:focus,
  .kb-root:focus-visible {
    outline: none !important;
    box-shadow: none !important; /* kdyby framework kreslil ring přes shadow */
  }
  /* cell background reset */
  .is-kb-selected-row td {
    background-color: var(--a2) !important;
  }
  /* vybraný button */
  .kb-item.is-kb-selected {
    background-color: rgb(79, 169, 239) !important;
    background: rgb(79, 169, 239) !important;
    color: white !important;
    outline: solid 2px rgb(79, 169, 239) !important;
    box-shadow: none !important; /* kdyby framework kreslil ring přes shadow */
  }
}
/* ============================================================
   COLOR UTILITIES (luxury palette n1..n12 + p/s/a)
   Kompletní sada utilit (bez !important)
   ------------------------------------------------------------
   PRAVIDLA SMĚRU:
     - Normální gradienty: A → B (i → j)
   ------------------------------------------------------------
   OBSAH:
     1) BACKGROUND (solid + soft/tint/shade + gradients + hover)
     2) NEUTRAL SCALE (n1..n12) + hover subset
     3) SURFACES & OVERLAYS
     4) BORDERS (solid + gradient + hover)
     5) SVG (fill & stroke)
     6) RINGS (včetně hover)
     7) SHADOWS (jemné + barevné + hover)
     8) TEXT (solid + gradients + hover) — POSLEDNÍ KVŮLI KASKÁDĚ
     9) ROLE (primary/secondary/accent + semantic)
   ============================================================ */
@layer utilities {
  /* pomocné proměnné pro generování */
  /* ============================================================
     1) BACKGROUND (solid + soft/tint/shade + gradients + hover)
     ============================================================ */
  /* solid + hover + varianty (p/s/a mají -fg) */
  .bg-p1 {
    background: var(--p1);
    color: var(--p1-fg);
  }
  .bg-hover-p1:hover {
    background: var(--p1);
    color: var(--p1-fg);
  }
  .bg-p1-soft {
    background: color-mix(in oklab, var(--p1) var(--soft-alpha), var(--elev1));
  }
  .bg-p1-tint {
    background: color-mix(in oklab, var(--p1) var(--tint-strength), white);
  }
  .bg-p1-shade {
    background: color-mix(in oklab, var(--p1) var(--shade-strength), black);
  }
  .bg-p2 {
    background: var(--p2);
    color: var(--p2-fg);
  }
  .bg-hover-p2:hover {
    background: var(--p2);
    color: var(--p2-fg);
  }
  .bg-p2-soft {
    background: color-mix(in oklab, var(--p2) var(--soft-alpha), var(--elev1));
  }
  .bg-p2-tint {
    background: color-mix(in oklab, var(--p2) var(--tint-strength), white);
  }
  .bg-p2-shade {
    background: color-mix(in oklab, var(--p2) var(--shade-strength), black);
  }
  .bg-p3 {
    background: var(--p3);
    color: var(--p3-fg);
  }
  .bg-hover-p3:hover {
    background: var(--p3);
    color: var(--p3-fg);
  }
  .bg-p3-soft {
    background: color-mix(in oklab, var(--p3) var(--soft-alpha), var(--elev1));
  }
  .bg-p3-tint {
    background: color-mix(in oklab, var(--p3) var(--tint-strength), white);
  }
  .bg-p3-shade {
    background: color-mix(in oklab, var(--p3) var(--shade-strength), black);
  }
  .bg-p4 {
    background: var(--p4);
    color: var(--p4-fg);
  }
  .bg-hover-p4:hover {
    background: var(--p4);
    color: var(--p4-fg);
  }
  .bg-p4-soft {
    background: color-mix(in oklab, var(--p4) var(--soft-alpha), var(--elev1));
  }
  .bg-p4-tint {
    background: color-mix(in oklab, var(--p4) var(--tint-strength), white);
  }
  .bg-p4-shade {
    background: color-mix(in oklab, var(--p4) var(--shade-strength), black);
  }
  .bg-p5 {
    background: var(--p5);
    color: var(--p5-fg);
  }
  .bg-hover-p5:hover {
    background: var(--p5);
    color: var(--p5-fg);
  }
  .bg-p5-soft {
    background: color-mix(in oklab, var(--p5) var(--soft-alpha), var(--elev1));
  }
  .bg-p5-tint {
    background: color-mix(in oklab, var(--p5) var(--tint-strength), white);
  }
  .bg-p5-shade {
    background: color-mix(in oklab, var(--p5) var(--shade-strength), black);
  }
  .bg-p6 {
    background: var(--p6);
    color: var(--p6-fg);
  }
  .bg-hover-p6:hover {
    background: var(--p6);
    color: var(--p6-fg);
  }
  .bg-p6-soft {
    background: color-mix(in oklab, var(--p6) var(--soft-alpha), var(--elev1));
  }
  .bg-p6-tint {
    background: color-mix(in oklab, var(--p6) var(--tint-strength), white);
  }
  .bg-p6-shade {
    background: color-mix(in oklab, var(--p6) var(--shade-strength), black);
  }
  .bg-p7 {
    background: var(--p7);
    color: var(--p7-fg);
  }
  .bg-hover-p7:hover {
    background: var(--p7);
    color: var(--p7-fg);
  }
  .bg-p7-soft {
    background: color-mix(in oklab, var(--p7) var(--soft-alpha), var(--elev1));
  }
  .bg-p7-tint {
    background: color-mix(in oklab, var(--p7) var(--tint-strength), white);
  }
  .bg-p7-shade {
    background: color-mix(in oklab, var(--p7) var(--shade-strength), black);
  }
  .bg-p8 {
    background: var(--p8);
    color: var(--p8-fg);
  }
  .bg-hover-p8:hover {
    background: var(--p8);
    color: var(--p8-fg);
  }
  .bg-p8-soft {
    background: color-mix(in oklab, var(--p8) var(--soft-alpha), var(--elev1));
  }
  .bg-p8-tint {
    background: color-mix(in oklab, var(--p8) var(--tint-strength), white);
  }
  .bg-p8-shade {
    background: color-mix(in oklab, var(--p8) var(--shade-strength), black);
  }
  .bg-p9 {
    background: var(--p9);
    color: var(--p9-fg);
  }
  .bg-hover-p9:hover {
    background: var(--p9);
    color: var(--p9-fg);
  }
  .bg-p9-soft {
    background: color-mix(in oklab, var(--p9) var(--soft-alpha), var(--elev1));
  }
  .bg-p9-tint {
    background: color-mix(in oklab, var(--p9) var(--tint-strength), white);
  }
  .bg-p9-shade {
    background: color-mix(in oklab, var(--p9) var(--shade-strength), black);
  }
  .bg-p10 {
    background: var(--p10);
    color: var(--p10-fg);
  }
  .bg-hover-p10:hover {
    background: var(--p10);
    color: var(--p10-fg);
  }
  .bg-p10-soft {
    background: color-mix(in oklab, var(--p10) var(--soft-alpha), var(--elev1));
  }
  .bg-p10-tint {
    background: color-mix(in oklab, var(--p10) var(--tint-strength), white);
  }
  .bg-p10-shade {
    background: color-mix(in oklab, var(--p10) var(--shade-strength), black);
  }
  .bg-p11 {
    background: var(--p11);
    color: var(--p11-fg);
  }
  .bg-hover-p11:hover {
    background: var(--p11);
    color: var(--p11-fg);
  }
  .bg-p11-soft {
    background: color-mix(in oklab, var(--p11) var(--soft-alpha), var(--elev1));
  }
  .bg-p11-tint {
    background: color-mix(in oklab, var(--p11) var(--tint-strength), white);
  }
  .bg-p11-shade {
    background: color-mix(in oklab, var(--p11) var(--shade-strength), black);
  }
  .bg-p12 {
    background: var(--p12);
    color: var(--p12-fg);
  }
  .bg-hover-p12:hover {
    background: var(--p12);
    color: var(--p12-fg);
  }
  .bg-p12-soft {
    background: color-mix(in oklab, var(--p12) var(--soft-alpha), var(--elev1));
  }
  .bg-p12-tint {
    background: color-mix(in oklab, var(--p12) var(--tint-strength), white);
  }
  .bg-p12-shade {
    background: color-mix(in oklab, var(--p12) var(--shade-strength), black);
  }
  .bg-s1 {
    background: var(--s1);
    color: var(--s1-fg);
  }
  .bg-hover-s1:hover {
    background: var(--s1);
    color: var(--s1-fg);
  }
  .bg-s1-soft {
    background: color-mix(in oklab, var(--s1) var(--soft-alpha), var(--elev1));
  }
  .bg-s1-tint {
    background: color-mix(in oklab, var(--s1) var(--tint-strength), white);
  }
  .bg-s1-shade {
    background: color-mix(in oklab, var(--s1) var(--shade-strength), black);
  }
  .bg-s2 {
    background: var(--s2);
    color: var(--s2-fg);
  }
  .bg-hover-s2:hover {
    background: var(--s2);
    color: var(--s2-fg);
  }
  .bg-s2-soft {
    background: color-mix(in oklab, var(--s2) var(--soft-alpha), var(--elev1));
  }
  .bg-s2-tint {
    background: color-mix(in oklab, var(--s2) var(--tint-strength), white);
  }
  .bg-s2-shade {
    background: color-mix(in oklab, var(--s2) var(--shade-strength), black);
  }
  .bg-s3 {
    background: var(--s3);
    color: var(--s3-fg);
  }
  .bg-hover-s3:hover {
    background: var(--s3);
    color: var(--s3-fg);
  }
  .bg-s3-soft {
    background: color-mix(in oklab, var(--s3) var(--soft-alpha), var(--elev1));
  }
  .bg-s3-tint {
    background: color-mix(in oklab, var(--s3) var(--tint-strength), white);
  }
  .bg-s3-shade {
    background: color-mix(in oklab, var(--s3) var(--shade-strength), black);
  }
  .bg-s4 {
    background: var(--s4);
    color: var(--s4-fg);
  }
  .bg-hover-s4:hover {
    background: var(--s4);
    color: var(--s4-fg);
  }
  .bg-s4-soft {
    background: color-mix(in oklab, var(--s4) var(--soft-alpha), var(--elev1));
  }
  .bg-s4-tint {
    background: color-mix(in oklab, var(--s4) var(--tint-strength), white);
  }
  .bg-s4-shade {
    background: color-mix(in oklab, var(--s4) var(--shade-strength), black);
  }
  .bg-s5 {
    background: var(--s5);
    color: var(--s5-fg);
  }
  .bg-hover-s5:hover {
    background: var(--s5);
    color: var(--s5-fg);
  }
  .bg-s5-soft {
    background: color-mix(in oklab, var(--s5) var(--soft-alpha), var(--elev1));
  }
  .bg-s5-tint {
    background: color-mix(in oklab, var(--s5) var(--tint-strength), white);
  }
  .bg-s5-shade {
    background: color-mix(in oklab, var(--s5) var(--shade-strength), black);
  }
  .bg-s6 {
    background: var(--s6);
    color: var(--s6-fg);
  }
  .bg-hover-s6:hover {
    background: var(--s6);
    color: var(--s6-fg);
  }
  .bg-s6-soft {
    background: color-mix(in oklab, var(--s6) var(--soft-alpha), var(--elev1));
  }
  .bg-s6-tint {
    background: color-mix(in oklab, var(--s6) var(--tint-strength), white);
  }
  .bg-s6-shade {
    background: color-mix(in oklab, var(--s6) var(--shade-strength), black);
  }
  .bg-s7 {
    background: var(--s7);
    color: var(--s7-fg);
  }
  .bg-hover-s7:hover {
    background: var(--s7);
    color: var(--s7-fg);
  }
  .bg-s7-soft {
    background: color-mix(in oklab, var(--s7) var(--soft-alpha), var(--elev1));
  }
  .bg-s7-tint {
    background: color-mix(in oklab, var(--s7) var(--tint-strength), white);
  }
  .bg-s7-shade {
    background: color-mix(in oklab, var(--s7) var(--shade-strength), black);
  }
  .bg-s8 {
    background: var(--s8);
    color: var(--s8-fg);
  }
  .bg-hover-s8:hover {
    background: var(--s8);
    color: var(--s8-fg);
  }
  .bg-s8-soft {
    background: color-mix(in oklab, var(--s8) var(--soft-alpha), var(--elev1));
  }
  .bg-s8-tint {
    background: color-mix(in oklab, var(--s8) var(--tint-strength), white);
  }
  .bg-s8-shade {
    background: color-mix(in oklab, var(--s8) var(--shade-strength), black);
  }
  .bg-s9 {
    background: var(--s9);
    color: var(--s9-fg);
  }
  .bg-hover-s9:hover {
    background: var(--s9);
    color: var(--s9-fg);
  }
  .bg-s9-soft {
    background: color-mix(in oklab, var(--s9) var(--soft-alpha), var(--elev1));
  }
  .bg-s9-tint {
    background: color-mix(in oklab, var(--s9) var(--tint-strength), white);
  }
  .bg-s9-shade {
    background: color-mix(in oklab, var(--s9) var(--shade-strength), black);
  }
  .bg-s10 {
    background: var(--s10);
    color: var(--s10-fg);
  }
  .bg-hover-s10:hover {
    background: var(--s10);
    color: var(--s10-fg);
  }
  .bg-s10-soft {
    background: color-mix(in oklab, var(--s10) var(--soft-alpha), var(--elev1));
  }
  .bg-s10-tint {
    background: color-mix(in oklab, var(--s10) var(--tint-strength), white);
  }
  .bg-s10-shade {
    background: color-mix(in oklab, var(--s10) var(--shade-strength), black);
  }
  .bg-s11 {
    background: var(--s11);
    color: var(--s11-fg);
  }
  .bg-hover-s11:hover {
    background: var(--s11);
    color: var(--s11-fg);
  }
  .bg-s11-soft {
    background: color-mix(in oklab, var(--s11) var(--soft-alpha), var(--elev1));
  }
  .bg-s11-tint {
    background: color-mix(in oklab, var(--s11) var(--tint-strength), white);
  }
  .bg-s11-shade {
    background: color-mix(in oklab, var(--s11) var(--shade-strength), black);
  }
  .bg-s12 {
    background: var(--s12);
    color: var(--s12-fg);
  }
  .bg-hover-s12:hover {
    background: var(--s12);
    color: var(--s12-fg);
  }
  .bg-s12-soft {
    background: color-mix(in oklab, var(--s12) var(--soft-alpha), var(--elev1));
  }
  .bg-s12-tint {
    background: color-mix(in oklab, var(--s12) var(--tint-strength), white);
  }
  .bg-s12-shade {
    background: color-mix(in oklab, var(--s12) var(--shade-strength), black);
  }
  .bg-a1 {
    background: var(--a1);
    color: var(--a1-fg);
  }
  .bg-hover-a1:hover {
    background: var(--a1);
    color: var(--a1-fg);
  }
  .bg-a1-soft {
    background: color-mix(in oklab, var(--a1) var(--soft-alpha), var(--elev1));
  }
  .bg-a1-tint {
    background: color-mix(in oklab, var(--a1) var(--tint-strength), white);
  }
  .bg-a1-shade {
    background: color-mix(in oklab, var(--a1) var(--shade-strength), black);
  }
  .bg-a2 {
    background: var(--a2);
    color: var(--a2-fg);
  }
  .bg-hover-a2:hover {
    background: var(--a2);
    color: var(--a2-fg);
  }
  .bg-a2-soft {
    background: color-mix(in oklab, var(--a2) var(--soft-alpha), var(--elev1));
  }
  .bg-a2-tint {
    background: color-mix(in oklab, var(--a2) var(--tint-strength), white);
  }
  .bg-a2-shade {
    background: color-mix(in oklab, var(--a2) var(--shade-strength), black);
  }
  .bg-a3 {
    background: var(--a3);
    color: var(--a3-fg);
  }
  .bg-hover-a3:hover {
    background: var(--a3);
    color: var(--a3-fg);
  }
  .bg-a3-soft {
    background: color-mix(in oklab, var(--a3) var(--soft-alpha), var(--elev1));
  }
  .bg-a3-tint {
    background: color-mix(in oklab, var(--a3) var(--tint-strength), white);
  }
  .bg-a3-shade {
    background: color-mix(in oklab, var(--a3) var(--shade-strength), black);
  }
  .bg-a4 {
    background: var(--a4);
    color: var(--a4-fg);
  }
  .bg-hover-a4:hover {
    background: var(--a4);
    color: var(--a4-fg);
  }
  .bg-a4-soft {
    background: color-mix(in oklab, var(--a4) var(--soft-alpha), var(--elev1));
  }
  .bg-a4-tint {
    background: color-mix(in oklab, var(--a4) var(--tint-strength), white);
  }
  .bg-a4-shade {
    background: color-mix(in oklab, var(--a4) var(--shade-strength), black);
  }
  .bg-a5 {
    background: var(--a5);
    color: var(--a5-fg);
  }
  .bg-hover-a5:hover {
    background: var(--a5);
    color: var(--a5-fg);
  }
  .bg-a5-soft {
    background: color-mix(in oklab, var(--a5) var(--soft-alpha), var(--elev1));
  }
  .bg-a5-tint {
    background: color-mix(in oklab, var(--a5) var(--tint-strength), white);
  }
  .bg-a5-shade {
    background: color-mix(in oklab, var(--a5) var(--shade-strength), black);
  }
  .bg-a6 {
    background: var(--a6);
    color: var(--a6-fg);
  }
  .bg-hover-a6:hover {
    background: var(--a6);
    color: var(--a6-fg);
  }
  .bg-a6-soft {
    background: color-mix(in oklab, var(--a6) var(--soft-alpha), var(--elev1));
  }
  .bg-a6-tint {
    background: color-mix(in oklab, var(--a6) var(--tint-strength), white);
  }
  .bg-a6-shade {
    background: color-mix(in oklab, var(--a6) var(--shade-strength), black);
  }
  .bg-a7 {
    background: var(--a7);
    color: var(--a7-fg);
  }
  .bg-hover-a7:hover {
    background: var(--a7);
    color: var(--a7-fg);
  }
  .bg-a7-soft {
    background: color-mix(in oklab, var(--a7) var(--soft-alpha), var(--elev1));
  }
  .bg-a7-tint {
    background: color-mix(in oklab, var(--a7) var(--tint-strength), white);
  }
  .bg-a7-shade {
    background: color-mix(in oklab, var(--a7) var(--shade-strength), black);
  }
  .bg-a8 {
    background: var(--a8);
    color: var(--a8-fg);
  }
  .bg-hover-a8:hover {
    background: var(--a8);
    color: var(--a8-fg);
  }
  .bg-a8-soft {
    background: color-mix(in oklab, var(--a8) var(--soft-alpha), var(--elev1));
  }
  .bg-a8-tint {
    background: color-mix(in oklab, var(--a8) var(--tint-strength), white);
  }
  .bg-a8-shade {
    background: color-mix(in oklab, var(--a8) var(--shade-strength), black);
  }
  .bg-a9 {
    background: var(--a9);
    color: var(--a9-fg);
  }
  .bg-hover-a9:hover {
    background: var(--a9);
    color: var(--a9-fg);
  }
  .bg-a9-soft {
    background: color-mix(in oklab, var(--a9) var(--soft-alpha), var(--elev1));
  }
  .bg-a9-tint {
    background: color-mix(in oklab, var(--a9) var(--tint-strength), white);
  }
  .bg-a9-shade {
    background: color-mix(in oklab, var(--a9) var(--shade-strength), black);
  }
  .bg-a10 {
    background: var(--a10);
    color: var(--a10-fg);
  }
  .bg-hover-a10:hover {
    background: var(--a10);
    color: var(--a10-fg);
  }
  .bg-a10-soft {
    background: color-mix(in oklab, var(--a10) var(--soft-alpha), var(--elev1));
  }
  .bg-a10-tint {
    background: color-mix(in oklab, var(--a10) var(--tint-strength), white);
  }
  .bg-a10-shade {
    background: color-mix(in oklab, var(--a10) var(--shade-strength), black);
  }
  .bg-a11 {
    background: var(--a11);
    color: var(--a11-fg);
  }
  .bg-hover-a11:hover {
    background: var(--a11);
    color: var(--a11-fg);
  }
  .bg-a11-soft {
    background: color-mix(in oklab, var(--a11) var(--soft-alpha), var(--elev1));
  }
  .bg-a11-tint {
    background: color-mix(in oklab, var(--a11) var(--tint-strength), white);
  }
  .bg-a11-shade {
    background: color-mix(in oklab, var(--a11) var(--shade-strength), black);
  }
  .bg-a12 {
    background: var(--a12);
    color: var(--a12-fg);
  }
  .bg-hover-a12:hover {
    background: var(--a12);
    color: var(--a12-fg);
  }
  .bg-a12-soft {
    background: color-mix(in oklab, var(--a12) var(--soft-alpha), var(--elev1));
  }
  .bg-a12-tint {
    background: color-mix(in oklab, var(--a12) var(--tint-strength), white);
  }
  .bg-a12-shade {
    background: color-mix(in oklab, var(--a12) var(--shade-strength), black);
  }
  /* neutrals solid + hover (bez -fg, text necháváme na dědicích tokenech) */
  .bg-n1 {
    background: var(--n1);
  }
  .bg-hover-n1:hover {
    background: var(--n1);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n1-soft {
    background: color-mix(in oklab, var(--n1) var(--soft-alpha), var(--elev1));
  }
  .bg-n1-tint {
    background: color-mix(in oklab, var(--n1) var(--tint-strength), white);
  }
  .bg-n1-shade {
    background: color-mix(in oklab, var(--n1) var(--shade-strength), black);
  }
  .bg-n2 {
    background: var(--n2);
  }
  .bg-hover-n2:hover {
    background: var(--n2);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n2-soft {
    background: color-mix(in oklab, var(--n2) var(--soft-alpha), var(--elev1));
  }
  .bg-n2-tint {
    background: color-mix(in oklab, var(--n2) var(--tint-strength), white);
  }
  .bg-n2-shade {
    background: color-mix(in oklab, var(--n2) var(--shade-strength), black);
  }
  .bg-n3 {
    background: var(--n3);
  }
  .bg-hover-n3:hover {
    background: var(--n3);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n3-soft {
    background: color-mix(in oklab, var(--n3) var(--soft-alpha), var(--elev1));
  }
  .bg-n3-tint {
    background: color-mix(in oklab, var(--n3) var(--tint-strength), white);
  }
  .bg-n3-shade {
    background: color-mix(in oklab, var(--n3) var(--shade-strength), black);
  }
  .bg-n4 {
    background: var(--n4);
  }
  .bg-hover-n4:hover {
    background: var(--n4);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n4-soft {
    background: color-mix(in oklab, var(--n4) var(--soft-alpha), var(--elev1));
  }
  .bg-n4-tint {
    background: color-mix(in oklab, var(--n4) var(--tint-strength), white);
  }
  .bg-n4-shade {
    background: color-mix(in oklab, var(--n4) var(--shade-strength), black);
  }
  .bg-n5 {
    background: var(--n5);
  }
  .bg-hover-n5:hover {
    background: var(--n5);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n5-soft {
    background: color-mix(in oklab, var(--n5) var(--soft-alpha), var(--elev1));
  }
  .bg-n5-tint {
    background: color-mix(in oklab, var(--n5) var(--tint-strength), white);
  }
  .bg-n5-shade {
    background: color-mix(in oklab, var(--n5) var(--shade-strength), black);
  }
  .bg-n6 {
    background: var(--n6);
  }
  .bg-hover-n6:hover {
    background: var(--n6);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n6-soft {
    background: color-mix(in oklab, var(--n6) var(--soft-alpha), var(--elev1));
  }
  .bg-n6-tint {
    background: color-mix(in oklab, var(--n6) var(--tint-strength), white);
  }
  .bg-n6-shade {
    background: color-mix(in oklab, var(--n6) var(--shade-strength), black);
  }
  .bg-n7 {
    background: var(--n7);
  }
  .bg-hover-n7:hover {
    background: var(--n7);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n7-soft {
    background: color-mix(in oklab, var(--n7) var(--soft-alpha), var(--elev1));
  }
  .bg-n7-tint {
    background: color-mix(in oklab, var(--n7) var(--tint-strength), white);
  }
  .bg-n7-shade {
    background: color-mix(in oklab, var(--n7) var(--shade-strength), black);
  }
  .bg-n8 {
    background: var(--n8);
  }
  .bg-hover-n8:hover {
    background: var(--n8);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n8-soft {
    background: color-mix(in oklab, var(--n8) var(--soft-alpha), var(--elev1));
  }
  .bg-n8-tint {
    background: color-mix(in oklab, var(--n8) var(--tint-strength), white);
  }
  .bg-n8-shade {
    background: color-mix(in oklab, var(--n8) var(--shade-strength), black);
  }
  .bg-n9 {
    background: var(--n9);
  }
  .bg-hover-n9:hover {
    background: var(--n9);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n9-soft {
    background: color-mix(in oklab, var(--n9) var(--soft-alpha), var(--elev1));
  }
  .bg-n9-tint {
    background: color-mix(in oklab, var(--n9) var(--tint-strength), white);
  }
  .bg-n9-shade {
    background: color-mix(in oklab, var(--n9) var(--shade-strength), black);
  }
  .bg-n10 {
    background: var(--n10);
  }
  .bg-hover-n10:hover {
    background: var(--n10);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n10-soft {
    background: color-mix(in oklab, var(--n10) var(--soft-alpha), var(--elev1));
  }
  .bg-n10-tint {
    background: color-mix(in oklab, var(--n10) var(--tint-strength), white);
  }
  .bg-n10-shade {
    background: color-mix(in oklab, var(--n10) var(--shade-strength), black);
  }
  .bg-n11 {
    background: var(--n11);
  }
  .bg-hover-n11:hover {
    background: var(--n11);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n11-soft {
    background: color-mix(in oklab, var(--n11) var(--soft-alpha), var(--elev1));
  }
  .bg-n11-tint {
    background: color-mix(in oklab, var(--n11) var(--tint-strength), white);
  }
  .bg-n11-shade {
    background: color-mix(in oklab, var(--n11) var(--shade-strength), black);
  }
  .bg-n12 {
    background: var(--n12);
  }
  .bg-hover-n12:hover {
    background: var(--n12);
  }
  /* Volitelné varianty pro neutrals: */
  .bg-n12-soft {
    background: color-mix(in oklab, var(--n12) var(--soft-alpha), var(--elev1));
  }
  .bg-n12-tint {
    background: color-mix(in oklab, var(--n12) var(--tint-strength), white);
  }
  .bg-n12-shade {
    background: color-mix(in oklab, var(--n12) var(--shade-strength), black);
  }
  /* curated bg gradients (brandovější) */
  .bg-gradient-gold {
    background: linear-gradient(135deg, var(--p6), var(--p8));
  }
  .bg-gradient-dark {
    background: linear-gradient(180deg, var(--n11) 0%, var(--n12) 100%);
  }
  .bg-gradient {
    background: linear-gradient(var(--bg-gradient-angle, 135deg), var(--bg-gradient-from, var(--n8)), var(--bg-gradient-to, var(--n9)));
  }
  /* generator: všechny páry bg gradientů (n, p, s, a) */
  .bg-gradient {
    background: linear-gradient(135deg, var(--c1, --n3), var(--c2, --n5));
  }
  .bg-gradient-hover:hover {
    background: linear-gradient(135deg, var(--c1, --n5), var(--c2, --n7));
  }
  .bg-gradient {
    background: linear-gradient(135deg, var(--c1, --n3), var(--c2, --n5));
  }
  .bg-gradient-hover:hover {
    background: linear-gradient(135deg, var(--c1, --n5), var(--c2, --n7));
  }
  .bg-gradient {
    background: linear-gradient(135deg, var(--c1, --n3), var(--c2, --n5));
  }
  .bg-gradient-hover:hover {
    background: linear-gradient(135deg, var(--c1, --n5), var(--c2, --n7));
  }
  .bg-gradient {
    background: linear-gradient(135deg, var(--c1, --n3), var(--c2, --n5));
  }
  .bg-gradient-hover:hover {
    background: linear-gradient(135deg, var(--c1, --n5), var(--c2, --n7));
  }
  /* ============================================================
     2) NEUTRAL SCALE (n1..n12) + hover subset
     ============================================================ */
  /* (generuje se výše; sekce ponechána kvůli přehledu) */
  /* ============================================================
     3) SURFACES & OVERLAYS
     ============================================================ */
  .bg-surface-1 {
    background: var(--surface-1);
    color: var(--text);
  }
  .bg-surface-2 {
    background: var(--surface-2);
    color: var(--text);
  }
  .bg-surface-3 {
    background: var(--surface-3);
    color: var(--text);
  }
  .overlay {
    background: var(--overlay);
  }
  /* ============================================================
     4) BORDERS (solid + gradient + hover)
     ============================================================ */
  .border {
    border: 1px solid currentColor;
  }
  .border-0 {
    border-width: 0;
  }
  .border-2 {
    border-width: 2px;
  }
  .border-dash {
    border-style: dashed;
  }
  .border-dot {
    border-style: dotted;
  }
  /* solid + hover pro všechny palety */
  .border-n1 {
    border-color: var(--n1);
  }
  .border-hover-n1:hover {
    border-color: var(--n1);
  }
  .border-n2 {
    border-color: var(--n2);
  }
  .border-hover-n2:hover {
    border-color: var(--n2);
  }
  .border-n3 {
    border-color: var(--n3);
  }
  .border-hover-n3:hover {
    border-color: var(--n3);
  }
  .border-n4 {
    border-color: var(--n4);
  }
  .border-hover-n4:hover {
    border-color: var(--n4);
  }
  .border-n5 {
    border-color: var(--n5);
  }
  .border-hover-n5:hover {
    border-color: var(--n5);
  }
  .border-n6 {
    border-color: var(--n6);
  }
  .border-hover-n6:hover {
    border-color: var(--n6);
  }
  .border-n7 {
    border-color: var(--n7);
  }
  .border-hover-n7:hover {
    border-color: var(--n7);
  }
  .border-n8 {
    border-color: var(--n8);
  }
  .border-hover-n8:hover {
    border-color: var(--n8);
  }
  .border-n9 {
    border-color: var(--n9);
  }
  .border-hover-n9:hover {
    border-color: var(--n9);
  }
  .border-n10 {
    border-color: var(--n10);
  }
  .border-hover-n10:hover {
    border-color: var(--n10);
  }
  .border-n11 {
    border-color: var(--n11);
  }
  .border-hover-n11:hover {
    border-color: var(--n11);
  }
  .border-n12 {
    border-color: var(--n12);
  }
  .border-hover-n12:hover {
    border-color: var(--n12);
  }
  .border-p1 {
    border-color: var(--p1);
  }
  .border-hover-p1:hover {
    border-color: var(--p1);
  }
  .border-p2 {
    border-color: var(--p2);
  }
  .border-hover-p2:hover {
    border-color: var(--p2);
  }
  .border-p3 {
    border-color: var(--p3);
  }
  .border-hover-p3:hover {
    border-color: var(--p3);
  }
  .border-p4 {
    border-color: var(--p4);
  }
  .border-hover-p4:hover {
    border-color: var(--p4);
  }
  .border-p5 {
    border-color: var(--p5);
  }
  .border-hover-p5:hover {
    border-color: var(--p5);
  }
  .border-p6 {
    border-color: var(--p6);
  }
  .border-hover-p6:hover {
    border-color: var(--p6);
  }
  .border-p7 {
    border-color: var(--p7);
  }
  .border-hover-p7:hover {
    border-color: var(--p7);
  }
  .border-p8 {
    border-color: var(--p8);
  }
  .border-hover-p8:hover {
    border-color: var(--p8);
  }
  .border-p9 {
    border-color: var(--p9);
  }
  .border-hover-p9:hover {
    border-color: var(--p9);
  }
  .border-p10 {
    border-color: var(--p10);
  }
  .border-hover-p10:hover {
    border-color: var(--p10);
  }
  .border-p11 {
    border-color: var(--p11);
  }
  .border-hover-p11:hover {
    border-color: var(--p11);
  }
  .border-p12 {
    border-color: var(--p12);
  }
  .border-hover-p12:hover {
    border-color: var(--p12);
  }
  .border-s1 {
    border-color: var(--s1);
  }
  .border-hover-s1:hover {
    border-color: var(--s1);
  }
  .border-s2 {
    border-color: var(--s2);
  }
  .border-hover-s2:hover {
    border-color: var(--s2);
  }
  .border-s3 {
    border-color: var(--s3);
  }
  .border-hover-s3:hover {
    border-color: var(--s3);
  }
  .border-s4 {
    border-color: var(--s4);
  }
  .border-hover-s4:hover {
    border-color: var(--s4);
  }
  .border-s5 {
    border-color: var(--s5);
  }
  .border-hover-s5:hover {
    border-color: var(--s5);
  }
  .border-s6 {
    border-color: var(--s6);
  }
  .border-hover-s6:hover {
    border-color: var(--s6);
  }
  .border-s7 {
    border-color: var(--s7);
  }
  .border-hover-s7:hover {
    border-color: var(--s7);
  }
  .border-s8 {
    border-color: var(--s8);
  }
  .border-hover-s8:hover {
    border-color: var(--s8);
  }
  .border-s9 {
    border-color: var(--s9);
  }
  .border-hover-s9:hover {
    border-color: var(--s9);
  }
  .border-s10 {
    border-color: var(--s10);
  }
  .border-hover-s10:hover {
    border-color: var(--s10);
  }
  .border-s11 {
    border-color: var(--s11);
  }
  .border-hover-s11:hover {
    border-color: var(--s11);
  }
  .border-s12 {
    border-color: var(--s12);
  }
  .border-hover-s12:hover {
    border-color: var(--s12);
  }
  .border-a1 {
    border-color: var(--a1);
  }
  .border-hover-a1:hover {
    border-color: var(--a1);
  }
  .border-a2 {
    border-color: var(--a2);
  }
  .border-hover-a2:hover {
    border-color: var(--a2);
  }
  .border-a3 {
    border-color: var(--a3);
  }
  .border-hover-a3:hover {
    border-color: var(--a3);
  }
  .border-a4 {
    border-color: var(--a4);
  }
  .border-hover-a4:hover {
    border-color: var(--a4);
  }
  .border-a5 {
    border-color: var(--a5);
  }
  .border-hover-a5:hover {
    border-color: var(--a5);
  }
  .border-a6 {
    border-color: var(--a6);
  }
  .border-hover-a6:hover {
    border-color: var(--a6);
  }
  .border-a7 {
    border-color: var(--a7);
  }
  .border-hover-a7:hover {
    border-color: var(--a7);
  }
  .border-a8 {
    border-color: var(--a8);
  }
  .border-hover-a8:hover {
    border-color: var(--a8);
  }
  .border-a9 {
    border-color: var(--a9);
  }
  .border-hover-a9:hover {
    border-color: var(--a9);
  }
  .border-a10 {
    border-color: var(--a10);
  }
  .border-hover-a10:hover {
    border-color: var(--a10);
  }
  .border-a11 {
    border-color: var(--a11);
  }
  .border-hover-a11:hover {
    border-color: var(--a11);
  }
  .border-a12 {
    border-color: var(--a12);
  }
  .border-hover-a12:hover {
    border-color: var(--a12);
  }
  /* generator: gradient borders (n, p, s, a) */
  .border-gradient-n1-n2,
  .border-gradient-n2-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n2)) 1;
  }
  .border-gradient-hover-n1-n2:hover,
  .border-gradient-hover-n2-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n2)) 1;
  }
  .border-gradient-n1-n3,
  .border-gradient-n3-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n3)) 1;
  }
  .border-gradient-hover-n1-n3:hover,
  .border-gradient-hover-n3-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n3)) 1;
  }
  .border-gradient-n1-n4,
  .border-gradient-n4-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n4)) 1;
  }
  .border-gradient-hover-n1-n4:hover,
  .border-gradient-hover-n4-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n4)) 1;
  }
  .border-gradient-n1-n5,
  .border-gradient-n5-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n5)) 1;
  }
  .border-gradient-hover-n1-n5:hover,
  .border-gradient-hover-n5-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n5)) 1;
  }
  .border-gradient-n1-n6,
  .border-gradient-n6-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n6)) 1;
  }
  .border-gradient-hover-n1-n6:hover,
  .border-gradient-hover-n6-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n6)) 1;
  }
  .border-gradient-n1-n7,
  .border-gradient-n7-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n7)) 1;
  }
  .border-gradient-hover-n1-n7:hover,
  .border-gradient-hover-n7-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n7)) 1;
  }
  .border-gradient-n1-n8,
  .border-gradient-n8-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n8)) 1;
  }
  .border-gradient-hover-n1-n8:hover,
  .border-gradient-hover-n8-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n8)) 1;
  }
  .border-gradient-n1-n9,
  .border-gradient-n9-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n9)) 1;
  }
  .border-gradient-hover-n1-n9:hover,
  .border-gradient-hover-n9-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n9)) 1;
  }
  .border-gradient-n1-n10,
  .border-gradient-n10-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n10)) 1;
  }
  .border-gradient-hover-n1-n10:hover,
  .border-gradient-hover-n10-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n10)) 1;
  }
  .border-gradient-n1-n11,
  .border-gradient-n11-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n11)) 1;
  }
  .border-gradient-hover-n1-n11:hover,
  .border-gradient-hover-n11-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n11)) 1;
  }
  .border-gradient-n1-n12,
  .border-gradient-n12-n1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n12)) 1;
  }
  .border-gradient-hover-n1-n12:hover,
  .border-gradient-hover-n12-n1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n1), var(--n12)) 1;
  }
  .border-gradient-n2-n3,
  .border-gradient-n3-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n3)) 1;
  }
  .border-gradient-hover-n2-n3:hover,
  .border-gradient-hover-n3-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n3)) 1;
  }
  .border-gradient-n2-n4,
  .border-gradient-n4-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n4)) 1;
  }
  .border-gradient-hover-n2-n4:hover,
  .border-gradient-hover-n4-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n4)) 1;
  }
  .border-gradient-n2-n5,
  .border-gradient-n5-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n5)) 1;
  }
  .border-gradient-hover-n2-n5:hover,
  .border-gradient-hover-n5-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n5)) 1;
  }
  .border-gradient-n2-n6,
  .border-gradient-n6-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n6)) 1;
  }
  .border-gradient-hover-n2-n6:hover,
  .border-gradient-hover-n6-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n6)) 1;
  }
  .border-gradient-n2-n7,
  .border-gradient-n7-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n7)) 1;
  }
  .border-gradient-hover-n2-n7:hover,
  .border-gradient-hover-n7-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n7)) 1;
  }
  .border-gradient-n2-n8,
  .border-gradient-n8-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n8)) 1;
  }
  .border-gradient-hover-n2-n8:hover,
  .border-gradient-hover-n8-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n8)) 1;
  }
  .border-gradient-n2-n9,
  .border-gradient-n9-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n9)) 1;
  }
  .border-gradient-hover-n2-n9:hover,
  .border-gradient-hover-n9-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n9)) 1;
  }
  .border-gradient-n2-n10,
  .border-gradient-n10-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n10)) 1;
  }
  .border-gradient-hover-n2-n10:hover,
  .border-gradient-hover-n10-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n10)) 1;
  }
  .border-gradient-n2-n11,
  .border-gradient-n11-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n11)) 1;
  }
  .border-gradient-hover-n2-n11:hover,
  .border-gradient-hover-n11-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n11)) 1;
  }
  .border-gradient-n2-n12,
  .border-gradient-n12-n2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n12)) 1;
  }
  .border-gradient-hover-n2-n12:hover,
  .border-gradient-hover-n12-n2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n2), var(--n12)) 1;
  }
  .border-gradient-n3-n4,
  .border-gradient-n4-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n4)) 1;
  }
  .border-gradient-hover-n3-n4:hover,
  .border-gradient-hover-n4-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n4)) 1;
  }
  .border-gradient-n3-n5,
  .border-gradient-n5-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n5)) 1;
  }
  .border-gradient-hover-n3-n5:hover,
  .border-gradient-hover-n5-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n5)) 1;
  }
  .border-gradient-n3-n6,
  .border-gradient-n6-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n6)) 1;
  }
  .border-gradient-hover-n3-n6:hover,
  .border-gradient-hover-n6-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n6)) 1;
  }
  .border-gradient-n3-n7,
  .border-gradient-n7-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n7)) 1;
  }
  .border-gradient-hover-n3-n7:hover,
  .border-gradient-hover-n7-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n7)) 1;
  }
  .border-gradient-n3-n8,
  .border-gradient-n8-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n8)) 1;
  }
  .border-gradient-hover-n3-n8:hover,
  .border-gradient-hover-n8-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n8)) 1;
  }
  .border-gradient-n3-n9,
  .border-gradient-n9-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n9)) 1;
  }
  .border-gradient-hover-n3-n9:hover,
  .border-gradient-hover-n9-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n9)) 1;
  }
  .border-gradient-n3-n10,
  .border-gradient-n10-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n10)) 1;
  }
  .border-gradient-hover-n3-n10:hover,
  .border-gradient-hover-n10-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n10)) 1;
  }
  .border-gradient-n3-n11,
  .border-gradient-n11-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n11)) 1;
  }
  .border-gradient-hover-n3-n11:hover,
  .border-gradient-hover-n11-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n11)) 1;
  }
  .border-gradient-n3-n12,
  .border-gradient-n12-n3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n12)) 1;
  }
  .border-gradient-hover-n3-n12:hover,
  .border-gradient-hover-n12-n3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n3), var(--n12)) 1;
  }
  .border-gradient-n4-n5,
  .border-gradient-n5-n4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n5)) 1;
  }
  .border-gradient-hover-n4-n5:hover,
  .border-gradient-hover-n5-n4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n5)) 1;
  }
  .border-gradient-n4-n6,
  .border-gradient-n6-n4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n6)) 1;
  }
  .border-gradient-hover-n4-n6:hover,
  .border-gradient-hover-n6-n4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n6)) 1;
  }
  .border-gradient-n4-n7,
  .border-gradient-n7-n4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n7)) 1;
  }
  .border-gradient-hover-n4-n7:hover,
  .border-gradient-hover-n7-n4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n7)) 1;
  }
  .border-gradient-n4-n8,
  .border-gradient-n8-n4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n8)) 1;
  }
  .border-gradient-hover-n4-n8:hover,
  .border-gradient-hover-n8-n4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n8)) 1;
  }
  .border-gradient-n4-n9,
  .border-gradient-n9-n4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n9)) 1;
  }
  .border-gradient-hover-n4-n9:hover,
  .border-gradient-hover-n9-n4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n9)) 1;
  }
  .border-gradient-n4-n10,
  .border-gradient-n10-n4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n10)) 1;
  }
  .border-gradient-hover-n4-n10:hover,
  .border-gradient-hover-n10-n4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n10)) 1;
  }
  .border-gradient-n4-n11,
  .border-gradient-n11-n4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n11)) 1;
  }
  .border-gradient-hover-n4-n11:hover,
  .border-gradient-hover-n11-n4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n11)) 1;
  }
  .border-gradient-n4-n12,
  .border-gradient-n12-n4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n12)) 1;
  }
  .border-gradient-hover-n4-n12:hover,
  .border-gradient-hover-n12-n4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n4), var(--n12)) 1;
  }
  .border-gradient-n5-n6,
  .border-gradient-n6-n5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n6)) 1;
  }
  .border-gradient-hover-n5-n6:hover,
  .border-gradient-hover-n6-n5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n6)) 1;
  }
  .border-gradient-n5-n7,
  .border-gradient-n7-n5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n7)) 1;
  }
  .border-gradient-hover-n5-n7:hover,
  .border-gradient-hover-n7-n5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n7)) 1;
  }
  .border-gradient-n5-n8,
  .border-gradient-n8-n5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n8)) 1;
  }
  .border-gradient-hover-n5-n8:hover,
  .border-gradient-hover-n8-n5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n8)) 1;
  }
  .border-gradient-n5-n9,
  .border-gradient-n9-n5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n9)) 1;
  }
  .border-gradient-hover-n5-n9:hover,
  .border-gradient-hover-n9-n5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n9)) 1;
  }
  .border-gradient-n5-n10,
  .border-gradient-n10-n5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n10)) 1;
  }
  .border-gradient-hover-n5-n10:hover,
  .border-gradient-hover-n10-n5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n10)) 1;
  }
  .border-gradient-n5-n11,
  .border-gradient-n11-n5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n11)) 1;
  }
  .border-gradient-hover-n5-n11:hover,
  .border-gradient-hover-n11-n5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n11)) 1;
  }
  .border-gradient-n5-n12,
  .border-gradient-n12-n5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n12)) 1;
  }
  .border-gradient-hover-n5-n12:hover,
  .border-gradient-hover-n12-n5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n5), var(--n12)) 1;
  }
  .border-gradient-n6-n7,
  .border-gradient-n7-n6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n7)) 1;
  }
  .border-gradient-hover-n6-n7:hover,
  .border-gradient-hover-n7-n6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n7)) 1;
  }
  .border-gradient-n6-n8,
  .border-gradient-n8-n6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n8)) 1;
  }
  .border-gradient-hover-n6-n8:hover,
  .border-gradient-hover-n8-n6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n8)) 1;
  }
  .border-gradient-n6-n9,
  .border-gradient-n9-n6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n9)) 1;
  }
  .border-gradient-hover-n6-n9:hover,
  .border-gradient-hover-n9-n6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n9)) 1;
  }
  .border-gradient-n6-n10,
  .border-gradient-n10-n6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n10)) 1;
  }
  .border-gradient-hover-n6-n10:hover,
  .border-gradient-hover-n10-n6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n10)) 1;
  }
  .border-gradient-n6-n11,
  .border-gradient-n11-n6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n11)) 1;
  }
  .border-gradient-hover-n6-n11:hover,
  .border-gradient-hover-n11-n6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n11)) 1;
  }
  .border-gradient-n6-n12,
  .border-gradient-n12-n6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n12)) 1;
  }
  .border-gradient-hover-n6-n12:hover,
  .border-gradient-hover-n12-n6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n6), var(--n12)) 1;
  }
  .border-gradient-n7-n8,
  .border-gradient-n8-n7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n8)) 1;
  }
  .border-gradient-hover-n7-n8:hover,
  .border-gradient-hover-n8-n7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n8)) 1;
  }
  .border-gradient-n7-n9,
  .border-gradient-n9-n7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n9)) 1;
  }
  .border-gradient-hover-n7-n9:hover,
  .border-gradient-hover-n9-n7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n9)) 1;
  }
  .border-gradient-n7-n10,
  .border-gradient-n10-n7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n10)) 1;
  }
  .border-gradient-hover-n7-n10:hover,
  .border-gradient-hover-n10-n7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n10)) 1;
  }
  .border-gradient-n7-n11,
  .border-gradient-n11-n7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n11)) 1;
  }
  .border-gradient-hover-n7-n11:hover,
  .border-gradient-hover-n11-n7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n11)) 1;
  }
  .border-gradient-n7-n12,
  .border-gradient-n12-n7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n12)) 1;
  }
  .border-gradient-hover-n7-n12:hover,
  .border-gradient-hover-n12-n7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n7), var(--n12)) 1;
  }
  .border-gradient-n8-n9,
  .border-gradient-n9-n8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n8), var(--n9)) 1;
  }
  .border-gradient-hover-n8-n9:hover,
  .border-gradient-hover-n9-n8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n8), var(--n9)) 1;
  }
  .border-gradient-n8-n10,
  .border-gradient-n10-n8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n8), var(--n10)) 1;
  }
  .border-gradient-hover-n8-n10:hover,
  .border-gradient-hover-n10-n8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n8), var(--n10)) 1;
  }
  .border-gradient-n8-n11,
  .border-gradient-n11-n8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n8), var(--n11)) 1;
  }
  .border-gradient-hover-n8-n11:hover,
  .border-gradient-hover-n11-n8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n8), var(--n11)) 1;
  }
  .border-gradient-n8-n12,
  .border-gradient-n12-n8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n8), var(--n12)) 1;
  }
  .border-gradient-hover-n8-n12:hover,
  .border-gradient-hover-n12-n8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n8), var(--n12)) 1;
  }
  .border-gradient-n9-n10,
  .border-gradient-n10-n9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n9), var(--n10)) 1;
  }
  .border-gradient-hover-n9-n10:hover,
  .border-gradient-hover-n10-n9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n9), var(--n10)) 1;
  }
  .border-gradient-n9-n11,
  .border-gradient-n11-n9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n9), var(--n11)) 1;
  }
  .border-gradient-hover-n9-n11:hover,
  .border-gradient-hover-n11-n9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n9), var(--n11)) 1;
  }
  .border-gradient-n9-n12,
  .border-gradient-n12-n9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n9), var(--n12)) 1;
  }
  .border-gradient-hover-n9-n12:hover,
  .border-gradient-hover-n12-n9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n9), var(--n12)) 1;
  }
  .border-gradient-n10-n11,
  .border-gradient-n11-n10 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n10), var(--n11)) 1;
  }
  .border-gradient-hover-n10-n11:hover,
  .border-gradient-hover-n11-n10:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n10), var(--n11)) 1;
  }
  .border-gradient-n10-n12,
  .border-gradient-n12-n10 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n10), var(--n12)) 1;
  }
  .border-gradient-hover-n10-n12:hover,
  .border-gradient-hover-n12-n10:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n10), var(--n12)) 1;
  }
  .border-gradient-n11-n12,
  .border-gradient-n12-n11 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n11), var(--n12)) 1;
  }
  .border-gradient-hover-n11-n12:hover,
  .border-gradient-hover-n12-n11:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n11), var(--n12)) 1;
  }
  .border-gradient-n12-n13,
  .border-gradient-n13-n12 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n12), var(--n13)) 1;
  }
  .border-gradient-hover-n12-n13:hover,
  .border-gradient-hover-n13-n12:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n12), var(--n13)) 1;
  }
  .border-gradient-n12-n12,
  .border-gradient-n12-n12 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n12), var(--n12)) 1;
  }
  .border-gradient-hover-n12-n12:hover,
  .border-gradient-hover-n12-n12:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--n12), var(--n12)) 1;
  }
  .border-gradient-p1-p2,
  .border-gradient-p2-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p2)) 1;
  }
  .border-gradient-hover-p1-p2:hover,
  .border-gradient-hover-p2-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p2)) 1;
  }
  .border-gradient-p1-p3,
  .border-gradient-p3-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p3)) 1;
  }
  .border-gradient-hover-p1-p3:hover,
  .border-gradient-hover-p3-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p3)) 1;
  }
  .border-gradient-p1-p4,
  .border-gradient-p4-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p4)) 1;
  }
  .border-gradient-hover-p1-p4:hover,
  .border-gradient-hover-p4-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p4)) 1;
  }
  .border-gradient-p1-p5,
  .border-gradient-p5-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p5)) 1;
  }
  .border-gradient-hover-p1-p5:hover,
  .border-gradient-hover-p5-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p5)) 1;
  }
  .border-gradient-p1-p6,
  .border-gradient-p6-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p6)) 1;
  }
  .border-gradient-hover-p1-p6:hover,
  .border-gradient-hover-p6-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p6)) 1;
  }
  .border-gradient-p1-p7,
  .border-gradient-p7-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p7)) 1;
  }
  .border-gradient-hover-p1-p7:hover,
  .border-gradient-hover-p7-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p7)) 1;
  }
  .border-gradient-p1-p8,
  .border-gradient-p8-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p8)) 1;
  }
  .border-gradient-hover-p1-p8:hover,
  .border-gradient-hover-p8-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p8)) 1;
  }
  .border-gradient-p1-p9,
  .border-gradient-p9-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p9)) 1;
  }
  .border-gradient-hover-p1-p9:hover,
  .border-gradient-hover-p9-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p9)) 1;
  }
  .border-gradient-p1-p10,
  .border-gradient-p10-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p10)) 1;
  }
  .border-gradient-hover-p1-p10:hover,
  .border-gradient-hover-p10-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p10)) 1;
  }
  .border-gradient-p1-p11,
  .border-gradient-p11-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p11)) 1;
  }
  .border-gradient-hover-p1-p11:hover,
  .border-gradient-hover-p11-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p11)) 1;
  }
  .border-gradient-p1-p12,
  .border-gradient-p12-p1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p12)) 1;
  }
  .border-gradient-hover-p1-p12:hover,
  .border-gradient-hover-p12-p1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p1), var(--p12)) 1;
  }
  .border-gradient-p2-p3,
  .border-gradient-p3-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p3)) 1;
  }
  .border-gradient-hover-p2-p3:hover,
  .border-gradient-hover-p3-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p3)) 1;
  }
  .border-gradient-p2-p4,
  .border-gradient-p4-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p4)) 1;
  }
  .border-gradient-hover-p2-p4:hover,
  .border-gradient-hover-p4-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p4)) 1;
  }
  .border-gradient-p2-p5,
  .border-gradient-p5-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p5)) 1;
  }
  .border-gradient-hover-p2-p5:hover,
  .border-gradient-hover-p5-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p5)) 1;
  }
  .border-gradient-p2-p6,
  .border-gradient-p6-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p6)) 1;
  }
  .border-gradient-hover-p2-p6:hover,
  .border-gradient-hover-p6-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p6)) 1;
  }
  .border-gradient-p2-p7,
  .border-gradient-p7-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p7)) 1;
  }
  .border-gradient-hover-p2-p7:hover,
  .border-gradient-hover-p7-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p7)) 1;
  }
  .border-gradient-p2-p8,
  .border-gradient-p8-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p8)) 1;
  }
  .border-gradient-hover-p2-p8:hover,
  .border-gradient-hover-p8-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p8)) 1;
  }
  .border-gradient-p2-p9,
  .border-gradient-p9-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p9)) 1;
  }
  .border-gradient-hover-p2-p9:hover,
  .border-gradient-hover-p9-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p9)) 1;
  }
  .border-gradient-p2-p10,
  .border-gradient-p10-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p10)) 1;
  }
  .border-gradient-hover-p2-p10:hover,
  .border-gradient-hover-p10-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p10)) 1;
  }
  .border-gradient-p2-p11,
  .border-gradient-p11-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p11)) 1;
  }
  .border-gradient-hover-p2-p11:hover,
  .border-gradient-hover-p11-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p11)) 1;
  }
  .border-gradient-p2-p12,
  .border-gradient-p12-p2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p12)) 1;
  }
  .border-gradient-hover-p2-p12:hover,
  .border-gradient-hover-p12-p2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p2), var(--p12)) 1;
  }
  .border-gradient-p3-p4,
  .border-gradient-p4-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p4)) 1;
  }
  .border-gradient-hover-p3-p4:hover,
  .border-gradient-hover-p4-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p4)) 1;
  }
  .border-gradient-p3-p5,
  .border-gradient-p5-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p5)) 1;
  }
  .border-gradient-hover-p3-p5:hover,
  .border-gradient-hover-p5-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p5)) 1;
  }
  .border-gradient-p3-p6,
  .border-gradient-p6-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p6)) 1;
  }
  .border-gradient-hover-p3-p6:hover,
  .border-gradient-hover-p6-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p6)) 1;
  }
  .border-gradient-p3-p7,
  .border-gradient-p7-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p7)) 1;
  }
  .border-gradient-hover-p3-p7:hover,
  .border-gradient-hover-p7-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p7)) 1;
  }
  .border-gradient-p3-p8,
  .border-gradient-p8-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p8)) 1;
  }
  .border-gradient-hover-p3-p8:hover,
  .border-gradient-hover-p8-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p8)) 1;
  }
  .border-gradient-p3-p9,
  .border-gradient-p9-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p9)) 1;
  }
  .border-gradient-hover-p3-p9:hover,
  .border-gradient-hover-p9-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p9)) 1;
  }
  .border-gradient-p3-p10,
  .border-gradient-p10-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p10)) 1;
  }
  .border-gradient-hover-p3-p10:hover,
  .border-gradient-hover-p10-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p10)) 1;
  }
  .border-gradient-p3-p11,
  .border-gradient-p11-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p11)) 1;
  }
  .border-gradient-hover-p3-p11:hover,
  .border-gradient-hover-p11-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p11)) 1;
  }
  .border-gradient-p3-p12,
  .border-gradient-p12-p3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p12)) 1;
  }
  .border-gradient-hover-p3-p12:hover,
  .border-gradient-hover-p12-p3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p3), var(--p12)) 1;
  }
  .border-gradient-p4-p5,
  .border-gradient-p5-p4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p5)) 1;
  }
  .border-gradient-hover-p4-p5:hover,
  .border-gradient-hover-p5-p4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p5)) 1;
  }
  .border-gradient-p4-p6,
  .border-gradient-p6-p4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p6)) 1;
  }
  .border-gradient-hover-p4-p6:hover,
  .border-gradient-hover-p6-p4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p6)) 1;
  }
  .border-gradient-p4-p7,
  .border-gradient-p7-p4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p7)) 1;
  }
  .border-gradient-hover-p4-p7:hover,
  .border-gradient-hover-p7-p4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p7)) 1;
  }
  .border-gradient-p4-p8,
  .border-gradient-p8-p4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p8)) 1;
  }
  .border-gradient-hover-p4-p8:hover,
  .border-gradient-hover-p8-p4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p8)) 1;
  }
  .border-gradient-p4-p9,
  .border-gradient-p9-p4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p9)) 1;
  }
  .border-gradient-hover-p4-p9:hover,
  .border-gradient-hover-p9-p4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p9)) 1;
  }
  .border-gradient-p4-p10,
  .border-gradient-p10-p4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p10)) 1;
  }
  .border-gradient-hover-p4-p10:hover,
  .border-gradient-hover-p10-p4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p10)) 1;
  }
  .border-gradient-p4-p11,
  .border-gradient-p11-p4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p11)) 1;
  }
  .border-gradient-hover-p4-p11:hover,
  .border-gradient-hover-p11-p4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p11)) 1;
  }
  .border-gradient-p4-p12,
  .border-gradient-p12-p4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p12)) 1;
  }
  .border-gradient-hover-p4-p12:hover,
  .border-gradient-hover-p12-p4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p4), var(--p12)) 1;
  }
  .border-gradient-p5-p6,
  .border-gradient-p6-p5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p6)) 1;
  }
  .border-gradient-hover-p5-p6:hover,
  .border-gradient-hover-p6-p5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p6)) 1;
  }
  .border-gradient-p5-p7,
  .border-gradient-p7-p5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p7)) 1;
  }
  .border-gradient-hover-p5-p7:hover,
  .border-gradient-hover-p7-p5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p7)) 1;
  }
  .border-gradient-p5-p8,
  .border-gradient-p8-p5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p8)) 1;
  }
  .border-gradient-hover-p5-p8:hover,
  .border-gradient-hover-p8-p5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p8)) 1;
  }
  .border-gradient-p5-p9,
  .border-gradient-p9-p5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p9)) 1;
  }
  .border-gradient-hover-p5-p9:hover,
  .border-gradient-hover-p9-p5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p9)) 1;
  }
  .border-gradient-p5-p10,
  .border-gradient-p10-p5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p10)) 1;
  }
  .border-gradient-hover-p5-p10:hover,
  .border-gradient-hover-p10-p5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p10)) 1;
  }
  .border-gradient-p5-p11,
  .border-gradient-p11-p5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p11)) 1;
  }
  .border-gradient-hover-p5-p11:hover,
  .border-gradient-hover-p11-p5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p11)) 1;
  }
  .border-gradient-p5-p12,
  .border-gradient-p12-p5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p12)) 1;
  }
  .border-gradient-hover-p5-p12:hover,
  .border-gradient-hover-p12-p5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p5), var(--p12)) 1;
  }
  .border-gradient-p6-p7,
  .border-gradient-p7-p6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p7)) 1;
  }
  .border-gradient-hover-p6-p7:hover,
  .border-gradient-hover-p7-p6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p7)) 1;
  }
  .border-gradient-p6-p8,
  .border-gradient-p8-p6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p8)) 1;
  }
  .border-gradient-hover-p6-p8:hover,
  .border-gradient-hover-p8-p6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p8)) 1;
  }
  .border-gradient-p6-p9,
  .border-gradient-p9-p6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p9)) 1;
  }
  .border-gradient-hover-p6-p9:hover,
  .border-gradient-hover-p9-p6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p9)) 1;
  }
  .border-gradient-p6-p10,
  .border-gradient-p10-p6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p10)) 1;
  }
  .border-gradient-hover-p6-p10:hover,
  .border-gradient-hover-p10-p6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p10)) 1;
  }
  .border-gradient-p6-p11,
  .border-gradient-p11-p6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p11)) 1;
  }
  .border-gradient-hover-p6-p11:hover,
  .border-gradient-hover-p11-p6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p11)) 1;
  }
  .border-gradient-p6-p12,
  .border-gradient-p12-p6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p12)) 1;
  }
  .border-gradient-hover-p6-p12:hover,
  .border-gradient-hover-p12-p6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p6), var(--p12)) 1;
  }
  .border-gradient-p7-p8,
  .border-gradient-p8-p7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p8)) 1;
  }
  .border-gradient-hover-p7-p8:hover,
  .border-gradient-hover-p8-p7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p8)) 1;
  }
  .border-gradient-p7-p9,
  .border-gradient-p9-p7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p9)) 1;
  }
  .border-gradient-hover-p7-p9:hover,
  .border-gradient-hover-p9-p7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p9)) 1;
  }
  .border-gradient-p7-p10,
  .border-gradient-p10-p7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p10)) 1;
  }
  .border-gradient-hover-p7-p10:hover,
  .border-gradient-hover-p10-p7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p10)) 1;
  }
  .border-gradient-p7-p11,
  .border-gradient-p11-p7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p11)) 1;
  }
  .border-gradient-hover-p7-p11:hover,
  .border-gradient-hover-p11-p7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p11)) 1;
  }
  .border-gradient-p7-p12,
  .border-gradient-p12-p7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p12)) 1;
  }
  .border-gradient-hover-p7-p12:hover,
  .border-gradient-hover-p12-p7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p7), var(--p12)) 1;
  }
  .border-gradient-p8-p9,
  .border-gradient-p9-p8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p8), var(--p9)) 1;
  }
  .border-gradient-hover-p8-p9:hover,
  .border-gradient-hover-p9-p8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p8), var(--p9)) 1;
  }
  .border-gradient-p8-p10,
  .border-gradient-p10-p8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p8), var(--p10)) 1;
  }
  .border-gradient-hover-p8-p10:hover,
  .border-gradient-hover-p10-p8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p8), var(--p10)) 1;
  }
  .border-gradient-p8-p11,
  .border-gradient-p11-p8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p8), var(--p11)) 1;
  }
  .border-gradient-hover-p8-p11:hover,
  .border-gradient-hover-p11-p8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p8), var(--p11)) 1;
  }
  .border-gradient-p8-p12,
  .border-gradient-p12-p8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p8), var(--p12)) 1;
  }
  .border-gradient-hover-p8-p12:hover,
  .border-gradient-hover-p12-p8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p8), var(--p12)) 1;
  }
  .border-gradient-p9-p10,
  .border-gradient-p10-p9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p9), var(--p10)) 1;
  }
  .border-gradient-hover-p9-p10:hover,
  .border-gradient-hover-p10-p9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p9), var(--p10)) 1;
  }
  .border-gradient-p9-p11,
  .border-gradient-p11-p9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p9), var(--p11)) 1;
  }
  .border-gradient-hover-p9-p11:hover,
  .border-gradient-hover-p11-p9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p9), var(--p11)) 1;
  }
  .border-gradient-p9-p12,
  .border-gradient-p12-p9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p9), var(--p12)) 1;
  }
  .border-gradient-hover-p9-p12:hover,
  .border-gradient-hover-p12-p9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p9), var(--p12)) 1;
  }
  .border-gradient-p10-p11,
  .border-gradient-p11-p10 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p10), var(--p11)) 1;
  }
  .border-gradient-hover-p10-p11:hover,
  .border-gradient-hover-p11-p10:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p10), var(--p11)) 1;
  }
  .border-gradient-p10-p12,
  .border-gradient-p12-p10 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p10), var(--p12)) 1;
  }
  .border-gradient-hover-p10-p12:hover,
  .border-gradient-hover-p12-p10:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p10), var(--p12)) 1;
  }
  .border-gradient-p11-p12,
  .border-gradient-p12-p11 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p11), var(--p12)) 1;
  }
  .border-gradient-hover-p11-p12:hover,
  .border-gradient-hover-p12-p11:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p11), var(--p12)) 1;
  }
  .border-gradient-p12-p13,
  .border-gradient-p13-p12 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p12), var(--p13)) 1;
  }
  .border-gradient-hover-p12-p13:hover,
  .border-gradient-hover-p13-p12:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p12), var(--p13)) 1;
  }
  .border-gradient-p12-p12,
  .border-gradient-p12-p12 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p12), var(--p12)) 1;
  }
  .border-gradient-hover-p12-p12:hover,
  .border-gradient-hover-p12-p12:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--p12), var(--p12)) 1;
  }
  .border-gradient-s1-s2,
  .border-gradient-s2-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s2)) 1;
  }
  .border-gradient-hover-s1-s2:hover,
  .border-gradient-hover-s2-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s2)) 1;
  }
  .border-gradient-s1-s3,
  .border-gradient-s3-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s3)) 1;
  }
  .border-gradient-hover-s1-s3:hover,
  .border-gradient-hover-s3-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s3)) 1;
  }
  .border-gradient-s1-s4,
  .border-gradient-s4-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s4)) 1;
  }
  .border-gradient-hover-s1-s4:hover,
  .border-gradient-hover-s4-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s4)) 1;
  }
  .border-gradient-s1-s5,
  .border-gradient-s5-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s5)) 1;
  }
  .border-gradient-hover-s1-s5:hover,
  .border-gradient-hover-s5-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s5)) 1;
  }
  .border-gradient-s1-s6,
  .border-gradient-s6-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s6)) 1;
  }
  .border-gradient-hover-s1-s6:hover,
  .border-gradient-hover-s6-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s6)) 1;
  }
  .border-gradient-s1-s7,
  .border-gradient-s7-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s7)) 1;
  }
  .border-gradient-hover-s1-s7:hover,
  .border-gradient-hover-s7-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s7)) 1;
  }
  .border-gradient-s1-s8,
  .border-gradient-s8-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s8)) 1;
  }
  .border-gradient-hover-s1-s8:hover,
  .border-gradient-hover-s8-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s8)) 1;
  }
  .border-gradient-s1-s9,
  .border-gradient-s9-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s9)) 1;
  }
  .border-gradient-hover-s1-s9:hover,
  .border-gradient-hover-s9-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s9)) 1;
  }
  .border-gradient-s1-s10,
  .border-gradient-s10-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s10)) 1;
  }
  .border-gradient-hover-s1-s10:hover,
  .border-gradient-hover-s10-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s10)) 1;
  }
  .border-gradient-s1-s11,
  .border-gradient-s11-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s11)) 1;
  }
  .border-gradient-hover-s1-s11:hover,
  .border-gradient-hover-s11-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s11)) 1;
  }
  .border-gradient-s1-s12,
  .border-gradient-s12-s1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s12)) 1;
  }
  .border-gradient-hover-s1-s12:hover,
  .border-gradient-hover-s12-s1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s1), var(--s12)) 1;
  }
  .border-gradient-s2-s3,
  .border-gradient-s3-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s3)) 1;
  }
  .border-gradient-hover-s2-s3:hover,
  .border-gradient-hover-s3-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s3)) 1;
  }
  .border-gradient-s2-s4,
  .border-gradient-s4-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s4)) 1;
  }
  .border-gradient-hover-s2-s4:hover,
  .border-gradient-hover-s4-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s4)) 1;
  }
  .border-gradient-s2-s5,
  .border-gradient-s5-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s5)) 1;
  }
  .border-gradient-hover-s2-s5:hover,
  .border-gradient-hover-s5-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s5)) 1;
  }
  .border-gradient-s2-s6,
  .border-gradient-s6-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s6)) 1;
  }
  .border-gradient-hover-s2-s6:hover,
  .border-gradient-hover-s6-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s6)) 1;
  }
  .border-gradient-s2-s7,
  .border-gradient-s7-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s7)) 1;
  }
  .border-gradient-hover-s2-s7:hover,
  .border-gradient-hover-s7-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s7)) 1;
  }
  .border-gradient-s2-s8,
  .border-gradient-s8-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s8)) 1;
  }
  .border-gradient-hover-s2-s8:hover,
  .border-gradient-hover-s8-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s8)) 1;
  }
  .border-gradient-s2-s9,
  .border-gradient-s9-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s9)) 1;
  }
  .border-gradient-hover-s2-s9:hover,
  .border-gradient-hover-s9-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s9)) 1;
  }
  .border-gradient-s2-s10,
  .border-gradient-s10-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s10)) 1;
  }
  .border-gradient-hover-s2-s10:hover,
  .border-gradient-hover-s10-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s10)) 1;
  }
  .border-gradient-s2-s11,
  .border-gradient-s11-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s11)) 1;
  }
  .border-gradient-hover-s2-s11:hover,
  .border-gradient-hover-s11-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s11)) 1;
  }
  .border-gradient-s2-s12,
  .border-gradient-s12-s2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s12)) 1;
  }
  .border-gradient-hover-s2-s12:hover,
  .border-gradient-hover-s12-s2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s2), var(--s12)) 1;
  }
  .border-gradient-s3-s4,
  .border-gradient-s4-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s4)) 1;
  }
  .border-gradient-hover-s3-s4:hover,
  .border-gradient-hover-s4-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s4)) 1;
  }
  .border-gradient-s3-s5,
  .border-gradient-s5-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s5)) 1;
  }
  .border-gradient-hover-s3-s5:hover,
  .border-gradient-hover-s5-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s5)) 1;
  }
  .border-gradient-s3-s6,
  .border-gradient-s6-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s6)) 1;
  }
  .border-gradient-hover-s3-s6:hover,
  .border-gradient-hover-s6-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s6)) 1;
  }
  .border-gradient-s3-s7,
  .border-gradient-s7-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s7)) 1;
  }
  .border-gradient-hover-s3-s7:hover,
  .border-gradient-hover-s7-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s7)) 1;
  }
  .border-gradient-s3-s8,
  .border-gradient-s8-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s8)) 1;
  }
  .border-gradient-hover-s3-s8:hover,
  .border-gradient-hover-s8-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s8)) 1;
  }
  .border-gradient-s3-s9,
  .border-gradient-s9-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s9)) 1;
  }
  .border-gradient-hover-s3-s9:hover,
  .border-gradient-hover-s9-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s9)) 1;
  }
  .border-gradient-s3-s10,
  .border-gradient-s10-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s10)) 1;
  }
  .border-gradient-hover-s3-s10:hover,
  .border-gradient-hover-s10-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s10)) 1;
  }
  .border-gradient-s3-s11,
  .border-gradient-s11-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s11)) 1;
  }
  .border-gradient-hover-s3-s11:hover,
  .border-gradient-hover-s11-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s11)) 1;
  }
  .border-gradient-s3-s12,
  .border-gradient-s12-s3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s12)) 1;
  }
  .border-gradient-hover-s3-s12:hover,
  .border-gradient-hover-s12-s3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s3), var(--s12)) 1;
  }
  .border-gradient-s4-s5,
  .border-gradient-s5-s4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s5)) 1;
  }
  .border-gradient-hover-s4-s5:hover,
  .border-gradient-hover-s5-s4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s5)) 1;
  }
  .border-gradient-s4-s6,
  .border-gradient-s6-s4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s6)) 1;
  }
  .border-gradient-hover-s4-s6:hover,
  .border-gradient-hover-s6-s4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s6)) 1;
  }
  .border-gradient-s4-s7,
  .border-gradient-s7-s4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s7)) 1;
  }
  .border-gradient-hover-s4-s7:hover,
  .border-gradient-hover-s7-s4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s7)) 1;
  }
  .border-gradient-s4-s8,
  .border-gradient-s8-s4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s8)) 1;
  }
  .border-gradient-hover-s4-s8:hover,
  .border-gradient-hover-s8-s4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s8)) 1;
  }
  .border-gradient-s4-s9,
  .border-gradient-s9-s4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s9)) 1;
  }
  .border-gradient-hover-s4-s9:hover,
  .border-gradient-hover-s9-s4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s9)) 1;
  }
  .border-gradient-s4-s10,
  .border-gradient-s10-s4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s10)) 1;
  }
  .border-gradient-hover-s4-s10:hover,
  .border-gradient-hover-s10-s4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s10)) 1;
  }
  .border-gradient-s4-s11,
  .border-gradient-s11-s4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s11)) 1;
  }
  .border-gradient-hover-s4-s11:hover,
  .border-gradient-hover-s11-s4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s11)) 1;
  }
  .border-gradient-s4-s12,
  .border-gradient-s12-s4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s12)) 1;
  }
  .border-gradient-hover-s4-s12:hover,
  .border-gradient-hover-s12-s4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s4), var(--s12)) 1;
  }
  .border-gradient-s5-s6,
  .border-gradient-s6-s5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s6)) 1;
  }
  .border-gradient-hover-s5-s6:hover,
  .border-gradient-hover-s6-s5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s6)) 1;
  }
  .border-gradient-s5-s7,
  .border-gradient-s7-s5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s7)) 1;
  }
  .border-gradient-hover-s5-s7:hover,
  .border-gradient-hover-s7-s5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s7)) 1;
  }
  .border-gradient-s5-s8,
  .border-gradient-s8-s5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s8)) 1;
  }
  .border-gradient-hover-s5-s8:hover,
  .border-gradient-hover-s8-s5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s8)) 1;
  }
  .border-gradient-s5-s9,
  .border-gradient-s9-s5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s9)) 1;
  }
  .border-gradient-hover-s5-s9:hover,
  .border-gradient-hover-s9-s5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s9)) 1;
  }
  .border-gradient-s5-s10,
  .border-gradient-s10-s5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s10)) 1;
  }
  .border-gradient-hover-s5-s10:hover,
  .border-gradient-hover-s10-s5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s10)) 1;
  }
  .border-gradient-s5-s11,
  .border-gradient-s11-s5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s11)) 1;
  }
  .border-gradient-hover-s5-s11:hover,
  .border-gradient-hover-s11-s5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s11)) 1;
  }
  .border-gradient-s5-s12,
  .border-gradient-s12-s5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s12)) 1;
  }
  .border-gradient-hover-s5-s12:hover,
  .border-gradient-hover-s12-s5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s5), var(--s12)) 1;
  }
  .border-gradient-s6-s7,
  .border-gradient-s7-s6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s7)) 1;
  }
  .border-gradient-hover-s6-s7:hover,
  .border-gradient-hover-s7-s6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s7)) 1;
  }
  .border-gradient-s6-s8,
  .border-gradient-s8-s6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s8)) 1;
  }
  .border-gradient-hover-s6-s8:hover,
  .border-gradient-hover-s8-s6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s8)) 1;
  }
  .border-gradient-s6-s9,
  .border-gradient-s9-s6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s9)) 1;
  }
  .border-gradient-hover-s6-s9:hover,
  .border-gradient-hover-s9-s6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s9)) 1;
  }
  .border-gradient-s6-s10,
  .border-gradient-s10-s6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s10)) 1;
  }
  .border-gradient-hover-s6-s10:hover,
  .border-gradient-hover-s10-s6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s10)) 1;
  }
  .border-gradient-s6-s11,
  .border-gradient-s11-s6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s11)) 1;
  }
  .border-gradient-hover-s6-s11:hover,
  .border-gradient-hover-s11-s6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s11)) 1;
  }
  .border-gradient-s6-s12,
  .border-gradient-s12-s6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s12)) 1;
  }
  .border-gradient-hover-s6-s12:hover,
  .border-gradient-hover-s12-s6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s6), var(--s12)) 1;
  }
  .border-gradient-s7-s8,
  .border-gradient-s8-s7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s8)) 1;
  }
  .border-gradient-hover-s7-s8:hover,
  .border-gradient-hover-s8-s7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s8)) 1;
  }
  .border-gradient-s7-s9,
  .border-gradient-s9-s7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s9)) 1;
  }
  .border-gradient-hover-s7-s9:hover,
  .border-gradient-hover-s9-s7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s9)) 1;
  }
  .border-gradient-s7-s10,
  .border-gradient-s10-s7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s10)) 1;
  }
  .border-gradient-hover-s7-s10:hover,
  .border-gradient-hover-s10-s7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s10)) 1;
  }
  .border-gradient-s7-s11,
  .border-gradient-s11-s7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s11)) 1;
  }
  .border-gradient-hover-s7-s11:hover,
  .border-gradient-hover-s11-s7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s11)) 1;
  }
  .border-gradient-s7-s12,
  .border-gradient-s12-s7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s12)) 1;
  }
  .border-gradient-hover-s7-s12:hover,
  .border-gradient-hover-s12-s7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s7), var(--s12)) 1;
  }
  .border-gradient-s8-s9,
  .border-gradient-s9-s8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s8), var(--s9)) 1;
  }
  .border-gradient-hover-s8-s9:hover,
  .border-gradient-hover-s9-s8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s8), var(--s9)) 1;
  }
  .border-gradient-s8-s10,
  .border-gradient-s10-s8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s8), var(--s10)) 1;
  }
  .border-gradient-hover-s8-s10:hover,
  .border-gradient-hover-s10-s8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s8), var(--s10)) 1;
  }
  .border-gradient-s8-s11,
  .border-gradient-s11-s8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s8), var(--s11)) 1;
  }
  .border-gradient-hover-s8-s11:hover,
  .border-gradient-hover-s11-s8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s8), var(--s11)) 1;
  }
  .border-gradient-s8-s12,
  .border-gradient-s12-s8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s8), var(--s12)) 1;
  }
  .border-gradient-hover-s8-s12:hover,
  .border-gradient-hover-s12-s8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s8), var(--s12)) 1;
  }
  .border-gradient-s9-s10,
  .border-gradient-s10-s9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s9), var(--s10)) 1;
  }
  .border-gradient-hover-s9-s10:hover,
  .border-gradient-hover-s10-s9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s9), var(--s10)) 1;
  }
  .border-gradient-s9-s11,
  .border-gradient-s11-s9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s9), var(--s11)) 1;
  }
  .border-gradient-hover-s9-s11:hover,
  .border-gradient-hover-s11-s9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s9), var(--s11)) 1;
  }
  .border-gradient-s9-s12,
  .border-gradient-s12-s9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s9), var(--s12)) 1;
  }
  .border-gradient-hover-s9-s12:hover,
  .border-gradient-hover-s12-s9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s9), var(--s12)) 1;
  }
  .border-gradient-s10-s11,
  .border-gradient-s11-s10 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s10), var(--s11)) 1;
  }
  .border-gradient-hover-s10-s11:hover,
  .border-gradient-hover-s11-s10:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s10), var(--s11)) 1;
  }
  .border-gradient-s10-s12,
  .border-gradient-s12-s10 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s10), var(--s12)) 1;
  }
  .border-gradient-hover-s10-s12:hover,
  .border-gradient-hover-s12-s10:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s10), var(--s12)) 1;
  }
  .border-gradient-s11-s12,
  .border-gradient-s12-s11 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s11), var(--s12)) 1;
  }
  .border-gradient-hover-s11-s12:hover,
  .border-gradient-hover-s12-s11:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s11), var(--s12)) 1;
  }
  .border-gradient-s12-s13,
  .border-gradient-s13-s12 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s12), var(--s13)) 1;
  }
  .border-gradient-hover-s12-s13:hover,
  .border-gradient-hover-s13-s12:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s12), var(--s13)) 1;
  }
  .border-gradient-s12-s12,
  .border-gradient-s12-s12 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s12), var(--s12)) 1;
  }
  .border-gradient-hover-s12-s12:hover,
  .border-gradient-hover-s12-s12:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--s12), var(--s12)) 1;
  }
  .border-gradient-a1-a2,
  .border-gradient-a2-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a2)) 1;
  }
  .border-gradient-hover-a1-a2:hover,
  .border-gradient-hover-a2-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a2)) 1;
  }
  .border-gradient-a1-a3,
  .border-gradient-a3-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a3)) 1;
  }
  .border-gradient-hover-a1-a3:hover,
  .border-gradient-hover-a3-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a3)) 1;
  }
  .border-gradient-a1-a4,
  .border-gradient-a4-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a4)) 1;
  }
  .border-gradient-hover-a1-a4:hover,
  .border-gradient-hover-a4-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a4)) 1;
  }
  .border-gradient-a1-a5,
  .border-gradient-a5-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a5)) 1;
  }
  .border-gradient-hover-a1-a5:hover,
  .border-gradient-hover-a5-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a5)) 1;
  }
  .border-gradient-a1-a6,
  .border-gradient-a6-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a6)) 1;
  }
  .border-gradient-hover-a1-a6:hover,
  .border-gradient-hover-a6-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a6)) 1;
  }
  .border-gradient-a1-a7,
  .border-gradient-a7-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a7)) 1;
  }
  .border-gradient-hover-a1-a7:hover,
  .border-gradient-hover-a7-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a7)) 1;
  }
  .border-gradient-a1-a8,
  .border-gradient-a8-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a8)) 1;
  }
  .border-gradient-hover-a1-a8:hover,
  .border-gradient-hover-a8-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a8)) 1;
  }
  .border-gradient-a1-a9,
  .border-gradient-a9-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a9)) 1;
  }
  .border-gradient-hover-a1-a9:hover,
  .border-gradient-hover-a9-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a9)) 1;
  }
  .border-gradient-a1-a10,
  .border-gradient-a10-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a10)) 1;
  }
  .border-gradient-hover-a1-a10:hover,
  .border-gradient-hover-a10-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a10)) 1;
  }
  .border-gradient-a1-a11,
  .border-gradient-a11-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a11)) 1;
  }
  .border-gradient-hover-a1-a11:hover,
  .border-gradient-hover-a11-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a11)) 1;
  }
  .border-gradient-a1-a12,
  .border-gradient-a12-a1 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a12)) 1;
  }
  .border-gradient-hover-a1-a12:hover,
  .border-gradient-hover-a12-a1:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a1), var(--a12)) 1;
  }
  .border-gradient-a2-a3,
  .border-gradient-a3-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a3)) 1;
  }
  .border-gradient-hover-a2-a3:hover,
  .border-gradient-hover-a3-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a3)) 1;
  }
  .border-gradient-a2-a4,
  .border-gradient-a4-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a4)) 1;
  }
  .border-gradient-hover-a2-a4:hover,
  .border-gradient-hover-a4-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a4)) 1;
  }
  .border-gradient-a2-a5,
  .border-gradient-a5-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a5)) 1;
  }
  .border-gradient-hover-a2-a5:hover,
  .border-gradient-hover-a5-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a5)) 1;
  }
  .border-gradient-a2-a6,
  .border-gradient-a6-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a6)) 1;
  }
  .border-gradient-hover-a2-a6:hover,
  .border-gradient-hover-a6-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a6)) 1;
  }
  .border-gradient-a2-a7,
  .border-gradient-a7-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a7)) 1;
  }
  .border-gradient-hover-a2-a7:hover,
  .border-gradient-hover-a7-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a7)) 1;
  }
  .border-gradient-a2-a8,
  .border-gradient-a8-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a8)) 1;
  }
  .border-gradient-hover-a2-a8:hover,
  .border-gradient-hover-a8-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a8)) 1;
  }
  .border-gradient-a2-a9,
  .border-gradient-a9-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a9)) 1;
  }
  .border-gradient-hover-a2-a9:hover,
  .border-gradient-hover-a9-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a9)) 1;
  }
  .border-gradient-a2-a10,
  .border-gradient-a10-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a10)) 1;
  }
  .border-gradient-hover-a2-a10:hover,
  .border-gradient-hover-a10-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a10)) 1;
  }
  .border-gradient-a2-a11,
  .border-gradient-a11-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a11)) 1;
  }
  .border-gradient-hover-a2-a11:hover,
  .border-gradient-hover-a11-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a11)) 1;
  }
  .border-gradient-a2-a12,
  .border-gradient-a12-a2 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a12)) 1;
  }
  .border-gradient-hover-a2-a12:hover,
  .border-gradient-hover-a12-a2:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a2), var(--a12)) 1;
  }
  .border-gradient-a3-a4,
  .border-gradient-a4-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a4)) 1;
  }
  .border-gradient-hover-a3-a4:hover,
  .border-gradient-hover-a4-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a4)) 1;
  }
  .border-gradient-a3-a5,
  .border-gradient-a5-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a5)) 1;
  }
  .border-gradient-hover-a3-a5:hover,
  .border-gradient-hover-a5-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a5)) 1;
  }
  .border-gradient-a3-a6,
  .border-gradient-a6-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a6)) 1;
  }
  .border-gradient-hover-a3-a6:hover,
  .border-gradient-hover-a6-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a6)) 1;
  }
  .border-gradient-a3-a7,
  .border-gradient-a7-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a7)) 1;
  }
  .border-gradient-hover-a3-a7:hover,
  .border-gradient-hover-a7-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a7)) 1;
  }
  .border-gradient-a3-a8,
  .border-gradient-a8-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a8)) 1;
  }
  .border-gradient-hover-a3-a8:hover,
  .border-gradient-hover-a8-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a8)) 1;
  }
  .border-gradient-a3-a9,
  .border-gradient-a9-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a9)) 1;
  }
  .border-gradient-hover-a3-a9:hover,
  .border-gradient-hover-a9-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a9)) 1;
  }
  .border-gradient-a3-a10,
  .border-gradient-a10-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a10)) 1;
  }
  .border-gradient-hover-a3-a10:hover,
  .border-gradient-hover-a10-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a10)) 1;
  }
  .border-gradient-a3-a11,
  .border-gradient-a11-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a11)) 1;
  }
  .border-gradient-hover-a3-a11:hover,
  .border-gradient-hover-a11-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a11)) 1;
  }
  .border-gradient-a3-a12,
  .border-gradient-a12-a3 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a12)) 1;
  }
  .border-gradient-hover-a3-a12:hover,
  .border-gradient-hover-a12-a3:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a3), var(--a12)) 1;
  }
  .border-gradient-a4-a5,
  .border-gradient-a5-a4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a5)) 1;
  }
  .border-gradient-hover-a4-a5:hover,
  .border-gradient-hover-a5-a4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a5)) 1;
  }
  .border-gradient-a4-a6,
  .border-gradient-a6-a4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a6)) 1;
  }
  .border-gradient-hover-a4-a6:hover,
  .border-gradient-hover-a6-a4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a6)) 1;
  }
  .border-gradient-a4-a7,
  .border-gradient-a7-a4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a7)) 1;
  }
  .border-gradient-hover-a4-a7:hover,
  .border-gradient-hover-a7-a4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a7)) 1;
  }
  .border-gradient-a4-a8,
  .border-gradient-a8-a4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a8)) 1;
  }
  .border-gradient-hover-a4-a8:hover,
  .border-gradient-hover-a8-a4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a8)) 1;
  }
  .border-gradient-a4-a9,
  .border-gradient-a9-a4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a9)) 1;
  }
  .border-gradient-hover-a4-a9:hover,
  .border-gradient-hover-a9-a4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a9)) 1;
  }
  .border-gradient-a4-a10,
  .border-gradient-a10-a4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a10)) 1;
  }
  .border-gradient-hover-a4-a10:hover,
  .border-gradient-hover-a10-a4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a10)) 1;
  }
  .border-gradient-a4-a11,
  .border-gradient-a11-a4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a11)) 1;
  }
  .border-gradient-hover-a4-a11:hover,
  .border-gradient-hover-a11-a4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a11)) 1;
  }
  .border-gradient-a4-a12,
  .border-gradient-a12-a4 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a12)) 1;
  }
  .border-gradient-hover-a4-a12:hover,
  .border-gradient-hover-a12-a4:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a4), var(--a12)) 1;
  }
  .border-gradient-a5-a6,
  .border-gradient-a6-a5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a6)) 1;
  }
  .border-gradient-hover-a5-a6:hover,
  .border-gradient-hover-a6-a5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a6)) 1;
  }
  .border-gradient-a5-a7,
  .border-gradient-a7-a5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a7)) 1;
  }
  .border-gradient-hover-a5-a7:hover,
  .border-gradient-hover-a7-a5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a7)) 1;
  }
  .border-gradient-a5-a8,
  .border-gradient-a8-a5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a8)) 1;
  }
  .border-gradient-hover-a5-a8:hover,
  .border-gradient-hover-a8-a5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a8)) 1;
  }
  .border-gradient-a5-a9,
  .border-gradient-a9-a5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a9)) 1;
  }
  .border-gradient-hover-a5-a9:hover,
  .border-gradient-hover-a9-a5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a9)) 1;
  }
  .border-gradient-a5-a10,
  .border-gradient-a10-a5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a10)) 1;
  }
  .border-gradient-hover-a5-a10:hover,
  .border-gradient-hover-a10-a5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a10)) 1;
  }
  .border-gradient-a5-a11,
  .border-gradient-a11-a5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a11)) 1;
  }
  .border-gradient-hover-a5-a11:hover,
  .border-gradient-hover-a11-a5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a11)) 1;
  }
  .border-gradient-a5-a12,
  .border-gradient-a12-a5 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a12)) 1;
  }
  .border-gradient-hover-a5-a12:hover,
  .border-gradient-hover-a12-a5:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a5), var(--a12)) 1;
  }
  .border-gradient-a6-a7,
  .border-gradient-a7-a6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a7)) 1;
  }
  .border-gradient-hover-a6-a7:hover,
  .border-gradient-hover-a7-a6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a7)) 1;
  }
  .border-gradient-a6-a8,
  .border-gradient-a8-a6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a8)) 1;
  }
  .border-gradient-hover-a6-a8:hover,
  .border-gradient-hover-a8-a6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a8)) 1;
  }
  .border-gradient-a6-a9,
  .border-gradient-a9-a6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a9)) 1;
  }
  .border-gradient-hover-a6-a9:hover,
  .border-gradient-hover-a9-a6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a9)) 1;
  }
  .border-gradient-a6-a10,
  .border-gradient-a10-a6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a10)) 1;
  }
  .border-gradient-hover-a6-a10:hover,
  .border-gradient-hover-a10-a6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a10)) 1;
  }
  .border-gradient-a6-a11,
  .border-gradient-a11-a6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a11)) 1;
  }
  .border-gradient-hover-a6-a11:hover,
  .border-gradient-hover-a11-a6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a11)) 1;
  }
  .border-gradient-a6-a12,
  .border-gradient-a12-a6 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a12)) 1;
  }
  .border-gradient-hover-a6-a12:hover,
  .border-gradient-hover-a12-a6:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a6), var(--a12)) 1;
  }
  .border-gradient-a7-a8,
  .border-gradient-a8-a7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a8)) 1;
  }
  .border-gradient-hover-a7-a8:hover,
  .border-gradient-hover-a8-a7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a8)) 1;
  }
  .border-gradient-a7-a9,
  .border-gradient-a9-a7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a9)) 1;
  }
  .border-gradient-hover-a7-a9:hover,
  .border-gradient-hover-a9-a7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a9)) 1;
  }
  .border-gradient-a7-a10,
  .border-gradient-a10-a7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a10)) 1;
  }
  .border-gradient-hover-a7-a10:hover,
  .border-gradient-hover-a10-a7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a10)) 1;
  }
  .border-gradient-a7-a11,
  .border-gradient-a11-a7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a11)) 1;
  }
  .border-gradient-hover-a7-a11:hover,
  .border-gradient-hover-a11-a7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a11)) 1;
  }
  .border-gradient-a7-a12,
  .border-gradient-a12-a7 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a12)) 1;
  }
  .border-gradient-hover-a7-a12:hover,
  .border-gradient-hover-a12-a7:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a7), var(--a12)) 1;
  }
  .border-gradient-a8-a9,
  .border-gradient-a9-a8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a8), var(--a9)) 1;
  }
  .border-gradient-hover-a8-a9:hover,
  .border-gradient-hover-a9-a8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a8), var(--a9)) 1;
  }
  .border-gradient-a8-a10,
  .border-gradient-a10-a8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a8), var(--a10)) 1;
  }
  .border-gradient-hover-a8-a10:hover,
  .border-gradient-hover-a10-a8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a8), var(--a10)) 1;
  }
  .border-gradient-a8-a11,
  .border-gradient-a11-a8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a8), var(--a11)) 1;
  }
  .border-gradient-hover-a8-a11:hover,
  .border-gradient-hover-a11-a8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a8), var(--a11)) 1;
  }
  .border-gradient-a8-a12,
  .border-gradient-a12-a8 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a8), var(--a12)) 1;
  }
  .border-gradient-hover-a8-a12:hover,
  .border-gradient-hover-a12-a8:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a8), var(--a12)) 1;
  }
  .border-gradient-a9-a10,
  .border-gradient-a10-a9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a9), var(--a10)) 1;
  }
  .border-gradient-hover-a9-a10:hover,
  .border-gradient-hover-a10-a9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a9), var(--a10)) 1;
  }
  .border-gradient-a9-a11,
  .border-gradient-a11-a9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a9), var(--a11)) 1;
  }
  .border-gradient-hover-a9-a11:hover,
  .border-gradient-hover-a11-a9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a9), var(--a11)) 1;
  }
  .border-gradient-a9-a12,
  .border-gradient-a12-a9 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a9), var(--a12)) 1;
  }
  .border-gradient-hover-a9-a12:hover,
  .border-gradient-hover-a12-a9:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a9), var(--a12)) 1;
  }
  .border-gradient-a10-a11,
  .border-gradient-a11-a10 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a10), var(--a11)) 1;
  }
  .border-gradient-hover-a10-a11:hover,
  .border-gradient-hover-a11-a10:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a10), var(--a11)) 1;
  }
  .border-gradient-a10-a12,
  .border-gradient-a12-a10 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a10), var(--a12)) 1;
  }
  .border-gradient-hover-a10-a12:hover,
  .border-gradient-hover-a12-a10:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a10), var(--a12)) 1;
  }
  .border-gradient-a11-a12,
  .border-gradient-a12-a11 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a11), var(--a12)) 1;
  }
  .border-gradient-hover-a11-a12:hover,
  .border-gradient-hover-a12-a11:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a11), var(--a12)) 1;
  }
  .border-gradient-a12-a13,
  .border-gradient-a13-a12 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a12), var(--a13)) 1;
  }
  .border-gradient-hover-a12-a13:hover,
  .border-gradient-hover-a13-a12:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a12), var(--a13)) 1;
  }
  .border-gradient-a12-a12,
  .border-gradient-a12-a12 {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a12), var(--a12)) 1;
  }
  .border-gradient-hover-a12-a12:hover,
  .border-gradient-hover-a12-a12:hover {
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--a12), var(--a12)) 1;
  }
  .border-subtle {
    border-color: var(--border-subtle);
  }
  .border-strong {
    border-color: var(--border-strong);
  }
  /* ============================================================
     5) SVG (fill & stroke)
     ============================================================ */
  .fill-n1 {
    fill: var(--n1);
  }
  .stroke-n1 {
    stroke: var(--n1);
  }
  .fill-n2 {
    fill: var(--n2);
  }
  .stroke-n2 {
    stroke: var(--n2);
  }
  .fill-n3 {
    fill: var(--n3);
  }
  .stroke-n3 {
    stroke: var(--n3);
  }
  .fill-n4 {
    fill: var(--n4);
  }
  .stroke-n4 {
    stroke: var(--n4);
  }
  .fill-n5 {
    fill: var(--n5);
  }
  .stroke-n5 {
    stroke: var(--n5);
  }
  .fill-n6 {
    fill: var(--n6);
  }
  .stroke-n6 {
    stroke: var(--n6);
  }
  .fill-n7 {
    fill: var(--n7);
  }
  .stroke-n7 {
    stroke: var(--n7);
  }
  .fill-n8 {
    fill: var(--n8);
  }
  .stroke-n8 {
    stroke: var(--n8);
  }
  .fill-n9 {
    fill: var(--n9);
  }
  .stroke-n9 {
    stroke: var(--n9);
  }
  .fill-n10 {
    fill: var(--n10);
  }
  .stroke-n10 {
    stroke: var(--n10);
  }
  .fill-n11 {
    fill: var(--n11);
  }
  .stroke-n11 {
    stroke: var(--n11);
  }
  .fill-n12 {
    fill: var(--n12);
  }
  .stroke-n12 {
    stroke: var(--n12);
  }
  .fill-p1 {
    fill: var(--p1);
  }
  .stroke-p1 {
    stroke: var(--p1);
  }
  .fill-p2 {
    fill: var(--p2);
  }
  .stroke-p2 {
    stroke: var(--p2);
  }
  .fill-p3 {
    fill: var(--p3);
  }
  .stroke-p3 {
    stroke: var(--p3);
  }
  .fill-p4 {
    fill: var(--p4);
  }
  .stroke-p4 {
    stroke: var(--p4);
  }
  .fill-p5 {
    fill: var(--p5);
  }
  .stroke-p5 {
    stroke: var(--p5);
  }
  .fill-p6 {
    fill: var(--p6);
  }
  .stroke-p6 {
    stroke: var(--p6);
  }
  .fill-p7 {
    fill: var(--p7);
  }
  .stroke-p7 {
    stroke: var(--p7);
  }
  .fill-p8 {
    fill: var(--p8);
  }
  .stroke-p8 {
    stroke: var(--p8);
  }
  .fill-p9 {
    fill: var(--p9);
  }
  .stroke-p9 {
    stroke: var(--p9);
  }
  .fill-p10 {
    fill: var(--p10);
  }
  .stroke-p10 {
    stroke: var(--p10);
  }
  .fill-p11 {
    fill: var(--p11);
  }
  .stroke-p11 {
    stroke: var(--p11);
  }
  .fill-p12 {
    fill: var(--p12);
  }
  .stroke-p12 {
    stroke: var(--p12);
  }
  .fill-s1 {
    fill: var(--s1);
  }
  .stroke-s1 {
    stroke: var(--s1);
  }
  .fill-s2 {
    fill: var(--s2);
  }
  .stroke-s2 {
    stroke: var(--s2);
  }
  .fill-s3 {
    fill: var(--s3);
  }
  .stroke-s3 {
    stroke: var(--s3);
  }
  .fill-s4 {
    fill: var(--s4);
  }
  .stroke-s4 {
    stroke: var(--s4);
  }
  .fill-s5 {
    fill: var(--s5);
  }
  .stroke-s5 {
    stroke: var(--s5);
  }
  .fill-s6 {
    fill: var(--s6);
  }
  .stroke-s6 {
    stroke: var(--s6);
  }
  .fill-s7 {
    fill: var(--s7);
  }
  .stroke-s7 {
    stroke: var(--s7);
  }
  .fill-s8 {
    fill: var(--s8);
  }
  .stroke-s8 {
    stroke: var(--s8);
  }
  .fill-s9 {
    fill: var(--s9);
  }
  .stroke-s9 {
    stroke: var(--s9);
  }
  .fill-s10 {
    fill: var(--s10);
  }
  .stroke-s10 {
    stroke: var(--s10);
  }
  .fill-s11 {
    fill: var(--s11);
  }
  .stroke-s11 {
    stroke: var(--s11);
  }
  .fill-s12 {
    fill: var(--s12);
  }
  .stroke-s12 {
    stroke: var(--s12);
  }
  .fill-a1 {
    fill: var(--a1);
  }
  .stroke-a1 {
    stroke: var(--a1);
  }
  .fill-a2 {
    fill: var(--a2);
  }
  .stroke-a2 {
    stroke: var(--a2);
  }
  .fill-a3 {
    fill: var(--a3);
  }
  .stroke-a3 {
    stroke: var(--a3);
  }
  .fill-a4 {
    fill: var(--a4);
  }
  .stroke-a4 {
    stroke: var(--a4);
  }
  .fill-a5 {
    fill: var(--a5);
  }
  .stroke-a5 {
    stroke: var(--a5);
  }
  .fill-a6 {
    fill: var(--a6);
  }
  .stroke-a6 {
    stroke: var(--a6);
  }
  .fill-a7 {
    fill: var(--a7);
  }
  .stroke-a7 {
    stroke: var(--a7);
  }
  .fill-a8 {
    fill: var(--a8);
  }
  .stroke-a8 {
    stroke: var(--a8);
  }
  .fill-a9 {
    fill: var(--a9);
  }
  .stroke-a9 {
    stroke: var(--a9);
  }
  .fill-a10 {
    fill: var(--a10);
  }
  .stroke-a10 {
    stroke: var(--a10);
  }
  .fill-a11 {
    fill: var(--a11);
  }
  .stroke-a11 {
    stroke: var(--a11);
  }
  .fill-a12 {
    fill: var(--a12);
  }
  .stroke-a12 {
    stroke: var(--a12);
  }
  /* ============================================================
     6) RINGS (včetně hover)
     ============================================================ */
  .ring {
    box-shadow: 0 0 0 2px var(--ui-border);
  }
  .ring:hover {
    box-shadow: 0 0 0 3px var(--ui-border);
  }
  .ring-hover:hover {
    box-shadow: 0 0 0 3px var(--ui-border);
  }
  .ring-0 {
    box-shadow: none;
  }
  .ring-n1 {
    box-shadow: 0 0 0 2px var(--n1);
  }
  .ring-hover-n1:hover {
    box-shadow: 0 0 0 3px var(--n1);
  }
  .ring-n2 {
    box-shadow: 0 0 0 2px var(--n2);
  }
  .ring-hover-n2:hover {
    box-shadow: 0 0 0 3px var(--n2);
  }
  .ring-n3 {
    box-shadow: 0 0 0 2px var(--n3);
  }
  .ring-hover-n3:hover {
    box-shadow: 0 0 0 3px var(--n3);
  }
  .ring-n4 {
    box-shadow: 0 0 0 2px var(--n4);
  }
  .ring-hover-n4:hover {
    box-shadow: 0 0 0 3px var(--n4);
  }
  .ring-n5 {
    box-shadow: 0 0 0 2px var(--n5);
  }
  .ring-hover-n5:hover {
    box-shadow: 0 0 0 3px var(--n5);
  }
  .ring-n6 {
    box-shadow: 0 0 0 2px var(--n6);
  }
  .ring-hover-n6:hover {
    box-shadow: 0 0 0 3px var(--n6);
  }
  .ring-n7 {
    box-shadow: 0 0 0 2px var(--n7);
  }
  .ring-hover-n7:hover {
    box-shadow: 0 0 0 3px var(--n7);
  }
  .ring-n8 {
    box-shadow: 0 0 0 2px var(--n8);
  }
  .ring-hover-n8:hover {
    box-shadow: 0 0 0 3px var(--n8);
  }
  .ring-n9 {
    box-shadow: 0 0 0 2px var(--n9);
  }
  .ring-hover-n9:hover {
    box-shadow: 0 0 0 3px var(--n9);
  }
  .ring-n10 {
    box-shadow: 0 0 0 2px var(--n10);
  }
  .ring-hover-n10:hover {
    box-shadow: 0 0 0 3px var(--n10);
  }
  .ring-n11 {
    box-shadow: 0 0 0 2px var(--n11);
  }
  .ring-hover-n11:hover {
    box-shadow: 0 0 0 3px var(--n11);
  }
  .ring-n12 {
    box-shadow: 0 0 0 2px var(--n12);
  }
  .ring-hover-n12:hover {
    box-shadow: 0 0 0 3px var(--n12);
  }
  .ring-p1 {
    box-shadow: 0 0 0 2px var(--p1);
  }
  .ring-hover-p1:hover {
    box-shadow: 0 0 0 3px var(--p1);
  }
  .ring-p2 {
    box-shadow: 0 0 0 2px var(--p2);
  }
  .ring-hover-p2:hover {
    box-shadow: 0 0 0 3px var(--p2);
  }
  .ring-p3 {
    box-shadow: 0 0 0 2px var(--p3);
  }
  .ring-hover-p3:hover {
    box-shadow: 0 0 0 3px var(--p3);
  }
  .ring-p4 {
    box-shadow: 0 0 0 2px var(--p4);
  }
  .ring-hover-p4:hover {
    box-shadow: 0 0 0 3px var(--p4);
  }
  .ring-p5 {
    box-shadow: 0 0 0 2px var(--p5);
  }
  .ring-hover-p5:hover {
    box-shadow: 0 0 0 3px var(--p5);
  }
  .ring-p6 {
    box-shadow: 0 0 0 2px var(--p6);
  }
  .ring-hover-p6:hover {
    box-shadow: 0 0 0 3px var(--p6);
  }
  .ring-p7 {
    box-shadow: 0 0 0 2px var(--p7);
  }
  .ring-hover-p7:hover {
    box-shadow: 0 0 0 3px var(--p7);
  }
  .ring-p8 {
    box-shadow: 0 0 0 2px var(--p8);
  }
  .ring-hover-p8:hover {
    box-shadow: 0 0 0 3px var(--p8);
  }
  .ring-p9 {
    box-shadow: 0 0 0 2px var(--p9);
  }
  .ring-hover-p9:hover {
    box-shadow: 0 0 0 3px var(--p9);
  }
  .ring-p10 {
    box-shadow: 0 0 0 2px var(--p10);
  }
  .ring-hover-p10:hover {
    box-shadow: 0 0 0 3px var(--p10);
  }
  .ring-p11 {
    box-shadow: 0 0 0 2px var(--p11);
  }
  .ring-hover-p11:hover {
    box-shadow: 0 0 0 3px var(--p11);
  }
  .ring-p12 {
    box-shadow: 0 0 0 2px var(--p12);
  }
  .ring-hover-p12:hover {
    box-shadow: 0 0 0 3px var(--p12);
  }
  .ring-s1 {
    box-shadow: 0 0 0 2px var(--s1);
  }
  .ring-hover-s1:hover {
    box-shadow: 0 0 0 3px var(--s1);
  }
  .ring-s2 {
    box-shadow: 0 0 0 2px var(--s2);
  }
  .ring-hover-s2:hover {
    box-shadow: 0 0 0 3px var(--s2);
  }
  .ring-s3 {
    box-shadow: 0 0 0 2px var(--s3);
  }
  .ring-hover-s3:hover {
    box-shadow: 0 0 0 3px var(--s3);
  }
  .ring-s4 {
    box-shadow: 0 0 0 2px var(--s4);
  }
  .ring-hover-s4:hover {
    box-shadow: 0 0 0 3px var(--s4);
  }
  .ring-s5 {
    box-shadow: 0 0 0 2px var(--s5);
  }
  .ring-hover-s5:hover {
    box-shadow: 0 0 0 3px var(--s5);
  }
  .ring-s6 {
    box-shadow: 0 0 0 2px var(--s6);
  }
  .ring-hover-s6:hover {
    box-shadow: 0 0 0 3px var(--s6);
  }
  .ring-s7 {
    box-shadow: 0 0 0 2px var(--s7);
  }
  .ring-hover-s7:hover {
    box-shadow: 0 0 0 3px var(--s7);
  }
  .ring-s8 {
    box-shadow: 0 0 0 2px var(--s8);
  }
  .ring-hover-s8:hover {
    box-shadow: 0 0 0 3px var(--s8);
  }
  .ring-s9 {
    box-shadow: 0 0 0 2px var(--s9);
  }
  .ring-hover-s9:hover {
    box-shadow: 0 0 0 3px var(--s9);
  }
  .ring-s10 {
    box-shadow: 0 0 0 2px var(--s10);
  }
  .ring-hover-s10:hover {
    box-shadow: 0 0 0 3px var(--s10);
  }
  .ring-s11 {
    box-shadow: 0 0 0 2px var(--s11);
  }
  .ring-hover-s11:hover {
    box-shadow: 0 0 0 3px var(--s11);
  }
  .ring-s12 {
    box-shadow: 0 0 0 2px var(--s12);
  }
  .ring-hover-s12:hover {
    box-shadow: 0 0 0 3px var(--s12);
  }
  .ring-a1 {
    box-shadow: 0 0 0 2px var(--a1);
  }
  .ring-hover-a1:hover {
    box-shadow: 0 0 0 3px var(--a1);
  }
  .ring-a2 {
    box-shadow: 0 0 0 2px var(--a2);
  }
  .ring-hover-a2:hover {
    box-shadow: 0 0 0 3px var(--a2);
  }
  .ring-a3 {
    box-shadow: 0 0 0 2px var(--a3);
  }
  .ring-hover-a3:hover {
    box-shadow: 0 0 0 3px var(--a3);
  }
  .ring-a4 {
    box-shadow: 0 0 0 2px var(--a4);
  }
  .ring-hover-a4:hover {
    box-shadow: 0 0 0 3px var(--a4);
  }
  .ring-a5 {
    box-shadow: 0 0 0 2px var(--a5);
  }
  .ring-hover-a5:hover {
    box-shadow: 0 0 0 3px var(--a5);
  }
  .ring-a6 {
    box-shadow: 0 0 0 2px var(--a6);
  }
  .ring-hover-a6:hover {
    box-shadow: 0 0 0 3px var(--a6);
  }
  .ring-a7 {
    box-shadow: 0 0 0 2px var(--a7);
  }
  .ring-hover-a7:hover {
    box-shadow: 0 0 0 3px var(--a7);
  }
  .ring-a8 {
    box-shadow: 0 0 0 2px var(--a8);
  }
  .ring-hover-a8:hover {
    box-shadow: 0 0 0 3px var(--a8);
  }
  .ring-a9 {
    box-shadow: 0 0 0 2px var(--a9);
  }
  .ring-hover-a9:hover {
    box-shadow: 0 0 0 3px var(--a9);
  }
  .ring-a10 {
    box-shadow: 0 0 0 2px var(--a10);
  }
  .ring-hover-a10:hover {
    box-shadow: 0 0 0 3px var(--a10);
  }
  .ring-a11 {
    box-shadow: 0 0 0 2px var(--a11);
  }
  .ring-hover-a11:hover {
    box-shadow: 0 0 0 3px var(--a11);
  }
  .ring-a12 {
    box-shadow: 0 0 0 2px var(--a12);
  }
  .ring-hover-a12:hover {
    box-shadow: 0 0 0 3px var(--a12);
  }
  /* ============================================================
     7) SHADOWS (jemné + barevné + hover)
     ============================================================ */
  .shadow {
    box-shadow: 0 2px 4px var(--c, --s3);
  }
  .shadow-hover:hover {
    box-shadow: var(--c, --primary-shadow-glow);
  }
  /* role-based shadows on hover */
  .shadow-primary-hover:hover {
    box-shadow: var(--primary-shadow-glow);
  }
  .shadow-secondary-hover:hover {
    box-shadow: var(--secondary-shadow-glow);
  }
  .shadow-accent-hover:hover {
    box-shadow: var(--accent-shadow-glow);
  }
  .shadow-0 {
    box-shadow: none;
  }
  .shadow-0:hover {
    box-shadow: none;
  }
  .shadow-n1 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n1) 35%, transparent);
  }
  .shadow-hover-n1:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n1) 45%, transparent);
  }
  .shadow-n2 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n2) 35%, transparent);
  }
  .shadow-hover-n2:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n2) 45%, transparent);
  }
  .shadow-n3 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n3) 35%, transparent);
  }
  .shadow-hover-n3:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n3) 45%, transparent);
  }
  .shadow-n4 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n4) 35%, transparent);
  }
  .shadow-hover-n4:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n4) 45%, transparent);
  }
  .shadow-n5 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n5) 35%, transparent);
  }
  .shadow-hover-n5:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n5) 45%, transparent);
  }
  .shadow-n6 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n6) 35%, transparent);
  }
  .shadow-hover-n6:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n6) 45%, transparent);
  }
  .shadow-n7 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n7) 35%, transparent);
  }
  .shadow-hover-n7:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n7) 45%, transparent);
  }
  .shadow-n8 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n8) 35%, transparent);
  }
  .shadow-hover-n8:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n8) 45%, transparent);
  }
  .shadow-n9 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n9) 35%, transparent);
  }
  .shadow-hover-n9:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n9) 45%, transparent);
  }
  .shadow-n10 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n10) 35%, transparent);
  }
  .shadow-hover-n10:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n10) 45%, transparent);
  }
  .shadow-n11 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n11) 35%, transparent);
  }
  .shadow-hover-n11:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n11) 45%, transparent);
  }
  .shadow-n12 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--n12) 35%, transparent);
  }
  .shadow-hover-n12:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--n12) 45%, transparent);
  }
  .shadow-p1 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p1) 35%, transparent);
  }
  .shadow-hover-p1:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p1) 45%, transparent);
  }
  .shadow-p2 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p2) 35%, transparent);
  }
  .shadow-hover-p2:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p2) 45%, transparent);
  }
  .shadow-p3 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p3) 35%, transparent);
  }
  .shadow-hover-p3:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p3) 45%, transparent);
  }
  .shadow-p4 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p4) 35%, transparent);
  }
  .shadow-hover-p4:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p4) 45%, transparent);
  }
  .shadow-p5 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p5) 35%, transparent);
  }
  .shadow-hover-p5:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p5) 45%, transparent);
  }
  .shadow-p6 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p6) 35%, transparent);
  }
  .shadow-hover-p6:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p6) 45%, transparent);
  }
  .shadow-p7 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p7) 35%, transparent);
  }
  .shadow-hover-p7:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p7) 45%, transparent);
  }
  .shadow-p8 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p8) 35%, transparent);
  }
  .shadow-hover-p8:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p8) 45%, transparent);
  }
  .shadow-p9 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p9) 35%, transparent);
  }
  .shadow-hover-p9:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p9) 45%, transparent);
  }
  .shadow-p10 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p10) 35%, transparent);
  }
  .shadow-hover-p10:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p10) 45%, transparent);
  }
  .shadow-p11 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p11) 35%, transparent);
  }
  .shadow-hover-p11:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p11) 45%, transparent);
  }
  .shadow-p12 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--p12) 35%, transparent);
  }
  .shadow-hover-p12:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--p12) 45%, transparent);
  }
  .shadow-s1 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s1) 35%, transparent);
  }
  .shadow-hover-s1:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s1) 45%, transparent);
  }
  .shadow-s2 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s2) 35%, transparent);
  }
  .shadow-hover-s2:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s2) 45%, transparent);
  }
  .shadow-s3 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s3) 35%, transparent);
  }
  .shadow-hover-s3:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s3) 45%, transparent);
  }
  .shadow-s4 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s4) 35%, transparent);
  }
  .shadow-hover-s4:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s4) 45%, transparent);
  }
  .shadow-s5 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s5) 35%, transparent);
  }
  .shadow-hover-s5:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s5) 45%, transparent);
  }
  .shadow-s6 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s6) 35%, transparent);
  }
  .shadow-hover-s6:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s6) 45%, transparent);
  }
  .shadow-s7 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s7) 35%, transparent);
  }
  .shadow-hover-s7:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s7) 45%, transparent);
  }
  .shadow-s8 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s8) 35%, transparent);
  }
  .shadow-hover-s8:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s8) 45%, transparent);
  }
  .shadow-s9 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s9) 35%, transparent);
  }
  .shadow-hover-s9:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s9) 45%, transparent);
  }
  .shadow-s10 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s10) 35%, transparent);
  }
  .shadow-hover-s10:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s10) 45%, transparent);
  }
  .shadow-s11 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s11) 35%, transparent);
  }
  .shadow-hover-s11:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s11) 45%, transparent);
  }
  .shadow-s12 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--s12) 35%, transparent);
  }
  .shadow-hover-s12:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--s12) 45%, transparent);
  }
  .shadow-a1 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a1) 35%, transparent);
  }
  .shadow-hover-a1:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a1) 45%, transparent);
  }
  .shadow-a2 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a2) 35%, transparent);
  }
  .shadow-hover-a2:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a2) 45%, transparent);
  }
  .shadow-a3 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a3) 35%, transparent);
  }
  .shadow-hover-a3:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a3) 45%, transparent);
  }
  .shadow-a4 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a4) 35%, transparent);
  }
  .shadow-hover-a4:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a4) 45%, transparent);
  }
  .shadow-a5 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a5) 35%, transparent);
  }
  .shadow-hover-a5:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a5) 45%, transparent);
  }
  .shadow-a6 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a6) 35%, transparent);
  }
  .shadow-hover-a6:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a6) 45%, transparent);
  }
  .shadow-a7 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a7) 35%, transparent);
  }
  .shadow-hover-a7:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a7) 45%, transparent);
  }
  .shadow-a8 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a8) 35%, transparent);
  }
  .shadow-hover-a8:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a8) 45%, transparent);
  }
  .shadow-a9 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a9) 35%, transparent);
  }
  .shadow-hover-a9:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a9) 45%, transparent);
  }
  .shadow-a10 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a10) 35%, transparent);
  }
  .shadow-hover-a10:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a10) 45%, transparent);
  }
  .shadow-a11 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a11) 35%, transparent);
  }
  .shadow-hover-a11:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a11) 45%, transparent);
  }
  .shadow-a12 {
    box-shadow: 0 2px 6px color-mix(in oklab, var(--a12) 35%, transparent);
  }
  .shadow-hover-a12:hover {
    box-shadow: 0 4px 10px color-mix(in oklab, var(--a12) 45%, transparent);
  }
  /* ============================================================
     8) TEXT (solid + gradients + hover) — POSLEDNÍ KVŮLI KASKÁDĚ
     ============================================================ */
  /* solid + hover pro všechny palety */
  .text {
    color: var(--c, --primary);
  }
  .text-hover:hover {
    color: var(--c, --primary-fg);
  }
  .text {
    color: var(--c, --primary);
  }
  .text-hover:hover {
    color: var(--c, --primary-fg);
  }
  .text {
    color: var(--c, --primary);
  }
  .text-hover:hover {
    color: var(--c, --primary-fg);
  }
  .text {
    color: var(--c, --primary);
  }
  .text-hover:hover {
    color: var(--c, --primary-fg);
  }
  /* generator: text gradienty (n, p, s, a) */
  .text-gradient {
    display: inline-block;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .text-gradient-hover:hover {
    display: inline-block;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .text-gradient {
    display: inline-block;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .text-gradient-hover:hover {
    display: inline-block;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .text-gradient {
    display: inline-block;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .text-gradient-hover:hover {
    display: inline-block;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .text-gradient {
    display: inline-block;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .text-gradient-hover:hover {
    display: inline-block;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  /* ============================================================
     9) ROLE (primary/secondary/accent + semantic)
     ============================================================ */
  .bg-app {
    background: var(--bg-app);
  }
  /* brand roles */
  .bg-primary {
    background: var(--primary);
    color: var(--primary-fg);
  }
  .bg-primary-weak {
    background: var(--primary-weak);
    color: var(--primary-fg);
  }
  .bg-primary-hover:hover {
    background: var(--primary-hover);
    color: var(--primary-fg);
  }
  .border-primary {
    border-color: var(--primary-border);
  }
  .text-primary {
    color: var(--primary);
  } /* název `-role` aby se nebil s .text-p* */
  .bg-secondary {
    background: var(--secondary);
    color: var(--secondary-fg);
  }
  .bg-secondary-weak {
    background: var(--secondary-weak);
    color: var(--secondary-fg);
  }
  .bg-secondary-hover:hover {
    background: var(--secondary-hover);
    color: var(--secondary-fg);
  }
  .border-secondary {
    border-color: var(--secondary-border);
  }
  .text-secondary {
    color: var(--secondary);
  }
  .bg-accent {
    background: var(--accent);
    color: var(--accent-fg);
  }
  .bg-accent-weak {
    background: var(--accent-weak);
    color: var(--accent-fg);
  }
  .bg-accent-hover:hover {
    background: var(--accent-hover);
    color: var(--accent-fg);
  }
  .border-accent {
    border-color: var(--accent-border);
  }
  .text-accent {
    color: var(--accent);
  }
  /* semantic roles */
  .bg-success {
    background: var(--success);
    color: var(--success-fg);
  }
  .bg-success-weak {
    background: var(--success-weak);
    color: var(--success-fg);
  }
  .bg-success-hover:hover {
    background: var(--success-hover);
    color: var(--success-fg);
  }
  .text-success {
    color: var(--success);
  }
  .border-success {
    border-color: var(--success-border);
  }
  .bg-warning {
    background: var(--warning);
    color: var(--warning-fg);
  }
  .bg-warning-weak {
    background: var(--warning-weak);
    color: var(--warning-fg);
  }
  .bg-warning-hover:hover {
    background: var(--warning-hover);
    color: var(--warning-fg);
  }
  .text-warning {
    color: var(--warning);
  }
  .border-warning {
    border-color: var(--warning-border);
  }
  .bg-error {
    background: var(--error);
    color: var(--error-fg);
  }
  .bg-error-weak {
    background: var(--error-weak);
    color: var(--error-fg);
  }
  .bg-error-hover:hover {
    background: var(--error-hover);
    color: var(--error-fg);
  }
  .text-error {
    color: var(--error);
  }
  .border-error {
    border-color: var(--error-border);
  }
  .bg-info {
    background: var(--info-color);
    color: var(--info-fg);
  }
  .bg-info-weak {
    background: var(--info-weak);
    color: var(--info-fg);
  }
  .bg-info-hover:hover {
    background: var(--info-hover);
    color: var(--info-fg);
  }
  .text-info {
    color: var(--info-color);
  }
  .border-info {
    border-color: var(--info-border);
  }
  /* links & focus */
  .link {
    color: var(--link);
  }
  .link:hover {
    color: var(--link-hover);
  }
  .link:visited {
    color: var(--link-visited);
  }
  .ring-primary {
    box-shadow: 0 0 0 2px var(--ui-ring);
  }
  .ring-primary-hover:hover {
    box-shadow: 0 0 0 3px var(--ui-ring);
  }
}
@layer utilities {
  .m-0 {
    margin: 0;
  }
  .m-1 {
    margin: 0.25rem;
  }
  .m-2 {
    margin: 0.5rem;
  }
  .m-3 {
    margin: 1rem;
  }
  .m-4 {
    margin: 1.5rem;
  }
  .m-5 {
    margin: 3rem;
  }
  .m-auto {
    margin: auto;
  }
  .mx-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-0 {
    margin-top: 0;
  }
  .mt-1 {
    margin-top: 0.25rem;
  }
  .mt-2 {
    margin-top: 0.5rem;
  }
  .mt-3 {
    margin-top: 1rem;
  }
  .mt-4 {
    margin-top: 1.5rem;
  }
  .mt-5 {
    margin-top: 3rem;
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-0 {
    margin-right: 0;
  }
  .mr-1 {
    margin-right: 0.25rem;
  }
  .mr-2 {
    margin-right: 0.5rem;
  }
  .mr-3 {
    margin-right: 1rem;
  }
  .mr-4 {
    margin-right: 1.5rem;
  }
  .mr-5 {
    margin-right: 3rem;
  }
  .mr-auto {
    margin-right: auto;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mb-1 {
    margin-bottom: 0.25rem;
  }
  .mb-2 {
    margin-bottom: 0.5rem;
  }
  .mb-3 {
    margin-bottom: 1rem;
  }
  .mb-4 {
    margin-bottom: 1.5rem;
  }
  .mb-5 {
    margin-bottom: 3rem;
  }
  .mb-auto {
    margin-bottom: auto;
  }
  .ml-0 {
    margin-left: 0;
  }
  .ml-1 {
    margin-left: 0.25rem;
  }
  .ml-2 {
    margin-left: 0.5rem;
  }
  .ml-3 {
    margin-left: 1rem;
  }
  .ml-4 {
    margin-left: 1.5rem;
  }
  .ml-5 {
    margin-left: 3rem;
  }
  .ml-auto {
    margin-left: auto;
  }
  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: 0.25rem;
  }
  .p-2 {
    padding: 0.5rem;
  }
  .p-3 {
    padding: 1rem;
  }
  .p-4 {
    padding: 1.5rem;
  }
  .p-5 {
    padding: 3rem;
  }
  .px-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-0 {
    padding-top: 0;
  }
  .pt-1 {
    padding-top: 0.25rem;
  }
  .pt-2 {
    padding-top: 0.5rem;
  }
  .pt-3 {
    padding-top: 1rem;
  }
  .pt-4 {
    padding-top: 1.5rem;
  }
  .pt-5 {
    padding-top: 3rem;
  }
  .pr-0 {
    padding-right: 0;
  }
  .pr-1 {
    padding-right: 0.25rem;
  }
  .pr-2 {
    padding-right: 0.5rem;
  }
  .pr-3 {
    padding-right: 1rem;
  }
  .pr-4 {
    padding-right: 1.5rem;
  }
  .pr-5 {
    padding-right: 3rem;
  }
  .pb-0 {
    padding-bottom: 0;
  }
  .pb-1 {
    padding-bottom: 0.25rem;
  }
  .pb-2 {
    padding-bottom: 0.5rem;
  }
  .pb-3 {
    padding-bottom: 1rem;
  }
  .pb-4 {
    padding-bottom: 1.5rem;
  }
  .pb-5 {
    padding-bottom: 3rem;
  }
  .pl-0 {
    padding-left: 0;
  }
  .pl-1 {
    padding-left: 0.25rem;
  }
  .pl-2 {
    padding-left: 0.5rem;
  }
  .pl-3 {
    padding-left: 1rem;
  }
  .pl-4 {
    padding-left: 1.5rem;
  }
  .pl-5 {
    padding-left: 3rem;
  }
  .gap-0 {
    gap: 0;
  }
  .gap-1 {
    gap: 0.25em;
  }
  .gap-2 {
    gap: 0.5em;
  }
  .gap-3 {
    gap: 0.75em;
  }
  .gap-4 {
    gap: 1em;
  }
  .gap-5 {
    gap: 1.5em;
  }
  .gap-6 {
    gap: 2em;
  }
  .gap-7 {
    gap: 2.5em;
  }
  .gap-8 {
    gap: 3em;
  }
  .gap-9 {
    gap: 3.5em;
  }
  .gap-10 {
    gap: 4em;
  }
  @supports (container-type: inline-size) {
    @container (min-width: 992px) {
      .m-0 {
        margin: 0;
      }
      .m-1 {
        margin: 0.25rem;
      }
      .m-2 {
        margin: 0.5rem;
      }
      .m-3 {
        margin: 1rem;
      }
      .m-4 {
        margin: 1.5rem;
      }
      .m-5 {
        margin: 3rem;
      }
      .m-auto {
        margin: auto;
      }
      .mx-0 {
        margin-right: 0;
        margin-left: 0;
      }
      .mx-1 {
        margin-right: 0.25rem;
        margin-left: 0.25rem;
      }
      .mx-2 {
        margin-right: 0.5rem;
        margin-left: 0.5rem;
      }
      .mx-3 {
        margin-right: 1rem;
        margin-left: 1rem;
      }
      .mx-4 {
        margin-right: 1.5rem;
        margin-left: 1.5rem;
      }
      .mx-5 {
        margin-right: 3rem;
        margin-left: 3rem;
      }
      .mx-auto {
        margin-right: auto;
        margin-left: auto;
      }
      .my-0 {
        margin-top: 0;
        margin-bottom: 0;
      }
      .my-1 {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
      }
      .my-2 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }
      .my-3 {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
      .my-4 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
      }
      .my-5 {
        margin-top: 3rem;
        margin-bottom: 3rem;
      }
      .my-auto {
        margin-top: auto;
        margin-bottom: auto;
      }
      .mt-0 {
        margin-top: 0;
      }
      .mt-1 {
        margin-top: 0.25rem;
      }
      .mt-2 {
        margin-top: 0.5rem;
      }
      .mt-3 {
        margin-top: 1rem;
      }
      .mt-4 {
        margin-top: 1.5rem;
      }
      .mt-5 {
        margin-top: 3rem;
      }
      .mt-auto {
        margin-top: auto;
      }
      .mr-0 {
        margin-right: 0;
      }
      .mr-1 {
        margin-right: 0.25rem;
      }
      .mr-2 {
        margin-right: 0.5rem;
      }
      .mr-3 {
        margin-right: 1rem;
      }
      .mr-4 {
        margin-right: 1.5rem;
      }
      .mr-5 {
        margin-right: 3rem;
      }
      .mr-auto {
        margin-right: auto;
      }
      .mb-0 {
        margin-bottom: 0;
      }
      .mb-1 {
        margin-bottom: 0.25rem;
      }
      .mb-2 {
        margin-bottom: 0.5rem;
      }
      .mb-3 {
        margin-bottom: 1rem;
      }
      .mb-4 {
        margin-bottom: 1.5rem;
      }
      .mb-5 {
        margin-bottom: 3rem;
      }
      .mb-auto {
        margin-bottom: auto;
      }
      .ml-0 {
        margin-left: 0;
      }
      .ml-1 {
        margin-left: 0.25rem;
      }
      .ml-2 {
        margin-left: 0.5rem;
      }
      .ml-3 {
        margin-left: 1rem;
      }
      .ml-4 {
        margin-left: 1.5rem;
      }
      .ml-5 {
        margin-left: 3rem;
      }
      .ml-auto {
        margin-left: auto;
      }
      .p-0 {
        padding: 0;
      }
      .p-1 {
        padding: 0.25rem;
      }
      .p-2 {
        padding: 0.5rem;
      }
      .p-3 {
        padding: 1rem;
      }
      .p-4 {
        padding: 1.5rem;
      }
      .p-5 {
        padding: 3rem;
      }
      .px-0 {
        padding-right: 0;
        padding-left: 0;
      }
      .px-1 {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
      }
      .px-2 {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
      }
      .px-3 {
        padding-right: 1rem;
        padding-left: 1rem;
      }
      .px-4 {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
      }
      .px-5 {
        padding-right: 3rem;
        padding-left: 3rem;
      }
      .py-0 {
        padding-top: 0;
        padding-bottom: 0;
      }
      .py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
      }
      .py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }
      .py-3 {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
      .py-4 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
      .py-5 {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      .pt-0 {
        padding-top: 0;
      }
      .pt-1 {
        padding-top: 0.25rem;
      }
      .pt-2 {
        padding-top: 0.5rem;
      }
      .pt-3 {
        padding-top: 1rem;
      }
      .pt-4 {
        padding-top: 1.5rem;
      }
      .pt-5 {
        padding-top: 3rem;
      }
      .pr-0 {
        padding-right: 0;
      }
      .pr-1 {
        padding-right: 0.25rem;
      }
      .pr-2 {
        padding-right: 0.5rem;
      }
      .pr-3 {
        padding-right: 1rem;
      }
      .pr-4 {
        padding-right: 1.5rem;
      }
      .pr-5 {
        padding-right: 3rem;
      }
      .pb-0 {
        padding-bottom: 0;
      }
      .pb-1 {
        padding-bottom: 0.25rem;
      }
      .pb-2 {
        padding-bottom: 0.5rem;
      }
      .pb-3 {
        padding-bottom: 1rem;
      }
      .pb-4 {
        padding-bottom: 1.5rem;
      }
      .pb-5 {
        padding-bottom: 3rem;
      }
      .pl-0 {
        padding-left: 0;
      }
      .pl-1 {
        padding-left: 0.25rem;
      }
      .pl-2 {
        padding-left: 0.5rem;
      }
      .pl-3 {
        padding-left: 1rem;
      }
      .pl-4 {
        padding-left: 1.5rem;
      }
      .pl-5 {
        padding-left: 3rem;
      }
      .gap-0 {
        gap: 0;
      }
      .gap-1 {
        gap: 0.25em;
      }
      .gap-2 {
        gap: 0.5em;
      }
      .gap-3 {
        gap: 0.75em;
      }
      .gap-4 {
        gap: 1em;
      }
      .gap-5 {
        gap: 1.5em;
      }
      .gap-6 {
        gap: 2em;
      }
      .gap-7 {
        gap: 2.5em;
      }
      .gap-8 {
        gap: 3em;
      }
      .gap-9 {
        gap: 3.5em;
      }
      .gap-10 {
        gap: 4em;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .m-0-sm {
      margin: 0;
    }
    .m-1-sm {
      margin: 0.25rem;
    }
    .m-2-sm {
      margin: 0.5rem;
    }
    .m-3-sm {
      margin: 1rem;
    }
    .m-4-sm {
      margin: 1.5rem;
    }
    .m-5-sm {
      margin: 3rem;
    }
    .m-auto-sm {
      margin: auto;
    }
    .mx-0-sm {
      margin-right: 0;
      margin-left: 0;
    }
    .mx-1-sm {
      margin-right: 0.25rem;
      margin-left: 0.25rem;
    }
    .mx-2-sm {
      margin-right: 0.5rem;
      margin-left: 0.5rem;
    }
    .mx-3-sm {
      margin-right: 1rem;
      margin-left: 1rem;
    }
    .mx-4-sm {
      margin-right: 1.5rem;
      margin-left: 1.5rem;
    }
    .mx-5-sm {
      margin-right: 3rem;
      margin-left: 3rem;
    }
    .mx-auto-sm {
      margin-right: auto;
      margin-left: auto;
    }
    .my-0-sm {
      margin-top: 0;
      margin-bottom: 0;
    }
    .my-1-sm {
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;
    }
    .my-2-sm {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .my-3-sm {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .my-4-sm {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .my-5-sm {
      margin-top: 3rem;
      margin-bottom: 3rem;
    }
    .my-auto-sm {
      margin-top: auto;
      margin-bottom: auto;
    }
    .mt-0-sm {
      margin-top: 0;
    }
    .mt-1-sm {
      margin-top: 0.25rem;
    }
    .mt-2-sm {
      margin-top: 0.5rem;
    }
    .mt-3-sm {
      margin-top: 1rem;
    }
    .mt-4-sm {
      margin-top: 1.5rem;
    }
    .mt-5-sm {
      margin-top: 3rem;
    }
    .mt-auto-sm {
      margin-top: auto;
    }
    .mr-0-sm {
      margin-right: 0;
    }
    .mr-1-sm {
      margin-right: 0.25rem;
    }
    .mr-2-sm {
      margin-right: 0.5rem;
    }
    .mr-3-sm {
      margin-right: 1rem;
    }
    .mr-4-sm {
      margin-right: 1.5rem;
    }
    .mr-5-sm {
      margin-right: 3rem;
    }
    .mr-auto-sm {
      margin-right: auto;
    }
    .mb-0-sm {
      margin-bottom: 0;
    }
    .mb-1-sm {
      margin-bottom: 0.25rem;
    }
    .mb-2-sm {
      margin-bottom: 0.5rem;
    }
    .mb-3-sm {
      margin-bottom: 1rem;
    }
    .mb-4-sm {
      margin-bottom: 1.5rem;
    }
    .mb-5-sm {
      margin-bottom: 3rem;
    }
    .mb-auto-sm {
      margin-bottom: auto;
    }
    .ml-0-sm {
      margin-left: 0;
    }
    .ml-1-sm {
      margin-left: 0.25rem;
    }
    .ml-2-sm {
      margin-left: 0.5rem;
    }
    .ml-3-sm {
      margin-left: 1rem;
    }
    .ml-4-sm {
      margin-left: 1.5rem;
    }
    .ml-5-sm {
      margin-left: 3rem;
    }
    .ml-auto-sm {
      margin-left: auto;
    }
    .p-0-sm {
      padding: 0;
    }
    .p-1-sm {
      padding: 0.25rem;
    }
    .p-2-sm {
      padding: 0.5rem;
    }
    .p-3-sm {
      padding: 1rem;
    }
    .p-4-sm {
      padding: 1.5rem;
    }
    .p-5-sm {
      padding: 3rem;
    }
    .px-0-sm {
      padding-right: 0;
      padding-left: 0;
    }
    .px-1-sm {
      padding-right: 0.25rem;
      padding-left: 0.25rem;
    }
    .px-2-sm {
      padding-right: 0.5rem;
      padding-left: 0.5rem;
    }
    .px-3-sm {
      padding-right: 1rem;
      padding-left: 1rem;
    }
    .px-4-sm {
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }
    .px-5-sm {
      padding-right: 3rem;
      padding-left: 3rem;
    }
    .py-0-sm {
      padding-top: 0;
      padding-bottom: 0;
    }
    .py-1-sm {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
    .py-2-sm {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    .py-3-sm {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
    .py-4-sm {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }
    .py-5-sm {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
    .pt-0-sm {
      padding-top: 0;
    }
    .pt-1-sm {
      padding-top: 0.25rem;
    }
    .pt-2-sm {
      padding-top: 0.5rem;
    }
    .pt-3-sm {
      padding-top: 1rem;
    }
    .pt-4-sm {
      padding-top: 1.5rem;
    }
    .pt-5-sm {
      padding-top: 3rem;
    }
    .pr-0-sm {
      padding-right: 0;
    }
    .pr-1-sm {
      padding-right: 0.25rem;
    }
    .pr-2-sm {
      padding-right: 0.5rem;
    }
    .pr-3-sm {
      padding-right: 1rem;
    }
    .pr-4-sm {
      padding-right: 1.5rem;
    }
    .pr-5-sm {
      padding-right: 3rem;
    }
    .pb-0-sm {
      padding-bottom: 0;
    }
    .pb-1-sm {
      padding-bottom: 0.25rem;
    }
    .pb-2-sm {
      padding-bottom: 0.5rem;
    }
    .pb-3-sm {
      padding-bottom: 1rem;
    }
    .pb-4-sm {
      padding-bottom: 1.5rem;
    }
    .pb-5-sm {
      padding-bottom: 3rem;
    }
    .pl-0-sm {
      padding-left: 0;
    }
    .pl-1-sm {
      padding-left: 0.25rem;
    }
    .pl-2-sm {
      padding-left: 0.5rem;
    }
    .pl-3-sm {
      padding-left: 1rem;
    }
    .pl-4-sm {
      padding-left: 1.5rem;
    }
    .pl-5-sm {
      padding-left: 3rem;
    }
    .gap-0-sm {
      gap: 0;
    }
    .gap-1-sm {
      gap: 0.25em;
    }
    .gap-2-sm {
      gap: 0.5em;
    }
    .gap-3-sm {
      gap: 0.75em;
    }
    .gap-4-sm {
      gap: 1em;
    }
    .gap-5-sm {
      gap: 1.5em;
    }
    .gap-6-sm {
      gap: 2em;
    }
    .gap-7-sm {
      gap: 2.5em;
    }
    .gap-8-sm {
      gap: 3em;
    }
    .gap-9-sm {
      gap: 3.5em;
    }
    .gap-10-sm {
      gap: 4em;
    }
  }
  @supports (container-type: inline-size) {
    @container (max-width: 767px) {
      .m-0-sm {
        margin: 0;
      }
      .m-1-sm {
        margin: 0.25rem;
      }
      .m-2-sm {
        margin: 0.5rem;
      }
      .m-3-sm {
        margin: 1rem;
      }
      .m-4-sm {
        margin: 1.5rem;
      }
      .m-5-sm {
        margin: 3rem;
      }
      .m-auto-sm {
        margin: auto;
      }
      .mx-0-sm {
        margin-right: 0;
        margin-left: 0;
      }
      .mx-1-sm {
        margin-right: 0.25rem;
        margin-left: 0.25rem;
      }
      .mx-2-sm {
        margin-right: 0.5rem;
        margin-left: 0.5rem;
      }
      .mx-3-sm {
        margin-right: 1rem;
        margin-left: 1rem;
      }
      .mx-4-sm {
        margin-right: 1.5rem;
        margin-left: 1.5rem;
      }
      .mx-5-sm {
        margin-right: 3rem;
        margin-left: 3rem;
      }
      .mx-auto-sm {
        margin-right: auto;
        margin-left: auto;
      }
      .my-0-sm {
        margin-top: 0;
        margin-bottom: 0;
      }
      .my-1-sm {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
      }
      .my-2-sm {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }
      .my-3-sm {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
      .my-4-sm {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
      }
      .my-5-sm {
        margin-top: 3rem;
        margin-bottom: 3rem;
      }
      .my-auto-sm {
        margin-top: auto;
        margin-bottom: auto;
      }
      .mt-0-sm {
        margin-top: 0;
      }
      .mt-1-sm {
        margin-top: 0.25rem;
      }
      .mt-2-sm {
        margin-top: 0.5rem;
      }
      .mt-3-sm {
        margin-top: 1rem;
      }
      .mt-4-sm {
        margin-top: 1.5rem;
      }
      .mt-5-sm {
        margin-top: 3rem;
      }
      .mt-auto-sm {
        margin-top: auto;
      }
      .mr-0-sm {
        margin-right: 0;
      }
      .mr-1-sm {
        margin-right: 0.25rem;
      }
      .mr-2-sm {
        margin-right: 0.5rem;
      }
      .mr-3-sm {
        margin-right: 1rem;
      }
      .mr-4-sm {
        margin-right: 1.5rem;
      }
      .mr-5-sm {
        margin-right: 3rem;
      }
      .mr-auto-sm {
        margin-right: auto;
      }
      .mb-0-sm {
        margin-bottom: 0;
      }
      .mb-1-sm {
        margin-bottom: 0.25rem;
      }
      .mb-2-sm {
        margin-bottom: 0.5rem;
      }
      .mb-3-sm {
        margin-bottom: 1rem;
      }
      .mb-4-sm {
        margin-bottom: 1.5rem;
      }
      .mb-5-sm {
        margin-bottom: 3rem;
      }
      .mb-auto-sm {
        margin-bottom: auto;
      }
      .ml-0-sm {
        margin-left: 0;
      }
      .ml-1-sm {
        margin-left: 0.25rem;
      }
      .ml-2-sm {
        margin-left: 0.5rem;
      }
      .ml-3-sm {
        margin-left: 1rem;
      }
      .ml-4-sm {
        margin-left: 1.5rem;
      }
      .ml-5-sm {
        margin-left: 3rem;
      }
      .ml-auto-sm {
        margin-left: auto;
      }
      .p-0-sm {
        padding: 0;
      }
      .p-1-sm {
        padding: 0.25rem;
      }
      .p-2-sm {
        padding: 0.5rem;
      }
      .p-3-sm {
        padding: 1rem;
      }
      .p-4-sm {
        padding: 1.5rem;
      }
      .p-5-sm {
        padding: 3rem;
      }
      .px-0-sm {
        padding-right: 0;
        padding-left: 0;
      }
      .px-1-sm {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
      }
      .px-2-sm {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
      }
      .px-3-sm {
        padding-right: 1rem;
        padding-left: 1rem;
      }
      .px-4-sm {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
      }
      .px-5-sm {
        padding-right: 3rem;
        padding-left: 3rem;
      }
      .py-0-sm {
        padding-top: 0;
        padding-bottom: 0;
      }
      .py-1-sm {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
      }
      .py-2-sm {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }
      .py-3-sm {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
      .py-4-sm {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
      .py-5-sm {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      .pt-0-sm {
        padding-top: 0;
      }
      .pt-1-sm {
        padding-top: 0.25rem;
      }
      .pt-2-sm {
        padding-top: 0.5rem;
      }
      .pt-3-sm {
        padding-top: 1rem;
      }
      .pt-4-sm {
        padding-top: 1.5rem;
      }
      .pt-5-sm {
        padding-top: 3rem;
      }
      .pr-0-sm {
        padding-right: 0;
      }
      .pr-1-sm {
        padding-right: 0.25rem;
      }
      .pr-2-sm {
        padding-right: 0.5rem;
      }
      .pr-3-sm {
        padding-right: 1rem;
      }
      .pr-4-sm {
        padding-right: 1.5rem;
      }
      .pr-5-sm {
        padding-right: 3rem;
      }
      .pb-0-sm {
        padding-bottom: 0;
      }
      .pb-1-sm {
        padding-bottom: 0.25rem;
      }
      .pb-2-sm {
        padding-bottom: 0.5rem;
      }
      .pb-3-sm {
        padding-bottom: 1rem;
      }
      .pb-4-sm {
        padding-bottom: 1.5rem;
      }
      .pb-5-sm {
        padding-bottom: 3rem;
      }
      .pl-0-sm {
        padding-left: 0;
      }
      .pl-1-sm {
        padding-left: 0.25rem;
      }
      .pl-2-sm {
        padding-left: 0.5rem;
      }
      .pl-3-sm {
        padding-left: 1rem;
      }
      .pl-4-sm {
        padding-left: 1.5rem;
      }
      .pl-5-sm {
        padding-left: 3rem;
      }
      .gap-0-sm {
        gap: 0;
      }
      .gap-1-sm {
        gap: 0.25em;
      }
      .gap-2-sm {
        gap: 0.5em;
      }
      .gap-3-sm {
        gap: 0.75em;
      }
      .gap-4-sm {
        gap: 1em;
      }
      .gap-5-sm {
        gap: 1.5em;
      }
      .gap-6-sm {
        gap: 2em;
      }
      .gap-7-sm {
        gap: 2.5em;
      }
      .gap-8-sm {
        gap: 3em;
      }
      .gap-9-sm {
        gap: 3.5em;
      }
      .gap-10-sm {
        gap: 4em;
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .m-0-md {
      margin: 0;
    }
    .m-1-md {
      margin: 0.25rem;
    }
    .m-2-md {
      margin: 0.5rem;
    }
    .m-3-md {
      margin: 1rem;
    }
    .m-4-md {
      margin: 1.5rem;
    }
    .m-5-md {
      margin: 3rem;
    }
    .m-auto-md {
      margin: auto;
    }
    .mx-0-md {
      margin-right: 0;
      margin-left: 0;
    }
    .mx-1-md {
      margin-right: 0.25rem;
      margin-left: 0.25rem;
    }
    .mx-2-md {
      margin-right: 0.5rem;
      margin-left: 0.5rem;
    }
    .mx-3-md {
      margin-right: 1rem;
      margin-left: 1rem;
    }
    .mx-4-md {
      margin-right: 1.5rem;
      margin-left: 1.5rem;
    }
    .mx-5-md {
      margin-right: 3rem;
      margin-left: 3rem;
    }
    .mx-auto-md {
      margin-right: auto;
      margin-left: auto;
    }
    .my-0-md {
      margin-top: 0;
      margin-bottom: 0;
    }
    .my-1-md {
      margin-top: 0.25rem;
      margin-bottom: 0.25rem;
    }
    .my-2-md {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .my-3-md {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .my-4-md {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .my-5-md {
      margin-top: 3rem;
      margin-bottom: 3rem;
    }
    .my-auto-md {
      margin-top: auto;
      margin-bottom: auto;
    }
    .mt-0-md {
      margin-top: 0;
    }
    .mt-1-md {
      margin-top: 0.25rem;
    }
    .mt-2-md {
      margin-top: 0.5rem;
    }
    .mt-3-md {
      margin-top: 1rem;
    }
    .mt-4-md {
      margin-top: 1.5rem;
    }
    .mt-5-md {
      margin-top: 3rem;
    }
    .mt-auto-md {
      margin-top: auto;
    }
    .mr-0-md {
      margin-right: 0;
    }
    .mr-1-md {
      margin-right: 0.25rem;
    }
    .mr-2-md {
      margin-right: 0.5rem;
    }
    .mr-3-md {
      margin-right: 1rem;
    }
    .mr-4-md {
      margin-right: 1.5rem;
    }
    .mr-5-md {
      margin-right: 3rem;
    }
    .mr-auto-md {
      margin-right: auto;
    }
    .mb-0-md {
      margin-bottom: 0;
    }
    .mb-1-md {
      margin-bottom: 0.25rem;
    }
    .mb-2-md {
      margin-bottom: 0.5rem;
    }
    .mb-3-md {
      margin-bottom: 1rem;
    }
    .mb-4-md {
      margin-bottom: 1.5rem;
    }
    .mb-5-md {
      margin-bottom: 3rem;
    }
    .mb-auto-md {
      margin-bottom: auto;
    }
    .ml-0-md {
      margin-left: 0;
    }
    .ml-1-md {
      margin-left: 0.25rem;
    }
    .ml-2-md {
      margin-left: 0.5rem;
    }
    .ml-3-md {
      margin-left: 1rem;
    }
    .ml-4-md {
      margin-left: 1.5rem;
    }
    .ml-5-md {
      margin-left: 3rem;
    }
    .ml-auto-md {
      margin-left: auto;
    }
    .p-0-md {
      padding: 0;
    }
    .p-1-md {
      padding: 0.25rem;
    }
    .p-2-md {
      padding: 0.5rem;
    }
    .p-3-md {
      padding: 1rem;
    }
    .p-4-md {
      padding: 1.5rem;
    }
    .p-5-md {
      padding: 3rem;
    }
    .px-0-md {
      padding-right: 0;
      padding-left: 0;
    }
    .px-1-md {
      padding-right: 0.25rem;
      padding-left: 0.25rem;
    }
    .px-2-md {
      padding-right: 0.5rem;
      padding-left: 0.5rem;
    }
    .px-3-md {
      padding-right: 1rem;
      padding-left: 1rem;
    }
    .px-4-md {
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }
    .px-5-md {
      padding-right: 3rem;
      padding-left: 3rem;
    }
    .py-0-md {
      padding-top: 0;
      padding-bottom: 0;
    }
    .py-1-md {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
    .py-2-md {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    .py-3-md {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
    .py-4-md {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }
    .py-5-md {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
    .pt-0-md {
      padding-top: 0;
    }
    .pt-1-md {
      padding-top: 0.25rem;
    }
    .pt-2-md {
      padding-top: 0.5rem;
    }
    .pt-3-md {
      padding-top: 1rem;
    }
    .pt-4-md {
      padding-top: 1.5rem;
    }
    .pt-5-md {
      padding-top: 3rem;
    }
    .pr-0-md {
      padding-right: 0;
    }
    .pr-1-md {
      padding-right: 0.25rem;
    }
    .pr-2-md {
      padding-right: 0.5rem;
    }
    .pr-3-md {
      padding-right: 1rem;
    }
    .pr-4-md {
      padding-right: 1.5rem;
    }
    .pr-5-md {
      padding-right: 3rem;
    }
    .pb-0-md {
      padding-bottom: 0;
    }
    .pb-1-md {
      padding-bottom: 0.25rem;
    }
    .pb-2-md {
      padding-bottom: 0.5rem;
    }
    .pb-3-md {
      padding-bottom: 1rem;
    }
    .pb-4-md {
      padding-bottom: 1.5rem;
    }
    .pb-5-md {
      padding-bottom: 3rem;
    }
    .pl-0-md {
      padding-left: 0;
    }
    .pl-1-md {
      padding-left: 0.25rem;
    }
    .pl-2-md {
      padding-left: 0.5rem;
    }
    .pl-3-md {
      padding-left: 1rem;
    }
    .pl-4-md {
      padding-left: 1.5rem;
    }
    .pl-5-md {
      padding-left: 3rem;
    }
    .gap-0-md {
      gap: 0;
    }
    .gap-1-md {
      gap: 0.25em;
    }
    .gap-2-md {
      gap: 0.5em;
    }
    .gap-3-md {
      gap: 0.75em;
    }
    .gap-4-md {
      gap: 1em;
    }
    .gap-5-md {
      gap: 1.5em;
    }
    .gap-6-md {
      gap: 2em;
    }
    .gap-7-md {
      gap: 2.5em;
    }
    .gap-8-md {
      gap: 3em;
    }
    .gap-9-md {
      gap: 3.5em;
    }
    .gap-10-md {
      gap: 4em;
    }
  }
  @supports (container-type: inline-size) {
    @container (min-width: 768px) and (max-width: 991px) {
      .m-0-md {
        margin: 0;
      }
      .m-1-md {
        margin: 0.25rem;
      }
      .m-2-md {
        margin: 0.5rem;
      }
      .m-3-md {
        margin: 1rem;
      }
      .m-4-md {
        margin: 1.5rem;
      }
      .m-5-md {
        margin: 3rem;
      }
      .m-auto-md {
        margin: auto;
      }
      .mx-0-md {
        margin-right: 0;
        margin-left: 0;
      }
      .mx-1-md {
        margin-right: 0.25rem;
        margin-left: 0.25rem;
      }
      .mx-2-md {
        margin-right: 0.5rem;
        margin-left: 0.5rem;
      }
      .mx-3-md {
        margin-right: 1rem;
        margin-left: 1rem;
      }
      .mx-4-md {
        margin-right: 1.5rem;
        margin-left: 1.5rem;
      }
      .mx-5-md {
        margin-right: 3rem;
        margin-left: 3rem;
      }
      .mx-auto-md {
        margin-right: auto;
        margin-left: auto;
      }
      .my-0-md {
        margin-top: 0;
        margin-bottom: 0;
      }
      .my-1-md {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
      }
      .my-2-md {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }
      .my-3-md {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
      .my-4-md {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
      }
      .my-5-md {
        margin-top: 3rem;
        margin-bottom: 3rem;
      }
      .my-auto-md {
        margin-top: auto;
        margin-bottom: auto;
      }
      .mt-0-md {
        margin-top: 0;
      }
      .mt-1-md {
        margin-top: 0.25rem;
      }
      .mt-2-md {
        margin-top: 0.5rem;
      }
      .mt-3-md {
        margin-top: 1rem;
      }
      .mt-4-md {
        margin-top: 1.5rem;
      }
      .mt-5-md {
        margin-top: 3rem;
      }
      .mt-auto-md {
        margin-top: auto;
      }
      .mr-0-md {
        margin-right: 0;
      }
      .mr-1-md {
        margin-right: 0.25rem;
      }
      .mr-2-md {
        margin-right: 0.5rem;
      }
      .mr-3-md {
        margin-right: 1rem;
      }
      .mr-4-md {
        margin-right: 1.5rem;
      }
      .mr-5-md {
        margin-right: 3rem;
      }
      .mr-auto-md {
        margin-right: auto;
      }
      .mb-0-md {
        margin-bottom: 0;
      }
      .mb-1-md {
        margin-bottom: 0.25rem;
      }
      .mb-2-md {
        margin-bottom: 0.5rem;
      }
      .mb-3-md {
        margin-bottom: 1rem;
      }
      .mb-4-md {
        margin-bottom: 1.5rem;
      }
      .mb-5-md {
        margin-bottom: 3rem;
      }
      .mb-auto-md {
        margin-bottom: auto;
      }
      .ml-0-md {
        margin-left: 0;
      }
      .ml-1-md {
        margin-left: 0.25rem;
      }
      .ml-2-md {
        margin-left: 0.5rem;
      }
      .ml-3-md {
        margin-left: 1rem;
      }
      .ml-4-md {
        margin-left: 1.5rem;
      }
      .ml-5-md {
        margin-left: 3rem;
      }
      .ml-auto-md {
        margin-left: auto;
      }
      .p-0-md {
        padding: 0;
      }
      .p-1-md {
        padding: 0.25rem;
      }
      .p-2-md {
        padding: 0.5rem;
      }
      .p-3-md {
        padding: 1rem;
      }
      .p-4-md {
        padding: 1.5rem;
      }
      .p-5-md {
        padding: 3rem;
      }
      .px-0-md {
        padding-right: 0;
        padding-left: 0;
      }
      .px-1-md {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
      }
      .px-2-md {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
      }
      .px-3-md {
        padding-right: 1rem;
        padding-left: 1rem;
      }
      .px-4-md {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
      }
      .px-5-md {
        padding-right: 3rem;
        padding-left: 3rem;
      }
      .py-0-md {
        padding-top: 0;
        padding-bottom: 0;
      }
      .py-1-md {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
      }
      .py-2-md {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }
      .py-3-md {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
      .py-4-md {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
      .py-5-md {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      .pt-0-md {
        padding-top: 0;
      }
      .pt-1-md {
        padding-top: 0.25rem;
      }
      .pt-2-md {
        padding-top: 0.5rem;
      }
      .pt-3-md {
        padding-top: 1rem;
      }
      .pt-4-md {
        padding-top: 1.5rem;
      }
      .pt-5-md {
        padding-top: 3rem;
      }
      .pr-0-md {
        padding-right: 0;
      }
      .pr-1-md {
        padding-right: 0.25rem;
      }
      .pr-2-md {
        padding-right: 0.5rem;
      }
      .pr-3-md {
        padding-right: 1rem;
      }
      .pr-4-md {
        padding-right: 1.5rem;
      }
      .pr-5-md {
        padding-right: 3rem;
      }
      .pb-0-md {
        padding-bottom: 0;
      }
      .pb-1-md {
        padding-bottom: 0.25rem;
      }
      .pb-2-md {
        padding-bottom: 0.5rem;
      }
      .pb-3-md {
        padding-bottom: 1rem;
      }
      .pb-4-md {
        padding-bottom: 1.5rem;
      }
      .pb-5-md {
        padding-bottom: 3rem;
      }
      .pl-0-md {
        padding-left: 0;
      }
      .pl-1-md {
        padding-left: 0.25rem;
      }
      .pl-2-md {
        padding-left: 0.5rem;
      }
      .pl-3-md {
        padding-left: 1rem;
      }
      .pl-4-md {
        padding-left: 1.5rem;
      }
      .pl-5-md {
        padding-left: 3rem;
      }
      .gap-0-md {
        gap: 0;
      }
      .gap-1-md {
        gap: 0.25em;
      }
      .gap-2-md {
        gap: 0.5em;
      }
      .gap-3-md {
        gap: 0.75em;
      }
      .gap-4-md {
        gap: 1em;
      }
      .gap-5-md {
        gap: 1.5em;
      }
      .gap-6-md {
        gap: 2em;
      }
      .gap-7-md {
        gap: 2.5em;
      }
      .gap-8-md {
        gap: 3em;
      }
      .gap-9-md {
        gap: 3.5em;
      }
      .gap-10-md {
        gap: 4em;
      }
    }
  }
}
@layer utilities {
  .wl-sm {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .wl-md {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .wl-lg {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .wl-xl {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .wl-xxl {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .w1 {
    width: 1em;
  }
  .w2 {
    width: 2em;
  }
  .w3 {
    width: 4em;
  }
  .w4 {
    width: 8em;
  }
  .w5 {
    width: 16em;
  }
  .w-2b {
    width: 49%;
  }
  .w-3b {
    width: 32.3333%;
  }
  .w-4b {
    width: 24%;
  }
  .w-5b {
    width: 19%;
  }
  .w-6b {
    width: 15%;
  }
  .w-1 {
    width: 1%;
  }
  .w-5 {
    width: 5%;
  }
  .w-10 {
    width: 10%;
  }
  .w-15 {
    width: 15%;
  }
  .w-20 {
    width: 20%;
  }
  .w-25 {
    width: 25%;
  }
  .w-30 {
    width: 30%;
  }
  .w-35 {
    width: 35%;
  }
  .w-33 {
    width: 33.33333%;
  }
  .w-40 {
    width: 40%;
  }
  .w-45 {
    width: 45%;
  }
  .w-50 {
    width: 50%;
  }
  .w-55 {
    width: 55%;
  }
  .w-60 {
    width: 60%;
  }
  .w-65 {
    width: 65%;
  }
  .w-66 {
    width: 66.66667%;
  }
  .w-70 {
    width: 70%;
  }
  .w-75 {
    width: 75%;
  }
  .w-80 {
    width: 80%;
  }
  .w-85 {
    width: 85%;
  }
  .w-90 {
    width: 90%;
  }
  .w-95 {
    width: 95%;
  }
  .w-100 {
    width: 100%;
  }
  .w-auto {
    width: auto;
  }
  .h1 {
    height: 1em;
  }
  .h2 {
    height: 2em;
  }
  .h3 {
    height: 4em;
  }
  .h4 {
    height: 8em;
  }
  .h5 {
    height: 16em;
  }
  .h-1 {
    height: 10%;
  }
  .h-10 {
    height: 10%;
  }
  .h-15 {
    height: 15%;
  }
  .h-20 {
    height: 20%;
  }
  .h-25 {
    height: 25%;
  }
  .h-30 {
    height: 30%;
  }
  .h-35 {
    height: 35%;
  }
  .h-40 {
    height: 40%;
  }
  .h-45 {
    height: 45%;
  }
  .h-50 {
    height: 50%;
  }
  .h-55 {
    height: 55%;
  }
  .h-60 {
    height: 60%;
  }
  .h-65 {
    height: 65%;
  }
  .h-70 {
    height: 70%;
  }
  .h-75 {
    height: 75%;
  }
  .h-80 {
    height: 80%;
  }
  .h-85 {
    height: 85%;
  }
  .h-90 {
    height: 90%;
  }
  .h-95 {
    height: 95%;
  }
  .h-100 {
    height: 100%;
  }
  .min-h-100 {
    min-height: 100%;
  }
  .vh-25 {
    height: 25vh;
  }
  .vh-50 {
    height: 50vh;
  }
  .vh-75 {
    height: 75vh;
  }
  .vh-100 {
    height: 100vh;
  }
  .min-vh-100 {
    min-height: 100vh;
  }
  .h-auto {
    height: auto;
  }
  .h-inherit {
    height: inherit;
  }
  /* === Hard size utilities (drsnější specifita) === */
  .w {
    width: var(--w, auto);
  }
  .h {
    height: var(--h, auto);
  }
  .w-min {
    min-width: var(--w-min, 0);
  }
  .h-min {
    min-height: var(--h-min, 0);
  }
  .w-max {
    max-width: var(--w-max, none);
  }
  .h-max {
    max-height: var(--h-max, none);
  }
  @supports (container-type: inline-size) {
    @container (min-width: 992px) {
      .w1 {
        width: 1em;
      }
      .w2 {
        width: 2em;
      }
      .w3 {
        width: 4em;
      }
      .w4 {
        width: 8em;
      }
      .w5 {
        width: 16em;
      }
      .w-2b {
        width: 49%;
      }
      .w-3b {
        width: 32.3333%;
      }
      .w-4b {
        width: 24%;
      }
      .w-5b {
        width: 19%;
      }
      .w-6b {
        width: 15%;
      }
      .w-1 {
        width: 1%;
      }
      .w-5 {
        width: 5%;
      }
      .w-10 {
        width: 10%;
      }
      .w-15 {
        width: 15%;
      }
      .w-20 {
        width: 20%;
      }
      .w-25 {
        width: 25%;
      }
      .w-30 {
        width: 30%;
      }
      .w-35 {
        width: 35%;
      }
      .w-33 {
        width: 33.33333%;
      }
      .w-40 {
        width: 40%;
      }
      .w-45 {
        width: 45%;
      }
      .w-50 {
        width: 50%;
      }
      .w-55 {
        width: 55%;
      }
      .w-60 {
        width: 60%;
      }
      .w-65 {
        width: 65%;
      }
      .w-66 {
        width: 66.66667%;
      }
      .w-70 {
        width: 70%;
      }
      .w-75 {
        width: 75%;
      }
      .w-80 {
        width: 80%;
      }
      .w-85 {
        width: 85%;
      }
      .w-90 {
        width: 90%;
      }
      .w-95 {
        width: 95%;
      }
      .w-100 {
        width: 100%;
      }
      .w-auto {
        width: auto;
      }
      .h1 {
        height: 1em;
      }
      .h2 {
        height: 2em;
      }
      .h3 {
        height: 4em;
      }
      .h4 {
        height: 8em;
      }
      .h5 {
        height: 16em;
      }
      .h-1 {
        height: 10%;
      }
      .h-10 {
        height: 10%;
      }
      .h-15 {
        height: 15%;
      }
      .h-20 {
        height: 20%;
      }
      .h-25 {
        height: 25%;
      }
      .h-30 {
        height: 30%;
      }
      .h-35 {
        height: 35%;
      }
      .h-40 {
        height: 40%;
      }
      .h-45 {
        height: 45%;
      }
      .h-50 {
        height: 50%;
      }
      .h-55 {
        height: 55%;
      }
      .h-60 {
        height: 60%;
      }
      .h-65 {
        height: 65%;
      }
      .h-70 {
        height: 70%;
      }
      .h-75 {
        height: 75%;
      }
      .h-80 {
        height: 80%;
      }
      .h-85 {
        height: 85%;
      }
      .h-90 {
        height: 90%;
      }
      .h-95 {
        height: 95%;
      }
      .h-100 {
        height: 100%;
      }
      .min-h-100 {
        min-height: 100%;
      }
      .vh-25 {
        height: 25vh;
      }
      .vh-50 {
        height: 50vh;
      }
      .vh-75 {
        height: 75vh;
      }
      .vh-100 {
        height: 100vh;
      }
      .min-vh-100 {
        min-height: 100vh;
      }
      .h-auto {
        height: auto;
      }
      .h-inherit {
        height: inherit;
      }
      /* === Hard size utilities (drsnější specifita) === */
      .w {
        width: var(--w, auto);
      }
      .h {
        height: var(--h, auto);
      }
      .w-min {
        min-width: var(--w-min, 0);
      }
      .h-min {
        min-height: var(--h-min, 0);
      }
      .w-max {
        max-width: var(--w-max, none);
      }
      .h-max {
        max-height: var(--h-max, none);
      }
    }
  }
  @media screen and (max-width: 767px) {
    .w1-sm {
      width: 1em;
    }
    .w2-sm {
      width: 2em;
    }
    .w3-sm {
      width: 4em;
    }
    .w4-sm {
      width: 8em;
    }
    .w5-sm {
      width: 16em;
    }
    .w-2b-sm {
      width: 49%;
    }
    .w-3b-sm {
      width: 32.3333%;
    }
    .w-4b-sm {
      width: 24%;
    }
    .w-5b-sm {
      width: 19%;
    }
    .w-6b-sm {
      width: 15%;
    }
    .w-1-sm {
      width: 1%;
    }
    .w-5-sm {
      width: 5%;
    }
    .w-10-sm {
      width: 10%;
    }
    .w-15-sm {
      width: 15%;
    }
    .w-20-sm {
      width: 20%;
    }
    .w-25-sm {
      width: 25%;
    }
    .w-30-sm {
      width: 30%;
    }
    .w-35-sm {
      width: 35%;
    }
    .w-33-sm {
      width: 33.33333%;
    }
    .w-40-sm {
      width: 40%;
    }
    .w-45-sm {
      width: 45%;
    }
    .w-50-sm {
      width: 50%;
    }
    .w-55-sm {
      width: 55%;
    }
    .w-60-sm {
      width: 60%;
    }
    .w-65-sm {
      width: 65%;
    }
    .w-66-sm {
      width: 66.66667%;
    }
    .w-70-sm {
      width: 70%;
    }
    .w-75-sm {
      width: 75%;
    }
    .w-80-sm {
      width: 80%;
    }
    .w-85-sm {
      width: 85%;
    }
    .w-90-sm {
      width: 90%;
    }
    .w-95-sm {
      width: 95%;
    }
    .w-100-sm {
      width: 100%;
    }
    .w-auto-sm {
      width: auto;
    }
    .h1-sm {
      height: 1em;
    }
    .h2-sm {
      height: 2em;
    }
    .h3-sm {
      height: 4em;
    }
    .h4-sm {
      height: 8em;
    }
    .h5-sm {
      height: 16em;
    }
    .h-1-sm {
      height: 10%;
    }
    .h-10-sm {
      height: 10%;
    }
    .h-15-sm {
      height: 15%;
    }
    .h-20-sm {
      height: 20%;
    }
    .h-25-sm {
      height: 25%;
    }
    .h-30-sm {
      height: 30%;
    }
    .h-35-sm {
      height: 35%;
    }
    .h-40-sm {
      height: 40%;
    }
    .h-45-sm {
      height: 45%;
    }
    .h-50-sm {
      height: 50%;
    }
    .h-55-sm {
      height: 55%;
    }
    .h-60-sm {
      height: 60%;
    }
    .h-65-sm {
      height: 65%;
    }
    .h-70-sm {
      height: 70%;
    }
    .h-75-sm {
      height: 75%;
    }
    .h-80-sm {
      height: 80%;
    }
    .h-85-sm {
      height: 85%;
    }
    .h-90-sm {
      height: 90%;
    }
    .h-95-sm {
      height: 95%;
    }
    .h-100-sm {
      height: 100%;
    }
    .min-h-100-sm {
      min-height: 100%;
    }
    .vh-25-sm {
      height: 25vh;
    }
    .vh-50-sm {
      height: 50vh;
    }
    .vh-75-sm {
      height: 75vh;
    }
    .vh-100-sm {
      height: 100vh;
    }
    .min-vh-100-sm {
      min-height: 100vh;
    }
    .h-auto-sm {
      height: auto;
    }
    .h-inherit-sm {
      height: inherit;
    }
    /* === Hard size utilities (drsnější specifita) === */
    .w-sm {
      width: var(--w-sm, auto);
    }
    .h-sm {
      height: var(--h-sm, auto);
    }
    .w-min-sm {
      min-width: var(--w-min-sm, 0);
    }
    .h-min-sm {
      min-height: var(--h-min-sm, 0);
    }
    .w-max-sm {
      max-width: var(--w-max-sm, none);
    }
    .h-max-sm {
      max-height: var(--h-max-sm, none);
    }
  }
  @supports (container-type: inline-size) {
    @container (max-width: 767px) {
      .w1-sm {
        width: 1em;
      }
      .w2-sm {
        width: 2em;
      }
      .w3-sm {
        width: 4em;
      }
      .w4-sm {
        width: 8em;
      }
      .w5-sm {
        width: 16em;
      }
      .w-2b-sm {
        width: 49%;
      }
      .w-3b-sm {
        width: 32.3333%;
      }
      .w-4b-sm {
        width: 24%;
      }
      .w-5b-sm {
        width: 19%;
      }
      .w-6b-sm {
        width: 15%;
      }
      .w-1-sm {
        width: 1%;
      }
      .w-5-sm {
        width: 5%;
      }
      .w-10-sm {
        width: 10%;
      }
      .w-15-sm {
        width: 15%;
      }
      .w-20-sm {
        width: 20%;
      }
      .w-25-sm {
        width: 25%;
      }
      .w-30-sm {
        width: 30%;
      }
      .w-35-sm {
        width: 35%;
      }
      .w-33-sm {
        width: 33.33333%;
      }
      .w-40-sm {
        width: 40%;
      }
      .w-45-sm {
        width: 45%;
      }
      .w-50-sm {
        width: 50%;
      }
      .w-55-sm {
        width: 55%;
      }
      .w-60-sm {
        width: 60%;
      }
      .w-65-sm {
        width: 65%;
      }
      .w-66-sm {
        width: 66.66667%;
      }
      .w-70-sm {
        width: 70%;
      }
      .w-75-sm {
        width: 75%;
      }
      .w-80-sm {
        width: 80%;
      }
      .w-85-sm {
        width: 85%;
      }
      .w-90-sm {
        width: 90%;
      }
      .w-95-sm {
        width: 95%;
      }
      .w-100-sm {
        width: 100%;
      }
      .w-auto-sm {
        width: auto;
      }
      .h1-sm {
        height: 1em;
      }
      .h2-sm {
        height: 2em;
      }
      .h3-sm {
        height: 4em;
      }
      .h4-sm {
        height: 8em;
      }
      .h5-sm {
        height: 16em;
      }
      .h-1-sm {
        height: 10%;
      }
      .h-10-sm {
        height: 10%;
      }
      .h-15-sm {
        height: 15%;
      }
      .h-20-sm {
        height: 20%;
      }
      .h-25-sm {
        height: 25%;
      }
      .h-30-sm {
        height: 30%;
      }
      .h-35-sm {
        height: 35%;
      }
      .h-40-sm {
        height: 40%;
      }
      .h-45-sm {
        height: 45%;
      }
      .h-50-sm {
        height: 50%;
      }
      .h-55-sm {
        height: 55%;
      }
      .h-60-sm {
        height: 60%;
      }
      .h-65-sm {
        height: 65%;
      }
      .h-70-sm {
        height: 70%;
      }
      .h-75-sm {
        height: 75%;
      }
      .h-80-sm {
        height: 80%;
      }
      .h-85-sm {
        height: 85%;
      }
      .h-90-sm {
        height: 90%;
      }
      .h-95-sm {
        height: 95%;
      }
      .h-100-sm {
        height: 100%;
      }
      .min-h-100-sm {
        min-height: 100%;
      }
      .vh-25-sm {
        height: 25vh;
      }
      .vh-50-sm {
        height: 50vh;
      }
      .vh-75-sm {
        height: 75vh;
      }
      .vh-100-sm {
        height: 100vh;
      }
      .min-vh-100-sm {
        min-height: 100vh;
      }
      .h-auto-sm {
        height: auto;
      }
      .h-inherit-sm {
        height: inherit;
      }
      /* === Hard size utilities (drsnější specifita) === */
      .w-sm {
        width: var(--w-sm, auto);
      }
      .h-sm {
        height: var(--h-sm, auto);
      }
      .w-min-sm {
        min-width: var(--w-min-sm, 0);
      }
      .h-min-sm {
        min-height: var(--h-min-sm, 0);
      }
      .w-max-sm {
        max-width: var(--w-max-sm, none);
      }
      .h-max-sm {
        max-height: var(--h-max-sm, none);
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .w1-md {
      width: 1em;
    }
    .w2-md {
      width: 2em;
    }
    .w3-md {
      width: 4em;
    }
    .w4-md {
      width: 8em;
    }
    .w5-md {
      width: 16em;
    }
    .w-2b-md {
      width: 49%;
    }
    .w-3b-md {
      width: 32.3333%;
    }
    .w-4b-md {
      width: 24%;
    }
    .w-5b-md {
      width: 19%;
    }
    .w-6b-md {
      width: 15%;
    }
    .w-1-md {
      width: 1%;
    }
    .w-5-md {
      width: 5%;
    }
    .w-10-md {
      width: 10%;
    }
    .w-15-md {
      width: 15%;
    }
    .w-20-md {
      width: 20%;
    }
    .w-25-md {
      width: 25%;
    }
    .w-30-md {
      width: 30%;
    }
    .w-35-md {
      width: 35%;
    }
    .w-33-md {
      width: 33.33333%;
    }
    .w-40-md {
      width: 40%;
    }
    .w-45-md {
      width: 45%;
    }
    .w-50-md {
      width: 50%;
    }
    .w-55-md {
      width: 55%;
    }
    .w-60-md {
      width: 60%;
    }
    .w-65-md {
      width: 65%;
    }
    .w-66-md {
      width: 66.66667%;
    }
    .w-70-md {
      width: 70%;
    }
    .w-75-md {
      width: 75%;
    }
    .w-80-md {
      width: 80%;
    }
    .w-85-md {
      width: 85%;
    }
    .w-90-md {
      width: 90%;
    }
    .w-95-md {
      width: 95%;
    }
    .w-100-md {
      width: 100%;
    }
    .w-auto-md {
      width: auto;
    }
    .h1-md {
      height: 1em;
    }
    .h2-md {
      height: 2em;
    }
    .h3-md {
      height: 4em;
    }
    .h4-md {
      height: 8em;
    }
    .h5-md {
      height: 16em;
    }
    .h-1-md {
      height: 10%;
    }
    .h-10-md {
      height: 10%;
    }
    .h-15-md {
      height: 15%;
    }
    .h-20-md {
      height: 20%;
    }
    .h-25-md {
      height: 25%;
    }
    .h-30-md {
      height: 30%;
    }
    .h-35-md {
      height: 35%;
    }
    .h-40-md {
      height: 40%;
    }
    .h-45-md {
      height: 45%;
    }
    .h-50-md {
      height: 50%;
    }
    .h-55-md {
      height: 55%;
    }
    .h-60-md {
      height: 60%;
    }
    .h-65-md {
      height: 65%;
    }
    .h-70-md {
      height: 70%;
    }
    .h-75-md {
      height: 75%;
    }
    .h-80-md {
      height: 80%;
    }
    .h-85-md {
      height: 85%;
    }
    .h-90-md {
      height: 90%;
    }
    .h-95-md {
      height: 95%;
    }
    .h-100-md {
      height: 100%;
    }
    .min-h-100-md {
      min-height: 100%;
    }
    .vh-25-md {
      height: 25vh;
    }
    .vh-50-md {
      height: 50vh;
    }
    .vh-75-md {
      height: 75vh;
    }
    .vh-100-md {
      height: 100vh;
    }
    .min-vh-100-md {
      min-height: 100vh;
    }
    .h-auto-md {
      height: auto;
    }
    .h-inherit-md {
      height: inherit;
    }
    /* === Hard size utilities (drsnější specifita) === */
    .w-md {
      width: var(--w-md, auto);
    }
    .h-md {
      height: var(--h-md, auto);
    }
    .w-min-md {
      min-width: var(--w-min-md, 0);
    }
    .h-min-md {
      min-height: var(--h-min-md, 0);
    }
    .w-max-md {
      max-width: var(--w-max-md, none);
    }
    .h-max-md {
      max-height: var(--h-max-md, none);
    }
  }
  @supports (container-type: inline-size) {
    @container (min-width: 768px) and (max-width: 991px) {
      .w1-md {
        width: 1em;
      }
      .w2-md {
        width: 2em;
      }
      .w3-md {
        width: 4em;
      }
      .w4-md {
        width: 8em;
      }
      .w5-md {
        width: 16em;
      }
      .w-2b-md {
        width: 49%;
      }
      .w-3b-md {
        width: 32.3333%;
      }
      .w-4b-md {
        width: 24%;
      }
      .w-5b-md {
        width: 19%;
      }
      .w-6b-md {
        width: 15%;
      }
      .w-1-md {
        width: 1%;
      }
      .w-5-md {
        width: 5%;
      }
      .w-10-md {
        width: 10%;
      }
      .w-15-md {
        width: 15%;
      }
      .w-20-md {
        width: 20%;
      }
      .w-25-md {
        width: 25%;
      }
      .w-30-md {
        width: 30%;
      }
      .w-35-md {
        width: 35%;
      }
      .w-33-md {
        width: 33.33333%;
      }
      .w-40-md {
        width: 40%;
      }
      .w-45-md {
        width: 45%;
      }
      .w-50-md {
        width: 50%;
      }
      .w-55-md {
        width: 55%;
      }
      .w-60-md {
        width: 60%;
      }
      .w-65-md {
        width: 65%;
      }
      .w-66-md {
        width: 66.66667%;
      }
      .w-70-md {
        width: 70%;
      }
      .w-75-md {
        width: 75%;
      }
      .w-80-md {
        width: 80%;
      }
      .w-85-md {
        width: 85%;
      }
      .w-90-md {
        width: 90%;
      }
      .w-95-md {
        width: 95%;
      }
      .w-100-md {
        width: 100%;
      }
      .w-auto-md {
        width: auto;
      }
      .h1-md {
        height: 1em;
      }
      .h2-md {
        height: 2em;
      }
      .h3-md {
        height: 4em;
      }
      .h4-md {
        height: 8em;
      }
      .h5-md {
        height: 16em;
      }
      .h-1-md {
        height: 10%;
      }
      .h-10-md {
        height: 10%;
      }
      .h-15-md {
        height: 15%;
      }
      .h-20-md {
        height: 20%;
      }
      .h-25-md {
        height: 25%;
      }
      .h-30-md {
        height: 30%;
      }
      .h-35-md {
        height: 35%;
      }
      .h-40-md {
        height: 40%;
      }
      .h-45-md {
        height: 45%;
      }
      .h-50-md {
        height: 50%;
      }
      .h-55-md {
        height: 55%;
      }
      .h-60-md {
        height: 60%;
      }
      .h-65-md {
        height: 65%;
      }
      .h-70-md {
        height: 70%;
      }
      .h-75-md {
        height: 75%;
      }
      .h-80-md {
        height: 80%;
      }
      .h-85-md {
        height: 85%;
      }
      .h-90-md {
        height: 90%;
      }
      .h-95-md {
        height: 95%;
      }
      .h-100-md {
        height: 100%;
      }
      .min-h-100-md {
        min-height: 100%;
      }
      .vh-25-md {
        height: 25vh;
      }
      .vh-50-md {
        height: 50vh;
      }
      .vh-75-md {
        height: 75vh;
      }
      .vh-100-md {
        height: 100vh;
      }
      .min-vh-100-md {
        min-height: 100vh;
      }
      .h-auto-md {
        height: auto;
      }
      .h-inherit-md {
        height: inherit;
      }
      /* === Hard size utilities (drsnější specifita) === */
      .w-md {
        width: var(--w-md, auto);
      }
      .h-md {
        height: var(--h-md, auto);
      }
      .w-min-md {
        min-width: var(--w-min-md, 0);
      }
      .h-min-md {
        min-height: var(--h-min-md, 0);
      }
      .w-max-md {
        max-width: var(--w-max-md, none);
      }
      .h-max-md {
        max-height: var(--h-max-md, none);
      }
    }
  }
}
@layer utilities {
  /*/ --- UTILITIES --- */
  .fz-1 {
    font-size: 2rem;
  }
  .fz-2 {
    font-size: 1.75rem;
  }
  .fz-3 {
    font-size: 1.5rem;
  }
  .fz-4 {
    font-size: 1.25rem;
  }
  .fz-5 {
    font-size: 1rem;
  }
  .fz-6 {
    font-size: 0.875rem;
  }
  .fz-7 {
    font-size: 0.75rem;
  }
  .fs-i {
    font-style: italic;
  }
  .fs-n {
    font-style: normal;
  }
  .fw-l {
    font-weight: 300;
  }
  .fw-lr {
    font-weight: lighter;
  }
  .fw-n {
    font-weight: normal;
  }
  .fw-b {
    font-weight: bold;
  }
  .fw-br {
    font-weight: bolder;
  }
  .lh-1 {
    line-height: 1;
  }
  .lh-3 {
    line-height: 1.25;
  }
  .lh-4 {
    line-height: 1.5;
  }
  .lh-5 {
    line-height: 2;
  }
  .tal-l {
    text-align: left;
  }
  .tal-r {
    text-align: right;
  }
  .tal-c {
    text-align: center;
  }
  .td-n {
    text-decoration: none;
  }
  .td-u {
    text-decoration: underline;
  }
  .td-l {
    text-decoration: line-through;
  }
  .tt-u {
    text-transform: uppercase;
  }
  .tt-l {
    text-transform: lowercase;
  }
  .tt-c {
    text-transform: capitalize;
  }
  .tt-n {
    text-transform: none;
  }
  .whs-nw {
    white-space: nowrap;
  }
  .d-n {
    display: none;
  }
  .d-i {
    display: inline;
  }
  .d-b {
    display: block;
  }
  .d-ib {
    display: inline-block;
  }
  .d-g {
    display: grid;
  }
  .d-t {
    display: table;
  }
  .d-it {
    display: inline-table;
  }
  .d-tc {
    display: table-cell;
  }
  .d-trow {
    display: table-row;
  }
  .d-tcol {
    display: table-column;
  }
  .d-f {
    display: flex;
  }
  .d-if {
    display: inline-flex;
  }
  .fx-auto {
    flex: 1 1 auto;
    min-width: 0;
  }
  .fx-n {
    flex: none;
  }
  .fxw-w {
    flex-wrap: wrap;
  }
  .fxw-nw {
    flex-wrap: nowrap;
  }
  .fxw-wr {
    flex-wrap: wrap-reverse;
  }
  .fxd-c {
    flex-direction: column;
  }
  .fxd-r {
    flex-direction: row;
  }
  .fxd-cr {
    flex-direction: column-reverse;
  }
  .fxd-rr {
    flex-direction: row-reverse;
  }
  .fxg-0 {
    flex-grow: 0;
  }
  .fxg-1 {
    flex-grow: 1;
  }
  .fxs-0 {
    flex-shrink: 0;
  }
  .fxs-1 {
    flex-shrink: 1;
  }
  .ai-fs {
    align-items: flex-start;
  }
  .ai-fe {
    align-items: flex-end;
  }
  .ai-c {
    align-items: center;
  }
  .ai-b {
    align-items: baseline;
  }
  .ai-s {
    align-items: stretch;
  }
  .as-fs {
    align-self: flex-start;
  }
  .as-fe {
    align-self: flex-end;
  }
  .as-c {
    align-self: center;
  }
  .as-b {
    align-self: baseline;
  }
  .as-s {
    align-self: stretch;
  }
  .jc-fs {
    justify-content: flex-start;
  }
  .jc-fe {
    justify-content: flex-end;
  }
  .jc-c {
    justify-content: center;
  }
  .jc-sb {
    justify-content: space-between;
  }
  .jc-sa {
    justify-content: space-around;
  }
  .ac-fs {
    align-content: flex-start;
  }
  .ac-fe {
    align-content: flex-end;
  }
  .ac-c {
    align-content: center;
  }
  .ac-sb {
    align-content: space-between;
  }
  .ac-sa {
    align-content: space-around;
  }
  .ac-s {
    align-content: stretch;
  }
  .ord-0 {
    order: 0;
  }
  .ord-1 {
    order: 1;
  }
  .ord-2 {
    order: 2;
  }
  .ord-3 {
    order: 3;
  }
  .ord-4 {
    order: 4;
  }
  .ord-5 {
    order: 5;
  }
  .ord-last {
    order: 99999;
  }
  .va-bl {
    vertical-align: baseline;
  }
  .va-t {
    vertical-align: top;
  }
  .va-m {
    vertical-align: middle;
  }
  .va-b {
    vertical-align: bottom;
  }
  .va-tb {
    vertical-align: text-bottom;
  }
  .va-tt {
    vertical-align: text-top;
  }
  .bg-n {
    background: none;
  }
  .bgi-n {
    background-image: none;
  }
  .bg-c {
    background-repeat: no-repeat;
    background-position: center center;
  }
  .bg-t {
    background-repeat: no-repeat;
    background-position: top center;
  }
  .bg-r {
    background-repeat: no-repeat;
    background-position: center right;
  }
  .bg-b {
    background-repeat: no-repeat;
    background-position: bottom center;
  }
  .bg-l {
    background-repeat: no-repeat;
    background-position: center left;
  }
  .bgsz-ct {
    background-size: contain;
  }
  .bgsz-cv {
    background-size: cover;
  }
  .b-a {
    border-style: solid;
    border-width: 1px;
    border-color: var(--c-border);
  }
  .b-t {
    border-top-style: solid;
    border-top-width: 1px;
    border-color: var(--c-border);
  }
  .b-r {
    border-right-style: solid;
    border-right-width: 1px;
    border-color: var(--c-border);
  }
  .b-b {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: var(--c-border);
  }
  .b-l {
    border-left-style: solid;
    border-left-width: 1px;
    border-color: var(--c-border);
  }
  .b-n {
    border-style: none;
    border-width: 0;
  }
  .br-0 {
    border-radius: 0;
  }
  .br-1 {
    border-radius: 0.125rem;
  }
  .br-2 {
    border-radius: 0.25rem;
  }
  .br-3 {
    border-radius: 0.5rem;
  }
  .br-4 {
    border-radius: 1rem;
  }
  .br-100 {
    border-radius: 100%;
  }
  .br-pill {
    border-radius: 9999px;
  }
  .br-t {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }
  .br-r {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
  .br-b {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
  .br-l {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
  }
  .bw-0 {
    border-width: 0;
  }
  .bw-1 {
    border-width: 0.125rem;
  }
  .bw-2 {
    border-width: 0.25rem;
  }
  .bw-3 {
    border-width: 0.5rem;
  }
  .bw-4 {
    border-width: 1rem;
  }
  .bw-5 {
    border-width: 2rem;
  }
  .btw-0 {
    border-top-width: 0;
  }
  .brw-0 {
    border-right-width: 0;
  }
  .bbw-0 {
    border-bottom-width: 0;
  }
  .blw-0 {
    border-left-width: 0;
  }
  .bs-dt {
    border-style: dotted;
  }
  .bs-ds {
    border-style: dashed;
  }
  .bs-s {
    border-style: solid;
  }
  .bs-n {
    border-style: none;
  }
  .fl-l {
    float: left;
  }
  .fl-r {
    float: right;
  }
  .fl-n {
    float: none;
  }
  .o-10 {
    opacity: 1;
  }
  .o-9 {
    opacity: 0.9;
  }
  .o-8 {
    opacity: 0.8;
  }
  .o-7 {
    opacity: 0.7;
  }
  .o-6 {
    opacity: 0.6;
  }
  .o-5 {
    opacity: 0.5;
  }
  .o-4 {
    opacity: 0.4;
  }
  .o-3 {
    opacity: 0.3;
  }
  .o-2 {
    opacity: 0.2;
  }
  .o-1 {
    opacity: 0.1;
  }
  .o-0 {
    opacity: 0;
  }
  .ov-v {
    overflow: visible;
  }
  .ov-h {
    overflow: hidden;
  }
  .ov-s {
    overflow: scroll;
  }
  .ov-a {
    overflow: auto;
  }
  .ovx-v {
    overflow-x: visible;
  }
  .ovx-h {
    overflow-x: hidden;
  }
  .ovx-s {
    overflow-x: scroll;
  }
  .ovx-a {
    overflow-x: auto;
  }
  .ovy-v {
    overflow-y: visible;
  }
  .ovy-h {
    overflow-y: hidden;
  }
  .ovy-s {
    overflow-y: scroll;
  }
  .ovy-a {
    overflow-y: auto;
  }
  .pos-s {
    position: static;
  }
  .pos-r {
    position: relative;
  }
  .pos-a {
    position: absolute;
  }
  .pos-f {
    position: fixed;
  }
  .top-0 {
    top: 0;
  }
  .top-50 {
    top: 50%;
  }
  .top-100 {
    top: 100%;
  }
  .bottom {
    bottom: 0;
  }
  .bottom-50 {
    bottom: 50%;
  }
  .bottom-100 {
    bottom: 100%;
  }
  .left-0 {
    left: 0;
  }
  .left-50 {
    left: 50%;
  }
  .left-100 {
    left: 100%;
  }
  .right-0 {
    right: 0;
  }
  .right-50 {
    right: 50%;
  }
  .right-100 {
    right: 100%;
  }
  .trf-m {
    transform: translate(-50%, -50%);
  }
  .trf-m-x {
    transform: translateX(-50%);
  }
  .trf-m-y {
    transform: translateY(-50%);
  }
  .pos-tl {
    top: 0;
    left: 0;
    transform: translate(0, 0);
  }
  .pos-tc {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .pos-tr {
    top: 0;
    left: 100%;
    transform: translate(-100%, 0);
  }
  .pos-ml {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }
  .pos-mc {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .pos-mr {
    top: 50%;
    left: 100%;
    transform: translate(-100%, -50%);
  }
  .pos-bl {
    top: 100%;
    left: 0;
    transform: translate(0, -100%);
  }
  .pos-bc {
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  .pos-br {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }
  .ratio-1x1 {
    aspect-ratio: 1/1;
  }
  .ratio-4x3 {
    aspect-ratio: 4/3;
  }
  .ratio-3x4 {
    aspect-ratio: 3/4;
  }
  .ratio-3x2 {
    aspect-ratio: 3/2;
  }
  .ratio-2x3 {
    aspect-ratio: 2/3;
  }
  .ratio-16x9 {
    aspect-ratio: 16/9;
  }
  .ratio-9x16 {
    aspect-ratio: 9/16;
  }
  .ratio-21x9 {
    aspect-ratio: 21/9;
  }
  .rot-45 {
    transform: rotate(45deg);
  }
  .rot-90 {
    transform: rotate(90deg);
  }
  .rot-135 {
    transform: rotate(135deg);
  }
  .rot-180 {
    transform: rotate(180deg);
  }
  .rot-225 {
    transform: rotate(225deg);
  }
  .rot-270 {
    transform: rotate(270deg);
  }
  .rot-315 {
    transform: rotate(315deg);
  }
  .visible {
    visibility: visible;
  }
  .invisible {
    visibility: hidden;
  }
  .z-0 {
    z-index: 0;
  }
  .z-1 {
    z-index: 100;
  }
  .z-2 {
    z-index: 200;
  }
  .z-3 {
    z-index: 300;
  }
  .z-4 {
    z-index: 400;
  }
  .z-5 {
    z-index: 500;
  }
  .z-999 {
    z-index: 999;
  }
  .z-9999 {
    z-index: 9999;
  }
  .z-max {
    z-index: 2147483647;
  }
  .shd-1 {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  .shd-2 {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }
  .shd-3 {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  }
  .shd-n {
    box-shadow: none;
  }
  @supports (container-type: inline-size) {
    @container (min-width: 992px) {
      .fz-1 {
        font-size: 2rem;
      }
      .fz-2 {
        font-size: 1.75rem;
      }
      .fz-3 {
        font-size: 1.5rem;
      }
      .fz-4 {
        font-size: 1.25rem;
      }
      .fz-5 {
        font-size: 1rem;
      }
      .fz-6 {
        font-size: 0.875rem;
      }
      .fz-7 {
        font-size: 0.75rem;
      }
      .fs-i {
        font-style: italic;
      }
      .fs-n {
        font-style: normal;
      }
      .fw-l {
        font-weight: 300;
      }
      .fw-lr {
        font-weight: lighter;
      }
      .fw-n {
        font-weight: normal;
      }
      .fw-b {
        font-weight: bold;
      }
      .fw-br {
        font-weight: bolder;
      }
      .lh-1 {
        line-height: 1;
      }
      .lh-3 {
        line-height: 1.25;
      }
      .lh-4 {
        line-height: 1.5;
      }
      .lh-5 {
        line-height: 2;
      }
      .tal-l {
        text-align: left;
      }
      .tal-r {
        text-align: right;
      }
      .tal-c {
        text-align: center;
      }
      .td-n {
        text-decoration: none;
      }
      .td-u {
        text-decoration: underline;
      }
      .td-l {
        text-decoration: line-through;
      }
      .tt-u {
        text-transform: uppercase;
      }
      .tt-l {
        text-transform: lowercase;
      }
      .tt-c {
        text-transform: capitalize;
      }
      .tt-n {
        text-transform: none;
      }
      .whs-nw {
        white-space: nowrap;
      }
      .d-n {
        display: none;
      }
      .d-i {
        display: inline;
      }
      .d-b {
        display: block;
      }
      .d-ib {
        display: inline-block;
      }
      .d-g {
        display: grid;
      }
      .d-t {
        display: table;
      }
      .d-it {
        display: inline-table;
      }
      .d-tc {
        display: table-cell;
      }
      .d-trow {
        display: table-row;
      }
      .d-tcol {
        display: table-column;
      }
      .d-f {
        display: flex;
      }
      .d-if {
        display: inline-flex;
      }
      .fx-auto {
        flex: 1 1 auto;
        min-width: 0;
      }
      .fx-n {
        flex: none;
      }
      .fxw-w {
        flex-wrap: wrap;
      }
      .fxw-nw {
        flex-wrap: nowrap;
      }
      .fxw-wr {
        flex-wrap: wrap-reverse;
      }
      .fxd-c {
        flex-direction: column;
      }
      .fxd-r {
        flex-direction: row;
      }
      .fxd-cr {
        flex-direction: column-reverse;
      }
      .fxd-rr {
        flex-direction: row-reverse;
      }
      .fxg-0 {
        flex-grow: 0;
      }
      .fxg-1 {
        flex-grow: 1;
      }
      .fxs-0 {
        flex-shrink: 0;
      }
      .fxs-1 {
        flex-shrink: 1;
      }
      .ai-fs {
        align-items: flex-start;
      }
      .ai-fe {
        align-items: flex-end;
      }
      .ai-c {
        align-items: center;
      }
      .ai-b {
        align-items: baseline;
      }
      .ai-s {
        align-items: stretch;
      }
      .as-fs {
        align-self: flex-start;
      }
      .as-fe {
        align-self: flex-end;
      }
      .as-c {
        align-self: center;
      }
      .as-b {
        align-self: baseline;
      }
      .as-s {
        align-self: stretch;
      }
      .jc-fs {
        justify-content: flex-start;
      }
      .jc-fe {
        justify-content: flex-end;
      }
      .jc-c {
        justify-content: center;
      }
      .jc-sb {
        justify-content: space-between;
      }
      .jc-sa {
        justify-content: space-around;
      }
      .ac-fs {
        align-content: flex-start;
      }
      .ac-fe {
        align-content: flex-end;
      }
      .ac-c {
        align-content: center;
      }
      .ac-sb {
        align-content: space-between;
      }
      .ac-sa {
        align-content: space-around;
      }
      .ac-s {
        align-content: stretch;
      }
      .ord-0 {
        order: 0;
      }
      .ord-1 {
        order: 1;
      }
      .ord-2 {
        order: 2;
      }
      .ord-3 {
        order: 3;
      }
      .ord-4 {
        order: 4;
      }
      .ord-5 {
        order: 5;
      }
      .ord-last {
        order: 99999;
      }
      .va-bl {
        vertical-align: baseline;
      }
      .va-t {
        vertical-align: top;
      }
      .va-m {
        vertical-align: middle;
      }
      .va-b {
        vertical-align: bottom;
      }
      .va-tb {
        vertical-align: text-bottom;
      }
      .va-tt {
        vertical-align: text-top;
      }
      .bg-n {
        background: none;
      }
      .bgi-n {
        background-image: none;
      }
      .bg-c {
        background-repeat: no-repeat;
        background-position: center center;
      }
      .bg-t {
        background-repeat: no-repeat;
        background-position: top center;
      }
      .bg-r {
        background-repeat: no-repeat;
        background-position: center right;
      }
      .bg-b {
        background-repeat: no-repeat;
        background-position: bottom center;
      }
      .bg-l {
        background-repeat: no-repeat;
        background-position: center left;
      }
      .bgsz-ct {
        background-size: contain;
      }
      .bgsz-cv {
        background-size: cover;
      }
      .b-a {
        border-style: solid;
        border-width: 1px;
        border-color: var(--c-border);
      }
      .b-t {
        border-top-style: solid;
        border-top-width: 1px;
        border-color: var(--c-border);
      }
      .b-r {
        border-right-style: solid;
        border-right-width: 1px;
        border-color: var(--c-border);
      }
      .b-b {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-color: var(--c-border);
      }
      .b-l {
        border-left-style: solid;
        border-left-width: 1px;
        border-color: var(--c-border);
      }
      .b-n {
        border-style: none;
        border-width: 0;
      }
      .br-0 {
        border-radius: 0;
      }
      .br-1 {
        border-radius: 0.125rem;
      }
      .br-2 {
        border-radius: 0.25rem;
      }
      .br-3 {
        border-radius: 0.5rem;
      }
      .br-4 {
        border-radius: 1rem;
      }
      .br-100 {
        border-radius: 100%;
      }
      .br-pill {
        border-radius: 9999px;
      }
      .br-t {
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
      }
      .br-r {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
      .br-b {
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
      .br-l {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
      }
      .bw-0 {
        border-width: 0;
      }
      .bw-1 {
        border-width: 0.125rem;
      }
      .bw-2 {
        border-width: 0.25rem;
      }
      .bw-3 {
        border-width: 0.5rem;
      }
      .bw-4 {
        border-width: 1rem;
      }
      .bw-5 {
        border-width: 2rem;
      }
      .btw-0 {
        border-top-width: 0;
      }
      .brw-0 {
        border-right-width: 0;
      }
      .bbw-0 {
        border-bottom-width: 0;
      }
      .blw-0 {
        border-left-width: 0;
      }
      .bs-dt {
        border-style: dotted;
      }
      .bs-ds {
        border-style: dashed;
      }
      .bs-s {
        border-style: solid;
      }
      .bs-n {
        border-style: none;
      }
      .fl-l {
        float: left;
      }
      .fl-r {
        float: right;
      }
      .fl-n {
        float: none;
      }
      .o-10 {
        opacity: 1;
      }
      .o-9 {
        opacity: 0.9;
      }
      .o-8 {
        opacity: 0.8;
      }
      .o-7 {
        opacity: 0.7;
      }
      .o-6 {
        opacity: 0.6;
      }
      .o-5 {
        opacity: 0.5;
      }
      .o-4 {
        opacity: 0.4;
      }
      .o-3 {
        opacity: 0.3;
      }
      .o-2 {
        opacity: 0.2;
      }
      .o-1 {
        opacity: 0.1;
      }
      .o-0 {
        opacity: 0;
      }
      .ov-v {
        overflow: visible;
      }
      .ov-h {
        overflow: hidden;
      }
      .ov-s {
        overflow: scroll;
      }
      .ov-a {
        overflow: auto;
      }
      .ovx-v {
        overflow-x: visible;
      }
      .ovx-h {
        overflow-x: hidden;
      }
      .ovx-s {
        overflow-x: scroll;
      }
      .ovx-a {
        overflow-x: auto;
      }
      .ovy-v {
        overflow-y: visible;
      }
      .ovy-h {
        overflow-y: hidden;
      }
      .ovy-s {
        overflow-y: scroll;
      }
      .ovy-a {
        overflow-y: auto;
      }
      .pos-s {
        position: static;
      }
      .pos-r {
        position: relative;
      }
      .pos-a {
        position: absolute;
      }
      .pos-f {
        position: fixed;
      }
      .top-0 {
        top: 0;
      }
      .top-50 {
        top: 50%;
      }
      .top-100 {
        top: 100%;
      }
      .bottom {
        bottom: 0;
      }
      .bottom-50 {
        bottom: 50%;
      }
      .bottom-100 {
        bottom: 100%;
      }
      .left-0 {
        left: 0;
      }
      .left-50 {
        left: 50%;
      }
      .left-100 {
        left: 100%;
      }
      .right-0 {
        right: 0;
      }
      .right-50 {
        right: 50%;
      }
      .right-100 {
        right: 100%;
      }
      .trf-m {
        transform: translate(-50%, -50%);
      }
      .trf-m-x {
        transform: translateX(-50%);
      }
      .trf-m-y {
        transform: translateY(-50%);
      }
      .pos-tl {
        top: 0;
        left: 0;
        transform: translate(0, 0);
      }
      .pos-tc {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .pos-tr {
        top: 0;
        left: 100%;
        transform: translate(-100%, 0);
      }
      .pos-ml {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
      .pos-mc {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .pos-mr {
        top: 50%;
        left: 100%;
        transform: translate(-100%, -50%);
      }
      .pos-bl {
        top: 100%;
        left: 0;
        transform: translate(0, -100%);
      }
      .pos-bc {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
      }
      .pos-br {
        top: 100%;
        left: 100%;
        transform: translate(-100%, -100%);
      }
      .ratio-1x1 {
        aspect-ratio: 1/1;
      }
      .ratio-4x3 {
        aspect-ratio: 4/3;
      }
      .ratio-3x4 {
        aspect-ratio: 3/4;
      }
      .ratio-3x2 {
        aspect-ratio: 3/2;
      }
      .ratio-2x3 {
        aspect-ratio: 2/3;
      }
      .ratio-16x9 {
        aspect-ratio: 16/9;
      }
      .ratio-9x16 {
        aspect-ratio: 9/16;
      }
      .ratio-21x9 {
        aspect-ratio: 21/9;
      }
      .rot-45 {
        transform: rotate(45deg);
      }
      .rot-90 {
        transform: rotate(90deg);
      }
      .rot-135 {
        transform: rotate(135deg);
      }
      .rot-180 {
        transform: rotate(180deg);
      }
      .rot-225 {
        transform: rotate(225deg);
      }
      .rot-270 {
        transform: rotate(270deg);
      }
      .rot-315 {
        transform: rotate(315deg);
      }
      .visible {
        visibility: visible;
      }
      .invisible {
        visibility: hidden;
      }
      .z-0 {
        z-index: 0;
      }
      .z-1 {
        z-index: 100;
      }
      .z-2 {
        z-index: 200;
      }
      .z-3 {
        z-index: 300;
      }
      .z-4 {
        z-index: 400;
      }
      .z-5 {
        z-index: 500;
      }
      .z-999 {
        z-index: 999;
      }
      .z-9999 {
        z-index: 9999;
      }
      .z-max {
        z-index: 2147483647;
      }
      .shd-1 {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      }
      .shd-2 {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      }
      .shd-3 {
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
      }
      .shd-n {
        box-shadow: none;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .fz-1-sm {
      font-size: 2rem;
    }
    .fz-2-sm {
      font-size: 1.75rem;
    }
    .fz-3-sm {
      font-size: 1.5rem;
    }
    .fz-4-sm {
      font-size: 1.25rem;
    }
    .fz-5-sm {
      font-size: 1rem;
    }
    .fz-6-sm {
      font-size: 0.875rem;
    }
    .fz-7-sm {
      font-size: 0.75rem;
    }
    .fs-i-sm {
      font-style: italic;
    }
    .fs-n-sm {
      font-style: normal;
    }
    .fw-l-sm {
      font-weight: 300;
    }
    .fw-lr-sm {
      font-weight: lighter;
    }
    .fw-n-sm {
      font-weight: normal;
    }
    .fw-b-sm {
      font-weight: bold;
    }
    .fw-br-sm {
      font-weight: bolder;
    }
    .lh-1-sm {
      line-height: 1;
    }
    .lh-3-sm {
      line-height: 1.25;
    }
    .lh-4-sm {
      line-height: 1.5;
    }
    .lh-5-sm {
      line-height: 2;
    }
    .tal-l-sm {
      text-align: left;
    }
    .tal-r-sm {
      text-align: right;
    }
    .tal-c-sm {
      text-align: center;
    }
    .td-n-sm {
      text-decoration: none;
    }
    .td-u-sm {
      text-decoration: underline;
    }
    .td-l-sm {
      text-decoration: line-through;
    }
    .tt-u-sm {
      text-transform: uppercase;
    }
    .tt-l-sm {
      text-transform: lowercase;
    }
    .tt-c-sm {
      text-transform: capitalize;
    }
    .tt-n-sm {
      text-transform: none;
    }
    .whs-nw-sm {
      white-space: nowrap;
    }
    .d-n-sm {
      display: none;
    }
    .d-i-sm {
      display: inline;
    }
    .d-b-sm {
      display: block;
    }
    .d-ib-sm {
      display: inline-block;
    }
    .d-g-sm {
      display: grid;
    }
    .d-t-sm {
      display: table;
    }
    .d-it-sm {
      display: inline-table;
    }
    .d-tc-sm {
      display: table-cell;
    }
    .d-trow-sm {
      display: table-row;
    }
    .d-tcol-sm {
      display: table-column;
    }
    .d-f-sm {
      display: flex;
    }
    .d-if-sm {
      display: inline-flex;
    }
    .fx-auto-sm {
      flex: 1 1 auto;
      min-width: 0;
    }
    .fx-n-sm {
      flex: none;
    }
    .fxw-w-sm {
      flex-wrap: wrap;
    }
    .fxw-nw-sm {
      flex-wrap: nowrap;
    }
    .fxw-wr-sm {
      flex-wrap: wrap-reverse;
    }
    .fxd-c-sm {
      flex-direction: column;
    }
    .fxd-r-sm {
      flex-direction: row;
    }
    .fxd-cr-sm {
      flex-direction: column-reverse;
    }
    .fxd-rr-sm {
      flex-direction: row-reverse;
    }
    .fxg-0-sm {
      flex-grow: 0;
    }
    .fxg-1-sm {
      flex-grow: 1;
    }
    .fxs-0-sm {
      flex-shrink: 0;
    }
    .fxs-1-sm {
      flex-shrink: 1;
    }
    .ai-fs-sm {
      align-items: flex-start;
    }
    .ai-fe-sm {
      align-items: flex-end;
    }
    .ai-c-sm {
      align-items: center;
    }
    .ai-b-sm {
      align-items: baseline;
    }
    .ai-s-sm {
      align-items: stretch;
    }
    .as-fs-sm {
      align-self: flex-start;
    }
    .as-fe-sm {
      align-self: flex-end;
    }
    .as-c-sm {
      align-self: center;
    }
    .as-b-sm {
      align-self: baseline;
    }
    .as-s-sm {
      align-self: stretch;
    }
    .jc-fs-sm {
      justify-content: flex-start;
    }
    .jc-fe-sm {
      justify-content: flex-end;
    }
    .jc-c-sm {
      justify-content: center;
    }
    .jc-sb-sm {
      justify-content: space-between;
    }
    .jc-sa-sm {
      justify-content: space-around;
    }
    .ac-fs-sm {
      align-content: flex-start;
    }
    .ac-fe-sm {
      align-content: flex-end;
    }
    .ac-c-sm {
      align-content: center;
    }
    .ac-sb-sm {
      align-content: space-between;
    }
    .ac-sa-sm {
      align-content: space-around;
    }
    .ac-s-sm {
      align-content: stretch;
    }
    .ord-0-sm {
      order: 0;
    }
    .ord-1-sm {
      order: 1;
    }
    .ord-2-sm {
      order: 2;
    }
    .ord-3-sm {
      order: 3;
    }
    .ord-4-sm {
      order: 4;
    }
    .ord-5-sm {
      order: 5;
    }
    .ord-last-sm {
      order: 99999;
    }
    .va-bl-sm {
      vertical-align: baseline;
    }
    .va-t-sm {
      vertical-align: top;
    }
    .va-m-sm {
      vertical-align: middle;
    }
    .va-b-sm {
      vertical-align: bottom;
    }
    .va-tb-sm {
      vertical-align: text-bottom;
    }
    .va-tt-sm {
      vertical-align: text-top;
    }
    .bg-n-sm {
      background: none;
    }
    .bgi-n-sm {
      background-image: none;
    }
    .bg-c-sm {
      background-repeat: no-repeat;
      background-position: center center;
    }
    .bg-t-sm {
      background-repeat: no-repeat;
      background-position: top center;
    }
    .bg-r-sm {
      background-repeat: no-repeat;
      background-position: center right;
    }
    .bg-b-sm {
      background-repeat: no-repeat;
      background-position: bottom center;
    }
    .bg-l-sm {
      background-repeat: no-repeat;
      background-position: center left;
    }
    .bgsz-ct-sm {
      background-size: contain;
    }
    .bgsz-cv-sm {
      background-size: cover;
    }
    .b-a-sm {
      border-style: solid;
      border-width: 1px;
      border-color: var(--c-border);
    }
    .b-t-sm {
      border-top-style: solid;
      border-top-width: 1px;
      border-color: var(--c-border);
    }
    .b-r-sm {
      border-right-style: solid;
      border-right-width: 1px;
      border-color: var(--c-border);
    }
    .b-b-sm {
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-color: var(--c-border);
    }
    .b-l-sm {
      border-left-style: solid;
      border-left-width: 1px;
      border-color: var(--c-border);
    }
    .b-n-sm {
      border-style: none;
      border-width: 0;
    }
    .br-0-sm {
      border-radius: 0;
    }
    .br-1-sm {
      border-radius: 0.125rem;
    }
    .br-2-sm {
      border-radius: 0.25rem;
    }
    .br-3-sm {
      border-radius: 0.5rem;
    }
    .br-4-sm {
      border-radius: 1rem;
    }
    .br-100-sm {
      border-radius: 100%;
    }
    .br-pill-sm {
      border-radius: 9999px;
    }
    .br-t-sm {
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
    }
    .br-r-sm {
      border-top-right-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
    .br-b-sm {
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
    .br-l-sm {
      border-top-left-radius: var(--radius);
      border-bottom-left-radius: var(--radius);
    }
    .bw-0-sm {
      border-width: 0;
    }
    .bw-1-sm {
      border-width: 0.125rem;
    }
    .bw-2-sm {
      border-width: 0.25rem;
    }
    .bw-3-sm {
      border-width: 0.5rem;
    }
    .bw-4-sm {
      border-width: 1rem;
    }
    .bw-5-sm {
      border-width: 2rem;
    }
    .btw-0-sm {
      border-top-width: 0;
    }
    .brw-0-sm {
      border-right-width: 0;
    }
    .bbw-0-sm {
      border-bottom-width: 0;
    }
    .blw-0-sm {
      border-left-width: 0;
    }
    .bs-dt-sm {
      border-style: dotted;
    }
    .bs-ds-sm {
      border-style: dashed;
    }
    .bs-s-sm {
      border-style: solid;
    }
    .bs-n-sm {
      border-style: none;
    }
    .fl-l-sm {
      float: left;
    }
    .fl-r-sm {
      float: right;
    }
    .fl-n-sm {
      float: none;
    }
    .o-10-sm {
      opacity: 1;
    }
    .o-9-sm {
      opacity: 0.9;
    }
    .o-8-sm {
      opacity: 0.8;
    }
    .o-7-sm {
      opacity: 0.7;
    }
    .o-6-sm {
      opacity: 0.6;
    }
    .o-5-sm {
      opacity: 0.5;
    }
    .o-4-sm {
      opacity: 0.4;
    }
    .o-3-sm {
      opacity: 0.3;
    }
    .o-2-sm {
      opacity: 0.2;
    }
    .o-1-sm {
      opacity: 0.1;
    }
    .o-0-sm {
      opacity: 0;
    }
    .ov-v-sm {
      overflow: visible;
    }
    .ov-h-sm {
      overflow: hidden;
    }
    .ov-s-sm {
      overflow: scroll;
    }
    .ov-a-sm {
      overflow: auto;
    }
    .ovx-v-sm {
      overflow-x: visible;
    }
    .ovx-h-sm {
      overflow-x: hidden;
    }
    .ovx-s-sm {
      overflow-x: scroll;
    }
    .ovx-a-sm {
      overflow-x: auto;
    }
    .ovy-v-sm {
      overflow-y: visible;
    }
    .ovy-h-sm {
      overflow-y: hidden;
    }
    .ovy-s-sm {
      overflow-y: scroll;
    }
    .ovy-a-sm {
      overflow-y: auto;
    }
    .pos-s-sm {
      position: static;
    }
    .pos-r-sm {
      position: relative;
    }
    .pos-a-sm {
      position: absolute;
    }
    .pos-f-sm {
      position: fixed;
    }
    .top-0-sm {
      top: 0;
    }
    .top-50-sm {
      top: 50%;
    }
    .top-100-sm {
      top: 100%;
    }
    .bottom-sm {
      bottom: 0;
    }
    .bottom-50-sm {
      bottom: 50%;
    }
    .bottom-100-sm {
      bottom: 100%;
    }
    .left-0-sm {
      left: 0;
    }
    .left-50-sm {
      left: 50%;
    }
    .left-100-sm {
      left: 100%;
    }
    .right-0-sm {
      right: 0;
    }
    .right-50-sm {
      right: 50%;
    }
    .right-100-sm {
      right: 100%;
    }
    .trf-m-sm {
      transform: translate(-50%, -50%);
    }
    .trf-m-x-sm {
      transform: translateX(-50%);
    }
    .trf-m-y-sm {
      transform: translateY(-50%);
    }
    .pos-tl-sm {
      top: 0;
      left: 0;
      transform: translate(0, 0);
    }
    .pos-tc-sm {
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .pos-tr-sm {
      top: 0;
      left: 100%;
      transform: translate(-100%, 0);
    }
    .pos-ml-sm {
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
    }
    .pos-mc-sm {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .pos-mr-sm {
      top: 50%;
      left: 100%;
      transform: translate(-100%, -50%);
    }
    .pos-bl-sm {
      top: 100%;
      left: 0;
      transform: translate(0, -100%);
    }
    .pos-bc-sm {
      top: 100%;
      left: 50%;
      transform: translate(-50%, -100%);
    }
    .pos-br-sm {
      top: 100%;
      left: 100%;
      transform: translate(-100%, -100%);
    }
    .ratio-1x1-sm {
      aspect-ratio: 1/1;
    }
    .ratio-4x3-sm {
      aspect-ratio: 4/3;
    }
    .ratio-3x4-sm {
      aspect-ratio: 3/4;
    }
    .ratio-3x2-sm {
      aspect-ratio: 3/2;
    }
    .ratio-2x3-sm {
      aspect-ratio: 2/3;
    }
    .ratio-16x9-sm {
      aspect-ratio: 16/9;
    }
    .ratio-9x16-sm {
      aspect-ratio: 9/16;
    }
    .ratio-21x9-sm {
      aspect-ratio: 21/9;
    }
    .rot-45-sm {
      transform: rotate(45deg);
    }
    .rot-90-sm {
      transform: rotate(90deg);
    }
    .rot-135-sm {
      transform: rotate(135deg);
    }
    .rot-180-sm {
      transform: rotate(180deg);
    }
    .rot-225-sm {
      transform: rotate(225deg);
    }
    .rot-270-sm {
      transform: rotate(270deg);
    }
    .rot-315-sm {
      transform: rotate(315deg);
    }
    .visible-sm {
      visibility: visible;
    }
    .invisible-sm {
      visibility: hidden;
    }
    .z-0-sm {
      z-index: 0;
    }
    .z-1-sm {
      z-index: 100;
    }
    .z-2-sm {
      z-index: 200;
    }
    .z-3-sm {
      z-index: 300;
    }
    .z-4-sm {
      z-index: 400;
    }
    .z-5-sm {
      z-index: 500;
    }
    .z-999-sm {
      z-index: 999;
    }
    .z-9999-sm {
      z-index: 9999;
    }
    .z-max-sm {
      z-index: 2147483647;
    }
    .shd-1-sm {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .shd-2-sm {
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    .shd-3-sm {
      box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }
    .shd-n-sm {
      box-shadow: none;
    }
  }
  @supports (container-type: inline-size) {
    @container (max-width: 767px) {
      .fz-1-sm {
        font-size: 2rem;
      }
      .fz-2-sm {
        font-size: 1.75rem;
      }
      .fz-3-sm {
        font-size: 1.5rem;
      }
      .fz-4-sm {
        font-size: 1.25rem;
      }
      .fz-5-sm {
        font-size: 1rem;
      }
      .fz-6-sm {
        font-size: 0.875rem;
      }
      .fz-7-sm {
        font-size: 0.75rem;
      }
      .fs-i-sm {
        font-style: italic;
      }
      .fs-n-sm {
        font-style: normal;
      }
      .fw-l-sm {
        font-weight: 300;
      }
      .fw-lr-sm {
        font-weight: lighter;
      }
      .fw-n-sm {
        font-weight: normal;
      }
      .fw-b-sm {
        font-weight: bold;
      }
      .fw-br-sm {
        font-weight: bolder;
      }
      .lh-1-sm {
        line-height: 1;
      }
      .lh-3-sm {
        line-height: 1.25;
      }
      .lh-4-sm {
        line-height: 1.5;
      }
      .lh-5-sm {
        line-height: 2;
      }
      .tal-l-sm {
        text-align: left;
      }
      .tal-r-sm {
        text-align: right;
      }
      .tal-c-sm {
        text-align: center;
      }
      .td-n-sm {
        text-decoration: none;
      }
      .td-u-sm {
        text-decoration: underline;
      }
      .td-l-sm {
        text-decoration: line-through;
      }
      .tt-u-sm {
        text-transform: uppercase;
      }
      .tt-l-sm {
        text-transform: lowercase;
      }
      .tt-c-sm {
        text-transform: capitalize;
      }
      .tt-n-sm {
        text-transform: none;
      }
      .whs-nw-sm {
        white-space: nowrap;
      }
      .d-n-sm {
        display: none;
      }
      .d-i-sm {
        display: inline;
      }
      .d-b-sm {
        display: block;
      }
      .d-ib-sm {
        display: inline-block;
      }
      .d-g-sm {
        display: grid;
      }
      .d-t-sm {
        display: table;
      }
      .d-it-sm {
        display: inline-table;
      }
      .d-tc-sm {
        display: table-cell;
      }
      .d-trow-sm {
        display: table-row;
      }
      .d-tcol-sm {
        display: table-column;
      }
      .d-f-sm {
        display: flex;
      }
      .d-if-sm {
        display: inline-flex;
      }
      .fx-auto-sm {
        flex: 1 1 auto;
        min-width: 0;
      }
      .fx-n-sm {
        flex: none;
      }
      .fxw-w-sm {
        flex-wrap: wrap;
      }
      .fxw-nw-sm {
        flex-wrap: nowrap;
      }
      .fxw-wr-sm {
        flex-wrap: wrap-reverse;
      }
      .fxd-c-sm {
        flex-direction: column;
      }
      .fxd-r-sm {
        flex-direction: row;
      }
      .fxd-cr-sm {
        flex-direction: column-reverse;
      }
      .fxd-rr-sm {
        flex-direction: row-reverse;
      }
      .fxg-0-sm {
        flex-grow: 0;
      }
      .fxg-1-sm {
        flex-grow: 1;
      }
      .fxs-0-sm {
        flex-shrink: 0;
      }
      .fxs-1-sm {
        flex-shrink: 1;
      }
      .ai-fs-sm {
        align-items: flex-start;
      }
      .ai-fe-sm {
        align-items: flex-end;
      }
      .ai-c-sm {
        align-items: center;
      }
      .ai-b-sm {
        align-items: baseline;
      }
      .ai-s-sm {
        align-items: stretch;
      }
      .as-fs-sm {
        align-self: flex-start;
      }
      .as-fe-sm {
        align-self: flex-end;
      }
      .as-c-sm {
        align-self: center;
      }
      .as-b-sm {
        align-self: baseline;
      }
      .as-s-sm {
        align-self: stretch;
      }
      .jc-fs-sm {
        justify-content: flex-start;
      }
      .jc-fe-sm {
        justify-content: flex-end;
      }
      .jc-c-sm {
        justify-content: center;
      }
      .jc-sb-sm {
        justify-content: space-between;
      }
      .jc-sa-sm {
        justify-content: space-around;
      }
      .ac-fs-sm {
        align-content: flex-start;
      }
      .ac-fe-sm {
        align-content: flex-end;
      }
      .ac-c-sm {
        align-content: center;
      }
      .ac-sb-sm {
        align-content: space-between;
      }
      .ac-sa-sm {
        align-content: space-around;
      }
      .ac-s-sm {
        align-content: stretch;
      }
      .ord-0-sm {
        order: 0;
      }
      .ord-1-sm {
        order: 1;
      }
      .ord-2-sm {
        order: 2;
      }
      .ord-3-sm {
        order: 3;
      }
      .ord-4-sm {
        order: 4;
      }
      .ord-5-sm {
        order: 5;
      }
      .ord-last-sm {
        order: 99999;
      }
      .va-bl-sm {
        vertical-align: baseline;
      }
      .va-t-sm {
        vertical-align: top;
      }
      .va-m-sm {
        vertical-align: middle;
      }
      .va-b-sm {
        vertical-align: bottom;
      }
      .va-tb-sm {
        vertical-align: text-bottom;
      }
      .va-tt-sm {
        vertical-align: text-top;
      }
      .bg-n-sm {
        background: none;
      }
      .bgi-n-sm {
        background-image: none;
      }
      .bg-c-sm {
        background-repeat: no-repeat;
        background-position: center center;
      }
      .bg-t-sm {
        background-repeat: no-repeat;
        background-position: top center;
      }
      .bg-r-sm {
        background-repeat: no-repeat;
        background-position: center right;
      }
      .bg-b-sm {
        background-repeat: no-repeat;
        background-position: bottom center;
      }
      .bg-l-sm {
        background-repeat: no-repeat;
        background-position: center left;
      }
      .bgsz-ct-sm {
        background-size: contain;
      }
      .bgsz-cv-sm {
        background-size: cover;
      }
      .b-a-sm {
        border-style: solid;
        border-width: 1px;
        border-color: var(--c-border);
      }
      .b-t-sm {
        border-top-style: solid;
        border-top-width: 1px;
        border-color: var(--c-border);
      }
      .b-r-sm {
        border-right-style: solid;
        border-right-width: 1px;
        border-color: var(--c-border);
      }
      .b-b-sm {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-color: var(--c-border);
      }
      .b-l-sm {
        border-left-style: solid;
        border-left-width: 1px;
        border-color: var(--c-border);
      }
      .b-n-sm {
        border-style: none;
        border-width: 0;
      }
      .br-0-sm {
        border-radius: 0;
      }
      .br-1-sm {
        border-radius: 0.125rem;
      }
      .br-2-sm {
        border-radius: 0.25rem;
      }
      .br-3-sm {
        border-radius: 0.5rem;
      }
      .br-4-sm {
        border-radius: 1rem;
      }
      .br-100-sm {
        border-radius: 100%;
      }
      .br-pill-sm {
        border-radius: 9999px;
      }
      .br-t-sm {
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
      }
      .br-r-sm {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
      .br-b-sm {
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
      .br-l-sm {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
      }
      .bw-0-sm {
        border-width: 0;
      }
      .bw-1-sm {
        border-width: 0.125rem;
      }
      .bw-2-sm {
        border-width: 0.25rem;
      }
      .bw-3-sm {
        border-width: 0.5rem;
      }
      .bw-4-sm {
        border-width: 1rem;
      }
      .bw-5-sm {
        border-width: 2rem;
      }
      .btw-0-sm {
        border-top-width: 0;
      }
      .brw-0-sm {
        border-right-width: 0;
      }
      .bbw-0-sm {
        border-bottom-width: 0;
      }
      .blw-0-sm {
        border-left-width: 0;
      }
      .bs-dt-sm {
        border-style: dotted;
      }
      .bs-ds-sm {
        border-style: dashed;
      }
      .bs-s-sm {
        border-style: solid;
      }
      .bs-n-sm {
        border-style: none;
      }
      .fl-l-sm {
        float: left;
      }
      .fl-r-sm {
        float: right;
      }
      .fl-n-sm {
        float: none;
      }
      .o-10-sm {
        opacity: 1;
      }
      .o-9-sm {
        opacity: 0.9;
      }
      .o-8-sm {
        opacity: 0.8;
      }
      .o-7-sm {
        opacity: 0.7;
      }
      .o-6-sm {
        opacity: 0.6;
      }
      .o-5-sm {
        opacity: 0.5;
      }
      .o-4-sm {
        opacity: 0.4;
      }
      .o-3-sm {
        opacity: 0.3;
      }
      .o-2-sm {
        opacity: 0.2;
      }
      .o-1-sm {
        opacity: 0.1;
      }
      .o-0-sm {
        opacity: 0;
      }
      .ov-v-sm {
        overflow: visible;
      }
      .ov-h-sm {
        overflow: hidden;
      }
      .ov-s-sm {
        overflow: scroll;
      }
      .ov-a-sm {
        overflow: auto;
      }
      .ovx-v-sm {
        overflow-x: visible;
      }
      .ovx-h-sm {
        overflow-x: hidden;
      }
      .ovx-s-sm {
        overflow-x: scroll;
      }
      .ovx-a-sm {
        overflow-x: auto;
      }
      .ovy-v-sm {
        overflow-y: visible;
      }
      .ovy-h-sm {
        overflow-y: hidden;
      }
      .ovy-s-sm {
        overflow-y: scroll;
      }
      .ovy-a-sm {
        overflow-y: auto;
      }
      .pos-s-sm {
        position: static;
      }
      .pos-r-sm {
        position: relative;
      }
      .pos-a-sm {
        position: absolute;
      }
      .pos-f-sm {
        position: fixed;
      }
      .top-0-sm {
        top: 0;
      }
      .top-50-sm {
        top: 50%;
      }
      .top-100-sm {
        top: 100%;
      }
      .bottom-sm {
        bottom: 0;
      }
      .bottom-50-sm {
        bottom: 50%;
      }
      .bottom-100-sm {
        bottom: 100%;
      }
      .left-0-sm {
        left: 0;
      }
      .left-50-sm {
        left: 50%;
      }
      .left-100-sm {
        left: 100%;
      }
      .right-0-sm {
        right: 0;
      }
      .right-50-sm {
        right: 50%;
      }
      .right-100-sm {
        right: 100%;
      }
      .trf-m-sm {
        transform: translate(-50%, -50%);
      }
      .trf-m-x-sm {
        transform: translateX(-50%);
      }
      .trf-m-y-sm {
        transform: translateY(-50%);
      }
      .pos-tl-sm {
        top: 0;
        left: 0;
        transform: translate(0, 0);
      }
      .pos-tc-sm {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .pos-tr-sm {
        top: 0;
        left: 100%;
        transform: translate(-100%, 0);
      }
      .pos-ml-sm {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
      .pos-mc-sm {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .pos-mr-sm {
        top: 50%;
        left: 100%;
        transform: translate(-100%, -50%);
      }
      .pos-bl-sm {
        top: 100%;
        left: 0;
        transform: translate(0, -100%);
      }
      .pos-bc-sm {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
      }
      .pos-br-sm {
        top: 100%;
        left: 100%;
        transform: translate(-100%, -100%);
      }
      .ratio-1x1-sm {
        aspect-ratio: 1/1;
      }
      .ratio-4x3-sm {
        aspect-ratio: 4/3;
      }
      .ratio-3x4-sm {
        aspect-ratio: 3/4;
      }
      .ratio-3x2-sm {
        aspect-ratio: 3/2;
      }
      .ratio-2x3-sm {
        aspect-ratio: 2/3;
      }
      .ratio-16x9-sm {
        aspect-ratio: 16/9;
      }
      .ratio-9x16-sm {
        aspect-ratio: 9/16;
      }
      .ratio-21x9-sm {
        aspect-ratio: 21/9;
      }
      .rot-45-sm {
        transform: rotate(45deg);
      }
      .rot-90-sm {
        transform: rotate(90deg);
      }
      .rot-135-sm {
        transform: rotate(135deg);
      }
      .rot-180-sm {
        transform: rotate(180deg);
      }
      .rot-225-sm {
        transform: rotate(225deg);
      }
      .rot-270-sm {
        transform: rotate(270deg);
      }
      .rot-315-sm {
        transform: rotate(315deg);
      }
      .visible-sm {
        visibility: visible;
      }
      .invisible-sm {
        visibility: hidden;
      }
      .z-0-sm {
        z-index: 0;
      }
      .z-1-sm {
        z-index: 100;
      }
      .z-2-sm {
        z-index: 200;
      }
      .z-3-sm {
        z-index: 300;
      }
      .z-4-sm {
        z-index: 400;
      }
      .z-5-sm {
        z-index: 500;
      }
      .z-999-sm {
        z-index: 999;
      }
      .z-9999-sm {
        z-index: 9999;
      }
      .z-max-sm {
        z-index: 2147483647;
      }
      .shd-1-sm {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      }
      .shd-2-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      }
      .shd-3-sm {
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
      }
      .shd-n-sm {
        box-shadow: none;
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .fz-1-md {
      font-size: 2rem;
    }
    .fz-2-md {
      font-size: 1.75rem;
    }
    .fz-3-md {
      font-size: 1.5rem;
    }
    .fz-4-md {
      font-size: 1.25rem;
    }
    .fz-5-md {
      font-size: 1rem;
    }
    .fz-6-md {
      font-size: 0.875rem;
    }
    .fz-7-md {
      font-size: 0.75rem;
    }
    .fs-i-md {
      font-style: italic;
    }
    .fs-n-md {
      font-style: normal;
    }
    .fw-l-md {
      font-weight: 300;
    }
    .fw-lr-md {
      font-weight: lighter;
    }
    .fw-n-md {
      font-weight: normal;
    }
    .fw-b-md {
      font-weight: bold;
    }
    .fw-br-md {
      font-weight: bolder;
    }
    .lh-1-md {
      line-height: 1;
    }
    .lh-3-md {
      line-height: 1.25;
    }
    .lh-4-md {
      line-height: 1.5;
    }
    .lh-5-md {
      line-height: 2;
    }
    .tal-l-md {
      text-align: left;
    }
    .tal-r-md {
      text-align: right;
    }
    .tal-c-md {
      text-align: center;
    }
    .td-n-md {
      text-decoration: none;
    }
    .td-u-md {
      text-decoration: underline;
    }
    .td-l-md {
      text-decoration: line-through;
    }
    .tt-u-md {
      text-transform: uppercase;
    }
    .tt-l-md {
      text-transform: lowercase;
    }
    .tt-c-md {
      text-transform: capitalize;
    }
    .tt-n-md {
      text-transform: none;
    }
    .whs-nw-md {
      white-space: nowrap;
    }
    .d-n-md {
      display: none;
    }
    .d-i-md {
      display: inline;
    }
    .d-b-md {
      display: block;
    }
    .d-ib-md {
      display: inline-block;
    }
    .d-g-md {
      display: grid;
    }
    .d-t-md {
      display: table;
    }
    .d-it-md {
      display: inline-table;
    }
    .d-tc-md {
      display: table-cell;
    }
    .d-trow-md {
      display: table-row;
    }
    .d-tcol-md {
      display: table-column;
    }
    .d-f-md {
      display: flex;
    }
    .d-if-md {
      display: inline-flex;
    }
    .fx-auto-md {
      flex: 1 1 auto;
      min-width: 0;
    }
    .fx-n-md {
      flex: none;
    }
    .fxw-w-md {
      flex-wrap: wrap;
    }
    .fxw-nw-md {
      flex-wrap: nowrap;
    }
    .fxw-wr-md {
      flex-wrap: wrap-reverse;
    }
    .fxd-c-md {
      flex-direction: column;
    }
    .fxd-r-md {
      flex-direction: row;
    }
    .fxd-cr-md {
      flex-direction: column-reverse;
    }
    .fxd-rr-md {
      flex-direction: row-reverse;
    }
    .fxg-0-md {
      flex-grow: 0;
    }
    .fxg-1-md {
      flex-grow: 1;
    }
    .fxs-0-md {
      flex-shrink: 0;
    }
    .fxs-1-md {
      flex-shrink: 1;
    }
    .ai-fs-md {
      align-items: flex-start;
    }
    .ai-fe-md {
      align-items: flex-end;
    }
    .ai-c-md {
      align-items: center;
    }
    .ai-b-md {
      align-items: baseline;
    }
    .ai-s-md {
      align-items: stretch;
    }
    .as-fs-md {
      align-self: flex-start;
    }
    .as-fe-md {
      align-self: flex-end;
    }
    .as-c-md {
      align-self: center;
    }
    .as-b-md {
      align-self: baseline;
    }
    .as-s-md {
      align-self: stretch;
    }
    .jc-fs-md {
      justify-content: flex-start;
    }
    .jc-fe-md {
      justify-content: flex-end;
    }
    .jc-c-md {
      justify-content: center;
    }
    .jc-sb-md {
      justify-content: space-between;
    }
    .jc-sa-md {
      justify-content: space-around;
    }
    .ac-fs-md {
      align-content: flex-start;
    }
    .ac-fe-md {
      align-content: flex-end;
    }
    .ac-c-md {
      align-content: center;
    }
    .ac-sb-md {
      align-content: space-between;
    }
    .ac-sa-md {
      align-content: space-around;
    }
    .ac-s-md {
      align-content: stretch;
    }
    .ord-0-md {
      order: 0;
    }
    .ord-1-md {
      order: 1;
    }
    .ord-2-md {
      order: 2;
    }
    .ord-3-md {
      order: 3;
    }
    .ord-4-md {
      order: 4;
    }
    .ord-5-md {
      order: 5;
    }
    .ord-last-md {
      order: 99999;
    }
    .va-bl-md {
      vertical-align: baseline;
    }
    .va-t-md {
      vertical-align: top;
    }
    .va-m-md {
      vertical-align: middle;
    }
    .va-b-md {
      vertical-align: bottom;
    }
    .va-tb-md {
      vertical-align: text-bottom;
    }
    .va-tt-md {
      vertical-align: text-top;
    }
    .bg-n-md {
      background: none;
    }
    .bgi-n-md {
      background-image: none;
    }
    .bg-c-md {
      background-repeat: no-repeat;
      background-position: center center;
    }
    .bg-t-md {
      background-repeat: no-repeat;
      background-position: top center;
    }
    .bg-r-md {
      background-repeat: no-repeat;
      background-position: center right;
    }
    .bg-b-md {
      background-repeat: no-repeat;
      background-position: bottom center;
    }
    .bg-l-md {
      background-repeat: no-repeat;
      background-position: center left;
    }
    .bgsz-ct-md {
      background-size: contain;
    }
    .bgsz-cv-md {
      background-size: cover;
    }
    .b-a-md {
      border-style: solid;
      border-width: 1px;
      border-color: var(--c-border);
    }
    .b-t-md {
      border-top-style: solid;
      border-top-width: 1px;
      border-color: var(--c-border);
    }
    .b-r-md {
      border-right-style: solid;
      border-right-width: 1px;
      border-color: var(--c-border);
    }
    .b-b-md {
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-color: var(--c-border);
    }
    .b-l-md {
      border-left-style: solid;
      border-left-width: 1px;
      border-color: var(--c-border);
    }
    .b-n-md {
      border-style: none;
      border-width: 0;
    }
    .br-0-md {
      border-radius: 0;
    }
    .br-1-md {
      border-radius: 0.125rem;
    }
    .br-2-md {
      border-radius: 0.25rem;
    }
    .br-3-md {
      border-radius: 0.5rem;
    }
    .br-4-md {
      border-radius: 1rem;
    }
    .br-100-md {
      border-radius: 100%;
    }
    .br-pill-md {
      border-radius: 9999px;
    }
    .br-t-md {
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
    }
    .br-r-md {
      border-top-right-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
    .br-b-md {
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
    .br-l-md {
      border-top-left-radius: var(--radius);
      border-bottom-left-radius: var(--radius);
    }
    .bw-0-md {
      border-width: 0;
    }
    .bw-1-md {
      border-width: 0.125rem;
    }
    .bw-2-md {
      border-width: 0.25rem;
    }
    .bw-3-md {
      border-width: 0.5rem;
    }
    .bw-4-md {
      border-width: 1rem;
    }
    .bw-5-md {
      border-width: 2rem;
    }
    .btw-0-md {
      border-top-width: 0;
    }
    .brw-0-md {
      border-right-width: 0;
    }
    .bbw-0-md {
      border-bottom-width: 0;
    }
    .blw-0-md {
      border-left-width: 0;
    }
    .bs-dt-md {
      border-style: dotted;
    }
    .bs-ds-md {
      border-style: dashed;
    }
    .bs-s-md {
      border-style: solid;
    }
    .bs-n-md {
      border-style: none;
    }
    .fl-l-md {
      float: left;
    }
    .fl-r-md {
      float: right;
    }
    .fl-n-md {
      float: none;
    }
    .o-10-md {
      opacity: 1;
    }
    .o-9-md {
      opacity: 0.9;
    }
    .o-8-md {
      opacity: 0.8;
    }
    .o-7-md {
      opacity: 0.7;
    }
    .o-6-md {
      opacity: 0.6;
    }
    .o-5-md {
      opacity: 0.5;
    }
    .o-4-md {
      opacity: 0.4;
    }
    .o-3-md {
      opacity: 0.3;
    }
    .o-2-md {
      opacity: 0.2;
    }
    .o-1-md {
      opacity: 0.1;
    }
    .o-0-md {
      opacity: 0;
    }
    .ov-v-md {
      overflow: visible;
    }
    .ov-h-md {
      overflow: hidden;
    }
    .ov-s-md {
      overflow: scroll;
    }
    .ov-a-md {
      overflow: auto;
    }
    .ovx-v-md {
      overflow-x: visible;
    }
    .ovx-h-md {
      overflow-x: hidden;
    }
    .ovx-s-md {
      overflow-x: scroll;
    }
    .ovx-a-md {
      overflow-x: auto;
    }
    .ovy-v-md {
      overflow-y: visible;
    }
    .ovy-h-md {
      overflow-y: hidden;
    }
    .ovy-s-md {
      overflow-y: scroll;
    }
    .ovy-a-md {
      overflow-y: auto;
    }
    .pos-s-md {
      position: static;
    }
    .pos-r-md {
      position: relative;
    }
    .pos-a-md {
      position: absolute;
    }
    .pos-f-md {
      position: fixed;
    }
    .top-0-md {
      top: 0;
    }
    .top-50-md {
      top: 50%;
    }
    .top-100-md {
      top: 100%;
    }
    .bottom-md {
      bottom: 0;
    }
    .bottom-50-md {
      bottom: 50%;
    }
    .bottom-100-md {
      bottom: 100%;
    }
    .left-0-md {
      left: 0;
    }
    .left-50-md {
      left: 50%;
    }
    .left-100-md {
      left: 100%;
    }
    .right-0-md {
      right: 0;
    }
    .right-50-md {
      right: 50%;
    }
    .right-100-md {
      right: 100%;
    }
    .trf-m-md {
      transform: translate(-50%, -50%);
    }
    .trf-m-x-md {
      transform: translateX(-50%);
    }
    .trf-m-y-md {
      transform: translateY(-50%);
    }
    .pos-tl-md {
      top: 0;
      left: 0;
      transform: translate(0, 0);
    }
    .pos-tc-md {
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .pos-tr-md {
      top: 0;
      left: 100%;
      transform: translate(-100%, 0);
    }
    .pos-ml-md {
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
    }
    .pos-mc-md {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .pos-mr-md {
      top: 50%;
      left: 100%;
      transform: translate(-100%, -50%);
    }
    .pos-bl-md {
      top: 100%;
      left: 0;
      transform: translate(0, -100%);
    }
    .pos-bc-md {
      top: 100%;
      left: 50%;
      transform: translate(-50%, -100%);
    }
    .pos-br-md {
      top: 100%;
      left: 100%;
      transform: translate(-100%, -100%);
    }
    .ratio-1x1-md {
      aspect-ratio: 1/1;
    }
    .ratio-4x3-md {
      aspect-ratio: 4/3;
    }
    .ratio-3x4-md {
      aspect-ratio: 3/4;
    }
    .ratio-3x2-md {
      aspect-ratio: 3/2;
    }
    .ratio-2x3-md {
      aspect-ratio: 2/3;
    }
    .ratio-16x9-md {
      aspect-ratio: 16/9;
    }
    .ratio-9x16-md {
      aspect-ratio: 9/16;
    }
    .ratio-21x9-md {
      aspect-ratio: 21/9;
    }
    .rot-45-md {
      transform: rotate(45deg);
    }
    .rot-90-md {
      transform: rotate(90deg);
    }
    .rot-135-md {
      transform: rotate(135deg);
    }
    .rot-180-md {
      transform: rotate(180deg);
    }
    .rot-225-md {
      transform: rotate(225deg);
    }
    .rot-270-md {
      transform: rotate(270deg);
    }
    .rot-315-md {
      transform: rotate(315deg);
    }
    .visible-md {
      visibility: visible;
    }
    .invisible-md {
      visibility: hidden;
    }
    .z-0-md {
      z-index: 0;
    }
    .z-1-md {
      z-index: 100;
    }
    .z-2-md {
      z-index: 200;
    }
    .z-3-md {
      z-index: 300;
    }
    .z-4-md {
      z-index: 400;
    }
    .z-5-md {
      z-index: 500;
    }
    .z-999-md {
      z-index: 999;
    }
    .z-9999-md {
      z-index: 9999;
    }
    .z-max-md {
      z-index: 2147483647;
    }
    .shd-1-md {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .shd-2-md {
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    .shd-3-md {
      box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }
    .shd-n-md {
      box-shadow: none;
    }
  }
  @supports (container-type: inline-size) {
    @container (min-width: 768px) and (max-width: 991px) {
      .fz-1-md {
        font-size: 2rem;
      }
      .fz-2-md {
        font-size: 1.75rem;
      }
      .fz-3-md {
        font-size: 1.5rem;
      }
      .fz-4-md {
        font-size: 1.25rem;
      }
      .fz-5-md {
        font-size: 1rem;
      }
      .fz-6-md {
        font-size: 0.875rem;
      }
      .fz-7-md {
        font-size: 0.75rem;
      }
      .fs-i-md {
        font-style: italic;
      }
      .fs-n-md {
        font-style: normal;
      }
      .fw-l-md {
        font-weight: 300;
      }
      .fw-lr-md {
        font-weight: lighter;
      }
      .fw-n-md {
        font-weight: normal;
      }
      .fw-b-md {
        font-weight: bold;
      }
      .fw-br-md {
        font-weight: bolder;
      }
      .lh-1-md {
        line-height: 1;
      }
      .lh-3-md {
        line-height: 1.25;
      }
      .lh-4-md {
        line-height: 1.5;
      }
      .lh-5-md {
        line-height: 2;
      }
      .tal-l-md {
        text-align: left;
      }
      .tal-r-md {
        text-align: right;
      }
      .tal-c-md {
        text-align: center;
      }
      .td-n-md {
        text-decoration: none;
      }
      .td-u-md {
        text-decoration: underline;
      }
      .td-l-md {
        text-decoration: line-through;
      }
      .tt-u-md {
        text-transform: uppercase;
      }
      .tt-l-md {
        text-transform: lowercase;
      }
      .tt-c-md {
        text-transform: capitalize;
      }
      .tt-n-md {
        text-transform: none;
      }
      .whs-nw-md {
        white-space: nowrap;
      }
      .d-n-md {
        display: none;
      }
      .d-i-md {
        display: inline;
      }
      .d-b-md {
        display: block;
      }
      .d-ib-md {
        display: inline-block;
      }
      .d-g-md {
        display: grid;
      }
      .d-t-md {
        display: table;
      }
      .d-it-md {
        display: inline-table;
      }
      .d-tc-md {
        display: table-cell;
      }
      .d-trow-md {
        display: table-row;
      }
      .d-tcol-md {
        display: table-column;
      }
      .d-f-md {
        display: flex;
      }
      .d-if-md {
        display: inline-flex;
      }
      .fx-auto-md {
        flex: 1 1 auto;
        min-width: 0;
      }
      .fx-n-md {
        flex: none;
      }
      .fxw-w-md {
        flex-wrap: wrap;
      }
      .fxw-nw-md {
        flex-wrap: nowrap;
      }
      .fxw-wr-md {
        flex-wrap: wrap-reverse;
      }
      .fxd-c-md {
        flex-direction: column;
      }
      .fxd-r-md {
        flex-direction: row;
      }
      .fxd-cr-md {
        flex-direction: column-reverse;
      }
      .fxd-rr-md {
        flex-direction: row-reverse;
      }
      .fxg-0-md {
        flex-grow: 0;
      }
      .fxg-1-md {
        flex-grow: 1;
      }
      .fxs-0-md {
        flex-shrink: 0;
      }
      .fxs-1-md {
        flex-shrink: 1;
      }
      .ai-fs-md {
        align-items: flex-start;
      }
      .ai-fe-md {
        align-items: flex-end;
      }
      .ai-c-md {
        align-items: center;
      }
      .ai-b-md {
        align-items: baseline;
      }
      .ai-s-md {
        align-items: stretch;
      }
      .as-fs-md {
        align-self: flex-start;
      }
      .as-fe-md {
        align-self: flex-end;
      }
      .as-c-md {
        align-self: center;
      }
      .as-b-md {
        align-self: baseline;
      }
      .as-s-md {
        align-self: stretch;
      }
      .jc-fs-md {
        justify-content: flex-start;
      }
      .jc-fe-md {
        justify-content: flex-end;
      }
      .jc-c-md {
        justify-content: center;
      }
      .jc-sb-md {
        justify-content: space-between;
      }
      .jc-sa-md {
        justify-content: space-around;
      }
      .ac-fs-md {
        align-content: flex-start;
      }
      .ac-fe-md {
        align-content: flex-end;
      }
      .ac-c-md {
        align-content: center;
      }
      .ac-sb-md {
        align-content: space-between;
      }
      .ac-sa-md {
        align-content: space-around;
      }
      .ac-s-md {
        align-content: stretch;
      }
      .ord-0-md {
        order: 0;
      }
      .ord-1-md {
        order: 1;
      }
      .ord-2-md {
        order: 2;
      }
      .ord-3-md {
        order: 3;
      }
      .ord-4-md {
        order: 4;
      }
      .ord-5-md {
        order: 5;
      }
      .ord-last-md {
        order: 99999;
      }
      .va-bl-md {
        vertical-align: baseline;
      }
      .va-t-md {
        vertical-align: top;
      }
      .va-m-md {
        vertical-align: middle;
      }
      .va-b-md {
        vertical-align: bottom;
      }
      .va-tb-md {
        vertical-align: text-bottom;
      }
      .va-tt-md {
        vertical-align: text-top;
      }
      .bg-n-md {
        background: none;
      }
      .bgi-n-md {
        background-image: none;
      }
      .bg-c-md {
        background-repeat: no-repeat;
        background-position: center center;
      }
      .bg-t-md {
        background-repeat: no-repeat;
        background-position: top center;
      }
      .bg-r-md {
        background-repeat: no-repeat;
        background-position: center right;
      }
      .bg-b-md {
        background-repeat: no-repeat;
        background-position: bottom center;
      }
      .bg-l-md {
        background-repeat: no-repeat;
        background-position: center left;
      }
      .bgsz-ct-md {
        background-size: contain;
      }
      .bgsz-cv-md {
        background-size: cover;
      }
      .b-a-md {
        border-style: solid;
        border-width: 1px;
        border-color: var(--c-border);
      }
      .b-t-md {
        border-top-style: solid;
        border-top-width: 1px;
        border-color: var(--c-border);
      }
      .b-r-md {
        border-right-style: solid;
        border-right-width: 1px;
        border-color: var(--c-border);
      }
      .b-b-md {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-color: var(--c-border);
      }
      .b-l-md {
        border-left-style: solid;
        border-left-width: 1px;
        border-color: var(--c-border);
      }
      .b-n-md {
        border-style: none;
        border-width: 0;
      }
      .br-0-md {
        border-radius: 0;
      }
      .br-1-md {
        border-radius: 0.125rem;
      }
      .br-2-md {
        border-radius: 0.25rem;
      }
      .br-3-md {
        border-radius: 0.5rem;
      }
      .br-4-md {
        border-radius: 1rem;
      }
      .br-100-md {
        border-radius: 100%;
      }
      .br-pill-md {
        border-radius: 9999px;
      }
      .br-t-md {
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
      }
      .br-r-md {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
      .br-b-md {
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
      .br-l-md {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
      }
      .bw-0-md {
        border-width: 0;
      }
      .bw-1-md {
        border-width: 0.125rem;
      }
      .bw-2-md {
        border-width: 0.25rem;
      }
      .bw-3-md {
        border-width: 0.5rem;
      }
      .bw-4-md {
        border-width: 1rem;
      }
      .bw-5-md {
        border-width: 2rem;
      }
      .btw-0-md {
        border-top-width: 0;
      }
      .brw-0-md {
        border-right-width: 0;
      }
      .bbw-0-md {
        border-bottom-width: 0;
      }
      .blw-0-md {
        border-left-width: 0;
      }
      .bs-dt-md {
        border-style: dotted;
      }
      .bs-ds-md {
        border-style: dashed;
      }
      .bs-s-md {
        border-style: solid;
      }
      .bs-n-md {
        border-style: none;
      }
      .fl-l-md {
        float: left;
      }
      .fl-r-md {
        float: right;
      }
      .fl-n-md {
        float: none;
      }
      .o-10-md {
        opacity: 1;
      }
      .o-9-md {
        opacity: 0.9;
      }
      .o-8-md {
        opacity: 0.8;
      }
      .o-7-md {
        opacity: 0.7;
      }
      .o-6-md {
        opacity: 0.6;
      }
      .o-5-md {
        opacity: 0.5;
      }
      .o-4-md {
        opacity: 0.4;
      }
      .o-3-md {
        opacity: 0.3;
      }
      .o-2-md {
        opacity: 0.2;
      }
      .o-1-md {
        opacity: 0.1;
      }
      .o-0-md {
        opacity: 0;
      }
      .ov-v-md {
        overflow: visible;
      }
      .ov-h-md {
        overflow: hidden;
      }
      .ov-s-md {
        overflow: scroll;
      }
      .ov-a-md {
        overflow: auto;
      }
      .ovx-v-md {
        overflow-x: visible;
      }
      .ovx-h-md {
        overflow-x: hidden;
      }
      .ovx-s-md {
        overflow-x: scroll;
      }
      .ovx-a-md {
        overflow-x: auto;
      }
      .ovy-v-md {
        overflow-y: visible;
      }
      .ovy-h-md {
        overflow-y: hidden;
      }
      .ovy-s-md {
        overflow-y: scroll;
      }
      .ovy-a-md {
        overflow-y: auto;
      }
      .pos-s-md {
        position: static;
      }
      .pos-r-md {
        position: relative;
      }
      .pos-a-md {
        position: absolute;
      }
      .pos-f-md {
        position: fixed;
      }
      .top-0-md {
        top: 0;
      }
      .top-50-md {
        top: 50%;
      }
      .top-100-md {
        top: 100%;
      }
      .bottom-md {
        bottom: 0;
      }
      .bottom-50-md {
        bottom: 50%;
      }
      .bottom-100-md {
        bottom: 100%;
      }
      .left-0-md {
        left: 0;
      }
      .left-50-md {
        left: 50%;
      }
      .left-100-md {
        left: 100%;
      }
      .right-0-md {
        right: 0;
      }
      .right-50-md {
        right: 50%;
      }
      .right-100-md {
        right: 100%;
      }
      .trf-m-md {
        transform: translate(-50%, -50%);
      }
      .trf-m-x-md {
        transform: translateX(-50%);
      }
      .trf-m-y-md {
        transform: translateY(-50%);
      }
      .pos-tl-md {
        top: 0;
        left: 0;
        transform: translate(0, 0);
      }
      .pos-tc-md {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .pos-tr-md {
        top: 0;
        left: 100%;
        transform: translate(-100%, 0);
      }
      .pos-ml-md {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
      .pos-mc-md {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .pos-mr-md {
        top: 50%;
        left: 100%;
        transform: translate(-100%, -50%);
      }
      .pos-bl-md {
        top: 100%;
        left: 0;
        transform: translate(0, -100%);
      }
      .pos-bc-md {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
      }
      .pos-br-md {
        top: 100%;
        left: 100%;
        transform: translate(-100%, -100%);
      }
      .ratio-1x1-md {
        aspect-ratio: 1/1;
      }
      .ratio-4x3-md {
        aspect-ratio: 4/3;
      }
      .ratio-3x4-md {
        aspect-ratio: 3/4;
      }
      .ratio-3x2-md {
        aspect-ratio: 3/2;
      }
      .ratio-2x3-md {
        aspect-ratio: 2/3;
      }
      .ratio-16x9-md {
        aspect-ratio: 16/9;
      }
      .ratio-9x16-md {
        aspect-ratio: 9/16;
      }
      .ratio-21x9-md {
        aspect-ratio: 21/9;
      }
      .rot-45-md {
        transform: rotate(45deg);
      }
      .rot-90-md {
        transform: rotate(90deg);
      }
      .rot-135-md {
        transform: rotate(135deg);
      }
      .rot-180-md {
        transform: rotate(180deg);
      }
      .rot-225-md {
        transform: rotate(225deg);
      }
      .rot-270-md {
        transform: rotate(270deg);
      }
      .rot-315-md {
        transform: rotate(315deg);
      }
      .visible-md {
        visibility: visible;
      }
      .invisible-md {
        visibility: hidden;
      }
      .z-0-md {
        z-index: 0;
      }
      .z-1-md {
        z-index: 100;
      }
      .z-2-md {
        z-index: 200;
      }
      .z-3-md {
        z-index: 300;
      }
      .z-4-md {
        z-index: 400;
      }
      .z-5-md {
        z-index: 500;
      }
      .z-999-md {
        z-index: 999;
      }
      .z-9999-md {
        z-index: 9999;
      }
      .z-max-md {
        z-index: 2147483647;
      }
      .shd-1-md {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      }
      .shd-2-md {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
      }
      .shd-3-md {
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
      }
      .shd-n-md {
        box-shadow: none;
      }
    }
  }
  .gtc-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .gtc-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .gtc-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .gtc-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .gtc-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gtc-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .gtc-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .gtc-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .gtc-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .gtr-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .gtr-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .gtr-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .gtr-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .gtr-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .gtr-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .gtr-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .gtr-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .gtr-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .gtr-a1 {
    grid-template-rows: auto 1fr;
  }
  .gtr-a1a {
    grid-template-rows: auto 1fr auto;
  }
  .gtr-1a1 {
    grid-template-rows: 1fr auto 1fr;
  }
  .gtr-a2a {
    grid-template-rows: auto 1fr 1fr auto;
  }
  .gtr-2a1 {
    grid-template-rows: 1fr 1fr auto;
  }
  .gtr-1a2 {
    grid-template-rows: 1fr auto 1fr 1fr;
  }
  .gtr-a1a1 {
    grid-template-rows: auto 1fr auto 1fr;
  }
  .gtr-a1a1a {
    grid-template-rows: auto 1fr auto 1fr auto;
  }
  .gtc {
    grid-template-columns: var(--gtc);
  }
  .gtr {
    grid-template-rows: var(--gtr);
  }
  .gtc-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .gtc-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .gtc-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .gtc-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .gtc-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gtc-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .gtc-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .gtc-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .gtc-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .gtr-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .gtr-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .gtr-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .gtr-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .gtr-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .gtr-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .gtr-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .gtr-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .gtr-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .gtr-a1 {
    grid-template-rows: auto 1fr;
  }
  .gtr-a1a {
    grid-template-rows: auto 1fr auto;
  }
  .gtr-1a1 {
    grid-template-rows: 1fr auto 1fr;
  }
  .gtr-a2a {
    grid-template-rows: auto 1fr 1fr auto;
  }
  .gtr-2a1 {
    grid-template-rows: 1fr 1fr auto;
  }
  .gtr-1a2 {
    grid-template-rows: 1fr auto 1fr 1fr;
  }
  .gtr-a1a1 {
    grid-template-rows: auto 1fr auto 1fr;
  }
  .gtr-a1a1a {
    grid-template-rows: auto 1fr auto 1fr auto;
  }
  .gtc {
    grid-template-columns: var(--gtc);
  }
  .gtr {
    grid-template-rows: var(--gtr);
  }
  @supports (container-type: inline-size) {
    @container (min-width: 992px) {
      .gtc-1 {
        grid-template-columns: repeat(1, 1fr);
      }
      .gtc-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .gtc-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .gtc-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .gtc-5 {
        grid-template-columns: repeat(5, 1fr);
      }
      .gtc-6 {
        grid-template-columns: repeat(6, 1fr);
      }
      .gtc-7 {
        grid-template-columns: repeat(7, 1fr);
      }
      .gtc-8 {
        grid-template-columns: repeat(8, 1fr);
      }
      .gtc-9 {
        grid-template-columns: repeat(9, 1fr);
      }
      .gtr-1 {
        grid-template-rows: repeat(1, 1fr);
      }
      .gtr-2 {
        grid-template-rows: repeat(2, 1fr);
      }
      .gtr-3 {
        grid-template-rows: repeat(3, 1fr);
      }
      .gtr-4 {
        grid-template-rows: repeat(4, 1fr);
      }
      .gtr-5 {
        grid-template-rows: repeat(5, 1fr);
      }
      .gtr-6 {
        grid-template-rows: repeat(6, 1fr);
      }
      .gtr-7 {
        grid-template-rows: repeat(7, 1fr);
      }
      .gtr-8 {
        grid-template-rows: repeat(8, 1fr);
      }
      .gtr-9 {
        grid-template-rows: repeat(9, 1fr);
      }
      .gtr-a1 {
        grid-template-rows: auto 1fr;
      }
      .gtr-a1a {
        grid-template-rows: auto 1fr auto;
      }
      .gtr-1a1 {
        grid-template-rows: 1fr auto 1fr;
      }
      .gtr-a2a {
        grid-template-rows: auto 1fr 1fr auto;
      }
      .gtr-2a1 {
        grid-template-rows: 1fr 1fr auto;
      }
      .gtr-1a2 {
        grid-template-rows: 1fr auto 1fr 1fr;
      }
      .gtr-a1a1 {
        grid-template-rows: auto 1fr auto 1fr;
      }
      .gtr-a1a1a {
        grid-template-rows: auto 1fr auto 1fr auto;
      }
      .gtc {
        grid-template-columns: var(--gtc);
      }
      .gtr {
        grid-template-rows: var(--gtr);
      }
    }
  }
  @media screen and (max-width: 767px) {
    .gtc-1-sm {
      grid-template-columns: repeat(1, 1fr);
    }
    .gtc-2-sm {
      grid-template-columns: repeat(2, 1fr);
    }
    .gtc-3-sm {
      grid-template-columns: repeat(3, 1fr);
    }
    .gtc-4-sm {
      grid-template-columns: repeat(4, 1fr);
    }
    .gtc-5-sm {
      grid-template-columns: repeat(5, 1fr);
    }
    .gtc-6-sm {
      grid-template-columns: repeat(6, 1fr);
    }
    .gtc-7-sm {
      grid-template-columns: repeat(7, 1fr);
    }
    .gtc-8-sm {
      grid-template-columns: repeat(8, 1fr);
    }
    .gtc-9-sm {
      grid-template-columns: repeat(9, 1fr);
    }
    .gtr-1-sm {
      grid-template-rows: repeat(1, 1fr);
    }
    .gtr-2-sm {
      grid-template-rows: repeat(2, 1fr);
    }
    .gtr-3-sm {
      grid-template-rows: repeat(3, 1fr);
    }
    .gtr-4-sm {
      grid-template-rows: repeat(4, 1fr);
    }
    .gtr-5-sm {
      grid-template-rows: repeat(5, 1fr);
    }
    .gtr-6-sm {
      grid-template-rows: repeat(6, 1fr);
    }
    .gtr-7-sm {
      grid-template-rows: repeat(7, 1fr);
    }
    .gtr-8-sm {
      grid-template-rows: repeat(8, 1fr);
    }
    .gtr-9-sm {
      grid-template-rows: repeat(9, 1fr);
    }
    .gtr-a1-sm {
      grid-template-rows: auto 1fr;
    }
    .gtr-a1a-sm {
      grid-template-rows: auto 1fr auto;
    }
    .gtr-1a1-sm {
      grid-template-rows: 1fr auto 1fr;
    }
    .gtr-a2a-sm {
      grid-template-rows: auto 1fr 1fr auto;
    }
    .gtr-2a1-sm {
      grid-template-rows: 1fr 1fr auto;
    }
    .gtr-1a2-sm {
      grid-template-rows: 1fr auto 1fr 1fr;
    }
    .gtr-a1a1-sm {
      grid-template-rows: auto 1fr auto 1fr;
    }
    .gtr-a1a1a-sm {
      grid-template-rows: auto 1fr auto 1fr auto;
    }
    .gtc-sm {
      grid-template-columns: var(--gtc-sm);
    }
    .gtr-sm {
      grid-template-rows: var(--gtr-sm);
    }
  }
  @supports (container-type: inline-size) {
    @container (max-width: 767px) {
      .gtc-1-sm {
        grid-template-columns: repeat(1, 1fr);
      }
      .gtc-2-sm {
        grid-template-columns: repeat(2, 1fr);
      }
      .gtc-3-sm {
        grid-template-columns: repeat(3, 1fr);
      }
      .gtc-4-sm {
        grid-template-columns: repeat(4, 1fr);
      }
      .gtc-5-sm {
        grid-template-columns: repeat(5, 1fr);
      }
      .gtc-6-sm {
        grid-template-columns: repeat(6, 1fr);
      }
      .gtc-7-sm {
        grid-template-columns: repeat(7, 1fr);
      }
      .gtc-8-sm {
        grid-template-columns: repeat(8, 1fr);
      }
      .gtc-9-sm {
        grid-template-columns: repeat(9, 1fr);
      }
      .gtr-1-sm {
        grid-template-rows: repeat(1, 1fr);
      }
      .gtr-2-sm {
        grid-template-rows: repeat(2, 1fr);
      }
      .gtr-3-sm {
        grid-template-rows: repeat(3, 1fr);
      }
      .gtr-4-sm {
        grid-template-rows: repeat(4, 1fr);
      }
      .gtr-5-sm {
        grid-template-rows: repeat(5, 1fr);
      }
      .gtr-6-sm {
        grid-template-rows: repeat(6, 1fr);
      }
      .gtr-7-sm {
        grid-template-rows: repeat(7, 1fr);
      }
      .gtr-8-sm {
        grid-template-rows: repeat(8, 1fr);
      }
      .gtr-9-sm {
        grid-template-rows: repeat(9, 1fr);
      }
      .gtr-a1-sm {
        grid-template-rows: auto 1fr;
      }
      .gtr-a1a-sm {
        grid-template-rows: auto 1fr auto;
      }
      .gtr-1a1-sm {
        grid-template-rows: 1fr auto 1fr;
      }
      .gtr-a2a-sm {
        grid-template-rows: auto 1fr 1fr auto;
      }
      .gtr-2a1-sm {
        grid-template-rows: 1fr 1fr auto;
      }
      .gtr-1a2-sm {
        grid-template-rows: 1fr auto 1fr 1fr;
      }
      .gtr-a1a1-sm {
        grid-template-rows: auto 1fr auto 1fr;
      }
      .gtr-a1a1a-sm {
        grid-template-rows: auto 1fr auto 1fr auto;
      }
      .gtc-sm {
        grid-template-columns: var(--gtc-sm);
      }
      .gtr-sm {
        grid-template-rows: var(--gtr-sm);
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .gtc-1-md {
      grid-template-columns: repeat(1, 1fr);
    }
    .gtc-2-md {
      grid-template-columns: repeat(2, 1fr);
    }
    .gtc-3-md {
      grid-template-columns: repeat(3, 1fr);
    }
    .gtc-4-md {
      grid-template-columns: repeat(4, 1fr);
    }
    .gtc-5-md {
      grid-template-columns: repeat(5, 1fr);
    }
    .gtc-6-md {
      grid-template-columns: repeat(6, 1fr);
    }
    .gtc-7-md {
      grid-template-columns: repeat(7, 1fr);
    }
    .gtc-8-md {
      grid-template-columns: repeat(8, 1fr);
    }
    .gtc-9-md {
      grid-template-columns: repeat(9, 1fr);
    }
    .gtr-1-md {
      grid-template-rows: repeat(1, 1fr);
    }
    .gtr-2-md {
      grid-template-rows: repeat(2, 1fr);
    }
    .gtr-3-md {
      grid-template-rows: repeat(3, 1fr);
    }
    .gtr-4-md {
      grid-template-rows: repeat(4, 1fr);
    }
    .gtr-5-md {
      grid-template-rows: repeat(5, 1fr);
    }
    .gtr-6-md {
      grid-template-rows: repeat(6, 1fr);
    }
    .gtr-7-md {
      grid-template-rows: repeat(7, 1fr);
    }
    .gtr-8-md {
      grid-template-rows: repeat(8, 1fr);
    }
    .gtr-9-md {
      grid-template-rows: repeat(9, 1fr);
    }
    .gtr-a1-md {
      grid-template-rows: auto 1fr;
    }
    .gtr-a1a-md {
      grid-template-rows: auto 1fr auto;
    }
    .gtr-1a1-md {
      grid-template-rows: 1fr auto 1fr;
    }
    .gtr-a2a-md {
      grid-template-rows: auto 1fr 1fr auto;
    }
    .gtr-2a1-md {
      grid-template-rows: 1fr 1fr auto;
    }
    .gtr-1a2-md {
      grid-template-rows: 1fr auto 1fr 1fr;
    }
    .gtr-a1a1-md {
      grid-template-rows: auto 1fr auto 1fr;
    }
    .gtr-a1a1a-md {
      grid-template-rows: auto 1fr auto 1fr auto;
    }
    .gtc-md {
      grid-template-columns: var(--gtc-md);
    }
    .gtr-md {
      grid-template-rows: var(--gtr-md);
    }
  }
  @supports (container-type: inline-size) {
    @container (min-width: 768px) and (max-width: 991px) {
      .gtc-1-md {
        grid-template-columns: repeat(1, 1fr);
      }
      .gtc-2-md {
        grid-template-columns: repeat(2, 1fr);
      }
      .gtc-3-md {
        grid-template-columns: repeat(3, 1fr);
      }
      .gtc-4-md {
        grid-template-columns: repeat(4, 1fr);
      }
      .gtc-5-md {
        grid-template-columns: repeat(5, 1fr);
      }
      .gtc-6-md {
        grid-template-columns: repeat(6, 1fr);
      }
      .gtc-7-md {
        grid-template-columns: repeat(7, 1fr);
      }
      .gtc-8-md {
        grid-template-columns: repeat(8, 1fr);
      }
      .gtc-9-md {
        grid-template-columns: repeat(9, 1fr);
      }
      .gtr-1-md {
        grid-template-rows: repeat(1, 1fr);
      }
      .gtr-2-md {
        grid-template-rows: repeat(2, 1fr);
      }
      .gtr-3-md {
        grid-template-rows: repeat(3, 1fr);
      }
      .gtr-4-md {
        grid-template-rows: repeat(4, 1fr);
      }
      .gtr-5-md {
        grid-template-rows: repeat(5, 1fr);
      }
      .gtr-6-md {
        grid-template-rows: repeat(6, 1fr);
      }
      .gtr-7-md {
        grid-template-rows: repeat(7, 1fr);
      }
      .gtr-8-md {
        grid-template-rows: repeat(8, 1fr);
      }
      .gtr-9-md {
        grid-template-rows: repeat(9, 1fr);
      }
      .gtr-a1-md {
        grid-template-rows: auto 1fr;
      }
      .gtr-a1a-md {
        grid-template-rows: auto 1fr auto;
      }
      .gtr-1a1-md {
        grid-template-rows: 1fr auto 1fr;
      }
      .gtr-a2a-md {
        grid-template-rows: auto 1fr 1fr auto;
      }
      .gtr-2a1-md {
        grid-template-rows: 1fr 1fr auto;
      }
      .gtr-1a2-md {
        grid-template-rows: 1fr auto 1fr 1fr;
      }
      .gtr-a1a1-md {
        grid-template-rows: auto 1fr auto 1fr;
      }
      .gtr-a1a1a-md {
        grid-template-rows: auto 1fr auto 1fr auto;
      }
      .gtc-md {
        grid-template-columns: var(--gtc-md);
      }
      .gtr-md {
        grid-template-rows: var(--gtr-md);
      }
    }
  }
}
@layer changes {}
@layer core, components, utilities, changes;

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