nolanlawson/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Repro Chrome emoji bug</title>
  <style>
      :root {
          --button-primary-bg: royalblue;
          --button-primary-text: white;
          --button-primary-border: #214cce;
          --button-primary-bg-active: #6988e7;
          --button-primary-bg-hover: #577ae4;
          --button-bg: #e6e6e6;
          --button-text: #333;
          --button-border: #a7a7a7;
          --button-bg-active: #bfbfbf;
          --button-bg-hover: #f2f2f2;
          --input-border: #dadada;
          --input-bg: white;
          --anchor-text: royalblue;
          --main-bg: white;
          --body-bg: #e8edfb;
          --body-text-color: #333;
          --main-border: #dadada;
          --svg-fill: royalblue;
          --form-bg: #f7f7f7;
          --form-border: #c1c1c1;
          --nav-bg: royalblue;
          --nav-active-bg: #6988e7;
          --nav-border: #214cce;
          --nav-a-border: royalblue;
          --nav-a-selected-border: white;
          --nav-a-selected-bg: #6d8ce8;
          --nav-a-selected-active-bg: #8ca4ed;
          --nav-svg-fill: white;
          --nav-text-color: white;
          --nav-indicator-bg: rgba(255, 255, 255, 0.8);
          --nav-indicator-bg-hover: rgba(255, 255, 255, 0.85);
          --nav-a-selected-border-hover: white;
          --nav-a-selected-bg-hover: #839deb;
          --nav-a-bg-hover: #577ae4;
          --nav-a-border-hover: royalblue;
          --nav-svg-fill-hover: white;
          --nav-text-color-hover: white;
          --action-button-fill-color: #90a8ee;
          --action-button-fill-color-hover: #a2b6f0;
          --action-button-fill-color-active: #577ae4;
          --action-button-fill-color-pressed: #2351dc;
          --action-button-fill-color-pressed-hover: #3862e0;
          --action-button-fill-color-pressed-active: #1d44b8;
          --action-button-deemphasized-fill-color: #666;
          --action-button-deemphasized-fill-color-hover: #9e9e9e;
          --action-button-deemphasized-fill-color-active: #737373;
          --action-button-deemphasized-fill-color-pressed: #545454;
          --action-button-deemphasized-fill-color-pressed-hover: #616161;
          --action-button-deemphasized-fill-color-pressed-active: #404040;
          --settings-list-item-bg: white;
          --settings-list-item-text: royalblue;
          --settings-list-item-text-hover: royalblue;
          --settings-list-item-border: #dadada;
          --settings-list-item-bg-active: #e6e6e6;
          --settings-list-item-bg-hover: #fafafa;
          --toast-bg: #333;
          --toast-border: #fafafa;
          --toast-text: white;
          --toast-button-hover: #404040;
          --toast-button-active: #4d4d4d;
          --toast-anchor-color: #99afef;
          --mask-bg: #333;
          --mask-svg-fill: white;
          --mask-opaque-bg: rgba(51, 51, 51, 0.8);
          --loading-bg: #ededed;
          --account-profile-bg-backdrop-filter: rgba(255, 255, 255, 0.7);
          --account-profile-bg: rgba(255, 255, 255, 0.9);
          --deemphasized-text-color: #666;
          --focus-outline: #c5d1f6;
          --very-deemphasized-link-color: rgba(65, 105, 225, 0.6);
          --very-deemphasized-text-color: rgba(102, 102, 102, 0.6);
          --status-direct-background: #d2dcf8;
          --main-theme-color: royalblue;
          --warning-color: #e01f19;
          --alt-input-bg: rgba(255, 255, 255, 0.9);
          --muted-modal-text: white;
          --muted-modal-bg: transparent;
          --muted-modal-focus: #999;
          --muted-modal-hover: rgba(255, 255, 255, 0.2);
          --compose-autosuggest-item-hover: #ced8f7;
          --compose-autosuggest-item-active: #b8c7f4;
          --compose-autosuggest-outline: #dbe3f9;
          --compose-button-halo: rgba(255, 255, 255, 0.1);
          --file-drop-mask: rgba(255, 255, 255, 0.8);
          --banner-fill: royalblue;
          --tab-bg: white;
          --tab-bg-non-selected: #f7f7f7;
          --tab-bg-active: #bfbfbf;
          --tab-bg-hover: #fafafa;
          --tab-bg-hover-non-selected: #f2f2f2;
          --tooltip-bg: rgba(30, 30, 30, 0.9);
          --tooltip-color: white;
          --floating-button-bg: rgba(255, 255, 255, 0.8);
          --floating-button-bg-hover: rgba(242, 242, 242, 0.9);
          --floating-button-bg-active: rgba(230, 230, 230, 0.9);
          --length-indicator-color: royalblue;
          --audio-bg: rgba(30, 30, 30, 0.8);
          --focal-img-backdrop-filter: rgba(255, 255, 255, 0.5);
          --focal-img-bg: rgba(255, 255, 255, 0.3);
          --focal-bg: rgba(51, 51, 51, 0.8);
          --focal-bg-drag: rgba(51, 51, 51, 0.9);
          --focal-bg-hover: rgba(64, 64, 64, 0.8);
          --focal-color: white;
          --blurhash-sensitive-text-color: #cccccc;
          --focus-bg: rgba(0, 0, 0, 0.1)
      }

      @font-face {
          font-family: FontRegular;
          src: local("BlinkMacSystemFont"), local("Segoe UI"), local("Roboto"), local("Oxygen-Sans"), local("Ubuntu"), local("Cantarell"), local("Fira Sans"), local("Droid Sans"), local("Helvetica Neue")
      }

      @font-face {
          font-family: FontEmoji;
          src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Twemoji Mozilla"), local("Noto Color Emoji"), local("EmojiOne Color"), local("Android Emoji")
      }

      :root {
          --warn-color: #e14154;
          --status-pad-v: 10px;
          --status-pad-h: 20px;
          --nav-font-size: 1rem;
          --nav-indicator-height: 2px;
          --nav-border-bottom: 0px;
          --nav-icon-pad-v: 15px;
          --nav-icon-pad-h: 20px;
          --nav-icon-size: 20px;
          --nav-total-height: calc((var(--nav-icon-pad-v) * 2) + var(--nav-icon-size) + var(--nav-indicator-height) + var(--nav-border-bottom));
          --main-content-gap-top: 20px;
          --main-content-pad-top: calc(var(--nav-total-height) + var(--main-content-gap-top));
          --main-margin-bottom: 15px;
          --main-border-size: 1px;
          --focus-width: 2px
      }

      body {
          margin: 0 auto;
          max-width: 800px;
          font-family: system-ui, -apple-system, FontRegular, sans-serif;
          font-size: 14px;
          line-height: 1.4;
          color: var(--body-text-color);
          background: var(--body-bg);
          -webkit-tap-highlight-color: transparent;
          overflow-x: hidden
      }

      a {
          color: var(--anchor-text);
          text-decoration: none
      }

      a:visited {
          color: var(--anchor-text)
      }

      a:hover {
          text-decoration: underline
      }

      input {
          border: 1px solid var(--input-border);
          padding: 5px;
          box-sizing: border-box
      }

      input[type=search] {
          -webkit-appearance: none
      }

      input, textarea {
          background: inherit;
          color: inherit
      }

      textarea {
          font-family: system-ui, -apple-system, FontRegular, sans-serif, FontEmoji
      }

      .button, button {
          font-size: 1.2em;
          background: var(--button-bg);
          border-radius: 2px;
          padding: 10px 15px;
          border: 1px solid var(--button-border);
          cursor: pointer;
          color: var(--button-text)
      }

      .button:hover, button:hover {
          background: var(--button-bg-hover);
          text-decoration: none
      }

      .button:active, button:active {
          background: var(--button-bg-active)
      }

      .button[disabled], button[disabled] {
          opacity: .35;
          pointer-events: none;
          cursor: not-allowed
      }

      .button.primary, button.primary {
          border: 1px solid var(--button-primary-border);
          background: var(--button-primary-bg);
          color: var(--button-primary-text)
      }

      .button.primary:hover, button.primary:hover {
          background: var(--button-primary-bg-hover)
      }

      .button.primary:active, button.primary:active {
          background: var(--button-primary-bg-active)
      }

      input, label, p {
          font-size: 1.3em
      }

      li, p, ul {
          padding: 0;
          margin: 0
      }

      .hidden {
          opacity: 0
      }

      button::-moz-focus-inner {
          border: 0
      }

      input:invalid, input:required {
          box-shadow: none
      }

      textarea {
          font-family: inherit;
          font-size: inherit;
          box-sizing: border-box
      }

      .sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          border: 0
      }

      .inline-custom-emoji {
          width: 1.4em;
          height: 1.4em;
          margin: -.1em 0;
          object-fit: contain;
          vertical-align: middle
      }

      .inline-emoji {
          font-family: FontEmoji, sans-serif
      }

      html {
          scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color)
      }

      body {
          scrollbar-color: initial
      }

      body::-webkit-scrollbar {
          width: var(--scrollbar-width);
          height: var(--scrollbar-height)
      }

      body::-webkit-scrollbar-thumb {
          background: var(--scrollbar-face-color);
          border-radius: var(--scrollbar-border-radius)
      }

      body::-webkit-scrollbar-thumb:hover {
          background: var(--scrollbar-face-color-hover)
      }

      body::-webkit-scrollbar-thumb:active {
          background: var(--scrollbar-face-color-active)
      }

      body::-webkit-scrollbar-track, body::-webkit-scrollbar-track:active, body::-webkit-scrollbar-track:hover {
          background: var(--scrollbar-track-color)
      }

      body::-webkit-scrollbar-corner {
          background: var(--scrollbar-background-color)
      }


      .compose-box.svelte-qt47aq {
          border-radius: 4px;
          padding: 20px 20px 0 20px;
          display: grid;
          align-items: flex-start;
          grid-template-areas:"avatar name        handle      handle"
      "avatar cw          cw          cw"
      "avatar input       input       input"
      "avatar gauge       gauge       gauge"
      "avatar autosuggest autosuggest autosuggest"
      "avatar poll        poll        poll"
      "avatar toolbar     toolbar     length"
      "avatar media       media       media"
      "avatar sensitive   sensitive   sensitive";
          grid-template-columns:min-content minmax(0, max-content) 1fr 1fr;
          position: relative
      }

      .compose-box.direct-reply.svelte-qt47aq {
          background-color: var(--status-direct-background)
      }

      .compose-box-fade-in {
          transition: opacity 0.2s linear
      }

      .compose-box-border-bottom.svelte-qt47aq {
          height: 1px;
          background: var(--main-border);
          width: 100%
      }

      .compose-content-warning-wrapper.svelte-qt47aq {
          grid-area: cw
      }

      .compose-poll-wrapper.svelte-qt47aq {
          grid-area: poll
      }

      @media (max-width: 767px) {
          .compose-box.svelte-qt47aq {
              padding: 10px 10px 0 10px
          }

          .compose-box-realm-dialog.svelte-qt47aq {
              overflow-x: hidden
          }
      }

      @media (max-width: 240px) {
          .compose-box.svelte-qt47aq {
              padding: 10px 5px 0 5px
          }
      }

      .compose-box-avatar.svelte-12d3287 {
          grid-area: avatar;
          margin-right: 15px
      }

      .compose-box-display-name.svelte-12d3287 {
          color: var(--deemphasized-text-color);
          grid-area: name;
          min-width: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 1.1em;
          margin-left: 5px;
          font-weight: 600
      }

      .compose-box-display-name.svelte-12d3287, .compose-box-display-name.svelte-12d3287:hover, .compose-box-display-name.svelte-12d3287:visited {
          color: var(--body-text-color)
      }

      .compose-box-handle {
          grid-area: handle;
          color: var(--deemphasized-text-color);
          min-width: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 1.1em;
          margin-left: 5px
      }

      .not-loaded.svelte-12d3287 {
          visibility: hidden
      }

      .loaded.svelte-12d3287 {
          visibility: visible
      }

      @media (max-width: 767px) {
          .compose-box-avatar.svelte-12d3287 {
              margin-right: 5px
          }
      }

      @media (max-width: 240px) {
          .compose-box-avatar.svelte-12d3287 {
              margin-right: 0
          }
      }

      .avatar {
          border-radius: 4px;
          background: var(--loading-bg)
      }

      .avatar.loaded {
          background: none
      }

      svg.avatar {
          fill: var(--deemphasized-text-color)
      }

      .non-autoplay-zoom-in.svelte-waq24 {
          cursor: zoom-in
      }

      .non-autoplay-zoom-in.is-link.svelte-waq24 {
          cursor: pointer
      }

      .account-display-name.svelte-hcd6wu {
          pointer-events: none
      }

      .compose-box-input.svelte-jk36in {
          grid-area: input;
          margin: 10px 0 0 5px;
          padding: 10px;
          border: 1px solid var(--input-border);
          min-height: 75px;
          resize: none;
          overflow: hidden;
          word-wrap: break-word;
          font-size: 1.2em;
          width: calc(100% - 5px)
      }

      .compose-box-input-realm-dialog.svelte-jk36in {
          max-height: 40vh;
          overflow-y: auto
      }

      @media (max-width: 767px) {
          .compose-box-input-realm-dialog.svelte-jk36in {
              max-height: 30vh
          }
      }

      @media (max-width: 479px) {
          .compose-box-input-realm-dialog.svelte-jk36in {
              max-height: 20vh
          }
      }

      .length-gauge.svelte-18bfu03 {
          height: 2px;
          background: var(--main-theme-color);
          transform-origin: left
      }

      .length-gauge.should-animate.svelte-18bfu03 {
          transition: transform 0.2s linear
      }

      .length-gauge.over-char-limit.svelte-18bfu03 {
          background: var(--warning-color)
      }

      .compose-autosuggest-anchor-point.svelte-1yc9zbr {
          grid-area: autosuggest;
          width: 100%;
          height: 0
      }

      .compose-box-toolbar.svelte-1r2xfng {
          grid-area: toolbar;
          align-self: center
      }

      .compose-box-toolbar-items.svelte-1r2xfng {
          display: flex;
          align-items: center
      }

      @media (max-width: 320px) {
          button.icon-button.compose-toolbar-button {
              padding-left: 5px;
              padding-right: 5px
          }
      }

      @media (max-width: 240px) {
          button.icon-button.compose-toolbar-button .icon-button-svg {
              width: 20px;
              height: 20px
          }
      }

      .icon-button.svelte-6ilccr {
          padding: 6px 10px;
          background: none;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          pointer-events: auto
      }

      .icon-button-svg {
          width: 24px;
          height: 24px;
          fill: var(--action-button-fill-color);
          pointer-events: none
      }

      .icon-button.big-icon .icon-button-svg {
          width: 32px;
          height: 32px
      }

      .icon-button:hover .icon-button-svg {
          fill: var(--action-button-fill-color-hover)
      }

      .icon-button.not-pressable:active .icon-button-svg,
      .icon-button.same-pressed:active .icon-button-svg {
          fill: var(--action-button-fill-color-active)
      }

      .icon-button.pressed.not-same-pressed .icon-button-svg {
          fill: var(--action-button-fill-color-pressed)
      }

      .icon-button.pressed.not-same-pressed:hover .icon-button-svg {
          fill: var(--action-button-fill-color-pressed-hover)
      }

      .icon-button.pressed.not-same-pressed:active .icon-button-svg {
          fill: var(--action-button-fill-color-pressed-active)
      }

      .icon-button.muted-style .icon-button-svg {
          fill: var(--action-button-deemphasized-fill-color)
      }

      .icon-button.muted-style:hover .icon-button-svg {
          fill: var(--action-button-deemphasized-fill-color-hover)
      }

      .icon-button.muted-style.not-pressable:active .icon-button-svg,
      .icon-button.muted-style.same-pressed:active .icon-button-svg {
          fill: var(--action-button-deemphasized-fill-color-active)
      }

      .icon-button.muted-style.pressed.not-same-pressed .icon-button-svg {
          fill: var(--action-button-deemphasized-fill-color-pressed)
      }

      .icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg {
          fill: var(--action-button-deemphasized-fill-color-pressed-hover)
      }

      .icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg {
          fill: var(--action-button-deemphasized-fill-color-pressed-active)
      }

      .length-indicator.svelte-rucd90 {
          color: var(--length-indicator-color);
          font-size: 1.3em
      }

      .length-indicator.over-char-limit.svelte-rucd90 {
          color: var(--warning-color)
      }

      .compose-media-container.svelte-so82yb {
          grid-area: media;
          list-style: none;
          display: grid;
          grid-column-gap: 5px;
          align-items: center;
          justify-content: center;
          margin: 10px 0 0 0;
          background: var(--form-bg);
          padding: 5px;
          border-radius: 4px
      }

      .compose-media-sensitive.svelte-1ppizof {
          grid-area: sensitive;
          margin-top: 10px
      }

      label.svelte-1ppizof {
          padding: 5px;
          display: flex;
          align-items: center;
          justify-content: flex-start
      }

      span.svelte-1ppizof {
          margin-left: 5px
      }

      .compose-sensitive-span-disabled.svelte-1ppizof {
          color: var(--deemphasized-text-color)
      }

      @media (max-width: 767px) {
          .compose-media-sensitive.svelte-1ppizof {
              margin-top: 0
          }
      }

      @media (max-width: 320px) {
          span.svelte-1ppizof {
              font-size: 0.9em
          }
      }

      .file-drop.svelte-gx8id0 {
          display: block;
          position: relative;
          max-width: 100%;
          width: 100%
      }

      .file-drop-info.svelte-gx8id0 {
          display: none;
          pointer-events: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 6000;
          justify-content: center;
          align-items: center
      }

      .file-drop-info-text.svelte-gx8id0 {
          font-size: 1.2em;
          color: var(--button-text);
          padding: 10px 20px;
          border: 2px dashed var(--button-text);
          border-radius: 6px
      }

      .file-drop-realm-dialog.svelte-gx8id0 {
          max-height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          scrollbar-width: none;
          -ms-overflow-style: none
      }

      .file-drop-realm-dialog.svelte-gx8id0::-webkit-scrollbar {
          display: none
      }

      .file-drop.drop-valid .file-drop-info, .file-drop.drop-invalid .file-drop-info {
          display: flex;
          background: var(--file-drop-mask)
      }

      .file-drop.drop-valid .file-drop-info-text-invalid, .file-drop.drop-invalid .file-drop-info-text-valid {
          display: none
      }
  </style>
