* {
      box-sizing: border-box;
    }
    body {
      background: #0F0202;
      color: #7C5557;
      font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "Times New Roman", Times, serif;
      font-size: 17px;
      line-height: 1.6;
      margin: 0;
      padding: 40px 20px;
    }
    a {
      color: #7C5557;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    pre {
      background: #0F0202;
      border: 1px solid #7C5557;
      padding: 1rem;
      overflow: auto;
      font-size: 0.9rem;
      line-height: 1.4;
      color: #7C5557;
    }
    h2 {
      font-weight: normal;
      font-style: italic;
      margin-top: 2rem;
    }
    h3 {
      font-weight: normal;
      margin-top: 1.2rem;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
    }
    .sidebar {
      flex: 1 1 220px;
      min-width: 180px;
    }
    .sidebar ul {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }
    .sidebar li {
      margin: 0.3rem 0;
    }
    .sidebar ul ul {
      padding-left: 1.2rem;
    }
    .sidebar a {
      display: inline-block;
    }
    .content {
      flex: 3 1 400px;
      min-width: 250px;
    }
    .content p {
      margin: 1.2rem 0;
    }
    .footer {
      max-width: 1200px;
      margin: 60px auto 0 auto;
      padding-top: 20px;
      border-top: 1px solid #7C5557;
      text-align: center;
      font-size: 0.9rem;
      color: #7C5557;
    }
    .footer a {
      color: #7C5557;
      text-decoration: none;
    }
    .footer a:hover {
      text-decoration: underline;
    }
    .logo {
      max-width: 100%;
      height: auto;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 700px) {
      .container {
        flex-direction: column;
        gap: 20px;
      }
      .sidebar {
        flex: 1 1 auto;
      }
      .content {
        flex: 1 1 auto;
      }
    }

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  background: transparent;
  color: #7C5557;
  border: 1px solid #7C5557;
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background: #7C5557;
  color: #0F0202;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  background: #5e3f41;
  border-color: #5e3f41;
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 1px solid #7C5557;
  outline-offset: 2px;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* прячем настоящий input, но оставляем его доступным */
input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* стилизуем label как кнопку */
.file-button {
  display: inline-block;
  background: transparent;
  color: #7C5557;
  border: 1px solid #7C5557;
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.file-button:hover {
  background: #7C5557;
  color: #0F0202;
}

.file-name {
  margin-left: 0.8rem;
  font-size: 0.9rem;
  color: #7C5557;
  opacity: 0.7;
}