body {
        overflow-y: scroll;
        background: var(--color-background-page-lvl-1, #031710);
      }

      .main-preloader {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #031710;
        z-index: 5900;
        transition: 0.3s;
      }

      .main-preloader__text {
        width: 150px;
      }

      .olymp .main-preloader__text {
        width: 163px;
      }

      @keyframes rotateAnimation {
        from {
          transform: rotateY(45deg);
        }
        to {
          transform: rotateY(225deg);
        }
      }

      body.ready .main-preloader {
        opacity: 0;
        visibility: hidden;
      }

      body:not(.touch) {
        scrollbar-gutter: stable;
      }

      body:not(.touch)::-webkit-scrollbar,
      body:not(.touch) *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      *::-webkit-scrollbar-thumb {
        background-clip: padding-box;
        background-color: var(--cas-light-300);
        border-radius: 8px;
      }

      *::-webkit-scrollbar-thumb:hover {
        background-color: var(--cas-light-500);
      }

      *::-webkit-scrollbar-thumb:active {
        background-color: var(--platform-text-8);
      }

      #livechat-compact-container {
        bottom: 50px;
      }

      .coin {
        --diameter: 120px;
        --thickness: 8px;
        --scale: 0.75;
        --period: 5s;
        --gradient: linear-gradient(#ff8a3d 0%, gold 50%, #ff8a3d 100%);
        transform-style: preserve-3d;
        width: var(--diameter);
        height: var(--diameter);
        transform: rotateY(75deg) scale(var(--scale));
        animation: spin var(--period) linear infinite;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
        will-change: transform;
      }

      .coin {
        --thickness: 0px;
      }

      body.olymp .main-preloader {
        gap: 8px;
      }
      #c {
        width: 58px;
        height: 58px;
        display: none;
      }
      .olymp-svg-logo {
        width: 55px;
        height: 58px;
        object-fit: contain;
        object-position: top;
        display: block;
      }

      .side {
        position: absolute;
        width: 100%;
        height: 98%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: yellow;
        font-size: calc(var(--diameter) * 0.6);
        font-weight: bold;
        backface-visibility: hidden;
      }

      .side.backface {
        background-image: var(--gradient);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transform: translateZ(calc(var(--thickness) / 2)) rotateY(180deg);
      }

      .side.tail.backface {
        transform: translateZ(calc(0px - var(--thickness) / 2)) rotateY(0deg);
      }

      .head {
        transform: translateZ(calc(var(--thickness) / 2));
      }

      .tail {
        transform: translateZ(calc(0px - var(--thickness) / 2)) rotateY(180deg);
      }

      .edge {
        position: absolute;
        width: var(--thickness);
        height: 98%;
        will-change: transform;
        transform: translateX(calc(var(--diameter) / 2)) translateZ(calc(var(--thickness) / 2)) rotateY(90deg);
        transform-origin: 0 0;
        background-color: #ff8a3d;
        background-image: var(--gradient);
      }

      @keyframes spin {
        0% {
          transform: rotateY(0deg) scale(var(--scale));
        }
        100% {
          transform: rotateY(360deg) scale(var(--scale));
        }
      }