</head>
<body>
<file-drop multiple="true" class="file-drop file-drop-realm-home svelte-gx8id0"
           accept=".3gp,.aac,.flac,.gif,.jpeg,.jpg,.m4a,.m4v,.mov,.mp3,.mp4,.oga,.ogg,.opus,.png,.wav,.webm,.wma,audio/3gpp,audio/aac,audio/flac,audio/m4a,audio/mp3,audio/mp4,audio/mpeg,audio/ogg,audio/wav,audio/wave,audio/webm,audio/x-aac,audio/x-m4a,audio/x-mp4,audio/x-pn-wave,audio/x-wav,image/gif,image/jpeg,image/png,video/mp4,video/ogg,video/quicktime,video/webm,video/x-ms-asf">
  <div class="file-drop-info svelte-gx8id0">
    <div class="file-drop-info-text svelte-gx8id0"><span
      class="file-drop-info-text-valid svelte-gx8id0">Drop to upload</span>
      <span class="file-drop-info-text-invalid svelte-gx8id0">Invalid file type</span></div>
  </div>
  <!---->
  <div class="compose-box compose-box-realm-home compose-box-fade-in svelte-qt47aq"><a href="/accounts/1" rel="prefetch"
                                                                                       class="compose-box-avatar loaded svelte-12d3287"
                                                                                       aria-hidden="true" tabindex="-1"><img
    class="avatar loaded svelte-waq24" aria-hidden="true" alt="" title="" width="48" height="48"
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSJVQTuIOGSoTlaKijhqFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxc3NSdJES/5cUWsR4cNyPd/ced+8Af73MVLMjBqiaZaQScSGTXRWCrwigH70YR0xipj4nikl4jq97+Ph6F+VZ3uf+HD1KzmSATyCeZbphEW8QT29aOud94jArSgrxOfGYQRckfuS67PIb54LDfp4ZNtKpeeIwsVBoY7mNWdFQiaeII4qqUb4/47LCeYuzWq6y5j35C0M5bWWZ6zSHkcAiliBCgIwqSijDQpRWjRQTKdqPe/iHHL9ILplcJTByLKACFZLjB/+D392a+ckJNykUBzpfbPtjBAjuAo2abX8f23bjBAg8A1day1+pAzOfpNdaWuQI6NsGLq5bmrwHXO4Ag0+6ZEiOFKDpz+eB9zP6piwwcAt0r7m9Nfdx+gCkqavkDXBwCIwWKHvd491d7b39e6bZ3w+uu3K/JqjmQwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UDEg4vBV8FJL0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHUlEQVRYw+3BAQEAAACCIP+vbkhAAQAAAAAAwK8BGzAAAZfJ/6QAAAAASUVORK5CYII="><!---->
  </a>
    <a class="compose-box-display-name loaded svelte-12d3287" href="/accounts/1" aria-busy="false" aria-live="off"
       rel="prefetch"><span class="account-display-name svelte-hcd6wu">Name <img class="inline-custom-emoji"
                                                                                            draggable="false"
                                                                                            src="https://assets.malfunctioning.technology/custom_emojis/images/000/001/851/static/e454a2718ea23312.png"
                                                                                            alt=":blobpats:"
                                                                                            title=":blobpats:"> <span
      class="inline-emoji">🤗</span></span></a>

    <span class="compose-box-handle loaded svelte-12d3287" aria-busy="false" aria-live="off">@name</span>

    <textarea id="the-compose-box-input-home" class="compose-box-input compose-box-input-realm-home svelte-jk36in"
              placeholder="What's on your mind?" aria-describedby="compose-box-input-description-home"
              aria-owns="compose-autosuggest-list-home" aria-expanded="false" aria-autocomplete="both"
              style="height: 75px;"></textarea>
    <label for="the-compose-box-input-home" class="sr-only">What's on your mind?</label>
    <span id="compose-box-input-description-home" class="sr-only">When autocomplete results are available, press up or down arrows and enter to select.</span>
    <div class="length-gauge svelte-18bfu03" aria-hidden="true"
         style="transform: scaleX(0); grid-area: gauge / gauge / gauge / gauge; margin: 0px 0px 5px 5px;"></div>
    <div class="compose-autosuggest-anchor-point svelte-1yc9zbr"></div>

    <div class="compose-box-toolbar svelte-1r2xfng">
      <div class="compose-box-toolbar-items svelte-1r2xfng">
        <button id="" type="button" title="Insert emoji" aria-label="Insert emoji" tabindex="0"
                class="icon-button not-pressable not-same-pressed compose-toolbar-button svelte-6ilccr">
          <svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
            <use xlink:href="/icons.svg#fa-smile"></use>
          </svg>
        </button>
        <button id="" type="button" title="Add media (images, video, audio)"
                aria-label="Add media (images, video, audio)" tabindex="0"
                class="icon-button not-pressable not-same-pressed compose-toolbar-button svelte-6ilccr">
          <svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
            <use xlink:href="/icons.svg#fa-camera"></use>
          </svg>
        </button>
        <button id="" type="button" title="Add poll" aria-label="Add poll" tabindex="0"
                class="icon-button not-same-pressed compose-toolbar-button svelte-6ilccr">
          <svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
            <use xlink:href="/icons.svg#fa-bar-chart"></use>
          </svg>
        </button>
        <button id="" type="button" title="Adjust privacy (currently Public)"
                aria-label="Adjust privacy (currently Public)" tabindex="0"
                class="icon-button not-pressable not-same-pressed compose-toolbar-button svelte-6ilccr">
          <svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
            <use xlink:href="/icons.svg#fa-globe"></use>
          </svg>
        </button>
        <button id="" type="button" title="Add content warning" aria-label="Add content warning" tabindex="0"
                class="icon-button not-same-pressed compose-toolbar-button svelte-6ilccr">
          <svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
            <use xlink:href="/icons.svg#fa-exclamation-triangle"></use>
          </svg>
        </button>
      </div>
      <input type="file" multiple=""
             accept=".3gp,.aac,.flac,.gif,.jpeg,.jpg,.m4a,.m4v,.mov,.mp3,.mp4,.oga,.ogg,.opus,.png,.wav,.webm,.wma,audio/3gpp,audio/aac,audio/flac,audio/m4a,audio/mp3,audio/mp4,audio/mpeg,audio/ogg,audio/wav,audio/wave,audio/webm,audio/x-aac,audio/x-m4a,audio/x-mp4,audio/x-pn-wave,audio/x-wav,image/gif,image/jpeg,image/png,video/mp4,video/ogg,video/quicktime,video/webm,video/x-ms-asf"
             style="display: none;"></div>
    <span class="length-indicator  svelte-rucd90" aria-label="500 characters remaining"
          style="grid-area: length / length / length / length; place-self: center right;">500</span>
    <!---->
    <!----></div>
