Align Neural Lab interface with KrazyKitty ultraviolet portfolio

app.py

@@ -10,476 +10,223 @@ from research_library import collection_choices, render_collection
 
 CSS = """
 :root {
-  --kk-void: #090611;
-  --kk-surface: #170D2B;
-  --kk-deep: #6D28D9;
-  --kk-violet: #8B5CF6;
-  --kk-ultraviolet: #A855F7;
-  --kk-lavender: #D8B4FE;
-  --kk-mist: #E2E0F0;
+  --kk-void: #090611; --kk-surface: #170D2B; --kk-deep: #6D28D9;
+  --kk-violet: #8B5CF6; --kk-ultraviolet: #A855F7;
+  --kk-lavender: #D8B4FE; --kk-mist: #E2E0F0;
 }
-
-body,
-.gradio-container {
-  color: var(--kk-mist) !important;
-  background: linear-gradient(145deg, var(--kk-void), var(--kk-surface), var(--kk-void)) !important;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+body, .gradio-container {
+  background: var(--kk-void) !important; color: var(--kk-mist) !important;
+  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif !important;
 }
-
 .gradio-container {
-  --body-background-fill: var(--kk-void);
-  --body-text-color: var(--kk-mist);
-  --block-background-fill: var(--kk-surface);
-  --block-border-color: var(--kk-deep);
-  --block-label-text-color: var(--kk-lavender);
-  --input-background-fill: var(--kk-void);
-  --input-border-color: var(--kk-violet);
-  --input-placeholder-color: var(--kk-lavender);
-  --button-primary-background-fill: var(--kk-deep);
-  --button-primary-text-color: var(--kk-mist);
-  --button-secondary-background-fill: var(--kk-surface);
-  --button-secondary-text-color: var(--kk-lavender);
-  max-width: 100% !important;
-  padding: 0 !important;
-}
-
-.gradio-container::before {
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background-image:
-    linear-gradient(var(--kk-deep) 1px, transparent 1px),
-    linear-gradient(90deg, var(--kk-deep) 1px, transparent 1px);
-  background-size: 52px 52px;
-  content: "";
-  opacity: 0.08;
-  pointer-events: none;
-}
-
-.gradio-container a {
-  color: var(--kk-lavender) !important;
-  text-underline-offset: 0.2em;
-}
-
-.gradio-container :where(a, button, input, [tabindex]):focus-visible {
-  outline: 3px solid var(--kk-lavender) !important;
-  outline-offset: 4px !important;
-}
-
-.gradio-container ::selection {
-  color: var(--kk-void);
-  background: var(--kk-lavender);
-}
-
-.lab-shell {
-  inline-size: min(calc(100% - 2rem), 1180px);
-  margin-inline: auto;
-}
-
-.lab-header {
-  border-block-end: 1px solid var(--kk-deep);
-  background: var(--kk-void);
-}
-
-.lab-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-block-size: 4.8rem;
-  gap: 1rem;
-}
-
-.lab-brand {
-  color: var(--kk-mist);
-  font-family: "Cascadia Code", Consolas, monospace;
-  font-weight: 900;
-  letter-spacing: 0.08em;
-}
-
-.lab-nav span:last-child {
-  color: var(--kk-lavender);
-  font-family: "Cascadia Code", Consolas, monospace;
-  font-size: 0.74rem;
-  letter-spacing: 0.08em;
-}
-
-.lab-hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
-  align-items: center;
-  min-block-size: 650px;
-  padding-block: clamp(4.5rem, 10vw, 7.5rem);
-  gap: clamp(2rem, 7vw, 6rem);
-}
-
-.lab-kicker,
-.section-kicker,
-.detail-eyebrow {
-  color: var(--kk-lavender);
-  font-family: "Cascadia Code", Consolas, monospace;
-  font-size: 0.76rem;
-  font-weight: 900;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-}
-
-.lab-hero h1 {
-  max-inline-size: 10ch;
-  margin-block: 0.7rem 1.3rem;
-  color: var(--kk-mist);
-  font-size: clamp(3.4rem, 9.5vw, 7.7rem);
-  line-height: 0.96;
-  letter-spacing: -0.075em;
-}
-
-.lab-hero h1 span {
-  display: block;
-  color: var(--kk-lavender);
-}
-
-.lab-lede {
-  max-inline-size: 62ch;
-  color: var(--kk-lavender);
-  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
-  line-height: 1.65;
-}
-
-.hero-console {
-  padding: 1.3rem;
-  border: 1px solid var(--kk-violet);
-  border-radius: 28px;
-  background: var(--kk-surface);
-  box-shadow: 0 2rem 5rem var(--kk-void);
-}
-
-.console-mark {
-  display: grid;
-  place-items: center;
-  min-block-size: 15rem;
-  border: 1px solid var(--kk-deep);
-  border-radius: 18px;
-  background: linear-gradient(145deg, var(--kk-deep), var(--kk-surface));
-  color: var(--kk-mist);
-  font-size: clamp(3rem, 8vw, 5.2rem);
-  font-weight: 950;
-  letter-spacing: -0.08em;
-}
-
-.console-mark span {
-  color: var(--kk-lavender);
-}
-
-.console-list {
-  display: grid;
-  margin-block-start: 1rem;
-  gap: 0.55rem;
-}
-
-.console-list span {
-  display: flex;
-  justify-content: space-between;
-  padding-block: 0.55rem;
-  border-block-start: 1px solid var(--kk-deep);
-  color: var(--kk-lavender);
-  font-family: "Cascadia Code", Consolas, monospace;
-  font-size: 0.76rem;
-}
-
-.console-list strong {
-  color: var(--kk-mist);
-}
-
-.lab-section {
-  padding-block: clamp(4rem, 9vw, 7rem);
-  border-block-start: 1px solid var(--kk-deep);
-}
-
-.lab-section h2 {
-  margin-block: 0.5rem 1rem;
-  color: var(--kk-mist);
-  font-size: clamp(2rem, 5vw, 4rem);
-  line-height: 1.05;
-  letter-spacing: -0.05em;
-}
-
-.section-lede {
-  max-inline-size: 68ch;
-  color: var(--kk-lavender);
-  font-size: 1.05rem;
-  line-height: 1.7;
-}
-
-.portfolio-grid,
-.principle-grid,
-.collection-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin-block-start: 2rem;
-  gap: 1rem;
-}
-
-.portfolio-card,
-.principle-card,
-.collection-card {
-  min-block-size: 13rem;
-  padding: clamp(1.25rem, 3vw, 2rem);
-  border: 1px solid var(--kk-deep);
-  border-radius: 18px;
-  background: var(--kk-surface);
-  box-shadow: 0 1rem 2.5rem var(--kk-void);
-}
-
-.portfolio-card h3,
-.principle-card h3,
-.collection-card h3,
-.project-detail h2,
-.project-detail h3 {
-  margin-block: 0.5rem 0.7rem;
-  color: var(--kk-mist);
-  line-height: 1.15;
-}
-
-.portfolio-card p,
-.principle-card p,
-.collection-card p,
-.project-detail p,
-.project-detail li {
-  color: var(--kk-lavender);
-  line-height: 1.65;
-}
-
-.state-badge {
-  display: inline-flex;
-  padding: 0.3rem 0.65rem;
-  border: 1px solid var(--kk-violet);
-  border-radius: 999px;
-  color: var(--kk-lavender);
-  font-family: "Cascadia Code", Consolas, monospace;
-  font-size: 0.67rem;
-  font-weight: 900;
-  letter-spacing: 0.08em;
-}
-
-.state-badge.verified {
-  border-color: var(--kk-lavender);
-  color: var(--kk-mist);
-}
-
-.state-badge.private {
-  border-style: dashed;
-  border-color: var(--kk-lavender);
-  color: var(--kk-mist);
-}
-
-.state-badge.proposed,
-.state-badge.planned {
-  border-style: dashed;
-}
-
-.explorer-wrap {
-  inline-size: min(calc(100% - 2rem), 1180px) !important;
-  margin-inline: auto !important;
-  padding-block-end: clamp(4rem, 9vw, 7rem) !important;
-  gap: 1rem !important;
-}
-
-.explorer-panel {
-  border: 1px solid var(--kk-deep) !important;
-  border-radius: 18px !important;
-  background: var(--kk-surface) !important;
-}
-
-.project-detail {
-  min-block-size: 31rem;
-  padding: clamp(1.3rem, 3vw, 2.2rem);
-  border: 1px solid var(--kk-violet);
-  border-radius: 18px;
-  background: var(--kk-surface);
-}
-
-.collection-detail {
-  min-block-size: 22rem;
-  padding: clamp(1.3rem, 3vw, 2.2rem);
-  border: 1px solid var(--kk-violet);
-  border-radius: 18px;
-  background: var(--kk-surface);
-}
-
-.collection-detail h3 {
-  margin-block: 0.7rem;
-  color: var(--kk-mist);
-  font-size: clamp(1.55rem, 3vw, 2.3rem);
-}
-
-.collection-detail p,
-.collection-detail dd {
-  color: var(--kk-lavender);
-  line-height: 1.65;
-}
-
-.collection-facts {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
-  margin-block: 1.5rem;
-}
-
-.collection-facts div,
-.scope-note {
-  padding: 1rem;
-  border: 1px solid var(--kk-deep);
-  border-radius: 12px;
-  background: var(--kk-void);
-}
-
-.collection-facts dt {
-  color: var(--kk-lavender);
-  font-family: "Cascadia Code", Consolas, monospace;
-  font-size: 0.72rem;
-  font-weight: 900;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.collection-facts dd {
-  margin: 0.4rem 0 0;
-  color: var(--kk-mist);
-  font-weight: 850;
-}
-
-.detail-topline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.project-detail h2 {
-  font-size: clamp(2rem, 4vw, 3.2rem);
-  letter-spacing: -0.04em;
-}
-
-.project-detail h3 {
-  margin-block-start: 1.5rem;
-}
-
-.project-detail ul {
-  padding-inline-start: 1.2rem;
-}
-
-.project-detail li + li {
-  margin-block-start: 0.4rem;
-}
-
-.next-gate {
-  margin-block: 1.5rem;
-  padding: 1rem;
-  border-inline-start: 0.35rem solid var(--kk-ultraviolet);
-  background: var(--kk-void);
-}
-
-.next-gate p {
-  margin-block-end: 0;
-}
-
-.project-link {
-  display: inline-flex;
-  align-items: center;
-  min-block-size: 3rem;
-  padding-inline: 1rem;
-  border: 1px solid var(--kk-violet);
-  border-radius: 999px;
-  background: var(--kk-deep);
-  color: var(--kk-mist) !important;
-  font-weight: 850;
+  --body-background-fill: #090611; --body-text-color: #E2E0F0;
+  --body-text-color-subdued: #D8B4FE;
+  --block-background-fill: #170D2B; --block-background-fill-dark: #170D2B;
+  --block-border-color: #6D28D9; --block-border-color-dark: #6D28D9;
+  --block-label-background-fill: #170D2B; --block-label-background-fill-dark: #170D2B;
+  --block-label-text-color: #D8B4FE; --block-label-text-color-dark: #D8B4FE;
+  --block-title-text-color: #E2E0F0; --block-title-text-color-dark: #E2E0F0;
+  --input-background-fill: #090611; --input-background-fill-dark: #090611;
+  --input-border-color: #8B5CF6; --input-border-color-dark: #8B5CF6;
+  --input-text-color: #E2E0F0; --input-text-color-dark: #E2E0F0;
+  --input-placeholder-color: #D8B4FE; --input-placeholder-color-dark: #D8B4FE;
+  --button-primary-background-fill: #6D28D9; --button-primary-background-fill-dark: #6D28D9;
+  --button-primary-background-fill-hover: #8B5CF6; --button-primary-background-fill-hover-dark: #8B5CF6;
+  --button-primary-text-color: #E2E0F0; --button-primary-text-color-dark: #E2E0F0;
+  --button-secondary-background-fill: #170D2B; --button-secondary-background-fill-dark: #170D2B;
+  --button-secondary-text-color: #D8B4FE; --button-secondary-text-color-dark: #D8B4FE;
+  --checkbox-background-color: #090611; --checkbox-background-color-dark: #090611;
+  --checkbox-background-color-selected: #6D28D9; --checkbox-background-color-selected-dark: #6D28D9;
+  --checkbox-label-background-fill: #090611; --checkbox-label-background-fill-dark: #090611;
+  --checkbox-label-background-fill-selected: #170D2B; --checkbox-label-background-fill-selected-dark: #170D2B;
+  --checkbox-label-text-color: #E2E0F0; --checkbox-label-text-color-dark: #E2E0F0;
+  --background-fill-primary: #090611; --background-fill-primary-dark: #090611;
+  --background-fill-secondary: #170D2B; --background-fill-secondary-dark: #170D2B;
+  --border-color-primary: #6D28D9; --border-color-primary-dark: #6D28D9;
+  --color-accent: #8B5CF6;
+  max-width: 100% !important; padding: 0 !important; font-size: 16px !important;
+  background-image: linear-gradient(rgba(109,40,217,.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(109,40,217,.07) 1px, transparent 1px) !important;
+  background-size: 64px 64px !important;
+}
+.gradio-container .lab-shell, .gradio-container .neko-shell {
+  width: min(calc(100% - 3rem), 1180px); margin-inline: auto;
+}
+.gradio-container a { color: var(--kk-lavender); text-underline-offset: .25em; }
+.gradio-container .main { max-width: 100% !important; padding: 0 !important; }
+.gradio-container .html-container { padding: 0 !important; }
+.gradio-container :where(a, button, input, textarea, [tabindex]):focus-visible {
+  outline: 3px solid var(--kk-lavender) !important; outline-offset: 4px !important;
+}
+.gradio-container ::selection { background: var(--kk-lavender); color: var(--kk-void); }
+.gradio-container .lab-header, .gradio-container .neko-header {
+  background: var(--kk-void); border-bottom: 1px solid var(--kk-deep); padding: 0;
+}
+.gradio-container .lab-nav {
+  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
+  min-height: 80px; flex-wrap: wrap; padding-block: 1rem;
+}
+.gradio-container .lab-brand {
+  color: var(--kk-mist); font-size: .9rem; font-weight: 850; letter-spacing: .04em;
   text-decoration: none;
 }
-
-a.collection-card {
-  display: block;
-  color: var(--kk-mist) !important;
-  text-decoration: none;
-}
-
-a.collection-card:hover {
-  border-color: var(--kk-lavender);
-}
-
-.truth-banner {
-  margin-block-start: 2rem;
-  padding: 1rem;
-  border: 1px solid var(--kk-lavender);
-  border-radius: 10px;
-  color: var(--kk-mist);
-  background: var(--kk-deep);
-  font-family: "Cascadia Code", Consolas, monospace;
-  font-size: 0.76rem;
-  font-weight: 900;
-  letter-spacing: 0.07em;
-  text-align: center;
-}
-
-.lab-footer {
-  padding-block: 2rem;
-  border-block-start: 1px solid var(--kk-violet);
-  background: var(--kk-void);
-}
-
-.footer-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  color: var(--kk-lavender);
-  font-family: "Cascadia Code", Consolas, monospace;
-  font-size: 0.75rem;
-}
-
+.gradio-container .lab-nav nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
+.gradio-container .lab-nav nav a {
+  font: 700 .75rem Consolas, monospace; letter-spacing: .08em; text-decoration: none;
+}
+.gradio-container .lab-nav nav a:hover { color: var(--kk-mist); }
+.gradio-container .lab-hero, .gradio-container .neko-hero {
+  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .8fr);
+  align-items: center; gap: 3rem; min-height: 0; padding-block: clamp(3rem, 6vw, 5rem);
+}
+.gradio-container .lab-kicker, .gradio-container .neko-kicker,
+.gradio-container .section-kicker, .gradio-container .detail-eyebrow,
+.gradio-container .boundary-label {
+  color: var(--kk-lavender); font: 700 .75rem Consolas, monospace;
+  letter-spacing: .13em; text-transform: uppercase;
+}
+.gradio-container .lab-hero h1, .gradio-container .neko-hero h1 {
+  font-size: clamp(3rem, 7.5vw, 6.4rem); line-height: 1; font-weight: 900;
+  letter-spacing: -.065em; margin: 1.1rem 0 1.5rem; max-width: none;
+}
+.gradio-container .lab-hero h1 span, .gradio-container .neko-hero h1 span {
+  display: block; color: var(--kk-lavender);
+}
+.gradio-container .lab-lede, .gradio-container .neko-hero p {
+  font-size: 1.1rem; line-height: 1.8; color: var(--kk-lavender); max-width: 58ch; margin: 0;
+}
+.gradio-container .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
+.gradio-container .project-link {
+  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
+  padding: .7rem 1.2rem; background: var(--kk-deep); color: var(--kk-mist);
+  border: 1px solid var(--kk-violet); border-radius: 8px; font-size: .9rem;
+  font-weight: 750; text-decoration: none; line-height: 1.4;
+}
+.gradio-container .project-link.secondary { background: var(--kk-surface); }
+.gradio-container .project-link:hover { background: var(--kk-violet); color: var(--kk-void); }
+.gradio-container .hero-console, .gradio-container .boundary-card {
+  padding: 1.6rem; border: 1px solid var(--kk-violet); border-radius: 16px;
+  background: linear-gradient(145deg, var(--kk-surface), var(--kk-void));
+  box-shadow: 0 0 48px rgba(109,40,217,.14);
+}
+.gradio-container .console-mark {
+  display: flex; align-items: center; justify-content: center; min-height: 140px;
+  font-size: 3.8rem; letter-spacing: -.08em; font-weight: 900; color: var(--kk-mist);
+  border-bottom: 1px solid var(--kk-deep); margin-bottom: 1rem;
+}
+.gradio-container .console-mark span { color: var(--kk-violet); }
+.gradio-container .console-list { display: grid; gap: .7rem; }
+.gradio-container .console-list span {
+  display: flex; justify-content: space-between; gap: .5rem;
+  font: .7rem Consolas, monospace; color: var(--kk-lavender);
+}
+.gradio-container .console-list strong { color: var(--kk-mist); }
+.gradio-container .boundary-card strong {
+  display: block; font-size: 1.6rem; line-height: 1.3; margin: 1rem 0; color: var(--kk-mist);
+}
+.gradio-container .boundary-card p { font-size: .95rem; line-height: 1.8; color: var(--kk-lavender); }
+.gradio-container .lab-section { padding-block: 3rem; border-top: 1px solid var(--kk-deep); }
+.gradio-container .lab-section h2, .gradio-container .neko-links h2 {
+  font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 850; line-height: 1.15;
+  letter-spacing: -.04em; margin: .8rem 0 1rem; color: var(--kk-mist);
+}
+.gradio-container .section-lede { font-size: 1rem; line-height: 1.8; color: var(--kk-lavender); max-width: 72ch; }
+.gradio-container .portfolio-grid, .gradio-container .principle-grid, .gradio-container .collection-grid {
+  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem;
+}
+.gradio-container .portfolio-card, .gradio-container .principle-card, .gradio-container .collection-card {
+  min-height: 0; padding: 1.5rem; border: 1px solid var(--kk-deep);
+  border-radius: 12px; background: var(--kk-surface); text-align: left; text-decoration: none;
+}
+.gradio-container .portfolio-card h3, .gradio-container .principle-card h3,
+.gradio-container .collection-card h3 {
+  font-size: 1.2rem; font-weight: 800; line-height: 1.4; color: var(--kk-mist); margin: .8rem 0 .5rem;
+}
+.gradio-container .portfolio-card p, .gradio-container .principle-card p,
+.gradio-container .collection-card p {
+  color: var(--kk-lavender); font-size: .95rem; line-height: 1.7; margin: 0;
+}
+.gradio-container a.collection-card:hover { border-color: var(--kk-lavender); }
+.gradio-container .state-badge {
+  display: inline-flex; border: 1px solid var(--kk-violet); border-radius: 5px;
+  padding: .3rem .5rem; font: 700 .65rem Consolas, monospace; letter-spacing: .06em;
+  color: var(--kk-lavender); line-height: 1.4;
+}
+.gradio-container .explorer-wrap, .gradio-container .demo-wrap {
+  width: min(calc(100% - 3rem),1180px) !important; margin: 0 auto 2rem !important;
+  padding: 0 !important; gap: 1.25rem !important; border: 0;
+}
+.gradio-container .explorer-panel, .gradio-container .demo-panel {
+  padding: 1.5rem !important; border: 1px solid var(--kk-deep) !important;
+  border-radius: 12px !important; background: var(--kk-surface) !important; gap: 1rem !important;
+}
+.gradio-container .explorer-panel .prose h2, .gradio-container .demo-panel .prose h2 {
+  font-size: 1.35rem; line-height: 1.35; font-weight: 800; margin: 0 0 .8rem;
+}
+.gradio-container .explorer-panel .prose h3, .gradio-container .demo-panel .prose h3 {
+  font-size: 1rem; font-weight: 800; color: var(--kk-lavender); margin: .8rem 0;
+}
+.gradio-container .prose p, .gradio-container .prose li { line-height: 1.75; }
+.gradio-container .project-detail, .gradio-container .collection-detail {
+  min-height: 0; height: 100%; padding: 1.75rem; border: 1px solid var(--kk-deep);
+  border-radius: 12px; background: var(--kk-surface);
+}
+.gradio-container .detail-topline { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
+.gradio-container .project-detail h2 {
+  font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 850; letter-spacing: -.04em; margin: 1rem 0;
+}
+.gradio-container .collection-detail h3 { font-size: 1.5rem; font-weight: 800; line-height: 1.3; margin: 1rem 0; }
+.gradio-container .project-detail h3 { font-size: 1rem; font-weight: 800; margin: 1.4rem 0 .6rem; }
+.gradio-container .project-detail p, .gradio-container .project-detail li,
+.gradio-container .collection-detail p, .gradio-container .collection-detail dd {
+  font-size: .95rem; line-height: 1.75; color: var(--kk-lavender);
+}
+.gradio-container .project-detail ul { padding-left: 1.2rem; list-style: disc; }
+.gradio-container .next-gate, .gradio-container .scope-note {
+  margin: 1.2rem 0; padding: 1rem; background: var(--kk-void);
+  border-left: 3px solid var(--kk-ultraviolet); border-radius: 5px;
+}
+.gradio-container .collection-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.5rem 0; }
+.gradio-container .collection-facts div { padding: 1rem; border: 1px solid var(--kk-deep); border-radius: 8px; background: var(--kk-void); }
+.gradio-container .collection-facts dt { color: var(--kk-lavender); font: .7rem Consolas,monospace; text-transform: uppercase; }
+.gradio-container .collection-facts dd { margin: .4rem 0 0; font-weight: 750; }
+.gradio-container .truth-banner { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--kk-deep); border-radius: 8px; font: .7rem/1.7 Consolas,monospace; color: var(--kk-lavender); }
+.gradio-container .lab-footer, .gradio-container .neko-links {
+  padding-block: 2rem; border-top: 1px solid var(--kk-deep); background: var(--kk-void);
+}
+.gradio-container .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font: .7rem/1.8 Consolas,monospace; color: var(--kk-lavender); }
+.gradio-container .neko-links ul { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 0; list-style: none; }
+.gradio-container .neko-links a { font-size: .9rem; }
+.gradio-container button.primary { min-height: 46px; border-radius: 8px !important; font-weight: 750 !important; }
+.gradio-container .cm-editor, .gradio-container .cm-gutters { background: var(--kk-void) !important; color: var(--kk-lavender) !important; }
+.gradio-container .cm-content, .gradio-container .cm-content span { color: var(--kk-mist) !important; }
+.gradio-container .cm-scroller { max-height: 440px !important; overflow: auto !important; font-size: 13px !important; }
+.gradio-container .json-holder, .gradio-container .json-holder * { color: var(--kk-lavender) !important; background-color: var(--kk-void) !important; }
+.gradio-container .block label, .gradio-container .block .label { color: var(--kk-lavender) !important; }
 @media (max-width: 800px) {
-  .lab-hero,
-  .portfolio-grid,
-  .principle-grid,
-  .collection-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .collection-facts {
-    grid-template-columns: 1fr;
-  }
-
-  .lab-hero {
-    min-block-size: auto;
-  }
-
-  .lab-nav,
-  .detail-topline,
-  .footer-row {
-    align-items: flex-start;
-    flex-direction: column;
-  }
+  .lab-hero, .neko-hero { grid-template-columns: 1fr; gap: 2rem; }
+  .hero-console { max-width: 420px; width: 100%; }
+  .console-mark { min-height: 90px; font-size: 3rem; }
+  .lab-nav { align-items: flex-start; flex-direction: column; gap: 1rem; }
+}
+@media (max-width: 560px) {
+  .lab-shell, .neko-shell,
+  .explorer-wrap, .demo-wrap { width: calc(100% - 2rem) !important; }
+  .portfolio-grid, .principle-grid,
+  .collection-grid, .collection-facts { grid-template-columns: 1fr; }
+  .explorer-panel, .demo-panel { padding: 1rem !important; min-width: 0 !important; }
+  .project-detail, .collection-detail { padding: 1.25rem; }
 }
-
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-@media (prefers-contrast: more) {
-  :root {
-    --kk-deep: #8B5CF6;
-    --kk-violet: #D8B4FE;
-  }
+  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
 }
 """
 
 HERO = """
 <header class="lab-header">
   <div class="lab-shell lab-nav">
-    <span class="lab-brand">KRAZYKITTY // NEURAL LAB</span>
-    <span>RESEARCH PORTFOLIO // READ-ONLY DASHBOARD</span>
+    <a class="lab-brand" href="https://krazykitty.dev/" target="_blank" rel="noreferrer">KRAZYKITTY // NEURAL LAB</a>
+    <nav aria-label="Research navigation"><a href="#portfolio">PORTFOLIO</a><a href="#project-explorer">EXPLORE</a><a href="#readiness">READINESS</a><a href="https://huggingface.co/spaces/KrazyKitty/KittyLM-Research" target="_blank" rel="noreferrer">KITTYLM ↗</a></nav>
   </div>
 </header>
 <main>
@@ -488,6 +235,7 @@ HERO = """
       <span class="lab-kicker">Ultraviolet research interface</span>
       <h1 id="lab-title">NEURAL<span>LAB</span></h1>
       <p class="lab-lede">A navigable map of KrazyKitty's language-model, dataset, and agent-systems research—built around provenance, reproducibility, and honest evidence boundaries.</p>
