:root {
        color-scheme: dark;
        --text: #f5f7fb;
        --exchange-top: clamp(48px, 7vw, 72px);
        --group-bottom: clamp(80px, 15vw, 140px);
        --group-width: min(92vw, 800px);
        --stoerer-margin-bottom: 0;
        --stoerer-margin-right: -70px;
        --shop-bottom: -25%;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
      }

      body {
        background: #000;
        font-family: Arial, Helvetica, sans-serif;
      }

      .ad {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 120px;
        min-height: 600px;
        overflow: hidden;
        isolation: isolate;
        text-decoration: none;
        color: var(--text);
        background: #000;
        outline: none;
      }

      .ad:focus-visible {
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
      }

      .frame {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .bg {
        position: absolute;
        inset: 50% auto auto 50%;
        width: var(--bg-size, 380px);
        height: auto;
        aspect-ratio: 1300 / 1870;
        min-width: 380px;
        max-width: none;
        transform: translate(-50%, -50%);
        z-index: 0;
        display: block;
        pointer-events: none;
      }

      .exchange,
      .shop {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: auto;
        max-width: 100%;
      }

      .text-group {
        position: absolute;
        left: 50%;
        bottom: var(--group-bottom);
        transform: translateX(-50%);
        display: grid;
        justify-items: center;
        gap: clamp(4px, 0.9vw, 10px);
        width: var(--group-width);
        z-index: 3;
      }

      .stoerer {
        margin-right: var(--stoerer-offset, var(--stoerer-margin-right));
        margin-bottom: var(--stoerer-margin-bottom);
        width: var(--stoerer-width, 81px);
        max-width: var(--stoerer-max, 100px);
        height: auto;
      }

      .exchange {
        top: var(--exchange-top);
        width: var(--exchange-width, 124px);
        z-index: 2;
      }

      .shop {
        bottom: var(--shop-bottom);
        width: var(--shop-width, 117px);
        z-index: 3;
      }

      .subtext {
        width: var(--subtext-width, 147px);
        max-width: 100%;
        height: auto;
        z-index: 3;
      }

      @media (max-height: 700px) {
        :root {
          --exchange-top: clamp(48px, 5vw, 54px);
          --group-bottom: clamp(80px, 13vw, 124px);
          --group-width: min(92vw, 800px);
        }
      }

      @media (min-width: 700px) and (min-height: 700px) {
        :root {
          --exchange-top: clamp(48px, 5vw, 60px);
          --group-bottom: clamp(70px, 13vw, 108px);
          --group-width: min(92vw, 800px);
        }
      }

      @media (min-aspect-ratio: 1 / 1) {
        :root {
          --stoerer-margin-bottom: clamp(-30px, -0.8vh, -20px);
          --exchange-top: clamp(48px, 7vh, 72px);
          --group-bottom: clamp(68px, 13vh, 120px);
          --group-width: min(92vh, 800px);
        }
      }

      @media (max-width: 260px) {
        :root {
          --shop-bottom: -40%;
        }
      }

      @media (min-height: 900px) {
        :root {
          --shop-bottom: -60px;
        }
      }