@charset "UTF-8";
/*
 *	SIMAI Framework
 *	https://simai.io
 *
 *	Author: Rim Zabarov
 *	Copyright (c) 2008-2026 Rim Zabarov
 *	Released under the Apache License, Version 2.0.
 */
@layer sf.reset, sf.tokens, sf.base, sf.utilities, sf.components, sf.overrides, sf.states;
@layer sf.base {
  /* Верхние ступени подобраны под лестницу отступов: угол ступени не превышает
     отступ той же ступени, поэтому «p-N radius-N» читается как одно решение, а
     не как две подогнанные величины. Прежние 20/24 и 36/48 разгонялись вдвое за
     шаг, тогда как отступы росли ровно. */
  :root {
    /* Нулевая ступень: класс radius-0 просил её с самого начала. */
    --sf-radius-0: var(--sf-a0);
    --sf-radius-1\/3: 0.125rem;
    --sf-radius-1\/3: var(--sf-a2);
    --sf-radius-1\/2: 0.25rem;
    --sf-radius-1\/2: var(--sf-a4);
    --sf-radius-1: var(--sf-a8);
    --sf-radius-2: var(--sf-b2);
    --sf-radius-3: var(--sf-b6);
    --sf-radius-4: var(--sf-c2);
    --sf-radius-circle: 1000px;
  }
  @media (min-width: 60rem) {
    :root {
      --sf-radius-0: var(--sf-a0);
      --sf-radius-1\/3: 0.125rem;
      --sf-radius-1\/3: var(--sf-a2);
      --sf-radius-1\/2: 0.25rem;
      --sf-radius-1\/2: var(--sf-a4);
      --sf-radius-1: var(--sf-a8);
      --sf-radius-2: var(--sf-b6);
      --sf-radius-3: var(--sf-c2);
      --sf-radius-4: var(--sf-c6);
      --sf-radius-circle: 1000px;
    }
  }
}
@layer sf.base {
  :root, ::after, ::before {
    --sf-radius-square: 0;
    --sf-radius-rounded: 1000px;
  }
}
@layer sf.base {
  :root {
    --sf-focus-outline-width: calc(var(--sf-px) * 2);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-focus-outline-width: calc(var(--sf-px) * 2);
    }
  }
}
@layer sf.base {
  :root {
    --sf-border--width: 0;
    --sf-border--style: solid;
    --sf-border--color: var(--sf-transparent);
    border: var(--sf-border--width) var(--sf-border--style) var(--sf-border--color);
    border-color: var(--sf-outline-variant);
    --sf-radius--ui: var(--sf-radius-1\/2);
    --sf-radius--surface: var(--sf-radius-1);
    --sf-focus--color: var(--sf-focus);
    --sf-focus--offset: var(--sf-px);
    --sf-focus--style: solid;
    --sf-focus--width: var(--sf-focus-outline-width);
    --sf-ui-focus-inset: inset 0 0 0 var(--sf-focus-outline-width) var(--sf-focus);
  }
  .focus-visible {
    outline-color: var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    outline-style: var(--sf-focus--style);
    outline-width: var(--sf-focus--width);
  }
  :focus-visible {
    outline-color: var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    outline-style: var(--sf-focus--style);
    outline-width: var(--sf-focus--width);
  }
  .border {
    border: 1px var(--sf-outline-variant) solid;
    border: var(--sf-px) var(--sf-outline-variant) solid;
  }
  /* One meaning for the name: the border-style utility's, border-style: none.
     Core drew a transparent 1px border under the same class, so which one a page
     got depended on whether the utility sheet had loaded yet. */
  .border-none {
    border-style: none;
  }
  .divider > :not([hidden]) ~ :not([hidden]) {
    border: 1px var(--sf-outline-variant) solid;
    border: var(--sf-px) var(--sf-outline-variant) solid;
  }
  .divider-none > :not([hidden]) ~ :not([hidden]) {
    border-width: 0;
    border-width: var(--sf-0);
  }
  .outline {
    outline: 1px var(--sf-outline-variant) solid;
    outline: var(--sf-px) var(--sf-outline-variant) solid;
  }
  .outline-none {
    outline-width: 0;
    outline-width: var(--sf-0);
  }
  @media (min-width: 32rem) {
    .sm\:border {
      border: 1px var(--sf-outline-variant) solid;
      border: var(--sf-px) var(--sf-outline-variant) solid;
    }
    .sm\:border-none {
      border-style: none;
    }
  }
  @media (min-width: 44rem) {
    .md\:border {
      border: 1px var(--sf-outline-variant) solid;
      border: var(--sf-px) var(--sf-outline-variant) solid;
    }
    .md\:border-none {
      border-style: none;
    }
  }
  @media (min-width: 60rem) {
    .lg\:border {
      border: 1px var(--sf-outline-variant) solid;
      border: var(--sf-px) var(--sf-outline-variant) solid;
    }
    .lg\:border-none {
      border-style: none;
    }
  }
  @media (min-width: 72rem) {
    .xl\:border {
      border: 1px var(--sf-outline-variant) solid;
      border: var(--sf-px) var(--sf-outline-variant) solid;
    }
    .xl\:border-none {
      border-style: none;
    }
  }
  .hover\:border:hover {
    border: 1px var(--sf-outline-variant) solid;
    border: var(--sf-px) var(--sf-outline-variant) solid;
  }
  .hover\:border-none:hover {
    border-style: none;
  }
}
@layer sf.base {
  /* The theme classes carry nothing but the scheme, because that is what
     light-dark() reads to choose a branch. Everything else is declared once
     below, with its light value and its dark value side by side, so the two
     cannot drift apart. A project overrides a primitive or a semantic token
     exactly as before: the values here are var() references, resolved after the
     branch is chosen, and a per-theme override still wins by being more
     specific. */
  .theme-light {
    color-scheme: light;
  }
  .theme-dark {
    color-scheme: dark;
  }
  /* An effect area or window card takes the theme its effect is drawn in
     (SF.Effects, area-takes-the-drawn-theme). The class changes the tokens,
     but the text keeps the colour it inherited from the page, so a light page
     left dark text over a dark scene; the area takes its theme's ink. In
     sf.base, so a colour utility on the area still wins. */
  .sf-effect-area.theme-dark {
    color: var(--sf-on-surface);
  }
  .sf-effect-area.theme-light {
    color: var(--sf-on-surface);
  }
  .theme-light,
  .theme-dark {
    --sf-neutral: light-dark(var(--sf-neutral-40), var(--sf-neutral-80));
    --sf-primary: light-dark(var(--sf-primary-40), var(--sf-primary-80));
    --sf-secondary: light-dark(var(--sf-secondary-40), var(--sf-secondary-80));
    --sf-tertiary: light-dark(var(--sf-tertiary-40), var(--sf-tertiary-80));
    --sf-success: light-dark(var(--sf-success-40), var(--sf-success-80));
    --sf-success-hover: light-dark(var(--sf-success-35), var(--sf-success-85));
    --sf-success-active: light-dark(var(--sf-success-30), var(--sf-success-90));
    --sf-success-container: light-dark(var(--sf-success-50--alfa-12), var(--sf-success-50--alfa-24));
    --sf-success-container-hover: light-dark(var(--sf-success-50--alfa-16), var(--sf-success-50--alfa-28));
    --sf-success-container-active: light-dark(var(--sf-success-50--alfa-20), var(--sf-success-50--alfa-32));
    --sf-success-transparent-hover: light-dark(var(--sf-success-50--alfa-4), var(--sf-success-90--alfa-4));
    --sf-success-transparent-select: light-dark(var(--sf-success-50--alfa-8), var(--sf-success-90--alfa-8));
    --sf-success-transparent-active: light-dark(var(--sf-success-50--alfa-12), var(--sf-success-90--alfa-12));
    --sf-success-transparent-overlay: light-dark(var(--sf-success-50--alfa-24), var(--sf-success-90--alfa-24));
    --sf-on-success: light-dark(var(--sf-white), var(--sf-success-20));
    --sf-on-success-container: light-dark(var(--sf-success-10), var(--sf-success-90));
    --sf-on-success-container-graphic: light-dark(var(--sf-success-50), var(--sf-success-60));
    --sf-outline-success: light-dark(var(--sf-success-50), var(--sf-success-60));
    --sf-warning: light-dark(var(--sf-warning-40), var(--sf-warning-80));
    --sf-error: light-dark(var(--sf-error-40), var(--sf-error-80));
    --sf-error-hover: light-dark(var(--sf-error-35), var(--sf-error-85));
    --sf-error-active: light-dark(var(--sf-error-30), var(--sf-error-90));
    --sf-error-container: light-dark(var(--sf-error-50--alfa-12), var(--sf-error-50--alfa-24));
    --sf-error-container-hover: light-dark(var(--sf-error-50--alfa-16), var(--sf-error-50--alfa-28));
    --sf-error-container-active: light-dark(var(--sf-error-50--alfa-20), var(--sf-error-50--alfa-32));
    --sf-error-transparent-hover: light-dark(var(--sf-error-50--alfa-4), var(--sf-error-90--alfa-4));
    --sf-error-transparent-select: light-dark(var(--sf-error-50--alfa-8), var(--sf-error-90--alfa-8));
    --sf-error-transparent-active: light-dark(var(--sf-error-50--alfa-12), var(--sf-error-90--alfa-12));
    --sf-error-transparent-overlay: light-dark(var(--sf-error-50--alfa-24), var(--sf-error-90--alfa-24));
    --sf-on-error: light-dark(var(--sf-white), var(--sf-error-20));
    --sf-on-error-container: light-dark(var(--sf-error-10), var(--sf-error-90));
    --sf-on-error-container-graphic: light-dark(var(--sf-error-50), var(--sf-error-60));
    --sf-outline-error: light-dark(var(--sf-error-50), var(--sf-error-60));
    --sf-warning-hover: light-dark(var(--sf-warning-35), var(--sf-warning-85));
    --sf-warning-active: light-dark(var(--sf-warning-30), var(--sf-warning-90));
    --sf-warning-container: light-dark(var(--sf-warning-50--alfa-12), var(--sf-warning-50--alfa-24));
    --sf-warning-container-hover: light-dark(var(--sf-warning-50--alfa-16), var(--sf-warning-50--alfa-28));
    --sf-warning-container-active: light-dark(var(--sf-warning-50--alfa-20), var(--sf-warning-50--alfa-32));
    --sf-warning-transparent-hover: light-dark(var(--sf-warning-50--alfa-4), var(--sf-warning-90--alfa-4));
    --sf-warning-transparent-select: light-dark(var(--sf-warning-50--alfa-8), var(--sf-warning-90--alfa-8));
    --sf-warning-transparent-active: light-dark(var(--sf-warning-50--alfa-12), var(--sf-warning-90--alfa-12));
    --sf-warning-transparent-overlay: light-dark(var(--sf-warning-50--alfa-24), var(--sf-warning-90--alfa-24));
    --sf-on-warning: light-dark(var(--sf-white), var(--sf-warning-20));
    --sf-on-warning-container: light-dark(var(--sf-warning-10), var(--sf-warning-90));
    --sf-on-warning-container-graphic: light-dark(var(--sf-warning-50), var(--sf-warning-60));
    --sf-outline-warning: light-dark(var(--sf-warning-50), var(--sf-warning-60));
    --sf-tertiary-hover: light-dark(var(--sf-tertiary-35), var(--sf-tertiary-85));
    --sf-tertiary-active: light-dark(var(--sf-tertiary-30), var(--sf-tertiary-90));
    --sf-tertiary-container: light-dark(var(--sf-tertiary-50--alfa-12), var(--sf-tertiary-50--alfa-24));
    --sf-tertiary-container-hover: light-dark(var(--sf-tertiary-50--alfa-16), var(--sf-tertiary-50--alfa-28));
    --sf-tertiary-container-active: light-dark(var(--sf-tertiary-50--alfa-20), var(--sf-tertiary-50--alfa-32));
    --sf-tertiary-transparent-hover: light-dark(var(--sf-tertiary-50--alfa-4), var(--sf-tertiary-90--alfa-4));
    --sf-tertiary-transparent-select: light-dark(var(--sf-tertiary-50--alfa-8), var(--sf-tertiary-90--alfa-8));
    --sf-tertiary-transparent-active: light-dark(var(--sf-tertiary-50--alfa-12), var(--sf-tertiary-90--alfa-12));
    --sf-tertiary-transparent-overlay: light-dark(var(--sf-tertiary-50--alfa-24), var(--sf-tertiary-90--alfa-24));
    --sf-on-tertiary: light-dark(var(--sf-white), var(--sf-tertiary-20));
    --sf-on-tertiary-container: light-dark(var(--sf-tertiary-10), var(--sf-tertiary-90));
    --sf-on-tertiary-container-graphic: light-dark(var(--sf-tertiary-50), var(--sf-tertiary-60));
    --sf-outline-tertiary: light-dark(var(--sf-tertiary-50), var(--sf-tertiary-60));
    --sf-secondary-hover: light-dark(var(--sf-secondary-35), var(--sf-secondary-85));
    --sf-secondary-active: light-dark(var(--sf-secondary-30), var(--sf-secondary-90));
    --sf-secondary-container: light-dark(var(--sf-secondary-50--alfa-12), var(--sf-secondary-50--alfa-24));
    --sf-secondary-container-hover: light-dark(var(--sf-secondary-50--alfa-16), var(--sf-secondary-50--alfa-28));
    --sf-secondary-container-active: light-dark(var(--sf-secondary-50--alfa-20), var(--sf-secondary-50--alfa-32));
    --sf-secondary-transparent-hover: light-dark(var(--sf-secondary-50--alfa-4), var(--sf-secondary-90--alfa-4));
    --sf-secondary-transparent-select: light-dark(var(--sf-secondary-50--alfa-8), var(--sf-secondary-90--alfa-8));
    --sf-secondary-transparent-active: light-dark(var(--sf-secondary-50--alfa-12), var(--sf-secondary-90--alfa-12));
    --sf-secondary-transparent-overlay: light-dark(var(--sf-secondary-50--alfa-24), var(--sf-secondary-90--alfa-24));
    --sf-on-secondary: light-dark(var(--sf-white), var(--sf-secondary-20));
    --sf-on-secondary-container: light-dark(var(--sf-secondary-10), var(--sf-secondary-90));
    --sf-on-secondary-container-graphic: light-dark(var(--sf-secondary-50), var(--sf-secondary-60));
    --sf-primary-hover: light-dark(var(--sf-primary-35), var(--sf-primary-85));
    --sf-primary-active: light-dark(var(--sf-primary-30), var(--sf-primary-90));
    --sf-primary-container: light-dark(var(--sf-primary-50--alfa-12), var(--sf-primary-50--alfa-24));
    --sf-primary-container-hover: light-dark(var(--sf-primary-50--alfa-16), var(--sf-primary-50--alfa-28));
    --sf-primary-container-active: light-dark(var(--sf-primary-50--alfa-20), var(--sf-primary-50--alfa-32));
    /* Полупрозрачные слои палитры: наведение, выбор, нажатие и затемнение
       поверх неизвестного фона. Утилиты предлагали их с самого начала,
       а слой ролей — нет, поэтому bg-primary-transparent-select ничего
       не красил. */
    --sf-primary-transparent-hover: light-dark(var(--sf-primary-50--alfa-4), var(--sf-primary-90--alfa-4));
    --sf-primary-transparent-select: light-dark(var(--sf-primary-50--alfa-8), var(--sf-primary-90--alfa-8));
    --sf-primary-transparent-active: light-dark(var(--sf-primary-50--alfa-12), var(--sf-primary-90--alfa-12));
    --sf-primary-transparent-overlay: light-dark(var(--sf-primary-50--alfa-24), var(--sf-primary-90--alfa-24));
    --sf-on-primary: light-dark(var(--sf-white), var(--sf-primary-20));
    --sf-on-primary-container: light-dark(var(--sf-primary-10), var(--sf-primary-90));
    --sf-on-primary-container-graphic: light-dark(var(--sf-primary-50), var(--sf-primary-60));
    --sf-outline-primary: light-dark(var(--sf-primary-50), var(--sf-primary-60));
    --sf-neutral-hover: light-dark(var(--sf-neutral-35), var(--sf-neutral-85));
    --sf-neutral-active: light-dark(var(--sf-neutral-30), var(--sf-neutral-90));
    --sf-neutral-container: light-dark(var(--sf-neutral-90), var(--sf-neutral-30));
    --sf-neutral-container-hover: light-dark(var(--sf-neutral-85), var(--sf-neutral-35));
    --sf-neutral-container-active: light-dark(var(--sf-neutral-80), var(--sf-neutral-40));
    --sf-on-neutral: light-dark(var(--sf-white), var(--sf-neutral-20));
    --sf-on-neutral-container: light-dark(var(--sf-neutral-10), var(--sf-neutral-90));
    --sf-on-neutral-container-graphic: light-dark(var(--sf-neutral-50), var(--sf-neutral-60));
    --sf-info: light-dark(var(--sf-info-40), var(--sf-info-80));
    --sf-info-hover: light-dark(var(--sf-info-35), var(--sf-info-85));
    --sf-info-active: light-dark(var(--sf-info-30), var(--sf-info-90));
    --sf-info-container: light-dark(var(--sf-info-50--alfa-12), var(--sf-info-50--alfa-24));
    --sf-info-container-hover: light-dark(var(--sf-info-50--alfa-16), var(--sf-info-50--alfa-28));
    --sf-info-container-active: light-dark(var(--sf-info-50--alfa-20), var(--sf-info-50--alfa-32));
    --sf-on-info: light-dark(var(--sf-white), var(--sf-info-20));
    --sf-on-info-container: light-dark(var(--sf-info-10), var(--sf-info-90));
    --sf-on-info-container-graphic: light-dark(var(--sf-info-50), var(--sf-info-60));
    --sf-outline-info: light-dark(var(--sf-info-50), var(--sf-info-60));
    --sf-surface-0: light-dark(var(--sf-white), var(--sf-neutral-5));
    --sf-surface-1: light-dark(var(--sf-neutral-98), var(--sf-neutral-10));
    /* The veil over a scene, and the one translucent surface that keeps the pure
       base: it darkens what is behind a modal rather than tinting a surface, and
       on the neutral tone it came out 7.4 points lighter in the light theme --
       a veil that does not veil. */
    --sf-surface-overlay: light-dark(var(--sf-black--alfa-8), var(--sf-white--alfa-8));
    --sf-surface-2: light-dark(var(--sf-neutral-95), var(--sf-neutral-15));
    --sf-surface-3: light-dark(var(--sf-neutral-90), var(--sf-neutral-20));
    --sf-surface-4: light-dark(var(--sf-neutral-85), var(--sf-neutral-25));
    --sf-surface-5: light-dark(var(--sf-neutral-80), var(--sf-neutral-30));
    /* What a pointer does to a surface, on the neutral tone of the theme: the
       state family's three steps, 4, 8 and 12.
       `active` was removed on 2026-10-08 as asked for by nothing. It was not:
       the utility generator derives `active:bg-surface-transparent` from the
       background list and reads this name bare, so the class painted nothing
       on press for exactly one published pair. The sweep that called it dead
       searched for `var(--sf-surface-transparent-active)` in the sources, and
       a generated utility is in none of them (owner, 2026-10-09).
       `overlay` stays for the same reason, and read as unused at first for the
       same reason: it is the backdrop of a modal, asked for through the
       utilities rather than through var(). */
    --sf-surface-transparent-hover: light-dark(var(--sf-neutral-50--alfa-4), var(--sf-neutral-90--alfa-4));
    --sf-surface-transparent-select: light-dark(var(--sf-neutral-50--alfa-8), var(--sf-neutral-90--alfa-8));
    --sf-surface-transparent-active: light-dark(var(--sf-neutral-50--alfa-12), var(--sf-neutral-90--alfa-12));
    /* A step above the strongest plate, and not because the ladder asks: a
       plate sits on the page, a veil covers it. At 24 the two were the same
       colour, and the backdrop of a modal was as strong as a pressed card
       (owner, 2026-10-08). */
    --sf-surface-transparent-overlay: light-dark(var(--sf-neutral-50--alfa-32), var(--sf-neutral-90--alfa-32));
    --sf-surface-inverse: light-dark(var(--sf-neutral-20), var(--sf-neutral-90));
    /* The inverse surface under a pointer: the same five-tone step the other
       hover roles take. A carousel control read the primitives for it, there
       being no role (documentation trial 6, 2026-10-18). */
    --sf-surface-inverse-hover: light-dark(var(--sf-neutral-25), var(--sf-neutral-85));
    --sf-surface-inverse-fixed: var(--sf-neutral-20);
    /* Paper: the sheet a document is previewed on -- an email, a page, a print
       layout. Its own colours are the document's, written for white, so the
       paper stays white and its ink stays dark in both themes; it never flips
       (simai/ui-source#24, the ui-mail preview). 17.2:1. Not a surface of the
       interface: controls do not sit on it, and the interface's own text does
       not take --sf-on-paper. */
    --sf-paper: var(--sf-white);
    --sf-on-paper: var(--sf-neutral-10);
    /* What an editor draws on the paper -- the selection frame, a hover
       outline, the tints of a hovered and a selected block -- reads these, the
       light theme's values in both themes, because the paper does not flip:
       the dark theme's primary-80 frame on white paper measured 1.75:1
       (simai/ui-source#29, ui-mail P-04). primary-40 on the paper holds 6.3:1
       and the outline 3:1 or more, as a part of the interface must; the tints
       are the light theme's state layers. */
    --sf-paper-primary: var(--sf-primary-40);
    --sf-paper-outline: var(--sf-neutral-50);
    --sf-paper-hover: var(--sf-primary-50--alfa-4);
    --sf-paper-select: var(--sf-primary-50--alfa-8);
    /* The well: the recessed area a canvas or a paper sits in, below the
       panels around it. In the light theme a step under surface-1 (the
       paper's white stands on it by its shadow, 1.13:1, as the elevation guide
       has it); in the dark theme, where height lightens a surface, it is the
       darkest step, and the white paper stands off it by itself (18.9:1). Its
       text takes the ordinary roles: --sf-on-surface 15.2:1 and 14.7:1,
       --sf-on-surface-variant 5.71:1 and 5.95:1. */
    --sf-surface-well: light-dark(var(--sf-neutral-95), var(--sf-neutral-5));
    /* A tinted plate on the surface, on the same neutral tone as the state
       layer above: neutral-50 in the light theme, neutral-90 in the dark. It
       used to be neutral-50 in both, which meant the dark theme lightened its
       plates with a middle grey while every other translucent surface
       lightened with a near-white -- two tones doing one job.

       The steps are the same in both themes now, which they could not be while
       the tone differed: 24, 28 and 32 in the dark were that darker tone
       catching up. And they start at 16 rather than 12, because at 12 a plate
       was the same colour as a pressed surface and the two could not be told
       apart (owner, 2026-10-08). */
    --sf-surface-container: light-dark(var(--sf-neutral-50--alfa-16), var(--sf-neutral-90--alfa-16));
    --sf-surface-container-hover: light-dark(var(--sf-neutral-50--alfa-20), var(--sf-neutral-90--alfa-20));
    --sf-surface-container-active: light-dark(var(--sf-neutral-50--alfa-24), var(--sf-neutral-90--alfa-24));
    --sf-on-surface: light-dark(var(--sf-neutral-10), var(--sf-neutral-90));
    --sf-on-surface-fixed: var(--sf-neutral-10);
    --sf-on-surface-hover: light-dark(var(--sf-neutral-15), var(--sf-neutral-85));
    --sf-on-surface-active: light-dark(var(--sf-neutral-20), var(--sf-neutral-80));
    --sf-on-surface-variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-60));
    /* Dimmed text on a container fill (--sf-surface-container over any of the
       surfaces 0 to 3). The fill is translucent, so the text lies on the fill
       and the surface together: neutral-60 measured 4.0:1 in the dark theme,
       neutral-70 still 4.25:1 over surface-2, and neutral-40 4.26:1 over
       surface-3 in the light one. Neutral-80 and neutral-35 hold 5.0 and 5.1
       over the brightest of them and stay well short of the primary role
       (effects-gallery theme audit and the ui-doc repin, 2026-10-19; issue
       simai/ui-source#3). A fill inside a fill -- an avatar in a tag -- is
       darker still and takes the primary role. */
    --sf-on-surface-container--variant: light-dark(var(--sf-neutral-35), var(--sf-neutral-80));
    /* The tones of initials: a muted plate and the ink that reads on it over the
       surfaces 0 to 3, in both themes (tests/browser/avatar-tones.browser.mjs
       measures them). */
    --sf-tone-rose-container: light-dark(var(--sf-tone-rose-50--alfa-20), var(--sf-tone-rose-50--alfa-32));
    --sf-on-tone-rose-container: light-dark(var(--sf-tone-rose-30), var(--sf-tone-rose-85));
    --sf-tone-amber-container: light-dark(var(--sf-tone-amber-50--alfa-20), var(--sf-tone-amber-50--alfa-32));
    --sf-on-tone-amber-container: light-dark(var(--sf-tone-amber-30), var(--sf-tone-amber-85));
    --sf-tone-lime-container: light-dark(var(--sf-tone-lime-50--alfa-20), var(--sf-tone-lime-50--alfa-32));
    --sf-on-tone-lime-container: light-dark(var(--sf-tone-lime-30), var(--sf-tone-lime-85));
    --sf-tone-green-container: light-dark(var(--sf-tone-green-50--alfa-20), var(--sf-tone-green-50--alfa-32));
    --sf-on-tone-green-container: light-dark(var(--sf-tone-green-30), var(--sf-tone-green-85));
    --sf-tone-teal-container: light-dark(var(--sf-tone-teal-50--alfa-20), var(--sf-tone-teal-50--alfa-32));
    --sf-on-tone-teal-container: light-dark(var(--sf-tone-teal-30), var(--sf-tone-teal-85));
    --sf-tone-sky-container: light-dark(var(--sf-tone-sky-50--alfa-20), var(--sf-tone-sky-50--alfa-32));
    --sf-on-tone-sky-container: light-dark(var(--sf-tone-sky-30), var(--sf-tone-sky-85));
    --sf-tone-indigo-container: light-dark(var(--sf-tone-indigo-50--alfa-20), var(--sf-tone-indigo-50--alfa-32));
    --sf-on-tone-indigo-container: light-dark(var(--sf-tone-indigo-30), var(--sf-tone-indigo-85));
    --sf-tone-violet-container: light-dark(var(--sf-tone-violet-50--alfa-20), var(--sf-tone-violet-50--alfa-32));
    --sf-on-tone-violet-container: light-dark(var(--sf-tone-violet-30), var(--sf-tone-violet-85));
    --sf-on-surface-muted: light-dark(var(--sf-neutral-60), var(--sf-neutral-40));
    --sf-on-surface-inverse: light-dark(var(--sf-neutral-90), var(--sf-neutral-10));
    --sf-on-surface-inverse-fixed: var(--sf-neutral-90);
    /* The boundary of anything a person has to find: a control at rest, a
       solid rule, the edge of a thing that is not a region. At the opacity
       that gives exactly WCAG 1.4.11's 3:1 on surface-0 -- 80% light, 64%
       dark; 3.10:1 and 3.12:1.

       There were three neutral boundary roles for a while, and the third one
       -- --sf-outline-control, the resting edge of a control -- was this value
       under its own name. Two things were wrong with that. The system has two
       neutral boundary roles and had always had two: this one and the variant
       for the edge of a region. And in the light theme the third role came out
       at exactly --sf-outline-disable, so a field at rest and a field nobody
       can type in were drawn in the same line (owner, 2026-10-08).

       So the value moved here and the third role is gone. What a boundary does
       when it is touched is said in colour, not in a stronger grey: hover and
       active take the primary roles, focus takes --sf-focus.

       Both halves are steps of the alpha scale now. The dark one, 64, is on
       the scale's own footing -- it climbs in fours -- and had simply never
       been generated, which is why this role used to be written as a
       color-mix of its own (owner, 2026-10-08). */
    --sf-outline: light-dark(var(--sf-neutral-50--alfa-80), var(--sf-neutral-60--alfa-64));
    /* The edge of a region -- a panel, a card, a table, a row inside one.
       Nothing is found by it, so it is not held to 1.4.11: 1.34:1 and 1.92:1. */
    --sf-outline-variant: light-dark(var(--sf-neutral-50--alfa-24), var(--sf-neutral-90--alfa-24));
    --sf-outline-secondary: light-dark(var(--sf-secondary-50), var(--sf-secondary-60));
    --sf-disable: light-dark(var(--sf-neutral-50--alfa-12), var(--sf-neutral-90--alfa-12));
    --sf-on-disable: light-dark(var(--sf-neutral-50--alfa-80), var(--sf-neutral-90--alfa-48));
    /* The boundary of a control nobody can use, and the one role whose whole
       job is to be weaker than another. It carried the same value as
       --sf-outline in the light theme -- a field at rest and a field nobody
       can type in drawn in the same line -- and in the dark theme it was
       stronger than --sf-outline, 4.13:1 against 3.12:1, so the one that was
       switched off was the one that stood out. It takes the ink scale's lower
       step now, from the tone of the boundary rather than of the ink: 1.86:1
       light and 2.26:1 dark, under the live boundary in both (owner,
       2026-10-08). */
    --sf-outline-disable: light-dark(var(--sf-neutral-50--alfa-48), var(--sf-neutral-60--alfa-48));
    --sf-link: light-dark(var(--sf-primary-40), var(--sf-primary-80));
    --sf-mark: light-dark(var(--sf-warning-50--alfa-24), var(--sf-warning-90--alfa-24));
    --sf-focus: light-dark(var(--sf-primary-50), var(--sf-primary-90));
    --sf-link-hover: light-dark(var(--sf-primary-35), var(--sf-primary-85));
    --sf-link-active: light-dark(var(--sf-primary-30), var(--sf-primary-90));
    --sf-link-visited: light-dark(var(--sf-tertiary-40), var(--sf-tertiary-80));
    --sf-code: light-dark(var(--sf-tertiary-50--alfa-24), var(--sf-tertiary-90--alfa-24));
    --sf-shadow--color-fill: var(--sf-black--alfa-12);
    --sf-shadow--color-outline: var(--sf-black--alfa-8);
    --sf-shadow--color-shading: var(--sf-black--alfa-4);
    /* Высота — это две вещи сразу: тень под элементом и поверхность под ним.
       В светлой теме работает тень, и поднятая поверхность остаётся обычной.
       В тёмной тень не работает вовсе: она чёрная, фон почти чёрный, и весь
       пятиступенчатый набор укладывался в три-семь единиц яркости из 255 —
       ниже порога, на котором человек замечает разницу. Там высоту несёт
       ступень поверхности, которая в тёмной теме светлеет. */
    --sf-elevation-1--surface: light-dark(var(--sf-surface-0), var(--sf-surface-2));
    --sf-elevation-2--surface: light-dark(var(--sf-surface-0), var(--sf-surface-3));
    --sf-elevation-3--surface: light-dark(var(--sf-surface-0), var(--sf-surface-4));
    --sf-elevation-4--surface: light-dark(var(--sf-surface-0), var(--sf-surface-5));
    --sf-elevation-5--surface: light-dark(var(--sf-surface-0), var(--sf-surface-5));
    /* The shadow of each step, beside its surface: a panel that floats takes
       both, so a theme or a product retunes height in one place (a dark theme
       may drop the shadow and keep the surface, or the reverse). The rim is a
       last layer a theme may switch on to outline raised panels in the dark;
       it is off: 0 0 0 0 transparent. */
    --sf-shadow--rim: 0 0 0 0 transparent;
    --sf-elevation-1--shadow: var(--sf-ui-shadow-1), var(--sf-shadow--rim);
    --sf-elevation-2--shadow: var(--sf-ui-shadow-2), var(--sf-shadow--rim);
    --sf-elevation-3--shadow: var(--sf-ui-shadow-3), var(--sf-shadow--rim);
    --sf-elevation-4--shadow: var(--sf-ui-shadow-4), var(--sf-shadow--rim);
    --sf-elevation-5--shadow: var(--sf-ui-shadow-5), var(--sf-shadow--rim);
    /* Приглушённый текст на поднятой поверхности. В светлой теме поднятая
       поверхность остаётся обычной, поэтому значение то же, что у
       --sf-on-surface-variant. В тёмной поверхность светлеет со ступенью, и
       вместе с ней светлеет текст: иначе одна и та же роль даёт 4.14 на второй
       ступени и 2.93 на четвёртой при требуемых WCAG 1.4.3 четырёх с половиной.
       Значений три, а не пять: роль меняется там, где перестаёт проходить. */
    --sf-on-elevation-1--variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-60));
    --sf-on-elevation-2--variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-70));
    --sf-on-elevation-3--variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-70));
    --sf-on-elevation-4--variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-80));
    --sf-on-elevation-5--variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-80));
    /* The neutral half of the alpha scale. The base branches per scheme — ink on
       a light surface, light on a dark one — so a component asks for a degree of
       contrast rather than for black or white, and every step above is one
       declaration that is right in both themes.

       The steps are the scale's own, in fours, and only the ones something asks
       for: 2 and 6 were off the scale, 20 and 24 were on it and unused
       (owner, 2026-10-08). The tinted half lives in the palette as
       --sf-<tone>--alfa-N; the two halves are one scale and share its steps. */
    --sf-alpha-base: light-dark(var(--sf-black), var(--sf-white));
    --sf-alpha-4: color-mix(in srgb, var(--sf-transparent), var(--sf-alpha-base) 4%);
    --sf-alpha-8: color-mix(in srgb, var(--sf-transparent), var(--sf-alpha-base) 8%);
    --sf-alpha-12: color-mix(in srgb, var(--sf-transparent), var(--sf-alpha-base) 12%);
    --sf-alpha-16: color-mix(in srgb, var(--sf-transparent), var(--sf-alpha-base) 16%);
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-space-0: 0;
    --sf-space-1\/4: 0.25rem;
    --sf-space-1\/4: var(--sf-a4);
    --sf-space-1\/3: 0.5rem;
    --sf-space-1\/3: var(--sf-a8);
    --sf-space-1\/2: 0.5rem;
    --sf-space-1\/2: var(--sf-a8);
    --sf-space-1: var(--sf-b2);
    --sf-space-2: var(--sf-b6);
    --sf-space-3: var(--sf-b6);
    --sf-space-4: var(--sf-c2);
    --sf-space-5: var(--sf-c6);
    --sf-space-6: var(--sf-c6);
    --sf-space-7: var(--sf-d0);
    --sf-space-8: var(--sf-d2);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-space-0: 0;
      --sf-space-1\/4: 0.25rem;
      --sf-space-1\/4: var(--sf-a4);
      --sf-space-1\/3: 0.5rem;
      --sf-space-1\/3: var(--sf-a8);
      --sf-space-1\/2: 0.75rem;
      --sf-space-1\/2: var(--sf-b2);
      --sf-space-1: var(--sf-b6);
      --sf-space-2: var(--sf-c0);
      --sf-space-3: var(--sf-c2);
      --sf-space-4: var(--sf-c6);
      --sf-space-5: var(--sf-d0);
      --sf-space-6: var(--sf-d2);
      --sf-space-7: var(--sf-d6);
      --sf-space-8: var(--sf-e0);
    }
  }
}
@layer sf.base {
  :root {
    --sf-opacity-10: 10%;
    --sf-opacity-20: 20%;
    --sf-opacity-30: 30%;
    --sf-opacity-40: 40%;
    --sf-opacity-50: 50%;
    --sf-opacity-60: 60%;
    --sf-opacity-70: 70%;
    --sf-opacity-80: 80%;
    --sf-opacity-90: 90%;
  }
}
@layer sf.base {
  :root {
    --sf-ui-blur-small: blur(var(--sf-blur-small));
    --sf-ui-blur-medium: blur(var(--sf-blur-medium));
    --sf-ui-blur-large: blur(var(--sf-blur-large));
    --sf-ui-blur-surface-overlay: blur(var(--sf-surface-overlay--blur));
    --sf-ui-focus: 0 0 0 var(--sf-focus-outline-width) var(--sf-focus);
    --sf-ui-shadow-1: 0 var(--sf-a2) var(--sf-a4) var(--sf-px) var(--sf-shadow--color-shading), 0 var(--sf-px) var(--sf-a3) 0 var(--sf-shadow--color-outline), 0 var(--sf-a2) var(--sf-a2) calc(-1 * var(--sf-px)) var(--sf-shadow--color-fill);
    --sf-ui-shadow-2: 0 var(--sf-a4) var(--sf-a8) var(--sf-a2) var(--sf-shadow--color-shading), 0 var(--sf-a2) var(--sf-a6) 0 var(--sf-shadow--color-outline), 0 var(--sf-a4) var(--sf-a4) calc(-1 * var(--sf-a2)) var(--sf-shadow--color-fill);
    --sf-ui-shadow-3: 0 var(--sf-a8) var(--sf-b6) var(--sf-a4) var(--sf-shadow--color-shading), 0 var(--sf-a4) var(--sf-b2) 0 var(--sf-shadow--color-outline), 0 var(--sf-a8) var(--sf-a8) calc(-1 * var(--sf-a4)) var(--sf-shadow--color-fill);
    --sf-ui-shadow-4: 0 var(--sf-b6) var(--sf-c6) var(--sf-a4) var(--sf-shadow--color-shading), 0 var(--sf-a8) var(--sf-c2) 0 var(--sf-shadow--color-outline), 0 var(--sf-b6) var(--sf-b6) calc(-1 * var(--sf-a8)) var(--sf-shadow--color-fill);
    --sf-ui-shadow-5: 0 var(--sf-c6) var(--sf-d6) var(--sf-a8) var(--sf-shadow--color-shading), 0 var(--sf-b6) var(--sf-d2) 0 var(--sf-shadow--color-outline), 0 var(--sf-c6) var(--sf-c6) calc(-1 * var(--sf-b6)) var(--sf-shadow--color-fill);
    --sf-ui-shadow-top: 0 0 var(--sf-px) 0 var(--sf-shadow--color-fill), 0 calc(-1 * var(--sf-a4)) var(--sf-b0) var(--sf-a4) var(--sf-shadow--color-outline), 0 calc(-1 * var(--sf-a2)) var(--sf-a3) var(--sf-px) var(--sf-shadow--color-shading);
    --sf-ui-skeleton: linear-gradient(180deg, var(--sf-neutral-80--alfa-48) 0%, var(--sf-neutral-60--alfa-48) 100%);
  }
}
@layer sf.base {
  .bg-surface-overlay {
    background-color: var(--sf-surface-overlay);
    -webkit-backdrop-filter: blur(var(--sf-surface-overlay--blur));
            backdrop-filter: blur(var(--sf-surface-overlay--blur));
  }
}
@layer sf.base {
  :root {
    --sf-empty: ;
    --sf-alfa: 1;
  }
  .source {
    overflow: hidden;
    position: relative;
    opacity: 0;
  }
  .source.init {
    opacity: 1;
  }
  body,
  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  ol,
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  input {
    background-color: var(--sf-surface-0);
    color: var(--sf-on-surface);
  }
  mark {
    position: relative;
    white-space: pre-wrap;
    background-color: var(--sf-mark--color);
    font-weight: inherit;
    font-style: inherit;
  }
  *,
  ::before,
  ::after {
    border-width: 0;
    border-style: solid;
    box-sizing: border-box;
  }
  [hidden]:not([hidden=until-found]) {
    display: none !important;
  }
  body {
    color: var(--sf-on-surface);
    background-color: var(--sf-surface-0);
  }
}
:root {
  --sf-0: 0;
  --sf-px: 1px;
  --sf-auto: auto;
  --sf-a0: 0rem;
  --sf-a1: 0.0625rem;
  --sf-a2: 0.125rem;
  --sf-a3: 0.1875rem;
  --sf-a4: 0.25rem;
  --sf-a5: 0.3125rem;
  --sf-a6: 0.375rem;
  --sf-a7: 0.4375rem;
  --sf-a8: 0.5rem;
  --sf-a9: 0.5625rem;
  --sf-b0: 0.625rem;
  --sf-b1: 0.6875rem;
  --sf-b2: 0.75rem;
  --sf-b3: 0.8125rem;
  --sf-b4: 0.875rem;
  --sf-b5: 0.9375rem;
  --sf-b6: 1rem;
  --sf-b7: 1.0625rem;
  --sf-b8: 1.125rem;
  --sf-b9: 1.1875rem;
  --sf-c0: 1.25rem;
  --sf-c1: 1.375rem;
  --sf-c2: 1.5rem;
  --sf-c3: 1.625rem;
  --sf-c4: 1.75rem;
  --sf-c5: 1.875rem;
  --sf-c6: 2rem;
  --sf-c7: 2.125rem;
  --sf-c8: 2.25rem;
  --sf-c9: 2.375rem;
  --sf-d0: 2.5rem;
  --sf-d1: 2.75rem;
  --sf-d2: 3rem;
  --sf-d3: 3.25rem;
  --sf-d4: 3.5rem;
  --sf-d5: 3.75rem;
  --sf-d6: 4rem;
  --sf-d7: 4.25rem;
  --sf-d8: 4.5rem;
  --sf-d9: 4.75rem;
  --sf-e0: 5rem;
  --sf-e1: 5.5rem;
  --sf-e2: 6rem;
  --sf-e3: 6.5rem;
  --sf-e4: 7rem;
  --sf-e5: 7.5rem;
  --sf-e6: 8rem;
  --sf-e7: 8.5rem;
  --sf-e8: 9rem;
  --sf-e9: 9.5rem;
  --sf-f0: 10rem;
  --sf-f1: 11rem;
  --sf-f2: 12rem;
  --sf-f3: 13rem;
  --sf-f4: 14rem;
  --sf-f5: 15rem;
  --sf-f6: 16rem;
  --sf-f7: 17rem;
  --sf-f8: 18rem;
  --sf-f9: 19rem;
  --sf-g0: 20rem;
  --sf-g1: 22rem;
  --sf-g2: 24rem;
  --sf-g3: 26rem;
  --sf-g4: 28rem;
  --sf-g5: 30rem;
  --sf-g6: 32rem;
  --sf-g7: 34rem;
  --sf-g8: 36rem;
  --sf-g9: 38rem;
  --sf-h0: 40rem;
  --sf-h1: 44rem;
  --sf-h2: 48rem;
  --sf-h3: 52rem;
  --sf-h4: 56rem;
  --sf-h5: 60rem;
  --sf-h6: 64rem;
  --sf-h7: 68rem;
  --sf-h8: 72rem;
  --sf-h9: 76rem;
  --sf-i0: 80rem;
  --sf-i1: 88rem;
  --sf-i2: 96rem;
  --sf-i3: 104rem;
  --sf-i4: 112rem;
  --sf-i5: 120rem;
  --sf-i6: 128rem;
  --sf-i7: 136rem;
  --sf-i8: 144rem;
  --sf-i9: 152rem;
  --sf-layout-reading-width: var(--sf-h2);
  --sf-layout-floating-panel-width: calc(var(--sf-g2) + var(--sf-b6));
  --sf-layout-floating-panel-height: calc(var(--sf-h0) + var(--sf-d0));
  --sf-z-index--1: -1;
  --sf-z-index-1: 10;
  --sf-z-index-2: 20;
  --sf-z-index-3: 30;
  --sf-z-index-4: 40;
  --sf-z-index-5: 50;
  --sf-z-index-6: 60;
  --sf-z-index-7: 70;
  --sf-z-index-8: 80;
  --sf-z-index-9: 90;
  --sf-z-index-0: 0;
  --sf-z-index-layer: 9000;
  --sf-z-index-layer-step: 2;
}

