privateboard 0.1.0

package/public/avatars/socrates.svg

@@ -0,0 +1,187 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 48 56" shape-rendering="crispEdges">
+  <!-- 48×52 head-only · Socrates · rounded face (chamfered top corners
+       + tapered chin), bald scalp + laurel wreath + bushy gray brows
+       + cascading white beard + small neck stub.
+       Palettes:
+         skin    #FFE5C5 · #FFCFA2 · #F2B585 · #D69570 · #A8704A · #5A3520
+         beard   #FFFFFF · #F0EDE5 · #DAD5C8 · #B8B0A0 · #8E8675 · #4D4538
+         laurel  #7CD850 · #5DBE3F · #4DA53D · #2F7A24 · #1A4818 · #0E2A0E
+         berry   #FFE072 · #F2C037 · #C99826 · #7A5A14
+  -->
+
+  <!-- ═══ LAUREL WREATH ═══ -->
+  <!-- top leaves (rising) -->
+  <rect x="22" y="2" width="4" height="1" fill="#1A4818"/>
+  <rect x="22" y="3" width="4" height="1" fill="#2F7A24"/>
+  <rect x="23" y="4" width="2" height="1" fill="#5DBE3F"/>
+  <rect x="16" y="3" width="3" height="1" fill="#1A4818"/>
+  <rect x="15" y="4" width="4" height="1" fill="#2F7A24"/>
+  <rect x="16" y="5" width="3" height="1" fill="#4DA53D"/>
+  <rect x="29" y="3" width="3" height="1" fill="#1A4818"/>
+  <rect x="29" y="4" width="4" height="1" fill="#2F7A24"/>
+  <rect x="29" y="5" width="3" height="1" fill="#4DA53D"/>
+  <rect x="9"  y="5" width="3" height="1" fill="#1A4818"/>
+  <rect x="9"  y="6" width="4" height="1" fill="#2F7A24"/>
+  <rect x="10" y="7" width="3" height="1" fill="#4DA53D"/>
+  <rect x="36" y="5" width="3" height="1" fill="#1A4818"/>
+  <rect x="35" y="6" width="4" height="1" fill="#2F7A24"/>
+  <rect x="35" y="7" width="3" height="1" fill="#4DA53D"/>
+  <!-- laurel circlet band -->
+  <rect x="8"  y="8"  width="32" height="1" fill="#0E2A0E"/>
+  <rect x="7"  y="9"  width="34" height="1" fill="#1A4818"/>
+  <rect x="7"  y="10" width="34" height="2" fill="#2F7A24"/>
+  <rect x="7"  y="12" width="34" height="1" fill="#4DA53D"/>
+  <rect x="9"  y="11" width="3" height="1" fill="#5DBE3F"/>
+  <rect x="14" y="11" width="3" height="1" fill="#7CD850"/>
+  <rect x="20" y="11" width="3" height="1" fill="#5DBE3F"/>
+  <rect x="26" y="11" width="3" height="1" fill="#7CD850"/>
+  <rect x="32" y="11" width="3" height="1" fill="#5DBE3F"/>
+  <!-- berries -->
+  <rect x="13" y="9" width="2" height="2" fill="#7A5A14"/>
+  <rect x="13" y="9" width="2" height="1" fill="#F2C037"/>
+  <rect x="13" y="9" width="1" height="1" fill="#FFE072"/>
+  <rect x="22" y="9" width="2" height="2" fill="#7A5A14"/>
+  <rect x="22" y="9" width="2" height="1" fill="#F2C037"/>
+  <rect x="22" y="9" width="1" height="1" fill="#FFE072"/>
+  <rect x="31" y="9" width="2" height="2" fill="#7A5A14"/>
+  <rect x="31" y="9" width="2" height="1" fill="#F2C037"/>
+  <rect x="31" y="9" width="1" height="1" fill="#FFE072"/>
+
+  <!-- ═══ HEAD · ROUNDED face shape ═══
+       Chamfered corners: top narrows to 24w, then 28w, then full 30w main,
+       then narrows back to 28w, 24w, 18w (chin tip). -->
+
+  <!-- Outline (silhouette pixels for the rounded shape) -->
+  <!-- top corner chamfers -->
+  <rect x="13" y="13" width="22" height="1" fill="#5A3520"/>
+  <rect x="11" y="14" width="2"  height="1" fill="#5A3520"/>
+  <rect x="35" y="14" width="2"  height="1" fill="#5A3520"/>
+  <rect x="9"  y="15" width="2"  height="1" fill="#5A3520"/>
+  <rect x="37" y="15" width="2"  height="1" fill="#5A3520"/>
+  <!-- vertical sides (main face height) -->
+  <rect x="8"  y="16" width="1" height="14" fill="#5A3520"/>
+  <rect x="39" y="16" width="1" height="14" fill="#5A3520"/>
+  <!-- bottom corner chamfers (chin taper) -->
+  <rect x="9"  y="30" width="2" height="1" fill="#5A3520"/>
+  <rect x="37" y="30" width="2" height="1" fill="#5A3520"/>
+  <rect x="11" y="31" width="2" height="1" fill="#5A3520"/>
+  <rect x="35" y="31" width="2" height="1" fill="#5A3520"/>
+  <rect x="13" y="32" width="22" height="1" fill="#5A3520"/>
+
+  <!-- Skin fill (rounded interior) -->
+  <rect x="13" y="13" width="22" height="1" fill="#F2B585"/>
+  <rect x="11" y="14" width="26" height="1" fill="#F2B585"/>
+  <rect x="9"  y="15" width="30" height="1" fill="#F2B585"/>
+  <rect x="9"  y="16" width="30" height="14" fill="#F2B585"/>
+  <rect x="9"  y="30" width="30" height="1" fill="#F2B585"/>
+  <rect x="11" y="31" width="26" height="1" fill="#F2B585"/>
+  <rect x="13" y="32" width="22" height="1" fill="#F2B585"/>
+
+  <!-- Forehead highlight -->
+  <rect x="13" y="13" width="22" height="2" fill="#FFCFA2"/>
+  <rect x="14" y="14" width="20" height="1" fill="#FFE5C5"/>
+  <rect x="15" y="13" width="18" height="1" fill="#FFE5C5"/>
+  <!-- forehead wisdom-furrow -->
+  <rect x="14" y="17" width="20" height="1" fill="#D69570"/>
+  <rect x="13" y="18" width="22" height="1" fill="#D69570" opacity="0.45"/>
+  <!-- temple shadow -->
+  <rect x="9"  y="20" width="2" height="9" fill="#A8704A"/>
+  <rect x="37" y="20" width="2" height="9" fill="#A8704A"/>
+  <!-- cheekbone highlight -->
+  <rect x="11" y="22" width="3" height="3" fill="#FFCFA2"/>
+  <rect x="34" y="22" width="3" height="3" fill="#FFCFA2"/>
+  <!-- chin shadow before beard -->
+  <rect x="11" y="27" width="26" height="2" fill="#D69570"/>
+  <rect x="13" y="29" width="22" height="2" fill="#A8704A"/>
+
+  <!-- ═══ BUSHY GRAY EYEBROWS ═══ -->
+  <rect x="13" y="19" width="9" height="1" fill="#4D4538"/>
+  <rect x="26" y="19" width="9" height="1" fill="#4D4538"/>
+  <rect x="13" y="20" width="9" height="1" fill="#8E8675"/>
+  <rect x="26" y="20" width="9" height="1" fill="#8E8675"/>
+  <rect x="14" y="18" width="1" height="1" fill="#8E8675"/>
+  <rect x="20" y="18" width="1" height="1" fill="#8E8675"/>
+  <rect x="28" y="18" width="1" height="1" fill="#8E8675"/>
+  <rect x="33" y="18" width="1" height="1" fill="#8E8675"/>
+
+  <!-- ═══ EYES ═══ -->
+  <rect x="14" y="21" width="6" height="3" fill="#FFFFFF"/>
+  <rect x="15" y="21" width="4" height="3" fill="#1F1F1F"/>
+  <rect x="15" y="21" width="2" height="2" fill="#3E78C8"/>
+  <rect x="15" y="21" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="14" y="20" width="6" height="1" fill="#5A3520"/>
+  <rect x="28" y="21" width="6" height="3" fill="#FFFFFF"/>
+  <rect x="29" y="21" width="4" height="3" fill="#1F1F1F"/>
+  <rect x="29" y="21" width="2" height="2" fill="#3E78C8"/>
+  <rect x="29" y="21" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="28" y="20" width="6" height="1" fill="#5A3520"/>
+  <!-- crow's feet -->
+  <rect x="13" y="22" width="1" height="1" fill="#A8704A"/>
+  <rect x="34" y="22" width="1" height="1" fill="#A8704A"/>
+
+  <!-- ═══ NOSE ═══ -->
+  <rect x="22" y="20" width="4" height="6" fill="#F2B585"/>
+  <rect x="22" y="20" width="1" height="6" fill="#FFCFA2"/>
+  <rect x="22" y="20" width="1" height="3" fill="#FFE5C5"/>
+  <rect x="25" y="22" width="1" height="4" fill="#D69570"/>
+  <rect x="22" y="26" width="4" height="1" fill="#A8704A"/>
+  <rect x="21" y="26" width="1" height="1" fill="#A8704A"/>
+  <rect x="26" y="26" width="1" height="1" fill="#A8704A"/>
+  <rect x="23" y="26" width="1" height="1" fill="#5A3520"/>
+
+  <!-- ═══ MUSTACHE ═══ -->
+  <rect x="13" y="27" width="9" height="1" fill="#8E8675"/>
+  <rect x="26" y="27" width="9" height="1" fill="#8E8675"/>
+  <rect x="12" y="28" width="11" height="1" fill="#DAD5C8"/>
+  <rect x="25" y="28" width="11" height="1" fill="#DAD5C8"/>
+  <rect x="11" y="29" width="13" height="1" fill="#FFFFFF"/>
+  <rect x="24" y="29" width="13" height="1" fill="#FFFFFF"/>
+  <rect x="10" y="29" width="1" height="2" fill="#DAD5C8"/>
+  <rect x="37" y="29" width="1" height="2" fill="#DAD5C8"/>
+
+  <!-- ═══ BEARD · cascading from chin to bottom ═══ -->
+  <!-- beard outline -->
+  <rect x="9"  y="30" width="1" height="14" fill="#4D4538"/>
+  <rect x="38" y="30" width="1" height="14" fill="#4D4538"/>
+  <!-- beard rounded bottom -->
+  <rect x="11" y="44" width="2" height="1" fill="#4D4538"/>
+  <rect x="35" y="44" width="2" height="1" fill="#4D4538"/>
+  <rect x="13" y="45" width="22" height="1" fill="#4D4538"/>
+  <!-- beard fill -->
+  <rect x="10" y="30" width="28" height="14" fill="#F0EDE5"/>
+  <rect x="13" y="44" width="22" height="1" fill="#F0EDE5"/>
+  <!-- beard top highlight -->
+  <rect x="11" y="30" width="26" height="2" fill="#FFFFFF"/>
+  <!-- mid shadow band -->
+  <rect x="10" y="38" width="28" height="2" fill="#DAD5C8"/>
+  <rect x="10" y="40" width="28" height="2" fill="#B8B0A0"/>
+  <rect x="10" y="42" width="28" height="2" fill="#8E8675"/>
+  <!-- individual beard strand clusters -->
+  <rect x="13" y="32" width="1" height="12" fill="#DAD5C8"/>
+  <rect x="17" y="33" width="1" height="11" fill="#B8B0A0"/>
+  <rect x="20" y="32" width="1" height="12" fill="#DAD5C8"/>
+  <rect x="24" y="33" width="1" height="11" fill="#B8B0A0"/>
+  <rect x="27" y="32" width="1" height="12" fill="#DAD5C8"/>
+  <rect x="31" y="33" width="1" height="11" fill="#B8B0A0"/>
+  <rect x="34" y="32" width="1" height="12" fill="#DAD5C8"/>
+  <!-- highlight strands (lighter wisps) -->
+  <rect x="15" y="31" width="1" height="3" fill="#FFFFFF"/>
+  <rect x="22" y="31" width="1" height="3" fill="#FFFFFF"/>
+  <rect x="29" y="31" width="1" height="3" fill="#FFFFFF"/>
+
+  <!-- ═══ NECK STUB · skin showing under beard at the very bottom ═══ -->
+  <rect x="20" y="46" width="8" height="3" fill="#F2B585"/>
+  <rect x="20" y="46" width="8" height="1" fill="#A8704A"/>
+  <rect x="20" y="46" width="1" height="3" fill="#A8704A"/>
+  <rect x="27" y="46" width="1" height="3" fill="#A8704A"/>
+  <!-- neck shadow -->
+  <rect x="21" y="48" width="6" height="1" fill="#D69570"/>
+
+  <!-- sparkles -->
+  <rect x="2"  y="14" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="3"  y="13" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="44" y="15" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="45" y="14" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="1"  y="22" width="1" height="1" fill="#FFFFFF" opacity="0.7"/>
+  <rect x="46" y="26" width="1" height="1" fill="#FFFFFF" opacity="0.7"/>
+</svg>

