diff --git a/components.css b/components.css
new file mode 100644
index 0000000..78a4bdb
--- /dev/null
+++ b/components.css
@@ -0,0 +1,740 @@
+/* ====================================================================
+   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;
+}
+
+/* Required asterisk — always visible on required fields */
+.input-field:has(:required) .input-field__label::after {
+  content:      '*';
+  color:        var(--fg-red-bright);
+  margin-left:  2px;
+  font-size:    0.65em;
+  vertical-align: super;
+}
+
+/* Suppress browser default red border on :invalid required fields */
+.input-field__input:invalid {
+  box-shadow:   none;
+  border-color: var(--bg-secondary);
+}
+
+/* Error / required-but-empty (JS-driven only) */
+.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;
+}
+
+/* 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(--border-default);
+  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 9ded366..0e0146d 100644
--- a/index.html
+++ b/index.html
@@ -4,145 +4,956 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-  <title>Devyani Jain — Product Designer</title>
-  <meta name="description" content="Devyani Jain is a mission-driven product designer connecting people across physical and digital spaces. Currently designing at GitHub." />
+  <title>Golden Github Seeds — Devyani Jain</title>
+  <meta name="description" content="A garden of hubbers I had the joy of working and connecting with at GitHub. Each dot is someone who left a mark on my experience." />
   <meta name="author" content="Devyani Jain" />
-
-  <!-- Keep this site out of search engines (unlisted portfolio) -->
   <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex" />
   <meta name="googlebot" content="noindex, nofollow" />
 
-  <!-- Open Graph -->
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="Devyani Jain — Product Designer" />
-  <meta property="og:description" content="Mission-driven product designer chasing the magic to connect people across physical and digital spaces. Currently at GitHub." />
-  <meta property="og:url" content="https://devyanijain.github.io/" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Devyani Jain — Product Designer" />
-  <meta name="twitter:description" content="Mission-driven product designer chasing the magic to connect people across physical and digital spaces. Currently at GitHub." />
-
-  <!-- Favicon placeholder -->
-  <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Ctext%20y='.9em'%20font-size='90'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E" />
-
-  <!-- Inter from Google Fonts -->
+  <!-- Space Mono + Space Grotesk -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <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>
-  <div class="frame">
-    <!-- Left: identity / bio (sticky on desktop) -->
-    <aside class="panel panel--intro" id="info">
-      <div class="panel__top">
-        <a class="brand" href="#info" aria-label="Devyani Jain — home">
-          <span class="brand__mark" aria-hidden="true">✦</span>
-          <span class="brand__name">Devyani Jain</span>
-        </a>
-
-        <nav class="nav" aria-label="Primary">
-          <a class="pill nav__item" href="#info">Info</a>
-          <a class="pill nav__item" href="#work">Work</a>
-          <a class="pill nav__item" href="#contact">Contact</a>
-        </nav>
+
+  <!-- ============================================================
+       MAIN — three sections stacked to 100vh
+       ============================================================ -->
+  <div class="home">
+
+    <!-- TOP DOT FIELD (40vh): yellow left | teal right -->
+    <section class="dot-field" id="topContent" aria-label="Yellow and teal dot field"></section>
+
+    <!-- MIDDLE CONTENT (20vh) -->
+    <section class="middle-content" id="middleContent">
+      <div class="middle-content__inner">
+        <h1 class="h1">The people who made GitHub home.</h1>
+        <p class="p1 middle-content__desc">
+          A field of dots, each one a Hubber who made my time at GitHub worth every moment.
+        </p>
+        <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>
+
+    <!-- BOTTOM DOT FIELD (40vh): green left | red middle | purple right -->
+    <section class="dot-field" id="bottomContent" aria-label="Green, red and purple dot field"></section>
+
+  </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
+    ──────────────────────────────────────────────── -->
+    <div class="feedback-box" id="editVariant" role="dialog" aria-modal="true" aria-labelledby="editTitle" hidden>
+
+      <!-- Action Bar -->
+      <div class="actionBar actionBar--bordered">
+        <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">
+          <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 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 can she work on?</label>
+              <div class="input-field__wrapper">
+                <input class="input-field__input" type="text" id="inp-improve" name="improvement" placeholder="Areas of 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 -->
+
+        </form>
+      </div>
+
+      <!-- Footer Bar -->
+      <div class="footerBar footerBar--end">
+        <button class="btn btn--primary" id="submitFeedbackBtn" type="button">Submit</button>
       </div>
+    </div>
 
-      <div class="panel__body">
-        <p class="eyebrow">Product Designer</p>
-        <h1 class="intro">
-          I'm Devyani Jain, a mission-driven product designer chasing after the
-          magic to connect people in physical and digital spaces.
-          <span class="intro__muted">Currently, at GitHub — designing to get
-          rid of AI slop and multiply developer powers.</span>
-        </h1>
+    <!-- ────────────────────────────────────────────────
+         VIEW VARIANT
+    ──────────────────────────────────────────────── -->
+    <div class="feedback-box" id="viewVariant" role="dialog" aria-modal="true" hidden>
+
+      <!-- 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"/>
+          </svg>
+        </button>
       </div>
 
-      <div class="panel__foot" id="contact">
-        <p class="foot__label">Get in touch</p>
-        <div class="pill-row">
-          <a class="pill pill--link" href="mailto:devyanijain0@gmail.com">
-            <span class="pill__dot" aria-hidden="true"></span>
-            devyanijain0@gmail.com
-          </a>
-          <a class="pill pill--link" href="https://www.linkedin.com/in/devyanidesigns/" target="_blank" rel="noopener noreferrer">
-            <span class="pill__dot" aria-hidden="true"></span>
-            LinkedIn
-            <span class="pill__arrow" aria-hidden="true">↗</span>
-          </a>
+      <!-- Content Bar -->
+      <div class="contentBar">
+        <div class="view-field">
+          <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">Relationship</span>
+          <span class="rel-chip" id="vw-relationship"></span>
+        </div>
+        <div class="view-field">
+          <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>
-    </aside>
-
-    <!-- Right: work (scrolls) -->
-    <main class="panel panel--work" id="work">
-      <div class="work__head">
-        <span class="pill pill--label">
-          <span class="pill__dot" aria-hidden="true"></span>
-          Selected Work
-        </span>
+
+      <!-- Footer Bar -->
+      <div class="footerBar footerBar--between">
+        <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>
+        <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>
+        </button>
       </div>
+    </div>
 
-      <article class="card fade-in">
-        <header class="card__head">
-          <h2 class="card__title">Lucid Motors — Design System</h2>
-          <span class="pill pill--meta">Product Designer · 2024</span>
-        </header>
-        <p class="card__desc">
-          Lucid Motors' Electric Integration ecosystem spans 25+ applications
-          (OTA updates, Infotainment, ADAS) supported by six teams and 300+
-          engineers. The goal was to define a shared experience between
-          data-heavy applications across teams with varying functionality and
-          interaction models. Over 12 weeks, I delivered a unified design system
-          and developer tools for three teams. Valued at ~$140K and hosted on
-          Storybook for the first time, the system now enables engineers to
-          build faster and more consistently. It directly supported Lucid Motors
-          during a period of rapid growth — 45% revenue increase that quarter,
-          followed by 65% the next.
-        </p>
-      </article>
-
-      <article class="card fade-in">
-        <header class="card__head">
-          <h2 class="card__title">Lenskart × DIVINE Collection</h2>
-          <span class="pill pill--meta">Creative Design Intern · 2023</span>
-        </header>
-        <p class="card__desc">
-          Lenskart, Asia's largest eyewear retailer, partnered with DIVINE, an
-          Indian rapper with over 5.2 million listeners, to bring a hip-hop
-          eyewear collection to life. I joined the design team focused on concept
-          direction across e-commerce and in-store creative. Our goal was to
-          combine Indian street hip-hop culture with youth-centric eyewear.
-        </p>
-      </article>
-
-      <article class="card fade-in">
-        <header class="card__head">
-          <h2 class="card__title">VisionTranslate</h2>
-          <span class="pill pill--meta">Design Lead · 2023</span>
-        </header>
-        <p class="card__desc">
-          VisionTranslate is a mixed-reality (MR) app built native to Apple
-          VisionOS that translates real-time sign-language, text, and speech.
-          People who are hard-of-hearing face undesirable experiences when
-          communicating with another individual. So, we set out to answer, "Can
-          we create a system to fluently connect sign-language communication
-          better?" VisionTranslate is now on the App Store. I designed the
-          end-to-end user experience and co-led the development. I conducted user
-          research, created accessible mockups, and defined spatial wireframes,
-          eventually giving life to our mission.
+    <!-- ────────────────────────────────────────────────
+         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">
+          <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">
+        <h4 class="h3">Your dot has been planted!</h4>
+        <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>
-      </article>
 
-      <footer class="work__foot">
-        <p>© <span id="year">2024</span> Devyani Jain</p>
-        <a class="foot__top" href="#info">Back to top ↑</a>
-      </footer>
-    </main>
-  </div>
+        <!-- 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>
+
+      <!-- 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>
+
+  <!-- ============================================================
+       SCRIPT
+       ============================================================ -->
   <script>
-    document.getElementById("year").textContent = new Date().getFullYear();
+    'use strict';
+
+    /* ── Relationship → dot color ── */
+    const REL_COLOR = {
+      'Manager/PM':                  'yellow',
+      'Colleague':                     'teal',
+      'Direct Report':            'green',
+      '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
+    ──────────────────────────────────────────────── */
+    const topDots = [
+      // Yellow (x 2–44%)
+      {id:'y01',c:'yellow',x:3,  y:10,s:false},
+      {id:'y02',c:'yellow',x:11, y:10,s:false},
+      {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:false},
+      {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:false},
+      {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:false},
+      {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:false},
+      {id:'y22',c:'yellow',x:43, y:74,s:false},
+      // 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:false},
+      {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:false},
+      {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:false},
+      {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:false},
+      {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:false},
+      {id:'t24',c:'teal',x:95,y:70,s:false},
+    ];
+
+    const bottomDots = [
+      // Green (x 0–28%)
+      {id:'g01',c:'green', x:11,y:8,s:false},
+      {id:'g02',c:'green', x:21,y:8, s:false},
+      {id:'g03',c:'green', x:1, y:25,s:false},
+      {id:'g04',c:'green', x:9, y:25,s:false},
+      {id:'g05',c:'green', x:18,y:25,s:false},
+      {id:'g06',c:'green', x:26,y:25,s:false},
+      {id:'g07',c:'green', x:3, y:42,s:false},
+      {id:'g08',c:'green', x:13,y:42,s:false},
+      {id:'g09',c:'green', x:23,y:42,s:false},
+      {id:'g10',c:'green', x:0, y:59,s:false},
+      {id:'g11',c:'green', x:10,y:59,s:false},
+      {id:'g12',c:'green', x:20,y:59,s:false},
+      {id:'g13',c:'green', x:2, y:75,s:false},
+      {id:'g14',c:'green', x:14,y:75,s:false},
+      {id:'g15',c:'green', x:24,y:75,s:false},
+      // Red (x 32–59%)
+      {id:'r01',c:'red',   x:35,y:10,s:false},
+      {id:'r02',c:'red',   x:46,y:10,s:false},
+      {id:'r03',c:'red',   x:32,y:27,s:false},
+      {id:'r04',c:'red',   x:43,y:27,s:false},
+      {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:false},
+      {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:false},
+      {id:'r13',c:'red',   x:50,y:76,s:false},
+      // Purple (x 64–98%)
+      {id:'p01',c:'purple',x:66,y:8, s:false},
+      {id:'p02',c:'purple',x:77,y:8,s:false},
+      {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:false},
+      {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:false},
+      {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:false},
+      {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:false},
+      {id:'p19',c:'purple',x:96,y:72,s:false},
+    ];
+
+    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.dataset.dotId = dot.id;
+        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));
+          el.addEventListener('mouseenter', () => showTooltip(dot, el));
+          el.addEventListener('mouseleave', hideTooltip);
+        } else {
+          el.disabled = true;
+          el.setAttribute('aria-hidden', 'true');
+          el.tabIndex = -1;
+        }
+        container.appendChild(el);
+      });
+    }
+
+    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) {
+      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');
+      allBoxes.forEach(b => { b.hidden = true; });
+      setActiveDot(null);
+      dotSearchEl.classList.remove('dot-search--inactive');
+    }
+
+    function openEdit() {
+      showOnly(editBox);
+      openPanel();
+    }
+
+    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;
+      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();
+    }
+
+    function openConfirm() {
+      showOnly(confBox);
+      openPanel();
+    }
+
+    /* ────────────────────────────────────────────────
+       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;
+    }
+
+    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', () => {
+      // 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();
+    });
+
+    // ── 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', () => {
+      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();
+    });
+
+    document.getElementById('prevDotBtn').addEventListener('click', () => {
+      viewIndex = (viewIndex - 1 + submittedDots.length) % submittedDots.length;
+      showFeedback(submittedDots[viewIndex]);
+    });
+    document.getElementById('nextDotBtn').addEventListener('click', () => {
+      viewIndex = (viewIndex + 1) % submittedDots.length;
+      showFeedback(submittedDots[viewIndex]);
+    });
+
+    // Close on Escape
+    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 cbe60ac..def64b8 100644
--- a/style.css
+++ b/style.css
@@ -1,373 +1,338 @@
-/* ------------------------------------------------------------------ *
- * Devyani Jain — portfolio
- * Original design. Framed "card UI" layout with a sticky identity
- * column and scrollable work, warm off-white palette, pill accents.
- * Inspired in spirit by minimal typographic + framed-card portfolios;
- * all code original.
- * ------------------------------------------------------------------ */
-
-:root {
-  /* Color — warm, soft, light */
-  --bg: #ece8e1;
-  --surface: #f7f5f1;
-  --surface-2: #fffdfa;
-  --text: #1b1a18;
-  --muted: #7a756c;
-  --line: #e4dfd6;
-  --accent: #e0553a;
-  --accent-soft: #f3d9d0;
-
-  /* Type */
-  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
-    Arial, sans-serif;
-
-  /* Shape & motion */
-  --radius-frame: 26px;
-  --radius-card: 20px;
-  --radius-pill: 999px;
-  --ease: cubic-bezier(0.22, 1, 0.36, 1);
-
-  /* Spacing */
-  --gap: 10px;
-  --pad: clamp(1.5rem, 3.2vw, 3rem);
-}
+/* ====================================================================
+   LAYOUT — style.css
+   Page-level layout only. Tokens: tokens.css. Components: components.css.
+   ==================================================================== */
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-  -webkit-text-size-adjust: 100%;
-}
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { -webkit-text-size-adjust: 100%; background: var(--bg-default); }
 
 body {
-  margin: 0;
-  padding: var(--gap);
-  min-height: 100vh;
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--font);
-  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);
-  line-height: 1.6;
-  letter-spacing: -0.01em;
-  -webkit-font-smoothing: antialiased;
+  background:  var(--bg-default);
+  color:       var(--fg-default);
+  font-family: var(--font-body);
+  font-size:   var(--fs-p2);
+  line-height: 1.5;
+  min-height:  100vh;
+  overflow-x:  hidden;
+  -webkit-font-smoothing:  antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1,
-h2,
-p {
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-/* ----------------------------- Frame ------------------------------ */
-
-.frame {
-  display: grid;
-  grid-template-columns: minmax(360px, 460px) 1fr;
-  gap: var(--gap);
-  align-items: start;
-}
-
-.panel {
-  background: var(--surface);
-  border-radius: var(--radius-frame);
-  padding: var(--pad);
-}
+button, input, textarea, select { font-family: inherit; }
 
-/* Left column sticks; right column scrolls with the page */
-.panel--intro {
-  position: sticky;
-  top: var(--gap);
-  height: calc(100vh - var(--gap) * 2);
-  display: flex;
+/* ====================================================================
+   HOME LAYOUT — three rows filling 100vh
+   ==================================================================== */
+.home {
+  display:        flex;
   flex-direction: column;
-  justify-content: space-between;
-  gap: 2rem;
-  overflow: hidden;
+  min-height:     100vh;
 }
 
-.panel--work {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap);
-  min-height: calc(100vh - var(--gap) * 2);
-  background: transparent;
-  padding: 0;
+/* Dot fields (40vh each) */
+.dot-field {
+  position:   relative;
+  flex:       none;
+  height:     40vh;
+  background: var(--bg-default);
+  overflow:   hidden;
 }
 
-/* ------------------------------ Pills ----------------------------- */
-
-.pill {
-  display: inline-flex;
+/* Middle content (20vh) */
+.middle-content {
+  flex:        none;
+  height:      20vh;
+  display:     flex;
   align-items: center;
-  gap: 0.45rem;
-  padding: 0.5rem 0.9rem;
-  border-radius: var(--radius-pill);
-  background: var(--surface-2);
-  border: 1px solid var(--line);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text);
-  line-height: 1;
-  transition: background 0.25s var(--ease), color 0.25s var(--ease),
-    border-color 0.25s var(--ease), transform 0.25s var(--ease);
-}
-
-.pill__dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--accent);
-  flex: none;
-}
-
-.pill__arrow {
-  transition: transform 0.25s var(--ease);
+  background:  transparent;
+  padding:     0 var(--padding-lg);
+  z-index:     1;
 }
 
