[hideprofile][html]  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: #2b2b2b;
      font-family: "Jost", Arial, sans-serif;
    }

    .respawn-shop {
      --bg: #eee;
      --muted: rgba(0, 0, 0, .05);
      --text-soft: rgba(0, 0, 0, .6);
      --text-fade: rgba(0, 0, 0, .5);
      --accent: #d76b62;
      width: 924px;
      height: 604px;
      display: flex;
      gap: 4px;
      align-items: flex-start;
      color: #000;
      font-family: "Jost", Arial, sans-serif;
      font-size: 12px;
      line-height: 1;
    }

    .respawn-shop button {
      appearance: none;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
    }

    .rp-left {
      width: 275px;
      height: 459px;
      padding: 4px 16px 20px;
      background: var(--bg);
      border-bottom: 1px solid var(--muted);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      flex: 0 0 auto;
    }

    .rp-preview {
      position: relative;
      width: 244px;
      height: 253px;
      flex: 0 0 auto;
    }

    .rp-cover {
      position: absolute;
      left: 44px;
      top: 12px;
      width: 200px;
      height: 80px;
      overflow: hidden;
    }

    .rp-cover img {
      width: 100%;
      height: 335.94%;
      object-fit: cover;
      object-position: center top;
      transform: rotate(180deg);
      transform-origin: center 40px;
      display: block;
    }

    .rp-sticker {
      position: absolute;
      object-fit: contain;
      pointer-events: none;
      z-index: 1;
    }

    .rp-sticker.one {
      width: 52px;
      height: 49px;
      left: 213px;
      top: 188px;
      transform: rotate(22.52deg);
    }

    .rp-sticker.two {
      width: 45px;
      height: 49px;
      left: -17px;
      top: 48px;
      transform: rotate(-40.88deg);
    }

    .rp-sticker.three {
      width: 62px;
      height: 54px;
      left: 23px;
      top: 0;
    }

