@layer base {
  /* Базовая типографика, доступность и каркас приложения. */
  :where(
    body,
    div,
    main,
    aside,
    nav,
    section,
    article,
    header,
    footer,
    form,
    search,
    dialog,
    button,
    input,
    select,
    textarea,
    ul,
    ol,
    li,
    a,
    label,
    span,
    svg,
    p,
    h1,
    h2,
    h3,
    dl,
    dt,
    dd
  ) {
    box-sizing: border-box;
  }
  html {
    block-size: 100%;
    background: var(--color-bg);
  }
  body {
    margin: 0;
    color: var(--color-text);
    font: var(--font-md)/var(--line-height-body) var(--font);
    -webkit-font-smoothing: antialiased;
  }
  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  button,
  a,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
  }
  button:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button,
  input,
  textarea,
  select {
    border-radius: var(--radius-sm);
  }
  button {
    background: none;
    border: 0;
  }
  input,
  textarea,
  select {
    border: var(--border-control);
    background: var(--color-surface);
    padding: var(--space-2-25) var(--space-2-75);
    max-inline-size: 100%;
  }
  textarea {
    resize: vertical;
  }
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--color-accent);
  }
  :focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--size-3);
  }
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline-offset: var(--size-1);
  }
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }
  h1 {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-heading);
  }
  h2 {
    font-size: var(--font-17);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-heading);
  }
  h3 {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semibold);
  }
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  svg {
    display: block;
    flex: none;
  }
  .sr-only {
    position: absolute;
    inline-size: var(--size-1);
    block-size: var(--size-1);
    padding: 0;
    margin: calc(-1 * var(--space-0-25));
    overflow: clip;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .skip-link {
    position: fixed;
    inset-block-start: calc(-1 * var(--space-17-5));
    inset-inline-start: var(--space-22-5);
    z-index: var(--layer-skip);
    padding: var(--space-3);
    background: var(--color-surface);
    border: var(--border-accent);
  }
  .skip-link:focus {
    inset-block-start: var(--space-2-5);
  }
  .app-shell {
    display: grid;
    grid-template-columns: var(--rail-size) minmax(0, 1fr);
    grid-template-rows: var(--header-size) minmax(0, 1fr);
    grid-template-areas: 'rail header' 'rail workspace';
    block-size: 100vh;
    block-size: 100dvh;
  }
  .app-rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4-75) var(--space-2-5) var(--space-4-25);
    border-inline-end: var(--border-default);
    background: var(--color-surface);
  }
  .brand {
    inline-size: var(--brand-size);
    block-size: var(--brand-size);
    border-radius: var(--brand-radius);
    background: var(--color-accent);
    display: grid;
    place-items: center;
    color: var(--color-on-accent);
  }
  .brand svg {
    inline-size: var(--brand-icon-size);
    block-size: var(--brand-icon-size);
  }
  .rail-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    inline-size: 100%;
  }
  .rail-link {
    display: grid;
    place-items: center;
    position: relative;
    inline-size: var(--rail-item-size);
    block-size: var(--rail-item-size);
    margin-inline: auto;
    color: var(--color-muted);
    border-radius: var(--navigation-radius);
  }
  .rail-link:hover {
    color: var(--color-accent);
    background: var(--color-subtle);
  }
  .rail-link.is-active {
    color: var(--color-accent);
    background: var(--color-accent-soft);
  }
  .rail-link.is-active::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(-1 * var(--space-3-25));
    inline-size: var(--size-3);
    block-size: var(--size-22);
    border-radius: 0 var(--radius-4) var(--radius-4) 0;
    background: var(--color-accent);
  }
  .rail-link .nav-tooltip {
    position: absolute;
    inset-inline-start: var(--space-13-25);
    padding: var(--space-1-5) var(--space-2-5);
    background: var(--color-text);
    color: var(--color-on-accent);
    border-radius: var(--radius-5);
    white-space: nowrap;
    font-size: var(--font-12);
    opacity: 0;
    pointer-events: none;
    z-index: var(--layer-tooltip);
  }
  .rail-link:hover .nav-tooltip,
  .rail-link:focus-visible .nav-tooltip {
    opacity: 1;
  }
  .rail-bottom {
    margin-block-start: auto;
    display: grid;
    justify-items: center;
    gap: var(--space-3-25);
  }
  .user-avatar {
    inline-size: var(--size-33);
    block-size: var(--size-33);
    border-radius: var(--radius-circle);
    background: var(--color-accent-soft);
    color: var(--color-secondary);
    display: grid;
    place-items: center;
    font-size: var(--font-11);
    font-weight: var(--font-weight-semibold);
  }
  .app-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--color-surface);
    padding-inline: var(--header-padding-inline);
    border-block-end: var(--border-default);
  }
  .header-title {
    display: flex;
    align-items: center;
    gap: var(--space-3-25);
    min-inline-size: 0;
  }
  .wordmark {
    font-size: var(--font-15);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-heading);
  }
  .wordmark span {
    font-weight: var(--font-weight-regular);
    color: var(--color-secondary);
  }
  .header-divider {
    block-size: var(--size-18);
    inline-size: var(--size-1);
    background: var(--color-border-strong);
  }
  .header-caption {
    font-size: var(--font-12);
    color: var(--color-secondary);
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3-75);
  }
  .header-date {
    color: var(--color-secondary);
    font-size: var(--font-12);
  }
  .demo-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-75);
    font-size: var(--font-11);
    color: var(--color-secondary);
    border: var(--border-default);
    padding: var(--space-1) var(--space-2-25);
    border-radius: var(--radius-5);
    background: var(--color-subtle);
    white-space: nowrap;
  }
  .demo-badge::before {
    content: '';
    inline-size: var(--size-5);
    block-size: var(--size-5);
    background: var(--color-success);
    border-radius: var(--radius-circle);
  }
  .workspace {
    grid-area: workspace;
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
  }
  .view-heading {
    padding: var(--page-heading-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-surface);
    border-block-end: var(--border-default);
  }
  .view-heading p {
    color: var(--color-secondary);
    font-size: var(--font-12);
    margin-block-start: var(--space-1);
  }
  .page-scroll {
    flex: 1;
    min-block-size: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    padding: var(--page-padding-block) var(--page-padding-inline);
  }
  .muted {
    color: var(--color-secondary);
  }
  .tiny {
    font-size: var(--font-11);
  }
  .flex-row {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    min-inline-size: 0;
  }
  .push-end {
    margin-inline-start: auto;
  }
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .section-label {
    font-size: var(--font-10);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: var(--font-weight-semibold);
  }
  @media (max-width: 900px) {
    .header-date,
    .header-caption {
      display: none;
    }
    .app-header {
      padding-inline: var(--header-padding-inline);
    }
    .page-scroll {
      padding: var(--page-padding-block) var(--page-padding-inline);
    }
    .view-heading {
      padding: var(--page-heading-padding);
    }
  }
  @media (max-width: 620px) {
    .app-rail {
      padding-inline: var(--space-1);
      gap: var(--space-5);
    }
    .rail-link {
      inline-size: var(--rail-item-size);
      block-size: var(--rail-item-size);
    }
    .rail-link.is-active::before {
      inset-inline-start: calc(-1 * var(--space-1));
    }
    .brand {
      inline-size: var(--brand-size);
      block-size: var(--brand-size);
    }
    .app-header {
      padding-inline: var(--header-padding-inline);
    }
    .header-divider {
      display: none;
    }
    .header-actions {
      gap: var(--space-1-75);
    }
    .demo-badge {
      font-size: var(--font-10);
      padding: var(--space-0-75) var(--space-1-5);
    }
    .view-heading {
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .page-scroll {
      padding: var(--page-padding-block) var(--page-padding-inline);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation: none !important;
      transition: none !important;
    }
  }
}