@keyframes glow {
      0% {
        box-shadow: 0 0 2px darkgreen;
        border-color: drakgreen;
      }

      50% {
        box-shadow: 0 0 8px lightgreen;
        border-color: black;
      }

      100% {
        box-shadow: 0 0 2px green;
        border-color: darkgreen;
      }
    }

    :root.vtbag-vtt-0 hr {
      border-color: var(--cell-color);
    }

    #hr2 {
      view-transition-name: hr2;
    }

    hr {
      width: calc(var(--cell-size) * 34 );
      position: absolute;
      border: 5px solid var(--input-border);
      margin-left: calc(-1.5 * var(--cell-size));
      border-radius: 5px;
      box-shadow: 0 0 5px green;
      padding: 0;
      animation: glow alternate .1s ease-in-out infinite;
      animation-duration: 6s;
      animation-timing-function: linear;
      view-transition-name: hr;
    }

    a {
      color: white;
    }

    .cell.alive {
      background-color: var(--cell-color);
      box-shadow: 0 0 15px rgba(0, 255, 157, 0.5);
      transform: scale(1.1);
      z-index: 1;
    }

    .cell:hover {
      background-color: rgba(0, 255, 157, 0.2);
    }

    .cell {
      width: var(--cell-size);
      height: var(--cell-size);
      background-color: rgba(255, 255, 255, 0.03);
      border-radius: 50%;
    }

    #grid {
      display: grid;
      width: fit-content;
      view-transition-name: grid;
      background-color: var(--grid-color);
      border-radius: 0.75rem;
      border: var(--cell-size) solid gray;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    #demo,
    #text {
      flex: 1;
    }

    #container2 {
      position: relative;
      width: fit-content;
    }

    button:active {
      transform: translateY(0);
    }

    button:hover {
      background-color: var(--button-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 255, 157, 0.25);
    }

    input {
      padding: 0.5rem 1rem;
      background-color: var(--button-color);
      color: var(--bg-color);
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    button {
      padding: 0.5rem 1rem;
      background-color: var(--button-color);
      color: var(--bg-color);
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    #controls {
      user-select: none;
      max-width: calc(35 * var(--cell-size));
      margin-inline: auto;
      padding: 1rem;
      background: rgba(15, 23, 42, 0.3);
      border-radius: 0.75rem;
      margin-bottom: calc(2 * var(--cell-size));
      width: fit-content;
    }

    #container2 {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: relative;
      margin-inline: auto;
    }

    @media (orientation: landscape) {
      #container {
        flex-direction: row;
        min-height: 100vh;
      }
    }

    #container {
      display: flex;
      --cell-size: calc(100cqmin / 50);
      flex-direction: column;
      gap: 2rem;
      padding: 2rem;
      padding-bottom: 4rem;
      background: rgba(30, 41, 59, 0.4);
      backdrop-filter: blur(12px);
      border-radius: 1rem;
      box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    #text {
      user-select: none;
    }

    #container2.hidden {
      display: none;
    }

    body {
      margin: 0;
      min-height: 100vh;
      justify-content: center;
      align-items: center;
      background-color: var(--bg-color);
      background-image:
        radial-gradient(circle at 15% 50%, rgba(0, 255, 157, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(0, 255, 157, 0.08) 0%, transparent 25%);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--text-color);
    }

    @keyframes grid-up {

      0%,
      10% {
        clip-path: inset(99.999% 0 0 0);
      }

      95%,
      100% {
        clip-path: inset(0);
      }
    }

    @keyframes grid-down {

      0%,
      5% {
        clip-path: inset(0 0 99.999% 0);
      }

      95%,
      100% {
        clip-path: inset(0);
      }
    }

    ::view-transition-old(hr),
    ::view-transition-new(hr),
    ::view-transition-new(hr2),
    ::view-transition-old(hr2) {
      animation-name: none;
    }

    ::view-transition-group(hr),
    ::view-transition-group(hr2) {
      animation-timing-function: linear;
    }

    :root.up::view-transition-new(grid) {
      animation-name: grid-up;
    }

    ::view-transition-new(grid) {
      animation-timing-function: linear;
      animation-name: grid-down;
    }

    ::view-transition-old(grid) {
      animation-name: none;
    }

    ::view-transition-group(*) {
      animation-duration: .75s;

    }

    :root.vtbag-vtt-0 {
      #controls :not(#gen) {
        pointer-events: none;
        opacity: 0.5;
        filter: grayscale(50%)
      }
    }

    ::view-transition {
      pointer-events: none;
    }

    :root {
      --grid-color: #1a1a1a;
      --cell-color: #00ff9d;
      --bg-color: #0f172a;
      --text-color: #e2e8f0;
      --button-color: #00ff9d;
      --button-hover: #00cc7d;
      --input-bg: #1e293b;
      --input-border: #334155;
      view-transition-name: none;
    }

    :root {
      --grid-color: #1a1a1a;
      --cell-color: #00ff9d;
      --bg-color: #0f172a;
      --text-color: #e2e8f0;
      --button-color: #00ff9d;
      --button-hover: #00cc7d;
      --input-bg: #1e293b;
      --input-border: #334155;
      view-transition-name: none;
    }

    ::view-transition {
      pointer-events: none;
    }

    :root.vtbag-vtt-0 {
      #controls :not(#gen) {
        pointer-events: none;
        opacity: 0.5;
        filter: grayscale(50%)
      }
    }


    ::view-transition-group(*) {
      animation-duration: .75s;

    }

    ::view-transition-old(grid) {
      animation-name: none;
    }

    ::view-transition-new(grid) {
      animation-timing-function: linear;
      animation-name: grid-down;
    }

    :root.up::view-transition-new(grid) {
      animation-name: grid-up;
    }

    ::view-transition-group(hr),
    ::view-transition-group(hr2) {
      animation-timing-function: linear;
    }

    ::view-transition-old(hr),
    ::view-transition-new(hr),
    ::view-transition-new(hr2),
    ::view-transition-old(hr2) {
      animation-name: none;
    }

    @keyframes grid-down {

      0%,
      5% {
        clip-path: inset(0 0 99.999% 0);
      }

      95%,
      100% {
        clip-path: inset(0);
      }
    }

    @keyframes grid-up {

      0%,
      10% {
        clip-path: inset(99.999% 0 0 0);
      }

      95%,
      100% {
        clip-path: inset(0);
      }
    }

    body {
      margin: 0;
      min-height: 100vh;
      justify-content: center;
      align-items: center;
      background-color: var(--bg-color);
      background-image:
        radial-gradient(circle at 15% 50%, rgba(0, 255, 157, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(0, 255, 157, 0.08) 0%, transparent 25%);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--text-color);
    }

    #container2.hidden {
      display: none;
    }
    #text {
      user-select: none;
    }
    #container {
      display: flex;
      --cell-size: calc(100cqmin / 50);
      flex-direction: column;
      gap: 2rem;
      padding: 2rem;
      padding-bottom: 4rem;
      background: rgba(30, 41, 59, 0.4);
      backdrop-filter: blur(12px);
      border-radius: 1rem;
      box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    @media (orientation: landscape) {
      #container {
        flex-direction: row;
        min-height: 100vh;
      }
    }



    #container2 {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: relative;
      margin-inline: auto;
    }

    #controls {
      user-select: none;
      max-width: calc(35 * var(--cell-size));
      margin-inline: auto;
      padding: 1rem;
      background: rgba(15, 23, 42, 0.3);
      border-radius: 0.75rem;
      margin-bottom: calc(2 * var(--cell-size));
      width: fit-content;
    }

    button {
      padding: 0.5rem 1rem;
      background-color: var(--button-color);
      color: var(--bg-color);
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    input {
      padding: 0.5rem 1rem;
      background-color: var(--button-color);
      color: var(--bg-color);
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    button:hover {
      background-color: var(--button-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 255, 157, 0.25);
    }

    button:active {
      transform: translateY(0);
    }

    #container2 {
      position: relative;
      width: fit-content;
    }

    #demo,
    #text {
      flex: 1;
    }

    #grid {
      display: grid;
      width: fit-content;
      view-transition-name: grid;
      background-color: var(--grid-color);
      border-radius: 0.75rem;
      border: var(--cell-size) solid gray;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .cell {
      width: var(--cell-size);
      height: var(--cell-size);
      background-color: rgba(255, 255, 255, 0.03);
      border-radius: 50%;
    }

    .cell:hover {
      background-color: rgba(0, 255, 157, 0.2);
    }

    .cell.alive {
      background-color: var(--cell-color);
      box-shadow: 0 0 15px rgba(0, 255, 157, 0.5);
      transform: scale(1.1);
      z-index: 1;
    }



    a {
      color: white;
    }
    hr {
      width: calc(var(--cell-size) * 34 );
      position: absolute;
      border: 5px solid var(--input-border);
      margin-left: calc(-1.5 * var(--cell-size));
      border-radius: 5px;
      box-shadow: 0 0 5px green;
      padding: 0;
      animation: glow alternate .1s ease-in-out infinite;
      animation-duration: 6s;
      animation-timing-function: linear;
      view-transition-name: hr;
    }

    #hr2 {
      view-transition-name: hr2;
    }


    :root.vtbag-vtt-0 hr {
      border-color: var(--cell-color);
    }

    @keyframes glow {
      0% {
        box-shadow: 0 0 2px darkgreen;
        border-color: drakgreen;
      }

      50% {
        box-shadow: 0 0 8px lightgreen;
        border-color: black;
      }

      100% {
        box-shadow: 0 0 2px green;
        border-color: darkgreen;
      }
    }