body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: #e3f2fd;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #0d47a1;
    }
    .sudoku-board {
      display: grid;
      grid-template-columns: repeat(9, 50px);
      grid-template-rows: repeat(9, 50px);
      gap: 1px;
      border: 4px solid #0d47a1;
      background-color: #ffffff;
      margin-bottom: 20px;
      box-shadow: 0 0 15px rgba(33, 7, 7,0.9);
    }
    .cell {
      width: 50px;
      height: 50px;
      text-align: center;
      font-size: 20px;
      border: 3px solid #90caf9;
      outline: none;
      background-color: #f1f8e9;
      font-weight: bold;

    }
    .cell:focus {
      background-color: #c8e6c9;
    }
    .cell.readonly {
      background-color: #bbdefb;
      pointer-events: none;
    }
    .cell:nth-child(3n) {
      border-right: 2px solid #0d47a1;
    }
    .cell:nth-child(n+19):nth-child(-n+27),
    .cell:nth-child(n+46):nth-child(-n+54) {
      border-bottom: 2px solid #0d47a1;
    }
    .controls button {
      padding: 10px 20px;
      margin: 5px;
      border: none;
      background-color: #1976d2;
      color: white;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }
    .controls button:hover {
      background-color: #1565c0;
    }