@layer sf.base {
  :root,
  ::after,
  ::before {
    --sf-alfa: 1;
    --sf-color--alfa: 1;
    --sf-decoration--alfa: 1;
    --sf-border--alfa: 1;
    --sf-divider--alfa: 1;
    --sf-outline--alfa: 1;
    --sf-ring--alfa: 1;
    --sf-bg--alfa: 1;
    --sf-stripe--alfa: 1;
    --sf-ring-color: ;
    --sf-gradient--angle: 90deg;
    --sf-gradient--alfa-1: 1;
    --sf-gradient--alfa-2: 1;
    --sf-gradient--alfa-3: 1;
    --sf-stripe--size: var(--sf-a1, 1px);
    --sf-accent--alfa: 1;
    --sf-caret--alfa: 1;
    --sf-scroll--alfa: 1;
    --sf-scroll-thumb--alfa: 1;
    --sf-scroll-track--alfa: 1;
    --sf-stripe--color: var(--sf-surface-inverse);
    --sf-drop-shadow--alfa: 1;
    --sf-shadow--alfa: 1;
  }
}
@layer sf.base {
  :root {
    --sf-transparent: rgba(255,255,255,0);
    /* Два значения-ключевых слова, которые утилиты просили с самого начала:
       целое семейство классов *-current и *-inherit ссылалось на них, а
       объявления не было. Без него bg-current давал прозрачный фон, а
       fill-current — чёрный; там, где начальное значение свойства случайно
       совпадало с намерением, класс работал по удаче. */
    --sf-current: currentColor;
    --sf-inherit: inherit;
    --sf-transparent-for-focus: var(--sf-transparent);
    --sf-white: #ffffff;
    --sf-white--alfa-8: rgba(255,255,255,0.07843);
    --sf-white--alfa-24: rgba(255,255,255,0.23922);
    --sf-black: #000000;
    --sf-black--alfa-4: rgba(0,0,0,0.03922);
    --sf-black--alfa-8: rgba(0,0,0,0.07843);
    --sf-black--alfa-12: rgba(0,0,0,0.12157);
    --sf-neutral-98: #faf9fe;
    --sf-neutral-95: #f1f0f6;
    --sf-neutral-90: #e3e2e7;
    --sf-neutral-90--alfa-4: rgba(227,226,231,0.03922);
    --sf-neutral-90--alfa-8: rgba(227,226,231,0.07843);
    --sf-neutral-90--alfa-12: rgba(227,226,231,0.12157);
    /* The plate steps in the dark theme. The plate used to be mixed from
       neutral-50 there, a middle grey, while everything else translucent was
       mixed from this near-white (owner, 2026-10-08). */
    --sf-neutral-90--alfa-16: rgba(227,226,231,0.16078);
    --sf-neutral-90--alfa-20: rgba(227,226,231,0.2);
    --sf-neutral-90--alfa-24: rgba(227,226,231,0.23922);
    --sf-neutral-90--alfa-32: rgba(227,226,231,0.32157);
    --sf-neutral-90--alfa-48: rgba(227,226,231,0.47843);
    --sf-neutral-85: #d4d4d9;
    --sf-neutral-80: #c6c6cb;
    --sf-neutral-70: #ababb0;
    --sf-neutral-60: #909095;
    /* The one alpha step neutral-60 has, and it is on the scale's own footing:
       the run climbs in fours, and 64 is one of them -- it had simply never
       been generated, so the boundary role carried a color-mix written in the
       role itself. neutral-60 over the dark surface measures 5.95:1 at full
       opacity, and 64% lands at 3.12:1, the WCAG 1.4.11 threshold the light
       theme reaches at 80% (owner, 2026-10-08). */
    --sf-neutral-60--alfa-48: rgba(144,144,149,0.47843);
    --sf-neutral-80--alfa-48: rgba(198,198,203,0.47843);
    --sf-neutral-60--alfa-64: rgba(144,144,149,0.63922);
    --sf-neutral-50: #76777c;
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-neutral-50--alfa-4: rgba(118,119,124,0.03922);
    --sf-neutral-50--alfa-8: rgba(118,119,124,0.07843);
    --sf-neutral-50--alfa-12: rgba(118,119,124,0.12157);
    --sf-neutral-50--alfa-16: rgba(118,119,124,0.16078);
    --sf-neutral-50--alfa-20: rgba(118,119,124,0.2);
    --sf-neutral-50--alfa-24: rgba(118,119,124,0.23922);
    /* The veil over a scene: the backdrop of a modal and the bed of a
       scrollbar. A step above the strongest plate, because a plate sits on the
       page and a veil covers it (owner, 2026-10-08). */
    --sf-neutral-50--alfa-32: rgba(118,119,124,0.32157);
    /* The ink family of the scale (48, 64, 80): marks drawn with the neutral
       rather than washes laid under something. neutral-50 over white measures
       4.47:1 at full opacity, so 80% lands at 3.10:1, level with the dark
       theme. The state (4/8/12) and fill (12-32) families sit above. */
    /* The ink step of the scale on the light neutral: the boundary of a control
       nobody can use. Weaker than the 80 the boundary of a live one takes, and
       that is the whole of its work (owner, 2026-10-08). */
    --sf-neutral-50--alfa-48: rgba(118,119,124,0.47843);
    --sf-neutral-50--alfa-80: rgba(118,119,124,0.8);
    --sf-neutral-40: #5d5e63;
    --sf-neutral-35: #515257;
    --sf-neutral-30: #45474b;
    --sf-neutral-25: #3a3b40;
    --sf-neutral-20: #2f3035;
    --sf-neutral-15: #24262a;
    --sf-neutral-10: #1a1b1f;
    --sf-neutral-5: #0f1115;
    --sf-primary-98: #f9f9ff;
    --sf-secondary-98: #f9f9ff;
    --sf-tertiary-98: #fff7fa;
    --sf-tertiary-95: #ffebfd;
    --sf-tertiary-90: #fdd6ff;
    --sf-tertiary-90--alfa-4: rgba(253,214,255,0.03922);
    --sf-tertiary-90--alfa-8: rgba(253,214,255,0.07843);
    --sf-tertiary-90--alfa-12: rgba(253,214,255,0.12157);
    --sf-tertiary-90--alfa-24: rgba(253,214,255,0.23922);
    --sf-tertiary-85: #f9c2ff;
    --sf-tertiary-80: #ecb3f4;
    --sf-tertiary-70: #cf98d8;
    --sf-tertiary-60: #b37ebb;
    --sf-tertiary-50: #9765a0;
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-tertiary-50--alfa-4: rgba(151,101,160,0.03922);
    --sf-tertiary-50--alfa-8: rgba(151,101,160,0.07843);
    --sf-tertiary-50--alfa-12: rgba(151,101,160,0.12157);
    --sf-tertiary-50--alfa-16: rgba(151,101,160,0.16078);
    --sf-tertiary-50--alfa-20: rgba(151,101,160,0.2);
    --sf-tertiary-50--alfa-24: rgba(151,101,160,0.23922);
    --sf-tertiary-50--alfa-28: rgba(151,101,160,0.27843);
    --sf-tertiary-50--alfa-32: rgba(151,101,160,0.32157);
    --sf-tertiary-40: #7c4c86;
    --sf-tertiary-35: #6f4079;
    --sf-tertiary-30: #63356c;
    --sf-tertiary-25: #562960;
    --sf-tertiary-20: #4a1e54;
    --sf-tertiary-15: #3e1249;
    --sf-tertiary-10: #32053e;
    --sf-tertiary-5: #23002d;
    --sf-secondary-95: #edf0ff;
    --sf-secondary-90: #d7e2ff;
    --sf-secondary-90--alfa-4: rgba(215,226,255,0.03922);
    --sf-secondary-90--alfa-8: rgba(215,226,255,0.07843);
    --sf-secondary-90--alfa-12: rgba(215,226,255,0.12157);
    --sf-secondary-90--alfa-24: rgba(215,226,255,0.23922);
    --sf-secondary-85: #c9d4f1;
    --sf-secondary-80: #bbc6e3;
    --sf-secondary-70: #a0abc7;
    --sf-secondary-60: #8591ab;
    --sf-secondary-50: #6c7791;
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-secondary-50--alfa-4: rgba(108,119,145,0.03922);
    --sf-secondary-50--alfa-8: rgba(108,119,145,0.07843);
    --sf-secondary-50--alfa-12: rgba(108,119,145,0.12157);
    --sf-secondary-50--alfa-16: rgba(108,119,145,0.16078);
    --sf-secondary-50--alfa-20: rgba(108,119,145,0.2);
    --sf-secondary-50--alfa-24: rgba(108,119,145,0.23922);
    --sf-secondary-50--alfa-28: rgba(108,119,145,0.27843);
    --sf-secondary-50--alfa-32: rgba(108,119,145,0.32157);
    --sf-secondary-40: #535e77;
    --sf-secondary-35: #47526a;
    --sf-secondary-30: #3c475e;
    --sf-secondary-25: #303b52;
    --sf-secondary-20: #253047;
    --sf-secondary-15: #1a263b;
    --sf-secondary-10: #101b31;
    --sf-secondary-5: #051126;
    --sf-primary-95: #edf0ff;
    --sf-primary-90: #d7e2ff;
    --sf-primary-90--alfa-4: rgba(215,226,255,0.03922);
    --sf-primary-90--alfa-8: rgba(215,226,255,0.07843);
    --sf-primary-90--alfa-12: rgba(215,226,255,0.12157);
    --sf-primary-90--alfa-24: rgba(215,226,255,0.23922);
    --sf-primary-85: #c2d5ff;
    --sf-primary-80: #acc7ff;
    /* Information is a status with its own palette of #005bbe, not the brand
       colour (owner, 2026-10-21, simai/ui-source#14). These primitives used to
       equal primary's, so the theme generator told information in red under a
       red brand colour. The owner approved this HCT tonal palette (hue 265.1,
       chroma 58.6) whole, and theme-palette.js writes the same one. */
    --sf-info-98: #f9f9ff;
    --sf-info-95: #edf0ff;
    --sf-info-90: #d7e2ff;
    --sf-info-85: #c2d4ff;
    --sf-info-80: #acc7ff;
    --sf-info-70: #7eabff;
    --sf-info-60: #538ff5;
    --sf-info-50: #3375d9;
    --sf-info-50--alfa-12: rgba(51,117,217,0.12157);
    --sf-info-50--alfa-16: rgba(51,117,217,0.16078);
    --sf-info-50--alfa-20: rgba(51,117,217,0.2);
    --sf-info-50--alfa-24: rgba(51,117,217,0.23922);
    --sf-info-50--alfa-28: rgba(51,117,217,0.27843);
    --sf-info-50--alfa-32: rgba(51,117,217,0.32157);
    --sf-info-40: #005bbe;
    --sf-info-35: #0050a8;
    --sf-info-30: #004492;
    --sf-info-25: #00397c;
    --sf-info-20: #002f67;
    --sf-info-15: #002453;
    --sf-info-10: #001a40;
    --sf-info-5: #00102c;
    --sf-primary-70: #7eabff;
    --sf-primary-60: #488fff;
    --sf-primary-50: #0073ed;
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-primary-50--alfa-4: rgba(0,115,237,0.03922);
    --sf-primary-50--alfa-8: rgba(0,115,237,0.07843);
    --sf-primary-50--alfa-12: rgba(0,115,237,0.12157);
    --sf-primary-50--alfa-16: rgba(0,115,237,0.16078);
    --sf-primary-50--alfa-20: rgba(0,115,237,0.2);
    --sf-primary-50--alfa-24: rgba(0,115,237,0.23922);
    --sf-primary-50--alfa-28: rgba(0,115,237,0.27843);
    --sf-primary-50--alfa-32: rgba(0,115,237,0.32157);
    --sf-primary-40: #005bbe;
    --sf-primary-35: #0050a7;
    --sf-primary-30: #004491;
    --sf-primary-25: #00397c;
    --sf-primary-20: #002f67;
    --sf-primary-15: #002453;
    --sf-primary-10: #001a40;
    --sf-primary-5: #00102c;
    --sf-error-98: #fff8f7;
    --sf-error-95: #ffedea;
    --sf-error-90: #ffdad6;
    --sf-error-90--alfa-4: rgba(255,218,214,0.03922);
    --sf-error-90--alfa-8: rgba(255,218,214,0.07843);
    --sf-error-90--alfa-12: rgba(255,218,214,0.12157);
    --sf-error-90--alfa-24: rgba(255,218,214,0.23922);
    --sf-error-85: #ffc7c0;
    --sf-error-80: #ffb4ab;
    --sf-error-70: #ff897d;
    --sf-error-60: #ff5449;
    --sf-error-50: #df362f;
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-error-50--alfa-4: rgba(223,54,47,0.03922);
    --sf-error-50--alfa-8: rgba(223,54,47,0.07843);
    --sf-error-50--alfa-12: rgba(223,54,47,0.12157);
    --sf-error-50--alfa-16: rgba(223,54,47,0.16078);
    --sf-error-50--alfa-20: rgba(223,54,47,0.2);
    --sf-error-50--alfa-24: rgba(223,54,47,0.23922);
    --sf-error-50--alfa-28: rgba(223,54,47,0.27843);
    --sf-error-50--alfa-32: rgba(223,54,47,0.32157);
    --sf-error-40: #bb1919;
    --sf-error-35: #a9040e;
    --sf-error-30: #93000a;
    --sf-error-25: #7e0007;
    --sf-error-20: #690005;
    --sf-error-15: #540003;
    --sf-error-10: #410002;
    --sf-error-5: #2d0001;
    --sf-warning-98: #fff8f5;
    --sf-warning-95: #ffeee2;
    --sf-warning-90: #ffdcc1;
    --sf-warning-90--alfa-4: rgba(255,220,193,0.03922);
    --sf-warning-90--alfa-8: rgba(255,220,193,0.07843);
    --sf-warning-90--alfa-12: rgba(255,220,193,0.12157);
    --sf-warning-90--alfa-24: rgba(255,220,193,0.23922);
    --sf-warning-85: #ffca9f;
    --sf-warning-80: #ffb779;
    --sf-warning-70: #fa911c;
    --sf-warning-60: #d87900;
    --sf-warning-50: #b26300;
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-warning-50--alfa-4: rgba(178,99,0,0.03922);
    --sf-warning-50--alfa-8: rgba(178,99,0,0.07843);
    --sf-warning-50--alfa-12: rgba(178,99,0,0.12157);
    --sf-warning-50--alfa-16: rgba(178,99,0,0.16078);
    --sf-warning-50--alfa-20: rgba(178,99,0,0.2);
    --sf-warning-50--alfa-24: rgba(178,99,0,0.23922);
    --sf-warning-50--alfa-28: rgba(178,99,0,0.27843);
    --sf-warning-50--alfa-32: rgba(178,99,0,0.32157);
    --sf-warning-40: #8f4e00;
    --sf-warning-35: #7d4400;
    --sf-warning-30: #6c3a00;
    --sf-warning-25: #5c3000;
    --sf-warning-20: #4c2700;
    --sf-warning-15: #3d1e00;
    --sf-warning-10: #2e1500;
    --sf-warning-5: #1f0c00;
    --sf-success-98: #ecffe4;
    --sf-success-95: #c9ffbe;
    --sf-success-90: #8ffa88;
    --sf-success-90--alfa-4: rgba(143,250,136,0.03922);
    --sf-success-90--alfa-8: rgba(143,250,136,0.07843);
    --sf-success-90--alfa-12: rgba(143,250,136,0.12157);
    --sf-success-90--alfa-24: rgba(143,250,136,0.23922);
    --sf-success-85: #81ec7c;
    --sf-success-80: #74dd6f;
    --sf-success-70: #58c157;
    --sf-success-60: #3ba53f;
    --sf-success-50: #198a27;
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-success-50--alfa-4: rgba(25,138,39,0.03922);
    --sf-success-50--alfa-8: rgba(25,138,39,0.07843);
    --sf-success-50--alfa-12: rgba(25,138,39,0.12157);
    --sf-success-50--alfa-16: rgba(25,138,39,0.16078);
    --sf-success-50--alfa-20: rgba(25,138,39,0.2);
    --sf-success-50--alfa-24: rgba(25,138,39,0.23922);
    --sf-success-50--alfa-28: rgba(25,138,39,0.27843);
    --sf-success-50--alfa-32: rgba(25,138,39,0.32157);
    --sf-success-40: #006e17;
    --sf-success-35: #006013;
    --sf-success-30: #00530f;
    --sf-success-25: #00460b;
    --sf-success-20: #003908;
    --sf-success-15: #002d05;
    --sf-success-10: #002203;
    --sf-success-5: #001501;
    /* The tones of initials (sf-avatar tone): eight fixed hues, one palette
       step per use. They are not status colours and not the brand: the status
       ramps say something about the world, and primary, secondary and tertiary
       move with a theme's colour, so a hue that must keep its name under every
       theme has a set of its own (HCT chroma 48, hues 5 to 325, the generator's
       tones, tests/avatar-tones.contract.test.mjs holds them). Tone 50 lays the
       plate on the fill family of the alpha scale, 20 light and 32 dark; tone 30
       and tone 85 are the ink. */
    --sf-tone-rose-50--alfa-20: rgba(184,88,113,0.2);
    --sf-tone-rose-50--alfa-32: rgba(184,88,113,0.32157);
    --sf-tone-rose-30: #7c2942;
    --sf-tone-rose-85: #ffc6d1;
    --sf-tone-amber-50--alfa-20: rgba(172,103,4,0.2);
    --sf-tone-amber-50--alfa-32: rgba(172,103,4,0.32157);
    --sf-tone-amber-30: #693c00;
    --sf-tone-amber-85: #ffcb98;
    --sf-tone-lime-50--alfa-20: rgba(125,123,0,0.2);
    --sf-tone-lime-50--alfa-32: rgba(125,123,0,0.32157);
    --sf-tone-lime-30: #4a4900;
    --sf-tone-lime-85: #dcda62;
    --sf-tone-green-50--alfa-20: rgba(56,134,71,0.2);
    --sf-tone-green-50--alfa-32: rgba(56,134,71,0.32157);
    --sf-tone-green-30: #00531f;
    --sf-tone-green-85: #95e79d;
    --sf-tone-teal-50--alfa-20: rgba(0,133,126,0.2);
    --sf-tone-teal-50--alfa-32: rgba(0,133,126,0.32157);
    --sf-tone-teal-30: #00504b;
    --sf-tone-teal-85: #61e9de;
    --sf-tone-sky-50--alfa-20: rgba(21,125,185,0.2);
    --sf-tone-sky-50--alfa-32: rgba(21,125,185,0.32157);
    --sf-tone-sky-30: #004b72;
    --sf-tone-sky-85: #afd9ff;
    --sf-tone-indigo-50--alfa-20: rgba(109,110,196,0.2);
    --sf-tone-indigo-50--alfa-32: rgba(109,110,196,0.32157);
    --sf-tone-indigo-30: #3b3d8f;
    --sf-tone-indigo-85: #d1d0ff;
    --sf-tone-violet-50--alfa-20: rgba(158,95,170,0.2);
    --sf-tone-violet-50--alfa-32: rgba(158,95,170,0.32157);
    --sf-tone-violet-30: #682e76;
    --sf-tone-violet-85: #f9c2ff;
  }
}
body {
  --sf-stripe--color: var(--sf-surface-inverse);
}

