@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(../assets/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(../assets/font-4.ttf) format('truetype');
}
    :root {
      color-scheme: dark;
      --color-background: #111;
      --color-header: #211710;
      --color-text: #e0d0d0;
      --color-link: #aaf;
      --color-active: #ff5;
      --color-white: #fff;
      --color-muted: #8e8e8e;
      --color-footer: #444;
      --font-body: 12.8px;
      --font-navigation: 16px;
      --font-heading: 18px;
      --font-button: 20px;
      --font-small: 11px;
      --space-small: 8px;
      --space-navigation: 10px;
      --space-paragraph: 18.7px;
      --space-medium: 20px;
      --space-column: 40px;
      --width-page: 1000px;
      --height-header: 48px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      min-width: 280px; min-height: 100vh; margin: 0; display: flex; flex-direction: column;
      background: var(--color-background) url('../assets/background.png') repeat 0 0 / 48px 48px;
      color: var(--color-text); font-family: Inter, Arial, sans-serif;
      font-size: var(--font-body); font-weight: 400;
    }
    a { color: var(--color-link); text-decoration: none; }
    a:focus-visible, button:focus-visible { outline: 2px solid var(--color-active); outline-offset: 4px; }
    button { font: inherit; }
    img { display: block; }
    p, h1, h2 { margin: 0; }
    .header {
      position: relative; z-index: 2; flex-shrink: 0;
      background: var(--color-header) url('../assets/header.png') repeat 0 0 / 48px 48px;
      font-family: Arial, sans-serif;
    }
    .header__inner { width: var(--width-page); height: var(--height-header); margin-inline: auto; display: flex; align-items: flex-start; }
    .header__brand { position: relative; flex: 0 0 224px; height: 47px; }
    .header__logo { position: absolute; left: 25.7824px; top: 6.3121px; width: 173.1072px; height: 36.3169px; }
    .header__menu { flex: 1; min-width: 0; }
    .header__menu-inner { display: flex; height: var(--height-header); }
    .header__navigation { width: 415px; flex-shrink: 0; padding: 13px 0 0 10px; }
    .header__links { display: flex; gap: var(--space-navigation); margin: 0; padding: 0; list-style: none; }
    .header__link { color: var(--color-white); font-size: var(--font-navigation); font-weight: 700; line-height: 22.4px; white-space: nowrap; }
    .header__link--active { color: var(--color-active); }
    .header__account { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding-right: 43.5px; padding-top: 1px; white-space: nowrap; }
    .header__account-link { font-size: var(--font-navigation); font-weight: 700; line-height: 22.4px; }
    .header__separator { width: 1px; height: 13px; background: var(--color-text); }
    .header__toggle { display: none; width: 40px; height: 40px; padding: 9px; border: 0; border-radius: 3px; background: transparent; color: var(--color-white); cursor: pointer; }
    .header__toggle-line { display: block; height: 2px; margin-block: 4px; background: currentColor; }

    .footer { margin-top: auto; padding: 13px 20px 8px; color: var(--color-footer); font-family: Arial, sans-serif; font-size: 13px; line-height: 18.2px; text-align: center; }
    .footer { min-height: 40px; }
    @media (max-width: 1024px) {
      .header__inner { position: relative; width: 100%; height: auto; min-height: var(--height-header); flex-wrap: wrap; align-items: center; justify-content: space-between; padding-inline: 16px; }
      .header__brand { flex-basis: 224px; }
      .header__toggle { display: block; }
      .header__menu { display: grid; flex: 0 0 100%; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 220ms ease, visibility 220ms; }
      .header__menu--open { grid-template-rows: 1fr; visibility: visible; }
      .header__menu-inner { min-height: 0; height: auto; overflow: hidden; flex-direction: column; }
      .header__navigation { width: 100%; padding: 12px 10px; }
      .header__links { flex-direction: column; gap: 0; }
      .header__link { display: block; padding-block: 8px; }
      .header__account { flex: none; justify-content: flex-start; padding: 0 10px 20px; }

    }
    @media (max-width: 768px) {
      .header__inner { padding-inline: 8px; }
      .footer { font-size: 11px; line-height: 16px; }
    }
    @media (prefers-reduced-motion: reduce) { .header__menu { transition: none; } }