-/* ---------------------------- Brand / nav ------------------------- */
-
-.panel__top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
+.middle-content__inner {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--padding-sm);
+  max-width:      520px;
 }
 
-.brand {
-  display: inline-flex;
+.middle-content__actions {
+  display:    flex;
   align-items: center;
-  gap: 0.5rem;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-
-.brand__mark {
-  color: var(--accent);
-  font-size: 1.1em;
-}
-
-.nav {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
+  gap:        var(--padding-xs);
+  align-self: flex-start;
 }
 
-.nav__item {
-  background: var(--surface-2);
+.middle-content__desc {
+  color:       var(--fg-default-muted);
+  font-family: var(--font-body);
+  font-size:   var(--fs-p1);
+  line-height: 1.55;
 }
 
-.nav__item:hover,
-.nav__item:focus-visible {
-  background: var(--text);
-  color: var(--surface);
-  border-color: var(--text);
-}
-
-/* ----------------------------- Intro ------------------------------ */
-
-.panel__body {
-  display: flex;
+/* ====================================================================
+   DOTS
+   ==================================================================== */
+.dot {
+  position:      absolute;
+  width:         var(--dot-size);
+  height:        var(--dot-size);
+  border-radius: 50%;
+  border:        none;
+  transform:     translate(-50%, -50%);
+  transition:    box-shadow 0.25s var(--ease);
+  cursor:        default;
+}
+
+/* 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 — 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);
+  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);
+  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);
+  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);
+  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);
+  pointer-events: auto;
+  cursor:         pointer;
+}
+
+.dot--submitted:hover,
+.dot--submitted:focus-visible {
+  box-shadow: 0 0 24px 10px rgba(255,255,255,0.2);
+  outline:    none;
+}
+
+/* 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);
+}
+
+/* Dot hover tooltip */
+.dot-tooltip {
+  position:       fixed;
+  z-index:        200;
+  display:        flex;
   flex-direction: column;
-  gap: 1.5rem;
+  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;
 }
 
-.eyebrow {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--accent);
-}
+.dot-tooltip[hidden] { display: none !important; }
 
-.intro {
-  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
-  line-height: 1.18;
+.dot-tooltip__name {
+  color:       var(--fg-default);
   font-weight: 600;
-  letter-spacing: -0.03em;
-}
-
-.intro__muted {
-  color: var(--muted);
-}
-
-/* --------------------------- Contact ------------------------------ */
-
-.panel__foot {
-  display: flex;
-  flex-direction: column;
-  gap: 0.9rem;
-}
-
-.foot__label {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.pill-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.pill--link:hover,
-.pill--link:focus-visible {
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
-  transform: translateY(-1px);
-}
-
-.pill--link:hover .pill__dot {
-  background: #fff;
-}
-
-.pill--link:hover .pill__arrow {
-  transform: translate(2px, -2px);
-}
-
-/* ------------------------------ Work ------------------------------ */
-
-.work__head {
-  padding: 0.25rem 0.25rem 0;
-}
-
-.pill--label {
-  background: var(--surface);
-}
-
-.card {
-  background: var(--surface);
-  border-radius: var(--radius-card);
-  padding: var(--pad);
-  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
 }
 
-.card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 18px 40px -24px rgba(27, 26, 24, 0.35);
+.dot-tooltip__role {
+  color: var(--fg-default-muted);
 }
 
-.card__head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 1.1rem;
+/* "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; }
 
-.card__title {
-  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem);
-  font-weight: 600;
-  letter-spacing: -0.025em;
-  line-height: 1.15;
+@keyframes yourDotFade {
+  0%   { opacity: 0; transform: translateY(-4px); }
+  10%  { opacity: 1; transform: translateY(0); }
+  80%  { opacity: 1; }
+  100% { opacity: 0; }
 }
 
-.pill--meta {
-  background: var(--surface-2);
-  color: var(--muted);
-  white-space: nowrap;
-  font-weight: 500;
+/* ── Dot search widget ── */
+.dot-search {
+  position:       fixed;
+  bottom:         var(--padding-md);
+  left:           var(--padding-md);
+  z-index:        150;
+  display:        flex;
+  flex-direction: column;
+  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;
 }
 
-.card__desc {
-  color: var(--muted);
-  max-width: 62ch;
-  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
+.dot-search__label {
+  color:       var(--fg-default-muted);
+  font-size:   var(--text-caption-size);
+  font-family: var(--text-caption-family);
+  user-select: none;
 }
 
-/* ---------------------------- Work foot --------------------------- */
-
-.work__foot {
-  margin-top: auto;
-  display: flex;
-  flex-wrap: wrap;
+.dot-search__input-wrapper {
+  position: relative;
+  display:  flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1.25rem var(--pad);
-  color: var(--muted);
-  font-size: 0.9375rem;
-}
-
-.foot__top {
-  transition: color 0.25s var(--ease);
-}
-
-.foot__top:hover,
-.foot__top:focus-visible {
-  color: var(--text);
 }
 
-/* --------------------------- Fade-in ------------------------------ *
- * Cards are visible by default. Where supported, they fade + rise as
- * they scroll into view. Fully progressive; respects reduced motion.
- * ------------------------------------------------------------------ */
-
-@media (prefers-reduced-motion: no-preference) {
-  @supports (animation-timeline: view()) {
-    .fade-in {
-      animation: fade-rise linear both;
-      animation-timeline: view();
-      animation-range: entry 0% cover 20%;
-    }
+.dot-search__icon {
+  position:      absolute;
+  left:          var(--padding-xs);
+  color:         var(--fg-default-muted);
+  pointer-events: none;
+  flex-shrink:   0;
+}
+
+.dot-search__input {
+  background:    var(--bg-default);
+  border:        1.5px solid var(--bg-tertiary);
+  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-size:     var(--text-p3-size);
+  font-family:   var(--text-p3-family);
+  width:         100%;
+  outline:       none;
+  box-sizing:    border-box;
+}
+.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; }
+
+/* Inactive state — shown while feedback panel is open */
+.dot-search--inactive {
+  opacity:        0.45;
+  pointer-events: none;
+}
+.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) {
+  .middle-content {
+    padding: 0 var(--padding-md);
+    height:  auto;
+    min-height: 20vh;
   }
-}
-
-@keyframes fade-rise {
-  from {
-    opacity: 0;
-    transform: translateY(26px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* --------------------------- Responsive --------------------------- */
-
-@media (max-width: 900px) {
-  .frame {
-    grid-template-columns: 1fr;
-  }
-
-  .panel--intro {
-    position: static;
-    height: auto;
-    min-height: min(88vh, 640px);
+  .middle-content__inner { max-width: 100%; }
+
+  /* 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; }
 
-  .panel--work {
-    min-height: 0;
+  .feedback-box {
+    top:    0;
+    right:  0;
+    bottom: 0;
+    left:   0;
   }
 }
 
-@media (max-width: 520px) {
-  :root {
-    --pad: 1.4rem;
+@media (max-width: 480px) {
+  :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;
   }
 
-  .panel__top {
-    align-items: flex-start;
+  .feedback-panel.is-open {
+    max-height: 1400px !important;
+    opacity:    1 !important;
+    transform:  none !important;
   }
 
-  .card__head {
-    flex-direction: column;
-    align-items: flex-start;
+  /* 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);
+}