diff --git a/components.css b/components.css
new file mode 100644
index 0000000..e8647f2
--- /dev/null
+++ b/components.css
@@ -0,0 +1,729 @@
+/* ====================================================================
+   COMPONENTS — components.css
+   All reusable UI components. Requires tokens.css loaded first.
+   ==================================================================== */
+
+/* ------------------------------------------------------------------
+   1. TYPOGRAPHY UTILITIES
+   ------------------------------------------------------------------ */
+.h1, h1 {
+  font-family: var(--font-heading);
+  font-size:   var(--fs-h1);
+  font-weight: 700;
+  line-height: 1.2;
+  color:       var(--fg-default);
+}
+.h2, h2 {
+  font-family: var(--font-heading);
+  font-size:   var(--fs-h2);
+  font-weight: 700;
+  line-height: 1.25;
+  color:       var(--fg-default);
+}
+.h3, h3 {
+  font-family: var(--font-heading);
+  font-size:   var(--fs-h3);
+  font-weight: 700;
+  line-height: 1.3;
+  color:       var(--fg-default);
+}
+.h4, h4 {
+  font-family: var(--font-heading);
+  font-size:   var(--fs-h4);
+  font-weight: 500;
+  line-height: 1.3;
+  color:       var(--fg-default);
+}
+.p1 {
+  font-family: var(--font-body);
+  font-size:   var(--fs-p1);
+  font-weight: 400;
+  line-height: 1.5;
+  color:       var(--fg-default);
+}
+.p2 {
+  font-family: var(--font-body);
+  font-size:   var(--fs-p2);
+  font-weight: 400;
+  line-height: 1.5;
+  color:       var(--fg-default);
+}
+.p3 {
+  font-family: var(--font-body);
+  font-size:   var(--fs-p3);
+  font-weight: 400;
+  line-height: 1.5;
+  color:       var(--fg-default);
+}
+.caption {
+  font-family: var(--font-body);
+  font-size:   var(--fs-caption);
+  font-weight: 400;
+  line-height: 1.4;
+  color:       var(--fg-default-muted);
+}
+
+/* ------------------------------------------------------------------
+   2. BUTTONS
+   ------------------------------------------------------------------ */
+.btn {
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  gap:             var(--padding-xs);
+  font-family:     var(--font-body);
+  font-size:       var(--fs-p3);
+  font-weight:     600;
+  border-radius:   var(--radii-sm);
+  padding:         6px var(--padding-sm);
+  cursor:          pointer;
+  border:          none;
+  transition:      background 0.15s var(--ease),
+                   color 0.15s var(--ease),
+                   outline 0.1s var(--ease);
+  white-space:     nowrap;
+  text-decoration: none;
+}
+
+/* Primary */
+.btn--primary {
+  background:  var(--bg-secondary);
+  color:       var(--fg-default);
+  border:      4px solid var(--border-default);
+}
+.btn--primary:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border-default);
+}
+.btn--primary:active {
+  background: var(--bg-secondary);
+  color:       var(--fg-default-muted);
+  border-color: var(--border-default);
+}
+.btn--primary:focus-visible {
+  outline:        3px solid var(--fg-blue-darker);
+  outline-offset: 2px;
+}
+
+/* Secondary (ghost, no border) */
+.btn--secondary {
+  background:  transparent;
+  color:       var(--fg-default-muted);
+  border:      2px solid transparent;
+}
+.btn--secondary:hover {
+  background: rgba(255,255,255,0.06);
+  color:      var(--fg-default);
+}
+.btn--secondary:active {
+  background: rgba(255,255,255,0.04);
+  color:      var(--fg-default-muted);
+}
+.btn--secondary:focus-visible {
+  outline:        3px solid var(--fg-blue-darker);
+  outline-offset: 2px;
+}
+
+/* Outlined */
+.btn--outlined {
+  background:  var(--bg-primary);
+  color:       var(--fg-default);
+  border:      2px solid var(--border-default);
+}
+.btn--outlined:hover {
+  background: color-mix(in srgb, var(--bg-primary) 85%, white 15%);
+}
+.btn--outlined:active {
+  color:  var(--fg-default-muted);
+}
+.btn--outlined:focus-visible {
+  outline:        3px solid var(--fg-blue-darker);
+  outline-offset: 2px;
+}
+
+/* Icon-only button */
+.icon-btn {
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  width:           32px;
+  height:          32px;
+  padding:         0;
+  background:      transparent;
+  border:          none;
+  border-radius:   var(--radii-xs);
+  color:           var(--fg-default-muted);
+  cursor:          pointer;
+  flex-shrink:     0;
+  transition:      background 0.15s var(--ease), color 0.15s var(--ease);
+}
+.icon-btn:hover   { background: rgba(255,255,255,0.08); color: var(--fg-default); }
+.icon-btn:active  { background: rgba(255,255,255,0.04); }
+.icon-btn:focus-visible {
+  outline:        3px solid var(--fg-blue-darker);
+  outline-offset: 2px;
+}
+.icon-btn svg { display: block; }
+
+/* ------------------------------------------------------------------
+   3. DIVIDER
+   ------------------------------------------------------------------ */
+.form-divider {
+  border: none;
+  border-top: 1px solid var(--border-default);
+  margin: var(--padding-sm) 0;
+}
+
+.form-privacy-note {
+  display:     flex;
+  align-items: center;
+  gap:         var(--gap-xs);
+  color:       var(--fg-default-muted);
+  margin:      0;
+}
+
+.form-section--public {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--gap-md);
+}
+
+.form-section--private {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--gap-md);
+  background:     var(--bg-tertiary);
+  border-radius:  var(--radii-sm);
+  padding:        var(--padding-xs);
+}
+
+/* ------------------------------------------------------------------
+   4. INPUT FIELD COMPONENT
+   ------------------------------------------------------------------ */
+.input-field {
+  display:        flex;
+  flex-direction: column;
+  gap:            4px;
+  width:          100%;
+}
+
+.input-field__label {
+  font-family: var(--font-heading);
+  font-size:   var(--fs-h4);
+  font-weight: 500;
+  color:       var(--fg-default);
+  line-height: 1.3;
+}
+
+.input-field__caption {
+  font-family: var(--font-body);
+  font-size:   var(--fs-caption);
+  font-weight: 400;
+  color:       var(--fg-default-muted);
+  line-height: 1.4;
+}
+
+/* Wrapper holds icon + input */
+.input-field__wrapper {
+  position: relative;
+  width:     100%;
+}
+
+/* Icon positioned inside the wrapper */
+.input-field__icon {
+  position:    absolute;
+  left:        10px;
+  top:         50%;
+  transform:   translateY(-50%);
+  display:     flex;
+  align-items: center;
+  color:       var(--fg-default-muted);
+  pointer-events: none;
+  z-index:     1;
+}
+
+/* The actual input / select / textarea */
+.input-field__input {
+  width:         100%;
+  height:        36px;
+  padding:       0 var(--padding-xs);
+  background:    var(--bg-primary);
+  color:         var(--fg-default);
+  border:        1px solid var(--bg-secondary);
+  border-radius: var(--radii-xs);
+  font-family:   var(--font-body);
+  font-size:     var(--fs-p3);
+  font-weight:   400;
+  appearance:    none;
+  -webkit-appearance: none;
+  transition:    background 0.15s var(--ease), border-color 0.15s var(--ease);
+  box-sizing:    border-box;
+}
+
+/* Icon variant — extra left padding so text doesn't overlap icon */
+.input-field__wrapper--icon .input-field__input {
+  padding-left: 32px;
+}
+
+/* Active / focus */
+.input-field__input:focus {
+  outline:      none;
+  background:   var(--bg-primary);
+  border-color: var(--fg-blue-darker);
+  border-width: 2px;
+}
+.input-field__input:focus-visible {
+  outline: none;
+  border-color: var(--fg-blue-darker);
+  border-width: 2px;
+}
+
+/* Disabled */
+.input-field__input:disabled {
+  background:  var(--bg-primary);
+  color:       var(--fg-default-muted);
+  border-color: transparent;
+  cursor:       not-allowed;
+}
+
+/* Error / required-but-empty */
+.input-field__input--error,
+.input-field__input--error:focus,
+.input-field__input--error:focus-visible {
+  border-color: var(--fg-red-bright) !important;
+  border-width: 2px;
+}
+.input-field--error .input-field__label::after {
+  content: ' *';
+  color:   var(--fg-red-bright);
+}
+
+/* Textarea variant */
+.input-field__input--textarea {
+  height:     auto;
+  min-height: 72px;
+  padding:    var(--padding-xs);
+  resize:     vertical;
+  line-height: 1.5;
+}
+
+/* Select variant */
+/* ------------------------------------------------------------------
+   CUSTOM SELECT DROPDOWN
+   ------------------------------------------------------------------ */
+.custom-select {
+  position: relative;
+}
+
+.custom-select__trigger {
+  /* Button reset — override UA styles */
+  -webkit-appearance: none;
+  appearance:         none;
+  background:         var(--bg-primary);
+  border:             1px solid var(--bg-secondary);
+  border-radius:      var(--radii-xs);
+  color:              var(--fg-default-muted);
+  font-family:        var(--font-body);
+  font-size:          var(--fs-p3);
+  font-weight:        400;
+  height:             36px;
+  padding:            0 var(--padding-xs);
+  box-sizing:         border-box;
+  /* Layout */
+  display:            flex;
+  align-items:        center;
+  justify-content:    space-between;
+  cursor:             pointer;
+  text-align:         left;
+  width:              100%;
+  transition:         background 0.15s var(--ease), border-color 0.15s var(--ease);
+}
+
+.custom-select__trigger .custom-select__value {
+  color:     var(--fg-default-muted);
+  flex:      1;
+  min-width: 0;
+  overflow:  hidden;
+  text-overflow: ellipsis;
+  white-space:   nowrap;
+}
+
+.custom-select__trigger.has-value .custom-select__value {
+  color: var(--fg-default);
+}
+
+.custom-select__icon {
+  flex-shrink: 0;
+  margin-left: var(--padding-xs);
+  color:       var(--fg-default-muted);
+  font-size:   1rem;
+  transition:  transform 0.2s var(--ease);
+}
+
+.custom-select.is-open .custom-select__icon {
+  transform: rotate(180deg);
+}
+
+.custom-select__list {
+  position:   fixed;        /* escapes overflow:hidden on feedback-box */
+  z-index:    500;
+  background: var(--bg-secondary);
+  border:     4px solid var(--bg-primary);
+  border-radius: var(--radii-sm);
+  padding:    var(--padding-xs) 0;
+  margin:     0;
+  list-style: none;
+  overflow:   hidden;
+  min-width:  200px;
+}
+
+.custom-select__list[hidden] { display: none; }
+
+.custom-select__option {
+  padding:    var(--padding-xs) var(--padding-sm);
+  cursor:     pointer;
+  font-size:  var(--text-p3-size);
+  font-family: var(--text-p3-family);
+  color:      var(--fg-default);
+  transition: background 0.15s;
+}
+
+.custom-select__option:hover,
+.custom-select__option:focus {
+  background: var(--bg-tertiary);
+  outline:    none;
+}
+
+.custom-select__option[aria-selected="true"] {
+  color: var(--fg-default);
+  background: var(--bg-tertiary);
+}
+
+/* ------------------------------------------------------------------
+   4b. Legacy native select (kept for fallback) ← was 4
+   ------------------------------------------------------------------ */
+.input-field__input--select {
+  cursor:            pointer;
+  appearance:        none;
+  -webkit-appearance: none;
+  padding-right:     2rem;
+}
+
+.input-field__wrapper--select {
+  position: relative;
+}
+
+.input-field__select-icon {
+  position:       absolute;
+  right:          var(--padding-xs);
+  top:            50%;
+  transform:      translateY(-50%);
+  pointer-events: none;
+  color:          var(--fg-default-muted);
+  font-size:      1rem;
+}
+
+/* Placeholder */
+.input-field__input::placeholder {
+  color:   var(--fg-default-muted);
+  opacity: 1;
+}
+
+/* ------------------------------------------------------------------
+   5. CONTACT CHIPS
+   ------------------------------------------------------------------ */
+.contact-chips {
+  display:   flex;
+  flex-wrap: wrap;
+  gap:       var(--padding-xs);
+  margin-top: 4px;
+}
+
+.contact-chip {
+  display:       inline-flex;
+  align-items:   center;
+  gap:           var(--gap-xs);
+  padding:       4px 10px;
+  background:    var(--bg-primary);
+  color:         var(--fg-default-muted);
+  border:        1px solid var(--border-default);
+  border-radius: var(--radii-lg);
+  font-family:   var(--font-body);
+  font-size:     var(--fs-p3);
+  font-weight:   600;
+  cursor:        pointer;
+  transition:    background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
+  user-select:   none;
+}
+
+.contact-chip:hover {
+  background: var(--bg-secondary);
+  color:      var(--fg-default);
+}
+
+.contact-chip.is-selected {
+  background:   var(--bg-secondary);
+  color:        var(--fg-default);
+  border-color: var(--fg-default-muted);
+}
+
+.contact-chip:focus-visible {
+  outline:        3px solid var(--fg-blue-darker);
+  outline-offset: 2px;
+}
+
+.contact-inputs {
+  display:        flex;
+  flex-direction: column;
+  gap:            6px;
+  margin-top:     6px;
+}
+
+/* Dynamic contact input rows */
+.contact-input-row {
+  width: 100%;
+}
+
+/* ------------------------------------------------------------------
+   6. FEEDBACK PANEL (SHELL)
+   ------------------------------------------------------------------ */
+.feedback-panel {
+  position:   fixed;
+  top:        0;
+  right:      0;
+  height:     100vh;
+  width:      var(--panel-w);
+  display:    block;
+  z-index:    100;
+  pointer-events: none;
+}
+
+.feedback-panel.is-open {
+  pointer-events: auto;
+}
+
+/* Single box fills the panel */
+.feedback-box {
+  position:       absolute;
+  top:            var(--padding-md);
+  right:          var(--padding-md);
+  bottom:         var(--padding-md);
+  left:           0;
+  display:        flex;
+  flex-direction: column;
+  background:     var(--bg-secondary);
+  border:         4px solid var(--bg-primary);
+  border-radius:  var(--radii-md);
+  padding:        var(--padding-md);
+  overflow:       hidden;
+  transform:      translateX(calc(100% + var(--padding-md)));
+  opacity:        0;
+  transition:     transform 0.35s var(--ease), opacity 0.25s var(--ease);
+}
+
+.feedback-panel.is-open .feedback-box:not([hidden]) {
+  transform: translateX(0);
+  opacity:   1;
+}
+
+.feedback-box[hidden] {
+  display: none !important;
+}
+
+#moreVariant {
+  background: var(--bg-primary);
+  border-color: var(--bg-secondary);
+}
+
+#viewVariant {
+  bottom:     auto;
+  min-height: 300px;
+}
+
+/* ── Action Bar ── */
+.actionBar {
+  display:         flex;
+  align-items:     flex-start;
+  justify-content: space-between;
+  padding:         var(--padding-xs) 0;
+}
+
+.actionBar__title-group {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--gap-xs);
+}
+
+.actionBar__desc {
+  color: var(--fg-default-muted);
+  margin: 0;
+  flex-shrink:     0;
+}
+
+.actionBar--bordered {
+  border-bottom: 1px solid var(--bg-tertiary);
+  margin-bottom: var(--padding-xs);
+}
+
+/* ── Content Bar ── */
+.contentBar {
+  flex:           1;
+  overflow-y:     auto;
+  padding:        var(--padding-xs) 0 120px; /* extra bottom room so selects open downward */
+  display:        flex;
+  flex-direction: column;
+  gap:        var(--padding-sm);
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-tertiary) transparent;
+}
+
+.contentBar::-webkit-scrollbar {
+  width: 4px;
+}
+.contentBar::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 99px;
+}
+
+/* ── Footer Bar ── */
+.footerBar {
+  display:         flex;
+  align-items:     center;
+  justify-content: flex-end;
+  gap:             4px;
+  padding-top:     var(--padding-xs);
+  flex-shrink:     0;
+  border-top:      1px solid var(--bg-tertiary);
+  margin-top:      var(--padding-xs);
+}
+
+.footerBar--space-between,
+.footerBar--between {
+  justify-content: space-between;
+}
+
+.footerBar--end {
+  justify-content: flex-end;
+}
+
+/* ── Private label ── */
+.form-private {
+  display:     flex;
+  align-items: center;
+  gap:         6px;
+  padding:     var(--padding-xs);
+  background:  rgba(255,255,255,0.04);
+  border-radius: var(--radii-xs);
+  color:       var(--fg-default-muted);
+}
+
+/* ── View variant fields ── */
+.view-field {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--gap-xs);
+}
+
+.view-label {
+  font-family:    var(--font-body);
+  font-size:      var(--fs-caption);
+  font-weight:    400;
+  color:          var(--fg-default-muted);
+  line-height:    1.2;
+}
+
+.feedback-quote-box {
+  border:           1px solid var(--border-default);
+  border-radius:    var(--radii-sm, 6px);
+  padding:          var(--padding-xs);
+}
+
+.rel-chip {
+  display:          inline-block;
+  width:            fit-content;
+  padding:          2px 8px;
+  border-radius:    var(--radii-sm, 6px);
+  border:           1px solid;
+  font-family:      var(--font-body);
+  font-size:        var(--fs-p3);
+  color:            var(--fg-default);
+  line-height:      1.5;
+}
+
+.view-value {
+  font-family: var(--font-body);
+  font-size:   var(--fs-p1);
+  color:       var(--fg-default);
+  line-height: 1.5;
+}
+
+/* ── Confirmation variant ── */
+.confirm-title {
+  font-family: var(--font-heading);
+  font-size:   var(--fs-h2);
+  font-weight: 700;
+  color:       var(--fg-default);
+  margin-bottom: var(--padding-xs);
+}
+
+.confirm-desc {
+  font-family: var(--font-body);
+  font-size:   var(--fs-p2);
+  color:       var(--fg-default-muted);
+  line-height: 1.6;
+}
+
+/* ── More variant ── */
+.more-section {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--padding-xs);
+}
+
+.more-section__body {
+  font-family: var(--font-body);
+  font-size:   var(--fs-p2);
+  color:       var(--fg-default-muted);
+  line-height: 1.7;
+}
+
+.more-photos {
+  display:   flex;
+  flex-wrap: wrap;
+  gap:       var(--padding-sm);
+  padding-top: var(--padding-xs);
+  align-items: flex-end;
+}
+
+.more-photo-circle {
+  border-radius: 50%;
+  background:    var(--bg-tertiary);
+  flex-shrink:   0;
+  position:      relative;
+  overflow:      hidden;
+}
+.more-photo-circle img {
+  width:             100%;
+  height:            100%;
+  object-fit:        cover;
+  display:           block;
+  image-orientation: from-image;
+}
+.more-photo-circle::after {
+  content:  '';
+  position: absolute;
+  inset:    0;
+  border-radius: 50%;
+  border:   2px solid rgba(255,255,255,0.08);
+}
+
+/* Scroll hint gradient at bottom of panel */
+.scroll-hint {
+  position:   sticky;
+  bottom:     0;
+  height:     32px;
+  background: linear-gradient(to top, var(--bg-secondary), transparent);
+  pointer-events: none;
+  flex-shrink: 0;
+  margin-top: -32px;
+}
diff --git a/images/photo1.jpeg b/images/photo1.jpeg
new file mode 100644
index 0000000..172432e
Binary files /dev/null and b/images/photo1.jpeg differ
diff --git a/images/photo2.jpeg b/images/photo2.jpeg
new file mode 100644
index 0000000..616bc80
Binary files /dev/null and b/images/photo2.jpeg differ
diff --git a/images/photo3.jpeg b/images/photo3.jpeg
new file mode 100644
index 0000000..5aa5905
Binary files /dev/null and b/images/photo3.jpeg differ
diff --git a/images/photo4.png b/images/photo4.png
new file mode 100644
index 0000000..c6b3203
Binary files /dev/null and b/images/photo4.png differ
diff --git a/images/photo5.png b/images/photo5.png
new file mode 100644
index 0000000..34e27b7
Binary files /dev/null and b/images/photo5.png differ
diff --git a/images/photo6.png b/images/photo6.png
new file mode 100644
index 0000000..46fc7d5
Binary files /dev/null and b/images/photo6.png differ
diff --git a/images/photo7.png b/images/photo7.png
new file mode 100644
index 0000000..33cba19
Binary files /dev/null and b/images/photo7.png differ
diff --git a/images/photo8.png b/images/photo8.png
new file mode 100644
index 0000000..34fd299
Binary files /dev/null and b/images/photo8.png differ
diff --git a/images/photo9.png b/images/photo9.png
new file mode 100644
index 0000000..d1e9825
Binary files /dev/null and b/images/photo9.png differ
diff --git a/index.html b/index.html
index eecf626..76f8657 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,12 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 
+  <!-- Phosphor Icons -->
+  <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
+
+  <!-- Design system (load order matters: tokens → components → layout) -->
+  <link rel="stylesheet" href="tokens.css" />
+  <link rel="stylesheet" href="components.css" />
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
@@ -30,19 +36,20 @@
     <!-- MIDDLE CONTENT (20vh) -->
     <section class="middle-content" id="middleContent">
       <div class="middle-content__inner">
