:root {
      --primary: #000;
      --accent: #ffcc00; /* жёлтый акцент */
      --red: #d22b2b;
      --light-bg: #f9f9f9;
      --border: #ddd;
    }
.header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .main-title {
      font-size: 2.2rem;
      font-weight: 800;
      letter-spacing: -0.5px;
      margin: 0 0 0.5rem;
      color: #0f172a;
    }

    .intro-text {
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 2rem;
      color: #334155;
    }

    .exercise-card {
      background: #f8fafc;
      border-radius: 16px;
      padding: 1.4rem;
      margin-bottom: 1.6rem;
      border-left: 3px solid #3b82f6;
      transition: transform 0.2s;
    }

    .exercise-card:hover {
      transform: translateX(4px);
    }

    .exercise-number {
      display: inline-block;
      width: 28px;
      height: 28px;
      background: #3b82f6;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 28px;
      font-weight: bold;
      margin-right: 0.6rem;
      vertical-align: middle;
    }

    .exercise-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 0.8rem;
      display: inline-block;
    }

    .exercise-desc {
      font-size: 0.98rem;
      color: #475569;
      margin: 0;
      line-height: 1.6;
    }

    .instructions-box {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 12px;
      padding: 1.4rem;
      margin: 2rem 0;
    }

    .instructions-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: #0c4a6e;
      margin: 0 0 1rem;
    }

    .instructions-list {
      margin: 0;
      padding-left: 1.4rem;
    }

    .instructions-list li {
      margin-bottom: 0.6rem;
      font-size: 0.98rem;
      color: #334155;
    }

    @media (max-width: 600px) {
     
      .main-title {
        font-size: 1.8rem;
      }

      .intro-text {
        font-size: 1rem;
      }

      .exercise-title {
        font-size: 1.15rem;
      }

      .exercise-desc,
      .instructions-list li {
        font-size: 0.93rem;
      }
    }
.why-box {
      background: #f0f9ff;
      border-left: 4px solid #3b82f6;
      padding: 1.4rem;
      border-radius: 0 12px 12px 0;
      margin-bottom: 2rem;
    }

    .why-title {
      font-size: 1.35rem;
      font-weight: 700;
      color: #0c4a6e;
      margin: 0 0 0.8rem;
    }

    .why-text {
      font-size: 1rem;
      color: #334155;
      margin: 0;
      line-height: 1.65;
    }

    .instructions-header {
      font-size: 1.5rem;
      font-weight: 800;
      color: #0f172a;
      margin: 0 0 1rem;
      letter-spacing: -0.3px;
    }

    .instructions-subheader {
      font-size: 1.15rem;
      font-weight: 700;
      color: #334155;
      margin: 0 0 1.2rem;
    }

    .instructions-text {
      font-size: 0.98rem;
      color: #475569;
      margin: 0 0 1.5rem;
      line-height: 1.6;
    }

    .routine-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.5rem 0;
      font-size: 1rem;
    }

    .routine-table th,
    .routine-table td {
      padding: 0.8rem 0.6rem;
      text-align: left;
      border: 1px solid #e2e8f0;
    }

    .routine-table th {
      background-color: #dbeafe;
      font-weight: 700;
      color: #1e40af;
    }

    .routine-table tr:nth-child(even) {
      background-color: #f8fafc;
    }

    @media (max-width: 600px) {
      body {
        padding: 1rem;
      }

      .why-title,
      .instructions-header {
        font-size: 1.25rem;
      }

      .instructions-subheader {
        font-size: 1.1rem;
      }

      .routine-table {
        font-size: 0.9rem;
      }

      .routine-table th,
      .routine-table td {
        padding: 0.6rem 0.4rem;
      }
    }
