/* Match the decorative .life bar width to the new titleIntro SVG width */
      #titleIntro .life { width: 416rem !important; }
      #titleIntro .life .bg { width: calc(416rem + 96rem * tan(-54deg + 90deg)) !important; }
      /* Keep the three titleIntro colortip bars in sync (To Code / Is / To Enable) */
      #titleIntro .curiosity .bg,
      #titleIntro .is .bg,
      #titleIntro .life .bg { --delay: 0s !important; }
      @media (max-width: 767px) {
        #titleIntro .life { width: 259rem !important; }
        #titleIntro .life .bg { width: calc(259rem + 66rem * tan(-54deg + 90deg)) !important; }
      }

      /* #titleRT single logoRT.svg ("To Code is To Enable") with logoLT-style border/padding */
      #titleRT .curiosity,
      #titleRT .is,
      #titleRT .life { display: none !important; }
      #titleRT .title {
        position: relative;
        overflow: hidden;
        width: 439.44rem;
        height: 66rem;
      }
      #titleRT .title:after {
        content: "";
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        padding: 12rem;
        box-sizing: border-box;
        border: solid 1px #000;
        background-image: url(/assets/images/pc/logoRT.svg?v=3) !important;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-origin: content-box;
      }
      #titleRT .title > .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: calc(439.44rem + 66rem * tan(-54deg + 90deg));
        height: 100%;
        transform: skewX(-36deg);
        transform-origin: left top;
        --delay: 0s;
      }
      @media (max-width: 767px) {
        #titleRT .title {
          width: 195.66rem;
          height: 32rem;
        }
        #titleRT .title:after {
          padding: 6rem;
          background-image: url(/assets/images/sp/logoRT.svg?v=4) !important;
        }
        #titleRT .title > .bg {
          width: calc(195.66rem + 32rem * tan(-54deg + 90deg));
        }
      }

      /* Volume toggle button (shifted left to make room for the skip button on its right) */
      :root {
        --volume-bottom: 32rem;
        --volume-right: calc(32rem + 48rem + 12rem);
        --volume-bottom-sp: 16rem;
        --volume-left-sp: 16rem;
        --skip-bottom: 32rem;
        --skip-right: 32rem;
        --skip-bottom-sp: 16rem;
        --skip-left-sp: calc(16rem + 40rem + 12rem);
      }
      .volume-button {
        position: fixed;
        bottom: var(--volume-bottom);
        right: var(--volume-right);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48rem;
        height: 48rem;
        padding: 0;
        border: solid 1px #000;
        background: transparent;
        overflow: hidden;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        transition: transform 0.15s ease-out, border-color 0.2s ease;
      }
      .volume-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(48rem + 48rem * tan(-54deg + 90deg));
        height: 100%;
        background: #dcdcdc;
        transform: skewX(-36deg) translateX(100%);
        transform-origin: left top;
        transition: transform 0.45s cubic-bezier(0.3, 0, 0.3, 1);
        z-index: 0;
        pointer-events: none;
      }
      .volume-icon {
        position: relative;
        z-index: 1;
        width: 60%;
        height: 60%;
        background-image: url(/assets/images/pc/volume.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: opacity 0.2s ease, transform 0.2s ease;
      }
      .volume-button:hover::before,
      .volume-button:focus-visible::before { transform: skewX(-36deg) translateX(0); }
      .volume-button:hover .volume-icon,
      .volume-button:focus-visible .volume-icon { transform: scale(1.1); }
      .volume-button:focus-visible { outline: solid 1px #000; outline-offset: 2rem; }
      .volume-button:active { transform: scale(0.95); }
      .volume-button:active::before { background: #cccccc; }
      .volume-button[aria-pressed="true"] { border-color: #999999; }
      .volume-button[aria-pressed="true"] .volume-icon {
        background-image: url(/assets/images/pc/volume_off.svg);
        opacity: 0.55;
      }
      @media (max-width: 767px) {
        .volume-button {
          bottom: var(--volume-bottom-sp);
          left: var(--volume-left-sp);
          right: auto;
          width: 40rem;
          height: 40rem;
        }
        .volume-button::before { width: calc(40rem + 40rem * tan(-54deg + 90deg)); }
        .volume-icon { background-image: url(/assets/images/sp/volume.svg); }
        .volume-button[aria-pressed="true"] .volume-icon {
          background-image: url(/assets/images/sp/volume_off.svg);
        }
      }

      /* Skip-animation button (twin of the volume toggle) */
      .skip-button {
        position: fixed;
        bottom: var(--skip-bottom);
        right: var(--skip-right);
        z-index: 1000000; /* above #modalbutton (9999) / .modalopenbutton (999999): stays clickable on the final scene */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48rem;
        height: 48rem;
        padding: 0;
        border: solid 1px #000;
        background: transparent;
        overflow: hidden;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        transition: transform 0.15s ease-out, border-color 0.2s ease;
      }
      .skip-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(48rem + 48rem * tan(-45deg + 90deg));
        height: 100%;
        background: var(--skip-accent, #dcdcdc);
        transform: skewX(-45deg) translateX(100%);
        transform-origin: left top;
        transition: transform 0.45s cubic-bezier(0.3, 0, 0.3, 1);
        z-index: 0;
        pointer-events: none;
      }
      .skip-icon {
        position: relative;
        z-index: 1;
        width: 60%;
        height: 60%;
        transition: opacity 0.2s ease, transform 0.2s ease;
      }
      .skip-button:hover::before,
      .skip-button:focus-visible::before { transform: skewX(-45deg) translateX(0); }
      .skip-button:hover .skip-icon,
      .skip-button:focus-visible .skip-icon { transform: scale(1.1); }
      .skip-button:focus-visible { outline: solid 1px #000; outline-offset: 2rem; }
      .skip-button:active { transform: scale(0.95); }
      @media (max-width: 767px) {
        .skip-button {
          bottom: var(--skip-bottom-sp);
          left: var(--skip-left-sp);
          right: auto;
          width: 40rem;
          height: 40rem;
        }
        .skip-button::before { width: calc(40rem + 40rem * tan(-45deg + 90deg)); }
      }