package/public/avatars/user-empathy.svg

@@ -0,0 +1,117 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 48 56" shape-rendering="crispEdges">
+  <!-- 48×52 head-only · User Empathy · rounded face, auburn curls,
+       warm green eyes with lashes, big smile, neck stub.
+       skin    #FFE5C5 · #FFCFA2 · #F2B585 · #D69570 · #A8704A · #5A3520
+       hair    #F5904A · #E26336 · #D44820 · #A8482A · #8E2A12 · #5A1808
+  -->
+
+  <!-- ═══ AUBURN CURLY HAIR · top curl bumps ═══ -->
+  <rect x="11" y="2" width="3" height="1" fill="#5A1808"/>
+  <rect x="16" y="2" width="3" height="1" fill="#5A1808"/>
+  <rect x="22" y="2" width="3" height="1" fill="#5A1808"/>
+  <rect x="28" y="2" width="3" height="1" fill="#5A1808"/>
+  <rect x="33" y="2" width="3" height="1" fill="#5A1808"/>
+  <rect x="9"  y="3" width="30" height="1" fill="#8E2A12"/>
+  <rect x="8"  y="4" width="32" height="2" fill="#A8482A"/>
+  <rect x="7"  y="6" width="34" height="3" fill="#D44820"/>
+  <rect x="7"  y="9" width="34" height="2" fill="#E26336"/>
+  <!-- side curls flowing past head -->
+  <rect x="6"  y="11" width="3" height="20" fill="#D44820"/>
+  <rect x="39" y="11" width="3" height="20" fill="#D44820"/>
+  <rect x="5"  y="14" width="2" height="14" fill="#E26336"/>
+  <rect x="41" y="14" width="2" height="14" fill="#E26336"/>
+  <rect x="4"  y="14" width="1" height="14" fill="#5A1808"/>
+  <rect x="43" y="14" width="1" height="14" fill="#5A1808"/>
+  <rect x="5"  y="28" width="2" height="3" fill="#5A1808"/>
+  <rect x="41" y="28" width="2" height="3" fill="#5A1808"/>
+  <!-- curl bumps (texture along sides) -->
+  <rect x="5"  y="17" width="1" height="2" fill="#F5904A"/>
+  <rect x="42" y="17" width="1" height="2" fill="#F5904A"/>
+  <rect x="5"  y="22" width="1" height="2" fill="#F5904A"/>
+  <rect x="42" y="22" width="1" height="2" fill="#F5904A"/>
+  <!-- highlight strands -->
+  <rect x="13" y="5" width="3" height="1" fill="#F5904A"/>
+  <rect x="22" y="5" width="3" height="1" fill="#F5904A"/>
+  <rect x="32" y="5" width="3" height="1" fill="#F5904A"/>
+  <rect x="11" y="8" width="3" height="1" fill="#F5904A"/>
+
+  <!-- ═══ ROUNDED HEAD ═══ -->
+  <rect x="13" y="11" width="22" height="1" fill="#5A3520"/>
+  <rect x="11" y="12" width="2"  height="1" fill="#5A3520"/>
+  <rect x="35" y="12" width="2"  height="1" fill="#5A3520"/>
+  <rect x="9"  y="13" width="2"  height="1" fill="#5A3520"/>
+  <rect x="37" y="13" width="2"  height="1" fill="#5A3520"/>
+  <rect x="8"  y="14" width="1"  height="16" fill="#5A3520"/>
+  <rect x="39" y="14" width="1"  height="16" fill="#5A3520"/>
+  <rect x="9"  y="30" width="2"  height="1" fill="#5A3520"/>
+  <rect x="37" y="30" width="2"  height="1" fill="#5A3520"/>
+  <rect x="11" y="31" width="2"  height="1" fill="#5A3520"/>
+  <rect x="35" y="31" width="2"  height="1" fill="#5A3520"/>
+  <rect x="13" y="32" width="22" height="1" fill="#5A3520"/>
+  <rect x="13" y="11" width="22" height="1" fill="#F2B585"/>
+  <rect x="11" y="12" width="26" height="1" fill="#F2B585"/>
+  <rect x="9"  y="13" width="30" height="1" fill="#F2B585"/>
+  <rect x="9"  y="14" width="30" height="16" fill="#F2B585"/>
+  <rect x="9"  y="30" width="30" height="1" fill="#F2B585"/>
+  <rect x="11" y="31" width="26" height="1" fill="#F2B585"/>
+  <rect x="13" y="32" width="22" height="1" fill="#F2B585"/>
+  <rect x="13" y="12" width="22" height="2" fill="#FFCFA2"/>
+  <rect x="14" y="13" width="20" height="1" fill="#FFE5C5"/>
+  <rect x="11" y="22" width="4" height="3" fill="#F5A89A" opacity="0.85"/>
+  <rect x="33" y="22" width="4" height="3" fill="#F5A89A" opacity="0.85"/>
+  <rect x="11" y="27" width="26" height="2" fill="#D69570"/>
+  <rect x="13" y="29" width="22" height="2" fill="#A8704A"/>
+
+  <!-- SOFT EYEBROWS -->
+  <rect x="13" y="15" width="7" height="1" fill="#A8482A"/>
+  <rect x="28" y="15" width="7" height="1" fill="#A8482A"/>
+
+  <!-- ═══ EYES · warm green with lashes ═══ -->
+  <rect x="13" y="17" width="7" height="3" fill="#FFFFFF"/>
+  <rect x="28" y="17" width="7" height="3" fill="#FFFFFF"/>
+  <rect x="14" y="17" width="4" height="3" fill="#5A8A4D"/>
+  <rect x="29" y="17" width="4" height="3" fill="#5A8A4D"/>
+  <rect x="15" y="17" width="2" height="2" fill="#1F1F1F"/>
+  <rect x="30" y="17" width="2" height="2" fill="#1F1F1F"/>
+  <rect x="15" y="17" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="30" y="17" width="1" height="1" fill="#FFFFFF"/>
+  <!-- LASHES -->
+  <rect x="12" y="16" width="1" height="1" fill="#5A2818"/>
+  <rect x="15" y="16" width="1" height="1" fill="#5A2818"/>
+  <rect x="18" y="16" width="1" height="1" fill="#5A2818"/>
+  <rect x="20" y="16" width="1" height="1" fill="#5A2818"/>
+  <rect x="27" y="16" width="1" height="1" fill="#5A2818"/>
+  <rect x="30" y="16" width="1" height="1" fill="#5A2818"/>
+  <rect x="33" y="16" width="1" height="1" fill="#5A2818"/>
+  <rect x="35" y="16" width="1" height="1" fill="#5A2818"/>
+  <rect x="13" y="20" width="7" height="1" fill="#A8704A"/>
+  <rect x="28" y="20" width="7" height="1" fill="#A8704A"/>
+
+  <!-- ═══ SMALL NOSE ═══ -->
+  <rect x="22" y="19" width="4" height="5" fill="#F2B585"/>
+  <rect x="22" y="19" width="1" height="5" fill="#FFCFA2"/>
+  <rect x="25" y="21" width="1" height="3" fill="#D69570"/>
+  <rect x="22" y="24" width="4" height="1" fill="#A8704A"/>
+
+  <!-- ═══ WARM SMILE ═══ -->
+  <rect x="14" y="25" width="1" height="1" fill="#A85040"/>
+  <rect x="33" y="25" width="1" height="1" fill="#A85040"/>
+  <rect x="15" y="26" width="18" height="1" fill="#A85040"/>
+  <rect x="16" y="27" width="16" height="1" fill="#D67F5C"/>
+  <rect x="22" y="26" width="4" height="1" fill="#FFFFFF"/>
+
+  <!-- ═══ NECK STUB ═══ -->
+  <rect x="19" y="33" width="10" height="6" fill="#F2B585"/>
+  <rect x="19" y="33" width="10" height="1" fill="#A8704A"/>
+  <rect x="19" y="33" width="1"  height="6" fill="#A8704A"/>
+  <rect x="28" y="33" width="1"  height="6" fill="#A8704A"/>
+  <rect x="20" y="34" width="8"  height="1" fill="#FFCFA2"/>
+  <!-- collar shadow -->
+  <rect x="14" y="39" width="20" height="2" fill="#A8704A" opacity="0.6"/>
+  <rect x="13" y="41" width="22" height="3" fill="#5A3520" opacity="0.4"/>
+
+  <rect x="2"  y="14" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="44" y="15" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="1"  y="25" width="1" height="1" fill="#FFB0B8" opacity="0.7"/>
+  <rect x="46" y="28" width="1" height="1" fill="#FFB0B8" opacity="0.7"/>
+</svg>

