From 9ca8668ef2e0656eaa7935a367f2b1bcd6514541 Mon Sep 17 00:00:00 2001
From: dirtydishes <35477874+dirtydishes@users.noreply.github.com>
Date: Mon, 27 Apr 2026 07:55:44 -0400
Subject: [PATCH] Revert "[codex] Add overview redesign concept gallery"

---
 apps/web/app/concepts/page.tsx | 724 -----------------------------
 apps/web/app/globals.css       | 820 ---------------------------------
 apps/web/app/terminal.tsx      |   3 +-
 3 files changed, 1 insertion(+), 1546 deletions(-)
 delete mode 100644 apps/web/app/concepts/page.tsx

diff --git a/apps/web/app/concepts/page.tsx b/apps/web/app/concepts/page.tsx
deleted file mode 100644
index dda1f9b..0000000
--- a/apps/web/app/concepts/page.tsx
+++ /dev/null
@@ -1,724 +0,0 @@
-import Link from "next/link";
-import type { ReactNode } from "react";
-import {
-  Bebas_Neue,
-  DM_Serif_Display,
-  Manrope,
-  Newsreader,
-  Oswald,
-  Sora,
-  Special_Elite
-} from "next/font/google";
-
-const brutal = Bebas_Neue({
-  subsets: ["latin"],
-  weight: "400",
-  variable: "--font-concept-brutal"
-});
-
-const editorialDisplay = DM_Serif_Display({
-  subsets: ["latin"],
-  weight: "400",
-  variable: "--font-concept-editorial-display"
-});
-
-const conceptSans = Manrope({
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-  variable: "--font-concept-sans"
-});
-
-const editorialBody = Newsreader({
-  subsets: ["latin"],
-  weight: ["400", "500", "600"],
-  variable: "--font-concept-editorial-body"
-});
-
-const condensed = Oswald({
-  subsets: ["latin"],
-  weight: ["400", "500", "600"],
-  variable: "--font-concept-condensed"
-});
-
-const future = Sora({
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-  variable: "--font-concept-future"
-});
-
-const notebook = Special_Elite({
-  subsets: ["latin"],
-  weight: "400",
-  variable: "--font-concept-notebook"
-});
-
-const feedStates = [
-  { label: "Opt", tone: "positive", value: "Live" },
-  { label: "Eq", tone: "positive", value: "Live" },
-  { label: "Flow", tone: "accent", value: "Dense" },
-  { label: "Alert", tone: "negative", value: "9 high" }
-];
-
-const overviewMetrics = [
-  { label: "Options", value: "284" },
-  { label: "Equities", value: "142" },
-  { label: "Flow", value: "36" },
-  { label: "Alerts", value: "9" },
-  { label: "Rules", value: "14" },
-  { label: "Dark", value: "3" }
-];
-
-const alertRows = [
-  {
-    title: "Stealth Accumulation",
-    meta: "Bullish  |  Score 92  |  NVDA",
-    note: "Repeated bid-side sweeps with dark follow-through.",
-    tone: "positive"
-  },
-  {
-    title: "Distribution Cluster",
-    meta: "Bearish  |  Score 81  |  SPY",
-    note: "Offer-heavy packets rolling across three expiries.",
-    tone: "negative"
-  },
-  {
-    title: "Gamma Pressure",
-    meta: "Neutral  |  Score 74  |  QQQ",
-    note: "Market makers pinned near intraday resistance.",
-    tone: "neutral"
-  }
-] as const;
-
-const flowRows = [
-  {
-    title: "SPY 2026-06-21 C605",
-    meta: "18 prints  |  $2.8M notional  |  Agg 78%",
-    note: "Window 640ms with ask-side urgency.",
-    tone: "accent"
-  },
-  {
-    title: "AAPL 2026-05-17 P185",
-    meta: "11 prints  |  $1.1M notional  |  Spread $0.07",
-    note: "Sweeps split across ARCA and CBOE.",
-    tone: "negative"
-  },
-  {
-    title: "TSLA 2026-07-19 C240",
-    meta: "8 prints  |  $980k notional  |  In 33%",
-    note: "Late acceleration after lit print burst.",
-    tone: "positive"
-  }
-] as const;
-
-const equityRows = [
-  {
-    title: "NVDA",
-    meta: "$972.44  |  28,400x  |  Off-Ex",
-    note: "Dark ratio lifting into midday highs.",
-    tone: "positive"
-  },
-  {
-    title: "SPY",
-    meta: "$604.12  |  91,300x  |  Lit",
-    note: "Index tape absorbing after alert burst.",
-    tone: "neutral"
-  },
-  {
-    title: "AAPL",
-    meta: "$214.77  |  18,100x  |  Off-Ex",
-    note: "Block prints clustering beneath ask.",
-    tone: "accent"
-  }
-] as const;
-
-const conceptSummary = [
-  {
-    id: "concept-1",
-    index: "01",
-    title: "Mission Control",
-    style: "Dark command center"
-  },
-  {
-    id: "concept-2",
-    index: "02",
-    title: "Market Journal",
-    style: "Editorial financial desk"
-  },
-  {
-    id: "concept-3",
-    index: "03",
-    title: "Aurora Glass",
-    style: "Futurist glass cockpit"
-  },
-  {
-    id: "concept-4",
-    index: "04",
-    title: "Tape Wall",
-    style: "Brutalist signal board"
-  },
-  {
-    id: "concept-5",
-    index: "05",
-    title: "Field Notebook",
-    style: "Analyst workbench"
-  }
-] as const;
-
-type ConceptSectionProps = {
-  id: string;
-  index: string;
-  title: string;
-  label: string;
-  summary: string;
-  designChoices: string[];
-  responsive: string[];
-  className: string;
-  children: ReactNode;
-};
-
-function ConceptSection({
-  id,
-  index,
-  title,
-  label,
-  summary,
-  designChoices,
-  responsive,
-  className,
-  children
-}: ConceptSectionProps) {
-  return (
-    <section className={`concept-section ${className}`} id={id}>
-      <div className="concept-copy">
-        <div className="concept-copy-head">
-          <div className="concept-kicker">
-            <span>{`Concept ${index}`}</span>
-            <span>{label}</span>
-          </div>
-          <h2 className="concept-name">{title}</h2>
-          <p className="concept-summary">{summary}</p>
-        </div>
-
-        <div className="concept-detail">
-          <h3 className="concept-detail-title">Key Design Choices</h3>
-          <ul className="concept-bullet-list">
-            {designChoices.map((choice) => (
-              <li key={choice}>{choice}</li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="concept-detail">
-          <h3 className="concept-detail-title">Responsive Considerations</h3>
-          <ul className="concept-bullet-list">
-            {responsive.map((item) => (
-              <li key={item}>{item}</li>
-            ))}
-          </ul>
-        </div>
-      </div>
-
-      <div className="concept-preview">{children}</div>
-    </section>
-  );
-}
-
-function MockTopbar({ brand, kicker }: { brand: string; kicker: string }) {
-  return (
-    <div className="mock-topbar">
-      <div className="mock-brand">
-        <span className="mock-brand-kicker">{kicker}</span>
-        <span className="mock-brand-name">{brand}</span>
-      </div>
-
-      <div className="mock-status-cluster">
-        {feedStates.map((feed) => (
-          <div className={`mock-chip mock-chip-${feed.tone}`} key={feed.label}>
-            <span>{feed.label}</span>
-            <strong>{feed.value}</strong>
-          </div>
-        ))}
-      </div>
-
-      <div className="mock-actions">
-        <div className="mock-filter">Filter: SPY, NVDA, AAPL</div>
-        <button className="mock-button" type="button">
-          Replay
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function MetricRack() {
-  return (
-    <div className="mock-metric-rack">
-      {overviewMetrics.map((metric) => (
-        <div className="mock-metric" key={metric.label}>
-          <span>{metric.label}</span>
-          <strong>{metric.value}</strong>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function Module({
-  title,
-  subtitle,
-  children,
-  className = ""
-}: {
-  title: string;
-  subtitle?: string;
-  children: ReactNode;
-  className?: string;
-}) {
-  return (
-    <section className={`mock-module ${className}`.trim()}>
-      <div className="mock-module-head">
-        <div>
-          <p className="mock-module-kicker">{subtitle ?? "Core module"}</p>
-          <h3 className="mock-module-title">{title}</h3>
-        </div>
-        <span className="mock-module-meta">Live</span>
-      </div>
-      {children}
-    </section>
-  );
-}
-
-function ChartModule({ label }: { label: string }) {
-  return (
-    <div className="mock-chart">
-      <div className="mock-chart-labels">
-        <span>{label}</span>
-        <span>Signals layered on price</span>
-      </div>
-      <svg
-        aria-hidden="true"
-        className="mock-chart-svg"
-        preserveAspectRatio="none"
-        viewBox="0 0 520 220"
-      >
-        <path
-          className="mock-chart-area"
-          d="M0 180 L46 170 L92 150 L138 158 L184 136 L230 144 L276 115 L322 126 L368 92 L414 104 L460 70 L520 84 L520 220 L0 220 Z"
-        />
-        <polyline
-          className="mock-chart-line"
-          fill="none"
-          points="0,180 46,170 92,150 138,158 184,136 230,144 276,115 322,126 368,92 414,104 460,70 520,84"
-        />
-        <circle className="mock-chart-marker" cx="184" cy="136" r="7" />
-        <circle className="mock-chart-marker mock-chart-marker-alt" cx="368" cy="92" r="7" />
-        <circle className="mock-chart-marker" cx="460" cy="70" r="7" />
-      </svg>
-      <div className="mock-chart-axis">
-        <span>09:30</span>
-        <span>11:00</span>
-        <span>12:30</span>
-        <span>14:00</span>
-        <span>15:30</span>
-      </div>
-    </div>
-  );
-}
-
-type MockRow = {
-  title: string;
-  meta: string;
-  note: string;
-  tone: string;
-};
-
-function ListModule({
-  title,
-  subtitle,
-  rows
-}: {
-  title: string;
-  subtitle: string;
-  rows: readonly MockRow[];
-}) {
-  return (
-    <Module subtitle={subtitle} title={title}>
-      <div className="mock-row-list">
-        {rows.map((row) => (
-          <article className={`mock-row mock-row-${row.tone}`} key={`${title}-${row.title}`}>
-            <div className="mock-row-head">
-              <h4>{row.title}</h4>
-              <span className={`mock-tone-dot mock-tone-dot-${row.tone}`} />
-            </div>
-            <p className="mock-row-meta">{row.meta}</p>
-            <p className="mock-row-note">{row.note}</p>
-          </article>
-        ))}
-      </div>
-    </Module>
-  );
-}
-
-function MissionControlMockup() {
-  return (
-    <div className="mockup-frame mission-frame">
-      <MockTopbar brand="Islandflow / Mission" kicker="Overview redesign" />
-      <MetricRack />
-
-      <div className="mission-command">
-        <div className="mission-main">
-          <Module className="mission-chart-module" subtitle="Primary chart" title="Price + signal map">
-            <ChartModule label="NVDA in focus" />
-          </Module>
-          <Module subtitle="Session summary" title="Execution notes">
-            <div className="mock-summary-grid">
-              <div className="mock-summary-card">
-                <span>Highest urgency</span>
-                <strong>Stealth accumulation in NVDA</strong>
-              </div>
-              <div className="mock-summary-card">
-                <span>Replay readiness</span>
-                <strong>Databento and Alpaca aligned</strong>
-              </div>
-            </div>
-          </Module>
-        </div>
-
-        <div className="mission-side">
-          <ListModule rows={alertRows} subtitle="Alert queue" title="Alerts" />
-          <ListModule rows={flowRows} subtitle="Packet tape" title="Flow" />
-        </div>
-      </div>
-
-      <div className="mission-footer">
-        <ListModule rows={equityRows} subtitle="Equity tape" title="Equities" />
-        <Module subtitle="Focus" title="Operator panel">
-          <div className="mock-operator-grid">
-            <div className="mock-operator-item">
-              <span>Mode</span>
-              <strong>Live</strong>
-            </div>
-            <div className="mock-operator-item">
-              <span>Source</span>
-              <strong>Auto</strong>
-            </div>
-            <div className="mock-operator-item">
-              <span>Dark hits</span>
-              <strong>03</strong>
-            </div>
-            <div className="mock-operator-item">
-              <span>Focus ticker</span>
-              <strong>NVDA</strong>
-            </div>
-          </div>
-        </Module>
-      </div>
-    </div>
-  );
-}
-
-function MarketJournalMockup() {
-  return (
-    <div className="mockup-frame editorial-frame">
-      <div className="editorial-masthead">
-        <div>
-          <span className="editorial-volume">Vol. 27</span>
-          <h3>The Islandflow Market Journal</h3>
-        </div>
-        <div className="editorial-meta">
-          <span>Overview page redesign</span>
-          <span>Same trading intelligence, calmer reading flow</span>
-        </div>
-      </div>
-
-      <div className="editorial-toolbar">
-        <span>Filter: SPY, NVDA, AAPL</span>
-        <span>Mode: Live</span>
-        <span>Replay ready</span>
-      </div>
-
-      <div className="editorial-hero">
-        <Module className="editorial-hero-chart" subtitle="Lead story" title="Signals gather around NVDA">
-          <ChartModule label="Narrative chart" />
-        </Module>
-
-        <Module subtitle="Editor note" title="Why this layout works">
-          <div className="editorial-copy">
-            <p>
-              The page reads like a market front page: chart first, context second, then secondary
-              feeds as supporting columns.
-            </p>
-            <p>
-              The same terminal content feels more analytical and less mechanical, which suits
-              review sessions and replay mode.
-            </p>
-          </div>
-        </Module>
-      </div>
-
-      <div className="editorial-columns">
-        <ListModule rows={alertRows} subtitle="Column A" title="Alerts" />
-        <ListModule rows={flowRows} subtitle="Column B" title="Flow" />
-        <ListModule rows={equityRows} subtitle="Column C" title="Equities" />
-      </div>
-    </div>
-  );
-}
-
-function AuroraGlassMockup() {
-  return (
-    <div className="mockup-frame glass-frame">
-      <MockTopbar brand="Islandflow Horizon" kicker="Aurora glass shell" />
-
-      <div className="glass-overview">
-        <Module subtitle="Ambient snapshot" title="Feed health">
-          <MetricRack />
-        </Module>
-        <Module className="glass-chart-module" subtitle="Floating center" title="Signal cockpit">
-          <ChartModule label="QQQ in focus" />
-        </Module>
-        <ListModule rows={alertRows} subtitle="Action stack" title="Alerts" />
-      </div>
-
-      <div className="glass-secondary">
-        <ListModule rows={flowRows} subtitle="Liquidity map" title="Flow" />
-        <ListModule rows={equityRows} subtitle="Market tape" title="Equities" />
-      </div>
-    </div>
-  );
-}
-
-function TapeWallMockup() {
-  return (
-    <div className="mockup-frame brutal-frame">
-      <div className="brutal-banner">
-        <div className="brutal-banner-copy">
-          <span>Islandflow Overview</span>
-          <h3>Watch the tape before the tape watches you.</h3>
-        </div>
-        <div className="brutal-badges">
-          <span>Live mode</span>
-          <span>Filter: SPY, NVDA, AAPL</span>
-          <span>Replay hotkey ready</span>
-        </div>
-      </div>
-
-      <div className="brutal-main">
-        <Module subtitle="Count wall" title="Session totals">
-          <MetricRack />
-        </Module>
-
-        <Module className="brutal-chart-module" subtitle="Center stage" title="Price pressure">
-          <ChartModule label="SPY in focus" />
-        </Module>
-      </div>
-
-      <div className="brutal-ribbons">
-        <ListModule rows={alertRows} subtitle="Ribbon one" title="Alerts" />
-        <ListModule rows={flowRows} subtitle="Ribbon two" title="Flow" />
-        <ListModule rows={equityRows} subtitle="Ribbon three" title="Equities" />
-      </div>
-    </div>
-  );
-}
-
-function FieldNotebookMockup() {
-  return (
-    <div className="mockup-frame notebook-frame">
-      <div className="notebook-topbar">
-        <div className="notebook-title">
-          <span>Islandflow Research Board</span>
-          <h3>Overview page as an analyst workbench</h3>
-        </div>
-        <div className="notebook-tabs">
-          <span>Live</span>
-          <span>Replay</span>
-          <span>Filtered: NVDA / SPY / AAPL</span>
-        </div>
-      </div>
-
-      <div className="notebook-layout">
-        <div className="notebook-main">
-          <Module className="notebook-chart-module" subtitle="Pinned chart" title="Price and events">
-            <ChartModule label="AAPL in focus" />
-          </Module>
-          <Module subtitle="Margin notes" title="What to notice">
-            <div className="notebook-callouts">
-              <div className="notebook-callout">
-                <span>Alert bias</span>
-                <strong>Bullish momentum concentrated in tech.</strong>
-              </div>
-              <div className="notebook-callout">
-                <span>Flow quality</span>
-                <strong>Packet clustering suggests institutional pacing.</strong>
-              </div>
-              <div className="notebook-callout">
-                <span>Replay use</span>
-                <strong>Good for post-close annotation and handoff.</strong>
-              </div>
-            </div>
-          </Module>
-        </div>
-
-        <div className="notebook-notes">
-          <ListModule rows={alertRows} subtitle="Sticky note A" title="Alerts" />
-          <ListModule rows={flowRows} subtitle="Sticky note B" title="Flow" />
-          <ListModule rows={equityRows} subtitle="Sticky note C" title="Equities" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function ConceptsPage() {
-  const fontVariables = [
-    brutal.variable,
-    editorialDisplay.variable,
-    conceptSans.variable,
-    editorialBody.variable,
-    condensed.variable,
-    future.variable,
-    notebook.variable
-  ].join(" ");
-
-  return (
-    <div className={`${fontVariables} page-shell concepts-page`}>
-      <header className="page-header concepts-header">
-        <div>
-          <p className="concepts-eyebrow">Frontend redesign study</p>
-          <h1 className="page-title">Five Overview concepts for Islandflow</h1>
-          <p className="concepts-lead">
-            Each concept keeps the same product story intact: filter controls, live or replay mode,
-            chart context, alerts, flow packets, and equities tape. What changes is the visual
-            system, layout logic, and the feeling of operating the page.
-          </p>
-        </div>
-        <div className="page-actions">
-          <Link className="terminal-button" href="/">
-            Current overview
-          </Link>
-        </div>
-      </header>
-
-      <section className="concepts-intro">
-        <div className="concepts-intro-card">
-          <h2 className="concepts-intro-title">What stays consistent</h2>
-          <p>
-            Every direction below preserves the same core modules and the same analyst workflow.
-            These are presentation explorations, not product scope changes.
-          </p>
-        </div>
-
-        <div className="concept-anchors">
-          {conceptSummary.map((concept) => (
-            <a className="concept-anchor" href={`#${concept.id}`} key={concept.id}>
-              <span>{concept.index}</span>
-              <strong>{concept.title}</strong>
-              <small>{concept.style}</small>
-            </a>
-          ))}
-        </div>
-      </section>
-
-      <ConceptSection
-        className="concept-mission"
-        designChoices={[
-          "Dark industrial palette with amber accents, condensed headings, and mono metadata to feel like a serious command surface.",
-          "Chart-first asymmetry gives the overview page a clear hierarchy: monitor price action, then scan alerts and packets, then glance at equities.",
-          "Compact operator panels keep high-density content readable without flattening everything into identical cards."
-        ]}
-        id="concept-1"
-        index="01"
-        label="Dark command center"
-        responsive={[
-          "Desktop uses a wide mission grid where the chart owns the left side and secondary queues stack on the right for fast peripheral scanning.",
-          "Mobile collapses into a single priority stack with metrics first, chart second, and action feeds grouped by urgency so the screen never feels cramped."
-        ]}
-        summary="A sharper, more cinematic take on the existing terminal metaphor. This is the closest to a pro desk, but with stronger hierarchy and fewer visually equal surfaces."
-        title="Mission Control"
-      >
-        <MissionControlMockup />
-      </ConceptSection>
-
-      <ConceptSection
-        className="concept-editorial"
-        designChoices={[
-          "A light editorial theme reframes the dashboard as a readable market briefing rather than a pure execution console.",
-          "Serif display typography, column structure, and calmer spacing make replay sessions and post-market reviews feel more thoughtful.",
-          "The same modules are presented like lead story plus supporting columns, which helps users understand importance at a glance."
-        ]}
-        id="concept-2"
-        index="02"
-        label="Editorial financial desk"
-        responsive={[
-          "Desktop treats the chart as the front-page hero with three supporting columns below, preserving scanning order without overwhelming the user.",
-          "Mobile turns those columns into a clean reading sequence: hero chart, editor note, alerts, flow, then equities, with generous spacing for thumb scrolling."
-        ]}
-        summary="A newsroom-inspired redesign that makes Islandflow feel like a premium market publication. It is calmer, brighter, and easier to read over long review sessions."
-        title="Market Journal"
-      >
-        <MarketJournalMockup />
-      </ConceptSection>
-
-      <ConceptSection
-        className="concept-glass"
-        designChoices={[
-          "Layered translucent panels and atmospheric gradients create a future-facing cockpit without sacrificing legibility.",
-          "The chart floats at the center of the layout, while feed health and alert context orbit around it like instrumentation.",
-          "Rounded geometry and softer contrast make this direction feel premium and modern, especially for demos or investor-facing moments."
-        ]}
-        id="concept-3"
-        index="03"
-        label="Futurist glass cockpit"
-        responsive={[
-          "Desktop uses a three-part aerial composition with the chart in the middle and support modules to either side, reinforcing a central command feel.",
-          "Mobile turns the floating modules into stacked glass cards with larger touch targets and reduced translucency so readability holds up outdoors and on glare-heavy screens."
-        ]}
-        summary="A more aspirational interface direction built around depth, blur, and glowing instrumentation. The product feels advanced without drifting into novelty."
-        title="Aurora Glass"
-      >
-        <AuroraGlassMockup />
-      </ConceptSection>
-
-      <ConceptSection
-        className="concept-brutal"
-        designChoices={[
-          "Oversized headlines, hard borders, and high-contrast color blocks turn the page into a signal board with attitude.",
-          "The layout is intentionally loud: totals hit first, the chart becomes a billboard, and the queues read like tape ribbons.",
-          "This direction favors decisiveness and memorability over subtlety, making it the boldest concept in the set."
-        ]}
-        id="concept-4"
-        index="04"
-        label="Brutalist signal board"
-        responsive={[
-          "Desktop keeps the giant headline and billboard chart while turning the lower ribbons into equal-width scan lanes for alerts, flow, and equities.",
-          "Mobile preserves the graphic energy but reduces typographic scale, converts ribbons into stacked slabs, and keeps high contrast for quick glanceability."
-        ]}
-        summary="A poster-like redesign with aggressive typography and rigid modularity. It is meant to feel unmistakable and high-energy the moment it loads."
-        title="Tape Wall"
-      >
-        <TapeWallMockup />
-      </ConceptSection>
-
-      <ConceptSection
-        className="concept-notebook"
-        designChoices={[
-          "Warm neutrals, paper textures, and typewriter accents make the interface feel like a strategist's annotated desk instead of a machine room.",
-          "Pinned callouts and note-card modules support interpretation, which is useful when the page is used for research, teaching, or end-of-day handoff.",
-          "The chart remains central, but the surrounding content is framed as observations and evidence rather than alerts alone."
-        ]}
-        id="concept-5"
-        index="05"
-        label="Analyst workbench"
-        responsive={[
-          "Desktop behaves like a split research spread with one side for chart analysis and the other for callouts and modular notes.",
-          "Mobile turns each pinned note into a full-width card and preserves the annotation feel by keeping short labeled sections rather than dense control strips."
-        ]}
-        summary="A softer research-oriented direction that makes Islandflow feel deeply human and collaborative. This one is the best fit for annotation-heavy workflows."
-        title="Field Notebook"
-      >
-        <FieldNotebookMockup />
-      </ConceptSection>
-    </div>
-  );
-}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 1bd2be9..0769f2a 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1079,823 +1079,3 @@ h3 {
     margin-top: 14px;
   }
 }
-
-.concepts-page {
-  display: grid;
-  gap: 28px;
-  padding-bottom: 56px;
-}
-
-.concepts-header {
-  align-items: flex-start;
-}
-
-.concepts-eyebrow {
-  margin: 0 0 8px;
-  color: var(--accent);
-  font-size: 0.78rem;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-}
-
-.concepts-lead {
-  max-width: 78ch;
-  margin: 14px 0 0;
-  color: var(--text-dim);
-  line-height: 1.7;
-}
-
-.concepts-intro {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
-}
-
-.concepts-intro-card {
-  padding: 22px 24px;
-  border-radius: 20px;
-  border: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
-}
-
-.concepts-intro-card p {
-  margin: 0;
-  color: var(--text-dim);
-  line-height: 1.7;
-}
-
-.concepts-intro-title {
-  margin: 0 0 10px;
-  font-size: 1.15rem;
-}
-
-.concept-anchors {
-  display: grid;
-  gap: 14px;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
-.concept-anchor {
-  display: grid;
-  gap: 6px;
-  padding: 18px;
-  border-radius: 18px;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.02);
-  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
-}
-
-.concept-anchor:hover {
-  transform: translateY(-2px);
-  border-color: rgba(245, 166, 35, 0.3);
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.concept-anchor span,
-.concept-anchor small {
-  color: var(--text-dim);
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-}
-
-.concept-anchor strong {
-  font-size: 0.96rem;
-}
-
-.concept-section {
-  display: grid;
-  gap: 22px;
-  padding: 24px;
-  border-radius: 28px;
-  border: 1px solid var(--border);
-  background:
-    radial-gradient(circle at top right, rgba(245, 166, 35, 0.08), transparent 28%),
-    rgba(8, 11, 16, 0.94);
-}
-
-.concept-copy {
-  display: grid;
-  gap: 18px;
-  align-content: start;
-}
-
-.concept-copy-head {
-  display: grid;
-  gap: 10px;
-}
-
-.concept-kicker {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  color: var(--text-dim);
-  font-size: 0.72rem;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-}
-
-.concept-name {
-  font-size: clamp(2rem, 2.2vw, 2.7rem);
-}
-
-.concept-summary {
-  margin: 0;
-  color: var(--text-dim);
-  line-height: 1.75;
-}
-
-.concept-detail {
-  display: grid;
-  gap: 10px;
-}
-
-.concept-detail-title {
-  font-size: 0.9rem;
-  color: var(--text);
-}
-
-.concept-bullet-list {
-  margin: 0;
-  padding-left: 18px;
-  color: var(--text-dim);
-  display: grid;
-  gap: 10px;
-  line-height: 1.6;
-}
-
-.concept-preview {
-  min-width: 0;
-}
-
-.mockup-frame {
-  --mock-bg: #0d141c;
-  --mock-surface: rgba(10, 16, 22, 0.86);
-  --mock-surface-2: rgba(255, 255, 255, 0.06);
-  --mock-border: rgba(255, 255, 255, 0.1);
-  --mock-text: #eff6ff;
-  --mock-dim: #8d9fb2;
-  --mock-accent: #ffb13c;
-  --mock-accent-soft: rgba(255, 177, 60, 0.16);
-  --mock-positive: #76e7aa;
-  --mock-negative: #ff7f79;
-  --mock-neutral: #83beff;
-  position: relative;
-  overflow: hidden;
-  padding: 20px;
-  border-radius: 26px;
-  border: 1px solid var(--mock-border);
-  color: var(--mock-text);
-  background: var(--mock-bg);
-  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
-}
-
-.mock-topbar,
-.mock-metric-rack,
-.mission-command,
-.mission-footer,
-.editorial-hero,
-.editorial-columns,
-.glass-overview,
-.glass-secondary,
-.brutal-main,
-.brutal-ribbons,
-.notebook-main,
-.notebook-notes,
-.mock-summary-grid,
-.mock-operator-grid,
-.notebook-callouts {
-  display: grid;
-  gap: 16px;
-}
-
-.mock-topbar {
-  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) minmax(220px, auto);
-  align-items: center;
-  padding: 16px 18px;
-  border-radius: 20px;
-  border: 1px solid var(--mock-border);
-  background: var(--mock-surface);
-  backdrop-filter: blur(20px);
-}
-
-.mock-brand {
-  display: grid;
-  gap: 4px;
-}
-
-.mock-brand-kicker,
-.mock-module-kicker,
-.mock-metric span,
-.mock-row-meta,
-.editorial-volume,
-.editorial-toolbar,
-.notebook-title span {
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-  font-size: 0.72rem;
-}
-
-.mock-brand-kicker,
-.mock-module-kicker,
-.mock-metric span,
-.mock-module-meta,
-.mock-filter,
-.mock-row-meta,
-.mock-chart-labels,
-.mock-chart-axis,
-.editorial-volume,
-.editorial-meta,
-.editorial-toolbar,
-.notebook-title span {
-  color: var(--mock-dim);
-}
-
-.mock-brand-name {
-  font-size: 1.3rem;
-  font-weight: 700;
-}
-
-.mock-status-cluster,
-.mock-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.mock-status-cluster {
-  justify-content: center;
-}
-
-.mock-actions {
-  justify-content: flex-end;
-}
-
-.mock-chip,
-.mock-button,
-.mock-filter,
-.notebook-tabs span,
-.brutal-badges span {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  border-radius: 999px;
-  border: 1px solid var(--mock-border);
-  background: var(--mock-surface-2);
-  font-size: 0.74rem;
-}
-
-.mock-chip strong {
-  color: var(--mock-text);
-}
-
-.mock-chip-positive {
-  border-color: rgba(118, 231, 170, 0.35);
-  background: rgba(118, 231, 170, 0.12);
-}
-
-.mock-chip-negative {
-  border-color: rgba(255, 127, 121, 0.35);
-  background: rgba(255, 127, 121, 0.12);
-}
-
-.mock-chip-accent {
-  border-color: rgba(255, 177, 60, 0.35);
-  background: rgba(255, 177, 60, 0.14);
-}
-
-.mock-button {
-  color: var(--mock-text);
-}
-
-.mock-filter {
-  min-width: 220px;
-}
-
-.mock-metric-rack {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.mock-metric {
-  display: grid;
-  gap: 8px;
-  padding: 16px;
-  border-radius: 18px;
-  border: 1px solid var(--mock-border);
-  background: var(--mock-surface);
-}
-
-.mock-metric strong {
-  font-size: 1.2rem;
-}
-
-.mock-module {
-  display: grid;
-  gap: 14px;
-  min-width: 0;
-  padding: 18px;
-  border-radius: 22px;
-  border: 1px solid var(--mock-border);
-  background: var(--mock-surface);
-}
-
-.mock-module-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.mock-module-kicker {
-  margin: 0 0 6px;
-}
-
-.mock-module-title,
-.mock-row-head h4,
-.editorial-masthead h3,
-.brutal-banner h3,
-.notebook-topbar h3 {
-  margin: 0;
-}
-
-.mock-module-title {
-  font-size: 1.05rem;
-  line-height: 1.2;
-}
-
-.mock-module-meta {
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-}
-
-.mock-chart {
-  display: grid;
-  gap: 12px;
-}
-
-.mock-chart-labels,
-.mock-chart-axis {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.mock-chart-svg {
-  width: 100%;
-  height: 250px;
-  border-radius: 18px;
-  border: 1px solid var(--mock-border);
-  background:
-    linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-    rgba(6, 10, 14, 0.45);
-  background-size: 100% 25%, 12.5% 100%;
-}
-
-.mock-chart-area {
-  fill: var(--mock-accent-soft);
-}
-
-.mock-chart-line {
-  stroke: var(--mock-accent);
-  stroke-width: 4;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.mock-chart-marker {
-  fill: var(--mock-positive);
-  stroke: rgba(0, 0, 0, 0.35);
-  stroke-width: 2;
-}
-
-.mock-chart-marker-alt {
-  fill: var(--mock-negative);
-}
-
-.mock-row-list {
-  display: grid;
-  gap: 12px;
-}
-
-.mock-row {
-  display: grid;
-  gap: 8px;
-  padding: 14px 15px;
-  border-radius: 18px;
-  border: 1px solid var(--mock-border);
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.mock-row-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.mock-row-head h4 {
-  font-size: 0.96rem;
-}
-
-.mock-row-meta,
-.mock-row-note,
-.editorial-copy p,
-.concept-anchors small {
-  margin: 0;
-}
-
-.mock-row-note,
-.editorial-copy p {
-  line-height: 1.55;
-}
-
-.mock-tone-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-}
-
-.mock-tone-dot-positive {
-  background: var(--mock-positive);
-}
-
-.mock-tone-dot-negative {
-  background: var(--mock-negative);
-}
-
-.mock-tone-dot-neutral {
-  background: var(--mock-neutral);
-}
-
-.mock-tone-dot-accent {
-  background: var(--mock-accent);
-}
-
-.mock-summary-grid,
-.mock-operator-grid,
-.notebook-callouts {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.mock-summary-card,
-.mock-operator-item,
-.notebook-callout {
-  display: grid;
-  gap: 8px;
-  padding: 16px;
-  border-radius: 18px;
-  border: 1px solid var(--mock-border);
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.mock-summary-card span,
-.mock-operator-item span,
-.notebook-callout span {
-  color: var(--mock-dim);
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-}
-
-.mission-frame {
-  font-family: var(--font-concept-sans), sans-serif;
-  background:
-    radial-gradient(circle at top left, rgba(255, 177, 60, 0.14), transparent 25%),
-    linear-gradient(145deg, #0a1118, #101923 60%, #081018);
-}
-
-.mission-frame .mock-brand-name,
-.mission-frame .mock-module-title {
-  font-family: var(--font-concept-condensed), sans-serif;
-  letter-spacing: 0.03em;
-}
-
-.mission-command {
-  margin-top: 16px;
-  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.95fr);
-}
-
-.mission-main,
-.mission-side {
-  display: grid;
-  gap: 16px;
-}
-
-.mission-footer {
-  margin-top: 16px;
-  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.9fr);
-}
-
-.editorial-frame {
-  --mock-bg: linear-gradient(180deg, #f4eedf, #ece3cf);
-  --mock-surface: rgba(255, 252, 245, 0.85);
-  --mock-surface-2: rgba(130, 100, 56, 0.08);
-  --mock-border: rgba(98, 81, 53, 0.18);
-  --mock-text: #2d2418;
-  --mock-dim: #77624a;
-  --mock-accent: #95622a;
-  --mock-accent-soft: rgba(149, 98, 42, 0.16);
-  --mock-positive: #2f8454;
-  --mock-negative: #a14d4b;
-  --mock-neutral: #4c6f97;
-  font-family: var(--font-concept-editorial-body), serif;
-  box-shadow: 0 28px 70px rgba(35, 24, 12, 0.16);
-}
-
-.editorial-frame .mock-module-title,
-.editorial-masthead h3 {
-  font-family: var(--font-concept-editorial-display), serif;
-  letter-spacing: 0;
-}
-
-.editorial-masthead {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 18px;
-  padding-bottom: 16px;
-  margin-bottom: 14px;
-  border-bottom: 1px solid rgba(98, 81, 53, 0.18);
-}
-
-.editorial-masthead h3 {
-  font-size: clamp(2rem, 3vw, 3.2rem);
-  line-height: 0.95;
-}
-
-.editorial-meta {
-  display: grid;
-  gap: 6px;
-  justify-items: end;
-  text-align: right;
-  font-size: 0.8rem;
-}
-
-.editorial-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 18px;
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-  border-bottom: 1px dashed rgba(98, 81, 53, 0.24);
-}
-
-.editorial-hero {
-  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
-}
-
-.editorial-columns {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  margin-top: 16px;
-}
-
-.editorial-copy {
-  display: grid;
-  gap: 12px;
-}
-
-.glass-frame {
-  --mock-bg: linear-gradient(145deg, rgba(7, 12, 18, 0.96), rgba(21, 45, 69, 0.94));
-  --mock-surface: rgba(255, 255, 255, 0.08);
-  --mock-surface-2: rgba(255, 255, 255, 0.06);
-  --mock-border: rgba(180, 220, 255, 0.18);
-  --mock-text: #f4fbff;
-  --mock-dim: #b2c8dc;
-  --mock-accent: #93d8ff;
-  --mock-accent-soft: rgba(147, 216, 255, 0.17);
-  --mock-positive: #8effc2;
-  --mock-negative: #ff93ad;
-  --mock-neutral: #b8cfff;
-  font-family: var(--font-concept-future), sans-serif;
-  background:
-    radial-gradient(circle at 15% 18%, rgba(125, 222, 255, 0.28), transparent 20%),
-    radial-gradient(circle at 88% 12%, rgba(180, 122, 255, 0.22), transparent 22%),
-    radial-gradient(circle at 55% 82%, rgba(126, 255, 201, 0.18), transparent 24%),
-    linear-gradient(145deg, rgba(7, 12, 18, 0.98), rgba(21, 45, 69, 0.94));
-}
-
-.glass-overview {
-  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(260px, 0.92fr);
-  margin-top: 16px;
-}
-
-.glass-secondary {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin-top: 16px;
-}
-
-.glass-frame .mock-module,
-.glass-frame .mock-topbar,
-.glass-frame .mock-metric {
-  backdrop-filter: blur(24px);
-}
-
-.brutal-frame {
-  --mock-bg: #f0dd53;
-  --mock-surface: rgba(255, 250, 207, 0.92);
-  --mock-surface-2: rgba(13, 14, 16, 0.08);
-  --mock-border: rgba(13, 14, 16, 0.9);
-  --mock-text: #111318;
-  --mock-dim: rgba(17, 19, 24, 0.7);
-  --mock-accent: #111318;
-  --mock-accent-soft: rgba(17, 19, 24, 0.12);
-  --mock-positive: #208b4d;
-  --mock-negative: #bf3730;
-  --mock-neutral: #2b66c7;
-  font-family: var(--font-concept-sans), sans-serif;
-  box-shadow: 0 28px 70px rgba(36, 28, 7, 0.22);
-}
-
-.brutal-banner {
-  display: grid;
-  gap: 14px;
-  padding: 18px;
-  border: 2px solid rgba(13, 14, 16, 0.92);
-  border-radius: 22px;
-  background: rgba(255, 250, 207, 0.92);
-}
-
-.brutal-banner-copy span,
-.brutal-badges span,
-.brutal-frame .mock-module-kicker,
-.brutal-frame .mock-metric span {
-  font-family: var(--font-concept-brutal), sans-serif;
-  letter-spacing: 0.12em;
-}
-
-.brutal-banner h3 {
-  font-family: var(--font-concept-brutal), sans-serif;
-  font-size: clamp(2.5rem, 4vw, 4.3rem);
-  line-height: 0.9;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.brutal-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.brutal-main {
-  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.4fr);
-  margin-top: 16px;
-}
-
-.brutal-ribbons {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  margin-top: 16px;
-}
-
-.brutal-frame .mock-module,
-.brutal-frame .mock-metric,
-.brutal-frame .mock-row,
-.brutal-frame .mock-chart-svg {
-  border-width: 2px;
-  box-shadow: 8px 8px 0 rgba(17, 19, 24, 0.18);
-}
-
-.notebook-frame {
-  --mock-bg: linear-gradient(180deg, #efe5d1, #e5d7bc);
-  --mock-surface: rgba(255, 248, 235, 0.85);
-  --mock-surface-2: rgba(118, 92, 54, 0.08);
-  --mock-border: rgba(124, 101, 67, 0.22);
-  --mock-text: #2d261d;
-  --mock-dim: #6e5d47;
-  --mock-accent: #8a6233;
-  --mock-accent-soft: rgba(138, 98, 51, 0.14);
-  --mock-positive: #4d8f60;
-  --mock-negative: #a45a53;
-  --mock-neutral: #607996;
-  font-family: var(--font-concept-editorial-body), serif;
-  box-shadow: 0 28px 70px rgba(50, 38, 23, 0.18);
-}
-
-.notebook-topbar {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding-bottom: 12px;
-  margin-bottom: 16px;
-  border-bottom: 1px dashed rgba(124, 101, 67, 0.3);
-}
-
-.notebook-title h3,
-.notebook-frame .mock-module-title {
-  font-family: var(--font-concept-notebook), serif;
-  text-transform: none;
-  letter-spacing: 0.02em;
-}
-
-.notebook-title h3 {
-  font-size: clamp(1.8rem, 2.3vw, 2.4rem);
-  line-height: 1.1;
-}
-
-.notebook-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  justify-content: flex-end;
-}
-
-.notebook-layout {
-  display: grid;
-  gap: 16px;
-}
-
-.notebook-main {
-  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr);
-}
-
-.notebook-notes {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.notebook-callouts {
-  grid-template-columns: minmax(0, 1fr);
-}
-
-@media (min-width: 1181px) {
-  .concept-section {
-    grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
-  }
-}
-
-@media (max-width: 1180px) {
-  .concepts-intro,
-  .concept-anchors,
-  .glass-overview,
-  .mission-command,
-  .mission-footer,
-  .editorial-hero,
-  .editorial-columns,
-  .glass-secondary,
-  .brutal-main,
-  .brutal-ribbons,
-  .notebook-main,
-  .notebook-notes {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .concept-anchors {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 900px) {
-  .mock-topbar,
-  .mock-metric-rack,
-  .mock-summary-grid,
-  .mock-operator-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .mock-status-cluster,
-  .mock-actions,
-  .editorial-meta,
-  .notebook-tabs {
-    justify-content: flex-start;
-    text-align: left;
-  }
-
-  .editorial-masthead,
-  .notebook-topbar {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-@media (max-width: 720px) {
-  .concepts-page {
-    gap: 22px;
-  }
-
-  .concept-section,
-  .mockup-frame {
-    padding: 18px;
-  }
-
-  .concept-anchors {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .mock-filter {
-    min-width: 0;
-    width: 100%;
-  }
-
-  .brutal-banner h3,
-  .editorial-masthead h3 {
-    font-size: 2.2rem;
-  }
-
-  .mock-chart-svg {
-    height: 220px;
-  }
-}
diff --git a/apps/web/app/terminal.tsx b/apps/web/app/terminal.tsx
index a5b09d3..8f1c2e0 100644
--- a/apps/web/app/terminal.tsx
+++ b/apps/web/app/terminal.tsx
@@ -3223,8 +3223,7 @@ const NAV_ITEMS = [
   { href: "/tape", label: "Tape" },
   { href: "/signals", label: "Signals" },
   { href: "/charts", label: "Charts" },
-  { href: "/replay", label: "Replay" },
-  { href: "/concepts", label: "Concepts" }
+  { href: "/replay", label: "Replay" }
 ];
 
 type PageFrameProps = {