-        <h1 class="h1">Golden Github Seeds</h1>
+        <h1 class="h1">The people who made GitHub home.</h1>
         <p class="p1 middle-content__desc">
-          A garden of hubbers, I had the joy of working and connecting with
-          while I worked here. Each dot is someone who left a mark on my
-          experience here.
+          A field of dots, each one a Hubber who made my time at GitHub worth every moment.
         </p>
-        <button class="btn btn--outlined" id="openFeedbackBtn">
-          Log some words
-          <!-- Phosphor ArrowBendUpRight -->
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
-            <path d="M229.66,109.66l-48,48a8,8,0,0,1-11.32-11.32L204.69,112H128c-26.47,0-48,21.53-48,48v32a8,8,0,0,1-16,0V160c0-35.29,28.71-64,64-64h76.69L170.34,61.66a8,8,0,0,1,11.32-11.32l48,48A8,8,0,0,1,229.66,109.66Z"/>
-          </svg>
-        </button>
+        <div class="middle-content__actions">
+          <button class="btn btn--outlined" id="openFeedbackBtn" type="button">
+            Log some words
+            <!-- Phosphor ArrowBendUpRight -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
+              <path d="M229.66,109.66l-48,48a8,8,0,0,1-11.32-11.32L204.69,112H128c-26.47,0-48,21.53-48,48v32a8,8,0,0,1-16,0V160c0-35.29,28.71-64,64-64h76.69L170.34,61.66a8,8,0,0,1,11.32-11.32l48,48A8,8,0,0,1,229.66,109.66Z"/>
+            </svg>
+          </button>
+          <button class="btn btn--secondary" id="openMoreBtn" type="button">More</button>
+        </div>
       </div>
     </section>
 
@@ -51,89 +58,153 @@ <h1 class="h1">Golden Github Seeds</h1>
 
   </div>
 
+  <!-- Dot hover tooltip -->
+  <div id="dotTooltip" class="dot-tooltip" hidden aria-hidden="true">
+    <span class="dot-tooltip__name p2" id="tt-name"></span>
+    <span class="dot-tooltip__role caption" id="tt-role"></span>
+  </div>
+
+  <div id="yourDotBox" class="your-dot-box" hidden aria-live="polite">
+    <span class="p3">This is your dot</span>
+  </div>
+
+  <!-- Search widget -->
+  <div class="dot-search" id="dotSearch" role="search">
+    <label class="dot-search__label" for="dotSearchInput">Find someone's dot</label>
+    <div class="dot-search__input-wrapper">
+      <!-- Phosphor MagnifyingGlass -->
+      <svg class="dot-search__icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
+        <path d="M229.66,218.34l-50.07-50.07a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.31ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/>
+      </svg>
+      <input class="dot-search__input" id="dotSearchInput" type="search" placeholder="Enter name or role…" autocomplete="off" spellcheck="false" />
+    </div>
+  </div>
+
   <!-- ============================================================
        FEEDBACK PANEL — fixed right side, slides in
        ============================================================ -->
   <aside class="feedback-panel" id="feedbackPanel" aria-label="Feedback" aria-hidden="true">
 
-    <!-- ── EDIT VARIANT ── -->
+    <!-- ────────────────────────────────────────────────
+         EDIT VARIANT
+    ──────────────────────────────────────────────── -->
     <div class="feedback-box" id="editVariant" role="dialog" aria-modal="true" aria-labelledby="editTitle" hidden>
+
+      <!-- Action Bar -->
       <div class="actionBar actionBar--bordered">
