<div class="textarea-wrapper">
  <textarea id="symbol-input" aria-label="Symbol Input" placeholder="Symbols will appear here..."></textarea>
</div>

<div class="keypad" id="keypad-container">
  <!-- Row 1: Math & Symbols -->
  <div class="row">
    <button class="key" data-char="×" aria-label="Multiplication Sign">×</button>
    <button class="key" data-char="⨁" aria-label="Circled Plus">⨁</button>
    <button class="key" data-char="⨂" aria-label="Circled Times">⨂</button>
    <button class="key" data-char="→" aria-label="Rightwards Arrow">→</button>
    <button class="key" data-char="∈" aria-label="Element Of">∈</button>
    <button class="key" data-char="∉" aria-label="Not An Element Of">∉</button>
    <button class="key" data-char="⊂" aria-label="Subset Of">⊂</button>
    <button class="key" data-char="⚲" aria-label="Neptune">⚲</button>
    <button class="key" data-char="𖤘" aria-label="Black Heart Suit">𖤘</button>
  </div>

  <!-- Row 2: Music (Full Width) -->
  <div class="row">
    <button class="key key-full" data-char="𝄃𝄃𝄂𝄀𝄁𝄃𝄂" aria-label="Music Symbols">𝄃𝄃𝄂𝄀𝄁𝄃𝄂</button>
  </div>

  <!-- Row 3: People Emojis -->
  <div class="row">
    <button class="key" data-char="👨" aria-label="Man">👨</button>
    <button class="key" data-char="👩" aria-label="Woman">👩</button>
    <button class="key" data-char="👴" aria-label="Old Man">👴</button>
    <button class="key" data-char="👵" aria-label="Old Woman">👵</button>
    <button class="key" data-char="👶" aria-label="Baby">👶</button>
    <button class="key" data-char="👧" aria-label="Girl">👧</button>
    <button class="key" data-char="👦" aria-label="Boy">👦</button>
    <button class="key" data-char="👮" aria-label="Police Officer">👮</button>
    <button class="key" data-char="👷" aria-label="Construction Worker">👷</button>
  </div>

  <!-- Row 4: Locks & Chains -->
  <div class="row">
    <button class="key" data-char="🔒" aria-label="Locked">🔒</button>
    <button class="key" data-char="🔓" aria-label="Unlocked">🔓</button>
    <button class="key" data-char="🔑" aria-label="Key">🔑</button>
    <button class="key" data-char="🔐" aria-label="Locked With Key">🔐</button>
    <button class="key" data-char="⭔" aria-label="Chess Pawn">⭔</button>
    <button class="key" data-char="⛓" aria-label="Chains">⛓</button>
  </div>

  <!-- Row 5: Action -->
  <div class="row">
    <button id="construct-btn" class="key key-construct" aria-label="Construct and Validate">Construct!</button>
  </div>
</div>