/* width */
@layer sf.base {
  html {
    scrollbar-gutter: auto;
  }
  * {
    --sf-scroll-bg-track: var(--sf-transparent);
    --sf-scroll-bg-thumb: var(--sf-on-neutral-container-graphic);
    --sf-scroll-bg-width: var(--sf-b4);
    --sf-scroll-thumb-size: var(--sf-a6);
    --sf-scroll-thumb-width: var(--sf-scroll-thumb-size);
    --sf-scroll-thumb-inset: var(--sf-a4);
    --sf-scroll-radius: var(--sf-d6);
    scroll-behavior: smooth;
  }
  ::-webkit-scrollbar {
    width: var(--sf-scroll-bg-width);
    height: var(--sf-scroll-bg-width);
  }
  ::-webkit-scrollbar-thumb {
    min-height: var(--sf-scroll-thumb-width);
    min-height: var(--sf-scroll-thumb-size, var(--sf-scroll-thumb-width));
    min-width: var(--sf-scroll-thumb-width);
    min-width: var(--sf-scroll-thumb-size, var(--sf-scroll-thumb-width));
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    background-clip: padding-box;
    border-radius: var(--sf-scroll-radius);
    background-color: var(--sf-scroll-bg-thumb);
  }
  ::-webkit-scrollbar-corner {
    background-color: var(--sf-transparent);
  }
  ::-webkit-scrollbar-track {
    background-color: var(--sf-scroll-bg-track);
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    background-clip: padding-box;
    border-radius: var(--sf-scroll-radius);
  }
}
@layer sf.base {
  @media (min-width: 60rem) {
    :root {
      --sf-container-1--size-max: var(--sf-h5);
      --sf-container-2--size-max: var(--sf-h6);
      --sf-container-3--size-max: var(--sf-h8);
      --sf-container-4--size-max: var(--sf-i0);
      --sf-container-5--size-max: var(--sf-i1);
      --sf-container-6--size-max: var(--sf-i2);
      --sf-container-7--size-max: var(--sf-i3);
      --sf-container-8--size-max: var(--sf-i4);
    }
  }
}
@layer sf.base {
  :root {
    --sf-floating-the-others-1\/3-space-y: 0.625rem;
    --sf-floating-the-others-1\/3-space-y: var(--sf-b0);
    --sf-floating-the-others-1\/2-space-y: 1rem;
    --sf-floating-the-others-1\/2-space-y: var(--sf-b6);
    --sf-floating-the-others-1-space-y: var(--sf-b6);
    --sf-floating-the-others-2-space-y: var(--sf-c1);
    --sf-floating-the-others-3-space-y: var(--sf-c6);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-floating-the-others-1\/3-space-y: 0.75rem;
      --sf-floating-the-others-1\/3-space-y: var(--sf-b2);
      --sf-floating-the-others-1\/2-space-y: 0.875rem;
      --sf-floating-the-others-1\/2-space-y: var(--sf-b4);
      --sf-floating-the-others-1-space-y: var(--sf-b6);
      --sf-floating-the-others-2-space-y: var(--sf-c0);
      --sf-floating-the-others-3-space-y: var(--sf-c1);
    }
  }
}
@layer sf.base {
  :root {
    --sf-floating-active-1\/3-space-y: 0.25rem;
    --sf-floating-active-1\/3-space-y: var(--sf-a4);
    --sf-floating-active-1\/2-space-y: 0.5rem;
    --sf-floating-active-1\/2-space-y: var(--sf-a8);
    --sf-floating-active-1-space-y: var(--sf-a8);
    --sf-floating-active-2-space-y: var(--sf-b2);
    --sf-floating-active-3-space-y: var(--sf-c1);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-floating-active-1\/3-space-y: 0.375rem;
      --sf-floating-active-1\/3-space-y: var(--sf-a6);
      --sf-floating-active-1\/2-space-y: 0.375rem;
      --sf-floating-active-1\/2-space-y: var(--sf-a6);
      --sf-floating-active-1-space-y: var(--sf-a6);
      --sf-floating-active-2-space-y: var(--sf-a8);
      --sf-floating-active-3-space-y: var(--sf-b0);
    }
  }
}
@layer sf.base {
  :root {
    --sf-icon-size-1\/4: 0.625rem;
    --sf-icon-size-1\/4: var(--sf-b0);
    --sf-icon-size-1\/3: 0.75rem;
    --sf-icon-size-1\/3: var(--sf-b2);
    --sf-icon-size-1\/2: 0.875rem;
    --sf-icon-size-1\/2: var(--sf-b4);
    --sf-icon-size-1: var(--sf-b6);
    --sf-icon-size-2: var(--sf-c0);
    --sf-icon-size-3: var(--sf-c2);
    --sf-icon-size-4: var(--sf-c4);
    --sf-icon-size-5: var(--sf-c6);
    --sf-icon-size-6: var(--sf-c8);
    --sf-icon-size-7: var(--sf-d0);
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-text--size-1\/7: 0.25rem;
    --sf-text--size-1\/7: var(--sf-a4);
    --sf-text--size-1\/6: 0.375rem;
    --sf-text--size-1\/6: var(--sf-a6);
    --sf-text--size-1\/5: 0.5rem;
    --sf-text--size-1\/5: var(--sf-a8);
    --sf-text--size-1\/4: 0.625rem;
    --sf-text--size-1\/4: var(--sf-b0);
    --sf-text--size-1\/3: 0.75rem;
    --sf-text--size-1\/3: var(--sf-b2);
    --sf-text--size-1\/2: 0.75rem;
    --sf-text--size-1\/2: var(--sf-b2);
    --sf-text--size-1: var(--sf-b4);
    --sf-text--size-2: var(--sf-b6);
    --sf-text--size-3: var(--sf-b8);
    --sf-text--size-4: var(--sf-c0);
    --sf-text--size-5: var(--sf-c1);
    --sf-text--size-6: var(--sf-c2);
    --sf-text--size-7: var(--sf-c4);
    --sf-text--size-8: var(--sf-c6);
    --sf-text--size-9: var(--sf-c8);
    --sf-text--size-10: var(--sf-d0);
    --sf-text--size-11: var(--sf-d1);
    --sf-text--size-12: var(--sf-d2);
    --sf-text-size-1\/7: var(--sf-text--size-1\/7);
    --sf-text-size-1\/6: var(--sf-text--size-1\/6);
    --sf-text-size-1\/5: var(--sf-text--size-1\/5);
    --sf-text-size-1\/4: var(--sf-text--size-1\/4);
    --sf-text-size-1\/3: var(--sf-text--size-1\/3);
    --sf-text-size-1\/2: var(--sf-text--size-1\/2);
    --sf-text-size-1: var(--sf-text--size-1);
    --sf-text-size-2: var(--sf-text--size-2);
    --sf-text-size-3: var(--sf-text--size-3);
    --sf-text-size-4: var(--sf-text--size-4);
    --sf-text-size-5: var(--sf-text--size-5);
    --sf-text-size-6: var(--sf-text--size-6);
    --sf-text-size-7: var(--sf-text--size-7);
    --sf-text-size-8: var(--sf-text--size-8);
    --sf-text-size-9: var(--sf-text--size-9);
    --sf-text-size-10: var(--sf-text--size-10);
    --sf-text-size-11: var(--sf-text--size-11);
    --sf-text-size-12: var(--sf-text--size-12);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-text--size-1\/7: 0.25rem;
      --sf-text--size-1\/7: var(--sf-a4);
      --sf-text--size-1\/6: 0.375rem;
      --sf-text--size-1\/6: var(--sf-a6);
      --sf-text--size-1\/5: 0.5rem;
      --sf-text--size-1\/5: var(--sf-a8);
      --sf-text--size-1\/4: 0.625rem;
      --sf-text--size-1\/4: var(--sf-b0);
      --sf-text--size-1\/3: 0.75rem;
      --sf-text--size-1\/3: var(--sf-b2);
      --sf-text--size-1\/2: 0.875rem;
      --sf-text--size-1\/2: var(--sf-b4);
      --sf-text--size-1: var(--sf-b6);
      --sf-text--size-2: var(--sf-c0);
      --sf-text--size-3: var(--sf-c2);
      --sf-text--size-4: var(--sf-c4);
      --sf-text--size-5: var(--sf-c6);
      --sf-text--size-6: var(--sf-c8);
      --sf-text--size-7: var(--sf-d0);
      --sf-text--size-8: var(--sf-d2);
      --sf-text--size-9: var(--sf-d4);
      --sf-text--size-10: var(--sf-d6);
      --sf-text--size-11: var(--sf-d8);
      --sf-text--size-12: var(--sf-e0);
      --sf-text-size-1\/7: var(--sf-text--size-1\/7);
      --sf-text-size-1\/6: var(--sf-text--size-1\/6);
      --sf-text-size-1\/5: var(--sf-text--size-1\/5);
      --sf-text-size-1\/4: var(--sf-text--size-1\/4);
      --sf-text-size-1\/3: var(--sf-text--size-1\/3);
      --sf-text-size-1\/2: var(--sf-text--size-1\/2);
      --sf-text-size-1: var(--sf-text--size-1);
      --sf-text-size-2: var(--sf-text--size-2);
      --sf-text-size-3: var(--sf-text--size-3);
      --sf-text-size-4: var(--sf-text--size-4);
      --sf-text-size-5: var(--sf-text--size-5);
      --sf-text-size-6: var(--sf-text--size-6);
      --sf-text-size-7: var(--sf-text--size-7);
      --sf-text-size-8: var(--sf-text--size-8);
      --sf-text-size-9: var(--sf-text--size-9);
      --sf-text-size-10: var(--sf-text--size-10);
      --sf-text-size-11: var(--sf-text--size-11);
      --sf-text-size-12: var(--sf-text--size-12);
    }
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-text--height-1\/4: 0.75rem;
    --sf-text--height-1\/4: var(--sf-b2);
    --sf-text--height-1\/3: 1rem;
    --sf-text--height-1\/3: var(--sf-b6);
    --sf-text--height-1\/2: 1rem;
    --sf-text--height-1\/2: var(--sf-b6);
    --sf-text--height-1: var(--sf-c0);
    --sf-text--height-2: var(--sf-c2);
    --sf-text--height-3: var(--sf-c2);
    --sf-text--height-4: var(--sf-c4);
    --sf-text--height-5: var(--sf-c6);
    --sf-text--height-6: var(--sf-c8);
    --sf-text--height-7: var(--sf-d0);
    --sf-text--height-8: var(--sf-d2);
    --sf-text--height-9: var(--sf-d3);
    --sf-text--height-10: var(--sf-d5);
    --sf-text--height-11: var(--sf-d6);
    --sf-text--height-12: var(--sf-d8);
    --sf-text-height-1\/4: var(--sf-text--height-1\/4);
    --sf-text-height-1\/3: var(--sf-text--height-1\/3);
    --sf-text-height-1\/2: var(--sf-text--height-1\/2);
    --sf-text-height-1: var(--sf-text--height-1);
    --sf-text-height-2: var(--sf-text--height-2);
    --sf-text-height-3: var(--sf-text--height-3);
    --sf-text-height-4: var(--sf-text--height-4);
    --sf-text-height-5: var(--sf-text--height-5);
    --sf-text-height-6: var(--sf-text--height-6);
    --sf-text-height-7: var(--sf-text--height-7);
    --sf-text-height-8: var(--sf-text--height-8);
    --sf-text-height-9: var(--sf-text--height-9);
    --sf-text-height-10: var(--sf-text--height-10);
    --sf-text-height-11: var(--sf-text--height-11);
    --sf-text-height-12: var(--sf-text--height-12);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-text--height-1\/4: 0.75rem;
      --sf-text--height-1\/4: var(--sf-b2);
      --sf-text--height-1\/3: 1rem;
      --sf-text--height-1\/3: var(--sf-b6);
      --sf-text--height-1\/2: 1.25rem;
      --sf-text--height-1\/2: var(--sf-c0);
      --sf-text--height-1: var(--sf-c2);
      --sf-text--height-2: var(--sf-c4);
      --sf-text--height-3: var(--sf-c8);
      --sf-text--height-4: var(--sf-d0);
      --sf-text--height-5: var(--sf-d2);
      --sf-text--height-6: var(--sf-d3);
      --sf-text--height-7: var(--sf-d5);
      --sf-text--height-8: var(--sf-d8);
      --sf-text--height-9: var(--sf-e0);
      --sf-text--height-10: var(--sf-e2);
      --sf-text--height-11: var(--sf-e3);
      --sf-text--height-12: var(--sf-e5);
      --sf-text-height-1\/4: var(--sf-text--height-1\/4);
      --sf-text-height-1\/3: var(--sf-text--height-1\/3);
      --sf-text-height-1\/2: var(--sf-text--height-1\/2);
      --sf-text-height-1: var(--sf-text--height-1);
      --sf-text-height-2: var(--sf-text--height-2);
      --sf-text-height-3: var(--sf-text--height-3);
      --sf-text-height-4: var(--sf-text--height-4);
      --sf-text-height-5: var(--sf-text--height-5);
      --sf-text-height-6: var(--sf-text--height-6);
      --sf-text-height-7: var(--sf-text--height-7);
      --sf-text-height-8: var(--sf-text--height-8);
      --sf-text-height-9: var(--sf-text--height-9);
      --sf-text-height-10: var(--sf-text--height-10);
      --sf-text-height-11: var(--sf-text--height-11);
      --sf-text-height-12: var(--sf-text--height-12);
    }
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-title--height-1: var(--sf-b6);
    --sf-title--height-2: var(--sf-b8);
    --sf-title--height-3: var(--sf-c0);
    --sf-title--height-4: var(--sf-c2);
    --sf-title--height-5: var(--sf-c3);
    --sf-title--height-6: var(--sf-c4);
    --sf-title--height-7: var(--sf-c6);
    --sf-title--height-8: var(--sf-c8);
    --sf-title--height-9: var(--sf-d0);
    --sf-title--height-10: var(--sf-d2);
    --sf-title--height-11: var(--sf-d3);
    --sf-title--height-12: var(--sf-d4);
    --sf-title-height-1: var(--sf-title--height-1);
    --sf-title-height-2: var(--sf-title--height-2);
    --sf-title-height-3: var(--sf-title--height-3);
    --sf-title-height-4: var(--sf-title--height-4);
    --sf-title-height-5: var(--sf-title--height-5);
    --sf-title-height-6: var(--sf-title--height-6);
    --sf-title-height-7: var(--sf-title--height-7);
    --sf-title-height-8: var(--sf-title--height-8);
    --sf-title-height-9: var(--sf-title--height-9);
    --sf-title-height-10: var(--sf-title--height-10);
    --sf-title-height-11: var(--sf-title--height-11);
    --sf-title-height-12: var(--sf-title--height-12);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-title--height-1: var(--sf-b8);
      --sf-title--height-2: var(--sf-c2);
      --sf-title--height-3: var(--sf-c4);
      --sf-title--height-4: var(--sf-c6);
      --sf-title--height-5: var(--sf-c8);
      --sf-title--height-6: var(--sf-d0);
      --sf-title--height-7: var(--sf-d2);
      --sf-title--height-8: var(--sf-d4);
      --sf-title--height-9: var(--sf-d6);
      --sf-title--height-10: var(--sf-d9);
      --sf-title--height-11: var(--sf-e0);
      --sf-title--height-12: var(--sf-e2);
      --sf-title-height-1: var(--sf-title--height-1);
      --sf-title-height-2: var(--sf-title--height-2);
      --sf-title-height-3: var(--sf-title--height-3);
      --sf-title-height-4: var(--sf-title--height-4);
      --sf-title-height-5: var(--sf-title--height-5);
      --sf-title-height-6: var(--sf-title--height-6);
      --sf-title-height-7: var(--sf-title--height-7);
      --sf-title-height-8: var(--sf-title--height-8);
      --sf-title-height-9: var(--sf-title--height-9);
      --sf-title-height-10: var(--sf-title--height-10);
      --sf-title-height-11: var(--sf-title--height-11);
      --sf-title-height-12: var(--sf-title--height-12);
    }
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-label-small--size: var(--sf-text--size-1\/4);
    --sf-label-small--height: var(--sf-text--height-1\/4);
    --sf-label-medium--size: var(--sf-text--size-1\/3);
    --sf-label-medium--height: var(--sf-text--height-1\/3);
    /* Подпись не растёт вместе с экраном: она привязана к контролу, а контрол
       своего размера от ширины не меняет. Две младшие ступени это и делали,
       а большая стояла на адаптивной --sf-text--size-1\/2 и росла как абзац,
       из-за чего совпадала с text-small и выпадала из собственного семейства.
       Фиксирована на прежнем широком значении, 14/20. */
    --sf-label-large--size: var(--sf-b4);
    --sf-label-large--height: var(--sf-c0);
    --sf-text-small--size: var(--sf-text--size-1\/2);
    --sf-text-small--height: var(--sf-text--height-1\/2);
    --sf-text-medium--size: var(--sf-text--size-1);
    --sf-text-medium--height: var(--sf-text--height-1);
    --sf-text-large--size: var(--sf-text--size-2);
    --sf-text-large--height: var(--sf-text--height-2);
    --sf-heading-1--size: var(--sf-text--size-6);
    --sf-heading-1--height: var(--sf-title--height-6);
    --sf-heading-2--size: var(--sf-text--size-5);
    --sf-heading-2--height: var(--sf-title--height-5);
    --sf-heading-3--size: var(--sf-text--size-4);
    --sf-heading-3--height: var(--sf-title--height-4);
    --sf-heading-4--size: var(--sf-text--size-3);
    --sf-heading-4--height: var(--sf-title--height-3);
    --sf-heading-5--size: var(--sf-text--size-2);
    --sf-heading-5--height: var(--sf-title--height-2);
    --sf-heading-6--size: var(--sf-text--size-1);
    --sf-heading-6--height: var(--sf-title--height-1);
    --sf-display-1--size: var(--sf-text--size-12);
    --sf-display-1--height: var(--sf-title--height-12);
    --sf-display-2--size: var(--sf-text--size-11);
    --sf-display-2--height: var(--sf-title--height-11);
    --sf-display-3--size: var(--sf-text--size-10);
    --sf-display-3--height: var(--sf-title--height-10);
    --sf-display-4--size: var(--sf-text--size-9);
    --sf-display-4--height: var(--sf-title--height-9);
    --sf-display-5--size: var(--sf-text--size-8);
    --sf-display-5--height: var(--sf-title--height-8);
    --sf-display-6--size: var(--sf-text--size-7);
    --sf-display-6--height: var(--sf-title--height-7);
    --sf-content--space-text: var(--sf-space-1);
    --sf-content--space-related: var(--sf-space-2);
    --sf-content--space-block: var(--sf-space-3);
    --sf-content--space-section: var(--sf-space-4);
    --sf-text--space-bottom: var(--sf-content--space-text);
    --sf-heading--space-top: var(--sf-content--space-section);
    --sf-heading--space-bottom: var(--sf-content--space-text);
    --sf-heading--margin: var(--sf-heading--space-top);
  }
}
@layer sf.base {
  :root {
    --sf-ui-1\/3--text-space-x: 0.3125rem;
    --sf-ui-1\/3--text-space-x: var(--sf-a5);
    --sf-ui-1\/2--text-space-x: 0.375rem;
    --sf-ui-1\/2--text-space-x: var(--sf-a6);
    --sf-ui-1--text-space-x: var(--sf-a6);
    --sf-ui-2--text-space-x: var(--sf-a8);
    --sf-ui-3--text-space-x: var(--sf-b0);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-ui-1\/3--text-space-x: 0.375rem;
      --sf-ui-1\/3--text-space-x: var(--sf-a6);
      --sf-ui-1\/2--text-space-x: 0.4375rem;
      --sf-ui-1\/2--text-space-x: var(--sf-a7);
      --sf-ui-1--text-space-x: var(--sf-a8);
      --sf-ui-2--text-space-x: var(--sf-b0);
      --sf-ui-3--text-space-x: var(--sf-b2);
    }
  }
}
@layer sf.base {
  :root {
    --sf-ui-1\/3--space-x: 0.625rem;
    --sf-ui-1\/3--space-x: var(--sf-b0);
    --sf-ui-1\/2--space-x: 0.75rem;
    --sf-ui-1\/2--space-x: var(--sf-b2);
    --sf-ui-1--space-x: var(--sf-b4);
    --sf-ui-2--space-x: var(--sf-b8);
    --sf-ui-3--space-x: var(--sf-c1);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-ui-1\/3--space-x: 0.75rem;
      --sf-ui-1\/3--space-x: var(--sf-b2);
      --sf-ui-1\/2--space-x: 0.875rem;
      --sf-ui-1\/2--space-x: var(--sf-b4);
      --sf-ui-1--space-x: var(--sf-b6);
      --sf-ui-2--space-x: var(--sf-c0);
      --sf-ui-3--space-x: var(--sf-c2);
    }
  }
}
@layer sf.base {
  :root {
    --sf-ui-radius-default: var(--sf-radius--ui);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-ui-radius-default: var(--sf-radius--ui);
    }
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-ui-1\/3--space-y-tightness-default: 0.25rem;
    --sf-ui-1\/3--space-y-tightness-default: var(--sf-a4);
    --sf-ui-1\/2--space-y-tightness-default: 0.375rem;
    --sf-ui-1\/2--space-y-tightness-default: var(--sf-a6);
    --sf-ui-1--space-y-tightness-default: var(--sf-a8);
    --sf-ui-2--space-y-tightness-default: var(--sf-b0);
    --sf-ui-3--space-y-tightness-default: var(--sf-b4);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-ui-1\/3--space-y-tightness-default: 0.25rem;
      --sf-ui-1\/3--space-y-tightness-default: var(--sf-a4);
      --sf-ui-1\/2--space-y-tightness-default: 0.375rem;
      --sf-ui-1\/2--space-y-tightness-default: var(--sf-a6);
      --sf-ui-1--space-y-tightness-default: var(--sf-a8);
      --sf-ui-2--space-y-tightness-default: var(--sf-b0);
      --sf-ui-3--space-y-tightness-default: var(--sf-b0);
    }
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-ui-1\/3--space-y-tightness-low: 0.125rem;
    --sf-ui-1\/3--space-y-tightness-low: var(--sf-a2);
    --sf-ui-1\/2--space-y-tightness-low: 0.25rem;
    --sf-ui-1\/2--space-y-tightness-low: var(--sf-a4);
    --sf-ui-1--space-y-tightness-low: var(--sf-a4);
    --sf-ui-2--space-y-tightness-low: var(--sf-a6);
    --sf-ui-3--space-y-tightness-low: var(--sf-b0);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-ui-1\/3--space-y-tightness-low: 0.25rem;
      --sf-ui-1\/3--space-y-tightness-low: var(--sf-a4);
      --sf-ui-1\/2--space-y-tightness-low: 0.25rem;
      --sf-ui-1\/2--space-y-tightness-low: var(--sf-a4);
      --sf-ui-1--space-y-tightness-low: var(--sf-a4);
      --sf-ui-2--space-y-tightness-low: var(--sf-a6);
      --sf-ui-3--space-y-tightness-low: var(--sf-a6);
    }
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-ui-1\/3--space-y-tightness-high: 0.375rem;
    --sf-ui-1\/3--space-y-tightness-high: var(--sf-a6);
    --sf-ui-1\/2--space-y-tightness-high: 0.625rem;
    --sf-ui-1\/2--space-y-tightness-high: var(--sf-b0);
    --sf-ui-1--space-y-tightness-high: var(--sf-b2);
    --sf-ui-2--space-y-tightness-high: var(--sf-b4);
    --sf-ui-3--space-y-tightness-high: var(--sf-c0);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-ui-1\/3--space-y-tightness-high: 0.5rem;
      --sf-ui-1\/3--space-y-tightness-high: var(--sf-a8);
      --sf-ui-1\/2--space-y-tightness-high: 0.625rem;
      --sf-ui-1\/2--space-y-tightness-high: var(--sf-b0);
      --sf-ui-1--space-y-tightness-high: var(--sf-b2);
      --sf-ui-2--space-y-tightness-high: var(--sf-b4);
      --sf-ui-3--space-y-tightness-high: var(--sf-b6);
    }
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-ui-1\/3--space-y-tightness-highest: 0.625rem;
    --sf-ui-1\/3--space-y-tightness-highest: var(--sf-b0);
    --sf-ui-1\/2--space-y-tightness-highest: 0.875rem;
    --sf-ui-1\/2--space-y-tightness-highest: var(--sf-b4);
    --sf-ui-1--space-y-tightness-highest: var(--sf-b6);
    --sf-ui-2--space-y-tightness-highest: var(--sf-c0);
    --sf-ui-3--space-y-tightness-highest: var(--sf-c3);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-ui-1\/3--space-y-tightness-highest: 0.75rem;
      --sf-ui-1\/3--space-y-tightness-highest: var(--sf-b2);
      --sf-ui-1\/2--space-y-tightness-highest: 0.875rem;
      --sf-ui-1\/2--space-y-tightness-highest: var(--sf-b4);
      --sf-ui-1--space-y-tightness-highest: var(--sf-b6);
      --sf-ui-2--space-y-tightness-highest: var(--sf-c0);
      --sf-ui-3--space-y-tightness-highest: var(--sf-c1);
    }
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: b70d02d6902345e17954eafb44f24052b7478439184286bed5a8df6c69c1fe45
 * Do not edit semantic values in this file directly.
 */