package/public/avatars/value-investor.svg

@@ -0,0 +1,117 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 48 56" shape-rendering="crispEdges">
+  <!-- 48×52 head-only · Value Investor · rounded face, salt-and-pepper hair,
+       tortoise-shell glasses, knowing eyes, neck stub.
+       skin    #F2C8A2 · #E8B084 · #D69970 · #B58050 · #6E4830 · #3F2818
+       hair    #FFFFFF · #C8C5BE · #9C9890 · #6E665F · #3A3A3A · #1A1A1A
+       glass   #5A3825 · #3F2A1F · #2A1A12 · highlight #A88566
+  -->
+
+  <!-- ═══ HAIR · salt-and-pepper, neat side-parted ═══ -->
+  <rect x="11" y="3" width="26" height="1" fill="#1A1A1A"/>
+  <rect x="9"  y="4" width="30" height="1" fill="#3A3A3A"/>
+  <rect x="9"  y="5" width="30" height="1" fill="#6E665F"/>
+  <rect x="9"  y="6" width="30" height="2" fill="#9C9890"/>
+  <rect x="9"  y="8" width="30" height="2" fill="#C8C5BE"/>
+  <rect x="9"  y="10" width="2" height="3" fill="#9C9890"/>
+  <rect x="37" y="10" width="2" height="3" fill="#9C9890"/>
+  <rect x="11" y="10" width="2" height="2" fill="#9C9890"/>
+  <rect x="35" y="10" width="2" height="2" fill="#9C9890"/>
+  <rect x="9"  y="3" width="1"  height="10" fill="#1A1A1A"/>
+  <rect x="38" y="3" width="1"  height="10" fill="#1A1A1A"/>
+  <rect x="13" y="4" width="4" height="1" fill="#FFFFFF"/>
+  <rect x="22" y="4" width="5" height="1" fill="#FFFFFF"/>
+  <rect x="11" y="6" width="4" height="1" fill="#FFFFFF"/>
+  <rect x="32" y="5" width="3" height="1" fill="#FFFFFF"/>
+
+  <!-- ═══ ROUNDED HEAD ═══ -->
+  <rect x="13" y="10" width="22" height="1" fill="#3F2818"/>
+  <rect x="11" y="11" width="2"  height="1" fill="#3F2818"/>
+  <rect x="35" y="11" width="2"  height="1" fill="#3F2818"/>
+  <rect x="9"  y="12" width="2"  height="1" fill="#3F2818"/>
+  <rect x="37" y="12" width="2"  height="1" fill="#3F2818"/>
+  <rect x="8"  y="13" width="1"  height="17" fill="#3F2818"/>
+  <rect x="39" y="13" width="1"  height="17" fill="#3F2818"/>
+  <rect x="9"  y="30" width="2"  height="1" fill="#3F2818"/>
+  <rect x="37" y="30" width="2"  height="1" fill="#3F2818"/>
+  <rect x="11" y="31" width="2"  height="1" fill="#3F2818"/>
+  <rect x="35" y="31" width="2"  height="1" fill="#3F2818"/>
+  <rect x="13" y="32" width="22" height="1" fill="#3F2818"/>
+  <rect x="13" y="10" width="22" height="1" fill="#D69970"/>
+  <rect x="11" y="11" width="26" height="1" fill="#D69970"/>
+  <rect x="9"  y="12" width="30" height="1" fill="#D69970"/>
+  <rect x="9"  y="13" width="30" height="17" fill="#D69970"/>
+  <rect x="9"  y="30" width="30" height="1" fill="#D69970"/>
+  <rect x="11" y="31" width="26" height="1" fill="#D69970"/>
+  <rect x="13" y="32" width="22" height="1" fill="#D69970"/>
+  <rect x="13" y="11" width="22" height="2" fill="#E8B084"/>
+  <rect x="14" y="12" width="20" height="1" fill="#F2C8A2"/>
+  <rect x="13" y="14" width="22" height="1" fill="#B58050"/>
+  <rect x="9"  y="18" width="2"  height="9" fill="#6E4830"/>
+  <rect x="37" y="18" width="2"  height="9" fill="#6E4830"/>
+  <rect x="11" y="27" width="26" height="2" fill="#B58050"/>
+  <rect x="13" y="29" width="22" height="2" fill="#6E4830"/>
+
+  <!-- KNOWING DARK BROWS -->
+  <rect x="13" y="14" width="9" height="1" fill="#1A1A1A"/>
+  <rect x="26" y="14" width="9" height="1" fill="#1A1A1A"/>
+  <rect x="13" y="15" width="3" height="1" fill="#3A3A3A"/>
+  <rect x="32" y="15" width="3" height="1" fill="#3A3A3A"/>
+
+  <!-- ═══ TORTOISE-SHELL GLASSES ═══ -->
+  <rect x="11" y="16" width="11" height="1" fill="#2A1A12"/>
+  <rect x="11" y="22" width="11" height="1" fill="#2A1A12"/>
+  <rect x="11" y="17" width="1"  height="5" fill="#2A1A12"/>
+  <rect x="21" y="17" width="1"  height="5" fill="#2A1A12"/>
+  <rect x="26" y="16" width="11" height="1" fill="#2A1A12"/>
+  <rect x="26" y="22" width="11" height="1" fill="#2A1A12"/>
+  <rect x="26" y="17" width="1"  height="5" fill="#2A1A12"/>
+  <rect x="36" y="17" width="1"  height="5" fill="#2A1A12"/>
+  <rect x="12" y="16" width="9" height="1" fill="#3F2A1F"/>
+  <rect x="27" y="16" width="9" height="1" fill="#3F2A1F"/>
+  <rect x="12" y="17" width="1" height="5" fill="#5A3825"/>
+  <rect x="20" y="17" width="1" height="5" fill="#5A3825"/>
+  <rect x="27" y="17" width="1" height="5" fill="#5A3825"/>
+  <rect x="35" y="17" width="1" height="5" fill="#5A3825"/>
+  <rect x="14" y="17" width="2" height="1" fill="#A88566"/>
+  <rect x="29" y="17" width="2" height="1" fill="#A88566"/>
+  <rect x="22" y="18" width="4" height="1" fill="#5A3825"/>
+  <rect x="9"  y="18" width="2" height="1" fill="#2A1A12"/>
+  <rect x="37" y="18" width="2" height="1" fill="#2A1A12"/>
+  <rect x="14" y="18" width="6" height="3" fill="#FFFFFF"/>
+  <rect x="28" y="18" width="6" height="3" fill="#FFFFFF"/>
+  <rect x="15" y="19" width="3" height="2" fill="#1F1F1F"/>
+  <rect x="29" y="19" width="3" height="2" fill="#1F1F1F"/>
+  <rect x="16" y="19" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="30" y="19" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="13" y="22" width="9" height="1" fill="#A8704A" opacity="0.45"/>
+  <rect x="26" y="22" width="9" height="1" fill="#A8704A" opacity="0.45"/>
+
+  <!-- ═══ STRONG NOSE ═══ -->
+  <rect x="22" y="19" width="4" height="6" fill="#D69970"/>
+  <rect x="22" y="19" width="1" height="6" fill="#E8B084"/>
+  <rect x="22" y="19" width="1" height="3" fill="#F2C8A2"/>
+  <rect x="25" y="21" width="1" height="4" fill="#B58050"/>
+  <rect x="22" y="25" width="4" height="1" fill="#6E4830"/>
+  <rect x="21" y="25" width="1" height="1" fill="#6E4830"/>
+  <rect x="26" y="25" width="1" height="1" fill="#6E4830"/>
+
+  <!-- ═══ COMPOSED MOUTH (skeptical downturn) ═══ -->
+  <rect x="18" y="26" width="12" height="1" fill="#3F2818"/>
+  <rect x="17" y="27" width="1"  height="1" fill="#3F2818"/>
+  <rect x="30" y="27" width="1"  height="1" fill="#3F2818"/>
+
+  <!-- ═══ NECK STUB ═══ -->
+  <rect x="19" y="33" width="10" height="6" fill="#D69970"/>
+  <rect x="19" y="33" width="10" height="1" fill="#6E4830"/>
+  <rect x="19" y="33" width="1"  height="6" fill="#6E4830"/>
+  <rect x="28" y="33" width="1"  height="6" fill="#6E4830"/>
+  <rect x="20" y="34" width="8"  height="1" fill="#E8B084"/>
+  <!-- collar shadow at bottom -->
+  <rect x="14" y="39" width="20" height="2" fill="#6E4830" opacity="0.5"/>
+  <rect x="13" y="41" width="22" height="3" fill="#3F2818" opacity="0.35"/>
+
+  <rect x="2"  y="14" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="44" y="15" width="1" height="1" fill="#FFFFFF"/>
+  <rect x="1"  y="25" width="1" height="1" fill="#FFFFFF" opacity="0.7"/>
+  <rect x="46" y="28" width="1" height="1" fill="#FFFFFF" opacity="0.7"/>
+</svg>

