body {
          font-family: 'Segoe UI', sans-serif;
          background: #eef5f9;
          text-align: center;
          margin: 0;
          padding: 0;

        }

        h1 {
          background: #0074D9;
          text-align: center;
          color: white;
          padding: 1rem;
          margin: 0;

        }

        .setup,
        .objects,
        .inputs,
        #next-step {
          text-align: center;
          margin: 20px 0;
        }

        button {
          padding: 10px 15px;
          margin: 5px;
          font-size: 1em;
        }

        #simulation-area {
          display: flex;
          justify-content: center;
          gap: 50px;
          margin-top: 5px;
          font-size: 1.2em;
        }

        .balance-box {
          width: 120px;
          height: 50px;
          background-color: #222;
          color: #0f0;
          font-family: 'Courier New', monospace;
          font-size: 1.5em;
          text-align: center;
          line-height: 50px;
          margin: 20px auto;
          border-radius: 10px;
          box-shadow: inset 0 0 8px #000;
          border: 2px solid #444;
        }

        .plateau {
          width: 100px;
          height: 2px;
          margin: 10px auto;
          background: #666;
          border-radius: 5px;
          position: relative;
          top: 20px
        }

        #objet-emoji {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: -1.2em;
          font-size: 2em;
        }


        #dynamometer-emoji {
          position: absolute;
          left: -2px;
          font-size: 2em;
          transition: top 0.5s;
          z-index: 1;
        }

        #spring-visual {
          width: 20px;
          margin: auto;
          background: #aaa;
          transition: height 0.5s;
          z-index: 1;
        }

        #spring-visual {
          position: absolute;
          top: 0;
          left: 19px;
          width: 10px;
          background: #888;
          transition: height 0.5s;
        }

        .dynamo-container {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          position: relative;
          height: 300px;
          width: 60px;
          margin: 0 auto;
        }

        #graduation {
          position: relative;
          width: 40px;
          height: 250px;
          background: linear-gradient(to bottom, transparent 90%, #ddd 90%);
          border-right: 2px solid #333;
          border-top: 2px solid #333;
        }

        #graduation {
          position: absolute;
          left: 0;
          top: 0;
          width: 40px;
          height: 230px;
          border-left: 2px solid #333;
        }

        #graduation span {
          position: absolute;
          left: 0;
          font-size: 0.8em;
          transform: translateY(50%);
        }

        #tige {
          position: absolute;
          width: 2px;
          background-color: #000;
          left: 22px;

          top: 0;
          transition: top 0.5s;
          z-index: 0;
        }

        .inputs {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          margin: 20px 0;
        }

        .input-line {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .input-line span {
          font-size: 1em;
          min-width: 80px;
        }

        .input-line input {
          width: 70px;
          padding: 4px;
          font-size: 1em;
        }

        #next-step {
          text-align: center;
          margin: 20px auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
        }

        .boite {
          margin-top: 10px auto;
          font-weight: bold;
          margin: 10px auto;
          padding: 1rem;
          max-width: 600px;
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .graphique-zone {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 30px auto;
          width: fit-content;
        }

        #graph-message {
          text-align: center;
          margin-bottom: 8px;
          font-size: 1.1em;
        }