hr {
        border-color: #8888;
      }
      #back {
        display: inline-block;
        color: black;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem;
        background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
        box-shadow: 0 4px 6px #8888;
      }
      @media (orientation: portrait) {
        main img {
          width: 100%;
          height: auto;
          margin-top: 10vh;
        }
      }
      main img {
        height: 66vh;
        width: auto;
        view-transition-name: img;
      }
      main {
        width: fit-content;
        margin: 0 auto;
      }
      [data-theme="dark"] a.selected {
        background: radial-gradient(
          circle at center,
          #fff8 50%,
          #0008 55%,
          #fff8 60%,
          #0000 66%
        );
      }
      a.selected {
        background: radial-gradient(
          circle at center,
          #0008 50%,
          #fff8 55%,
          #0008 60%,
          #0000 66%
        );
      }
      header img {
        mask-image: radial-gradient(
          ellipse at center,
          white 35%,
          transparent 71%
        );
      }
      body {
        font-family: sans-serif;
      }
      ::view-transition-group(img) {
        overflow: clip;
      }
      :root.vtbag-vtt-same {
        &::view-transition-old(img),
        &::view-transition-new(img) {
          animation: stepBackUp both 0.5s;
        }
      }
      :root.vtbag-vtt-backward {
        &::view-transition-old(img) {
          animation: slideToRight both 0.5s;
        }
        &::view-transition-new(img) {
          animation: slideFromLeft both 0.5s;
        }
      }
      ::view-transition-new(img) {
        animation: slideFromRight both 0.5s;
      }
      ::view-transition-old(img) {
        animation: slideToLeft both 0.5s;
      }
      @keyframes stepBackUp {
        50% {
          transform: scale(0.8);
        }
      }
      @keyframes slideToLeft {
        to {
          transform: translateX(-100vw);
        }
      }
      @keyframes slideToRight {
        to {
          transform: translateX(100vw);
        }
      }
      @keyframes slideFromLeft {
        from {
          transform: translateX(-100vw);
        }
      }
      @keyframes slideFromRight {
        from {
          transform: translateX(100vw);
        }
      }
      @media (prefers-reduced-motion: no-preference) {
        @view-transition {
          navigation: auto;
        }
      }
      @media (prefers-reduced-motion: no-preference) {
        @view-transition {
          navigation: auto;
        }
      }
      @keyframes slideFromRight {
        from {
          transform: translateX(100vw);
        }
      }
      @keyframes slideFromLeft {
        from {
          transform: translateX(-100vw);
        }
      }
      @keyframes slideToRight {
        to {
          transform: translateX(100vw);
        }
      }
      @keyframes slideToLeft {
        to {
          transform: translateX(-100vw);
        }
      }
      @keyframes stepBackUp {
        50% {
          transform: scale(0.8);
        }
      }
      ::view-transition-old(img) {
        animation: slideToLeft both 0.5s;
      }
      ::view-transition-new(img) {
        animation: slideFromRight both 0.5s;
      }
      :active-view-transition-type(backward) {
        &::view-transition-old(img) {
          animation: slideToRight both 0.5s;
        }
        &::view-transition-new(img) {
          animation: slideFromLeft both 0.5s;
        }
      }
      :active-view-transition-type(same) {
        &::view-transition-old(img),
        &::view-transition-new(img) {
          animation: stepBackUp both 0.5s;
        }
      }
      ::view-transition-group(img) {
        overflow: clip;
      }
      body {
        font-family: sans-serif;
      }
      header img {
        mask-image: radial-gradient(
          ellipse at center,
          white 35%,
          transparent 71%
        );
      }
      a.selected {
        background: radial-gradient(
          circle at center,
          #0008 50%,
          #fff8 55%,
          #0008 60%,
          #0000 66%
        );
      }
      [data-theme="dark"] a.selected {
        background: radial-gradient(
          circle at center,
          #fff8 50%,
          #0008 55%,
          #fff8 60%,
          #0000 66%
        );
      }
      main {
        width: fit-content;
        margin: 0 auto;
      }
      main img {
        height: 66vh;
        width: auto;
        view-transition-name: img;
      }
      @media (orientation: portrait) {
        main img {
          width: 100%;
          height: auto;
          margin-top: 10vh;
        }
      }
      #back {
        display: inline-block;
        color: black;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem;
        background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
        box-shadow: 0 4px 6px #8888;
      }
      hr {
        border-color: #8888;
      }
      hr {
        border-color: #8888;
      }
      #back {
        display: inline-block;
        color: black;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem;
        background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
        box-shadow: 0 4px 6px #8888;
      }
      @media (orientation: portrait) {
        main img {
          width: 100%;
          height: auto;
          margin-top: 10vh;
        }
      }
      main img {
        height: 66vh;
        width: auto;
        view-transition-name: img;
      }
      main {
        width: fit-content;
        margin: 0 auto;
      }
      [data-theme="dark"] a.selected {
        background: radial-gradient(
          circle at center,
          #fff8 50%,
          #0008 55%,
          #fff8 60%,
          #0000 66%
        );
      }
      a.selected {
        background: radial-gradient(
          circle at center,
          #0008 50%,
          #fff8 55%,
          #0008 60%,
          #0000 66%
        );
      }
      header img {
        mask-image: radial-gradient(
          ellipse at center,
          white 35%,
          transparent 71%
        );
      }
      body {
        font-family: sans-serif;
      }
      ::view-transition-group(img) {
        overflow: clip;
      }
      :root.vtbag-vtt-same {
        &::view-transition-old(img),
        &::view-transition-new(img) {
          animation: stepBackUp both 0.5s;
        }
      }
      :root.vtbag-vtt-backward {
        &::view-transition-old(img) {
          animation: slideToRight both 0.5s;
        }
        &::view-transition-new(img) {
          animation: slideFromLeft both 0.5s;
        }
      }
      ::view-transition-new(img) {
        animation: slideFromRight both 0.5s;
      }
      ::view-transition-old(img) {
        animation: slideToLeft both 0.5s;
      }
      @keyframes stepBackUp {
        50% {
          transform: scale(0.8);
        }
      }
      @keyframes slideToLeft {
        to {
          transform: translateX(-100vw);
        }
      }
      @keyframes slideToRight {
        to {
          transform: translateX(100vw);
        }
      }
      @keyframes slideFromLeft {
        from {
          transform: translateX(-100vw);
        }
      }
      @keyframes slideFromRight {
        from {
          transform: translateX(100vw);
        }
      }
      @media (prefers-reduced-motion: no-preference) {
        @view-transition {
          navigation: auto;
        }
      }
      @media (prefers-reduced-motion: no-preference) {
        @view-transition {
          navigation: auto;
        }
      }
      @keyframes slideFromRight {
        from {
          transform: translateX(100vw);
        }
      }
      @keyframes slideFromLeft {
        from {
          transform: translateX(-100vw);
        }
      }
      @keyframes slideToRight {
        to {
          transform: translateX(100vw);
        }
      }
      @keyframes slideToLeft {
        to {
          transform: translateX(-100vw);
        }
      }
      @keyframes stepBackUp {
        50% {
          transform: scale(0.8);
        }
      }

      ::view-transition-old(img) {
        animation: slideToLeft both 0.5s;
      }
      ::view-transition-new(img) {
        animation: slideFromRight both 0.5s;
      }

      :root.vtbag-vtt-backward {
        &::view-transition-old(img) {
          animation: slideToRight both 0.5s;
        }
        &::view-transition-new(img) {
          animation: slideFromLeft both 0.5s;
        }
      }

      :root.vtbag-vtt-same {
        &::view-transition-old(img),
        &::view-transition-new(img) {
          animation: stepBackUp both 0.5s;
        }
      }

      ::view-transition-group(img) {
        overflow: clip;
      }

      body {
        font-family: sans-serif;
      }
      header img {
        mask-image: radial-gradient(
          ellipse at center,
          white 35%,
          transparent 71%
        );
      }

      a.selected {
        background: radial-gradient(
          circle at center,
          #0008 50%,
          #fff8 55%,
          #0008 60%,
          #0000 66%
        );
      }
      [data-theme="dark"] a.selected {
        background: radial-gradient(
          circle at center,
          #fff8 50%,
          #0008 55%,
          #fff8 60%,
          #0000 66%
        );
      }

      main {
        width: fit-content;
        margin: 0 auto;
      }
      main img {
        height: 66vh;
        width: auto;
        view-transition-name: img;
      }
      @media (orientation: portrait) {
        main img {
          width: 100%;
          height: auto;
          margin-top: 10vh;
        }
      }
      #back {
        display: inline-block;
        color: black;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem;
        background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
        box-shadow: 0 4px 6px #8888;
      }
      hr {
        border-color: #8888;
      }