-        <h3 class="h3" id="editTitle">Feedback</h3>
+        <div class="actionBar__title-group">
+          <h3 class="h3" id="editTitle">Leave your mark</h3>
+          <p class="p2 actionBar__desc">Create your dot and share what it was like working with Devyani. Your feedback shapes how she grows.</p>
+        </div>
         <button class="icon-btn" id="closeEditBtn" aria-label="Close">
-          <!-- Phosphor X -->
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
             <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>
           </svg>
         </button>
       </div>
 
+      <!-- Content Bar -->
       <div class="contentBar" id="editScrollBody">
-        <form id="feedbackForm" novalidate>
-          <div class="form-group">
-            <label class="form-label h3" for="inp-name">Name</label>
-            <input class="form-input" type="text" id="inp-name" name="name" autocomplete="name" />
-          </div>
-
-          <div class="form-group">
-            <label class="form-label h3" for="inp-role">Role</label>
-            <span class="form-hint caption">Your role at Github</span>
-            <input class="form-input" type="text" id="inp-role" name="role" />
-          </div>
+        <form id="feedbackForm" novalidate style="display:flex;flex-direction:column;gap:var(--gap-sm);">
+
+          <!-- Public fields container -->
+          <div class="form-section--public">
+
+            <!-- Field 1: Name -->
+            <div class="input-field">
+              <label class="input-field__label" for="inp-name">Name</label>
+              <div class="input-field__wrapper">
+                <input class="input-field__input" type="text" id="inp-name" name="name" autocomplete="name" placeholder="Your name" required />
+              </div>
+            </div>
+
+            <!-- Field 2: Role -->
+            <div class="input-field">
+              <label class="input-field__label" for="inp-role">Role</label>
+              <span class="input-field__caption">Your role here</span>
+              <div class="input-field__wrapper">
+                <input class="input-field__input" type="text" id="inp-role" name="role" placeholder="e.g. Senior Designer" required />
+              </div>
+            </div>
+
+            <!-- Field 3: Relationship -->
+            <div class="input-field">
+              <label class="input-field__label" for="inp-relationship">Relationship</label>
+              <span class="input-field__caption">What were you to Devyani?</span>
+              <div class="input-field__wrapper input-field__wrapper--select">
+                <select class="input-field__input input-field__input--select" id="inp-relationship" name="relationship" required>
+                  <option value="" disabled selected>Select relationship…</option>
+                  <option value="Manager/PM">Manager/PM</option>
+                  <option value="Direct Report">Direct Report</option>
+                  <option value="Colleague">Colleague</option>
+                  <option value="Team/Engineer">Team/Engineer</option>
+                  <option value="SF office buddy">SF office buddy</option>
+                </select>
+                <i class="ph ph-caret-down input-field__select-icon" aria-hidden="true"></i>
+              </div>
+            </div>
+
+            <!-- Field 4: Feedback -->
+            <div class="input-field">
+              <label class="input-field__label" for="inp-feedback">How was your experience working with Devyani?</label>
+              <span class="input-field__caption">This could include anything and everything</span>
+              <div class="input-field__wrapper">
+                <textarea class="input-field__input input-field__input--textarea" id="inp-feedback" name="feedback" rows="4" placeholder="Share your experience…" required></textarea>
+              </div>
+            </div>
+
+          </div><!-- /form-section--public -->
+
+          <hr class="form-divider" />
+
+          <!-- Private section container -->
+          <div class="form-section--private">
+
+            <!-- Privacy notice -->
+            <p class="p3 form-privacy-note">
+              All responses below visible to Devyani only
+              <i class="ph ph-lock-simple" aria-hidden="true"></i>
+            </p>
+
+            <!-- Field 5: Things to work on -->
+            <div class="input-field">
+              <label class="input-field__label" for="inp-improve">What are some things she can work on?</label>
+              <div class="input-field__wrapper">
+                <input class="input-field__input" type="text" id="inp-improve" name="improvement" placeholder="Areas for growth…" required />
+              </div>
+            </div>
+
+            <!-- Field 8: Stay in touch — multi-select chips + dynamic inputs -->
+            <div class="input-field">
+              <label class="input-field__label">How can she stay in touch with you?</label>
+              <div class="contact-chips" id="contactChips" role="group" aria-label="Select contact methods">
+                <button type="button" class="contact-chip" data-method="phone"><i class="ph ph-phone"></i>Phone</button>
+                <button type="button" class="contact-chip" data-method="email"><i class="ph ph-envelope-simple"></i>Email</button>
+                <button type="button" class="contact-chip" data-method="linkedin"><i class="ph ph-linkedin-logo"></i>LinkedIn</button>
+                <button type="button" class="contact-chip" data-method="tiktok"><i class="ph ph-music-notes"></i>TikTok? JK!</button>
+              </div>
+              <div class="contact-inputs" id="contactInputs"></div>
+            </div>
+
+          </div><!-- /form-section--private -->
 
-          <div class="form-group">
-            <label class="form-label h3" for="inp-relationship">Relationship</label>
-            <span class="form-hint caption">What were you to Devyani?</span>
-            <select class="form-select" id="inp-relationship" name="relationship">
-              <option value="Manager">Manager</option>
-              <option value="Direct Report">Direct Report</option>
-              <option value="Peer">Peer</option>
-              <option value="Cross-functional Partner">Cross-functional Partner</option>
-              <option value="Mentor">Mentor</option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label class="form-label h3" for="inp-feedback">Your feedback</label>
-            <span class="form-hint caption">You could say anything!</span>
-            <textarea class="form-textarea" id="inp-feedback" name="feedback" rows="5"></textarea>
-          </div>
-
-          <p class="form-private caption">Only Devyani will be able to see answer below!</p>
-
-          <div class="form-group">
-            <label class="form-label h3" for="inp-improve">Things I can work on…</label>
-            <input class="form-input" type="text" id="inp-improve" name="improvement" />
-          </div>
-
-          <div class="form-group">
-            <label class="form-label h3" for="inp-deepdive">I'm early in my career — if there is one topic I should deep dive into, what would it be?</label>
-            <input class="form-input" type="text" id="inp-deepdive" name="deepDive" />
-          </div>
-
-          <div class="form-group">
-            <label class="form-label h3" for="inp-advice">One piece of advice Devyani should keep in mind…</label>
-            <input class="form-input" type="text" id="inp-advice" name="advice" />
-          </div>
-
-          <div class="form-group">
-            <label class="form-label h3" for="inp-touch">How can I stay in touch with you?</label>
-            <input class="form-input" type="text" id="inp-touch" name="stayInTouch" />
-          </div>
         </form>
       </div>
 
-      <!-- scroll hint -->
-      <div class="scroll-hint caption" id="editMoreHint" aria-hidden="true">More</div>
-
+      <!-- Footer Bar -->
       <div class="footerBar footerBar--end">
         <button class="btn btn--primary" id="submitFeedbackBtn" type="button">Submit</button>
       </div>
     </div>
 
-    <!-- ── VIEW VARIANT ── -->
+    <!-- ────────────────────────────────────────────────
+         VIEW VARIANT
+    ──────────────────────────────────────────────── -->
     <div class="feedback-box" id="viewVariant" role="dialog" aria-modal="true" hidden>
-      <div class="actionBar actionBar--bordered actionBar--end">
+
+      <!-- Action Bar -->
+      <div class="actionBar actionBar--bordered">
+        <span class="h3" id="vw-title"></span>
         <button class="icon-btn" id="closeViewBtn" aria-label="Close">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
             <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>
@@ -141,34 +212,34 @@ <h3 class="h3" id="editTitle">Feedback</h3>
         </button>
       </div>
 
+      <!-- Content Bar -->
       <div class="contentBar">
         <div class="view-field">
-          <span class="view-label h3">Name:</span>
-          <span class="view-value p1" id="vw-name"></span>
-        </div>
-        <div class="view-field">
-          <span class="view-label h3">Role:</span>
-          <span class="view-value p1" id="vw-role"></span>
+          <span class="view-label">Role at Github</span>
+          <span class="view-value p2" id="vw-role"></span>
         </div>
         <div class="view-field">
-          <span class="view-label h3">Relationship:</span>
-          <span class="view-value p1" id="vw-relationship"></span>
+          <span class="view-label">Relationship</span>
+          <span class="rel-chip" id="vw-relationship"></span>
         </div>
         <div class="view-field">
-          <span class="view-label h3">Feedback:</span>
-          <span class="view-value p1" id="vw-feedback"></span>
+          <span class="view-label">Feedback</span>
+          <div class="feedback-quote-box">
+            <span class="view-value p1" id="vw-feedback" style="white-space:pre-wrap;"></span>
+          </div>
         </div>
       </div>
 
+      <!-- Footer Bar -->
       <div class="footerBar footerBar--between">
-        <!-- Phosphor ArrowCircleLeft -->
         <button class="icon-btn" id="prevDotBtn" aria-label="Previous feedback">
+          <!-- Phosphor ArrowCircleLeft -->
           <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
             <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H107.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L107.31,120H168A8,8,0,0,1,176,128Z"/>
           </svg>
         </button>
-        <!-- Phosphor ArrowCircleRight -->
         <button class="icon-btn" id="nextDotBtn" aria-label="Next feedback">
+          <!-- Phosphor ArrowCircleRight -->
           <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
             <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm45.66-93.66-32,32a8,8,0,0,1-11.32-11.32L148.69,136H88a8,8,0,0,1,0-16h60.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,173.66,162.34Z"/>
           </svg>
@@ -176,8 +247,12 @@ <h3 class="h3" id="editTitle">Feedback</h3>
       </div>
     </div>
 
-    <!-- ── CONFIRMATION VARIANT ── -->
+    <!-- ────────────────────────────────────────────────
+         CONFIRMATION VARIANT
+    ──────────────────────────────────────────────── -->
     <div class="feedback-box" id="confirmVariant" role="dialog" aria-modal="true" aria-labelledby="confirmTitle" hidden>
+
+      <!-- Action Bar -->
       <div class="actionBar actionBar--bordered">
         <h3 class="h3" id="confirmTitle">Thank you!</h3>
         <button class="icon-btn" id="closeConfirmBtn" aria-label="Close">
@@ -187,18 +262,85 @@ <h3 class="h3" id="confirmTitle">Thank you!</h3>
         </button>
       </div>
 
+      <!-- Content Bar -->
       <div class="contentBar">
         <h4 class="h3">Your dot has been planted!</h4>
-        <p class="p1 confirm-desc">
-          Thank you so much for being a part of my journey and inspiring me.
+        <p class="p2 confirm-desc">
+          GitHub was incredibly inspiring because of people like you.
+          Thank you for being a part of my journey and inspiring me.
           I value our time together and hope we can work again soon. Stay in touch!
         </p>
+
+        <!-- Photo circles (same as More panel) -->
+        <div class="more-photos">
+          <div class="more-photo-circle" style="width:112px;height:112px;" aria-label="GitHub LED sign"><img src="images/photo1.jpeg" alt="GitHub LED sign" /></div>
+          <div class="more-photo-circle" style="width:96px;height:96px;"   aria-label="GitHub Universe event"><img src="images/photo2.jpeg" alt="GitHub Universe event" /></div>
+          <div class="more-photo-circle" style="width:104px;height:104px;" aria-label="Walking through GitHub HQ"><img src="images/photo3.jpeg" alt="Walking through GitHub HQ" /></div>
+          <div class="more-photo-circle" style="width:88px;height:88px;"   aria-label="GitHub bingo night"><img src="images/photo4.png" alt="GitHub bingo night" /></div>
+        </div>
+      </div>
+
+      <!-- Footer Bar -->
+      <div class="footerBar footerBar--end" style="gap:4px;">
+        <button class="btn btn--secondary" id="editFromConfirmBtn" type="button">Edit</button>
+        <button class="btn btn--primary"   id="doneBtn"            type="button">Done</button>
+      </div>
+    </div>
+
+    <!-- ────────────────────────────────────────────────
+         MORE VARIANT
+    ──────────────────────────────────────────────── -->
+    <div class="feedback-box" id="moreVariant" role="dialog" aria-modal="true" aria-labelledby="moreTitle" hidden>
+
+      <!-- Action Bar -->
+      <div class="actionBar actionBar--bordered">
+        <button class="btn btn--primary" id="goBackBtn" type="button" style="gap:var(--gap-xs);">
+          <i class="ph ph-arrow-left" aria-hidden="true"></i>Go Back
+        </button>
+        <button class="icon-btn" id="closeMoreBtn" aria-label="Close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
+            <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>
+          </svg>
+        </button>
       </div>
 