.how-to-box {
      background: #f0fdf4;
      border-left: 4px solid #10b981;
      padding: 1.4rem;
      border-radius: 0 12px 12px 0;
      margin-bottom: 2rem;
    }

    .how-to-title {
      font-size: 1.35rem;
      font-weight: 700;
      color: #065f46;
      margin: 0 0 1rem;
    }

    .steps-list {
      margin: 0;
      padding-left: 1.4rem;
    }

    .steps-list li {
      margin-bottom: 0.7rem;
      font-size: 1rem;
      color: #334155;
    }

    .time-note {
      background: #fffbeb;
      border-left: 4px solid #f59e0b;
      padding: 1rem;
      border-radius: 0 10px 10px 0;
      font-size: 0.95rem;
      color: #92400e;
      margin: 1.5rem 0;
      font-style: italic;
    }

    .quote-box {
      background: #f8fafc;
      border: 1px solid #dbeafe;
      border-radius: 12px;
      padding: 1.4rem;
      margin: 2rem 0;
      position: relative;
    }

    .quote-box::before {
      content: """;
      position: absolute;
      top: -20px;
      left: 10px;
      font-size: 4rem;
      color: #cbd5e1;
      font-family: serif;
      line-height: 1;
    }

    .quote-text {
      font-size: 1.05rem;
      color: #334155;
      margin: 0 0 1rem;
      line-height: 1.7;
    }

    .quote-author {
      font-weight: 700;
      color: #1e40af;
      font-size: 0.95rem;
    }

    .benefit-highlight {
      background: #eff6ff;
      padding: 1.2rem;
      border-radius: 12px;
      margin: 1.5rem 0;
      font-size: 0.98rem;
      color: #334155;
      border-left: 3px solid #3b82f6;
    }

    @media (max-width: 600px) {
      body {
        padding: 1rem;
      }

      .main-title {
        font-size: 1.8rem;
      }

      .how-to-title,
      .quote-text {
        font-size: 1rem;
      }

      .steps-list li {
        font-size: 0.95rem;
      }
    }
  .intro-text {
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 2rem;
      color: #334155;
      text-align: justify;
    }

    .key-point {
      background: #fff1f2;
      border-left: 4px solid #ef4444;
      padding: 1.3rem;
      border-radius: 0 12px 12px 0;
      margin: 1.8rem 0;
    }

    .key-point h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #b91c1c;
      margin: 0 0 0.8rem;
    }

    .methods-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.4rem;
      margin: 2rem 0;
    }

    .method-card {
      background: #f8fafc;
      border: 1px solid #dbeafe;
      border-radius: 14px;
      padding: 1.4rem;
    }

    .method-card h4 {
      font-size: 1.15rem;
      font-weight: 700;
      color: #1e40af;
      margin: 0 0 1rem;
    }

    .method-card ul {
      margin: 0;
      padding-left: 1.4rem;
    }

    .method-card li {
      margin-bottom: 0.6rem;
      color: #475569;
    }

    .workout-table {
      width: 100%;
      border-collapse: collapse;
      margin: 2rem 0;
      font-size: 1rem;
    }

    .workout-table th,
    .workout-table td {
      padding: 0.8rem 0.6rem;
      text-align: left;
      border: 1px solid #e2e8f0;
    }

    .workout-table th {
      background-color: #fee2e2;
      font-weight: 700;
      color: #b91c1c;
    }

    .workout-table tr:nth-child(even) {
      background-color: #fef2f2;
    }

    .note-box {
      background: #fffbeb;
      border-left: 4px solid #f59e0b;
      padding: 1rem;
      border-radius: 0 10px 10px 0;
      font-size: 0.95rem;
      color: #92400e;
      margin: 1.5rem 0;
      font-style: italic;
    }

    @media (max-width: 600px) {
      body {
        padding: 1rem;
      }

      .main-title {
        font-size: 1.9rem;
      }

      .intro-text,
      .key-point,
      .method-card {
        font-size: 0.98rem;
      }

      .workout-table {
        font-size: 0.9rem;
      }

      .workout-table th,
      .workout-table td {
        padding: 0.6rem 0.4rem;
      }
    }
.step-card {
      display: flex;
      gap: 1.2rem;
      background: #f8fafc;
      border-radius: 16px;
      padding: 1.4rem;
      margin-bottom: 1.6rem;
      border-left: 3px solid #8b5cf6;
    }

    .step-number {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      background: #8b5cf6;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.1rem;
      margin-top: 0.3rem;
    }

    .step-content h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #4c1d95;
      margin: 0 0 0.7rem;
    }

    .step-content p {
      font-size: 0.98rem;
      color: #475569;
      margin: 0;
      line-height: 1.6;
    }

    .quote {
      font-style: italic;
      color: #581c87;
      margin-top: 0.6rem;
      padding-left: 1rem;
      border-left: 2px solid #ddd6fe;
    }

    .calorie-note {
      background: #f0f9ff;
      border-left: 4px solid #3b82f6;
      padding: 1rem;
      border-radius: 0 10px 10px 0;
      font-size: 0.95rem;
      color: #1e40af;
      margin: 1.5rem 0;
    }
.instructions-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.4rem;
      margin: 2rem 0;
    }

    .instruction-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 1.4rem;
    }

    .instruction-card h3 {
      font-size: 1.2rem;
      font-weight: 700;
      color: #be123c;
      margin: 0 0 1rem;
    }
.page-layout {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .left-column,
    .right-column {
      flex: 1;
    }

    
.warning {
      font-size: 0.95rem;
      color: var(--red);
      margin: 0.5rem 0 1rem;
      font-weight: 600;
    }
.alert-box {
      background: var(--accent);
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1.5rem;
      position: relative;
    }

    .alert-title {
      font-size: 1.1rem;
      font-weight: bold;
      color: var(--primary);
      margin: 0 0 0.5rem;
      text-transform: uppercase;
    }
.section-header {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--primary);
      margin: 1.5rem 0 1rem;
      display: flex;
      align-items: center;
    }

    .section-header::before {
      content: "■";
      color: var(--accent);
      margin-right: 0.5rem;
      font-weight: bold;
    }