@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-state-hover: light-dark(var(--sf-success-50--alfa-4), var(--sf-success-90--alfa-4));
    --sf-success-state-select: light-dark(var(--sf-success-50--alfa-8), var(--sf-success-90--alfa-8));
    --sf-success-state-active: light-dark(var(--sf-success-50--alfa-12), var(--sf-success-90--alfa-12));
    --sf-success-container-strong: 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-success-outline: 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-state-hover: light-dark(var(--sf-error-50--alfa-4), var(--sf-error-90--alfa-4));
    --sf-error-state-select: light-dark(var(--sf-error-50--alfa-8), var(--sf-error-90--alfa-8));
    --sf-error-state-active: light-dark(var(--sf-error-50--alfa-12), var(--sf-error-90--alfa-12));
    --sf-error-container-strong: 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-error-outline: 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-state-hover: light-dark(var(--sf-warning-50--alfa-4), var(--sf-warning-90--alfa-4));
    --sf-warning-state-select: light-dark(var(--sf-warning-50--alfa-8), var(--sf-warning-90--alfa-8));
    --sf-warning-state-active: light-dark(var(--sf-warning-50--alfa-12), var(--sf-warning-90--alfa-12));
    --sf-warning-container-strong: 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-warning-outline: 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-state-hover: light-dark(var(--sf-tertiary-50--alfa-4), var(--sf-tertiary-90--alfa-4));
    --sf-tertiary-state-select: light-dark(var(--sf-tertiary-50--alfa-8), var(--sf-tertiary-90--alfa-8));
    --sf-tertiary-state-active: light-dark(var(--sf-tertiary-50--alfa-12), var(--sf-tertiary-90--alfa-12));
    --sf-tertiary-container-strong: 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-tertiary-outline: 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-state-hover: light-dark(var(--sf-secondary-50--alfa-4), var(--sf-secondary-90--alfa-4));
    --sf-secondary-state-select: light-dark(var(--sf-secondary-50--alfa-8), var(--sf-secondary-90--alfa-8));
    --sf-secondary-state-active: light-dark(var(--sf-secondary-50--alfa-12), var(--sf-secondary-90--alfa-12));
    --sf-secondary-container-strong: 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-state-hover: light-dark(var(--sf-primary-50--alfa-4), var(--sf-primary-90--alfa-4));
    --sf-primary-state-select: light-dark(var(--sf-primary-50--alfa-8), var(--sf-primary-90--alfa-8));
    --sf-primary-state-active: light-dark(var(--sf-primary-50--alfa-12), var(--sf-primary-90--alfa-12));
    --sf-primary-container-strong: 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-primary-outline: 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-info-outline: light-dark(var(--sf-info-50), var(--sf-info-60));
    /* Information had no translucent layers, so a hover or a selection on an
       info surface borrowed primary's (C16, surfaces research 6.3). The same
       steps as the other statuses: 4, 8 and 12 for the states, 24 for the
       stronger fill. */
    --sf-info-state-hover: light-dark(var(--sf-info-50--alfa-4), var(--sf-info-90--alfa-4));
    --sf-info-state-select: light-dark(var(--sf-info-50--alfa-8), var(--sf-info-90--alfa-8));
    --sf-info-state-active: light-dark(var(--sf-info-50--alfa-12), var(--sf-info-90--alfa-12));
    --sf-info-container-strong: light-dark(var(--sf-info-50--alfa-24), var(--sf-info-90--alfa-24));
    /* The colour of the place a thing stands on (C16). A cut-out -- a badge's
       ring, a switch's thumb gap, a table head -- reads it instead of the page,
       so it matches a card or a popup it sits in. The page by default; a place
       that is not the page declares its own (the bg-surface-* place
       utilities, and later the cards and the popups). */
    --sf-surface-place: var(--sf-surface-page);
    /* Glass over a photo or a video (C16, C14): controls on media stand on
       black at 48 with a blur, ink white, the same in both themes because the
       picture does not change with the theme. Hover and press take the next
       steps of the ink family, which the alpha scale allows as a fill for glass
       and the scrim only. */
    --sf-surface-media: var(--sf-black--alfa-48);
    --sf-surface-media-hover: var(--sf-black--alfa-64);
    --sf-surface-media-active: var(--sf-black--alfa-80);
    --sf-on-surface-media: var(--sf-white);
    --sf-surface-page: light-dark(var(--sf-white), var(--sf-neutral-5));
    --sf-surface-area: 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-veil: light-dark(var(--sf-black--alfa-8), var(--sf-white--alfa-8));
    /* The scrim: what covers the page under a window, a panel or a sheet that
       holds the focus -- a modal, a drawer, the site header's menu, the search
       window, a workspace drawer. One colour and one strength for all of them,
       the same in both themes: black at 60 dims a dark page as it dims a light
       one. Each drew its own before, and they disagreed: black 60 in three
       places, a light neutral at 32 in the search window (reuse audit
       2026-11-02). A component's own scrim variables still win over these.
       Since C16 and C20 (2026-11-08) the strength is in the colour: black at 64,
       an ink step of the alpha scale (allowed as a fill for glass and the scrim
       only), drawn at full opacity -- the window and the drawer stand off the
       page by the scrim, not by a darker shadow. A page that sets
       --sf-scrim-opacity still dims the colour further. */
    --sf-scrim-color: var(--sf-black--alfa-64);
    --sf-scrim-opacity: 1;
    --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-state-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-state-hover: light-dark(var(--sf-neutral-50--alfa-4), var(--sf-neutral-90--alfa-4));
    --sf-surface-state-select: light-dark(var(--sf-neutral-50--alfa-8), var(--sf-neutral-90--alfa-8));
    --sf-surface-state-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-container-strong: 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. The same ink takes dim text
       under a state layer (surfaces research 6.1). Dark neutral-85 since C16
       (owner, 2026-11-08): on a resting fill over the popup's step
       neutral-80 gave 4.30, neutral-85 gives 4.96. */
    --sf-on-surface-container-variant: light-dark(var(--sf-neutral-35), var(--sf-neutral-85));
    /* The former tones of initials (C17, 2026-11-08): sf-avatar names a hue of
       the static palette now and draws its initials on the hue's container,
       .sf-hue-<name> (core/scss/_sf_css__hue.scss). The former roles hold the
       same values -- the plate 50 at 12 light and 24 dark, the ink 10 and 90 --
       until the alias list's remove_after (token-aliases.v1.json,
       palette_tokens); rose is pink. */
    --sf-tone-rose-container: light-dark(var(--sf-pink-50--alfa-12), var(--sf-pink-50--alfa-24));
    --sf-on-tone-rose-container: light-dark(var(--sf-pink-10), var(--sf-pink-90));
    --sf-tone-amber-container: light-dark(var(--sf-amber-50--alfa-12), var(--sf-amber-50--alfa-24));
    --sf-on-tone-amber-container: light-dark(var(--sf-amber-10), var(--sf-amber-90));
    --sf-tone-lime-container: light-dark(var(--sf-lime-50--alfa-12), var(--sf-lime-50--alfa-24));
    --sf-on-tone-lime-container: light-dark(var(--sf-lime-10), var(--sf-lime-90));
    --sf-tone-green-container: light-dark(var(--sf-green-50--alfa-12), var(--sf-green-50--alfa-24));
    --sf-on-tone-green-container: light-dark(var(--sf-green-10), var(--sf-green-90));
    --sf-tone-teal-container: light-dark(var(--sf-teal-50--alfa-12), var(--sf-teal-50--alfa-24));
    --sf-on-tone-teal-container: light-dark(var(--sf-teal-10), var(--sf-teal-90));
    --sf-tone-sky-container: light-dark(var(--sf-sky-50--alfa-12), var(--sf-sky-50--alfa-24));
    --sf-on-tone-sky-container: light-dark(var(--sf-sky-10), var(--sf-sky-90));
    --sf-tone-indigo-container: light-dark(var(--sf-indigo-50--alfa-12), var(--sf-indigo-50--alfa-24));
    --sf-on-tone-indigo-container: light-dark(var(--sf-indigo-10), var(--sf-indigo-90));
    --sf-tone-violet-container: light-dark(var(--sf-purple-50--alfa-12), var(--sf-purple-50--alfa-24));
    --sf-on-tone-violet-container: light-dark(var(--sf-purple-10), var(--sf-purple-90));
    /* The series of a chart, in order (owner decision C17, 2026-11-08): eight
       hues of the static palette in a fixed order -- blue, amber, teal, violet,
       yellow, pink, green, red -- the same under every theme colour, so a
       legend means the same on every site and no series turns into the brand
       colour's twin. A chart of one series takes --sf-chart-brand, the theme
       colour. Each holds 3:1 on surfaces 0 to 2 in both themes (WCAG 1.4.11);
       the first five stay apart under protanopia, deuteranopia and tritanopia,
       where hue alone fails, by lightness too: the order alternates tone 50 and
       60 with tone 30 and 85, light and dark; and each series stands far from
       the one before it (research control/research/2026-11-08-palette.md 3.5,
       chosen by exhaustive search with series 1 fixed to blue).
       tests/chart-colours.contract.test.mjs computes all of it under several
       theme colours rather than trusting this comment. A series outside the
       first five should not be told by colour alone. A project theme overrides
       a role like any other.

       The fill is an area under a line or a band, on the fill family of the
       alpha scale and on tone 50 of the hue, as the containers of the
       families are: 12, 16 and 20 light, 24, 28 and 32 dark, for rest, hover
       and press. */
    --sf-chart-1: light-dark(var(--sf-blue-50), var(--sf-blue-60));
    --sf-chart-2: light-dark(var(--sf-amber-50), var(--sf-amber-60));
    --sf-chart-3: light-dark(var(--sf-teal-30), var(--sf-teal-85));
    --sf-chart-4: light-dark(var(--sf-violet-30), var(--sf-violet-85));
    --sf-chart-5: light-dark(var(--sf-yellow-30), var(--sf-yellow-85));
    --sf-chart-6: light-dark(var(--sf-pink-50), var(--sf-pink-60));
    --sf-chart-7: light-dark(var(--sf-green-50), var(--sf-green-60));
    --sf-chart-8: light-dark(var(--sf-red-30), var(--sf-red-85));
    --sf-chart-brand: light-dark(var(--sf-primary-50), var(--sf-primary-60));
    --sf-chart-1-fill: light-dark(var(--sf-blue-50--alfa-12), var(--sf-blue-50--alfa-24));
    --sf-chart-1-fill-hover: light-dark(var(--sf-blue-50--alfa-16), var(--sf-blue-50--alfa-28));
    --sf-chart-1-fill-active: light-dark(var(--sf-blue-50--alfa-20), var(--sf-blue-50--alfa-32));
    --sf-chart-2-fill: light-dark(var(--sf-amber-50--alfa-12), var(--sf-amber-50--alfa-24));
    --sf-chart-2-fill-hover: light-dark(var(--sf-amber-50--alfa-16), var(--sf-amber-50--alfa-28));
    --sf-chart-2-fill-active: light-dark(var(--sf-amber-50--alfa-20), var(--sf-amber-50--alfa-32));
    --sf-chart-3-fill: light-dark(var(--sf-teal-50--alfa-12), var(--sf-teal-50--alfa-24));
    --sf-chart-3-fill-hover: light-dark(var(--sf-teal-50--alfa-16), var(--sf-teal-50--alfa-28));
    --sf-chart-3-fill-active: light-dark(var(--sf-teal-50--alfa-20), var(--sf-teal-50--alfa-32));
    --sf-chart-4-fill: light-dark(var(--sf-violet-50--alfa-12), var(--sf-violet-50--alfa-24));
    --sf-chart-4-fill-hover: light-dark(var(--sf-violet-50--alfa-16), var(--sf-violet-50--alfa-28));
    --sf-chart-4-fill-active: light-dark(var(--sf-violet-50--alfa-20), var(--sf-violet-50--alfa-32));
    --sf-chart-5-fill: light-dark(var(--sf-yellow-50--alfa-12), var(--sf-yellow-50--alfa-24));
    --sf-chart-5-fill-hover: light-dark(var(--sf-yellow-50--alfa-16), var(--sf-yellow-50--alfa-28));
    --sf-chart-5-fill-active: light-dark(var(--sf-yellow-50--alfa-20), var(--sf-yellow-50--alfa-32));
    --sf-chart-6-fill: light-dark(var(--sf-pink-50--alfa-12), var(--sf-pink-50--alfa-24));
    --sf-chart-6-fill-hover: light-dark(var(--sf-pink-50--alfa-16), var(--sf-pink-50--alfa-28));
    --sf-chart-6-fill-active: light-dark(var(--sf-pink-50--alfa-20), var(--sf-pink-50--alfa-32));
    --sf-chart-7-fill: light-dark(var(--sf-green-50--alfa-12), var(--sf-green-50--alfa-24));
    --sf-chart-7-fill-hover: light-dark(var(--sf-green-50--alfa-16), var(--sf-green-50--alfa-28));
    --sf-chart-7-fill-active: light-dark(var(--sf-green-50--alfa-20), var(--sf-green-50--alfa-32));
    --sf-chart-8-fill: light-dark(var(--sf-red-50--alfa-12), var(--sf-red-50--alfa-24));
    --sf-chart-8-fill-hover: light-dark(var(--sf-red-50--alfa-16), var(--sf-red-50--alfa-28));
    --sf-chart-8-fill-active: light-dark(var(--sf-red-50--alfa-20), var(--sf-red-50--alfa-32));
    --sf-chart-brand-fill: light-dark(var(--sf-primary-50--alfa-12), var(--sf-primary-50--alfa-24));
    --sf-chart-brand-fill-hover: light-dark(var(--sf-primary-50--alfa-16), var(--sf-primary-50--alfa-28));
    --sf-chart-brand-fill-active: light-dark(var(--sf-primary-50--alfa-20), var(--sf-primary-50--alfa-32));
    /* The warm and the cool series (C17; dispatcher 2026-11-09): the hue
       orders of the research (2026-11-08-palette 4), the tones picked by
       exhaustive search over the pairs 50/60, 30/85, 40/80 and 40/70 for the
       best worst case of the categorical limits, 3:1 on surfaces 0-2 kept.
       A family of six close hues cannot meet the eight series' distances:
       warm series 1-5 under CVD 6.9, neighbours 12.5 light / 18.2 dark, any
       two 10.3; cool 7.2 / 7.6, 31.3 / 30.5, 11.5 / 12.4
       (tests/chart-colours.contract.test.mjs holds them as floors). Use
       --sf-chart-1..8 when the series must be told apart. */
    --sf-chart-warm-1: light-dark(var(--sf-red-30), var(--sf-red-85));
    --sf-chart-warm-2: light-dark(var(--sf-orange-50), var(--sf-orange-60));
    --sf-chart-warm-3: light-dark(var(--sf-amber-40), var(--sf-amber-80));
    --sf-chart-warm-4: light-dark(var(--sf-pink-50), var(--sf-pink-60));
    --sf-chart-warm-5: light-dark(var(--sf-brown-50), var(--sf-brown-60));
    --sf-chart-warm-6: light-dark(var(--sf-yellow-50), var(--sf-yellow-60));
    --sf-chart-cool-1: light-dark(var(--sf-blue-30), var(--sf-blue-85));
    --sf-chart-cool-2: light-dark(var(--sf-teal-30), var(--sf-teal-85));
    --sf-chart-cool-3: light-dark(var(--sf-violet-50), var(--sf-violet-60));
    --sf-chart-cool-4: light-dark(var(--sf-cyan-50), var(--sf-cyan-60));
    --sf-chart-cool-5: light-dark(var(--sf-indigo-40), var(--sf-indigo-70));
    --sf-chart-cool-6: light-dark(var(--sf-green-50), var(--sf-green-60));
    /* The ends of a diverging scale (C17): good and bad are blue and red,
       not success and error (red and green fall together under protanopia and
       deuteranopia, 8.8 and 6.9); a scale with no meaning runs purple to teal,
       Carbon's pair. Tone 30 light, 80 dark, as the research measured: red-blue
       42 / 45 / 52 / 55 light and 32 / 28 / 35 / 46 dark (normal, protan,
       deutan, tritan), purple-teal 39 / 31 / 23 / 41 and 48 / 33 / 22 / 59.
       A ladder between an end and --sf-chart-midpoint reads the hue's own
       tones, --sf-<hue>-<tone>. */
    --sf-chart-diverging-bad: light-dark(var(--sf-red-30), var(--sf-red-80));
    --sf-chart-diverging-good: light-dark(var(--sf-blue-30), var(--sf-blue-80));
    --sf-chart-diverging-low: light-dark(var(--sf-purple-30), var(--sf-purple-80));
    --sf-chart-diverging-high: light-dark(var(--sf-teal-30), var(--sf-teal-80));
    /* The middle of a diverging scale -- red to blue for data with a good
       and a bad side, purple to teal for data without (C17) -- where the
       value is neither: the quietest neutral that still stands off surfaces 0
       to 2 (1.14:1 and 1.15:1 on surface-2), so a cell at the midpoint reads as
       a cell and the two ends grow out of it (4.99:1 and 7.72:1 to their 40
       and 80 steps). The same pair as surface-3, which a chart does not sit on. */
    --sf-chart-midpoint: light-dark(var(--sf-neutral-90), var(--sf-neutral-20));
    --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-disabled, 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).

       The dark half is neutral-90 at 48 since C16 (owner, 2026-11-08): the
       boundary takes the ink's tone, as the line does, and holds 3:1 from the
       page to the popup's step (4.12 to 3.30), where neutral-60 at 64 gave
       3.12 to 2.30. */
    --sf-outline: light-dark(var(--sf-neutral-50--alfa-80), var(--sf-neutral-90--alfa-48));
    /* 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-secondary-outline: light-dark(var(--sf-secondary-50), var(--sf-secondary-60));
    --sf-surface-disabled: light-dark(var(--sf-neutral-50--alfa-12), var(--sf-neutral-90--alfa-12));
    --sf-on-surface-disabled: 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-disabled: 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-yellow-50--alfa-24), var(--sf-yellow-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));
    /* Shadows (C20, owner 2026-11-08; ui-control prototypes/shadows.html).
       Two colours, both steps of the alpha scale: the key shadow, short and
       sharp at the edge, black at 16 in the light theme and 28 in the dark (a
       fill step, the dark one twelve higher as every fill is); and the ambient
       shadow, wide and soft, black at 8 in the light theme and none in the
       dark, where black on a near-black page shows nothing. Declared here, on
       the theme root, beside the places that read them: built on :root, the
       former --sf-ui-shadow-N read the core's colours (24/12/8) and never the
       theme's (12/8/4). */
    --sf-shadow-key-color: light-dark(var(--sf-black--alfa-16), var(--sf-black--alfa-28));
    --sf-shadow-ambient-color: light-dark(var(--sf-black--alfa-8), var(--sf-transparent));
    /* Four shadows, named by the place, not by a number. Offsets and blurs are
       steps of the size ladder. A component reads one of these four and
       nothing else: no rgb(), no color-mix, no level.
         flat     the page, an area, a card at rest: no shadow, the edge is a
                  line (--sf-outline-variant);
         raised   a card under the pointer, a sticky bar while content runs
                  under it, a handle, a plate;
         overlay  what stands over the page without holding it: a dropdown, a
                  menu, a popover, a tooltip, a toast;
         modal    what holds the page: a window, a drawer, always over the
                  scrim (black 64). */
    --sf-shadow-flat: none;
    /* raised: 0 1px 2px key, 0 2px 8px ambient; overlay: 0 2px 4px key, 0 8px
       16px ambient; modal: 0 4px 8px key, 0 16px 32px ambient
       (mix/_mix__shadow.scss). */
    --sf-shadow-raised: 0 var(--sf-px) var(--sf-a2) var(--sf-shadow-key-color), 0 var(--sf-a2) var(--sf-a8) var(--sf-shadow-ambient-color);
    --sf-shadow-overlay: 0 var(--sf-a2) var(--sf-a4) var(--sf-shadow-key-color), 0 var(--sf-a8) var(--sf-b6) var(--sf-shadow-ambient-color);
    --sf-shadow-modal: 0 var(--sf-a4) var(--sf-a8) var(--sf-shadow-key-color), 0 var(--sf-b6) var(--sf-c6) var(--sf-shadow-ambient-color);
    /* Высота — это две вещи сразу: тень под элементом и поверхность под ним.
       В светлой теме работает тень, и поднятая поверхность остаётся обычной.
       В тёмной тень не работает вовсе: она чёрная, фон почти чёрный, и весь
       пятиступенчатый набор укладывался в три-семь единиц яркости из 255 —
       ниже порога, на котором человек замечает разницу. Там высоту несёт
       ступень поверхности, которая в тёмной теме светлеет: карточка, поднятая,
       всплывающая, вложенная всплывающая -- каждая на ступень светлее (C16,
       C20). Окно и шторка стоят на всплывающей и отделяются затемнением. */
    --sf-surface-card: light-dark(var(--sf-surface-page), var(--sf-surface-2));
    --sf-surface-raised: light-dark(var(--sf-surface-page), var(--sf-surface-3));
    --sf-surface-popup: light-dark(var(--sf-surface-page), var(--sf-surface-4));
    --sf-surface-popup-nested: light-dark(var(--sf-surface-page), var(--sf-surface-5));
    /* The C16 names of the shadows (2026-11-08) join the four places: a card's
       shadow is the raised one, a popup's and a nested popup's the overlay.
       Former names until the alias list's remove_after (token-aliases.v1.json,
       shadows); --sf-elevation-1/3/4--shadow follow them through the C16
       aliases. */
    --sf-shadow-card: var(--sf-shadow-raised);
    --sf-shadow-popup: var(--sf-shadow-overlay);
    --sf-shadow-popup-nested: var(--sf-shadow-overlay);
    /* Приглушённый текст на поднятой поверхности. В светлой теме поднятая
       поверхность остаётся обычной, поэтому значение то же, что у
       --sf-on-surface-variant. В тёмной поверхность светлеет со ступенью, и
       вместе с ней светлеет текст: иначе одна и та же роль даёт 4.14 на второй
       ступени и 2.93 на четвёртой при требуемых WCAG 1.4.3 четырёх с половиной.
       Значений три, а не пять: роль меняется там, где перестаёт проходить. */
    --sf-on-surface-card-variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-60));
    --sf-on-surface-raised-variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-70));
    --sf-on-surface-popup-variant: light-dark(var(--sf-neutral-40), var(--sf-neutral-70));
    --sf-on-surface-popup-nested-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%);
    /* The names before C16 (2026-11-08), each the new name's value: a page or
       a product that reads --sf-surface-0 or --sf-elevation-3--surface keeps
       working until the alias list's remove_after
       (src/core/contracts/token-aliases.v1.json). Every rule that re-declares a
       renamed role re-declares its alias with it -- an alias resolves where it
       is declared, so a place that sets the new name alone would leave a reader
       of the old one on the root's value (tests/token-aliases.contract.test.mjs). */
    --sf-disable: var(--sf-surface-disabled);
    --sf-elevation-1--shadow: var(--sf-shadow-card);
    --sf-elevation-1--surface: var(--sf-surface-card);
    --sf-elevation-3--shadow: var(--sf-shadow-popup);
    --sf-elevation-3--surface: var(--sf-surface-popup);
    --sf-elevation-4--surface: var(--sf-surface-popup-nested);
    --sf-error-transparent-active: var(--sf-error-state-active);
    --sf-error-transparent-hover: var(--sf-error-state-hover);
    --sf-error-transparent-overlay: var(--sf-error-container-strong);
    --sf-error-transparent-select: var(--sf-error-state-select);
    --sf-on-disable: var(--sf-on-surface-disabled);
    --sf-on-elevation-1--variant: var(--sf-on-surface-card-variant);
    --sf-on-elevation-3--variant: var(--sf-on-surface-popup-variant);
    --sf-on-elevation-4--variant: var(--sf-on-surface-popup-nested-variant);
    --sf-on-surface-container--variant: var(--sf-on-surface-container-variant);
    --sf-outline-disable: var(--sf-outline-disabled);
    --sf-outline-error: var(--sf-error-outline);
    --sf-outline-info: var(--sf-info-outline);
    --sf-outline-primary: var(--sf-primary-outline);
    --sf-outline-secondary: var(--sf-secondary-outline);
    --sf-outline-success: var(--sf-success-outline);
    --sf-outline-tertiary: var(--sf-tertiary-outline);
    --sf-outline-warning: var(--sf-warning-outline);
    --sf-primary-transparent-active: var(--sf-primary-state-active);
    --sf-primary-transparent-hover: var(--sf-primary-state-hover);
    --sf-primary-transparent-overlay: var(--sf-primary-container-strong);
    --sf-primary-transparent-select: var(--sf-primary-state-select);
    --sf-secondary-transparent-active: var(--sf-secondary-state-active);
    --sf-secondary-transparent-hover: var(--sf-secondary-state-hover);
    --sf-secondary-transparent-overlay: var(--sf-secondary-container-strong);
    --sf-secondary-transparent-select: var(--sf-secondary-state-select);
    --sf-success-transparent-active: var(--sf-success-state-active);
    --sf-success-transparent-hover: var(--sf-success-state-hover);
    --sf-success-transparent-overlay: var(--sf-success-container-strong);
    --sf-success-transparent-select: var(--sf-success-state-select);
    --sf-surface-0: var(--sf-surface-page);
    --sf-surface-1: var(--sf-surface-area);
    --sf-surface-overlay: var(--sf-surface-veil);
    --sf-surface-transparent-active: var(--sf-surface-state-active);
    --sf-surface-transparent-hover: var(--sf-surface-state-hover);
    --sf-surface-transparent-overlay: var(--sf-surface-container-strong);
    --sf-surface-transparent-select: var(--sf-surface-state-select);
    --sf-tertiary-transparent-active: var(--sf-tertiary-state-active);
    --sf-tertiary-transparent-hover: var(--sf-tertiary-state-hover);
    --sf-tertiary-transparent-overlay: var(--sf-tertiary-container-strong);
    --sf-tertiary-transparent-select: var(--sf-tertiary-state-select);
    --sf-warning-transparent-active: var(--sf-warning-state-active);
    --sf-warning-transparent-hover: var(--sf-warning-state-hover);
    --sf-warning-transparent-overlay: var(--sf-warning-container-strong);
    --sf-warning-transparent-select: var(--sf-warning-state-select);
    /* The names before C20 (2026-11-08): the numbered levels, the layer
       styles and the shadow colours, each var() of its place until the alias
       list's remove_after (token-aliases.v1.json, shadows). */
    --sf-elevation-2--shadow: var(--sf-shadow-overlay);
    --sf-elevation-4--shadow: var(--sf-shadow-modal);
    --sf-elevation-5--shadow: var(--sf-shadow-modal);
    --sf-elevation-2--surface: var(--sf-surface-popup);
    --sf-elevation-5--surface: var(--sf-surface-popup-nested);
    --sf-on-elevation-2--variant: var(--sf-on-surface-popup-variant);
    --sf-on-elevation-5--variant: var(--sf-on-surface-popup-nested-variant);
    --sf-ui-shadow-1: var(--sf-shadow-raised);
    --sf-ui-shadow-2: var(--sf-shadow-overlay);
    --sf-ui-shadow-3: var(--sf-shadow-overlay);
    --sf-ui-shadow-4: var(--sf-shadow-modal);
    --sf-ui-shadow-5: var(--sf-shadow-modal);
    --sf-ui-shadow-top: var(--sf-shadow-flat);
    --sf-shadow--color-fill: var(--sf-shadow-key-color);
    --sf-shadow--color-outline: var(--sf-shadow-key-color);
    --sf-shadow--color-shading: var(--sf-shadow-ambient-color);
    --sf-shadow--color-shade: var(--sf-shadow-ambient-color);
    --sf-shadow--rim: 0 0 0 0 transparent;
  }
}
@layer sf.base {
  .sf-surface-media {
    background-color: var(--sf-surface-media);
    color: var(--sf-on-surface-media);
    -webkit-backdrop-filter: blur(var(--sf-blur-large));
            backdrop-filter: blur(var(--sf-blur-large));
    --sf-surface-place: var(--sf-surface-media);
    --sf-on-surface: var(--sf-on-surface-media);
    --sf-on-surface-variant: var(--sf-white--alfa-80);
    --sf-on-surface-container-variant: var(--sf-white--alfa-80);
    --sf-surface-state-hover: var(--sf-white--alfa-4);
    --sf-surface-state-select: var(--sf-white--alfa-8);
    --sf-surface-state-active: var(--sf-white--alfa-12);
    --sf-surface-container: var(--sf-white--alfa-16);
    --sf-surface-container-hover: var(--sf-white--alfa-20);
    --sf-surface-container-active: var(--sf-white--alfa-24);
    --sf-outline: var(--sf-white--alfa-64);
    --sf-outline-variant: var(--sf-white--alfa-24);
    --sf-surface-disabled: var(--sf-white--alfa-12);
    --sf-on-surface-disabled: var(--sf-white--alfa-64);
    --sf-disable: var(--sf-surface-disabled);
    --sf-on-disable: var(--sf-on-surface-disabled);
    --sf-on-surface-container--variant: var(--sf-on-surface-container-variant);
    --sf-surface-transparent-active: var(--sf-surface-state-active);
    --sf-surface-transparent-hover: var(--sf-surface-state-hover);
    --sf-surface-transparent-select: var(--sf-surface-state-select);
  }
}
/*
 * Generated from src/core/contracts/adaptive-sizing.v1.json.
 * contract-sha256: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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);
    /* The skeleton is a control's fill since C16 (owner, 2026-11-08): 16, and
       the wave's highlight 24 (--sf-surface-container-active). It was a
       gradient of two ink steps (48), which the alpha scale keeps for what is
       read; the Framework's skeletons read --sf-surface-container. */
    --sf-ui-skeleton: var(--sf-surface-container);
  }
}
@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);
    color: inherit;
    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);
    --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;
    /* Glass over media draws its ink from white on the alpha scale (C16,
       .sf-surface-media): states 4/8/12, fill 16/20/24, line 24, boundary 64,
       dim ink 80. */
    --sf-white--alfa-4: rgba(255,255,255,0.03922);
    --sf-white--alfa-8: rgba(255,255,255,0.07843);
    --sf-white--alfa-12: rgba(255,255,255,0.12157);
    --sf-white--alfa-16: rgba(255,255,255,0.16078);
    --sf-white--alfa-20: rgba(255,255,255,0.2);
    --sf-white--alfa-24: rgba(255,255,255,0.23922);
    --sf-white--alfa-64: rgba(255,255,255,0.63922);
    --sf-white--alfa-80: rgba(255,255,255,0.8);
    --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);
    /* Shadows (C20, 2026-11-08): the key shadow is black at 16 in the light
       theme and 28 in the dark -- fill steps, the dark one twelve higher as
       every fill is (--sf-shadow-key-color). */
    --sf-black--alfa-16: rgba(0,0,0,0.16078);
    --sf-black--alfa-28: rgba(0,0,0,0.27843);
    /* Glass over a photo or a video (C16 --sf-surface-media; C14 the media
       close button): black at 48 at rest, 64 under the pointer, 80 pressed.
       The ink family as a fill, which the alpha scale allows for glass and
       the scrim only. */
    --sf-black--alfa-48: rgba(0,0,0,0.47843);
    --sf-black--alfa-64: rgba(0,0,0,0.63922);
    --sf-black--alfa-80: rgba(0,0,0,0.8);
    --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-20--alfa-4: rgba(74,30,84,0.03922);
    --sf-tertiary-20--alfa-8: rgba(74,30,84,0.07843);
    --sf-tertiary-20--alfa-12: rgba(74,30,84,0.12157);
    --sf-tertiary-20--alfa-16: rgba(74,30,84,0.16078);
    --sf-tertiary-20--alfa-20: rgba(74,30,84,0.2);
    --sf-tertiary-20--alfa-24: rgba(74,30,84,0.23922);
    --sf-tertiary-20--alfa-64: rgba(74,30,84,0.63922);
    --sf-tertiary-20--alfa-80: rgba(74,30,84,0.8);
    --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-20--alfa-4: rgba(37,48,71,0.03922);
    --sf-secondary-20--alfa-8: rgba(37,48,71,0.07843);
    --sf-secondary-20--alfa-12: rgba(37,48,71,0.12157);
    --sf-secondary-20--alfa-16: rgba(37,48,71,0.16078);
    --sf-secondary-20--alfa-20: rgba(37,48,71,0.2);
    --sf-secondary-20--alfa-24: rgba(37,48,71,0.23922);
    --sf-secondary-20--alfa-64: rgba(37,48,71,0.63922);
    --sf-secondary-20--alfa-80: rgba(37,48,71,0.8);
    --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: var(--sf-blue-98);
    --sf-info-95: var(--sf-blue-95);
    --sf-info-90: var(--sf-blue-90);
    --sf-info-90--alfa-4: var(--sf-blue-90--alfa-4);
    --sf-info-90--alfa-8: var(--sf-blue-90--alfa-8);
    --sf-info-90--alfa-12: var(--sf-blue-90--alfa-12);
    --sf-info-90--alfa-24: var(--sf-blue-90--alfa-24);
    --sf-info-85: var(--sf-blue-85);
    --sf-info-80: var(--sf-blue-80);
    --sf-info-70: var(--sf-blue-70);
    --sf-info-60: var(--sf-blue-60);
    --sf-info-50: var(--sf-blue-50);
    --sf-info-50--alfa-4: var(--sf-blue-50--alfa-4);
    --sf-info-50--alfa-8: var(--sf-blue-50--alfa-8);
    --sf-info-50--alfa-12: var(--sf-blue-50--alfa-12);
    --sf-info-50--alfa-16: var(--sf-blue-50--alfa-16);
    --sf-info-50--alfa-20: var(--sf-blue-50--alfa-20);
    --sf-info-50--alfa-24: var(--sf-blue-50--alfa-24);
    --sf-info-50--alfa-28: var(--sf-blue-50--alfa-28);
    --sf-info-50--alfa-32: var(--sf-blue-50--alfa-32);
    --sf-info-40: var(--sf-blue-40);
    --sf-info-35: var(--sf-blue-35);
    --sf-info-30: var(--sf-blue-30);
    --sf-info-25: var(--sf-blue-25);
    --sf-info-20: var(--sf-blue-20);
    --sf-info-20--alfa-4: var(--sf-blue-20--alfa-4);
    --sf-info-20--alfa-8: var(--sf-blue-20--alfa-8);
    --sf-info-20--alfa-12: var(--sf-blue-20--alfa-12);
    --sf-info-20--alfa-16: var(--sf-blue-20--alfa-16);
    --sf-info-20--alfa-20: var(--sf-blue-20--alfa-20);
    --sf-info-20--alfa-24: var(--sf-blue-20--alfa-24);
    --sf-info-20--alfa-64: var(--sf-blue-20--alfa-64);
    --sf-info-20--alfa-80: var(--sf-blue-20--alfa-80);
    --sf-info-15: var(--sf-blue-15);
    --sf-info-10: var(--sf-blue-10);
    --sf-info-5: var(--sf-blue-5);
    --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-20--alfa-4: rgba(0,47,103,0.03922);
    --sf-primary-20--alfa-8: rgba(0,47,103,0.07843);
    --sf-primary-20--alfa-12: rgba(0,47,103,0.12157);
    --sf-primary-20--alfa-16: rgba(0,47,103,0.16078);
    --sf-primary-20--alfa-20: rgba(0,47,103,0.2);
    --sf-primary-20--alfa-24: rgba(0,47,103,0.23922);
    --sf-primary-20--alfa-64: rgba(0,47,103,0.63922);
    --sf-primary-20--alfa-80: rgba(0,47,103,0.8);
    --sf-primary-15: #002453;
    --sf-primary-10: #001a40;
    --sf-primary-5: #00102c;
    --sf-error-98: var(--sf-red-98);
    --sf-error-95: var(--sf-red-95);
    --sf-error-90: var(--sf-red-90);
    --sf-error-90--alfa-4: var(--sf-red-90--alfa-4);
    --sf-error-90--alfa-8: var(--sf-red-90--alfa-8);
    --sf-error-90--alfa-12: var(--sf-red-90--alfa-12);
    --sf-error-90--alfa-24: var(--sf-red-90--alfa-24);
    --sf-error-85: var(--sf-red-85);
    --sf-error-80: var(--sf-red-80);
    --sf-error-70: var(--sf-red-70);
    --sf-error-60: var(--sf-red-60);
    --sf-error-50: var(--sf-red-50);
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-error-50--alfa-4: var(--sf-red-50--alfa-4);
    --sf-error-50--alfa-8: var(--sf-red-50--alfa-8);
    --sf-error-50--alfa-12: var(--sf-red-50--alfa-12);
    --sf-error-50--alfa-16: var(--sf-red-50--alfa-16);
    --sf-error-50--alfa-20: var(--sf-red-50--alfa-20);
    --sf-error-50--alfa-24: var(--sf-red-50--alfa-24);
    --sf-error-50--alfa-28: var(--sf-red-50--alfa-28);
    --sf-error-50--alfa-32: var(--sf-red-50--alfa-32);
    --sf-error-40: var(--sf-red-40);
    --sf-error-35: var(--sf-red-35);
    --sf-error-30: var(--sf-red-30);
    --sf-error-25: var(--sf-red-25);
    --sf-error-20: var(--sf-red-20);
    --sf-error-20--alfa-4: var(--sf-red-20--alfa-4);
    --sf-error-20--alfa-8: var(--sf-red-20--alfa-8);
    --sf-error-20--alfa-12: var(--sf-red-20--alfa-12);
    --sf-error-20--alfa-16: var(--sf-red-20--alfa-16);
    --sf-error-20--alfa-20: var(--sf-red-20--alfa-20);
    --sf-error-20--alfa-24: var(--sf-red-20--alfa-24);
    --sf-error-20--alfa-64: var(--sf-red-20--alfa-64);
    --sf-error-20--alfa-80: var(--sf-red-20--alfa-80);
    --sf-error-15: var(--sf-red-15);
    --sf-error-10: var(--sf-red-10);
    --sf-error-5: var(--sf-red-5);
    --sf-warning-98: var(--sf-amber-98);
    --sf-warning-95: var(--sf-amber-95);
    --sf-warning-90: var(--sf-amber-90);
    --sf-warning-90--alfa-4: var(--sf-amber-90--alfa-4);
    --sf-warning-90--alfa-8: var(--sf-amber-90--alfa-8);
    --sf-warning-90--alfa-12: var(--sf-amber-90--alfa-12);
    --sf-warning-90--alfa-24: var(--sf-amber-90--alfa-24);
    --sf-warning-85: var(--sf-amber-85);
    --sf-warning-80: var(--sf-amber-80);
    --sf-warning-70: var(--sf-amber-70);
    --sf-warning-60: var(--sf-amber-60);
    --sf-warning-50: var(--sf-amber-50);
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-warning-50--alfa-4: var(--sf-amber-50--alfa-4);
    --sf-warning-50--alfa-8: var(--sf-amber-50--alfa-8);
    --sf-warning-50--alfa-12: var(--sf-amber-50--alfa-12);
    --sf-warning-50--alfa-16: var(--sf-amber-50--alfa-16);
    --sf-warning-50--alfa-20: var(--sf-amber-50--alfa-20);
    --sf-warning-50--alfa-24: var(--sf-amber-50--alfa-24);
    --sf-warning-50--alfa-28: var(--sf-amber-50--alfa-28);
    --sf-warning-50--alfa-32: var(--sf-amber-50--alfa-32);
    --sf-warning-40: var(--sf-amber-40);
    --sf-warning-35: var(--sf-amber-35);
    --sf-warning-30: var(--sf-amber-30);
    --sf-warning-25: var(--sf-amber-25);
    --sf-warning-20: var(--sf-amber-20);
    --sf-warning-20--alfa-4: var(--sf-amber-20--alfa-4);
    --sf-warning-20--alfa-8: var(--sf-amber-20--alfa-8);
    --sf-warning-20--alfa-12: var(--sf-amber-20--alfa-12);
    --sf-warning-20--alfa-16: var(--sf-amber-20--alfa-16);
    --sf-warning-20--alfa-20: var(--sf-amber-20--alfa-20);
    --sf-warning-20--alfa-24: var(--sf-amber-20--alfa-24);
    --sf-warning-20--alfa-64: var(--sf-amber-20--alfa-64);
    --sf-warning-20--alfa-80: var(--sf-amber-20--alfa-80);
    --sf-warning-15: var(--sf-amber-15);
    --sf-warning-10: var(--sf-amber-10);
    --sf-warning-5: var(--sf-amber-5);
    --sf-success-98: var(--sf-green-98);
    --sf-success-95: var(--sf-green-95);
    --sf-success-90: var(--sf-green-90);
    --sf-success-90--alfa-4: var(--sf-green-90--alfa-4);
    --sf-success-90--alfa-8: var(--sf-green-90--alfa-8);
    --sf-success-90--alfa-12: var(--sf-green-90--alfa-12);
    --sf-success-90--alfa-24: var(--sf-green-90--alfa-24);
    --sf-success-85: var(--sf-green-85);
    --sf-success-80: var(--sf-green-80);
    --sf-success-70: var(--sf-green-70);
    --sf-success-60: var(--sf-green-60);
    --sf-success-50: var(--sf-green-50);
    /* Ступени 4 % и 8 %: на них стоят слои наведения и выбора этой палитры. */
    --sf-success-50--alfa-4: var(--sf-green-50--alfa-4);
    --sf-success-50--alfa-8: var(--sf-green-50--alfa-8);
    --sf-success-50--alfa-12: var(--sf-green-50--alfa-12);
    --sf-success-50--alfa-16: var(--sf-green-50--alfa-16);
    --sf-success-50--alfa-20: var(--sf-green-50--alfa-20);
    --sf-success-50--alfa-24: var(--sf-green-50--alfa-24);
    --sf-success-50--alfa-28: var(--sf-green-50--alfa-28);
    --sf-success-50--alfa-32: var(--sf-green-50--alfa-32);
    --sf-success-40: var(--sf-green-40);
    --sf-success-35: var(--sf-green-35);
    --sf-success-30: var(--sf-green-30);
    --sf-success-25: var(--sf-green-25);
    --sf-success-20: var(--sf-green-20);
    --sf-success-20--alfa-4: var(--sf-green-20--alfa-4);
    --sf-success-20--alfa-8: var(--sf-green-20--alfa-8);
    --sf-success-20--alfa-12: var(--sf-green-20--alfa-12);
    --sf-success-20--alfa-16: var(--sf-green-20--alfa-16);
    --sf-success-20--alfa-20: var(--sf-green-20--alfa-20);
    --sf-success-20--alfa-24: var(--sf-green-20--alfa-24);
    --sf-success-20--alfa-64: var(--sf-green-20--alfa-64);
    --sf-success-20--alfa-80: var(--sf-green-20--alfa-80);
    --sf-success-15: var(--sf-green-15);
    --sf-success-10: var(--sf-green-10);
    --sf-success-5: var(--sf-green-5);
    /* The former tones of initials (sf-avatar tone, chroma 48 of their own),
       retired by owner decision C17 (2026-11-08): avatars and charts have no
       colours of their own, they name a hue of the static palette. Each former
       primitive is var() of the static hue of its name -- rose is pink -- until
       the alias list's remove_after (src/core/contracts/token-aliases.v1.json,
       palette_tokens). The value moves with it: chroma 60 and the hue's own
       angle (journal token-c17-tones-to-hues). */
    --sf-tone-rose-50--alfa-12: var(--sf-pink-50--alfa-12);
    --sf-tone-rose-50--alfa-16: var(--sf-pink-50--alfa-16);
    --sf-tone-rose-50--alfa-20: var(--sf-pink-50--alfa-20);
    --sf-tone-rose-50--alfa-24: var(--sf-pink-50--alfa-24);
    --sf-tone-rose-50--alfa-28: var(--sf-pink-50--alfa-28);
    --sf-tone-rose-50--alfa-32: var(--sf-pink-50--alfa-32);
    --sf-tone-rose-30: var(--sf-pink-30);
    --sf-tone-rose-50: var(--sf-pink-50);
    --sf-tone-rose-60: var(--sf-pink-60);
    --sf-tone-rose-85: var(--sf-pink-85);
    --sf-tone-amber-50--alfa-12: var(--sf-amber-50--alfa-12);
    --sf-tone-amber-50--alfa-16: var(--sf-amber-50--alfa-16);
    --sf-tone-amber-50--alfa-20: var(--sf-amber-50--alfa-20);
    --sf-tone-amber-50--alfa-24: var(--sf-amber-50--alfa-24);
    --sf-tone-amber-50--alfa-28: var(--sf-amber-50--alfa-28);
    --sf-tone-amber-50--alfa-32: var(--sf-amber-50--alfa-32);
    --sf-tone-amber-30: var(--sf-amber-30);
    --sf-tone-amber-60: var(--sf-amber-60);
    --sf-tone-amber-85: var(--sf-amber-85);
    --sf-tone-lime-50--alfa-12: var(--sf-lime-50--alfa-12);
    --sf-tone-lime-50--alfa-16: var(--sf-lime-50--alfa-16);
    --sf-tone-lime-50--alfa-20: var(--sf-lime-50--alfa-20);
    --sf-tone-lime-50--alfa-24: var(--sf-lime-50--alfa-24);
    --sf-tone-lime-50--alfa-28: var(--sf-lime-50--alfa-28);
    --sf-tone-lime-50--alfa-32: var(--sf-lime-50--alfa-32);
    --sf-tone-lime-30: var(--sf-lime-30);
    --sf-tone-lime-50: var(--sf-lime-50);
    --sf-tone-lime-60: var(--sf-lime-60);
    --sf-tone-lime-85: var(--sf-lime-85);
    --sf-tone-green-50--alfa-12: var(--sf-green-50--alfa-12);
    --sf-tone-green-50--alfa-16: var(--sf-green-50--alfa-16);
    --sf-tone-green-50--alfa-20: var(--sf-green-50--alfa-20);
    --sf-tone-green-50--alfa-24: var(--sf-green-50--alfa-24);
    --sf-tone-green-50--alfa-28: var(--sf-green-50--alfa-28);
    --sf-tone-green-50--alfa-32: var(--sf-green-50--alfa-32);
    --sf-tone-green-30: var(--sf-green-30);
    --sf-tone-green-85: var(--sf-green-85);
    --sf-tone-teal-50--alfa-12: var(--sf-teal-50--alfa-12);
    --sf-tone-teal-50--alfa-16: var(--sf-teal-50--alfa-16);
    --sf-tone-teal-50--alfa-20: var(--sf-teal-50--alfa-20);
    --sf-tone-teal-50--alfa-24: var(--sf-teal-50--alfa-24);
    --sf-tone-teal-50--alfa-28: var(--sf-teal-50--alfa-28);
    --sf-tone-teal-50--alfa-32: var(--sf-teal-50--alfa-32);
    --sf-tone-teal-30: var(--sf-teal-30);
    --sf-tone-teal-50: var(--sf-teal-50);
    --sf-tone-teal-60: var(--sf-teal-60);
    --sf-tone-teal-85: var(--sf-teal-85);
    --sf-tone-sky-50--alfa-12: var(--sf-sky-50--alfa-12);
    --sf-tone-sky-50--alfa-16: var(--sf-sky-50--alfa-16);
    --sf-tone-sky-50--alfa-20: var(--sf-sky-50--alfa-20);
    --sf-tone-sky-50--alfa-24: var(--sf-sky-50--alfa-24);
    --sf-tone-sky-50--alfa-28: var(--sf-sky-50--alfa-28);
    --sf-tone-sky-50--alfa-32: var(--sf-sky-50--alfa-32);
    --sf-tone-sky-30: var(--sf-sky-30);
    --sf-tone-sky-85: var(--sf-sky-85);
    --sf-tone-indigo-50--alfa-20: var(--sf-indigo-50--alfa-20);
    --sf-tone-indigo-50--alfa-32: var(--sf-indigo-50--alfa-32);
    --sf-tone-indigo-30: var(--sf-indigo-30);
    --sf-tone-indigo-85: var(--sf-indigo-85);
    --sf-tone-violet-50--alfa-12: var(--sf-purple-50--alfa-12);
    --sf-tone-violet-50--alfa-16: var(--sf-purple-50--alfa-16);
    --sf-tone-violet-50--alfa-20: var(--sf-purple-50--alfa-20);
    --sf-tone-violet-50--alfa-24: var(--sf-purple-50--alfa-24);
    --sf-tone-violet-50--alfa-28: var(--sf-purple-50--alfa-28);
    --sf-tone-violet-50--alfa-32: var(--sf-purple-50--alfa-32);
    --sf-tone-violet-30: var(--sf-purple-30);
    --sf-tone-violet-85: var(--sf-purple-85);
  }
}
@layer sf.base {
  /* The static palette: sixteen fixed hues through the theme's own generator
     (HCT TonalPalette), the same tones and translucent steps for every hue.
     No theme colour moves them; a status primitive (--sf-error-<tone>,
     --sf-warning-, --sf-success-, --sf-info-) is var() of its hue. */
  :root {
    /* red: HCT hue 25, chroma 85 */
    --sf-red-98: #fff8f7;
    --sf-red-95: #ffedea;
    --sf-red-90: #ffdad6;
    --sf-red-90--alfa-4: rgba(255,218,214,0.03922);
    --sf-red-90--alfa-8: rgba(255,218,214,0.07843);
    --sf-red-90--alfa-12: rgba(255,218,214,0.12157);
    --sf-red-90--alfa-24: rgba(255,218,214,0.23922);
    --sf-red-85: #ffc7c0;
    --sf-red-80: #ffb4ab;
    --sf-red-70: #ff897d;
    --sf-red-60: #ff5449;
    --sf-red-50: #df362f;
    --sf-red-50--alfa-4: rgba(223,54,47,0.03922);
    --sf-red-50--alfa-8: rgba(223,54,47,0.07843);
    --sf-red-50--alfa-12: rgba(223,54,47,0.12157);
    --sf-red-50--alfa-16: rgba(223,54,47,0.16078);
    --sf-red-50--alfa-20: rgba(223,54,47,0.2);
    --sf-red-50--alfa-24: rgba(223,54,47,0.23922);
    --sf-red-50--alfa-28: rgba(223,54,47,0.27843);
    --sf-red-50--alfa-32: rgba(223,54,47,0.32157);
    --sf-red-40: #bb1919;
    --sf-red-35: #a9040e;
    --sf-red-30: #93000a;
    --sf-red-25: #7e0007;
    --sf-red-20: #690005;
    --sf-red-20--alfa-4: rgba(105,0,5,0.03922);
    --sf-red-20--alfa-8: rgba(105,0,5,0.07843);
    --sf-red-20--alfa-12: rgba(105,0,5,0.12157);
    --sf-red-20--alfa-16: rgba(105,0,5,0.16078);
    --sf-red-20--alfa-20: rgba(105,0,5,0.2);
    --sf-red-20--alfa-24: rgba(105,0,5,0.23922);
    --sf-red-20--alfa-64: rgba(105,0,5,0.63922);
    --sf-red-20--alfa-80: rgba(105,0,5,0.8);
    --sf-red-15: #540003;
    --sf-red-10: #410002;
    --sf-red-5: #2d0001;
    /* orange: HCT hue 45, chroma 60 */
    --sf-orange-98: #fff8f6;
    --sf-orange-95: #ffede6;
    --sf-orange-90: #ffdbcb;
    --sf-orange-90--alfa-4: rgba(255,219,203,0.03922);
    --sf-orange-90--alfa-8: rgba(255,219,203,0.07843);
    --sf-orange-90--alfa-12: rgba(255,219,203,0.12157);
    --sf-orange-90--alfa-24: rgba(255,219,203,0.23922);
    --sf-orange-85: #ffc9af;
    --sf-orange-80: #ffb692;
    --sf-orange-70: #ff8d4f;
    --sf-orange-60: #e4702d;
    --sf-orange-50: #c25713;
    --sf-orange-50--alfa-4: rgba(194,87,19,0.03922);
    --sf-orange-50--alfa-8: rgba(194,87,19,0.07843);
    --sf-orange-50--alfa-12: rgba(194,87,19,0.12157);
    --sf-orange-50--alfa-16: rgba(194,87,19,0.16078);
    --sf-orange-50--alfa-20: rgba(194,87,19,0.2);
    --sf-orange-50--alfa-24: rgba(194,87,19,0.23922);
    --sf-orange-50--alfa-28: rgba(194,87,19,0.27843);
    --sf-orange-50--alfa-32: rgba(194,87,19,0.32157);
    --sf-orange-40: #9f4200;
    --sf-orange-35: #8c3900;
    --sf-orange-30: #793000;
    --sf-orange-25: #672800;
    --sf-orange-20: #562000;
    --sf-orange-20--alfa-4: rgba(86,32,0,0.03922);
    --sf-orange-20--alfa-8: rgba(86,32,0,0.07843);
    --sf-orange-20--alfa-12: rgba(86,32,0,0.12157);
    --sf-orange-20--alfa-16: rgba(86,32,0,0.16078);
    --sf-orange-20--alfa-20: rgba(86,32,0,0.2);
    --sf-orange-20--alfa-24: rgba(86,32,0,0.23922);
    --sf-orange-20--alfa-64: rgba(86,32,0,0.63922);
    --sf-orange-20--alfa-80: rgba(86,32,0,0.8);
    --sf-orange-15: #451800;
    --sf-orange-10: #341100;
    --sf-orange-5: #230900;
    /* amber: HCT hue 60, chroma 60 */
    --sf-amber-98: #fff8f5;
    --sf-amber-95: #ffeee2;
    --sf-amber-90: #ffdcc1;
    --sf-amber-90--alfa-4: rgba(255,220,193,0.03922);
    --sf-amber-90--alfa-8: rgba(255,220,193,0.07843);
    --sf-amber-90--alfa-12: rgba(255,220,193,0.12157);
    --sf-amber-90--alfa-24: rgba(255,220,193,0.23922);
    --sf-amber-85: #ffca9f;
    --sf-amber-80: #ffb779;
    --sf-amber-70: #fa911c;
    --sf-amber-60: #d87900;
    --sf-amber-50: #b26300;
    --sf-amber-50--alfa-4: rgba(178,99,0,0.03922);
    --sf-amber-50--alfa-8: rgba(178,99,0,0.07843);
    --sf-amber-50--alfa-12: rgba(178,99,0,0.12157);
    --sf-amber-50--alfa-16: rgba(178,99,0,0.16078);
    --sf-amber-50--alfa-20: rgba(178,99,0,0.2);
    --sf-amber-50--alfa-24: rgba(178,99,0,0.23922);
    --sf-amber-50--alfa-28: rgba(178,99,0,0.27843);
    --sf-amber-50--alfa-32: rgba(178,99,0,0.32157);
    --sf-amber-40: #8f4e00;
    --sf-amber-35: #7d4400;
    --sf-amber-30: #6c3a00;
    --sf-amber-25: #5c3000;
    --sf-amber-20: #4c2700;
    --sf-amber-20--alfa-4: rgba(76,39,0,0.03922);
    --sf-amber-20--alfa-8: rgba(76,39,0,0.07843);
    --sf-amber-20--alfa-12: rgba(76,39,0,0.12157);
    --sf-amber-20--alfa-16: rgba(76,39,0,0.16078);
    --sf-amber-20--alfa-20: rgba(76,39,0,0.2);
    --sf-amber-20--alfa-24: rgba(76,39,0,0.23922);
    --sf-amber-20--alfa-64: rgba(76,39,0,0.63922);
    --sf-amber-20--alfa-80: rgba(76,39,0,0.8);
    --sf-amber-15: #3d1e00;
    --sf-amber-10: #2e1500;
    --sf-amber-5: #1f0c00;
    /* yellow: HCT hue 90, chroma 60 */
    --sf-yellow-98: #fff8f1;
    --sf-yellow-95: #ffefcf;
    --sf-yellow-90: #ffdf92;
    --sf-yellow-90--alfa-4: rgba(255,223,146,0.03922);
    --sf-yellow-90--alfa-8: rgba(255,223,146,0.07843);
    --sf-yellow-90--alfa-12: rgba(255,223,146,0.12157);
    --sf-yellow-90--alfa-24: rgba(255,223,146,0.23922);
    --sf-yellow-85: #ffce41;
    --sf-yellow-80: #f4c002;
    --sf-yellow-70: #d3a500;
    --sf-yellow-60: #b28b00;
    --sf-yellow-50: #937300;
    --sf-yellow-50--alfa-4: rgba(147,115,0,0.03922);
    --sf-yellow-50--alfa-8: rgba(147,115,0,0.07843);
    --sf-yellow-50--alfa-12: rgba(147,115,0,0.12157);
    --sf-yellow-50--alfa-16: rgba(147,115,0,0.16078);
    --sf-yellow-50--alfa-20: rgba(147,115,0,0.2);
    --sf-yellow-50--alfa-24: rgba(147,115,0,0.23922);
    --sf-yellow-50--alfa-28: rgba(147,115,0,0.27843);
    --sf-yellow-50--alfa-32: rgba(147,115,0,0.32157);
    --sf-yellow-40: #755b00;
    --sf-yellow-35: #674f00;
    --sf-yellow-30: #594400;
    --sf-yellow-25: #4b3900;
    --sf-yellow-20: #3e2e00;
    --sf-yellow-20--alfa-4: rgba(62,46,0,0.03922);
    --sf-yellow-20--alfa-8: rgba(62,46,0,0.07843);
    --sf-yellow-20--alfa-12: rgba(62,46,0,0.12157);
    --sf-yellow-20--alfa-16: rgba(62,46,0,0.16078);
    --sf-yellow-20--alfa-20: rgba(62,46,0,0.2);
    --sf-yellow-20--alfa-24: rgba(62,46,0,0.23922);
    --sf-yellow-20--alfa-64: rgba(62,46,0,0.63922);
    --sf-yellow-20--alfa-80: rgba(62,46,0,0.8);
    --sf-yellow-15: #312400;
    --sf-yellow-10: #241a00;
    --sf-yellow-5: #171000;
    /* lime: HCT hue 120, chroma 60 */
    --sf-lime-98: #f6ffc1;
    --sf-lime-95: #e4fd68;
    --sf-lime-90: #d6ee5b;
    --sf-lime-90--alfa-4: rgba(214,238,91,0.03922);
    --sf-lime-90--alfa-8: rgba(214,238,91,0.07843);
    --sf-lime-90--alfa-12: rgba(214,238,91,0.12157);
    --sf-lime-90--alfa-24: rgba(214,238,91,0.23922);
    --sf-lime-85: #c8e04e;
    --sf-lime-80: #bad241;
    --sf-lime-70: #9fb526;
    --sf-lime-60: #859a00;
    --sf-lime-50: #6d7f00;
    --sf-lime-50--alfa-4: rgba(109,127,0,0.03922);
    --sf-lime-50--alfa-8: rgba(109,127,0,0.07843);
    --sf-lime-50--alfa-12: rgba(109,127,0,0.12157);
    --sf-lime-50--alfa-16: rgba(109,127,0,0.16078);
    --sf-lime-50--alfa-20: rgba(109,127,0,0.2);
    --sf-lime-50--alfa-24: rgba(109,127,0,0.23922);
    --sf-lime-50--alfa-28: rgba(109,127,0,0.27843);
    --sf-lime-50--alfa-32: rgba(109,127,0,0.32157);
    --sf-lime-40: #566500;
    --sf-lime-35: #4b5800;
    --sf-lime-30: #404c00;
    --sf-lime-25: #364000;
    --sf-lime-20: #2c3400;
    --sf-lime-20--alfa-4: rgba(44,52,0,0.03922);
    --sf-lime-20--alfa-8: rgba(44,52,0,0.07843);
    --sf-lime-20--alfa-12: rgba(44,52,0,0.12157);
    --sf-lime-20--alfa-16: rgba(44,52,0,0.16078);
    --sf-lime-20--alfa-20: rgba(44,52,0,0.2);
    --sf-lime-20--alfa-24: rgba(44,52,0,0.23922);
    --sf-lime-20--alfa-64: rgba(44,52,0,0.63922);
    --sf-lime-20--alfa-80: rgba(44,52,0,0.8);
    --sf-lime-15: #222900;
    --sf-lime-10: #181e00;
    --sf-lime-5: #0f1300;
    /* green: HCT hue 145, chroma 65 */
    --sf-green-98: #ecffe4;
    --sf-green-95: #c9ffbe;
    --sf-green-90: #8ffa88;
    --sf-green-90--alfa-4: rgba(143,250,136,0.03922);
    --sf-green-90--alfa-8: rgba(143,250,136,0.07843);
    --sf-green-90--alfa-12: rgba(143,250,136,0.12157);
    --sf-green-90--alfa-24: rgba(143,250,136,0.23922);
    --sf-green-85: #81ec7c;
    --sf-green-80: #74dd6f;
    --sf-green-70: #58c157;
    --sf-green-60: #3ba53f;
    --sf-green-50: #198a27;
    --sf-green-50--alfa-4: rgba(25,138,39,0.03922);
    --sf-green-50--alfa-8: rgba(25,138,39,0.07843);
    --sf-green-50--alfa-12: rgba(25,138,39,0.12157);
    --sf-green-50--alfa-16: rgba(25,138,39,0.16078);
    --sf-green-50--alfa-20: rgba(25,138,39,0.2);
    --sf-green-50--alfa-24: rgba(25,138,39,0.23922);
    --sf-green-50--alfa-28: rgba(25,138,39,0.27843);
    --sf-green-50--alfa-32: rgba(25,138,39,0.32157);
    --sf-green-40: #006e17;
    --sf-green-35: #006013;
    --sf-green-30: #00530f;
    --sf-green-25: #00460b;
    --sf-green-20: #003908;
    --sf-green-20--alfa-4: rgba(0,57,8,0.03922);
    --sf-green-20--alfa-8: rgba(0,57,8,0.07843);
    --sf-green-20--alfa-12: rgba(0,57,8,0.12157);
    --sf-green-20--alfa-16: rgba(0,57,8,0.16078);
    --sf-green-20--alfa-20: rgba(0,57,8,0.2);
    --sf-green-20--alfa-24: rgba(0,57,8,0.23922);
    --sf-green-20--alfa-64: rgba(0,57,8,0.63922);
    --sf-green-20--alfa-80: rgba(0,57,8,0.8);
    --sf-green-15: #002d05;
    --sf-green-10: #002203;
    --sf-green-5: #001501;
    /* teal: HCT hue 175, chroma 60 */
    --sf-teal-98: #e6fff4;
    --sf-teal-95: #b9ffe7;
    --sf-teal-90: #3efed1;
    --sf-teal-90--alfa-4: rgba(62,254,209,0.03922);
    --sf-teal-90--alfa-8: rgba(62,254,209,0.07843);
    --sf-teal-90--alfa-12: rgba(62,254,209,0.12157);
    --sf-teal-90--alfa-24: rgba(62,254,209,0.23922);
    --sf-teal-85: #20efc3;
    --sf-teal-80: #00e0b6;
    --sf-teal-70: #00c19d;
    --sf-teal-60: #00a484;
    --sf-teal-50: #00876d;
    --sf-teal-50--alfa-4: rgba(0,135,109,0.03922);
    --sf-teal-50--alfa-8: rgba(0,135,109,0.07843);
    --sf-teal-50--alfa-12: rgba(0,135,109,0.12157);
    --sf-teal-50--alfa-16: rgba(0,135,109,0.16078);
    --sf-teal-50--alfa-20: rgba(0,135,109,0.2);
    --sf-teal-50--alfa-24: rgba(0,135,109,0.23922);
    --sf-teal-50--alfa-28: rgba(0,135,109,0.27843);
    --sf-teal-50--alfa-32: rgba(0,135,109,0.32157);
    --sf-teal-40: #006b56;
    --sf-teal-35: #005e4b;
    --sf-teal-30: #005140;
    --sf-teal-25: #004436;
    --sf-teal-20: #00382c;
    --sf-teal-20--alfa-4: rgba(0,56,44,0.03922);
    --sf-teal-20--alfa-8: rgba(0,56,44,0.07843);
    --sf-teal-20--alfa-12: rgba(0,56,44,0.12157);
    --sf-teal-20--alfa-16: rgba(0,56,44,0.16078);
    --sf-teal-20--alfa-20: rgba(0,56,44,0.2);
    --sf-teal-20--alfa-24: rgba(0,56,44,0.23922);
    --sf-teal-20--alfa-64: rgba(0,56,44,0.63922);
    --sf-teal-20--alfa-80: rgba(0,56,44,0.8);
    --sf-teal-15: #002c22;
    --sf-teal-10: #002018;
    --sf-teal-5: #00150e;
    /* cyan: HCT hue 205, chroma 60 */
    --sf-cyan-98: #eafdff;
    --sf-cyan-95: #c8faff;
    --sf-cyan-90: #80f4ff;
    --sf-cyan-90--alfa-4: rgba(128,244,255,0.03922);
    --sf-cyan-90--alfa-8: rgba(128,244,255,0.07843);
    --sf-cyan-90--alfa-12: rgba(128,244,255,0.12157);
    --sf-cyan-90--alfa-24: rgba(128,244,255,0.23922);
    --sf-cyan-85: #00eafa;
    --sf-cyan-80: #00dbea;
    --sf-cyan-70: #00bdca;
    --sf-cyan-60: #00a0ab;
    --sf-cyan-50: #00848d;
    --sf-cyan-50--alfa-4: rgba(0,132,141,0.03922);
    --sf-cyan-50--alfa-8: rgba(0,132,141,0.07843);
    --sf-cyan-50--alfa-12: rgba(0,132,141,0.12157);
    --sf-cyan-50--alfa-16: rgba(0,132,141,0.16078);
    --sf-cyan-50--alfa-20: rgba(0,132,141,0.2);
    --sf-cyan-50--alfa-24: rgba(0,132,141,0.23922);
    --sf-cyan-50--alfa-28: rgba(0,132,141,0.27843);
    --sf-cyan-50--alfa-32: rgba(0,132,141,0.32157);
    --sf-cyan-40: #006970;
    --sf-cyan-35: #005c62;
    --sf-cyan-30: #004f55;
    --sf-cyan-25: #004248;
    --sf-cyan-20: #00363b;
    --sf-cyan-20--alfa-4: rgba(0,54,59,0.03922);
    --sf-cyan-20--alfa-8: rgba(0,54,59,0.07843);
    --sf-cyan-20--alfa-12: rgba(0,54,59,0.12157);
    --sf-cyan-20--alfa-16: rgba(0,54,59,0.16078);
    --sf-cyan-20--alfa-20: rgba(0,54,59,0.2);
    --sf-cyan-20--alfa-24: rgba(0,54,59,0.23922);
    --sf-cyan-20--alfa-64: rgba(0,54,59,0.63922);
    --sf-cyan-20--alfa-80: rgba(0,54,59,0.8);
    --sf-cyan-15: #002b2e;
    --sf-cyan-10: #002022;
    --sf-cyan-5: #001416;
    /* sky: HCT hue 235, chroma 60 */
    --sf-sky-98: #f5faff;
    --sf-sky-95: #e3f3ff;
    --sf-sky-90: #c4e7ff;
    --sf-sky-90--alfa-4: rgba(196,231,255,0.03922);
    --sf-sky-90--alfa-8: rgba(196,231,255,0.07843);
    --sf-sky-90--alfa-12: rgba(196,231,255,0.12157);
    --sf-sky-90--alfa-24: rgba(196,231,255,0.23922);
    --sf-sky-85: #a2dcff;
    --sf-sky-80: #7cd0ff;
    --sf-sky-70: #00b7f7;
    --sf-sky-60: #009bd1;
    --sf-sky-50: #0080ad;
    --sf-sky-50--alfa-4: rgba(0,128,173,0.03922);
    --sf-sky-50--alfa-8: rgba(0,128,173,0.07843);
    --sf-sky-50--alfa-12: rgba(0,128,173,0.12157);
    --sf-sky-50--alfa-16: rgba(0,128,173,0.16078);
    --sf-sky-50--alfa-20: rgba(0,128,173,0.2);
    --sf-sky-50--alfa-24: rgba(0,128,173,0.23922);
    --sf-sky-50--alfa-28: rgba(0,128,173,0.27843);
    --sf-sky-50--alfa-32: rgba(0,128,173,0.32157);
    --sf-sky-40: #00668a;
    --sf-sky-35: #005979;
    --sf-sky-30: #004c69;
    --sf-sky-25: #004059;
    --sf-sky-20: #00344a;
    --sf-sky-20--alfa-4: rgba(0,52,74,0.03922);
    --sf-sky-20--alfa-8: rgba(0,52,74,0.07843);
    --sf-sky-20--alfa-12: rgba(0,52,74,0.12157);
    --sf-sky-20--alfa-16: rgba(0,52,74,0.16078);
    --sf-sky-20--alfa-20: rgba(0,52,74,0.2);
    --sf-sky-20--alfa-24: rgba(0,52,74,0.23922);
    --sf-sky-20--alfa-64: rgba(0,52,74,0.63922);
    --sf-sky-20--alfa-80: rgba(0,52,74,0.8);
    --sf-sky-15: #00293b;
    --sf-sky-10: #001e2c;
    --sf-sky-5: #00131d;
    /* blue: HCT hue 265.1, chroma 58.6 */
    --sf-blue-98: #f9f9ff;
    --sf-blue-95: #edf0ff;
    --sf-blue-90: #d7e2ff;
    --sf-blue-90--alfa-4: rgba(215,226,255,0.03922);
    --sf-blue-90--alfa-8: rgba(215,226,255,0.07843);
    --sf-blue-90--alfa-12: rgba(215,226,255,0.12157);
    --sf-blue-90--alfa-24: rgba(215,226,255,0.23922);
    --sf-blue-85: #c2d4ff;
    --sf-blue-80: #acc7ff;
    --sf-blue-70: #7eabff;
    --sf-blue-60: #538ff5;
    --sf-blue-50: #3375d9;
    --sf-blue-50--alfa-4: rgba(51,117,217,0.03922);
    --sf-blue-50--alfa-8: rgba(51,117,217,0.07843);
    --sf-blue-50--alfa-12: rgba(51,117,217,0.12157);
    --sf-blue-50--alfa-16: rgba(51,117,217,0.16078);
    --sf-blue-50--alfa-20: rgba(51,117,217,0.2);
    --sf-blue-50--alfa-24: rgba(51,117,217,0.23922);
    --sf-blue-50--alfa-28: rgba(51,117,217,0.27843);
    --sf-blue-50--alfa-32: rgba(51,117,217,0.32157);
    --sf-blue-40: #005bbe;
    --sf-blue-35: #0050a8;
    --sf-blue-30: #004492;
    --sf-blue-25: #00397c;
    --sf-blue-20: #002f67;
    --sf-blue-20--alfa-4: rgba(0,47,103,0.03922);
    --sf-blue-20--alfa-8: rgba(0,47,103,0.07843);
    --sf-blue-20--alfa-12: rgba(0,47,103,0.12157);
    --sf-blue-20--alfa-16: rgba(0,47,103,0.16078);
    --sf-blue-20--alfa-20: rgba(0,47,103,0.2);
    --sf-blue-20--alfa-24: rgba(0,47,103,0.23922);
    --sf-blue-20--alfa-64: rgba(0,47,103,0.63922);
    --sf-blue-20--alfa-80: rgba(0,47,103,0.8);
    --sf-blue-15: #002453;
    --sf-blue-10: #001a40;
    --sf-blue-5: #00102c;
    /* indigo: HCT hue 285, chroma 60 */
    --sf-indigo-98: #fcf8ff;
    --sf-indigo-95: #f2efff;
    --sf-indigo-90: #e1dfff;
    --sf-indigo-90--alfa-4: rgba(225,223,255,0.03922);
    --sf-indigo-90--alfa-8: rgba(225,223,255,0.07843);
    --sf-indigo-90--alfa-12: rgba(225,223,255,0.12157);
    --sf-indigo-90--alfa-24: rgba(225,223,255,0.23922);
    --sf-indigo-85: #d1d0ff;
    --sf-indigo-80: #c1c1ff;
    --sf-indigo-70: #a1a2ff;
    --sf-indigo-60: #8284fa;
    --sf-indigo-50: #686ade;
    --sf-indigo-50--alfa-4: rgba(104,106,222,0.03922);
    --sf-indigo-50--alfa-8: rgba(104,106,222,0.07843);
    --sf-indigo-50--alfa-12: rgba(104,106,222,0.12157);
    --sf-indigo-50--alfa-16: rgba(104,106,222,0.16078);
    --sf-indigo-50--alfa-20: rgba(104,106,222,0.2);
    --sf-indigo-50--alfa-24: rgba(104,106,222,0.23922);
    --sf-indigo-50--alfa-28: rgba(104,106,222,0.27843);
    --sf-indigo-50--alfa-32: rgba(104,106,222,0.32157);
    --sf-indigo-40: #4e50c3;
    --sf-indigo-35: #4243b6;
    --sf-indigo-30: #3535aa;
    --sf-indigo-25: #29279e;
    --sf-indigo-20: #1c1794;
    --sf-indigo-20--alfa-4: rgba(28,23,148,0.03922);
    --sf-indigo-20--alfa-8: rgba(28,23,148,0.07843);
    --sf-indigo-20--alfa-12: rgba(28,23,148,0.12157);
    --sf-indigo-20--alfa-16: rgba(28,23,148,0.16078);
    --sf-indigo-20--alfa-20: rgba(28,23,148,0.2);
    --sf-indigo-20--alfa-24: rgba(28,23,148,0.23922);
    --sf-indigo-20--alfa-64: rgba(28,23,148,0.63922);
    --sf-indigo-20--alfa-80: rgba(28,23,148,0.8);
    --sf-indigo-15: #0d008a;
    --sf-indigo-10: #08006c;
    --sf-indigo-5: #04004c;
    /* violet: HCT hue 305, chroma 60 */
    --sf-violet-98: #fef7ff;
    --sf-violet-95: #f8edff;
    --sf-violet-90: #ecdcff;
    --sf-violet-90--alfa-4: rgba(236,220,255,0.03922);
    --sf-violet-90--alfa-8: rgba(236,220,255,0.07843);
    --sf-violet-90--alfa-12: rgba(236,220,255,0.12157);
    --sf-violet-90--alfa-24: rgba(236,220,255,0.23922);
    --sf-violet-85: #e1cbff;
    --sf-violet-80: #d6baff;
    --sf-violet-70: #c098ff;
    --sf-violet-60: #a779ee;
    --sf-violet-50: #8c5fd2;
    --sf-violet-50--alfa-4: rgba(140,95,210,0.03922);
    --sf-violet-50--alfa-8: rgba(140,95,210,0.07843);
    --sf-violet-50--alfa-12: rgba(140,95,210,0.12157);
    --sf-violet-50--alfa-16: rgba(140,95,210,0.16078);
    --sf-violet-50--alfa-20: rgba(140,95,210,0.2);
    --sf-violet-50--alfa-24: rgba(140,95,210,0.23922);
    --sf-violet-50--alfa-28: rgba(140,95,210,0.27843);
    --sf-violet-50--alfa-32: rgba(140,95,210,0.32157);
    --sf-violet-40: #7345b7;
    --sf-violet-35: #6637aa;
    --sf-violet-30: #5a2a9d;
    --sf-violet-25: #4e1a91;
    --sf-violet-20: #420486;
    --sf-violet-20--alfa-4: rgba(66,4,134,0.03922);
    --sf-violet-20--alfa-8: rgba(66,4,134,0.07843);
    --sf-violet-20--alfa-12: rgba(66,4,134,0.12157);
    --sf-violet-20--alfa-16: rgba(66,4,134,0.16078);
    --sf-violet-20--alfa-20: rgba(66,4,134,0.2);
    --sf-violet-20--alfa-24: rgba(66,4,134,0.23922);
    --sf-violet-20--alfa-64: rgba(66,4,134,0.63922);
    --sf-violet-20--alfa-80: rgba(66,4,134,0.8);
    --sf-violet-15: #35006f;
    --sf-violet-10: #280056;
    --sf-violet-5: #1a003d;
    /* purple: HCT hue 325, chroma 60 */
    --sf-purple-98: #fff7fa;
    --sf-purple-95: #ffebfd;
    --sf-purple-90: #fdd6ff;
    --sf-purple-90--alfa-4: rgba(253,214,255,0.03922);
    --sf-purple-90--alfa-8: rgba(253,214,255,0.07843);
    --sf-purple-90--alfa-12: rgba(253,214,255,0.12157);
    --sf-purple-90--alfa-24: rgba(253,214,255,0.23922);
    --sf-purple-85: #f9c2ff;
    --sf-purple-80: #f4aeff;
    --sf-purple-70: #e18af3;
    --sf-purple-60: #c470d6;
    --sf-purple-50: #a856ba;
    --sf-purple-50--alfa-4: rgba(168,86,186,0.03922);
    --sf-purple-50--alfa-8: rgba(168,86,186,0.07843);
    --sf-purple-50--alfa-12: rgba(168,86,186,0.12157);
    --sf-purple-50--alfa-16: rgba(168,86,186,0.16078);
    --sf-purple-50--alfa-20: rgba(168,86,186,0.2);
    --sf-purple-50--alfa-24: rgba(168,86,186,0.23922);
    --sf-purple-50--alfa-28: rgba(168,86,186,0.27843);
    --sf-purple-50--alfa-32: rgba(168,86,186,0.32157);
    --sf-purple-40: #8c3c9f;
    --sf-purple-35: #7e2e92;
    --sf-purple-30: #712085;
    --sf-purple-25: #641079;
    --sf-purple-20: #55006a;
    --sf-purple-20--alfa-4: rgba(85,0,106,0.03922);
    --sf-purple-20--alfa-8: rgba(85,0,106,0.07843);
    --sf-purple-20--alfa-12: rgba(85,0,106,0.12157);
    --sf-purple-20--alfa-16: rgba(85,0,106,0.16078);
    --sf-purple-20--alfa-20: rgba(85,0,106,0.2);
    --sf-purple-20--alfa-24: rgba(85,0,106,0.23922);
    --sf-purple-20--alfa-64: rgba(85,0,106,0.63922);
    --sf-purple-20--alfa-80: rgba(85,0,106,0.8);
    --sf-purple-15: #440056;
    --sf-purple-10: #340042;
    --sf-purple-5: #23002d;
    /* pink: HCT hue 350, chroma 60 */
    --sf-pink-98: #fff8f8;
    --sf-pink-95: #ffecf2;
    --sf-pink-90: #ffd8e8;
    --sf-pink-90--alfa-4: rgba(255,216,232,0.03922);
    --sf-pink-90--alfa-8: rgba(255,216,232,0.07843);
    --sf-pink-90--alfa-12: rgba(255,216,232,0.12157);
    --sf-pink-90--alfa-24: rgba(255,216,232,0.23922);
    --sf-pink-85: #ffc4df;
    --sf-pink-80: #ffafd6;
    --sf-pink-70: #fd82c5;
    --sf-pink-60: #dd68a9;
    --sf-pink-50: #be4e8f;
    --sf-pink-50--alfa-4: rgba(190,78,143,0.03922);
    --sf-pink-50--alfa-8: rgba(190,78,143,0.07843);
    --sf-pink-50--alfa-12: rgba(190,78,143,0.12157);
    --sf-pink-50--alfa-16: rgba(190,78,143,0.16078);
    --sf-pink-50--alfa-20: rgba(190,78,143,0.2);
    --sf-pink-50--alfa-24: rgba(190,78,143,0.23922);
    --sf-pink-50--alfa-28: rgba(190,78,143,0.27843);
    --sf-pink-50--alfa-32: rgba(190,78,143,0.32157);
    --sf-pink-40: #a03575;
    --sf-pink-35: #902868;
    --sf-pink-30: #811a5c;
    --sf-pink-25: #730a50;
    --sf-pink-20: #620043;
    --sf-pink-20--alfa-4: rgba(98,0,67,0.03922);
    --sf-pink-20--alfa-8: rgba(98,0,67,0.07843);
    --sf-pink-20--alfa-12: rgba(98,0,67,0.12157);
    --sf-pink-20--alfa-16: rgba(98,0,67,0.16078);
    --sf-pink-20--alfa-20: rgba(98,0,67,0.2);
    --sf-pink-20--alfa-24: rgba(98,0,67,0.23922);
    --sf-pink-20--alfa-64: rgba(98,0,67,0.63922);
    --sf-pink-20--alfa-80: rgba(98,0,67,0.8);
    --sf-pink-15: #4f0035;
    --sf-pink-10: #3c0028;
    --sf-pink-5: #29001a;
    /* brown: HCT hue 50, chroma 30 */
    --sf-brown-98: #fff8f5;
    --sf-brown-95: #ffede5;
    --sf-brown-90: #ffdbc8;
    --sf-brown-90--alfa-4: rgba(255,219,200,0.03922);
    --sf-brown-90--alfa-8: rgba(255,219,200,0.07843);
    --sf-brown-90--alfa-12: rgba(255,219,200,0.12157);
    --sf-brown-90--alfa-24: rgba(255,219,200,0.23922);
    --sf-brown-85: #ffc9aa;
    --sf-brown-80: #fcb78f;
    --sf-brown-70: #dd9d76;
    --sf-brown-60: #c0835e;
    --sf-brown-50: #a26a47;
    --sf-brown-50--alfa-4: rgba(162,106,71,0.03922);
    --sf-brown-50--alfa-8: rgba(162,106,71,0.07843);
    --sf-brown-50--alfa-12: rgba(162,106,71,0.12157);
    --sf-brown-50--alfa-16: rgba(162,106,71,0.16078);
    --sf-brown-50--alfa-20: rgba(162,106,71,0.2);
    --sf-brown-50--alfa-24: rgba(162,106,71,0.23922);
    --sf-brown-50--alfa-28: rgba(162,106,71,0.27843);
    --sf-brown-50--alfa-32: rgba(162,106,71,0.32157);
    --sf-brown-40: #865231;
    --sf-brown-35: #784626;
    --sf-brown-30: #6a3b1c;
    --sf-brown-25: #5c3011;
    --sf-brown-20: #4f2507;
    --sf-brown-20--alfa-4: rgba(79,37,7,0.03922);
    --sf-brown-20--alfa-8: rgba(79,37,7,0.07843);
    --sf-brown-20--alfa-12: rgba(79,37,7,0.12157);
    --sf-brown-20--alfa-16: rgba(79,37,7,0.16078);
    --sf-brown-20--alfa-20: rgba(79,37,7,0.2);
    --sf-brown-20--alfa-24: rgba(79,37,7,0.23922);
    --sf-brown-20--alfa-64: rgba(79,37,7,0.63922);
    --sf-brown-20--alfa-80: rgba(79,37,7,0.8);
    --sf-brown-15: #411b01;
    --sf-brown-10: #321300;
    --sf-brown-5: #220a00;
    /* gray: HCT hue 265, chroma 0 */
    --sf-gray-98: #f9f9f9;
    --sf-gray-95: #f1f1f1;
    --sf-gray-90: #e2e2e2;
    --sf-gray-90--alfa-4: rgba(226,226,226,0.03922);
    --sf-gray-90--alfa-8: rgba(226,226,226,0.07843);
    --sf-gray-90--alfa-12: rgba(226,226,226,0.12157);
    --sf-gray-90--alfa-24: rgba(226,226,226,0.23922);
    --sf-gray-85: #d4d4d4;
    --sf-gray-80: #c6c6c6;
    --sf-gray-70: #ababab;
    --sf-gray-60: #919191;
    --sf-gray-50: #777777;
    --sf-gray-50--alfa-4: rgba(119,119,119,0.03922);
    --sf-gray-50--alfa-8: rgba(119,119,119,0.07843);
    --sf-gray-50--alfa-12: rgba(119,119,119,0.12157);
    --sf-gray-50--alfa-16: rgba(119,119,119,0.16078);
    --sf-gray-50--alfa-20: rgba(119,119,119,0.2);
    --sf-gray-50--alfa-24: rgba(119,119,119,0.23922);
    --sf-gray-50--alfa-28: rgba(119,119,119,0.27843);
    --sf-gray-50--alfa-32: rgba(119,119,119,0.32157);
    --sf-gray-40: #5e5e5e;
    --sf-gray-35: #525252;
    --sf-gray-30: #474747;
    --sf-gray-25: #3b3b3b;
    --sf-gray-20: #303030;
    --sf-gray-20--alfa-4: rgba(48,48,48,0.03922);
    --sf-gray-20--alfa-8: rgba(48,48,48,0.07843);
    --sf-gray-20--alfa-12: rgba(48,48,48,0.12157);
    --sf-gray-20--alfa-16: rgba(48,48,48,0.16078);
    --sf-gray-20--alfa-20: rgba(48,48,48,0.2);
    --sf-gray-20--alfa-24: rgba(48,48,48,0.23922);
    --sf-gray-20--alfa-64: rgba(48,48,48,0.63922);
    --sf-gray-20--alfa-80: rgba(48,48,48,0.8);
    --sf-gray-15: #262626;
    --sf-gray-10: #1b1b1b;
    --sf-gray-5: #111111;
  }
}
@layer sf.base {
  .sf-hue-red {
    --sf-hue: light-dark(var(--sf-red-40), var(--sf-red-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-red-20));
    --sf-hue-container: light-dark(var(--sf-red-50--alfa-12), var(--sf-red-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-red-50--alfa-16), var(--sf-red-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-red-50--alfa-20), var(--sf-red-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-red-10), var(--sf-red-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-red-50), var(--sf-red-60));
    --sf-hue-outline: light-dark(var(--sf-red-50), var(--sf-red-60));
  }
  .sf-hue-orange {
    --sf-hue: light-dark(var(--sf-orange-40), var(--sf-orange-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-orange-20));
    --sf-hue-container: light-dark(var(--sf-orange-50--alfa-12), var(--sf-orange-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-orange-50--alfa-16), var(--sf-orange-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-orange-50--alfa-20), var(--sf-orange-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-orange-10), var(--sf-orange-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-orange-50), var(--sf-orange-60));
    --sf-hue-outline: light-dark(var(--sf-orange-50), var(--sf-orange-60));
  }
  .sf-hue-amber {
    --sf-hue: light-dark(var(--sf-amber-40), var(--sf-amber-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-amber-20));
    --sf-hue-container: light-dark(var(--sf-amber-50--alfa-12), var(--sf-amber-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-amber-50--alfa-16), var(--sf-amber-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-amber-50--alfa-20), var(--sf-amber-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-amber-10), var(--sf-amber-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-amber-50), var(--sf-amber-60));
    --sf-hue-outline: light-dark(var(--sf-amber-50), var(--sf-amber-60));
  }
  .sf-hue-yellow {
    --sf-hue: light-dark(var(--sf-yellow-40), var(--sf-yellow-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-yellow-20));
    --sf-hue-container: light-dark(var(--sf-yellow-50--alfa-12), var(--sf-yellow-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-yellow-50--alfa-16), var(--sf-yellow-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-yellow-50--alfa-20), var(--sf-yellow-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-yellow-10), var(--sf-yellow-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-yellow-50), var(--sf-yellow-60));
    --sf-hue-outline: light-dark(var(--sf-yellow-50), var(--sf-yellow-60));
  }
  .sf-hue-lime {
    --sf-hue: light-dark(var(--sf-lime-40), var(--sf-lime-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-lime-20));
    --sf-hue-container: light-dark(var(--sf-lime-50--alfa-12), var(--sf-lime-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-lime-50--alfa-16), var(--sf-lime-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-lime-50--alfa-20), var(--sf-lime-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-lime-10), var(--sf-lime-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-lime-50), var(--sf-lime-60));
    --sf-hue-outline: light-dark(var(--sf-lime-50), var(--sf-lime-60));
  }
  .sf-hue-green {
    --sf-hue: light-dark(var(--sf-green-40), var(--sf-green-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-green-20));
    --sf-hue-container: light-dark(var(--sf-green-50--alfa-12), var(--sf-green-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-green-50--alfa-16), var(--sf-green-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-green-50--alfa-20), var(--sf-green-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-green-10), var(--sf-green-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-green-50), var(--sf-green-60));
    --sf-hue-outline: light-dark(var(--sf-green-50), var(--sf-green-60));
  }
  .sf-hue-teal {
    --sf-hue: light-dark(var(--sf-teal-40), var(--sf-teal-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-teal-20));
    --sf-hue-container: light-dark(var(--sf-teal-50--alfa-12), var(--sf-teal-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-teal-50--alfa-16), var(--sf-teal-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-teal-50--alfa-20), var(--sf-teal-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-teal-10), var(--sf-teal-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-teal-50), var(--sf-teal-60));
    --sf-hue-outline: light-dark(var(--sf-teal-50), var(--sf-teal-60));
  }
  .sf-hue-cyan {
    --sf-hue: light-dark(var(--sf-cyan-40), var(--sf-cyan-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-cyan-20));
    --sf-hue-container: light-dark(var(--sf-cyan-50--alfa-12), var(--sf-cyan-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-cyan-50--alfa-16), var(--sf-cyan-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-cyan-50--alfa-20), var(--sf-cyan-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-cyan-10), var(--sf-cyan-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-cyan-50), var(--sf-cyan-60));
    --sf-hue-outline: light-dark(var(--sf-cyan-50), var(--sf-cyan-60));
  }
  .sf-hue-sky {
    --sf-hue: light-dark(var(--sf-sky-40), var(--sf-sky-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-sky-20));
    --sf-hue-container: light-dark(var(--sf-sky-50--alfa-12), var(--sf-sky-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-sky-50--alfa-16), var(--sf-sky-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-sky-50--alfa-20), var(--sf-sky-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-sky-10), var(--sf-sky-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-sky-50), var(--sf-sky-60));
    --sf-hue-outline: light-dark(var(--sf-sky-50), var(--sf-sky-60));
  }
  .sf-hue-blue {
    --sf-hue: light-dark(var(--sf-blue-40), var(--sf-blue-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-blue-20));
    --sf-hue-container: light-dark(var(--sf-blue-50--alfa-12), var(--sf-blue-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-blue-50--alfa-16), var(--sf-blue-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-blue-50--alfa-20), var(--sf-blue-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-blue-10), var(--sf-blue-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-blue-50), var(--sf-blue-60));
    --sf-hue-outline: light-dark(var(--sf-blue-50), var(--sf-blue-60));
  }
  .sf-hue-indigo {
    --sf-hue: light-dark(var(--sf-indigo-40), var(--sf-indigo-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-indigo-20));
    --sf-hue-container: light-dark(var(--sf-indigo-50--alfa-12), var(--sf-indigo-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-indigo-50--alfa-16), var(--sf-indigo-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-indigo-50--alfa-20), var(--sf-indigo-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-indigo-10), var(--sf-indigo-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-indigo-50), var(--sf-indigo-60));
    --sf-hue-outline: light-dark(var(--sf-indigo-50), var(--sf-indigo-60));
  }
  .sf-hue-violet {
    --sf-hue: light-dark(var(--sf-violet-40), var(--sf-violet-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-violet-20));
    --sf-hue-container: light-dark(var(--sf-violet-50--alfa-12), var(--sf-violet-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-violet-50--alfa-16), var(--sf-violet-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-violet-50--alfa-20), var(--sf-violet-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-violet-10), var(--sf-violet-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-violet-50), var(--sf-violet-60));
    --sf-hue-outline: light-dark(var(--sf-violet-50), var(--sf-violet-60));
  }
  .sf-hue-purple {
    --sf-hue: light-dark(var(--sf-purple-40), var(--sf-purple-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-purple-20));
    --sf-hue-container: light-dark(var(--sf-purple-50--alfa-12), var(--sf-purple-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-purple-50--alfa-16), var(--sf-purple-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-purple-50--alfa-20), var(--sf-purple-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-purple-10), var(--sf-purple-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-purple-50), var(--sf-purple-60));
    --sf-hue-outline: light-dark(var(--sf-purple-50), var(--sf-purple-60));
  }
  .sf-hue-pink {
    --sf-hue: light-dark(var(--sf-pink-40), var(--sf-pink-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-pink-20));
    --sf-hue-container: light-dark(var(--sf-pink-50--alfa-12), var(--sf-pink-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-pink-50--alfa-16), var(--sf-pink-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-pink-50--alfa-20), var(--sf-pink-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-pink-10), var(--sf-pink-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-pink-50), var(--sf-pink-60));
    --sf-hue-outline: light-dark(var(--sf-pink-50), var(--sf-pink-60));
  }
  .sf-hue-brown {
    --sf-hue: light-dark(var(--sf-brown-40), var(--sf-brown-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-brown-20));
    --sf-hue-container: light-dark(var(--sf-brown-50--alfa-12), var(--sf-brown-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-brown-50--alfa-16), var(--sf-brown-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-brown-50--alfa-20), var(--sf-brown-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-brown-10), var(--sf-brown-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-brown-50), var(--sf-brown-60));
    --sf-hue-outline: light-dark(var(--sf-brown-50), var(--sf-brown-60));
  }
  .sf-hue-gray {
    --sf-hue: light-dark(var(--sf-gray-40), var(--sf-gray-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-gray-20));
    --sf-hue-container: light-dark(var(--sf-gray-50--alfa-12), var(--sf-gray-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-gray-50--alfa-16), var(--sf-gray-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-gray-50--alfa-20), var(--sf-gray-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-gray-10), var(--sf-gray-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-gray-50), var(--sf-gray-60));
    --sf-hue-outline: light-dark(var(--sf-gray-50), var(--sf-gray-60));
  }
  .sf-hue-primary {
    --sf-hue: light-dark(var(--sf-primary-40), var(--sf-primary-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-primary-20));
    --sf-hue-container: light-dark(var(--sf-primary-50--alfa-12), var(--sf-primary-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-primary-50--alfa-16), var(--sf-primary-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-primary-50--alfa-20), var(--sf-primary-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-primary-10), var(--sf-primary-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-primary-50), var(--sf-primary-60));
    --sf-hue-outline: light-dark(var(--sf-primary-50), var(--sf-primary-60));
  }
  .sf-hue-secondary {
    --sf-hue: light-dark(var(--sf-secondary-40), var(--sf-secondary-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-secondary-20));
    --sf-hue-container: light-dark(var(--sf-secondary-50--alfa-12), var(--sf-secondary-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-secondary-50--alfa-16), var(--sf-secondary-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-secondary-50--alfa-20), var(--sf-secondary-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-secondary-10), var(--sf-secondary-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-secondary-50), var(--sf-secondary-60));
    --sf-hue-outline: light-dark(var(--sf-secondary-50), var(--sf-secondary-60));
  }
  .sf-hue-tertiary {
    --sf-hue: light-dark(var(--sf-tertiary-40), var(--sf-tertiary-80));
    --sf-on-hue: light-dark(var(--sf-white), var(--sf-tertiary-20));
    --sf-hue-container: light-dark(var(--sf-tertiary-50--alfa-12), var(--sf-tertiary-50--alfa-24));
    --sf-hue-container-hover: light-dark(var(--sf-tertiary-50--alfa-16), var(--sf-tertiary-50--alfa-28));
    --sf-hue-container-active: light-dark(var(--sf-tertiary-50--alfa-20), var(--sf-tertiary-50--alfa-32));
    --sf-on-hue-container: light-dark(var(--sf-tertiary-10), var(--sf-tertiary-90));
    --sf-on-hue-container-graphic: light-dark(var(--sf-tertiary-50), var(--sf-tertiary-60));
    --sf-hue-outline: light-dark(var(--sf-tertiary-50), var(--sf-tertiary-60));
  }
}
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-outline);
    --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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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-3);
    --sf-heading-3--height: var(--sf-title--height-3);
    --sf-heading-4--size: var(--sf-text--size-2);
    --sf-heading-4--height: var(--sf-title--height-2);
    --sf-heading-5--size: var(--sf-text--size-1);
    --sf-heading-5--height: var(--sf-title--height-1);
    --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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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.375rem;
      --sf-ui-1\/3--space-y-tightness-default: var(--sf-a6);
      --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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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: e67f7a53848281ea891dcb2ace865afd32a44f3cd9f9790649bd1b613612a8aa
 * 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);
  }
  /* The content heading ladder (docs review R022, owner decision 2026-11-07):
     a section heading (h2) stands a block further from the text before it
     than a section break, and a sub-heading (h3-h6) only a block, with half
     the text space under it, so it reads as part of its section. */
  .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: calc(var(--sf-heading--space-top) + var(--sf-content--space-block));
    -webkit-margin-before: calc(var(--sf-heading--space-top) + var(--sf-content--space-block));
            margin-block-start: calc(var(--sf-heading--space-top) + var(--sf-content--space-block));
    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-content--space-block);
    -webkit-margin-before: var(--sf-content--space-block);
            margin-block-start: var(--sf-content--space-block);
    margin-bottom: calc(var(--sf-heading--space-bottom) / 2);
    -webkit-margin-after: calc(var(--sf-heading--space-bottom) / 2);
            margin-block-end: calc(var(--sf-heading--space-bottom) / 2);
  }
  .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-content--space-block);
    -webkit-margin-before: var(--sf-content--space-block);
            margin-block-start: var(--sf-content--space-block);
    margin-bottom: calc(var(--sf-heading--space-bottom) / 2);
    -webkit-margin-after: calc(var(--sf-heading--space-bottom) / 2);
            margin-block-end: calc(var(--sf-heading--space-bottom) / 2);
  }
  .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-content--space-block);
    -webkit-margin-before: var(--sf-content--space-block);
            margin-block-start: var(--sf-content--space-block);
    margin-bottom: calc(var(--sf-heading--space-bottom) / 2);
    -webkit-margin-after: calc(var(--sf-heading--space-bottom) / 2);
            margin-block-end: calc(var(--sf-heading--space-bottom) / 2);
  }
  .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-content--space-block);
    -webkit-margin-before: var(--sf-content--space-block);
            margin-block-start: var(--sf-content--space-block);
    margin-bottom: calc(var(--sf-heading--space-bottom) / 2);
    -webkit-margin-after: calc(var(--sf-heading--space-bottom) / 2);
            margin-block-end: calc(var(--sf-heading--space-bottom) / 2);
  }
  .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 {
  /* An icon waits at font-size 0 for the Loader's sf-icon-loaded mark -- on a
     page the Loader runs on (data-sf-loader, set by core.js). Without it
     nothing ever marks an icon, and the icons sheet draws each one once its
     font is in; the hold then must not apply, or the sheet had to answer it
     with an important size of its own, which beat every size a page, a
     utility or the density gave the glyph (a late icon in a compact row drew
     24px in a 16px box). Before core.js runs the sheet's rule already won,
     so the first paint of every icon is the same. */
  :root[data-sf-loader] 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-mark);
    --sf-code--color: var(--sf-on-surface);
    --sf-code--background: var(--sf-surface-container);
    --sf-code--font-family: var(--sf-mono);
    --sf-code--radius: var(--sf-a6);
    --sf-code--padding: 0.2em 0.4em;
    --sf-code--font-size: 85%;
    --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);
  }
  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-code--color);
  }
  code:where(:not([class*=sf-]):not([class*=sf-] > code):not(pre code):not(kbd code):not(samp code):not(button code):not([role=button] code):not(.sf-highlight code):not(.sf-code-surface code)) {
    padding: var(--sf-code--padding);
    padding: var(--sf-code-padding, var(--sf-code--padding));
    border-radius: var(--sf-code--radius);
    border-radius: var(--sf-code-radius, var(--sf-code--radius));
    background-color: var(--sf-code--background);
    background-color: var(--sf-code-background-color, var(--sf-code-background, var(--sf-code--background)));
    color: var(--sf-code--color);
    color: var(--sf-code-color, var(--sf-code--color));
    font-family: var(--sf-code--font-family);
    font-family: var(--sf-code-font-family, var(--sf-code--font-family));
    font-size: var(--sf-code--font-size);
    font-size: var(--sf-code-font-size, var(--sf-code--font-size));
    white-space: nowrap;
  }
  [data-sf-code-copy] code[data-sf-code-copy-target] {
    cursor: pointer;
    transition: box-shadow var(--sf-duration-fast) var(--sf-animation);
  }
  [data-sf-code-copy] code[data-sf-code-copy-target]:hover {
    box-shadow: inset 0 0 0 1px var(--sf-outline-variant);
    box-shadow: inset 0 0 0 var(--sf-px) var(--sf-outline-variant);
  }
  .sf-code-copy-status {
    position: fixed;
    z-index: 90;
    z-index: var(--sf-z-index-9);
    margin-top: calc(-1 * var(--sf-space-1\/4));
    -webkit-margin-before: calc(-1 * var(--sf-space-1\/4));
            margin-block-start: calc(-1 * var(--sf-space-1\/4));
    padding: var(--sf-space-1\/4) var(--sf-space-1\/2);
    border-radius: var(--sf-radius--ui);
    background-color: var(--sf-surface-inverse);
    color: var(--sf-on-surface-inverse);
    font-family: var(--sf-text--family);
    font-size: var(--sf-text--size-1\/2);
    line-height: var(--sf-text--height-1\/2);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    transition: opacity var(--sf-duration-fast) var(--sf-animation);
  }
  .sf-code-copy-status:empty {
    padding: 0;
  }
  .sf-code-copy-status[data-shown] {
    opacity: 1;
  }
  .sf-code-copy-status[data-below] {
    margin-top: var(--sf-space-1\/4);
    -webkit-margin-before: var(--sf-space-1\/4);
            margin-block-start: var(--sf-space-1\/4);
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}
/*
 * Generated by scripts/generate-density.mjs from the ladder files in
 * src/core/figma_variables (desktop blocks). Do not edit by hand.
 * source-sha256: df3d0b79b8101a8b601d73c5dd42bc5cee25f1ab9c9f79edda84d43430e43717
 *
 * Density (owner decision C22): data-sf-density="compact" on the root or on
 * a container moves every component one ladder step down -- height, padding,
 * gap, icon and text together. Each step variable holds the value of the step
 * below; components read their steps as always. An element with an explicit
 * size (a page's size attribute) takes the normal ladder back under it;
 * data-sf-density="normal" does the same for a region. Desktop only: below
 * 60rem the phone ladder already is the dense one.
 */