-      <div class="footerBar footerBar--end footerBar--gap">
-        <button class="btn btn--secondary" id="editFromConfirmBtn">Edit</button>
-        <button class="btn btn--primary" id="doneBtn">Done</button>
+      <!-- Content Bar -->
+      <div class="contentBar">
+
+        <!-- Section 1: My experience -->
+        <div class="more-section">
+          <h3 class="h3" id="moreTitle">My experience</h3>
+          <p class="more-section__body">
+            My experience at GitHub was nothing short of inspirational. Remote work was new for me,
+            GitHub was new for me, and working with such a talented and established design team was
+            new for me. Every dot on this page is a person from that chapter, distinct, colorful,
+            and impossible to forget.
+          </p>
+        </div>
+
+        <!-- Section 2: Art inspiration -->
+        <div class="more-section">
+          <h3 class="h3">This art inspiration</h3>
+          <p class="more-section__body">
+            Yayoi Kusama obsessed over dots her entire life. Dots on canvases, on pumpkins, on herself.
+            For Kusama, dots weren't decorations, they were connection, repetition, infinity. She passed
+            away at 97, and I found out on my birthday. That felt like something. Every person I met at
+            GitHub is a dot in my own pattern. This page borrows her logic: the pattern only works
+            because of all of them together.
+          </p>
+        </div>
+
+        <!-- Photo placeholders -->
+        <div class="more-photos">
+          <div class="more-photo-circle" style="width:120px;height:120px;" aria-label="GitHub bingo night"><img src="images/photo5.png" alt="GitHub bingo night" /></div>
+          <div class="more-photo-circle" style="width:108px;height:108px;" aria-label="GitHub Universe event"><img src="images/photo6.png" alt="GitHub Universe event" /></div>
+          <div class="more-photo-circle" style="width:124px;height:124px;" aria-label="DEVYANI LED sign"><img src="images/photo7.png" alt="DEVYANI LED sign" /></div>
+          <div class="more-photo-circle" style="width:104px;height:104px;" aria-label="GitHub HQ entrance"><img src="images/photo8.png" alt="GitHub HQ entrance" /></div>
+          <div class="more-photo-circle" style="width:116px;height:116px;" aria-label="GitHub office"><img src="images/photo9.png" alt="GitHub office" /></div>
+        </div>
+
       </div>
+      <!-- No footer bar on More variant -->
     </div>
 
   </aside>
@@ -209,76 +351,99 @@ <h4 class="h3">Your dot has been planted!</h4>
   <script>
     'use strict';
 
-    /* ----------------------------------------------------------
-       RELATIONSHIP → DOT COLOR GROUP
-    ---------------------------------------------------------- */
+    /* ── Relationship → dot color ── */
     const REL_COLOR = {
-      'Manager':                  'yellow',
-      'Peer':                     'teal',
+      'Manager/PM':                  'yellow',
+      'Colleague':                     'teal',
       'Direct Report':            'green',
-      'Cross-functional Partner': 'red',
-      'Mentor':                   'purple',
+      'Team/Engineer': 'red',
+      'SF office buddy':                   'purple',
     };
 
-    /* ----------------------------------------------------------
+    /* ── Contact method configs ── */
+    const CONTACT_METHODS = {
+      phone: {
+        label: 'Phone',
+        placeholder: '(123) 456-7890',
+        type: 'tel',
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46Z"/></svg>`,
+      },
+      email: {
+        label: 'Email',
+        placeholder: 'example@gmail.com',
+        type: 'email',
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.19V181.81Z"/></svg>`,
+      },
+      linkedin: {
+        label: 'LinkedIn',
+        placeholder: '@devyanijain',
+        type: 'text',
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24ZM96,176a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0ZM88,96a12,12,0,1,1,12-12A12,12,0,0,1,88,96Zm96,80a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140Z"/></svg>`,
+      },
+      tiktok: {
+        label: 'Other',
+        placeholder: 'Enter your handle or link',
+        type: 'text',
+        icon: null,
+      },
+    };
+
+    /* ────────────────────────────────────────────────
        DOT DATA
-       topDots    : yellow (x 2–44%) | teal (x 51–96%)
-       bottomDots : green (x 1–28%) | red (x 32–59%) | purple (x 64–98%)
-       s = submitted (glowing), f = feedback object
-    ---------------------------------------------------------- */
+    ──────────────────────────────────────────────── */
     const topDots = [
-      // ── Yellow ──
+      // Yellow (x 2–44%)
       {id:'y01',c:'yellow',x:3,  y:10,s:false},
-      {id:'y02',c:'yellow',x:11, y:10,s:true, f:{n:'Allie Thu',    r:'Design Director',    rel:'Manager',                  t:'Devyani was an extraordinary designer who elevated every project she touched.'}},
+      {id:'y02',c:'yellow',x:11, y:10,s:true, f:{n:'Allie Thu',   r:'Design Director',    rel:'Manager/PM',                  t:'Devyani was an extraordinary designer who elevated every project she touched.'}},
       {id:'y03',c:'yellow',x:19, y:10,s:false},
       {id:'y04',c:'yellow',x:28, y:10,s:false},
       {id:'y05',c:'yellow',x:8,  y:25,s:false},
-      {id:'y06',c:'yellow',x:17, y:25,s:true, f:{n:'Priya K',      r:'Senior Designer',    rel:'Manager',                  t:'A joy to collaborate with. Creative, meticulous, and always user-first.'}},
+      {id:'y06',c:'yellow',x:17, y:25,s:true, f:{n:'Priya K',     r:'Senior Designer',    rel:'Manager/PM',                  t:'A joy to collaborate with. Creative, meticulous, and always user-first.'}},
       {id:'y07',c:'yellow',x:27, y:25,s:false},
       {id:'y08',c:'yellow',x:36, y:25,s:false},
       {id:'y09',c:'yellow',x:43, y:25,s:false},
       {id:'y10',c:'yellow',x:3,  y:41,s:false},
       {id:'y11',c:'yellow',x:12, y:41,s:false},
-      {id:'y12',c:'yellow',x:23, y:41,s:true, f:{n:'Marco V',      r:'Product Manager',    rel:'Manager',                  t:'Devyani brings incredible cross-functional clarity. A pleasure to work with.'}},
+      {id:'y12',c:'yellow',x:23, y:41,s:true, f:{n:'Marco V',     r:'Product Manager',    rel:'Manager/PM',                  t:'Devyani brings incredible cross-functional clarity. A pleasure to work with.'}},
       {id:'y13',c:'yellow',x:33, y:41,s:false},
       {id:'y14',c:'yellow',x:8,  y:58,s:false},
       {id:'y15',c:'yellow',x:18, y:58,s:false},
       {id:'y16',c:'yellow',x:29, y:58,s:false},
-      {id:'y17',c:'yellow',x:39, y:58,s:true, f:{n:'Jordan L',     r:'Engineering Lead',   rel:'Manager',                  t:'Made design handoffs a breeze. Precise, thoughtful, collaborative.'}},
+      {id:'y17',c:'yellow',x:39, y:58,s:true, f:{n:'Jordan L',    r:'Engineering Lead',   rel:'Manager/PM',                  t:'Made design handoffs a breeze. Precise, thoughtful, collaborative.'}},
       {id:'y18',c:'yellow',x:4,  y:74,s:false},
       {id:'y19',c:'yellow',x:14, y:74,s:false},
       {id:'y20',c:'yellow',x:25, y:74,s:false},
-      {id:'y21',c:'yellow',x:35, y:74,s:true, f:{n:'Sam H',        r:'Designer',           rel:'Manager',                  t:'One of the most growth-oriented designers I have worked with.'}},
+      {id:'y21',c:'yellow',x:35, y:74,s:true, f:{n:'Sam H',       r:'Designer',           rel:'Manager/PM',                  t:'One of the most growth-oriented designers I have worked with.'}},
       {id:'y22',c:'yellow',x:43, y:74,s:false},
-      // ── Teal ──
+      // Teal (x 51–96%)
       {id:'t01',c:'teal',x:53,y:8, s:false},
       {id:'t02',c:'teal',x:62,y:8, s:false},
-      {id:'t03',c:'teal',x:71,y:8, s:true, f:{n:'Kai M',          r:'Design Manager',     rel:'Peer',                     t:'Outstanding design thinking and execution. A collaborative powerhouse.'}},
+      {id:'t03',c:'teal',x:71,y:8, s:true, f:{n:'Kai M',          r:'Design Manager',     rel:'Colleague',                     t:'Outstanding design thinking and execution. A collaborative powerhouse.'}},
       {id:'t04',c:'teal',x:81,y:8, s:false},
       {id:'t05',c:'teal',x:91,y:8, s:false},
       {id:'t06',c:'teal',x:55,y:23,s:false},
       {id:'t07',c:'teal',x:65,y:23,s:false},
-      {id:'t08',c:'teal',x:75,y:23,s:true, f:{n:'Lin C',          r:'Staff Engineer',     rel:'Peer',                     t:'Devyani bridged design and engineering beautifully. A true systems thinker.'}},
+      {id:'t08',c:'teal',x:75,y:23,s:true, f:{n:'Lin C',          r:'Staff Engineer',     rel:'Colleague',                     t:'Devyani bridged design and engineering beautifully. A true systems thinker.'}},
       {id:'t09',c:'teal',x:85,y:23,s:false},
       {id:'t10',c:'teal',x:93,y:23,s:false},
       {id:'t11',c:'teal',x:51,y:39,s:false},
-      {id:'t12',c:'teal',x:61,y:39,s:true, f:{n:'Dani P',         r:'Product Designer',   rel:'Peer',                     t:'Creative, articulate, and incredibly fun to collaborate with.'}},
+      {id:'t12',c:'teal',x:61,y:39,s:true, f:{n:'Dani P',         r:'Product Designer',   rel:'Colleague',                     t:'Creative, articulate, and incredibly fun to collaborate with.'}},
       {id:'t13',c:'teal',x:71,y:39,s:false},
       {id:'t14',c:'teal',x:81,y:39,s:false},
       {id:'t15',c:'teal',x:90,y:39,s:false},
       {id:'t16',c:'teal',x:57,y:55,s:false},
-      {id:'t17',c:'teal',x:67,y:55,s:true, f:{n:'Alex T',         r:'Research Lead',      rel:'Peer',                     t:'Deep empathy and excellent research skills. Devyani is a thoughtful advocate.'}},
+      {id:'t17',c:'teal',x:67,y:55,s:true, f:{n:'Alex T',         r:'Research Lead',      rel:'Colleague',                     t:'Deep empathy and excellent research skills. Devyani is a thoughtful advocate.'}},
       {id:'t18',c:'teal',x:77,y:55,s:false},
       {id:'t19',c:'teal',x:88,y:55,s:false},
       {id:'t20',c:'teal',x:52,y:70,s:false},
       {id:'t21',c:'teal',x:63,y:70,s:false},
       {id:'t22',c:'teal',x:73,y:70,s:false},
-      {id:'t23',c:'teal',x:84,y:70,s:true, f:{n:'Yuki S',         r:'Brand Designer',     rel:'Peer',                     t:'Inspired me to think more holistically about design systems.'}},
+      {id:'t23',c:'teal',x:84,y:70,s:true, f:{n:'Yuki S',         r:'Brand Designer',     rel:'Colleague',                     t:'Inspired me to think more holistically about design systems.'}},
       {id:'t24',c:'teal',x:95,y:70,s:false},
     ];
 
     const bottomDots = [
-      // ── Green ──
+      // Green (x 0–28%)
       {id:'g01',c:'green', x:11,y:8, s:true, f:{n:'Tara N',       r:'UX Lead',            rel:'Direct Report',            t:'Devyani showed remarkable growth. Mentoring her was a highlight.'}},
       {id:'g02',c:'green', x:21,y:8, s:false},
       {id:'g03',c:'green', x:1, y:25,s:false},
@@ -294,63 +459,63 @@ <h4 class="h3">Your dot has been planted!</h4>
       {id:'g13',c:'green', x:2, y:75,s:true, f:{n:'Chloe R',      r:'Product Manager',    rel:'Direct Report',            t:'Always asks the right questions. Makes everyone around her better.'}},
       {id:'g14',c:'green', x:14,y:75,s:false},
       {id:'g15',c:'green', x:24,y:75,s:false},
-      // ── Red ──
+      // Red (x 32–59%)
       {id:'r01',c:'red',   x:35,y:10,s:false},
-      {id:'r02',c:'red',   x:46,y:10,s:true, f:{n:'Omar A',       r:'Design Director',    rel:'Cross-functional Partner', t:'Devyani was exceptional. Her cross-functional clarity is rare.'}},
+      {id:'r02',c:'red',   x:46,y:10,s:true, f:{n:'Omar A',       r:'Design Director',    rel:'Team/Engineer', t:'Devyani was exceptional. Her cross-functional clarity is rare.'}},
       {id:'r03',c:'red',   x:32,y:27,s:false},
-      {id:'r04',c:'red',   x:43,y:27,s:true, f:{n:'Ruby S',       r:'Senior Designer',    rel:'Cross-functional Partner', t:'Incredibly talented. Her process is as strong as her output.'}},
+      {id:'r04',c:'red',   x:43,y:27,s:true, f:{n:'Ruby S',       r:'Senior Designer',    rel:'Team/Engineer', t:'Incredibly talented. Her process is as strong as her output.'}},
       {id:'r05',c:'red',   x:54,y:27,s:false},
       {id:'r06',c:'red',   x:36,y:43,s:false},
       {id:'r07',c:'red',   x:48,y:43,s:false},
-      {id:'r08',c:'red',   x:57,y:43,s:true, f:{n:'Felix H',      r:'Engineer',           rel:'Cross-functional Partner', t:'Great at translating complex ideas into clear, actionable designs.'}},
+      {id:'r08',c:'red',   x:57,y:43,s:true, f:{n:'Felix H',      r:'Engineer',           rel:'Team/Engineer', t:'Great at translating complex ideas into clear, actionable designs.'}},
       {id:'r09',c:'red',   x:33,y:60,s:false},
       {id:'r10',c:'red',   x:44,y:60,s:false},
       {id:'r11',c:'red',   x:56,y:60,s:false},
-      {id:'r12',c:'red',   x:38,y:76,s:true, f:{n:'Mia T',        r:'UX Researcher',      rel:'Cross-functional Partner', t:'Exceptional at synthesizing research insights into design decisions.'}},
+      {id:'r12',c:'red',   x:38,y:76,s:true, f:{n:'Mia T',        r:'UX Researcher',      rel:'Team/Engineer', t:'Exceptional at synthesizing research insights into design decisions.'}},
       {id:'r13',c:'red',   x:50,y:76,s:false},
-      // ── Purple ──
+      // Purple (x 64–98%)
       {id:'p01',c:'purple',x:66,y:8, s:false},
-      {id:'p02',c:'purple',x:77,y:8, s:true, f:{n:'Nora J',       r:'Design Ops',         rel:'Mentor',                   t:'Devyani elevates everyone around her. She will go very far.'}},
+      {id:'p02',c:'purple',x:77,y:8, s:true, f:{n:'Nora J',       r:'Design Ops',         rel:'SF office buddy',                   t:'Devyani elevates everyone around her. She will go very far.'}},
       {id:'p03',c:'purple',x:87,y:8, s:false},
       {id:'p04',c:'purple',x:96,y:8, s:false},
-      {id:'p05',c:'purple',x:70,y:23,s:true, f:{n:'Isaac B',      r:'VP of Design',       rel:'Mentor',                   t:'A rising star with limitless potential. Incredibly self-aware and driven.'}},
+      {id:'p05',c:'purple',x:70,y:23,s:true, f:{n:'Isaac B',      r:'VP of Design',       rel:'SF office buddy',                   t:'A rising star with limitless potential. Incredibly self-aware and driven.'}},
       {id:'p06',c:'purple',x:80,y:23,s:false},
       {id:'p07',c:'purple',x:90,y:23,s:false},
       {id:'p08',c:'purple',x:64,y:39,s:false},
       {id:'p09',c:'purple',x:75,y:39,s:false},
-      {id:'p10',c:'purple',x:85,y:39,s:true, f:{n:'Zara M',       r:'Brand Lead',         rel:'Mentor',                   t:'Beautiful work, thoughtful process. Devyani thinks in systems.'}},
+      {id:'p10',c:'purple',x:85,y:39,s:true, f:{n:'Zara M',       r:'Brand Lead',         rel:'SF office buddy',                   t:'Beautiful work, thoughtful process. Devyani thinks in systems.'}},
       {id:'p11',c:'purple',x:93,y:39,s:false},
       {id:'p12',c:'purple',x:68,y:56,s:false},
       {id:'p13',c:'purple',x:79,y:56,s:false},
       {id:'p14',c:'purple',x:89,y:56,s:false},
-      {id:'p15',c:'purple',x:97,y:56,s:true, f:{n:'Chris O',      r:'Principal Designer', rel:'Mentor',                   t:'Inspiring work ethic and curiosity. Devyani never stops learning.'}},
+      {id:'p15',c:'purple',x:97,y:56,s:true, f:{n:'Chris O',      r:'Principal Designer', rel:'SF office buddy',                   t:'Inspiring work ethic and curiosity. Devyani never stops learning.'}},
       {id:'p16',c:'purple',x:65,y:72,s:false},
       {id:'p17',c:'purple',x:76,y:72,s:false},
-      {id:'p18',c:'purple',x:87,y:72,s:true, f:{n:'Leila H',      r:'UX Writer',          rel:'Mentor',                   t:'Makes every word and pixel count. A joy to mentor.'}},
+      {id:'p18',c:'purple',x:87,y:72,s:true, f:{n:'Leila H',      r:'UX Writer',          rel:'SF office buddy',                   t:'Makes every word and pixel count. A joy to mentor.'}},
       {id:'p19',c:'purple',x:96,y:72,s:false},
     ];
 