</file-drop>

<div>
  Same emoji, different context: <span class="inline-emoji">🤗</span>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Repro Chrome emoji bug</title>
	<style>
	:root {
	--button-primary-bg: royalblue;
	--button-primary-text: white;
	--button-primary-border: #214cce;
	--button-primary-bg-active: #6988e7;
	--button-primary-bg-hover: #577ae4;
	--button-bg: #e6e6e6;
	--button-text: #333;
	--button-border: #a7a7a7;
	--button-bg-active: #bfbfbf;
	--button-bg-hover: #f2f2f2;
	--input-border: #dadada;
	--input-bg: white;
	--anchor-text: royalblue;
	--main-bg: white;
	--body-bg: #e8edfb;
	--body-text-color: #333;
	--main-border: #dadada;
	--svg-fill: royalblue;
	--form-bg: #f7f7f7;
	--form-border: #c1c1c1;
	--nav-bg: royalblue;
	--nav-active-bg: #6988e7;
	--nav-border: #214cce;
	--nav-a-border: royalblue;
	--nav-a-selected-border: white;
	--nav-a-selected-bg: #6d8ce8;
	--nav-a-selected-active-bg: #8ca4ed;
	--nav-svg-fill: white;
	--nav-text-color: white;
	--nav-indicator-bg: rgba(255, 255, 255, 0.8);
	--nav-indicator-bg-hover: rgba(255, 255, 255, 0.85);
	--nav-a-selected-border-hover: white;
	--nav-a-selected-bg-hover: #839deb;
	--nav-a-bg-hover: #577ae4;
	--nav-a-border-hover: royalblue;
	--nav-svg-fill-hover: white;
	--nav-text-color-hover: white;
	--action-button-fill-color: #90a8ee;
	--action-button-fill-color-hover: #a2b6f0;
	--action-button-fill-color-active: #577ae4;
	--action-button-fill-color-pressed: #2351dc;
	--action-button-fill-color-pressed-hover: #3862e0;
	--action-button-fill-color-pressed-active: #1d44b8;
	--action-button-deemphasized-fill-color: #666;
	--action-button-deemphasized-fill-color-hover: #9e9e9e;
	--action-button-deemphasized-fill-color-active: #737373;
	--action-button-deemphasized-fill-color-pressed: #545454;
	--action-button-deemphasized-fill-color-pressed-hover: #616161;
	--action-button-deemphasized-fill-color-pressed-active: #404040;
	--settings-list-item-bg: white;
	--settings-list-item-text: royalblue;
	--settings-list-item-text-hover: royalblue;
	--settings-list-item-border: #dadada;
	--settings-list-item-bg-active: #e6e6e6;
	--settings-list-item-bg-hover: #fafafa;
	--toast-bg: #333;
	--toast-border: #fafafa;
	--toast-text: white;
	--toast-button-hover: #404040;
	--toast-button-active: #4d4d4d;
	--toast-anchor-color: #99afef;
	--mask-bg: #333;
	--mask-svg-fill: white;
	--mask-opaque-bg: rgba(51, 51, 51, 0.8);
	--loading-bg: #ededed;
	--account-profile-bg-backdrop-filter: rgba(255, 255, 255, 0.7);
	--account-profile-bg: rgba(255, 255, 255, 0.9);
	--deemphasized-text-color: #666;
	--focus-outline: #c5d1f6;
	--very-deemphasized-link-color: rgba(65, 105, 225, 0.6);
	--very-deemphasized-text-color: rgba(102, 102, 102, 0.6);
	--status-direct-background: #d2dcf8;
	--main-theme-color: royalblue;
	--warning-color: #e01f19;
	--alt-input-bg: rgba(255, 255, 255, 0.9);
	--muted-modal-text: white;
	--muted-modal-bg: transparent;
	--muted-modal-focus: #999;
	--muted-modal-hover: rgba(255, 255, 255, 0.2);
	--compose-autosuggest-item-hover: #ced8f7;
	--compose-autosuggest-item-active: #b8c7f4;
	--compose-autosuggest-outline: #dbe3f9;
	--compose-button-halo: rgba(255, 255, 255, 0.1);
	--file-drop-mask: rgba(255, 255, 255, 0.8);
	--banner-fill: royalblue;
	--tab-bg: white;
	--tab-bg-non-selected: #f7f7f7;
	--tab-bg-active: #bfbfbf;
	--tab-bg-hover: #fafafa;
	--tab-bg-hover-non-selected: #f2f2f2;
	--tooltip-bg: rgba(30, 30, 30, 0.9);
	--tooltip-color: white;
	--floating-button-bg: rgba(255, 255, 255, 0.8);
	--floating-button-bg-hover: rgba(242, 242, 242, 0.9);
	--floating-button-bg-active: rgba(230, 230, 230, 0.9);
	--length-indicator-color: royalblue;
	--audio-bg: rgba(30, 30, 30, 0.8);
	--focal-img-backdrop-filter: rgba(255, 255, 255, 0.5);
	--focal-img-bg: rgba(255, 255, 255, 0.3);
	--focal-bg: rgba(51, 51, 51, 0.8);
	--focal-bg-drag: rgba(51, 51, 51, 0.9);
	--focal-bg-hover: rgba(64, 64, 64, 0.8);
	--focal-color: white;
	--blurhash-sensitive-text-color: #cccccc;
	--focus-bg: rgba(0, 0, 0, 0.1)
	}

	@font-face {
	font-family: FontRegular;
	src: local("BlinkMacSystemFont"), local("Segoe UI"), local("Roboto"), local("Oxygen-Sans"), local("Ubuntu"), local("Cantarell"), local("Fira Sans"), local("Droid Sans"), local("Helvetica Neue")
	}

	@font-face {
	font-family: FontEmoji;
	src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Twemoji Mozilla"), local("Noto Color Emoji"), local("EmojiOne Color"), local("Android Emoji")
	}

	:root {
	--warn-color: #e14154;
	--status-pad-v: 10px;
	--status-pad-h: 20px;
	--nav-font-size: 1rem;
	--nav-indicator-height: 2px;
	--nav-border-bottom: 0px;
	--nav-icon-pad-v: 15px;
	--nav-icon-pad-h: 20px;
	--nav-icon-size: 20px;
	--nav-total-height: calc((var(--nav-icon-pad-v) * 2) + var(--nav-icon-size) + var(--nav-indicator-height) + var(--nav-border-bottom));
	--main-content-gap-top: 20px;
	--main-content-pad-top: calc(var(--nav-total-height) + var(--main-content-gap-top));
	--main-margin-bottom: 15px;
	--main-border-size: 1px;
	--focus-width: 2px
	}

	body {
	margin: 0 auto;
	max-width: 800px;
	font-family: system-ui, -apple-system, FontRegular, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var(--body-text-color);
	background: var(--body-bg);
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden
	}

	a {
	color: var(--anchor-text);
	text-decoration: none
	}

	a:visited {
	color: var(--anchor-text)
	}

	a:hover {
	text-decoration: underline
	}

	input {
	border: 1px solid var(--input-border);
	padding: 5px;
	box-sizing: border-box
	}

	input[type=search] {
	-webkit-appearance: none
	}

	input, textarea {
	background: inherit;
	color: inherit
	}

	textarea {
	font-family: system-ui, -apple-system, FontRegular, sans-serif, FontEmoji
	}

	.button, button {
	font-size: 1.2em;
	background: var(--button-bg);
	border-radius: 2px;
	padding: 10px 15px;
	border: 1px solid var(--button-border);
	cursor: pointer;
	color: var(--button-text)
	}

	.button:hover, button:hover {
	background: var(--button-bg-hover);
	text-decoration: none
	}

	.button:active, button:active {
	background: var(--button-bg-active)
	}

	.button[disabled], button[disabled] {
	opacity: .35;
	pointer-events: none;
	cursor: not-allowed
	}

	.button.primary, button.primary {
	border: 1px solid var(--button-primary-border);
	background: var(--button-primary-bg);
	color: var(--button-primary-text)
	}

	.button.primary:hover, button.primary:hover {
	background: var(--button-primary-bg-hover)
	}

	.button.primary:active, button.primary:active {
	background: var(--button-primary-bg-active)
	}

	input, label, p {
	font-size: 1.3em
	}

	li, p, ul {
	padding: 0;
	margin: 0
	}

	.hidden {
	opacity: 0
	}

	button::-moz-focus-inner {
	border: 0
	}

	input:invalid, input:required {
	box-shadow: none
	}

	textarea {
	font-family: inherit;
	font-size: inherit;
	box-sizing: border-box
	}

	.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0
	}

	.inline-custom-emoji {
	width: 1.4em;
	height: 1.4em;
	margin: -.1em 0;
	object-fit: contain;
	vertical-align: middle
	}

	.inline-emoji {
	font-family: FontEmoji, sans-serif
	}

	html {
	scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color)
	}

	body {
	scrollbar-color: initial
	}

	body::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-height)
	}

	body::-webkit-scrollbar-thumb {
	background: var(--scrollbar-face-color);
	border-radius: var(--scrollbar-border-radius)
	}

	body::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-face-color-hover)
	}

	body::-webkit-scrollbar-thumb:active {
	background: var(--scrollbar-face-color-active)
	}

	body::-webkit-scrollbar-track, body::-webkit-scrollbar-track:active, body::-webkit-scrollbar-track:hover {
	background: var(--scrollbar-track-color)
	}

	body::-webkit-scrollbar-corner {
	background: var(--scrollbar-background-color)
	}


	.compose-box.svelte-qt47aq {
	border-radius: 4px;
	padding: 20px 20px 0 20px;
	display: grid;
	align-items: flex-start;
	grid-template-areas:"avatar name handle handle"
	"avatar cw cw cw"
	"avatar input input input"
	"avatar gauge gauge gauge"
	"avatar autosuggest autosuggest autosuggest"
	"avatar poll poll poll"
	"avatar toolbar toolbar length"
	"avatar media media media"
	"avatar sensitive sensitive sensitive";
	grid-template-columns:min-content minmax(0, max-content) 1fr 1fr;
	position: relative
	}

	.compose-box.direct-reply.svelte-qt47aq {
	background-color: var(--status-direct-background)
	}

	.compose-box-fade-in {
	transition: opacity 0.2s linear
	}

	.compose-box-border-bottom.svelte-qt47aq {
	height: 1px;
	background: var(--main-border);
	width: 100%
	}

	.compose-content-warning-wrapper.svelte-qt47aq {
	grid-area: cw
	}

	.compose-poll-wrapper.svelte-qt47aq {
	grid-area: poll
	}

	@media (max-width: 767px) {
	.compose-box.svelte-qt47aq {
	padding: 10px 10px 0 10px
	}

	.compose-box-realm-dialog.svelte-qt47aq {
	overflow-x: hidden
	}
	}

	@media (max-width: 240px) {
	.compose-box.svelte-qt47aq {
	padding: 10px 5px 0 5px
	}
	}

	.compose-box-avatar.svelte-12d3287 {
	grid-area: avatar;
	margin-right: 15px
	}

	.compose-box-display-name.svelte-12d3287 {
	color: var(--deemphasized-text-color);
	grid-area: name;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.1em;
	margin-left: 5px;
	font-weight: 600
	}

	.compose-box-display-name.svelte-12d3287, .compose-box-display-name.svelte-12d3287:hover, .compose-box-display-name.svelte-12d3287:visited {
	color: var(--body-text-color)
	}

	.compose-box-handle {
	grid-area: handle;
	color: var(--deemphasized-text-color);
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.1em;
	margin-left: 5px
	}

	.not-loaded.svelte-12d3287 {
	visibility: hidden
	}

	.loaded.svelte-12d3287 {
	visibility: visible
	}

	@media (max-width: 767px) {
	.compose-box-avatar.svelte-12d3287 {
	margin-right: 5px
	}
	}

	@media (max-width: 240px) {
	.compose-box-avatar.svelte-12d3287 {
	margin-right: 0
	}
	}

	.avatar {
	border-radius: 4px;
	background: var(--loading-bg)
	}

	.avatar.loaded {
	background: none
	}

	svg.avatar {
	fill: var(--deemphasized-text-color)
	}

	.non-autoplay-zoom-in.svelte-waq24 {
	cursor: zoom-in
	}

	.non-autoplay-zoom-in.is-link.svelte-waq24 {
	cursor: pointer
	}

	.account-display-name.svelte-hcd6wu {
	pointer-events: none
	}

	.compose-box-input.svelte-jk36in {
	grid-area: input;
	margin: 10px 0 0 5px;
	padding: 10px;
	border: 1px solid var(--input-border);
	min-height: 75px;
	resize: none;
	overflow: hidden;
	word-wrap: break-word;
	font-size: 1.2em;
	width: calc(100% - 5px)
	}

	.compose-box-input-realm-dialog.svelte-jk36in {
	max-height: 40vh;
	overflow-y: auto
	}

	@media (max-width: 767px) {
	.compose-box-input-realm-dialog.svelte-jk36in {
	max-height: 30vh
	}
	}

	@media (max-width: 479px) {
	.compose-box-input-realm-dialog.svelte-jk36in {
	max-height: 20vh
	}
	}

	.length-gauge.svelte-18bfu03 {
	height: 2px;
	background: var(--main-theme-color);
	transform-origin: left
	}

	.length-gauge.should-animate.svelte-18bfu03 {
	transition: transform 0.2s linear
	}

	.length-gauge.over-char-limit.svelte-18bfu03 {
	background: var(--warning-color)
	}

	.compose-autosuggest-anchor-point.svelte-1yc9zbr {
	grid-area: autosuggest;
	width: 100%;
	height: 0
	}

	.compose-box-toolbar.svelte-1r2xfng {
	grid-area: toolbar;
	align-self: center
	}

	.compose-box-toolbar-items.svelte-1r2xfng {
	display: flex;
	align-items: center
	}

	@media (max-width: 320px) {
	button.icon-button.compose-toolbar-button {
	padding-left: 5px;
	padding-right: 5px
	}
	}

	@media (max-width: 240px) {
	button.icon-button.compose-toolbar-button .icon-button-svg {
	width: 20px;
	height: 20px
	}
	}

	.icon-button.svelte-6ilccr {
	padding: 6px 10px;
	background: none;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto
	}

	.icon-button-svg {
	width: 24px;
	height: 24px;
	fill: var(--action-button-fill-color);
	pointer-events: none
	}

	.icon-button.big-icon .icon-button-svg {
	width: 32px;
	height: 32px
	}

	.icon-button:hover .icon-button-svg {
	fill: var(--action-button-fill-color-hover)
	}

	.icon-button.not-pressable:active .icon-button-svg,
	.icon-button.same-pressed:active .icon-button-svg {
	fill: var(--action-button-fill-color-active)
	}

	.icon-button.pressed.not-same-pressed .icon-button-svg {
	fill: var(--action-button-fill-color-pressed)
	}

	.icon-button.pressed.not-same-pressed:hover .icon-button-svg {
	fill: var(--action-button-fill-color-pressed-hover)
	}

	.icon-button.pressed.not-same-pressed:active .icon-button-svg {
	fill: var(--action-button-fill-color-pressed-active)
	}

	.icon-button.muted-style .icon-button-svg {
	fill: var(--action-button-deemphasized-fill-color)
	}

	.icon-button.muted-style:hover .icon-button-svg {
	fill: var(--action-button-deemphasized-fill-color-hover)
	}

	.icon-button.muted-style.not-pressable:active .icon-button-svg,
	.icon-button.muted-style.same-pressed:active .icon-button-svg {
	fill: var(--action-button-deemphasized-fill-color-active)
	}

	.icon-button.muted-style.pressed.not-same-pressed .icon-button-svg {
	fill: var(--action-button-deemphasized-fill-color-pressed)
	}

	.icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg {
	fill: var(--action-button-deemphasized-fill-color-pressed-hover)
	}

	.icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg {
	fill: var(--action-button-deemphasized-fill-color-pressed-active)
	}

	.length-indicator.svelte-rucd90 {
	color: var(--length-indicator-color);
	font-size: 1.3em
	}

	.length-indicator.over-char-limit.svelte-rucd90 {
	color: var(--warning-color)
	}

	.compose-media-container.svelte-so82yb {
	grid-area: media;
	list-style: none;
	display: grid;
	grid-column-gap: 5px;
	align-items: center;
	justify-content: center;
	margin: 10px 0 0 0;
	background: var(--form-bg);
	padding: 5px;
	border-radius: 4px
	}

	.compose-media-sensitive.svelte-1ppizof {
	grid-area: sensitive;
	margin-top: 10px
	}

	label.svelte-1ppizof {
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: flex-start
	}

	span.svelte-1ppizof {
	margin-left: 5px
	}

	.compose-sensitive-span-disabled.svelte-1ppizof {
	color: var(--deemphasized-text-color)
	}

	@media (max-width: 767px) {
	.compose-media-sensitive.svelte-1ppizof {
	margin-top: 0
	}
	}

	@media (max-width: 320px) {
	span.svelte-1ppizof {
	font-size: 0.9em
	}
	}

	.file-drop.svelte-gx8id0 {
	display: block;
	position: relative;
	max-width: 100%;
	width: 100%
	}

	.file-drop-info.svelte-gx8id0 {
	display: none;
	pointer-events: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 6000;
	justify-content: center;
	align-items: center
	}

	.file-drop-info-text.svelte-gx8id0 {
	font-size: 1.2em;
	color: var(--button-text);
	padding: 10px 20px;
	border: 2px dashed var(--button-text);
	border-radius: 6px
	}

	.file-drop-realm-dialog.svelte-gx8id0 {
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none
	}

	.file-drop-realm-dialog.svelte-gx8id0::-webkit-scrollbar {
	display: none
	}

	.file-drop.drop-valid .file-drop-info, .file-drop.drop-invalid .file-drop-info {
	display: flex;
	background: var(--file-drop-mask)
	}

	.file-drop.drop-valid .file-drop-info-text-invalid, .file-drop.drop-invalid .file-drop-info-text-valid {
	display: none
	}
	</style>
	</head>
	<body>
	<file-drop multiple="true" class="file-drop file-drop-realm-home svelte-gx8id0"
	accept=".3gp,.aac,.flac,.gif,.jpeg,.jpg,.m4a,.m4v,.mov,.mp3,.mp4,.oga,.ogg,.opus,.png,.wav,.webm,.wma,audio/3gpp,audio/aac,audio/flac,audio/m4a,audio/mp3,audio/mp4,audio/mpeg,audio/ogg,audio/wav,audio/wave,audio/webm,audio/x-aac,audio/x-m4a,audio/x-mp4,audio/x-pn-wave,audio/x-wav,image/gif,image/jpeg,image/png,video/mp4,video/ogg,video/quicktime,video/webm,video/x-ms-asf">
	<div class="file-drop-info svelte-gx8id0">
	<div class="file-drop-info-text svelte-gx8id0"><span
	class="file-drop-info-text-valid svelte-gx8id0">Drop to upload</span>
	<span class="file-drop-info-text-invalid svelte-gx8id0">Invalid file type</span></div>
	</div>
	<!---->
	<div class="compose-box compose-box-realm-home compose-box-fade-in svelte-qt47aq"><a href="/accounts/1" rel="prefetch"
	class="compose-box-avatar loaded svelte-12d3287"
	aria-hidden="true" tabindex="-1"><img
	class="avatar loaded svelte-waq24" aria-hidden="true" alt="" title="" width="48" height="48"
	src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpSJVQTuIOGSoTlaKijhqFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxc3NSdJES/5cUWsR4cNyPd/ced+8Af73MVLMjBqiaZaQScSGTXRWCrwigH70YR0xipj4nikl4jq97+Ph6F+VZ3uf+HD1KzmSATyCeZbphEW8QT29aOud94jArSgrxOfGYQRckfuS67PIb54LDfp4ZNtKpeeIwsVBoY7mNWdFQiaeII4qqUb4/47LCeYuzWq6y5j35C0M5bWWZ6zSHkcAiliBCgIwqSijDQpRWjRQTKdqPe/iHHL9ILplcJTByLKACFZLjB/+D392a+ckJNykUBzpfbPtjBAjuAo2abX8f23bjBAg8A1day1+pAzOfpNdaWuQI6NsGLq5bmrwHXO4Ag0+6ZEiOFKDpz+eB9zP6piwwcAt0r7m9Nfdx+gCkqavkDXBwCIwWKHvd491d7b39e6bZ3w+uu3K/JqjmQwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UDEg4vBV8FJL0AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHUlEQVRYw+3BAQEAAACCIP+vbkhAAQAAAAAAwK8BGzAAAZfJ/6QAAAAASUVORK5CYII="><!---->
	</a>
	<a class="compose-box-display-name loaded svelte-12d3287" href="/accounts/1" aria-busy="false" aria-live="off"
	rel="prefetch"><span class="account-display-name svelte-hcd6wu">Name <img class="inline-custom-emoji"
	draggable="false"
	src="https://assets.malfunctioning.technology/custom_emojis/images/000/001/851/static/e454a2718ea23312.png"
	alt=":blobpats:"
	title=":blobpats:"> <span
	class="inline-emoji">🤗</span></span></a>

	<span class="compose-box-handle loaded svelte-12d3287" aria-busy="false" aria-live="off">@name</span>

	<textarea id="the-compose-box-input-home" class="compose-box-input compose-box-input-realm-home svelte-jk36in"
	placeholder="What's on your mind?" aria-describedby="compose-box-input-description-home"
	aria-owns="compose-autosuggest-list-home" aria-expanded="false" aria-autocomplete="both"
	style="height: 75px;"></textarea>
	<label for="the-compose-box-input-home" class="sr-only">What's on your mind?</label>
	<span id="compose-box-input-description-home" class="sr-only">When autocomplete results are available, press up or down arrows and enter to select.</span>
	<div class="length-gauge svelte-18bfu03" aria-hidden="true"
	style="transform: scaleX(0); grid-area: gauge / gauge / gauge / gauge; margin: 0px 0px 5px 5px;"></div>
	<div class="compose-autosuggest-anchor-point svelte-1yc9zbr"></div>

	<div class="compose-box-toolbar svelte-1r2xfng">
	<div class="compose-box-toolbar-items svelte-1r2xfng">
	<button id="" type="button" title="Insert emoji" aria-label="Insert emoji" tabindex="0"
	class="icon-button not-pressable not-same-pressed compose-toolbar-button svelte-6ilccr">
	<svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
	<use xlink:href="/icons.svg#fa-smile"></use>
	</svg>
	</button>
	<button id="" type="button" title="Add media (images, video, audio)"
	aria-label="Add media (images, video, audio)" tabindex="0"
	class="icon-button not-pressable not-same-pressed compose-toolbar-button svelte-6ilccr">
	<svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
	<use xlink:href="/icons.svg#fa-camera"></use>
	</svg>
	</button>
	<button id="" type="button" title="Add poll" aria-label="Add poll" tabindex="0"
	class="icon-button not-same-pressed compose-toolbar-button svelte-6ilccr">
	<svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
	<use xlink:href="/icons.svg#fa-bar-chart"></use>
	</svg>
	</button>
	<button id="" type="button" title="Adjust privacy (currently Public)"
	aria-label="Adjust privacy (currently Public)" tabindex="0"
	class="icon-button not-pressable not-same-pressed compose-toolbar-button svelte-6ilccr">
	<svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
	<use xlink:href="/icons.svg#fa-globe"></use>
	</svg>
	</button>
	<button id="" type="button" title="Add content warning" aria-label="Add content warning" tabindex="0"
	class="icon-button not-same-pressed compose-toolbar-button svelte-6ilccr">
	<svg class="icon-button-svg " style="" aria-hidden="true" aria-label="">
	<use xlink:href="/icons.svg#fa-exclamation-triangle"></use>
	</svg>
	</button>
	</div>
	<input type="file" multiple=""
	accept=".3gp,.aac,.flac,.gif,.jpeg,.jpg,.m4a,.m4v,.mov,.mp3,.mp4,.oga,.ogg,.opus,.png,.wav,.webm,.wma,audio/3gpp,audio/aac,audio/flac,audio/m4a,audio/mp3,audio/mp4,audio/mpeg,audio/ogg,audio/wav,audio/wave,audio/webm,audio/x-aac,audio/x-m4a,audio/x-mp4,audio/x-pn-wave,audio/x-wav,image/gif,image/jpeg,image/png,video/mp4,video/ogg,video/quicktime,video/webm,video/x-ms-asf"
	style="display: none;"></div>
	<span class="length-indicator svelte-rucd90" aria-label="500 characters remaining"
	style="grid-area: length / length / length / length; place-self: center right;">500</span>
	<!---->
	<!----></div>
	</file-drop>

	<div>
	Same emoji, different context: <span class="inline-emoji">🤗</span>
	</div>

	</body>
	</html>