@layer sf.base {
  :root {
    --sf-ui-1\/3--control-height: calc(var(--sf-text--height-1\/3) + 2 * var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-ui-1\/2--control-height: calc(var(--sf-text--height-1\/2) + 2 * var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-ui-1--control-height: calc(var(--sf-text--height-1) + 2 * var(--sf-ui-1--space-y-tightness-default));
    --sf-ui-2--control-height: calc(var(--sf-text--height-2) + 2 * var(--sf-ui-2--space-y-tightness-default));
    --sf-ui-3--control-height: calc(var(--sf-text--height-3) + 2 * var(--sf-ui-3--space-y-tightness-default));
  }
}
@layer sf.base {
  :root {
    --sf-ui-1\/3--space-y: 0.25rem;
    --sf-ui-1\/3--space-y: var(--sf-a4);
    --sf-ui-1\/2--space-y: 0.25rem;
    --sf-ui-1\/2--space-y: var(--sf-a4);
    --sf-ui-1--space-y: var(--sf-a4);
    --sf-ui-2--space-y: var(--sf-a6);
    --sf-ui-3--space-y: var(--sf-a6);
    --sf-ui-1\/3--space-y: 0.25rem;
    --sf-ui-1\/3--space-y: var(--sf-a4);
    --sf-ui-1\/2--space-y: 0.25rem;
    --sf-ui-1\/2--space-y: var(--sf-a4);
    --sf-ui-1--space-y: var(--sf-a4);
    --sf-ui-2--space-y: var(--sf-a6);
    --sf-ui-3--space-y: var(--sf-a6);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-ui-1\/3--space-y: 0.375rem;
      --sf-ui-1\/3--space-y: var(--sf-a6);
      --sf-ui-1\/2--space-y: 0.375rem;
      --sf-ui-1\/2--space-y: var(--sf-a6);
      --sf-ui-1--space-y: var(--sf-a8);
      --sf-ui-2--space-y: var(--sf-b0);
      --sf-ui-3--space-y: var(--sf-b0);
      --sf-ui-1\/3--space-y: 0.375rem;
      --sf-ui-1\/3--space-y: var(--sf-a6);
      --sf-ui-1\/2--space-y: 0.375rem;
      --sf-ui-1\/2--space-y: var(--sf-a6);
      --sf-ui-1--space-y: var(--sf-a8);
      --sf-ui-2--space-y: var(--sf-b0);
      --sf-ui-3--space-y: var(--sf-b0);
    }
  }
}
@layer sf.base {
  :root {
    --sf-weight--thin: 100;
    --sf-weight--extra-light: 200;
    --sf-weight--light: 300;
    --sf-weight--regular: 400;
    --sf-weight--medium: 500;
    --sf-weight--semi-bold: 600;
    --sf-weight--bold: 700;
    --sf-weight--extra-bold: 800;
    --sf-weight--black: 900;
    --sf-heading--family: "Inter Variable", "Inter Fallback", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", sans-serif;
    --sf-display--family: "Inter Variable", "Inter Fallback", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", sans-serif;
    --sf-text--family: "Inter Variable", "Inter Fallback", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", sans-serif;
    --sf-text--margin: var(--sf-space-1);
    --sf-text--weight: var(--sf-font-weight-regular);
    --sf-heading--weight: var(--sf-weight--bold);
    --sf-display--weight: var(--sf-weight--light);
  }
  .sf-h-1, h1 {
    font-size: var(--sf-heading-1--size);
    font-family: var(--sf-heading--family);
    line-height: var(--sf-heading-1--height);
    font-weight: var(--sf-heading--weight);
    margin-top: 0;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    margin-bottom: var(--sf-heading--space-bottom);
    -webkit-margin-after: var(--sf-heading--space-bottom);
            margin-block-end: var(--sf-heading--space-bottom);
  }
  .sf-h-2, h2 {
    font-size: var(--sf-heading-2--size);
    font-family: var(--sf-heading--family);
    line-height: var(--sf-heading-2--height);
    font-weight: var(--sf-heading--weight);
    margin-top: var(--sf-heading--space-top);
    -webkit-margin-before: var(--sf-heading--space-top);
            margin-block-start: var(--sf-heading--space-top);
    margin-bottom: var(--sf-heading--space-bottom);
    -webkit-margin-after: var(--sf-heading--space-bottom);
            margin-block-end: var(--sf-heading--space-bottom);
  }
  .sf-h-3, h3 {
    font-size: var(--sf-heading-3--size);
    font-family: var(--sf-heading--family);
    line-height: var(--sf-heading-3--height);
    font-weight: var(--sf-heading--weight);
    margin-top: var(--sf-heading--space-top);
    -webkit-margin-before: var(--sf-heading--space-top);
            margin-block-start: var(--sf-heading--space-top);
    margin-bottom: var(--sf-heading--space-bottom);
    -webkit-margin-after: var(--sf-heading--space-bottom);
            margin-block-end: var(--sf-heading--space-bottom);
  }
  .sf-h-4, h4 {
    font-size: var(--sf-heading-4--size);
    font-family: var(--sf-heading--family);
    line-height: var(--sf-heading-4--height);
    font-weight: var(--sf-heading--weight);
    margin-top: var(--sf-heading--space-top);
    -webkit-margin-before: var(--sf-heading--space-top);
            margin-block-start: var(--sf-heading--space-top);
    margin-bottom: var(--sf-heading--space-bottom);
    -webkit-margin-after: var(--sf-heading--space-bottom);
            margin-block-end: var(--sf-heading--space-bottom);
  }
  .sf-h-5, h5 {
    font-size: var(--sf-heading-5--size);
    font-family: var(--sf-heading--family);
    line-height: var(--sf-heading-5--height);
    font-weight: var(--sf-heading--weight);
    margin-top: var(--sf-heading--space-top);
    -webkit-margin-before: var(--sf-heading--space-top);
            margin-block-start: var(--sf-heading--space-top);
    margin-bottom: var(--sf-heading--space-bottom);
    -webkit-margin-after: var(--sf-heading--space-bottom);
            margin-block-end: var(--sf-heading--space-bottom);
  }
  .sf-h-6, h6 {
    font-size: var(--sf-heading-6--size);
    font-family: var(--sf-heading--family);
    line-height: var(--sf-heading-6--height);
    font-weight: var(--sf-heading--weight);
    margin-top: var(--sf-heading--space-top);
    -webkit-margin-before: var(--sf-heading--space-top);
            margin-block-start: var(--sf-heading--space-top);
    margin-bottom: var(--sf-heading--space-bottom);
    -webkit-margin-after: var(--sf-heading--space-bottom);
            margin-block-end: var(--sf-heading--space-bottom);
  }
  .sf-display-1, .display1, .d1 {
    font-size: var(--sf-display-1--size);
    font-family: var(--sf-display--family);
    line-height: var(--sf-display-1--height);
    font-weight: var(--sf-display--weight);
    margin-top: 0;
    margin-bottom: var(--sf-heading--space-bottom);
    margin-block: 0 var(--sf-heading--space-bottom);
  }
  .sf-display-2, .display2, .d2 {
    font-size: var(--sf-display-2--size);
    font-family: var(--sf-display--family);
    line-height: var(--sf-display-2--height);
    font-weight: var(--sf-display--weight);
    margin-top: 0;
    margin-bottom: var(--sf-heading--space-bottom);
    margin-block: 0 var(--sf-heading--space-bottom);
  }
  .sf-display-3, .display3, .d3 {
    font-size: var(--sf-display-3--size);
    font-family: var(--sf-display--family);
    line-height: var(--sf-display-3--height);
    font-weight: var(--sf-display--weight);
    margin-top: 0;
    margin-bottom: var(--sf-heading--space-bottom);
    margin-block: 0 var(--sf-heading--space-bottom);
  }
  .sf-display-4, .display4, .d4 {
    font-size: var(--sf-display-4--size);
    font-family: var(--sf-display--family);
    line-height: var(--sf-display-4--height);
    font-weight: var(--sf-display--weight);
    margin-top: 0;
    margin-bottom: var(--sf-heading--space-bottom);
    margin-block: 0 var(--sf-heading--space-bottom);
  }
  .sf-display-5, .display5, .d5 {
    font-size: var(--sf-display-5--size);
    font-family: var(--sf-display--family);
    line-height: var(--sf-display-5--height);
    font-weight: var(--sf-display--weight);
    margin-top: 0;
    margin-bottom: var(--sf-heading--space-bottom);
    margin-block: 0 var(--sf-heading--space-bottom);
  }
  .sf-display-6, .display6, .d6 {
    font-size: var(--sf-display-6--size);
    font-family: var(--sf-display--family);
    line-height: var(--sf-display-6--height);
    font-weight: var(--sf-display--weight);
    margin-top: 0;
    margin-bottom: var(--sf-heading--space-bottom);
    margin-block: 0 var(--sf-heading--space-bottom);
  }
  .sf-body-large {
    font-size: var(--sf-text-large--size);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-large--height);
    font-weight: var(--sf-font-weight-regular);
    margin-top: 0;
    margin-bottom: var(--sf-text--space-bottom);
    margin-block: 0 var(--sf-text--space-bottom);
  }
  .sf-body-medium {
    font-size: var(--sf-text-medium--size);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-medium--height);
    font-weight: var(--sf-font-weight-regular);
    margin-top: 0;
    margin-bottom: var(--sf-text--space-bottom);
    margin-block: 0 var(--sf-text--space-bottom);
  }
  .sf-body-small {
    font-size: var(--sf-text-small--size);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-small--height);
    font-weight: var(--sf-font-weight-regular);
    margin-top: 0;
    margin-bottom: var(--sf-text--space-bottom);
    margin-block: 0 var(--sf-text--space-bottom);
  }
  .sf-label-large {
    font-size: var(--sf-label-large--size);
    font-family: var(--sf-text--family);
    line-height: var(--sf-label-large--height);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-label-medium {
    font-size: var(--sf-label-medium--size);
    font-family: var(--sf-text--family);
    line-height: var(--sf-label-medium--height);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-label-small {
    font-size: var(--sf-label-small--size);
    font-family: var(--sf-text--family);
    line-height: var(--sf-label-small--height);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-1\/4 {
    font-size: var(--sf-text-size-1\/4);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-1\/4);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-1\/4 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-1\/3 {
    font-size: var(--sf-text-size-1\/3);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-1\/3);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-1\/3 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-1\/2 {
    font-size: var(--sf-text-size-1\/2);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-1\/2);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-1\/2 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-1 {
    font-size: var(--sf-text-size-1);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-1);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-1 + * {
    margin-top: var(--sf-space-1);
  }
  .sf-text-2 {
    font-size: var(--sf-text-size-2);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-2);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-2 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-3 {
    font-size: var(--sf-text-size-3);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-3);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-3 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-4 {
    font-size: var(--sf-text-size-4);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-4);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-4 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-5 {
    font-size: var(--sf-text-size-5);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-5);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-5 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-6 {
    font-size: var(--sf-text-size-6);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-6);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-6 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-7 {
    font-size: var(--sf-text-size-7);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-7);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-7 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-8 {
    font-size: var(--sf-text-size-8);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-8);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-8 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-9 {
    font-size: var(--sf-text-size-9);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-9);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-9 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-10 {
    font-size: var(--sf-text-size-10);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-10);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-10 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-11 {
    font-size: var(--sf-text-size-11);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-11);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-11 + * {
    margin-top: var(--sf-text--margin);
  }
  .sf-text-12 {
    font-size: var(--sf-text-size-12);
    font-family: var(--sf-text--family);
    line-height: var(--sf-text-height-12);
    font-weight: var(--sf-font-weight-regular);
  }
  .sf-text-12 + * {
    margin-top: var(--sf-text--margin);
  }
}
@layer sf.base {
  body .sf-icon:not(.sf-icon-loaded) {
    font-size: 0 !important;
  }
  button {
    padding: 0;
    background: none;
  }
  div[role=button]:not(.disabled):not([disabled]):not([aria-disabled=true]) {
    cursor: pointer;
  }
  input, textarea {
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: auto;
    border-radius: 0;
    background: transparent;
  }
  :root {
    --sf-font-weight-regular: 400;
    --sf-font-weight-medium: 500;
    --sf-font-weight-bold: 700;
    --sf-font-weight-light: 300;
    --sf-space-auto: auto;
    --sf-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --sf-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --sf-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
    --sf-heading--font-family: inherit;
    --sf-heading--font-weight: 600;
    --sf-heading--font-style: normal;
    --sf-text--family: "Inter Variable", "Inter Fallback", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", sans-serif;
    --sf-heading--family: "Inter Variable", "Inter Fallback", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", sans-serif;
    --sf-display--family: "Inter Variable", "Inter Fallback", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", sans-serif;
    --sf-text--size: var(--sf-text--size-1);
    --sf-text--height: var(--sf-text--height-1);
    --sf-text--weight: 400;
    --sf-heading--weight: 700;
    --sf-display--weight: 300;
    --sf-text--style: inherit;
    --sf-text--tracking: inherit;
    --sf-mark--color: var(--sf-warning-transparent-overlay);
    --sf-code--color: var(--sf-tertiary);
    --sf-code--background: var(--sf-tertiary-container);
    --sf-code--font-family: var(--sf-mono);
    --sf-code--radius: var(--sf-radius-1\/3);
    --sf-text--line-height-tight: 1.25;
    --sf-text--line-height-snug: 1.375;
    --sf-text--line-height-relaxed: 1.625;
    --sf-text--line-height-loose: 2;
    --sf-text--line-height-none: 1;
    --sf-text--line-height-normal: 1.5;
    --sf-text--font-weight-1: 100;
    --sf-text--font-weight-2: 200;
    --sf-text--font-weight-3: 300;
    --sf-text--font-weight-4: 400;
    --sf-text--font-weight-5: 500;
    --sf-text--font-weight-6: 600;
    --sf-text--font-weight-7: 700;
    --sf-text--font-weight-8: 800;
    --sf-text--font-weight-9: 900;
    --sf-text--tracking-tighter: -0.05em;
    --sf-text--tracking-tight: -0.025em;
    --sf-text--tracking-wide: 0.025em;
    --sf-text--tracking-wider: 0.05em;
    --sf-text--tracking-widest: 0.1em;
    --sf-text--tracking-no-tracking: 0em;
    --sf-text--measure: 65ch;
    --sf-text--measure-wide: 80ch;
    --sf-text--measure-narrow: 45ch;
  }
  body {
    font-style: var(--sf-text--style);
    font-size: var(--sf-text--size);
    line-height: var(--sf-text--height);
    font-weight: var(--sf-text--weight);
    font-family: var(--sf-text--family);
    letter-spacing: var(--sf-text--tracking);
    -webkit-text-decoration-color: var(--sf-outline);
            text-decoration-color: var(--sf-outline);
  }
  @media (min-width: 60rem) {
    [data-sf-density=compact] {
      --sf-text--size: var(--sf-text--size-1\/2);
      --sf-text--height: var(--sf-text--height-1\/2);
    }
    [data-sf-density=compact]:not(:root) {
      font-size: var(--sf-text--size);
      line-height: var(--sf-text--height);
    }
  }
  p,
  table,
  ol,
  ul,
  q,
  blockquote {
    word-break: break-word;
    margin-bottom: var(--sf-text--space-bottom);
  }
  .label-small {
    font-size: var(--sf-label-small--size);
    line-height: var(--sf-label-small--height);
  }
  .label,
  .label-medium {
    font-size: var(--sf-label-medium--size);
    line-height: var(--sf-label-medium--height);
  }
  .label-large {
    font-size: var(--sf-label-large--size);
    line-height: var(--sf-label-large--height);
  }
  .body-text-small,
  .text-small {
    font-size: var(--sf-text-small--size);
    line-height: var(--sf-text-small--height);
  }
  .body-text,
  .body-text-medium,
  .text,
  .text-medium {
    font-size: var(--sf-text-medium--size);
    line-height: var(--sf-text-medium--height);
  }
  .body-text-large,
  .text-large {
    font-size: var(--sf-text-large--size);
    line-height: var(--sf-text-large--height);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) ul{
    margin-left: 0px;
  }
  @supports not (margin-inline-start: initial){
  html:not([dir="rtl"]) ul{
    margin-left: 0px;
    }
  }
  ul:where(:dir(ltr)){
    margin-left: 0px;
  }
  _:-ms-input-placeholder, [dir="rtl"] ul{
    margin-right: 0px;
  }
  @supports not (margin-inline-start: initial){
  [dir="rtl"] ul{
    margin-right: 0px;
    }
  }
  ul:where(:dir(rtl)){
    margin-right: 0px;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) ul{
    margin-right: 0px;
  }
  @supports not (margin-inline-end: initial){
  html:not([dir="rtl"]) ul{
    margin-right: 0px;
    }
  }
  ul:where(:dir(ltr)){
    margin-right: 0px;
  }
  _:-ms-input-placeholder, [dir="rtl"] ul{
    margin-left: 0px;
  }
  @supports not (margin-inline-end: initial){
  [dir="rtl"] ul{
    margin-left: 0px;
    }
  }
  ul:where(:dir(rtl)){
    margin-left: 0px;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) ul{
    padding-left: var(--sf-text--size-2);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) ul{
    padding-left: var(--sf-text--size-2);
    }
  }
  ul:where(:dir(ltr)){
    padding-left: var(--sf-text--size-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] ul{
    padding-right: var(--sf-text--size-2);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] ul{
    padding-right: var(--sf-text--size-2);
    }
  }
  ul:where(:dir(rtl)){
    padding-right: var(--sf-text--size-2);
  }
  ul {
    display: block;
    list-style-type: disc;
    list-style-position: outside;
    margin-top: var(--sf-text--size-2);
    -webkit-margin-before: var(--sf-text--size-2);
            margin-block-start: var(--sf-text--size-2);
    -webkit-margin-start: 0px;
            margin-inline-start: 0px;
    -webkit-margin-end: 0px;
            margin-inline-end: 0px;
    -webkit-padding-start: var(--sf-text--size-2);
            padding-inline-start: var(--sf-text--size-2);
  }
  code {
    font-weight: var(--sf-weight--regular);
    color: var(--sf-on-surface);
  }
}
@layer sf.base {
  :root {
    --sf-link--underline-weight: var(--sf-px);
    --sf-link--underline-dotted: var(--sf-a3);
    --sf-link--underline-dashed: var(--sf-a6);
  }
  button:not(:disabled):not([class*=cursor-]) {
    cursor: pointer;
  }
  a {
    text-decoration: none;
  }
  a[href] {
    cursor: pointer;
  }
  a:hover:not(.sf-button) {
    color: var(--sf-link-hover);
    -webkit-text-decoration-color: var(--sf-link-hover);
            text-decoration-color: var(--sf-link-hover);
  }
  a:active:not(.sf-button) {
    color: var(--sf-link-active);
    -webkit-text-decoration-color: var(--sf-link-active);
            text-decoration-color: var(--sf-link-active);
  }
  a:visited:not(.sf-button) {
    color: var(--sf-link-visited);
    -webkit-text-decoration-color: var(--sf-link-visited);
            text-decoration-color: var(--sf-link-visited);
  }
  a:not([class]),
  a[class*=link-],
  [class*=link-] ~ a {
    color: var(--sf-link);
    -webkit-text-decoration-color: var(--sf-link);
            text-decoration-color: var(--sf-link);
    text-underline-offset: 0.1875rem;
    text-underline-offset: var(--sf-a3);
  }
  a:not([class]):hover,
  a[class*=link-]:hover,
  [class*=link-] ~ a:hover {
    -webkit-text-decoration-color: var(--sf-link-hover);
            text-decoration-color: var(--sf-link-hover);
    color: var(--sf-link-hover);
  }
  a:not([class]):active,
  a[class*=link-]:active,
  [class*=link-] ~ a:active {
    -webkit-text-decoration-color: var(--sf-link-active);
            text-decoration-color: var(--sf-link-active);
    color: var(--sf-link-active);
  }
  a:not([class]):visited,
  a[class*=link-]:visited,
  [class*=link-] ~ a:visited {
    -webkit-text-decoration-color: var(--sf-link-visited);
            text-decoration-color: var(--sf-link-visited);
    color: var(--sf-link-visited);
  }
  .disabled a,
  .disabled a[href],
  .disabled a:not([class]),
  .disabled a[class*=link-],
  .disabled [class*=link-] ~ a {
    color: inherit;
    cursor: default;
    -webkit-text-decoration-color: currentColor;
            text-decoration-color: currentColor;
  }
  a.link-inherit,
  .link-inherit a,
  a.link-inherit-link,
  .link-inherit-link a {
    -webkit-text-decoration-color: currentColor;
            text-decoration-color: currentColor;
    color: var(--sf-current);
  }
  a.link-inherit-link:hover,
  .link-inherit-link a:hover {
    -webkit-text-decoration-color: currentColor;
            text-decoration-color: currentColor;
    color: var(--sf-current);
  }
  a.link-underline-none,
  .link-underline-none a,
  a.link-underline-none:hover,
  .link-underline-none a:hover {
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
  }
  a.link-dotted,
  .link-dotted a {
    -webkit-text-decoration-style: dotted;
            text-decoration-style: dotted;
  }
  a.link-dashed,
  .link-dashed a {
    -webkit-text-decoration-style: dashed;
            text-decoration-style: dashed;
  }
}
@layer sf.base {
  @media (min-width: 32rem) {
    :root {
      --sf-breakpoint-sm: var(--sf-g6);
    }
  }
  @media (min-width: 44rem) {
    :root {
      --sf-breakpoint-md: var(--sf-h1);
    }
  }
  @media (min-width: 60rem) {
    :root {
      --sf-breakpoint-lg: var(--sf-h5);
    }
  }
  @media (min-width: 72rem) {
    :root {
      --sf-breakpoint-xl: var(--sf-h8);
    }
  }
  @media (min-width: 80rem) {
    :root {
      --sf-breakpoint-xxl: var(--sf-i0);
    }
  }
}
@layer sf.base {
  :root {
    --sf-transition--property: all;
    --sf-transition--duration: 300ms;
    --sf-transition--timing-function: ease-in;
    --sf-transition--delay: 0ms;
    --sf-duration-fast: 0.1S;
    --sf-duration-normal: 0.3S;
    --sf-duration-slow: 0.5S;
    --sf-animation: cubic-bezier(.25, .8, .25, 1);
    --sf-ease-enter: cubic-bezier(.19, 1, .22, 1);
    --sf-ease-exit: cubic-bezier(.65, 0, .4, 1);
    --sf-ease-move: cubic-bezier(.65, 0, .35, 1);
  }
}
@layer sf.base {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-loader.loader-default{
    left: 0;
  }
  @supports not (inset-inline-start: initial){
  html:not([dir="rtl"]) .sf-loader.loader-default{
    left: 0;
    }
  }
  .sf-loader.loader-default:where(:dir(ltr)){
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-loader.loader-default{
    right: 0;
  }
  @supports not (inset-inline-start: initial){
  [dir="rtl"] .sf-loader.loader-default{
    right: 0;
    }
  }
  .sf-loader.loader-default:where(:dir(rtl)){
    right: 0;
  }
  .sf-loader.loader-default {
    top: 0;
    inset-inline-start: 0;
    position: fixed;
    width: 100%;
    height: 100vh;
    opacity: 1;
    z-index: 1000;
    background-color: var(--sf-surface-0);
    text-align: center;
  }
  .sf-loader.hidden {
    display: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-loader-inner{
    left: 50vw;
  }
  @supports not (inset-inline-start: initial){
  html:not([dir="rtl"]) .sf-loader-inner{
    left: 50vw;
    }
  }
  .sf-loader-inner:where(:dir(ltr)){
    left: 50vw;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-loader-inner{
    right: 50vw;
  }
  @supports not (inset-inline-start: initial){
  [dir="rtl"] .sf-loader-inner{
    right: 50vw;
    }
  }
  .sf-loader-inner:where(:dir(rtl)){
    right: 50vw;
  }
  .sf-loader-inner {
    position: absolute;
    inset-inline-start: 50vw;
    top: 50vh;
  }
  .circle1 {
    -webkit-animation: bounce linear 2.2s infinite forwards;
            animation: bounce linear 2.2s infinite forwards;
    -webkit-animation-delay: 0;
            animation-delay: 0;
  }
  .circle2 {
    -webkit-animation: bounce linear 2.2s infinite forwards;
            animation: bounce linear 2.2s infinite forwards;
    -webkit-animation-delay: 125ms;
            animation-delay: 125ms;
  }
  .circle3 {
    -webkit-animation: bounce linear 2.2s infinite forwards;
            animation: bounce linear 2.2s infinite forwards;
    -webkit-animation-delay: 250ms;
            animation-delay: 250ms;
  }
  .circle4 {
    -webkit-animation: bounce linear 2.2s infinite forwards;
            animation: bounce linear 2.2s infinite forwards;
    -webkit-animation-delay: 0.375s;
            animation-delay: 0.375s;
  }
  @-webkit-keyframes bounce {
    0%, 100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    20%, 50% {
      -webkit-transform: translateY(0.5625rem);
              transform: translateY(0.5625rem);
      -webkit-transform: translateY(var(--sf-a9));
              transform: translateY(var(--sf-a9));
    }
    80% {
      -webkit-transform: translateY(0.125rem);
              transform: translateY(0.125rem);
      -webkit-transform: translateY(var(--sf-a2));
              transform: translateY(var(--sf-a2));
    }
    40% {
      -webkit-transform: translateY(calc(-1 * 0.9375rem));
              transform: translateY(calc(-1 * 0.9375rem));
      -webkit-transform: translateY(calc(-1 * var(--sf-b5)));
              transform: translateY(calc(-1 * var(--sf-b5)));
    }
    60% {
      -webkit-transform: translateY(calc(-1 * 0.4375rem));
              transform: translateY(calc(-1 * 0.4375rem));
      -webkit-transform: translateY(calc(-1 * var(--sf-a7)));
              transform: translateY(calc(-1 * var(--sf-a7)));
    }
  }
  @keyframes bounce {
    0%, 100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    20%, 50% {
      -webkit-transform: translateY(0.5625rem);
              transform: translateY(0.5625rem);
      -webkit-transform: translateY(var(--sf-a9));
              transform: translateY(var(--sf-a9));
    }
    80% {
      -webkit-transform: translateY(0.125rem);
              transform: translateY(0.125rem);
      -webkit-transform: translateY(var(--sf-a2));
              transform: translateY(var(--sf-a2));
    }
    40% {
      -webkit-transform: translateY(calc(-1 * 0.9375rem));
              transform: translateY(calc(-1 * 0.9375rem));
      -webkit-transform: translateY(calc(-1 * var(--sf-b5)));
              transform: translateY(calc(-1 * var(--sf-b5)));
    }
    60% {
      -webkit-transform: translateY(calc(-1 * 0.4375rem));
              transform: translateY(calc(-1 * 0.4375rem));
      -webkit-transform: translateY(calc(-1 * var(--sf-a7)));
              transform: translateY(calc(-1 * var(--sf-a7)));
    }
  }
}
@layer sf.base {
  :root {
    --sf-shadow--level-ratio: 1;
    --sf-shadow--alfa-fill: 24%;
    --sf-shadow--alfa-outline: 12%;
    --sf-shadow--alfa-shade: 8%;
    --sf-shadow--color-fill: color-mix(in srgb, var(--sf-transparent), var(--sf-shadow--color, var(--sf-black, #000)) var(--sf-shadow--alfa-fill));
    --sf-shadow--color-outline: color-mix(in srgb, var(--sf-transparent), var(--sf-shadow--color, var(--sf-black, #000)) var(--sf-shadow--alfa-outline));
    --sf-shadow--color-shading: color-mix(in srgb, var(--sf-transparent), var(--sf-shadow--color, var(--sf-black, #000)) var(--sf-shadow--alfa-shade));
    --sf-shadow--color-shade: var(--sf-shadow--color-shading);
  }
  [class*=shadow] {
    box-shadow: 0 calc(0.125rem * var(--sf-shadow--level-ratio)) calc(0.125rem * var(--sf-shadow--level-ratio)) calc(-1 * 0.0625rem * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-fill), 0 calc(0.0625rem * var(--sf-shadow--level-ratio)) calc(0.1875rem * var(--sf-shadow--level-ratio)) 0 var(--sf-shadow--color-outline), 0 calc(0.125rem * var(--sf-shadow--level-ratio)) calc(0.25rem * var(--sf-shadow--level-ratio)) calc(0.0625rem * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-shading);
    box-shadow: 0 calc(var(--sf-a2) * var(--sf-shadow--level-ratio)) calc(var(--sf-a2) * var(--sf-shadow--level-ratio)) calc(-1 * var(--sf-a1) * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-fill), 0 calc(var(--sf-a1) * var(--sf-shadow--level-ratio)) calc(var(--sf-a3) * var(--sf-shadow--level-ratio)) 0 var(--sf-shadow--color-outline), 0 calc(var(--sf-a2) * var(--sf-shadow--level-ratio)) calc(var(--sf-a4) * var(--sf-shadow--level-ratio)) calc(var(--sf-a1) * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-shading);
  }
  [class*=drop-shadow] {
    box-shadow: none;
    -webkit-filter: drop-shadow(0 calc(0.0625rem * var(--sf-shadow--level-ratio)) calc(0.0625rem * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-fill)) drop-shadow(0 calc(0.0625rem * var(--sf-shadow--level-ratio)) calc(0.1875rem * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-outline)) drop-shadow(0 calc(0.125rem * var(--sf-shadow--level-ratio)) calc(0.25rem * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-shading));
            filter: drop-shadow(0 calc(0.0625rem * var(--sf-shadow--level-ratio)) calc(0.0625rem * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-fill)) drop-shadow(0 calc(0.0625rem * var(--sf-shadow--level-ratio)) calc(0.1875rem * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-outline)) drop-shadow(0 calc(0.125rem * var(--sf-shadow--level-ratio)) calc(0.25rem * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-shading));
    -webkit-filter: drop-shadow(0 calc(var(--sf-a1) * var(--sf-shadow--level-ratio)) calc(var(--sf-a1) * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-fill)) drop-shadow(0 calc(var(--sf-a1) * var(--sf-shadow--level-ratio)) calc(var(--sf-a3) * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-outline)) drop-shadow(0 calc(var(--sf-a2) * var(--sf-shadow--level-ratio)) calc(var(--sf-a4) * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-shading));
            filter: drop-shadow(0 calc(var(--sf-a1) * var(--sf-shadow--level-ratio)) calc(var(--sf-a1) * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-fill)) drop-shadow(0 calc(var(--sf-a1) * var(--sf-shadow--level-ratio)) calc(var(--sf-a3) * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-outline)) drop-shadow(0 calc(var(--sf-a2) * var(--sf-shadow--level-ratio)) calc(var(--sf-a4) * var(--sf-shadow--level-ratio)) var(--sf-shadow--color-shading));
  }
}
@layer sf.base {
  :root {
    /* Нулевая ступень: класс blur-none просил её с самого начала. */
    --sf-blur-none: var(--sf-a0);
    --sf-blur-small: var(--sf-a2);
    --sf-blur-medium: var(--sf-a4);
    --sf-blur-large: var(--sf-a8);
    --sf-surface-overlay--blur: var(--sf-d6);
  }
  @media (min-width: 60rem) {
    :root {
      --sf-blur-none: var(--sf-a0);
      --sf-blur-small: var(--sf-a2);
      --sf-blur-medium: var(--sf-a4);
      --sf-blur-large: var(--sf-a8);
      --sf-surface-overlay--blur: var(--sf-d6);
    }
  }
}
@layer sf.base {
  .theme-light .sf-logo .sf-logo-1 {
    color: #221F20;
  }
  .theme-light .sf-logo .sf-logo-2 {
    color: #969696;
  }
  .theme-dark .sf-logo .sf-logo-1 {
    color: #F6F6F6;
  }
  .theme-dark .sf-logo .sf-logo-2 {
    color: #969696;
  }
  .sf-logo svg {
    width: 100%;
    height: 100%;
    max-height: 1.5rem;
    max-height: var(--sf-c2, 26px);
  }
  @media (min-width: 60rem) {
    .sf-logo svg {
      max-height: 1.75rem;
      max-height: var(--sf-c4, 32px);
    }
  }
}
@layer sf.tokens {
  :root {
    --sf-viewport-height-small: 100vh;
    --sf-viewport-height-large: 100vh;
    --sf-viewport-height-dynamic: 100vh;
    --sf-viewport-width-small: 100vw;
    --sf-viewport-width-large: 100vw;
    --sf-viewport-width-dynamic: 100vw;
  }
  @supports (height: 100svh) and (width: 100svw) {
    :root {
      --sf-viewport-height-small: 100svh;
      --sf-viewport-width-small: 100svw;
    }
  }
  @supports (height: 100lvh) and (width: 100lvw) {
    :root {
      --sf-viewport-height-large: 100lvh;
      --sf-viewport-width-large: 100lvw;
    }
  }
  @supports (height: 100dvh) and (width: 100dvw) {
    :root {
      --sf-viewport-height-dynamic: 100dvh;
      --sf-viewport-width-dynamic: 100dvw;
    }
  }
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(../4f2981d82860061bca3e.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(../8bff79fbfaa8b8167a0b.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(../49594fb515ba00213fc3.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(../b5cdd4765614e027c252.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(../4f908aee8194b11d9c35.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(../f4df85d151e5ee39bc2b.woff2) format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url(../ab4bb8dcda024fe6eff2.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 100 549;
  src: local("Arial"), local("ArialMT");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 550 1000;
  src: local("Arial Bold"), local("Arial-BoldMT");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
/* sf-focus-ring: editor — the editing canvas marks what is being edited in its
   own colour, which is part of the editor's language rather than the product's
   focus colour. Width and style stay the system's. */
@layer sf.components {
  .sf-composition-regions {
    --sf-composition-region-side: minmax(0, var(--sf-f6));
    --sf-composition-region-gap: var(--sf-space-4, 1rem);
    container-type: inline-size;
    display: block;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-composition-regions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-gap: var(--sf-composition-region-gap);
    gap: var(--sf-composition-region-gap);
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-composition-region {
    display: block;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-composition-regions-grid > [data-sf-region-placement=block][data-sf-region-sticky] {
    position: sticky;
    top: 0;
    inset-block-start: 0;
    z-index: 1;
    background: Canvas;
    background: var(--sf-surface-1, Canvas);
  }
  @container (min-width: 48rem) {
    .sf-composition-regions-grid[\:has\(\%3E\%20\[data-sf-region-placement\%3Dstart\]\)] {
      grid-template-columns: var(--sf-composition-region-side) minmax(0, 1fr);
    }
    .sf-composition-regions-grid:has(> [data-sf-region-placement=start]) {
      grid-template-columns: var(--sf-composition-region-side) minmax(0, 1fr);
    }
    .sf-composition-regions-grid[\:has\(\%3E\%20\[data-sf-region-placement\%3Dend\]\)] {
      grid-template-columns: minmax(0, 1fr) var(--sf-composition-region-side);
    }
    .sf-composition-regions-grid:has(> [data-sf-region-placement=end]) {
      grid-template-columns: minmax(0, 1fr) var(--sf-composition-region-side);
    }
    .sf-composition-regions-grid[\:has\(\%3E\%20\[data-sf-region-placement\%3Dstart\]\)][\:has\(\%3E\%20\[data-sf-region-placement\%3Dend\]\)] {
      grid-template-columns: var(--sf-composition-region-side) minmax(0, 1fr) var(--sf-composition-region-side);
    }
    .sf-composition-regions-grid:has(> [data-sf-region-placement=start]):has(> [data-sf-region-placement=end]) {
      grid-template-columns: var(--sf-composition-region-side) minmax(0, 1fr) var(--sf-composition-region-side);
    }
    .sf-composition-regions-grid > [data-sf-region-placement=block] {
      grid-column: 1/-1;
    }
    .sf-composition-regions-grid[\:has\(\%3E\%20\[data-sf-region-placement\%3Dstart\]\)] > [data-sf-region-placement=start] {
      grid-column: 1;
    }
    .sf-composition-regions-grid:has(> [data-sf-region-placement=start]) > [data-sf-region-placement=start] {
      grid-column: 1;
    }
    .sf-composition-regions-grid[\:has\(\%3E\%20\[data-sf-region-placement\%3Dstart\]\)] > [data-sf-region-placement=center] {
      grid-column: 2;
    }
    .sf-composition-regions-grid:has(> [data-sf-region-placement=start]) > [data-sf-region-placement=center] {
      grid-column: 2;
    }
    .sf-composition-regions-grid[\:not-has\(\%3E\%20\[data-sf-region-placement\%3Dstart\]\)] > [data-sf-region-placement=center] {
      grid-column: 1;
    }
    .sf-composition-regions-grid:not(:has(> [data-sf-region-placement=start])) > [data-sf-region-placement=center] {
      grid-column: 1;
    }
    .sf-composition-regions-grid > [data-sf-region-placement=end] {
      grid-column: -2;
    }
    .sf-composition-regions-grid > [data-sf-region-placement=start][data-sf-region-sticky],
    .sf-composition-regions-grid > [data-sf-region-placement=end][data-sf-region-sticky] {
      align-self: start;
      position: sticky;
      top: 0;
      inset-block-start: 0;
    }
  }
}
@layer sf.components {
  sf-composition-scope {
    display: contents;
  }
  [data-sf-layout],
  x-role {
    display: contents;
  }
}
@layer sf.components {
  .sf-editor-field {
    display: grid;
    grid-gap: 0.25rem;
    gap: 0.25rem;
    grid-gap: 0.25rem;
    grid-gap: var(--sf-space-1, 0.25rem);
    gap: var(--sf-space-1, 0.25rem);
    min-width: 0;
    min-inline-size: 0;
    color: CanvasText;
    color: var(--sf-on-surface, CanvasText);
  }
  .sf-editor-field[data-sf-field-kind=toggle] {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    -webkit-column-gap: 0.5rem;
       -moz-column-gap: 0.5rem;
            column-gap: 0.5rem;
    -webkit-column-gap: var(--sf-space-2, 0.5rem);
       -moz-column-gap: var(--sf-space-2, 0.5rem);
            column-gap: var(--sf-space-2, 0.5rem);
  }
  .sf-editor-field[data-sf-field-kind=toggle] > .sf-editor-field-help {
    grid-column: 1/-1;
  }
  .sf-editor-field-control:not([type=checkbox]) {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-block: 0.25rem;
    padding-top: 0.25rem;
    padding-top: var(--sf-space-1, 0.25rem);
    padding-bottom: 0.25rem;
    padding-bottom: var(--sf-space-1, 0.25rem);
    padding-block: var(--sf-space-1, 0.25rem);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-inline: 0.5rem;
    padding-left: 0.5rem;
    padding-left: var(--sf-space-2, 0.5rem);
    padding-right: 0.5rem;
    padding-right: var(--sf-space-2, 0.5rem);
    padding-inline: var(--sf-space-2, 0.5rem);
    border: 1px solid GrayText;
    border: 1px solid var(--sf-outline, GrayText);
    border-radius: 0.25rem;
    border-radius: var(--sf-radius-1, 0.25rem);
    background: Canvas;
    background: var(--sf-surface-1, Canvas);
    color: CanvasText;
    color: var(--sf-on-surface, CanvasText);
    font: inherit;
  }
  .sf-editor-field-control[type=checkbox] {
    width: 1.25rem;
    inline-size: 1.25rem;
    height: 1.25rem;
    block-size: 1.25rem;
    margin: 0;
    accent-color: AccentColor;
    accent-color: var(--sf-primary, AccentColor);
  }
  .sf-editor-field-control.focus-visible,
  .sf-editor-field-disclosure > summary.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) Highlight;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);
    outline-offset: 2px;
  }
  .sf-editor-field-control.focus-visible,
  .sf-editor-field-disclosure > summary.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) Highlight;
    outline: var(--sf-focus--width) var(--sf-focus--style) Highlight;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);
    outline-offset: 2px;
  }
  .sf-editor-field-control:focus-visible,
  .sf-editor-field-disclosure > summary:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) Highlight;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-primary, Highlight);
    outline-offset: 2px;
  }
  .sf-editor-field-help {
    color: CanvasText;
    color: var(--sf-on-surface-variant, var(--sf-on-surface, CanvasText));
  }
  .sf-editor-field-disclosure > summary {
    cursor: pointer;
  }
}
@layer sf.components {
  .sf-workspace {
    container: sf-workspace/inline-size;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    gap: var(--sf-workspace-gap, var(--sf-0));
    box-sizing: border-box;
    height: 100%;
    block-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    overflow: clip;
  }
  .sf-workspace > * {
    --sf-workspace--layout: narrow;
    box-sizing: border-box;
    min-width: 0;
    min-inline-size: 0;
    min-height: 0;
    min-block-size: 0;
    overflow: auto;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
  }
  /* sf-focus-ring: none — a region takes focus only programmatically, when
     the script moves it there (an empty drawer, main shown without a back
     control); like sf-drawer's panel it draws no ring of its own, the
     controls inside it do. */
  .sf-workspace > [tabindex="-1"]:focus {
    outline: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-workspace > .sf-workspace-rail{
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  @supports not (border-inline-end: initial){
  html:not([dir="rtl"]) .sf-workspace > .sf-workspace-rail{
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
    }
  }
  .sf-workspace > .sf-workspace-rail:where(:dir(ltr)){
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-workspace > .sf-workspace-rail{
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  @supports not (border-inline-end: initial){
  [dir="rtl"] .sf-workspace > .sf-workspace-rail{
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
    }
  }
  .sf-workspace > .sf-workspace-rail:where(:dir(rtl)){
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-workspace > .sf-workspace-rail{
    border-right: 1px solid var(--sf-outline-variant);
  }
  @supports not (border-inline-end: initial){
  html:not([dir="rtl"]) .sf-workspace > .sf-workspace-rail{
    border-right: 1px solid var(--sf-outline-variant);
    }
  }
  .sf-workspace > .sf-workspace-rail:where(:dir(ltr)){
    border-right: 1px solid var(--sf-outline-variant);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-workspace > .sf-workspace-rail{
    border-left: 1px solid var(--sf-outline-variant);
  }
  @supports not (border-inline-end: initial){
  [dir="rtl"] .sf-workspace > .sf-workspace-rail{
    border-left: 1px solid var(--sf-outline-variant);
    }
  }
  .sf-workspace > .sf-workspace-rail:where(:dir(rtl)){
    border-left: 1px solid var(--sf-outline-variant);
  }
  .sf-workspace > .sf-workspace-rail {
    flex: 0 0 auto;
    flex: 0 0 var(--sf-workspace-rail, auto);
    -webkit-border-end: 1px solid var(--sf-outline-variant);
            border-inline-end: 1px solid var(--sf-outline-variant);
    -webkit-border-end: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
            border-inline-end: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-workspace > .sf-workspace-list{
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-workspace--list-edge, var(--sf-px)) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  @supports not (border-inline-end: initial){
  html:not([dir="rtl"]) .sf-workspace > .sf-workspace-list{
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-workspace--list-edge, var(--sf-px)) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
    }
  }
  .sf-workspace > .sf-workspace-list:where(:dir(ltr)){
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-workspace--list-edge, var(--sf-px)) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-workspace > .sf-workspace-list{
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-workspace--list-edge, var(--sf-px)) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  @supports not (border-inline-end: initial){
  [dir="rtl"] .sf-workspace > .sf-workspace-list{
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-workspace--list-edge, var(--sf-px)) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
    }
  }
  .sf-workspace > .sf-workspace-list:where(:dir(rtl)){
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-workspace--list-edge, var(--sf-px)) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-workspace > .sf-workspace-list{
    border-right: 1px solid var(--sf-outline-variant);
  }
  @supports not (border-inline-end: initial){
  html:not([dir="rtl"]) .sf-workspace > .sf-workspace-list{
    border-right: 1px solid var(--sf-outline-variant);
    }
  }
  .sf-workspace > .sf-workspace-list:where(:dir(ltr)){
    border-right: 1px solid var(--sf-outline-variant);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-workspace > .sf-workspace-list{
    border-left: 1px solid var(--sf-outline-variant);
  }
  @supports not (border-inline-end: initial){
  [dir="rtl"] .sf-workspace > .sf-workspace-list{
    border-left: 1px solid var(--sf-outline-variant);
    }
  }
  .sf-workspace > .sf-workspace-list:where(:dir(rtl)){
    border-left: 1px solid var(--sf-outline-variant);
  }
  .sf-workspace > .sf-workspace-list {
    flex: 0 0 20rem;
    flex: 0 0 var(--sf-workspace-list, var(--sf-g0));
    -webkit-border-end: 1px solid var(--sf-outline-variant);
            border-inline-end: 1px solid var(--sf-outline-variant);
    -webkit-border-end: var(--sf-workspace--list-edge, var(--sf-px)) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
            border-inline-end: var(--sf-workspace--list-edge, var(--sf-px)) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  .sf-workspace > .sf-workspace-main {
    flex: 1 1 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-workspace > .sf-workspace-panel{
    right: 0;
  }
  @supports not (inset-inline-end: initial){
  html:not([dir="rtl"]) .sf-workspace > .sf-workspace-panel{
    right: 0;
    }
  }
  .sf-workspace > .sf-workspace-panel:where(:dir(ltr)){
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-workspace > .sf-workspace-panel{
    left: 0;
  }
  @supports not (inset-inline-end: initial){
  [dir="rtl"] .sf-workspace > .sf-workspace-panel{
    left: 0;
    }
  }
  .sf-workspace > .sf-workspace-panel:where(:dir(rtl)){
    left: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-workspace > .sf-workspace-panel{
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  @supports not (border-inline-start: initial){
  html:not([dir="rtl"]) .sf-workspace > .sf-workspace-panel{
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
    }
  }
  .sf-workspace > .sf-workspace-panel:where(:dir(ltr)){
    border-left: 1px solid var(--sf-outline-variant);
    border-left: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-workspace > .sf-workspace-panel{
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  @supports not (border-inline-start: initial){
  [dir="rtl"] .sf-workspace > .sf-workspace-panel{
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
    }
  }
  .sf-workspace > .sf-workspace-panel:where(:dir(rtl)){
    border-right: 1px solid var(--sf-outline-variant);
    border-right: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-workspace > .sf-workspace-panel{
    border-left: 1px solid var(--sf-outline-variant);
  }
  @supports not (border-inline-start: initial){
  html:not([dir="rtl"]) .sf-workspace > .sf-workspace-panel{
    border-left: 1px solid var(--sf-outline-variant);
    }
  }
  .sf-workspace > .sf-workspace-panel:where(:dir(ltr)){
    border-left: 1px solid var(--sf-outline-variant);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-workspace > .sf-workspace-panel{
    border-right: 1px solid var(--sf-outline-variant);
  }
  @supports not (border-inline-start: initial){
  [dir="rtl"] .sf-workspace > .sf-workspace-panel{
    border-right: 1px solid var(--sf-outline-variant);
    }
  }
  .sf-workspace > .sf-workspace-panel:where(:dir(rtl)){
    border-right: 1px solid var(--sf-outline-variant);
  }
  .sf-workspace > .sf-workspace-panel {
    flex: 0 0 auto;
    top: 0;
    bottom: 0;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(22rem, 100%);
    inline-size: min(22rem, 100%);
    width: min(22rem, 100%);
    width: min(var(--sf-workspace-panel, var(--sf-g1)), 100%);
    inline-size: min(var(--sf-workspace-panel, var(--sf-g1)), 100%);
    -webkit-border-start: 1px solid var(--sf-outline-variant);
            border-inline-start: 1px solid var(--sf-outline-variant);
    -webkit-border-start: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
            border-inline-start: var(--sf-px) solid var(--sf-workspace-divider-color, var(--sf-outline-variant));
  }
  .sf-workspace:not([data-sf-workspace-panel=open]) > .sf-workspace-panel,
  .sf-workspace[data-sf-workspace-list=hidden] > .sf-workspace-list {
    display: none;
  }
  .sf-workspace[data-sf-workspace-list=hidden] > .sf-workspace-main .sf-workspace-back {
    display: none;
  }
  @container sf-workspace (width < 32rem) {
    .sf-workspace.sf-workspace--split-g6[data-sf-workspace-view=main] > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace.sf-workspace--split-g6[data-sf-workspace-view=main] > .sf-workspace-list {
      display: none;
    }
    .sf-workspace.sf-workspace--split-g6[data-sf-workspace-list=hidden] > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace.sf-workspace--split-g6[data-sf-workspace-list=hidden] > .sf-workspace-list {
      display: none;
    }
    .sf-workspace.sf-workspace--split-g6:not([data-sf-workspace-view=main]):not([data-sf-workspace-list=hidden]) > .sf-workspace-main {
      display: none;
    }
    .sf-workspace.sf-workspace--split-g6 > .sf-workspace-list {
      --sf-workspace--list-edge: 0;
      flex: 1 1 0;
    }
  }
  @container sf-workspace (width >= 32rem) {
    .sf-workspace.sf-workspace--split-g6 > * {
      --sf-workspace--layout: split;
    }
    .sf-workspace.sf-workspace--split-g6 > .sf-workspace-main .sf-workspace-back {
      display: none;
    }
  }
  @container sf-workspace (width < 40rem) {
    .sf-workspace:not([class*=sf-workspace--split-]):not([data-sf-workspace-view=main]):not([data-sf-workspace-list=hidden]) > .sf-workspace-main {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h0:not([data-sf-workspace-view=main]):not([data-sf-workspace-list=hidden]) > .sf-workspace-main {
      display: none;
    }
    .sf-workspace[data-sf-workspace-view=main]:not([class*=sf-workspace--split-]) > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace[data-sf-workspace-view=main]:not([class*=sf-workspace--split-]) > .sf-workspace-list {
      display: none;
    }
    .sf-workspace[data-sf-workspace-list=hidden]:not([class*=sf-workspace--split-]) > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace[data-sf-workspace-list=hidden]:not([class*=sf-workspace--split-]) > .sf-workspace-list {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h0[data-sf-workspace-view=main] > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h0[data-sf-workspace-view=main] > .sf-workspace-list {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h0[data-sf-workspace-list=hidden] > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h0[data-sf-workspace-list=hidden] > .sf-workspace-list {
      display: none;
    }
    .sf-workspace:not([class*=sf-workspace--split-]) > .sf-workspace-list {
      --sf-workspace--list-edge: 0;
      flex: 1 1 0;
    }
    .sf-workspace.sf-workspace--split-h0 > .sf-workspace-list {
      --sf-workspace--list-edge: 0;
      flex: 1 1 0;
    }
  }
  @container sf-workspace (width >= 40rem) {
    .sf-workspace:not([class*=sf-workspace--split-]) > * {
      --sf-workspace--layout: split;
    }
    .sf-workspace.sf-workspace--split-h0 > * {
      --sf-workspace--layout: split;
    }
    .sf-workspace:not([class*=sf-workspace--split-]) > .sf-workspace-main .sf-workspace-back {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h0 > .sf-workspace-main .sf-workspace-back {
      display: none;
    }
  }
  @container sf-workspace (width < 48rem) {
    .sf-workspace.sf-workspace--split-h2[data-sf-workspace-view=main] > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h2[data-sf-workspace-view=main] > .sf-workspace-list {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h2[data-sf-workspace-list=hidden] > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h2[data-sf-workspace-list=hidden] > .sf-workspace-list {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h2:not([data-sf-workspace-view=main]):not([data-sf-workspace-list=hidden]) > .sf-workspace-main {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h2 > .sf-workspace-list {
      --sf-workspace--list-edge: 0;
      flex: 1 1 0;
    }
  }
  @container sf-workspace (width >= 48rem) {
    .sf-workspace.sf-workspace--split-h2 > * {
      --sf-workspace--layout: split;
    }
    .sf-workspace.sf-workspace--split-h2 > .sf-workspace-main .sf-workspace-back {
      display: none;
    }
  }
  @container sf-workspace (width < 56rem) {
    .sf-workspace.sf-workspace--split-h4[data-sf-workspace-view=main] > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h4[data-sf-workspace-view=main] > .sf-workspace-list {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h4[data-sf-workspace-list=hidden] > .sf-workspace-rail {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h4[data-sf-workspace-list=hidden] > .sf-workspace-list {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h4:not([data-sf-workspace-view=main]):not([data-sf-workspace-list=hidden]) > .sf-workspace-main {
      display: none;
    }
    .sf-workspace.sf-workspace--split-h4 > .sf-workspace-list {
      --sf-workspace--list-edge: 0;
      flex: 1 1 0;
    }
  }
  @container sf-workspace (width >= 56rem) {
    .sf-workspace.sf-workspace--split-h4 > * {
      --sf-workspace--layout: split;
    }
    .sf-workspace.sf-workspace--split-h4 > .sf-workspace-main .sf-workspace-back {
      display: none;
    }
  }
  @container sf-workspace (width < 56rem) {
    .sf-workspace.sf-workspace--wide-h4 > .sf-workspace-panel {
      position: absolute;
      z-index: 9000;
      z-index: var(--sf-z-index-layer, 9000);
      background: var(--sf-elevation-4--surface);
      background: var(--sf-workspace-drawer-background, var(--sf-elevation-4--surface));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-elevation-4--shadow), 0 0 0 100vmax color-mix(in srgb, var(--sf-black) var(--sf-opacity-60), transparent);
    }
    @media (prefers-reduced-motion: no-preference) {
      .sf-workspace.sf-workspace--wide-h4 > .sf-workspace-panel {
        transition: translate var(--sf-duration-normal) var(--sf-ease-enter);
      }
      @starting-style {
        .sf-workspace.sf-workspace--wide-h4 > .sf-workspace-panel {
          translate: 100% 0;
        }
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      @starting-style {
        .sf-workspace.sf-workspace--wide-h4:dir(rtl) > .sf-workspace-panel {
          translate: -100% 0;
        }
      }
    }
  }
  @container sf-workspace (width >= 56rem) {
    .sf-workspace.sf-workspace--wide-h4 > * {
      --sf-workspace--layout: wide;
    }
  }
  @container sf-workspace (width < 64rem) {
    .sf-workspace:not([class*=sf-workspace--wide-]) > .sf-workspace-panel {
      position: absolute;
      z-index: 9000;
      z-index: var(--sf-z-index-layer, 9000);
      background: var(--sf-elevation-4--surface);
      background: var(--sf-workspace-drawer-background, var(--sf-elevation-4--surface));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-elevation-4--shadow), 0 0 0 100vmax color-mix(in srgb, var(--sf-black) var(--sf-opacity-60), transparent);
    }
    .sf-workspace.sf-workspace--wide-h6 > .sf-workspace-panel {
      position: absolute;
      z-index: 9000;
      z-index: var(--sf-z-index-layer, 9000);
      background: var(--sf-elevation-4--surface);
      background: var(--sf-workspace-drawer-background, var(--sf-elevation-4--surface));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-elevation-4--shadow), 0 0 0 100vmax color-mix(in srgb, var(--sf-black) var(--sf-opacity-60), transparent);
    }
    @media (prefers-reduced-motion: no-preference) {
      .sf-workspace:not([class*=sf-workspace--wide-]) > .sf-workspace-panel {
        transition: translate var(--sf-duration-normal) var(--sf-ease-enter);
      }
      .sf-workspace.sf-workspace--wide-h6 > .sf-workspace-panel {
        transition: translate var(--sf-duration-normal) var(--sf-ease-enter);
      }
      @starting-style {
        .sf-workspace:not([class*=sf-workspace--wide-]) > .sf-workspace-panel {
          translate: 100% 0;
        }
        .sf-workspace.sf-workspace--wide-h6 > .sf-workspace-panel {
          translate: 100% 0;
        }
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      @starting-style {
        .sf-workspace:not([class*=sf-workspace--wide-]):dir(rtl) > .sf-workspace-panel {
          translate: -100% 0;
        }
        .sf-workspace.sf-workspace--wide-h6:dir(rtl) > .sf-workspace-panel {
          translate: -100% 0;
        }
      }
    }
  }
  @container sf-workspace (width >= 64rem) {
    .sf-workspace:not([class*=sf-workspace--wide-]) > * {
      --sf-workspace--layout: wide;
    }
    .sf-workspace.sf-workspace--wide-h6 > * {
      --sf-workspace--layout: wide;
    }
  }
  @container sf-workspace (width < 72rem) {
    .sf-workspace.sf-workspace--wide-h8 > .sf-workspace-panel {
      position: absolute;
      z-index: 9000;
      z-index: var(--sf-z-index-layer, 9000);
      background: var(--sf-elevation-4--surface);
      background: var(--sf-workspace-drawer-background, var(--sf-elevation-4--surface));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-elevation-4--shadow), 0 0 0 100vmax color-mix(in srgb, var(--sf-black) var(--sf-opacity-60), transparent);
    }
    @media (prefers-reduced-motion: no-preference) {
      .sf-workspace.sf-workspace--wide-h8 > .sf-workspace-panel {
        transition: translate var(--sf-duration-normal) var(--sf-ease-enter);
      }
      @starting-style {
        .sf-workspace.sf-workspace--wide-h8 > .sf-workspace-panel {
          translate: 100% 0;
        }
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      @starting-style {
        .sf-workspace.sf-workspace--wide-h8:dir(rtl) > .sf-workspace-panel {
          translate: -100% 0;
        }
      }
    }
  }
  @container sf-workspace (width >= 72rem) {
    .sf-workspace.sf-workspace--wide-h8 > * {
      --sf-workspace--layout: wide;
    }
  }
  @container sf-workspace (width < 80rem) {
    .sf-workspace.sf-workspace--wide-i0 > .sf-workspace-panel {
      position: absolute;
      z-index: 9000;
      z-index: var(--sf-z-index-layer, 9000);
      background: var(--sf-elevation-4--surface);
      background: var(--sf-workspace-drawer-background, var(--sf-elevation-4--surface));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-elevation-4--shadow), 0 0 0 100vmax color-mix(in srgb, var(--sf-black) var(--sf-opacity-60), transparent);
    }
    @media (prefers-reduced-motion: no-preference) {
      .sf-workspace.sf-workspace--wide-i0 > .sf-workspace-panel {
        transition: translate var(--sf-duration-normal) var(--sf-ease-enter);
      }
      @starting-style {
        .sf-workspace.sf-workspace--wide-i0 > .sf-workspace-panel {
          translate: 100% 0;
        }
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      @starting-style {
        .sf-workspace.sf-workspace--wide-i0:dir(rtl) > .sf-workspace-panel {
          translate: -100% 0;
        }
      }
    }
  }
  @container sf-workspace (width >= 80rem) {
    .sf-workspace.sf-workspace--wide-i0 > * {
      --sf-workspace--layout: wide;
    }
  }
  @container sf-workspace (width < 96rem) {
    .sf-workspace.sf-workspace--wide-i2 > .sf-workspace-panel {
      position: absolute;
      z-index: 9000;
      z-index: var(--sf-z-index-layer, 9000);
      background: var(--sf-elevation-4--surface);
      background: var(--sf-workspace-drawer-background, var(--sf-elevation-4--surface));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-elevation-4--shadow), 0 0 0 100vmax color-mix(in srgb, var(--sf-black) var(--sf-opacity-60), transparent);
    }
    @media (prefers-reduced-motion: no-preference) {
      .sf-workspace.sf-workspace--wide-i2 > .sf-workspace-panel {
        transition: translate var(--sf-duration-normal) var(--sf-ease-enter);
      }
      @starting-style {
        .sf-workspace.sf-workspace--wide-i2 > .sf-workspace-panel {
          translate: 100% 0;
        }
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      @starting-style {
        .sf-workspace.sf-workspace--wide-i2:dir(rtl) > .sf-workspace-panel {
          translate: -100% 0;
        }
      }
    }
  }
  @container sf-workspace (width >= 96rem) {
    .sf-workspace.sf-workspace--wide-i2 > * {
      --sf-workspace--layout: wide;
    }
  }
}
/* One bar centred in each row of the given height, as wide as the share. */
@layer sf.base {
  /* The box before the code (owner, 2026-10-15, rule 5; the box rule of
     2026-10-28, stand 25 D1/D4). A Smart element whose code has not arrived
     yet keeps the box the page gave it, and core draws no shape of its own in
     it: core does not know the loaded shape -- a list's row height, its
     toolbar, a menu's columns are the component's -- and a shape it guessed
     was a picture of its own between the page and the component (a list
     1176 px tall that the component then drew at 200, then 640, then 1096; a
     menu in stripes before the menu's skeleton). So:

     - static markup printed in the element (data-sf-static, the composed first
       paint) is the element's picture and box; no placeholder is drawn;
     - otherwise the element reserves the box the page declares -- its own
       block-size or min-block-size, or --sf-skeleton-block-size -- and nothing
       more; a count alone (--sf-skeleton-rows) is not a box;
     - a «block» or a «line» draws that declared box as one bar: the shape it
       names is the box itself; «rows», «record» and «menu» reserve the box and
       leave it empty until the component draws its own skeleton.

     The shape still names the kind for a manifest and a page; the room is the
     page's (it knows the loaded box) or the printed first paint's. */
  :where([data-sf-skeleton]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    --sf-skeleton-base: var(--sf-neutral-60--alfa-48);
    --sf-skeleton-line: var(--sf-text-height-1);
    --sf-skeleton-bar: var(--sf-text-size-1);
    display: block;
    background-repeat: no-repeat;
  }
  :where([data-sf-skeleton]):not(:defined):not(:has(> [data-sf-static])) {
    --sf-skeleton-base: var(--sf-neutral-60--alfa-48);
    --sf-skeleton-line: var(--sf-text-height-1);
    --sf-skeleton-bar: var(--sf-text-size-1);
    display: block;
    background-repeat: no-repeat;
  }
  :where([data-sf-skeleton=rows]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)],
  :where([data-sf-skeleton=record]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)],
  :where([data-sf-skeleton=menu]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: 0;
    min-block-size: 0;
    min-height: 0;
    min-height: var(--sf-skeleton-block-size, 0);
    min-block-size: var(--sf-skeleton-block-size, 0);
  }
  :where([data-sf-skeleton=rows]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)],
  :where([data-sf-skeleton=record]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)],
  :where([data-sf-skeleton=menu]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: 0;
    min-block-size: 0;
    min-height: 0;
    min-height: var(--sf-skeleton-block-size, 0);
    min-height: 0;
    min-block-size: 0;
    min-height: 0;
    min-height: var(--sf-skeleton-block-size, 0);
    min-block-size: var(--sf-skeleton-block-size, 0);
  }
  :where([data-sf-skeleton=rows]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)],
  :where([data-sf-skeleton=record]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)],
  :where([data-sf-skeleton=menu]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: 0;
    min-height: 0;
    min-block-size: 0;
    min-height: 0;
    min-height: 0;
    min-height: var(--sf-skeleton-block-size, 0);
    min-height: 0;
    min-block-size: 0;
    min-height: 0;
    min-height: var(--sf-skeleton-block-size, 0);
    min-block-size: var(--sf-skeleton-block-size, 0);
  }
  :where([data-sf-skeleton=rows]):not(:defined):not(:has(> [data-sf-static])),
  :where([data-sf-skeleton=record]):not(:defined):not(:has(> [data-sf-static])),
  :where([data-sf-skeleton=menu]):not(:defined):not(:has(> [data-sf-static])) {
    min-height: 0;
    min-block-size: 0;
    min-height: 0;
    min-height: var(--sf-skeleton-block-size, 0);
    min-block-size: var(--sf-skeleton-block-size, 0);
  }
  :where([data-sf-skeleton=block]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-height: var(--sf-ui-1--control-height);
    min-height: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    min-block-size: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    background-image: linear-gradient(var(--sf-skeleton-base), var(--sf-skeleton-base));
    background-size: 100% 100%;
    border-radius: var(--sf-radius--ui);
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  :where([data-sf-skeleton=block]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-height: var(--sf-ui-1--control-height);
    min-height: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-height: var(--sf-ui-1--control-height);
    min-height: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    min-block-size: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    background-image: linear-gradient(var(--sf-skeleton-base), var(--sf-skeleton-base));
    background-size: 100% 100%;
    border-radius: var(--sf-radius--ui);
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  :where([data-sf-skeleton=block]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: var(--sf-ui-1--control-height);
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-height: var(--sf-ui-1--control-height);
    min-height: var(--sf-ui-1--control-height);
    min-height: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-height: var(--sf-ui-1--control-height);
    min-height: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    min-block-size: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    background-image: linear-gradient(var(--sf-skeleton-base), var(--sf-skeleton-base));
    background-size: 100% 100%;
    border-radius: var(--sf-radius--ui);
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  :where([data-sf-skeleton=block]):not(:defined):not(:has(> [data-sf-static])) {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-height: var(--sf-ui-1--control-height);
    min-height: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    min-block-size: var(--sf-skeleton-block-size, var(--sf-ui-1--control-height));
    background-image: linear-gradient(var(--sf-skeleton-base), var(--sf-skeleton-base));
    background-size: 100% 100%;
    border-radius: var(--sf-radius--ui);
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  :where([data-sf-skeleton=line]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: var(--sf-skeleton-line);
    min-block-size: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    min-block-size: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    background-image: repeating-linear-gradient(to bottom, transparent 0 calc((var(--sf-skeleton-line) - var(--sf-skeleton-bar)) / 2), var(--sf-skeleton-base) calc((var(--sf-skeleton-line) - var(--sf-skeleton-bar)) / 2) calc((var(--sf-skeleton-line) + var(--sf-skeleton-bar)) / 2), transparent calc((var(--sf-skeleton-line) + var(--sf-skeleton-bar)) / 2) var(--sf-skeleton-line));
    background-size: 60% 100%;
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  :where([data-sf-skeleton=line]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: var(--sf-skeleton-line);
    min-block-size: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    min-height: var(--sf-skeleton-line);
    min-block-size: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    min-block-size: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    background-image: repeating-linear-gradient(to bottom, transparent 0 calc((var(--sf-skeleton-line) - var(--sf-skeleton-bar)) / 2), var(--sf-skeleton-base) calc((var(--sf-skeleton-line) - var(--sf-skeleton-bar)) / 2) calc((var(--sf-skeleton-line) + var(--sf-skeleton-bar)) / 2), transparent calc((var(--sf-skeleton-line) + var(--sf-skeleton-bar)) / 2) var(--sf-skeleton-line));
    background-size: 60% 100%;
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  :where([data-sf-skeleton=line]):not(:defined)[\:not-has\(\%3E\%20\[data-sf-static\]\)] {
    min-height: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-line);
    min-block-size: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    min-height: var(--sf-skeleton-line);
    min-block-size: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    min-block-size: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    background-image: repeating-linear-gradient(to bottom, transparent 0 calc((var(--sf-skeleton-line) - var(--sf-skeleton-bar)) / 2), var(--sf-skeleton-base) calc((var(--sf-skeleton-line) - var(--sf-skeleton-bar)) / 2) calc((var(--sf-skeleton-line) + var(--sf-skeleton-bar)) / 2), transparent calc((var(--sf-skeleton-line) + var(--sf-skeleton-bar)) / 2) var(--sf-skeleton-line));
    background-size: 60% 100%;
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  :where([data-sf-skeleton=line]):not(:defined):not(:has(> [data-sf-static])) {
    min-height: var(--sf-skeleton-line);
    min-block-size: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-line);
    min-height: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    min-block-size: var(--sf-skeleton-block-size, var(--sf-skeleton-line));
    background-image: repeating-linear-gradient(to bottom, transparent 0 calc((var(--sf-skeleton-line) - var(--sf-skeleton-bar)) / 2), var(--sf-skeleton-base) calc((var(--sf-skeleton-line) - var(--sf-skeleton-bar)) / 2) calc((var(--sf-skeleton-line) + var(--sf-skeleton-bar)) / 2), transparent calc((var(--sf-skeleton-line) + var(--sf-skeleton-bar)) / 2) var(--sf-skeleton-line));
    background-size: 60% 100%;
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  @-webkit-keyframes sf-placeholder-pulse {
    50% {
      opacity: var(--sf-opacity-60);
    }
  }
  @keyframes sf-placeholder-pulse {
    50% {
      opacity: var(--sf-opacity-60);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :where([data-sf-skeleton]):not(:defined) {
      -webkit-animation: none;
              animation: none;
    }
  }
}
@layer sf.base {
  /* A region on its way (region navigation, 2026-10-15): the content that is
     leaving gives up its place to the skeleton of a page -- a heading bar and
     rows -- in that region only; the shell around it stays as it is. The
     region keeps its size, so nothing below it moves while the answer comes. */
  [data-sf-region-loading] {
    --sf-skeleton-base: var(--sf-neutral-60--alfa-48);
    --sf-skeleton-row: calc(var(--sf-text-height-1) + 2 * var(--sf-space-1));
    background-repeat: no-repeat;
    background-image: linear-gradient(var(--sf-skeleton-base), var(--sf-skeleton-base)), repeating-linear-gradient(to bottom, transparent 0 calc((var(--sf-skeleton-row) - var(--sf-text-size-1)) / 2), var(--sf-skeleton-base) calc((var(--sf-skeleton-row) - var(--sf-text-size-1)) / 2) calc((var(--sf-skeleton-row) + var(--sf-text-size-1)) / 2), transparent calc((var(--sf-skeleton-row) + var(--sf-text-size-1)) / 2) var(--sf-skeleton-row)), repeating-linear-gradient(to bottom, transparent 0 calc((var(--sf-skeleton-row) - var(--sf-text-size-1)) / 2), var(--sf-skeleton-base) calc((var(--sf-skeleton-row) - var(--sf-text-size-1)) / 2) calc((var(--sf-skeleton-row) + var(--sf-text-size-1)) / 2), transparent calc((var(--sf-skeleton-row) + var(--sf-text-size-1)) / 2) var(--sf-skeleton-row));
    background-size: 30% var(--sf-text-height-3), 35% 100%, 25% 100%;
    background-position: var(--sf-space-1) var(--sf-space-1), var(--sf-space-1) calc(var(--sf-space-3) + var(--sf-text-height-2)), 55% calc(var(--sf-space-3) + var(--sf-text-height-2));
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  [data-sf-region-loading] > * {
    visibility: hidden;
  }
  /* Still for a person who asked for less motion, as the element shapes are. */
  @media (prefers-reduced-motion: reduce) {
    [data-sf-region-loading] {
      -webkit-animation: none;
              animation: none;
    }
  }
}
@layer sf.base {
  /* The first paint of a Smart element (standard simai.smart-component 1.3.8
     §5.4; owner decision 2026-10-27): its static markup, a build snapshot, is
     printed inside the host and marked data-sf-static; the element replaces it
     in its first render. Here because a component's own sheet may come with its
     code, too late for the first paint.

     - A skeleton's text is a bar of the same text size: the text stays in the
       run, transparent, so the bar is exactly as long as the line it stands
       for; an image is a fill of its own box.
     - A page child the element takes into its markup (a slot, a tree's items,
       a closed window's content) is printed after the static markup as
       data-sf-held and kept out of view until the element has drawn: the
       picture already shows it, or the element does not show it yet. */
  .sf-first-paint-bar {
    color: transparent !important;
    background-color: var(--sf-neutral-60--alfa-48);
    border-radius: var(--sf-radius--ui);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
            animation: sf-placeholder-pulse calc(var(--sf-duration-slow) * 3) var(--sf-animation) infinite;
  }
  .sf-first-paint-fill {
    background-color: var(--sf-neutral-60--alfa-48);
  }
  :where(:not(:defined),[\%20\:has\(\%3E\%20\[data-sf-static\]\)]) > [data-sf-held] {
    display: none !important;
  }
  :where(:not(:defined), :has(> [data-sf-static])) > [data-sf-held] {
    display: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-first-paint-bar {
      -webkit-animation: none;
              animation: none;
    }
  }
}
@media (hover: none) and (pointer: coarse) and (max-width: 59.98rem) {
  @layer sf.states {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not([type=hidden]):not([class*="--size-3"]):not([class*="--size-3"] *),
    textarea:not([class*="--size-3"]):not([class*="--size-3"] *),
    select:not([class*="--size-3"]):not([class*="--size-3"] *) {
      font-size: 16px;
    }
  }
}