html {
          overflow-y: scroll;
        }

        body {
          font-family: "IBM Plex Mono", Arial, sans-serif;
          margin: 0;
          padding: 20px;
          background-color: #f4f4f4;
          color: #333;
        }

        h1,
        h2,
        h3 {
          color: #2c3e50;
          border-bottom: 2px solid #3498db;
          padding-bottom: 5px;
        }

        h1 {
          text-align: center;
        }

        .container {
          max-width: 900px;
          margin: auto;
          background-color: #fff;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
        }

        .accordion {
          background-color: #eee;
          color: #444;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          text-align: left;
          border: none;
          outline: none;
          transition: 0.4s;
          border-radius: 5px;
          font-size: 1.2em;
          font-weight: bold;
          margin-top: 10px;
        }

        .accordion:hover {
          background-color: #ccc;
        }

        .panel {
          padding: 0 18px;
          background-color: white;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
        }

        .panel-content {
          padding: 20px 0;
        }

        .exercise {
          border: 1px solid #ddd;
          padding: 15px;
          margin-bottom: 20px;
          border-radius: 5px;
          background-color: #f9f9f9;
        }

        .exercise h4 {
          margin-top: 0;
          color: #34495e;
        }

        .form-group {
          margin-bottom: 15px;
        }

        .form-group label {
          display: block;
          margin-bottom: 5px;
          font-weight: bold;
        }

        .form-group input {
          width: 95%;
          padding: 8px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }

        .btn {
          background-color: #3498db;
          color: white;
          padding: 10px 15px;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 1em;
          display: block;
          width: 100%;
          box-sizing: border-box;
        }

        .btn:hover {
          background-color: #2980b9;
        }

        .result {
          margin-top: 20px;
          padding: 10px;
          background-color: #ecf0f1;
          border: 1px solid #bdc3c7;
          border-radius: 4px;
          font-weight: bold;
          font-size: 1rem;
          height: max-content;
        }