@layer sf.base {
  @media (min-width: 60rem) {
    [data-sf-density=compact] {
      --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-c0);
      --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-c4);
      --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-a6);
      --sf-ui-2--space-y-tightness-default: var(--sf-a8);
      --sf-ui-3--space-y-tightness-default: var(--sf-b0);
      --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-a4);
      --sf-ui-3--space-y-tightness-low: var(--sf-a6);
      --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.5rem;
      --sf-ui-1\/2--space-y-tightness-high: var(--sf-a8);
      --sf-ui-1--space-y-tightness-high: var(--sf-b0);
      --sf-ui-2--space-y-tightness-high: var(--sf-b2);
      --sf-ui-3--space-y-tightness-high: var(--sf-b4);
      --sf-ui-1\/3--space-y-tightness-highest: 0.5rem;
      --sf-ui-1\/3--space-y-tightness-highest: var(--sf-a8);
      --sf-ui-1\/2--space-y-tightness-highest: 0.75rem;
      --sf-ui-1\/2--space-y-tightness-highest: var(--sf-b2);
      --sf-ui-1--space-y-tightness-highest: var(--sf-b4);
      --sf-ui-2--space-y-tightness-highest: var(--sf-b6);
      --sf-ui-3--space-y-tightness-highest: var(--sf-c0);
      --sf-ui-1\/3--space-x: 0.75rem;
      --sf-ui-1\/3--space-x: var(--sf-b2);
      --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-b6);
      --sf-ui-3--space-x: var(--sf-c0);
      --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.375rem;
      --sf-ui-1\/2--text-space-x: var(--sf-a6);
      --sf-ui-1--text-space-x: var(--sf-a7);
      --sf-ui-2--text-space-x: var(--sf-a8);
      --sf-ui-3--text-space-x: 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-a6);
      --sf-ui-2--space-y: var(--sf-a8);
      --sf-ui-3--space-y: var(--sf-b0);
      --sf-icon-size-1\/3: 0.75rem;
      --sf-icon-size-1\/3: var(--sf-b2);
      --sf-icon-size-1\/2: 0.75rem;
      --sf-icon-size-1\/2: var(--sf-b2);
      --sf-icon-size-1: var(--sf-b4);
      --sf-icon-size-2: var(--sf-b6);
      --sf-icon-size-3: var(--sf-c0);
      --sf-icon-size-4: var(--sf-c2);
      --sf-icon-size-5: var(--sf-c4);
      --sf-icon-size-6: var(--sf-c6);
      --sf-icon-size-7: var(--sf-c8);
      --sf-space-1\/4: 0.25rem;
      --sf-space-1\/4: var(--sf-a4);
      --sf-space-1\/3: 0.25rem;
      --sf-space-1\/3: var(--sf-a4);
      --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-c0);
      --sf-space-4: var(--sf-c2);
      --sf-space-5: var(--sf-c6);
      --sf-space-6: var(--sf-d0);
      --sf-space-7: var(--sf-d2);
      --sf-space-8: var(--sf-d6);
      --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-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-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));
      --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-text--size: var(--sf-text--size-1);
      --sf-text--height: var(--sf-text--height-1);
    }
    [data-sf-density=compact] :not(input):not(select):not(textarea)[size]:not([data-sf-size-relative]):not([data-sf-size-scale]):not([data-sf-static] *),
    [data-sf-density=normal] {
      --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--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-ui-1\/3--space-y-tightness-default: 0.375rem;
      --sf-ui-1\/3--space-y-tightness-default: var(--sf-a6);
      --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);
      --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);
      --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);
      --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);
      --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);
      --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);
      --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-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);
      --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);
      --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-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-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));
      --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-text--size: var(--sf-text--size-1);
      --sf-text--height: var(--sf-text--height-1);
    }
    /* On <html> the variables only, which body reads: a font-size on the
       root element would move rem, and with it every step of the ladder.
       An explicit size takes the normal body text back too, for the text a
       component inherits rather than sizes. */
    [data-sf-density=compact]:not(:root),
    [data-sf-density=compact] :not(input):not(select):not(textarea)[size]:not([data-sf-size-relative]):not([data-sf-size-scale]):not([data-sf-static] *),
    [data-sf-density=normal]:not(:root) {
      font-size: var(--sf-text--size);
      line-height: var(--sf-text--height);
    }
  }
}
@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--alfa-fill: 24%;
    --sf-shadow--alfa-shade: 8%;
  }
}
@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 {
  /* The logo's two inks are the text roles (C18): the word on-surface, the
     mark on-surface-variant, so the logo follows the theme like the text
     beside it instead of a light/dark pair of its own. */
  .sf-logo .sf-logo-1 {
    color: var(--sf-on-surface);
  }
  .sf-logo .sf-logo-2 {
    color: var(--sf-on-surface-variant);
  }
  .sf-logo svg {
    width: 100%;
    height: 100%;
    max-height: 1.5rem;
    max-height: var(--sf-c2);
  }
  @media (min-width: 60rem) {
    .sf-logo svg {
      max-height: 1.75rem;
      max-height: var(--sf-c4);
    }
  }
}
@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);
    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-unknown {
    display: block;
    min-width: 0;
    min-inline-size: 0;
    padding-top: var(--sf-space-2);
    padding-bottom: var(--sf-space-2);
    padding-block: var(--sf-space-2);
    padding-left: var(--sf-space-3);
    padding-right: var(--sf-space-3);
    padding-inline: var(--sf-space-3);
    border: 1px dashed GrayText;
    border: 1px dashed var(--sf-outline-variant, GrayText);
    border-radius: var(--sf-radius-1);
    color: CanvasText;
    color: var(--sf-on-surface-variant, var(--sf-on-surface, CanvasText));
    word-wrap: anywhere;
  }
  .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(> [data-sf-region-placement=start]) {
      grid-template-columns: var(--sf-composition-region-side) minmax(0, 1fr);
    }
    .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(> [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(> [data-sf-region-placement=start]) > [data-sf-region-placement=start] {
      grid-column: 1;
    }
    .sf-composition-regions-grid:has(> [data-sf-region-placement=start]) > [data-sf-region-placement=center] {
      grid-column: 2;
    }
    .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.base {
  :where(.sf-composition-columns) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-gap: var(--sf-space-4);
    gap: var(--sf-space-4);
    min-width: 0;
    min-inline-size: 0;
  }
  :where(.sf-composition-columns[data-composition-columns="2"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="3"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="4"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="5"]) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="6"]) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="7"]) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="8"]) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="9"]) {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="10"]) {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="11"]) {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  :where(.sf-composition-columns[data-composition-columns="12"]) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  :where(.sf-composition-column) {
    min-width: 0;
    min-inline-size: 0;
  }
}
@layer sf.components {
  :where([data-sf-composition-part=content]) > :first-child {
    margin-top: 0;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
  :where([data-sf-composition-part=content]) > :last-child {
    margin-bottom: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
  :where([data-sf-composition-part=content].grid) > * {
    margin-top: 0;
    margin-bottom: 0;
    margin-block: 0;
  }
}
@layer sf.components {
  [data-sf-composition-id].bg-primary.color-on-primary .sf-button.sf-button--default.sf-button--primary {
    --sf-button--background-color: var(--sf-button-background-color, var(--sf-on-primary));
  }
  [data-sf-composition-id].bg-primary.color-on-primary .sf-button.sf-button--default.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-primary));
  }
  [data-sf-composition-id].bg-primary.color-on-primary .sf-button.sf-button--default.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-primary);
  }
  [data-sf-composition-id].bg-primary.color-on-primary .sf-button.sf-button--outline.sf-button--primary {
    --sf-button--border-color: var(--sf-button-border-color, var(--sf-on-primary));
  }
  .bg-primary.color-on-primary[data-sf-composition-id] .sf-button.sf-button--outline.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-primary));
  }
  .bg-primary.color-on-primary[data-sf-composition-id] .sf-button.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-primary));
  }
  .bg-primary.color-on-primary[data-sf-composition-id] .sf-button.sf-button--ghost.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-button-color, var(--sf-on-primary));
  }
  .bg-primary.color-on-primary[data-sf-composition-id] .sf-button.sf-button--outline.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .bg-primary.color-on-primary[data-sf-composition-id] .sf-button.sf-button--link.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .bg-primary.color-on-primary[data-sf-composition-id] .sf-button.sf-button--ghost.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
}
@layer sf.states {
  [data-sf-composition-id].bg-primary.color-on-primary .sf-button.sf-button--default.sf-button--primary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-primary-container);
  }
}
@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: var(--sf-space-1);
    gap: var(--sf-space-1);
    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: var(--sf-space-2);
       -moz-column-gap: var(--sf-space-2);
            column-gap: var(--sf-space-2);
  }
  .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: var(--sf-space-1);
    padding-bottom: var(--sf-space-1);
    padding-block: var(--sf-space-1);
    padding-left: var(--sf-space-2);
    padding-right: var(--sf-space-2);
    padding-inline: var(--sf-space-2);
    border: 1px solid GrayText;
    border: 1px solid var(--sf-outline, GrayText);
    border-radius: var(--sf-radius-1);
    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;
    width: 1.25rem;
    width: var(--sf-c0);
    inline-size: var(--sf-c0);
    height: 1.25rem;
    block-size: 1.25rem;
    height: 1.25rem;
    height: var(--sf-c0);
    block-size: var(--sf-c0);
    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-surface-popup);
      background: var(--sf-workspace-drawer-background-color, var(--sf-workspace-drawer-background, var(--sf-surface-popup)));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-black--alfa-64);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-scrim-color, var(--sf-black--alfa-64));
    }
    @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-surface-popup);
      background: var(--sf-workspace-drawer-background-color, var(--sf-workspace-drawer-background, var(--sf-surface-popup)));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-black--alfa-64);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-scrim-color, var(--sf-black--alfa-64));
    }
    .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-surface-popup);
      background: var(--sf-workspace-drawer-background-color, var(--sf-workspace-drawer-background, var(--sf-surface-popup)));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-black--alfa-64);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-scrim-color, var(--sf-black--alfa-64));
    }
    @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-surface-popup);
      background: var(--sf-workspace-drawer-background-color, var(--sf-workspace-drawer-background, var(--sf-surface-popup)));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-black--alfa-64);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-scrim-color, var(--sf-black--alfa-64));
    }
    @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-surface-popup);
      background: var(--sf-workspace-drawer-background-color, var(--sf-workspace-drawer-background, var(--sf-surface-popup)));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-black--alfa-64);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-scrim-color, var(--sf-black--alfa-64));
    }
    @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-surface-popup);
      background: var(--sf-workspace-drawer-background-color, var(--sf-workspace-drawer-background, var(--sf-surface-popup)));
      color: var(--sf-on-surface);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-black--alfa-64);
      box-shadow: var(--sf-shadow-modal), 0 0 0 100vmax var(--sf-scrim-color, var(--sf-black--alfa-64));
    }
    @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(> [data-sf-static])) {
    --sf-skeleton-base: var(--sf-surface-container);
    --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(> [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(> [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(> [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 {
  /* sf-language before it draws (Docara, 2026-11-07: the header tools moved
     left by 40 px when the trigger appeared). The element knows its box before
     its code does, from its attributes alone: one control of its size step
     high (size, default 1), and for the menu and search looks -- an icon button
     -- as wide as high. So until it marks its look (data-look, set as it draws)
     it holds that box itself, and a page needs no placeholder of its own. The
     switch (mode inline, or auto, whose look depends on how many languages it
     is given) holds its height only: its width is its labels'. Static markup
     printed inside (data-sf-static) is its own box, so nothing is reserved
     then. Here, not in a sheet of the component's, because the element has no
     sheet and core.css is the one sheet a page links before any code. */
  :where(sf-language:not([data-look])) {
    --sf-language--box: var(--sf-ui-1--control-height);
  }
  :where(sf-language[size="1/3"]:not([data-look])) {
    --sf-language--box: var(--sf-ui-1\/3--control-height);
  }
  :where(sf-language[size="1/2"]:not([data-look])) {
    --sf-language--box: var(--sf-ui-1\/2--control-height);
  }
  :where(sf-language[size="2"]:not([data-look])) {
    --sf-language--box: var(--sf-ui-2--control-height);
  }
  :where(sf-language[size="3"]:not([data-look])) {
    --sf-language--box: var(--sf-ui-3--control-height);
  }
  :where(sf-language:not([data-look])):not(:has(> [data-sf-static])) {
    display: inline-block;
    vertical-align: middle;
    height: var(--sf-language--box);
    block-size: var(--sf-language--box);
  }
  :where(sf-language[mode=menu]:not([data-look])):not(:has(> [data-sf-static])) {
    width: var(--sf-language--box);
    inline-size: var(--sf-language--box);
  }
  :where(sf-language[mode=search]:not([data-look])):not(:has(> [data-sf-static])) {
    width: var(--sf-language--box);
    inline-size: var(--sf-language--box);
  }
  /* Its menu waits for its own code in the parts the element drew: an empty
     undefined sf-menu-context would stand in the row as one more item, a gap
     wider than the trigger, until it upgrades into its popup. */
  :where(sf-language .sf-language-parts > sf-menu-context[popup]:not(:defined)) {
    display: none;
  }
  :where(sf-language .sf-language-parts > sf-context-menu[popup]:not(:defined)) {
    display: 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-surface-container);
    --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-surface-container);
    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-surface-container);
  }
  :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;
    }
  }
}