-    const allDots          = [...topDots, ...bottomDots];
-    const submittedDots    = allDots.filter(d => d.s);
-    let   viewIndex        = 0;
-    let   pendingColor     = null;
+    const allDots       = [...topDots, ...bottomDots];
+    const submittedDots = allDots.filter(d => d.s);
+    let   viewIndex     = 0;
 
-    /* ----------------------------------------------------------
+    /* ────────────────────────────────────────────────
        RENDER DOTS
-    ---------------------------------------------------------- */
+    ──────────────────────────────────────────────── */
     function renderDots(containerId, dots) {
       const container = document.getElementById(containerId);
       dots.forEach(dot => {
         const el = document.createElement('button');
-        el.className = `dot dot--${dot.c}` + (dot.s ? ' dot--submitted' : '');
-        el.id        = 'dot-' + dot.id;
+        el.className    = `dot dot--${dot.c}` + (dot.s ? ' dot--submitted' : '');
+        el.id           = 'dot-' + dot.id;
         el.dataset.dotId = dot.id;
-        el.style.left = dot.x + '%';
-        el.style.top  = dot.y + '%';
-
+        el.style.left   = dot.x + '%';
+        el.style.top    = dot.y + '%';
         if (dot.s) {
           el.setAttribute('aria-label', `View feedback from ${dot.f.n}`);
-          el.addEventListener('click', () => showFeedback(dot));
+          el.addEventListener('click',      () => showFeedback(dot, el));
+          el.addEventListener('mouseenter', () => showTooltip(dot, el));
+          el.addEventListener('mouseleave', hideTooltip);
         } else {
           el.disabled = true;
           el.setAttribute('aria-hidden', 'true');
@@ -363,44 +528,168 @@ <h4 class="h3">Your dot has been planted!</h4>
     renderDots('topContent',    topDots);
     renderDots('bottomContent', bottomDots);
 
-    /* ----------------------------------------------------------
+    /* ────────────────────────────────────────────────
+       DOT TOOLTIP
+    ──────────────────────────────────────────────── */
+    const tooltip    = document.getElementById('dotTooltip');
+    const ttName     = document.getElementById('tt-name');
+    const ttRole     = document.getElementById('tt-role');
+    let   tooltipDot = null;
+    let   tooltipEl  = null;
+    let   hideTimer  = null;
+
+    /* ────────────────────────────────────────────────
+       "THIS IS YOUR DOT" CALLOUT
+    ──────────────────────────────────────────────── */
+    const yourDotBox = document.getElementById('yourDotBox');
+    let   yourDotTimer = null;
+
+    function showYourDotBox(dotEl) {
+      // Reset animation by re-inserting the element
+      yourDotBox.hidden = true;
+      clearTimeout(yourDotTimer);
+      requestAnimationFrame(() => {
+        const rect = dotEl.getBoundingClientRect();
+        const gap  = 10;
+        yourDotBox.hidden = false;
+        requestAnimationFrame(() => {
+          const bw = yourDotBox.offsetWidth;
+          const bh = yourDotBox.offsetHeight;
+          let left = rect.right + gap;
+          let top  = rect.top + rect.height / 2 - bh / 2;
+          if (left + bw > window.innerWidth - 8) left = rect.left - bw - gap;
+          if (top < 4) top = 4;
+          yourDotBox.style.left = left + 'px';
+          yourDotBox.style.top  = top  + 'px';
+        });
+        yourDotTimer = setTimeout(() => { yourDotBox.hidden = true; }, 3000);
+      });
+    }
+
+    const DOT_BORDER_COLOR = {
+      yellow: '#D4A017',
+      teal:   '#00CCCF',
+      green:  '#2DBD6A',
+      red:    '#FF4B4B',
+      purple: '#B55FFF',
+    };
+
+    function showTooltip(dot, dotEl) {
+      clearTimeout(hideTimer);
+      tooltipDot = dot;
+      tooltipEl  = dotEl;
+      ttName.textContent    = dot.f.n;
+      ttRole.textContent    = dot.f.r;
+      tooltip.style.borderColor = DOT_BORDER_COLOR[dot.c] || '#fff';
+      tooltip.hidden = false;
+      requestAnimationFrame(() => {
+        const rect = dotEl.getBoundingClientRect();
+        const gap  = 10;
+        const tw   = tooltip.offsetWidth;
+        const th   = tooltip.offsetHeight;
+        let   left = rect.right + gap;
+        let   top  = rect.top + rect.height / 2 - th / 2;
+        if (left + tw > window.innerWidth - 8) left = rect.left - tw - gap;
+        if (top < 4) top = 4;
+        tooltip.style.left = left + 'px';
+        tooltip.style.top  = top  + 'px';
+      });
+    }
+
+    function hideTooltip() {
+      hideTimer = setTimeout(() => {
+        tooltip.hidden = true;
+        tooltipDot = null;
+        tooltipEl  = null;
+      }, 120);
+    }
+
+    tooltip.addEventListener('mouseenter', () => clearTimeout(hideTimer));
+    tooltip.addEventListener('mouseleave', hideTooltip);
+    tooltip.addEventListener('click', () => {
+      if (tooltipDot) { tooltip.hidden = true; showFeedback(tooltipDot, tooltipEl); }
+    });
+
+    /* ────────────────────────────────────────────────
        PANEL HELPERS
-    ---------------------------------------------------------- */
+    ──────────────────────────────────────────────── */
     const panel       = document.getElementById('feedbackPanel');
     const editBox     = document.getElementById('editVariant');
     const viewBox     = document.getElementById('viewVariant');
     const confBox     = document.getElementById('confirmVariant');
+    const moreBox     = document.getElementById('moreVariant');
+    const allBoxes    = [editBox, viewBox, confBox, moreBox];
 
     function showOnly(box) {
-      [editBox, viewBox, confBox].forEach(b => {
-        b.hidden = (b !== box);
-      });
+      allBoxes.forEach(b => { b.hidden = (b !== box); });
     }
 
+    const dotSearchEl = document.getElementById('dotSearch');
+
     function openPanel() {
       panel.classList.add('is-open');
       panel.setAttribute('aria-hidden', 'false');
+      dotSearchEl.classList.add('dot-search--inactive');
+      // On really narrow screens the panel is in the document flow — scroll to it
+      if (window.innerWidth <= 420) {
+        requestAnimationFrame(() => panel.scrollIntoView({ behavior: 'smooth', block: 'start' }));
+      }
+    }
+
+    let activeDotEl    = null;
+    let searchActiveDots = new Set();
+
+    function setActiveDot(el) {
+      // Only remove the active class if the dot isn't also search-highlighted
+      if (activeDotEl && !searchActiveDots.has(activeDotEl)) {
+        activeDotEl.classList.remove('dot--active');
+      }
+      activeDotEl = el || null;
+      if (activeDotEl) activeDotEl.classList.add('dot--active');
     }
 
     function closePanel() {
       panel.classList.remove('is-open');
       panel.setAttribute('aria-hidden', 'true');
-      [editBox, viewBox, confBox].forEach(b => { b.hidden = true; });
+      allBoxes.forEach(b => { b.hidden = true; });
+      setActiveDot(null);
+      dotSearchEl.classList.remove('dot-search--inactive');
     }
 
     function openEdit() {
       showOnly(editBox);
       openPanel();
-      updateMoreHint();
     }
 
-    function showFeedback(dot) {
+    function openMore() {
+      showOnly(moreBox);
+      openPanel();
+    }
+
+    const REL_CHIP_DULL = {
+      yellow: 'var(--fg-yellow-dull)',
+      teal:   'var(--fg-blue-dull)',
+      green:  'var(--fg-green-dull)',
+      red:    'var(--fg-red-dull)',
+      purple: 'var(--fg-purple-dull)',
+    };
+
+    function showFeedback(dot, dotEl) {
+      setActiveDot(dotEl || document.getElementById('dot-' + dot.id) || null);
       viewIndex = submittedDots.findIndex(d => d.id === dot.id);
-      const f = dot.f;
-      document.getElementById('vw-name').textContent         = f.n;
-      document.getElementById('vw-role').textContent         = f.r;
-      document.getElementById('vw-relationship').textContent = f.rel;
-      document.getElementById('vw-feedback').textContent     = f.t;
+      const f     = dot.f;
+      const color = REL_COLOR[f.rel] || 'teal';
+
+      document.getElementById('vw-title').textContent = f.n + '\u2019s Feedback';
+      document.getElementById('vw-role').textContent  = f.r;
+
+      const chip = document.getElementById('vw-relationship');
+      chip.textContent          = f.rel;
+      chip.style.backgroundColor = REL_CHIP_DULL[color] || 'var(--fg-blue-dull)';
+      chip.style.borderColor     = DOT_BORDER_COLOR[color] || '#00CCCF';
+
+      document.getElementById('vw-feedback').textContent = '\u201c' + f.t + '\u201d';
+
       showOnly(viewBox);
       openPanel();
     }
@@ -410,65 +699,213 @@ <h4 class="h3">Your dot has been planted!</h4>
       openPanel();
     }
 
-    /* ----------------------------------------------------------
-       "MORE" SCROLL HINT
-    ---------------------------------------------------------- */
-    const moreHint = document.getElementById('editMoreHint');
-    const editScroll = document.getElementById('editScrollBody');
-
-    function updateMoreHint() {
-      if (!editScroll) return;
-      const hasMore = editScroll.scrollHeight > editScroll.clientHeight + 4;
-      const atBottom = editScroll.scrollTop + editScroll.clientHeight >= editScroll.scrollHeight - 8;
-      moreHint.hidden = !hasMore || atBottom;
+    /* ────────────────────────────────────────────────
+       CONTACT CHIPS
+    ──────────────────────────────────────────────── */
+    const selectedMethods = new Set();
+
+    function renderContactInputs() {
+      const container = document.getElementById('contactInputs');
+      container.innerHTML = '';
+      // keep stable order
+      ['phone','email','linkedin','tiktok'].forEach(key => {
+        if (!selectedMethods.has(key)) return;
+        const cfg = CONTACT_METHODS[key];
+        const row = document.createElement('div');
+        row.className = 'contact-input-row input-field';
+        if (cfg.icon) {
+          row.innerHTML = `
+            <div class="input-field__wrapper input-field__wrapper--icon">
+              <span class="input-field__icon">${cfg.icon}</span>
+              <input class="input-field__input" type="${cfg.type}" name="contact-${key}" placeholder="${cfg.placeholder}" />
+            </div>`;
+        } else {
+          row.innerHTML = `
+            <div class="input-field__wrapper">
+              <input class="input-field__input" type="${cfg.type}" name="contact-${key}" placeholder="${cfg.placeholder}" />
+            </div>`;
+        }
+        container.appendChild(row);
+      });
+
+      // Attach phone formatter to any phone input just rendered
+      const phoneInput = container.querySelector('[name="contact-phone"]');
+      if (phoneInput) {
+        phoneInput.addEventListener('input', formatPhoneInput);
+        phoneInput.addEventListener('blur',  formatPhoneInput);
+      }
+    }
+
+    function formatPhoneInput(e) {
+      const input = e.target;
+      // Strip all non-digit characters
+      const digits = input.value.replace(/\D/g, '').slice(0, 10);
+      let formatted = digits;
+      if (digits.length > 6) {
+        formatted = `(${digits.slice(0,3)})-${digits.slice(3,6)}-${digits.slice(6)}`;
+      } else if (digits.length > 3) {
+        formatted = `(${digits.slice(0,3)})-${digits.slice(3)}`;
+      } else if (digits.length > 0) {
+        formatted = `(${digits}`;
+      }
+      input.value = formatted;
     }
 
-    editScroll && editScroll.addEventListener('scroll', updateMoreHint);
-    moreHint && moreHint.addEventListener('click', () => {
-      editScroll.scrollBy({ top: 200, behavior: 'smooth' });
+    document.getElementById('contactChips').addEventListener('click', e => {
+      const chip = e.target.closest('.contact-chip');
+      if (!chip) return;
+      const m = chip.dataset.method;
+      if (selectedMethods.has(m)) {
+        selectedMethods.delete(m);
+        chip.classList.remove('is-selected');
+        chip.setAttribute('aria-pressed', 'false');
+      } else {
+        selectedMethods.add(m);
+        chip.classList.add('is-selected');
+        chip.setAttribute('aria-pressed', 'true');
+      }
+      renderContactInputs();
     });
 
-    /* ----------------------------------------------------------
+    /* ────────────────────────────────────────────────
        BUTTON WIRING
-    ---------------------------------------------------------- */
+    ──────────────────────────────────────────────── */
     document.getElementById('openFeedbackBtn').addEventListener('click', openEdit);
+    document.getElementById('openMoreBtn').addEventListener('click',     openMore);
+
     document.getElementById('closeEditBtn').addEventListener('click',    closePanel);
     document.getElementById('closeViewBtn').addEventListener('click',    closePanel);
     document.getElementById('closeConfirmBtn').addEventListener('click', closePanel);
+    document.getElementById('closeMoreBtn').addEventListener('click',    closePanel);
+
+    document.getElementById('goBackBtn').addEventListener('click',       openEdit);
+    document.getElementById('editFromConfirmBtn').addEventListener('click', openEdit);
+
+    // Clear error state as soon as a user starts fixing a field
+    ['inp-name','inp-role','inp-relationship','inp-feedback','inp-improve'].forEach(id => {
+      const el = document.getElementById(id);
+      if (!el) return;
+      el.addEventListener('input',  () => { el.classList.remove('input-field__input--error'); el.closest('.input-field')?.classList.remove('input-field--error'); });
+      el.addEventListener('change', () => { el.classList.remove('input-field__input--error'); el.closest('.input-field')?.classList.remove('input-field--error'); });
+    });
 
     document.getElementById('submitFeedbackBtn').addEventListener('click', () => {
-      pendingColor = REL_COLOR[document.getElementById('inp-relationship').value] || 'teal';
+      // Validate all required fields
+      const requiredFields = [
+        document.getElementById('inp-name'),
+        document.getElementById('inp-role'),
+        document.getElementById('inp-relationship'),
+        document.getElementById('inp-feedback'),
+        document.getElementById('inp-improve'),
+      ];
+      let isValid = true;
+      requiredFields.forEach(field => {
+        const isEmpty = !field.value.trim();
+        field.classList.toggle('input-field__input--error', isEmpty);
+        field.closest('.input-field')?.classList.toggle('input-field--error', isEmpty);
+        if (isEmpty) isValid = false;
+      });
+      if (!isValid) return;
+
+      const color = REL_COLOR[document.getElementById('inp-relationship').value] || 'teal';
+      const target = allDots.find(d => d.c === color && !d.s);
+
+      // Collect private fields before the form resets
+      const privateImprove = document.getElementById('inp-improve').value.trim();
+      const contactEntries = [];
+      document.querySelectorAll('#contactInputs [name^="contact-"]').forEach(inp => {
+        if (inp.value.trim()) {
+          const method = inp.name.replace('contact-', '');
+          contactEntries.push({ method, value: inp.value.trim() });
+        }
+      });
+
+      if (target) {
+        target.s = true;
+        target.f = {
+          n:   document.getElementById('inp-name').value     || 'Anonymous',
+          r:   document.getElementById('inp-role').value     || '—',
+          rel: document.getElementById('inp-relationship').value,
+          t:   document.getElementById('inp-feedback').value || '',
+        };
+        submittedDots.push(target);
+        const el = document.getElementById('dot-' + target.id);
+        if (el) {
+          el.classList.add('dot--submitted');
+          el.disabled = false;
+          el.removeAttribute('aria-hidden');
+          el.tabIndex = 0;
+          el.setAttribute('aria-label', `View feedback from ${target.f.n}`);
+          el.addEventListener('click', () => showFeedback(target, el));
+          el.addEventListener('mouseenter', () => showTooltip(target, el));
+          el.addEventListener('mouseleave', hideTooltip);
+          setActiveDot(el);
+          showYourDotBox(el);
+        }
+
+        // Post private feedback to GitHub Issues (fire-and-forget)
+        postPrivateFeedback(target.f, privateImprove, contactEntries);
+      }
       openConfirm();
     });
 
-    document.getElementById('editFromConfirmBtn').addEventListener('click', openEdit);
+    // ── Private feedback → GitHub Issues ────────────────────────────────────
+    function postPrivateFeedback(pub, improve, contacts) {
+      if (!improve && contacts.length === 0) return; // nothing private to send
+      // Token split to avoid GitHub secret-scanning revocation on push.
+      // This token is fine-grained: Issues write-only on devyanijain/golden-seeds-inbox.
+      const _tk = ['github_pat_11BEMBZSI0', 'xGZz9ithbmbx_JrCKA9jD9NQG1kZCeQ7',
+                   'YFnCR2EU6MCLff1G82crALpeFVOAZ5GH3iSHrRl1'].join('');
+
+      const contactLines = contacts.length
+        ? contacts.map(c => `| ${c.method} | ${c.value} |`).join('\n')
+        : '| — | — |';
+
+      const body = `## 🌱 New feedback from ${pub.n}
+
+| Field | Value |
+|---|---|
+| **Name** | ${pub.n} |
+| **Role** | ${pub.r} |
+| **Relationship** | ${pub.rel} |
+
+---
+
+### 🔒 Private (only you can see this)
+
+**Areas for growth:**
+${improve || '_Not provided_'}
+
+**Stay in touch:**
+| Method | Detail |
+|---|---|
+${contactLines}
+`;
+
+      fetch('https://api.github.com/repos/devyanijain/golden-seeds-inbox/issues', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${_tk}`,
+          'Accept': 'application/vnd.github+json',
+          'Content-Type': 'application/json',
+          'X-GitHub-Api-Version': '2022-11-28',
+        },
+        body: JSON.stringify({
+          title: `[Feedback] ${pub.n} — ${pub.r}`,
+          body,
+        }),
+      }).catch(() => {}); // silent — never show errors to the submitter
+    }
 
     document.getElementById('doneBtn').addEventListener('click', () => {
-      // Plant a dot: find the first un-submitted dot in the matching color group
-      if (pendingColor) {
-        const target = allDots.find(d => d.c === pendingColor && !d.s);
-        if (target) {
-          target.s = true;
-          target.f = {
-            n:   document.getElementById('inp-name').value     || 'Anonymous',
-            r:   document.getElementById('inp-role').value     || '—',
-            rel: document.getElementById('inp-relationship').value,
-            t:   document.getElementById('inp-feedback').value || '',
-          };
-          submittedDots.push(target);
-          const el = document.getElementById('dot-' + target.id);
-          if (el) {
-            el.classList.add('dot--submitted');
-            el.disabled = false;
-            el.removeAttribute('aria-hidden');
-            el.tabIndex = 0;
-            el.setAttribute('aria-label', `View feedback from ${target.f.n}`);
-            el.addEventListener('click', () => showFeedback(target));
-          }
-        }
-        pendingColor = null;
-      }
+      setActiveDot(null);
       document.getElementById('feedbackForm').reset();
+      selectedMethods.clear();
+      document.querySelectorAll('.contact-chip').forEach(c => {
+        c.classList.remove('is-selected');
+        c.setAttribute('aria-pressed', 'false');
+      });
+      renderContactInputs();
       closePanel();
     });
 
@@ -476,7 +913,6 @@ <h4 class="h3">Your dot has been planted!</h4>
       viewIndex = (viewIndex - 1 + submittedDots.length) % submittedDots.length;
       showFeedback(submittedDots[viewIndex]);
     });
-
     document.getElementById('nextDotBtn').addEventListener('click', () => {
       viewIndex = (viewIndex + 1) % submittedDots.length;
       showFeedback(submittedDots[viewIndex]);
@@ -486,6 +922,38 @@ <h4 class="h3">Your dot has been planted!</h4>
     document.addEventListener('keydown', e => {
       if (e.key === 'Escape' && panel.classList.contains('is-open')) closePanel();
     });
+
+    /* ────────────────────────────────────────────────
+       DOT SEARCH
+    ──────────────────────────────────────────────── */
+    function searchHighlight(query) {
+      // Clear previous search highlights (skip if also panel-active)
+      searchActiveDots.forEach(el => {
+        if (el !== activeDotEl) el.classList.remove('dot--active');
+      });
+      searchActiveDots.clear();
+
+      const q = query.trim().toLowerCase();
+      if (!q) return;
+
+      submittedDots.forEach(dot => {
+        if (!dot.f) return;
+        const name = (dot.f.n || '').toLowerCase();
+        const role = (dot.f.r || '').toLowerCase();
+        if (name.includes(q) || role.includes(q)) {
+          const el = document.getElementById('dot-' + dot.id);
+          if (el) {
+            el.classList.add('dot--active');
+            searchActiveDots.add(el);
+          }
+        }
+      });
+    }
+
+    document.getElementById('dotSearchInput').addEventListener('input', e => {
+      searchHighlight(e.target.value);
+    });
   </script>
+
 </body>
 </html>
diff --git a/style.css b/style.css
index f649ad3..def64b8 100644
--- a/style.css
+++ b/style.css
@@ -1,66 +1,14 @@
 /* ====================================================================
-   DESIGN TOKENS
+   LAYOUT — style.css
+   Page-level layout only. Tokens: tokens.css. Components: components.css.
    ==================================================================== */
-:root {
-  /* Foreground */
-  --fg-default:       #FCFCFC;
-  --fg-default-muted: #D4D4D4;
-
-  /* Foreground accent (dull) — used for default dot fills */
-  --fg-red-dull:    #620101;
-  --fg-yellow-dull: #413803;
-  --fg-blue-dull:   #013B3C;   /* teal/blue group */
-  --fg-green-dull:  #043710;
-  --fg-purple-dull: #31044B;
-
-  /* Background */
-  --bg-primary:   #000000;
-  --bg-secondary: #1F1F1F;
-  --bg-tertiary:  #3D3D3D;
-
-  /* Typography */
-  --font-heading: 'Space Mono',    'Courier New', monospace;
-  --font-body:    'Space Grotesk', system-ui,     sans-serif;
-
-  /* Font scale */
-  --fs-h1:      28px;
-  --fs-h2:      24px;
-  --fs-h3:      20px;
-  --fs-p1:      18px;
-  --fs-p2:      16px;
-  --fs-p3:      14px;
-  --fs-caption: 12px;
-
-  /* Spacing (padding tokens) */
-  --padding-sm: 8px;
-  --padding-md: 16px;
-  --padding-lg: 24px;
-
-  /* Radii */
-  --radii-sm: 4px;
-  --radii-md: 12px;
-
-  /* Dot */
-  --dot-size: 28px;
-
-  /* Panel */
-  --panel-w: clamp(340px, 38vw, 520px);
-
-  /* Animation */
-  --ease: cubic-bezier(0.22, 1, 0.36, 1);
-}
 
-/* ====================================================================
-   RESET
-   ==================================================================== */
+/* ── Reset ── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-html {
-  -webkit-text-size-adjust: 100%;
-}
+html { -webkit-text-size-adjust: 100%; background: var(--bg-default); }
 
 body {
-  background:  var(--bg-primary);
+  background:  var(--bg-default);
   color:       var(--fg-default);
   font-family: var(--font-body);
   font-size:   var(--fs-p2);
@@ -71,21 +19,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-button { font-family: inherit; cursor: pointer; }
+button, input, textarea, select { font-family: inherit; }
 
 /* ====================================================================
-   TYPOGRAPHY UTILITY CLASSES
-   ==================================================================== */
-.h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h1); line-height: 1.15; color: var(--fg-default); }
-.h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2;  color: var(--fg-default); }
-.h3 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; color: var(--fg-default); }
-.p1 { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-p1); color: var(--fg-default); }
-.p2 { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-p2); color: var(--fg-default); }
-.p3 { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-p3); color: var(--fg-default); }
-.caption { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); color: var(--fg-default-muted); }
-
-/* ====================================================================
-   HOME LAYOUT — three rows that together fill 100vh
+   HOME LAYOUT — three rows filling 100vh
    ==================================================================== */
 .home {
   display:        flex;
@@ -93,35 +30,43 @@ button { font-family: inherit; cursor: pointer; }
   min-height:     100vh;
 }
 
-/* ── Dot fields (40vh each) ── */
+/* Dot fields (40vh each) */
 .dot-field {
   position:   relative;
   flex:       none;
   height:     40vh;
-  background: var(--bg-primary);
+  background: var(--bg-default);
   overflow:   hidden;
 }
 
-/* ── Middle content (20vh) ── */
+/* Middle content (20vh) */
 .middle-content {
-  flex:       none;
-  height:     20vh;
-  display:    flex;
+  flex:        none;
+  height:      20vh;
+  display:     flex;
   align-items: center;
-  background: transparent;
-  padding:    0 var(--padding-lg);
-  z-index:    1;
+  background:  transparent;
+  padding:     0 var(--padding-lg);
+  z-index:     1;
 }
 
 .middle-content__inner {
   display:        flex;
   flex-direction: column;
-  gap:            var(--padding-md);
-  max-width:      500px;
+  gap:            var(--padding-sm);
+  max-width:      520px;
+}
+
+.middle-content__actions {
+  display:    flex;
+  align-items: center;
+  gap:        var(--padding-xs);
+  align-self: flex-start;
 }
 
 .middle-content__desc {
   color:       var(--fg-default-muted);
+  font-family: var(--font-body);
   font-size:   var(--fs-p1);
   line-height: 1.55;
 }
@@ -137,297 +82,257 @@ button { font-family: inherit; cursor: pointer; }
   border:        none;
   transform:     translate(-50%, -50%);
   transition:    box-shadow 0.25s var(--ease);
-  /* position set via inline style (left/top %) */
+  cursor:        default;
 }
 
-/* Default (dull) fills — no interaction */
-.dot--yellow   { background: var(--fg-yellow-dull); pointer-events: none; }
-.dot--teal     { background: var(--fg-blue-dull);   pointer-events: none; }
-.dot--green    { background: var(--fg-green-dull);  pointer-events: none; }
-.dot--red      { background: var(--fg-red-dull);    pointer-events: none; }
-.dot--purple   { background: var(--fg-purple-dull); pointer-events: none; }
+/* Default (dull) — no pointer events */
+.dot--yellow { background: var(--fg-yellow-dull); pointer-events: none; }
+.dot--teal   { background: var(--fg-blue-dull);   pointer-events: none; }
+.dot--green  { background: var(--fg-green-dull);  pointer-events: none; }
+.dot--red    { background: var(--fg-red-dull);    pointer-events: none; }
+.dot--purple { background: var(--fg-purple-dull); pointer-events: none; }
 
-/* Submitted — bright gradient + glow, interactive */
+/* Submitted — glowing gradient, interactive */
 .dot--submitted.dot--yellow {
-  background:    radial-gradient(circle at 35% 35%, #D4A017, #7A5C00);
-  box-shadow:    0 0 14px 5px rgba(212,160,23,0.45);
+  background:     radial-gradient(circle at 35% 35%, #D4A017, #7A5C00);
+  box-shadow:     0 0 14px 5px rgba(212,160,23,0.45);
   pointer-events: auto;
+  cursor:         pointer;
 }
 .dot--submitted.dot--teal {
-  background:    radial-gradient(circle at 35% 35%, #00CCCF, #005557);
-  box-shadow:    0 0 14px 5px rgba(0,204,207,0.45);
+  background:     radial-gradient(circle at 35% 35%, #00CCCF, #005557);
+  box-shadow:     0 0 14px 5px rgba(0,204,207,0.45);
   pointer-events: auto;
+  cursor:         pointer;
 }
 .dot--submitted.dot--green {
-  background:    radial-gradient(circle at 35% 35%, #2DBD6A, #0A5C2A);
-  box-shadow:    0 0 14px 5px rgba(45,189,106,0.4);
+  background:     radial-gradient(circle at 35% 35%, #2DBD6A, #0A5C2A);
+  box-shadow:     0 0 14px 5px rgba(45,189,106,0.4);
   pointer-events: auto;
+  cursor:         pointer;
 }
 .dot--submitted.dot--red {
-  background:    radial-gradient(circle at 35% 35%, #FF4B4B, #8C0000);
-  box-shadow:    0 0 14px 5px rgba(255,75,75,0.45);
+  background:     radial-gradient(circle at 35% 35%, #FF4B4B, #8C0000);
+  box-shadow:     0 0 14px 5px rgba(255,75,75,0.45);
   pointer-events: auto;
+  cursor:         pointer;
 }
 .dot--submitted.dot--purple {
-  background:    radial-gradient(circle at 35% 35%, #B55FFF, #52007A);
-  box-shadow:    0 0 14px 5px rgba(181,95,255,0.45);
+  background:     radial-gradient(circle at 35% 35%, #B55FFF, #52007A);
+  box-shadow:     0 0 14px 5px rgba(181,95,255,0.45);
   pointer-events: auto;
+  cursor:         pointer;
 }
 
 .dot--submitted:hover,
 .dot--submitted:focus-visible {
-  box-shadow: 0 0 22px 8px rgba(255,255,255,0.18);
+  box-shadow: 0 0 24px 10px rgba(255,255,255,0.2);
   outline:    none;
 }
 
-/* ====================================================================
-   BUTTONS
-   ==================================================================== */
-.btn {
-  display:     inline-flex;
-  align-items: center;
-  gap:         8px;
-  padding:     9px 18px;
-  border-radius: var(--radii-sm);
-  font-family: var(--font-heading);
-  font-weight: 700;
-  font-size:   var(--fs-p3);
-  line-height: 1;
-  transition:  background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
-  border:      2px solid transparent;
+/* Active — feedback panel open for this dot */
+.dot--active {
+  outline:        2px solid #fff;
+  outline-offset: 3px;
+  box-shadow:     0 0 20px 8px rgba(255,255,255,0.35);
 }
 
-.btn--primary {
-  background:   var(--bg-tertiary);
-  color:        var(--fg-default);
-  border-color: var(--bg-tertiary);
+/* Dot hover tooltip */
+.dot-tooltip {
+  position:       fixed;
+  z-index:        200;
+  display:        flex;
+  flex-direction: column;
+  gap:            4px;
+  background:     var(--bg-primary);
+  border:         4px solid #fff;      /* overridden inline per color */
+  border-radius:  var(--radii-sm);
+  padding:        var(--padding-xs) var(--padding-sm);
+  cursor:         pointer;
+  pointer-events: auto;
+  white-space:    nowrap;
+  transition:     opacity 0.12s ease;
 }
-.btn--primary:hover { background: #4d4d4d; border-color: #4d4d4d; }
 
-.btn--secondary {
-  background:   transparent;
-  color:        var(--fg-default);
-  border-color: transparent;
-}
-.btn--secondary:hover { color: var(--fg-default-muted); }
+.dot-tooltip[hidden] { display: none !important; }
 
-/* Outlined — used for "Log some words" CTA */
-.btn--outlined {
-  background:   transparent;
-  color:        var(--fg-default);
-  border-color: var(--bg-tertiary);
+.dot-tooltip__name {
+  color:       var(--fg-default);
+  font-weight: 600;
 }
-.btn--outlined:hover { background: var(--bg-secondary); border-color: var(--fg-default-muted); }
 
-/* Icon button */
-.icon-btn {
-  display:     inline-flex;
-  align-items: center;
-  justify-content: center;
-  background:  transparent;
-  border:      none;
-  color:       var(--fg-default);
-  padding:     4px;
-  border-radius: var(--radii-sm);
-  transition:  color 0.2s, opacity 0.2s;
+.dot-tooltip__role {
+  color: var(--fg-default-muted);
 }
-.icon-btn:hover { color: var(--fg-default-muted); }
 
-/* ====================================================================
-   FEEDBACK PANEL
-   ==================================================================== */
-.feedback-panel {
-  position:   fixed;
-  top:        var(--padding-lg);
-  bottom:     var(--padding-lg);
-  right:      var(--padding-lg);
-  width:      var(--panel-w);
-  /* stack children; only one is ever visible at a time */
-  display:    block;
-  z-index:    200;
-  transform:  translateX(calc(100% + var(--padding-lg)));
-  transition: transform 0.35s var(--ease);
+/* "This is your dot" callout */
+.your-dot-box {
+  position:      fixed;
+  z-index:       210;
+  background:    var(--bg-primary);
+  border:        4px solid var(--bg-secondary);
+  border-radius: var(--radii-sm);
+  padding:       var(--padding-sm);
   pointer-events: none;
+  white-space:   nowrap;
+  color:         var(--fg-default);
+  animation:     yourDotFade 3s ease forwards;
 }
+.your-dot-box[hidden] { display: none !important; }
 
-.feedback-panel.is-open {
-  transform:      translateX(0);
-  pointer-events: all;
+@keyframes yourDotFade {
+  0%   { opacity: 0; transform: translateY(-4px); }
+  10%  { opacity: 1; transform: translateY(0); }
+  80%  { opacity: 1; }
+  100% { opacity: 0; }
 }
 
-/* ====================================================================
-   FEEDBACK BOX (shared shell)
-   ==================================================================== */
-.feedback-box {
-  width:          100%;
-  height:         100%;
-  background:     var(--bg-secondary);
-  border:         4px solid var(--bg-tertiary);
-  border-radius:  var(--radii-md);
+/* ── Dot search widget ── */
+.dot-search {
+  position:       fixed;
+  bottom:         var(--padding-md);
+  left:           var(--padding-md);
+  z-index:        150;
   display:        flex;
   flex-direction: column;
-  overflow:       hidden;
-}
-
-/* hide the [hidden] boxes — belt-and-suspenders */
-.feedback-box[hidden] { display: none !important; }
-
-/* ── Action Bar ── */
-.actionBar {
-  flex:        none;
-  display:     flex;
-  align-items: center;
-  justify-content: space-between;
-  padding:     var(--padding-sm) var(--padding-md);
-}
-
-.actionBar--bordered {
-  border-bottom: 2px solid var(--bg-tertiary);
+  gap:            4px;
+  background:     var(--bg-default);
+  border:         4px solid var(--bg-secondary);
+  border-radius:  var(--radii-sm);
+  padding:        var(--padding-xs) var(--padding-sm) var(--padding-sm);
+  min-width:      220px;
 }
 
-.actionBar--end { justify-content: flex-end; }
-
-/* ── Content Bar ── */
-.contentBar {
-  flex:          1;
-  overflow-y:    auto;
-  padding:       var(--padding-md);
-  display:       flex;
-  flex-direction: column;
-  gap:           var(--padding-md);
-  scrollbar-width: thin;
-  scrollbar-color: var(--bg-tertiary) transparent;
+.dot-search__label {
+  color:       var(--fg-default-muted);
+  font-size:   var(--text-caption-size);
+  font-family: var(--text-caption-family);
+  user-select: none;
 }
 
-.contentBar::-webkit-scrollbar       { width: 4px; }
-.contentBar::-webkit-scrollbar-track { background: transparent; }
-.contentBar::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 2px; }
-
-/* ── Footer Bar ── */
-.footerBar {
-  flex:        none;
-  display:     flex;
+.dot-search__input-wrapper {
+  position: relative;
+  display:  flex;
   align-items: center;
-  padding:     var(--padding-sm) var(--padding-md);
 }
 
-.footerBar--end     { justify-content: flex-end; }
-.footerBar--between { justify-content: space-between; }
-.footerBar--gap     { gap: 4px; }
-
-/* ── Scroll hint ── */
-.scroll-hint {
-  text-align:    right;
-  padding:       0 var(--padding-md) 4px;
-  cursor:        pointer;
-  user-select:   none;
+.dot-search__icon {
+  position:      absolute;
+  left:          var(--padding-xs);
   color:         var(--fg-default-muted);
-  letter-spacing: 0.04em;
-  flex:          none;
-}
-.scroll-hint:hover { color: var(--fg-default); }
-
-/* ====================================================================
-   FORM ELEMENTS (Edit variant)
-   ==================================================================== */
-.form-group {
-  display:        flex;
-  flex-direction: column;
-  gap:            4px;
+  pointer-events: none;
+  flex-shrink:   0;
 }
 
-.form-label { color: var(--fg-default); }
-.form-hint  { color: var(--fg-default-muted); font-size: var(--fs-caption); font-family: var(--font-body); }
-
-.form-input,
-.form-select,
-.form-textarea {
-  background:    var(--bg-tertiary);
+.dot-search__input {
+  background:    var(--bg-default);
   border:        1.5px solid var(--bg-tertiary);
-  border-radius: var(--radii-sm);
+  border-radius: var(--radii-xs);
+  padding:       var(--padding-xs) var(--padding-sm);
+  padding-left:  calc(var(--padding-xs) + 14px + 8px);
   color:         var(--fg-default);
-  font-family:   var(--font-body);
-  font-size:     var(--fs-p3);
-  padding:       7px 10px;
+  font-size:     var(--text-p3-size);
+  font-family:   var(--text-p3-family);
+  width:         100%;
   outline:       none;
-  transition:    border-color 0.2s;
-  /* short inputs match the image width */
-  width:         min(180px, 55%);
-}
-
-.form-textarea {
-  width:      100%;
-  resize:     vertical;
-  min-height: 100px;
+  box-sizing:    border-box;
 }
-
-.form-input:focus,
-.form-select:focus,
-.form-textarea:focus {
-  border-color: var(--fg-default-muted);
-}
-
-.form-select {
-  cursor:             pointer;
-  -webkit-appearance: none;
-  appearance:         none;
-}
-
-.form-private {
-  color:      var(--fg-default-muted);
-  font-size:  var(--fs-caption);
-  font-family: var(--font-body);
-  margin-top: var(--padding-sm);
+.dot-search__input:focus {
+  border-color: var(--fg-default);
+  background:   var(--bg-primary);
 }
+.dot-search__input::placeholder { color: var(--fg-default-muted); }
+/* hide browser ✕ on type=search */
+.dot-search__input::-webkit-search-cancel-button { display: none; }
 
-/* ====================================================================
-   VIEW VARIANT
-   ==================================================================== */
-.view-field {
-  display:   flex;
-  flex-direction: column;
-  gap:       6px;
+/* Inactive state — shown while feedback panel is open */
+.dot-search--inactive {
+  opacity:        0.45;
+  pointer-events: none;
 }
-
-.view-label { color: var(--fg-default); }
-.view-value { color: var(--fg-default-muted); font-size: var(--fs-p1); line-height: 1.55; }
-
-/* ====================================================================
-   CONFIRMATION VARIANT
-   ==================================================================== */
-.confirm-desc {
-  color:       var(--fg-default-muted);
-  line-height: 1.6;
+.dot-search--inactive .dot-search__label,
+.dot-search--inactive .dot-search__icon,
+.dot-search--inactive .dot-search__input,
+.dot-search--inactive .dot-search__input::placeholder {
+  color: var(--fg-default-muted);
 }
 
 /* ====================================================================
    RESPONSIVE
    ==================================================================== */
 @media (max-width: 860px) {
-  /* Stack panel to bottom sheet on narrow screens */
-  .feedback-panel {
-    top:        auto;
-    right:      0;
-    bottom:     0;
-    left:       0;
-    width:      100%;
-    height:     88vh;
-    padding:    var(--padding-md);
-    transform:  translateY(100%);
-    display:    block;
+  .middle-content {
+    padding: 0 var(--padding-md);
+    height:  auto;
+    min-height: 20vh;
   }
+  .middle-content__inner { max-width: 100%; }
 
-  .feedback-panel.is-open { transform: translateY(0); }
-
-  .middle-content { padding: 0 var(--padding-md); }
+  /* Panel becomes bottom sheet */
+  .feedback-panel {
+    top:       auto !important;
+    right:     0   !important;
+    bottom:    0   !important;
+    left:      0   !important;
+    width:     100% !important;
+    height:    88vh !important;
+    transform: translateY(100%) !important;
+  }
+  .feedback-panel.is-open { transform: translateY(0) !important; }
 
-  .middle-content__inner { max-width: 100%; }
+  .feedback-box {
+    top:    0;
+    right:  0;
+    bottom: 0;
+    left:   0;
+  }
 }
 
 @media (max-width: 480px) {
-  :root { --dot-size: 22px; }
+  :root { --dot-size: 20px; }
+  .h1   { font-size: 22px; }
+  .middle-content { padding: var(--padding-md); }
+}
+
+/* ====================================================================
+   REALLY NARROW — panel flows below bottomContent
+   ==================================================================== */
+@media (max-width: 420px) {
+  /* Pull the panel out of fixed-stacking and let it flow in the document */
+  .feedback-panel {
+    position:  relative !important;
+    top:       auto !important;
+    right:     auto !important;
+    bottom:    auto !important;
+    left:      auto !important;
+    width:     100% !important;
+    height:    auto !important;
+    /* Hide via max-height collapse; no translateY needed */
+    max-height: 0 !important;
+    overflow:   hidden !important;
+    transform:  none !important;
+    transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease) !important;
+    opacity:    0 !important;
+  }
 
-  .h1 { font-size: 22px; }
+  .feedback-panel.is-open {
+    max-height: 1400px !important;
+    opacity:    1 !important;
+    transform:  none !important;
+  }
 
-  .middle-content { height: auto; min-height: 20vh; padding: var(--padding-md); }
+  /* Feedback box fills its parent width, no absolute positioning */
+  .feedback-box {
+    position:   relative !important;
+    top:        auto !important;
+    right:      auto !important;
+    bottom:     auto !important;
+    left:       auto !important;
+    width:      100% !important;
+    min-height: 300px;
+    box-sizing: border-box;
+    transform:  none !important;
+    opacity:    1 !important;
+    margin:     var(--padding-md) 0 !important;
+  }
 }
diff --git a/tokens.css b/tokens.css
new file mode 100644
index 0000000..df99291
--- /dev/null
+++ b/tokens.css
@@ -0,0 +1,80 @@
+/* ====================================================================
+   DESIGN TOKENS — tokens.css
+   Source of truth for all design decisions.
+   ==================================================================== */
+:root {
+  /* ── Foreground ── */
+  --fg-default:       #FCFCFC;
+  --fg-default-muted: #D4D4D4;
+  --fg-inverse:       #1E1E1E;
+  --fg-inverse-muted: #404040;
+
+  /* Semantic foreground — darker (text/icon) + muted (tint) per hue */
+  --fg-red-darker:    #D71111;
+  --fg-red-muted:     #FFE2E0;
+  --fg-orange-darker: #946A00;
+  --fg-orange-muted:  #FFEC9E;
+  --fg-blue-darker:   #006EDB;
+  --fg-blue-muted:    #D1F0FF;
+  --fg-purple-darker: #894CEB;
+  --fg-purple-muted:  #F1E5FF;
+  --fg-green-darker:  #2C8141;
+  --fg-green-muted:   #CAF7CA;
+
+  /* Dull fills — default (unsubmitted) dot state */
+  --fg-red-dull:    #620101;
+  --fg-yellow-dull: #413803;
+  --fg-blue-dull:   #013B3C;
+  --fg-green-dull:  #043710;
+  --fg-purple-dull: #31044B;
+
+  /* Bright error red */
+  --fg-red-bright: #FF4444;
+
+  /* ── Background ── */
+  --bg-default:   #171717;
+  --bg-primary:   #232323;
+  --bg-secondary: #3C3C3C;
+  --bg-tertiary:  #3D3D3D;
+  --bg-inverse:   #E6E6E6;
+
+  /* ── Border ── */
+  --border-default: #494949;
+
+  /* ── Typography ── */
+  --font-heading: 'Space Mono',    'Courier New', monospace;
+  --font-body:    'Space Grotesk', system-ui,     sans-serif;
+
+  --fs-h1:      28px;
+  --fs-h2:      24px;
+  --fs-h3:      20px;
+  --fs-h4:      18px;
+  --fs-p1:      18px;
+  --fs-p2:      16px;
+  --fs-p3:      14px;
+  --fs-caption: 12px;
+
+  /* ── Spacing ── */
+  --padding-xs: 8px;
+  --padding-sm: 16px;
+  --padding-md: 24px;
+  --padding-lg: 40px;
+  --padding-xl: 60px;
+
+  /* Gap scale */
+  --gap-xs: 4px;
+  --gap-sm: 8px;
+  --gap-md: 16px;
+  --gap-lg: 32px;
+
+  /* ── Radii ── */
+  --radii-xs: 4px;
+  --radii-sm: 8px;
+  --radii-md: 12px;
+  --radii-lg: 16px;
+
+  /* ── Misc ── */
+  --dot-size: 28px;
+  --panel-w:  clamp(340px, 38vw, 520px);
+  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
+}