package/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges">
+  <rect width="16" height="16" fill="#E8B547"/>
+  <rect x="3"  y="2"  width="2"  height="2" fill="#0A0A0A"/>
+  <rect x="7"  y="2"  width="2"  height="2" fill="#0A0A0A"/>
+  <rect x="11" y="2"  width="2"  height="2" fill="#0A0A0A"/>
+  <rect x="2"  y="4"  width="12" height="2" fill="#0A0A0A"/>
+  <rect x="1"  y="7"  width="14" height="2" fill="#0A0A0A"/>
+  <rect x="2"  y="10" width="1"  height="4" fill="#0A0A0A"/>
+  <rect x="13" y="10" width="1"  height="4" fill="#0A0A0A"/>
+</svg>

package/public/icons.css

@@ -0,0 +1,103 @@
+/* ═══════════════════════════════════════════
+   PIXEL-ART ICON LIBRARY
+   Chunky 8-bit silhouettes, solid fill.
+
+   Usage:
+     <i class="ic ic-settings"></i>
+     <i class="ic ic-pin lg"></i>      (size variants: sm = 12, default = 16, lg = 20)
+     <span class="ic ic-rooms" style="color: var(--lime)"></span>
+
+   Color: inherits from parent's `color` via mask + currentColor.
+   All icons designed on a 16×16 grid, integer-pixel coordinates,
+   shape-rendering: crispEdges keeps them sharp at any scale.
+   ═══════════════════════════════════════════ */
+
+.ic {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: currentColor;
+  -webkit-mask: var(--icon, none) center / contain no-repeat;
+          mask: var(--icon, none) center / contain no-repeat;
+  vertical-align: -0.2em;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.ic.sm  { width: 12px; height: 12px; }
+.ic.lg  { width: 20px; height: 20px; }
+.ic.xl  { width: 24px; height: 24px; }
+
+/* Settings — three horizontal sliders with chunky knobs */
+.ic-settings {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect y='3' width='16' height='2'/><rect x='1' y='1' width='3' height='6'/><rect y='7' width='16' height='2'/><rect x='10' y='5' width='3' height='6'/><rect y='11' width='16' height='2'/><rect x='6' y='9' width='3' height='6'/></svg>");
+}
+
+/* Collapse-right — chevron > pointing toward a vertical bar on the right */
+.ic-collapse-right {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='13' width='2' height='16'/><rect x='4' y='3' width='2' height='2'/><rect x='5' y='4' width='2' height='2'/><rect x='6' y='5' width='2' height='2'/><rect x='7' y='6' width='2' height='4'/><rect x='6' y='9' width='2' height='2'/><rect x='5' y='10' width='2' height='2'/><rect x='4' y='11' width='2' height='2'/></svg>");
+}
+
+/* Expand-right — chevron < pointing away from a right-side bar */
+.ic-expand-right {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='13' width='2' height='16'/><rect x='9' y='3' width='2' height='2'/><rect x='8' y='4' width='2' height='2'/><rect x='7' y='5' width='2' height='2'/><rect x='5' y='6' width='3' height='4'/><rect x='7' y='9' width='2' height='2'/><rect x='8' y='10' width='2' height='2'/><rect x='9' y='11' width='2' height='2'/></svg>");
+}
+
+/* Close (X) — two stepped diagonal strokes crossing */
+.ic-close {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='2' y='2' width='2' height='2'/><rect x='3' y='3' width='2' height='2'/><rect x='4' y='4' width='2' height='2'/><rect x='5' y='5' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/><rect x='7' y='7' width='2' height='2'/><rect x='8' y='8' width='2' height='2'/><rect x='9' y='9' width='2' height='2'/><rect x='10' y='10' width='2' height='2'/><rect x='11' y='11' width='2' height='2'/><rect x='12' y='12' width='2' height='2'/><rect x='12' y='2' width='2' height='2'/><rect x='11' y='3' width='2' height='2'/><rect x='10' y='4' width='2' height='2'/><rect x='9' y='5' width='2' height='2'/><rect x='7' y='7' width='2' height='2'/><rect x='6' y='8' width='2' height='2'/><rect x='5' y='9' width='2' height='2'/><rect x='4' y='10' width='2' height='2'/><rect x='3' y='11' width='2' height='2'/><rect x='2' y='12' width='2' height='2'/></svg>");
+}
+
+/* Plus — chunky cross */
+.ic-plus {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='7' y='2' width='2' height='12'/><rect x='2' y='7' width='12' height='2'/></svg>");
+}
+
+/* Pin — push-pin from above (cap + flange + needle) */
+.ic-pin {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='5' y='1' width='6' height='1'/><rect x='4' y='2' width='8' height='2'/><rect x='5' y='4' width='6' height='1'/><rect x='6' y='5' width='4' height='1'/><rect x='7' y='6' width='2' height='6'/><rect x='7' y='12' width='1' height='3'/></svg>");
+}
+
+/* Rooms — chat bubble with tail */
+.ic-rooms {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M1,1 h14 v9 h-14 z M3,3 h10 v5 h-10 z'/><polygon points='3,10 6,13 6,10'/></svg>");
+}
+
+/* Agents — pixel person silhouette */
+.ic-agents {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='6' y='1' width='4' height='4'/><rect x='3' y='6' width='10' height='3'/><rect x='5' y='9' width='6' height='4'/><rect x='4' y='13' width='3' height='2'/><rect x='9' y='13' width='3' height='2'/></svg>");
+}
+
+/* Chevron-right — single chunky > */
+.ic-chevron-right {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='5' y='3' width='2' height='2'/><rect x='6' y='4' width='2' height='2'/><rect x='7' y='5' width='2' height='2'/><rect x='8' y='6' width='2' height='4'/><rect x='7' y='9' width='2' height='2'/><rect x='6' y='10' width='2' height='2'/><rect x='5' y='11' width='2' height='2'/></svg>");
+}
+
+/* Chevron-down — single chunky v */
+.ic-chevron-down {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='3' y='5' width='2' height='2'/><rect x='4' y='6' width='2' height='2'/><rect x='5' y='7' width='2' height='2'/><rect x='6' y='8' width='4' height='2'/><rect x='9' y='7' width='2' height='2'/><rect x='10' y='6' width='2' height='2'/><rect x='11' y='5' width='2' height='2'/></svg>");
+}
+
+/* Search — pixel magnifier with stepped handle */
+.ic-search {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M2,1 h6 v1 h1 v6 h-1 v1 h-6 v-1 h-1 v-6 h1 z M3,3 h4 v4 h-4 z'/><rect x='8' y='8' width='2' height='2'/><rect x='9' y='9' width='2' height='2'/><rect x='10' y='10' width='2' height='2'/><rect x='11' y='11' width='2' height='2'/><rect x='12' y='12' width='2' height='2'/></svg>");
+}
+
+/* Send — paper plane / arrow flying right */
+.ic-send {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><polygon points='1,3 15,8 1,13 1,9 9,8 1,7'/></svg>");
+}
+
+/* Star — favorite */
+.ic-star {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><polygon points='8,1 10,6 15,6 11,9 13,15 8,12 3,15 5,9 1,6 6,6'/></svg>");
+}
+
+/* Check — confirmation tick */
+.ic-check {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='1' y='8' width='2' height='2'/><rect x='2' y='9' width='2' height='2'/><rect x='3' y='10' width='2' height='2'/><rect x='4' y='11' width='2' height='2'/><rect x='5' y='10' width='2' height='2'/><rect x='6' y='9' width='2' height='2'/><rect x='7' y='8' width='2' height='2'/><rect x='8' y='7' width='2' height='2'/><rect x='9' y='6' width='2' height='2'/><rect x='10' y='5' width='2' height='2'/><rect x='11' y='4' width='2' height='2'/><rect x='12' y='3' width='2' height='2'/></svg>");
+}
+
+/* Arrow-right — simple arrow with tail */
+.ic-arrow-right {
+  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='1' y='7' width='11' height='2'/><rect x='9' y='4' width='2' height='2'/><rect x='10' y='5' width='2' height='2'/><rect x='11' y='6' width='2' height='4'/><rect x='10' y='9' width='2' height='2'/><rect x='9' y='10' width='2' height='2'/></svg>");
+}