.rp-card {
    position: absolute;
    left: 10px;
    top: 30px;
    width: 224px;
    height: 179px;
    padding: 0 12px 12px;
    background: var(--bg);
    border: 1px solid var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    z-index: 2;
}

    .rp-name {
      width: 200px;
      height: 18px;
      margin-top: -8px;
      padding: 4px 8px;
      background: #000;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      white-space: nowrap;
      text-align: center;
    }

    .rp-avatar {
      width: 60px;
      height: 60px;
      overflow: hidden;
      flex: 0 0 auto;
    }

    .rp-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .rp-about {
      width: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
    }

    .rp-meta {
      padding: 2px 8px;
      border-radius: 4px;
      background: var(--muted);
      color: var(--text-soft);
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .rp-text {
      width: 180px;
      color: var(--text-soft);
      font-size: 10px;
      line-height: 1.2;
      text-align: justify;
    }

    .rp-badge {
      width: 200px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .rp-badge-bg {
      width: 62px;
      height: 30px;
      overflow: hidden;
      flex: 0 0 auto;
    }

    .rp-badge-bg img {
      width: 173.39%;
      height: 131.97%;
      max-width: none;
      object-fit: cover;
      transform: translate(-21.1%, -24.2%);
      display: block;
    }

    .rp-badge-lines {
      width: 110px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      color: var(--text-soft);
      font-size: 8px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .rp-badge-lines span {
      background: #fff;
    }

    .rp-fields {
      width: 224px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .rp-field {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .rp-label {
      width: 224px;
      color: var(--text-fade);
      font-size: 10px;
      line-height: 1.2;
      text-transform: lowercase;
    }

    .rp-input {
      width: 224px;
      height: 30px;
      padding: 9px 8px;
      border: 0;
      outline: 0;
      border-radius: 5px;
      background: var(--muted);
      color: #000;
      font-family: inherit;
      font-size: 12px;
      line-height: 1;
    }

    .rp-toggle {
      width: 248px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: lowercase;
      letter-spacing: .2px;
    }

    .rp-toggle::after {
      content: "";
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid var(--accent);
    }

    .rp-actions {
      display: flex;
      gap: 8px;
    }

    .rp-action {
      height: 22px;
      padding: 2px 8px 4px;
      border: 2px solid rgba(174, 174, 174, .2);
      background: rgba(161, 161, 161, .32);
      font-size: 12px;
      line-height: 1;
      text-transform: lowercase;
    }

    .rp-right {
      width: 645px;
      height: 604px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 0 0 auto;
    }

    .rp-info {
      height: 68px;
      padding: 12px 16px;
      background: var(--bg);
      border-bottom: 1px solid var(--muted);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .rp-info-text {
      width: 336px;
      font-size: 11px;
      line-height: 1.2;
    }

    .rp-info-text b {
      font-weight: 700;
    }

    .rp-custom {
      width: 223px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: stretch;
    }

    .rp-link,
    .rp-section-title {
      min-height: 20px;
      padding: 4px;
      background: var(--muted);
      color: var(--accent);
      font-size: 12px;
      line-height: 1;
      text-align: right;
      text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      text-transform: lowercase;
      white-space: nowrap;
    }

    .rp-section {
      height: 172px;
      padding: 4px 16px 12px;
      background: var(--bg);
      border-bottom: 1px solid var(--muted);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .rp-section.stickers {
      height: 180px;
    }

    .rp-section-title {
      width: 613px;
      flex: 0 0 20px;
    }

.rp-grid {
    width: 597px;
    display: grid;
    grid-template-columns: repeat(9, 59px);
    gap: 8px;
    overflow-y: auto;
    overflow-x: clip;
}

    .rp-choice {
      position: relative;
      width: 59px;
      height: 60px;
      overflow: hidden;
      flex: 0 0 auto;
    }

    .rp-choice img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .rp-choice.is-selected {
      border: 1px solid var(--accent);
    }

    .rp-choice.is-selected img {
      opacity: .3;
    }

    .rp-choice.is-selected::after,
    .rp-sticker-set.is-selected::after {
      content: "✓";
      position: absolute;
      right: 4px;
      top: 4px;
      width: 10px;
      height: 10px;
      background: var(--accent);
      color: #fff;
      font-size: 10px;
      line-height: 9px;
      text-align: center;
      font-weight: 700;
    }

    .rp-sticker-grid {
      width: 610px;
      display: grid;
      grid-template-columns: repeat(3, 198px);
      gap: 8px;
    }

    .rp-sticker-set {
      position: relative;
      width: 198px;
      height: 64px;
      padding: 2px;
      display: flex;
      gap: 8px;
      align-items: center;
      overflow: hidden;
    }

    .rp-sticker-set img {
      width: 59px;
      height: 60px;
      object-fit: contain;
      display: block;
    }

    .rp-sticker-set.is-selected {
      border: 1px solid var(--accent);
    }

    .rp-sticker-set.is-selected img {
      opacity: .35;
    }
  </style>
</head>
<body>
  <div class="respawn-shop" data-respawn-shop>
    <section class="rp-left">
      <div class="rp-preview" data-profile>
        <div class="rp-cover"><img data-profile-bg src="https://upforme.ru/uploads/0018/1c/bd/2/643513.jpg" alt=""></div>
        <img class="rp-sticker one" data-sticker-one src="https://upforme.ru/uploads/0018/1c/bd/2/280482.png" alt="">
        <img class="rp-sticker two" data-sticker-two src="https://upforme.ru/uploads/0018/1c/bd/2/524938.png" alt="">
        <img class="rp-sticker three" data-sticker-three src="https://upforme.ru/uploads/0018/1c/bd/2/695260.png" alt="">
        <div class="rp-card">
          <div class="rp-name" data-user-name>Chittaphon Leechaiyapornkul</div>
          <div class="rp-avatar"><img data-user-avatar src="respawn-profile-demo-assets/cover-art.png" alt=""></div>
          <div class="rp-about">
            <div class="rp-meta" data-user-meta>хххххх хххххххххх, 00</div>
            <div class="rp-text" data-user-lz>ты же был лишь моим лишь моим и мы вместе мечтали купить что-то на кузнецком мосту. плачу на техно, я плачу на техно -- ты не со мной слезы льются на рейве</div>
          </div>
          <div class="rp-badge">
            <div class="rp-badge-bg"><img data-badge-bg src="https://upforme.ru/uploads/0018/1c/bd/2/587140.jpg" alt=""></div>
            <div class="rp-badge-lines">
              <span><b data-badge-line-one>текст текст текст</b></span>
              <span data-badge-line-two>текст текст текст</span>
            </div>
          </div>
        </div>
      </div>
      <div class="rp-fields">
        <div class="rp-field">
          <div class="rp-label">первая строка плашки</div>
          <input class="rp-input" data-line-one type="text" value="текст текст текст">
        </div>
        <div class="rp-field">
          <div class="rp-label">вторая строка плашки</div>
          <input class="rp-input" data-line-two type="text" value="текст текст текст">
        </div>
      </div>
      <button class="rp-toggle" type="button">индивидуальное оформление</button>
      <div class="rp-actions">
        <button class="rp-action" type="button" data-copy>скопировать код</button>
        <button class="rp-action" type="button" data-clear>очистить</button>
      </div>
    </section>

    <section class="rp-right">
      <div class="rp-info">
        <div class="rp-info-text">ты можешь купить индивидуальное оформление.<br>для этого нажми под профилем «<b>индивидуальное оформление</b>»<br>и заполни появившиеся поля</div>
        <div class="rp-custom">
          <button class="rp-link" type="button">индивидуальный фон в профиль - 250</button>
          <button class="rp-link" type="button">индивидуальный фон для плашки - 250</button>
        </div>
      </div>

      <div class="rp-section" data-section="profile">
        <div class="rp-section-title">фоны в профиль - 250</div>
        <div class="rp-grid" data-profile-grid></div>
        <div class="rp-grid" data-profile-grid-bottom></div>
      </div>

      <div class="rp-section" data-section="badge">
        <div class="rp-section-title">фоны плашек - 250</div>
        <div class="rp-grid" data-badge-grid></div>
        <div class="rp-grid" data-badge-grid-bottom></div>
      </div>

      <div class="rp-section stickers" data-section="stickers">
        <div class="rp-section-title">стикеры - 250</div>
        <div class="rp-sticker-grid" data-sticker-grid-top></div>
        <div class="rp-sticker-grid" data-sticker-grid-bottom></div>
      </div>
    </section>[/html]