@media (orientation: landscape) {
    #elements-grid {
      grid-template-columns: repeat(var(--size), 1fr);
      width: 90%;
      height: auto;
      gap: 10px;
    }
    @keyframes arc {
      50% {
        transform: translateY(
          calc(var(--vtbag-vector-to-x) / 3 - var(--vtbag-vector-from-x) / 3)
        );
      }
    }
  }
  /* And some tweaks for horizontal mode */
  @keyframes arc {
    50% {
      transform: translateX(
        calc(var(--vtbag-vector-to-y) / 3 - var(--vtbag-vector-from-y) / 3)
      );
    }
  }
  :root.vtbag-vtt-with-vectors::view-transition-image-pair(.el) {
    animation-name: arc;
    animation-timing-function: ease-in-out;
  }
  ::view-transition-group(*) {
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
  }
  /* This is it */
  .square {
    border-radius: 5px;
  }
  .circle {
    border-radius: 50%;
  }
  .element:hover {
    transform: scale(1.1);
  }
  .element {
    width: calc(66vmax / var(--size) - 10px);
    height: calc(66vmax / var(--size) - 10px);
    view-transition-class: el;
    transition: all 0.5s ease-in-out;
  }
  #elements-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    height: 90%;
    gap: 10px;
  }
  .container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  kbd {
    font-family: inherit;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    border: 1px solid light-dark(#999, #666);
    border-radius: 4px;
    background: light-dark(#f7f7f7, #333);
    box-shadow: inset 0 -2px 0 light-dark(#d1d1d1, #111);
    color: light-dark(#333, #f7f7f7);
    font-weight: 600;
    cursor: pointer;
  }
  h2 {
    font-size: 2vmin;
  }
  h1,
  h2 {
    font-size: 4vmin;
    padding: 2em;
    position: absolute;
  }
  body {
    height: 100vh;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
    color-scheme: light dark;
    view-transition-name: none;
  }
  @media (orientation: landscape) {
    main {
      width: calc(100vw - 2ex);
      max-width: 666px;
      padding-left: 2ex;
    }
    section {
      bottom: calc(100vh - 3em);
      left: calc(100vw - 14ex);
      right: 2ex;
    }
  }
  section {
    position: fixed;
    bottom: 2em;
    left: 2em;
    transition: all 0.25s ease-in-out;
  }
  main {
    position: fixed;
    bottom: 2ex;
    right: 2ex;
    width: 35vw;
    transition: all 0.25s ease-in-out;
  }
  img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    position: fixed;
    top: 2ex;
    left: 2ex;
    z-index: 1;
    transition: all 0.25s ease-in-out;
    transform: translateX(0);
  }
  .hidden {
    opacity: 0;
    transform: translateX(-50px);
  }
  p {
    margin-bottom: 1ex;
  }
  p {
    margin-bottom: 1ex;
  }
  .hidden {
    opacity: 0;
    transform: translateX(-50px);
  }
  img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    position: fixed;
    top: 2ex;
    left: 2ex;
    z-index: 1;
    transition: all 0.25s ease-in-out;
    transform: translateX(0);
  }
  main {
    position: fixed;
    bottom: 2ex;
    right: 2ex;
    width: 35vw;
    transition: all 0.25s ease-in-out;
  }
  section {
    position: fixed;
    bottom: 2em;
    left: 2em;
    transition: all 0.25s ease-in-out;
  }
  @media (orientation: landscape) {
    main {
      width: calc(100vw - 2ex);
      max-width: 666px;
      padding-left: 2ex;
    }
    section {
      bottom: calc(100vh - 3em);
      left: calc(100vw - 14ex);
      right: 2ex;
    }
  }
  :root {
    color-scheme: light dark;
    view-transition-name: none;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    height: 100vh;
  }
  h1,
  h2 {
    font-size: 4vmin;
    padding: 2em;
    position: absolute;
  }
  h2 {
    font-size: 2vmin;
  }
  kbd {
    font-family: inherit;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    border: 1px solid light-dark(#999, #666);
    border-radius: 4px;
    background: light-dark(#f7f7f7, #333);
    box-shadow: inset 0 -2px 0 light-dark(#d1d1d1, #111);
    color: light-dark(#333, #f7f7f7);
    font-weight: 600;
    cursor: pointer;
  }
  .container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  #elements-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    height: 90%;
    gap: 10px;
  }
  .element {
    width: calc(66vmax / var(--size) - 10px);
    height: calc(66vmax / var(--size) - 10px);
    view-transition-class: el;
    transition: all 0.5s ease-in-out;
  }
  .element:hover {
    transform: scale(1.1);
  }
  .circle {
    border-radius: 50%;
  }
  .square {
    border-radius: 5px;
  }
  /* This is it */
  ::view-transition-group(*) {
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
  }
  :active-view-transition-type(with-vectors)::view-transition-image-pair(.el) {
    animation-name: arc;
    animation-timing-function: ease-in-out;
  }
  @keyframes arc {
    50% {
      transform: translateX(
        calc(var(--vtbag-vector-to-y) / 3 - var(--vtbag-vector-from-y) / 3)
      );
    }
  }
  /* And some tweaks for horizontal mode */
  @media (orientation: landscape) {
    #elements-grid {
      grid-template-columns: repeat(var(--size), 1fr);
      width: 90%;
      height: auto;
      gap: 10px;
    }
    @keyframes arc {
      50% {
        transform: translateY(
          calc(var(--vtbag-vector-to-x) / 3 - var(--vtbag-vector-from-x) / 3)
        );
      }
    }
  }
  @media (orientation: landscape) {
    #elements-grid {
      grid-template-columns: repeat(var(--size), 1fr);
      width: 90%;
      height: auto;
      gap: 10px;
    }
    @keyframes arc {
      50% {
        transform: translateY(
          calc(var(--vtbag-vector-to-x) / 3 - var(--vtbag-vector-from-x) / 3)
        );
      }
    }
  }
  /* And some tweaks for horizontal mode */
  @keyframes arc {
    50% {
      transform: translateX(
        calc(var(--vtbag-vector-to-y) / 3 - var(--vtbag-vector-from-y) / 3)
      );
    }
  }
  :root.vtbag-vtt-with-vectors::view-transition-image-pair(.el) {
    animation-name: arc;
    animation-timing-function: ease-in-out;
  }
  ::view-transition-group(*) {
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
  }
  /* This is it */
  .square {
    border-radius: 5px;
  }
  .circle {
    border-radius: 50%;
  }
  .element:hover {
    transform: scale(1.1);
  }
  .element {
    width: calc(66vmax / var(--size) - 10px);
    height: calc(66vmax / var(--size) - 10px);
    view-transition-class: el;
    transition: all 0.5s ease-in-out;
  }
  #elements-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    height: 90%;
    gap: 10px;
  }
  .container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  kbd {
    font-family: inherit;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    border: 1px solid light-dark(#999, #666);
    border-radius: 4px;
    background: light-dark(#f7f7f7, #333);
    box-shadow: inset 0 -2px 0 light-dark(#d1d1d1, #111);
    color: light-dark(#333, #f7f7f7);
    font-weight: 600;
    cursor: pointer;
  }
  h2 {
    font-size: 2vmin;
  }
  h1,
  h2 {
    font-size: 4vmin;
    padding: 2em;
    position: absolute;
  }
  body {
    height: 100vh;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
    color-scheme: light dark;
    view-transition-name: none;
  }
  @media (orientation: landscape) {
    main {
      width: calc(100vw - 2ex);
      max-width: 666px;
      padding-left: 2ex;
    }
    section {
      bottom: calc(100vh - 3em);
      left: calc(100vw - 14ex);
      right: 2ex;
    }
  }
  section {
    position: fixed;
    bottom: 2em;
    left: 2em;
    transition: all 0.25s ease-in-out;
  }
  main {
    position: fixed;
    bottom: 2ex;
    right: 2ex;
    width: 35vw;
    transition: all 0.25s ease-in-out;
  }
  img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    position: fixed;
    top: 2ex;
    left: 2ex;
    z-index: 1;
    transition: all 0.25s ease-in-out;
    transform: translateX(0);
  }
  .hidden {
    opacity: 0;
    transform: translateX(-50px);
  }
  p {
    margin-bottom: 1ex;
  }
  p {
    margin-bottom: 1ex;
  }
  .hidden {
    opacity: 0;
    transform: translateX(-50px);
  }
  img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    position: fixed;
    top: 2ex;
    left: 2ex;
    z-index: 1;
    transition: all 0.25s ease-in-out;
    transform: translateX(0);
  }
  main {
    position: fixed;
    bottom: 2ex;
    right: 2ex;
    width: 35vw;
    transition: all 0.25s ease-in-out;
  }

  section {
    position: fixed;
    bottom: 2em;
    left: 2em;
    transition: all 0.25s ease-in-out;
  }
  @media (orientation: landscape) {
    main {
      width: calc(100vw - 2ex);
      max-width: 666px;
      padding-left: 2ex;
    }
    section {
      bottom: calc(100vh - 3em);
      left: calc(100vw - 14ex);
      right: 2ex;
    }
  }

  :root {
    color-scheme: light dark;
    view-transition-name: none;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    height: 100vh;
  }

  h1,
  h2 {
    font-size: 4vmin;
    padding: 2em;
    position: absolute;
  }
  h2 {
    font-size: 2vmin;
  }
  kbd {
    font-family: inherit;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    border: 1px solid light-dark(#999, #666);
    border-radius: 4px;
    background: light-dark(#f7f7f7, #333);
    box-shadow: inset 0 -2px 0 light-dark(#d1d1d1, #111);
    color: light-dark(#333, #f7f7f7);
    font-weight: 600;
    cursor: pointer;
  }
  .container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  #elements-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    height: 90%;
    gap: 10px;
  }
  .element {
    width: calc(66vmax / var(--size) - 10px);
    height: calc(66vmax / var(--size) - 10px);
    view-transition-class: el;
    transition: all 0.5s ease-in-out;
  }

  .element:hover {
    transform: scale(1.1);
  }
  .circle {
    border-radius: 50%;
  }

  .square {
    border-radius: 5px;
  }

  /* This is it */
  ::view-transition-group(*) {
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
  }

  :root.vtbag-vtt-with-vectors::view-transition-image-pair(.el) {
    animation-name: arc;
    animation-timing-function: ease-in-out;
  }
  @keyframes arc {
    50% {
      transform: translateX(
        calc(var(--vtbag-vector-to-y) / 3 - var(--vtbag-vector-from-y) / 3)
      );
    }
  }

  /* And some tweaks for horizontal mode */

  @media (orientation: landscape) {
    #elements-grid {
      grid-template-columns: repeat(var(--size), 1fr);
      width: 90%;
      height: auto;
      gap: 10px;
    }
    @keyframes arc {
      50% {
        transform: translateY(
          calc(var(--vtbag-vector-to-x) / 3 - var(--vtbag-vector-from-x) / 3)
        );
      }
    }
  }