CODE

<!--
#1a1a25 — main card background
#222232 — info card backgrounds / personality boxes
#3a3a4f — divider line
#383852 — outer border
#444 — lots of small borders (image outline, info card borders)
#ddd — main light text
#b8c5ff — section header text (Name, Personality, etc.)
#bbb — lighter subtext
#ccc — general paragraph text
#aaa — icon color + scroll text
#cbbaf7 — hammer icon
-->

<div align="center" style="font-family:'MS Gothic', monospace;">
  <div style="max-width:430px;background:#2a2a2a;border:1px solid #505050;border-radius:10px;padding:16px;overflow:auto;color:#e5e5e5;">

    <!-- HEADER -->
    <div align="left" style="margin-bottom:10px;">
      <i class="fa-solid fa-hammer fa-flip fa-xl" style="--fa-animation-duration:3s;color:#d0d0d0;"></i>
    </div>

    <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">

      <!-- ICON IMAGE -->
      <div style="flex-shrink:0;">
        <img src="https://i.pinimg.com/736x/10/77/1f/10771f608fe84ba85d4e7ea5ff381764.jpg"
             style="width:150px;height:150px;object-fit:cover;border-radius:6px;border:1px solid #666;">
      </div>

      <!-- INFO CARD -->
      <div style="flex:1;background:#333;border:1px solid #666;border-radius:6px;padding:8px;">
        <p style="font-size:14px;color:#dcdcdc;margin:0 0 4px;">
          Name
          <i class="fa-solid fa-ring" style="color:#aaa;"></i>
        </p>
        <p style="font-size:12px;margin:0;color:#bfbfbf;">Pronouns / Orientation</p>
        <p style="font-size:12px;margin:4px 0;color:#c8c8c8;">Species / Age</p>
        <p style="font-size:12px;max-height:60px;overflow:auto;color:#aaa;">(CAN SCROLL).</p>
      </div>
    </div>

    <!-- DIVIDER -->
    <hr style="margin:12px 0;border:0;border-top:1px solid #555;">

    <!-- PERSONALITY -->
    <div align="left" style="background:#333;border:1px solid #666;border-radius:6px;padding:8px;margin-bottom:8px;">
      <p style="margin:0 0 4px;font-size:13px;color:#dcdcdc;"><i class="fa-solid fa-star" style="color:#aaa;"></i> PERSONALITY</p>
      <p style="font-size:12px;max-height:70px;overflow:auto;color:#c8c8c8;">(CAN SCROLL).</p>
    </div>

    <!-- LIKES & DISLIKES -->
    <div style="display:flex;gap:8px;flex-wrap:wrap;">
      <div style="flex:1;min-width:150px;background:#333;border:1px solid #666;border-radius:6px;padding:8px;">
        <p style="margin:0 0 4px;font-size:13px;color:#dcdcdc;"><i class="fa-solid fa-heart" style="color:#aaa;"></i> ENJOYS</p>
        <ul style="margin:0;padding-left:14px;font-size:12px;line-height:1.4;color:#c8c8c8;">
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
      <div style="flex:1;min-width:150px;background:#333;border:1px solid #666;border-radius:6px;padding:8px;">
        <p style="margin:0 0 4px;font-size:13px;color:#dcdcdc;"><i class="fa-solid fa-xmark" style="color:#aaa;"></i> DOESN'T LIKE</p>
        <ul style="margin:0;padding-left:14px;font-size:12px;line-height:1.4;color:#c8c8c8;">
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>

    <!-- BACKSTORY -->
    <div align="left" style="margin-top:8px;background:#333;border:1px solid #666;border-radius:6px;padding:8px;">
      <p style="margin:0 0 4px;font-size:13px;color:#dcdcdc;"><i class="fa-solid fa-palette" style="color:#aaa;"></i> BACKSTORY</p>
      <p style="font-size:12px;color:#c8c8c8;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

    <!-- TRIVIA / DESIGN NOTES -->
    <div align="left" style="margin-top:8px;background:#333;border:1px solid #666;border-radius:6px;padding:8px;">
      <p style="margin:0 0 4px;font-size:13px;color:#dcdcdc;"><i class="fa-solid fa-scroll" style="color:#aaa;"></i> TRIVIA / DESIGN NOTES</p>
      <p style="font-size:12px;max-height:70px;overflow:auto;color:#c8c8c8;">
        TRIV1<br>
        TRIV2<br>
        TRIV3<br>
        TRIV4
      </p>
    </div>

    <!-- STAMPS -->
    <img src="https://64.media.tumblr.com/9d2c4840983f1c38473198208070725b/92a08094401d2708-f6/s100x200/0979469cfc412f871f10c88329149398a1274e94.pnj" width="73" height="55">
    <img src="https://64.media.tumblr.com/9d2c4840983f1c38473198208070725b/92a08094401d2708-f6/s100x200/0979469cfc412f871f10c88329149398a1274e94.pnj" width="73" height="55">
    <img src="https://64.media.tumblr.com/9d2c4840983f1c38473198208070725b/92a08094401d2708-f6/s100x200/0979469cfc412f871f10c88329149398a1274e94.pnj" width="73" height="55">
    <img src="https://64.media.tumblr.com/9d2c4840983f1c38473198208070725b/92a08094401d2708-f6/s100x200/0979469cfc412f871f10c88329149398a1274e94.pnj" width="73" height="55">
    <img src="https://64.media.tumblr.com/9d2c4840983f1c38473198208070725b/92a08094401d2708-f6/s100x200/0979469cfc412f871f10c88329149398a1274e94.pnj" width="73" height="55">

    <!-- Credits -->
    <div align="right" style="margin-top:10px;">
      <a href="https://toyhou.se/sokie_Visuvel" target="_blank">
        <i class="fa-solid fa-code fa-2xs" style="color:#999;"></i>
      </a>
    </div>
  </div>
</div>