:root {
      --bg-color: #f0f0f0;
      --text-color: #000;
      --cell-bg: #fff;
      --cell-border: #000;
    }

    [data-theme="dark"] {
      --bg-color: #1a1a1a;
      --text-color: #fff;
      --cell-bg: #2d2d2d;
      --cell-border: #444;
    }

    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
    }

    .header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
    }

    #theme-toggle {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 5px;
    }

    #board {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(3, 100px);
      gap: 5px;
    }

    .cell {
      width: 100px;
      height: 100px;
      background-color: var(--cell-bg);
      border: 2px solid var(--cell-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      cursor: pointer;
      transition: background-color 0.3s, border-color 0.3s;
    }

    #reset {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 1rem;
      cursor: pointer;
      background-color: var(--cell-bg);
      color: var(--text-color);
      border: 2px solid var(--cell-border);
      transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    }