+      <div class="hero-actions"><a class="project-link" href="#project-explorer">Explore the research ↓</a><a class="project-link secondary" href="https://krazykitty.dev/#about" target="_blank" rel="noreferrer">Meet KrazyKitty ↗</a></div>
     </div>
     <aside class="hero-console" aria-label="Dashboard state">
       <div class="console-mark">K<span>//</span>K</div>
@@ -499,7 +247,7 @@ HERO = """
       </div>
     </aside>
   </section>
-  <section class="lab-section">
+  <section class="lab-section" id="portfolio">
     <div class="lab-shell">
       <span class="section-kicker">01 // Portfolio map</span>
       <h2>One lab. Distinct research boundaries.</h2>
@@ -555,8 +303,8 @@ def update_requirements(track: str) -> gr.CheckboxGroup:
 
 
 with gr.Blocks(title="KRAZYKITTY // NEURAL LAB") as demo:
-    gr.HTML(HERO, container=False)
-    with gr.Row(elem_classes=["explorer-wrap"]):
+    gr.HTML(HERO, container=False, apply_default_css=False)
+    with gr.Row(elem_id="project-explorer", elem_classes=["explorer-wrap"]):
         with gr.Column(scale=1, min_width=260, elem_classes=["explorer-panel"]):
             gr.Markdown(
                 "## 02 // Project explorer\nChoose a research node. Status labels are evidence states, not live service indicators."
@@ -569,14 +317,14 @@ with gr.Blocks(title="KRAZYKITTY // NEURAL LAB") as demo:
                 interactive=True,
             )
         with gr.Column(scale=2, min_width=320):
-            project_detail = gr.HTML(render_project("KittyLM"), container=False)
+            project_detail = gr.HTML(render_project("KittyLM"), container=False, apply_default_css=False)
     project_picker.change(
         render_project,
         inputs=project_picker,
         outputs=project_detail,
         api_visibility="private",
     )
-    with gr.Row(elem_classes=["explorer-wrap"]):
+    with gr.Row(elem_id="collection-explorer", elem_classes=["explorer-wrap"]):
         with gr.Column(scale=1, min_width=260, elem_classes=["explorer-panel"]):
             gr.Markdown(
                 "## 03 // Collection explorer\nReview the scope and first-party research node for each public Collection."
@@ -590,7 +338,7 @@ with gr.Blocks(title="KRAZYKITTY // NEURAL LAB") as demo:
             )
         with gr.Column(scale=2, min_width=320):
             collection_detail = gr.HTML(
-                render_collection("Transformer Foundations"), container=False
+                render_collection("Transformer Foundations"), container=False, apply_default_css=False
             )
     collection_picker.change(
         render_collection,
@@ -598,7 +346,7 @@ with gr.Blocks(title="KRAZYKITTY // NEURAL LAB") as demo:
         outputs=collection_detail,
         api_visibility="private",
     )
-    with gr.Row(elem_classes=["explorer-wrap"]):
+    with gr.Row(elem_id="readiness", elem_classes=["explorer-wrap"]):
         with gr.Column(scale=1, min_width=300, elem_classes=["explorer-panel"]):
             gr.Markdown(
                 "## 04 // Research-readiness check\nA transparent documentation checklist—not a model, safety certification, or publication decision."
@@ -632,10 +380,10 @@ with gr.Blocks(title="KRAZYKITTY // NEURAL LAB") as demo:
         outputs=readiness_result,
         api_visibility="private",
     )
-    gr.HTML(LOWER_SECTIONS, container=False)
+    gr.HTML(LOWER_SECTIONS, container=False, apply_default_css=False)
 
 
 if __name__ == "__main__":
-    demo.launch(css=CSS)
+    demo.launch(css=CSS, footer_links=[])