@laitszkin/apollo-toolkit 3.13.2 → 3.14.0

package/resources/project-architecture/assets/architecture.css

@@ -0,0 +1,764 @@
+/* architecture.css — declarative atlas styling.
+ *
+ * Design direction: dark "blueprint × editorial" — a deep ink ground
+ * with a faint vellum grid; a Fraunces serif display voice for titles
+ * and prose, a Geist body for UI text, and JetBrains Mono for technical
+ * accents (slugs, edge labels, chips). Bold maximalism is avoided; the
+ * page sells through precision spacing, soft inner glows, and one
+ * accent color (signal teal) rather than rainbow chrome.
+ *
+ * Class hooks are owned by render.js; agents never hand-author the
+ * markup. The CLI copies this file into <outDir>/assets/.
+ */
+
+:root {
+  color-scheme: dark;
+
+  /* ink ground */
+  --ink: #060B12;
+  --ink-1: #0B131F;
+  --ink-2: #0F1B2A;
+  --ink-3: #142336;
+  --ink-4: #1B304A;
+
+  /* rules and dividers */
+  --rule: #1F3651;
+  --rule-soft: #16263B;
+
+  /* vellum (foreground) */
+  --vellum: #EDE7D8;
+  --vellum-soft: #C8C2B3;
+  --vellum-muted: #8A99AE;
+
+  /* one accent color carries the brand */
+  --accent: #66E5C7;
+  --accent-warm: #F4B850;
+  --accent-rose: #F47391;
+  --accent-violet: #B79EFF;
+
+  /* sub-module kind palette */
+  --kind-ui: #7DD3FC;
+  --kind-api: #B79EFF;
+  --kind-service: #66E5C7;
+  --kind-db: #F4B850;
+  --kind-pure-fn: #C9C3B3;
+  --kind-queue: #F47391;
+  --kind-external: #FF9B6A;
+
+  /* edge palette */
+  --edge-call: #7DD3FC;
+  --edge-return: #C9C3B3;
+  --edge-data-row: #F4B850;
+  --edge-failure: #F47391;
+
+  /* shadows */
+  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 18px 40px -30px rgba(102, 229, 199, 0.10);
+
+  /* type stack — distinctive, not generic */
+  --font-display: 'Fraunces', 'Iowan Old Style', 'Charter', 'Georgia', serif;
+  --font-ui: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+* { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  min-height: 100vh;
+  background:
+    radial-gradient(1200px 600px at 90% -200px, rgba(102, 229, 199, 0.10), transparent 60%),
+    radial-gradient(900px 500px at -10% 110%, rgba(183, 158, 255, 0.07), transparent 60%),
+    var(--ink);
+  color: var(--vellum);
+  font-family: var(--font-ui);
+  font-feature-settings: 'ss01', 'cv11';
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* faint vellum grid behind everything — looks like blueprint paper */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, rgba(237, 231, 216, 0.025) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(237, 231, 216, 0.025) 1px, transparent 1px);
+  background-size: 48px 48px;
+  pointer-events: none;
+  z-index: 0;
+  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 80%);
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover {
+  color: var(--vellum);
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+  text-decoration-thickness: 1.5px;
+  text-underline-offset: 4px;
+}
+
+h1, h2 { margin: 0; font-weight: 500; }
+h1 {
+  font-family: var(--font-display);
+  font-weight: 380;
+  font-size: clamp(34px, 4vw, 52px);
+  letter-spacing: -0.028em;
+  line-height: 1.05;
+  color: var(--vellum);
+  font-variation-settings: 'opsz' 96, 'SOFT' 30;
+}
+h2 {
+  font-family: var(--font-ui);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--vellum-muted);
+  margin-bottom: 14px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+h2::before {
+  content: '';
+  display: inline-block;
+  width: 22px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--accent), transparent);
+}
+
+p { line-height: 1.6; color: var(--vellum-soft); }
+
+/* =================================================================
+   atlas (macro)
+   ================================================================= */
+.atlas-header {
+  position: relative;
+  padding: 56px 56px 32px;
+  border-bottom: 1px solid var(--rule-soft);
+  z-index: 1;
+}
+.atlas-header::before {
+  content: 'ATLAS · MACRO';
+  position: absolute;
+  top: 28px;
+  left: 56px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.32em;
+  color: var(--accent);
+}
+.atlas-header h1 { margin-top: 18px; }
+.atlas-summary {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 350;
+  font-size: 18px;
+  color: var(--vellum-soft);
+  max-width: 80ch;
+  margin: 20px 0 0;
+  line-height: 1.55;
+}
+
+.atlas-main {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr);
+  gap: 28px;
+  padding: 32px 56px 64px;
+  align-items: start;
+}
+
+.atlas-canvas {
+  position: relative;
+  background: linear-gradient(180deg, rgba(15, 27, 42, 0.92), rgba(11, 19, 31, 0.92));
+  border: 1px solid var(--rule);
+  border-radius: 18px;
+  padding: 0;
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+.atlas-canvas::before {
+  content: 'MACRO DIAGRAM';
+  position: absolute;
+  top: 18px;
+  left: 22px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.28em;
+  color: var(--accent);
+  z-index: 3;
+}
+
+.atlas-canvas__toolbar {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  display: flex;
+  gap: 4px;
+  z-index: 3;
+  background: rgba(6, 11, 18, 0.65);
+  border: 1px solid var(--rule);
+  border-radius: 10px;
+  padding: 4px;
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+}
+.atlas-canvas__toolbar button {
+  background: transparent;
+  color: var(--vellum-soft);
+  border: 0;
+  padding: 4px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
+.atlas-canvas__toolbar button:hover { background: var(--ink-3); color: var(--accent); }
+
+/* Fixed-aspect viewport: the diagram always occupies the same block
+ * regardless of its viewBox aspect ratio, so horizontally-biased
+ * atlases no longer collapse to a thin strip. The SVG fills both axes
+ * via preserveAspectRatio="xMidYMid meet" (rendered as 100% / 100%). */
+.atlas-canvas__viewport {
+  position: relative;
+  width: 100%;
+  height: clamp(480px, 68vh, 760px);
+  overflow: hidden;
+  margin-top: 44px;
+  background:
+    radial-gradient(circle at 50% 38%, rgba(102, 229, 199, 0.05), transparent 60%),
+    linear-gradient(180deg, #05101B, #03080F);
+}
+.atlas-canvas__viewport::after {
+  /* blueprint grid only inside the viewport */
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, rgba(237, 231, 216, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(237, 231, 216, 0.04) 1px, transparent 1px);
+  background-size: 32px 32px;
+  pointer-events: none;
+}
+.atlas-canvas__viewport.is-grabbing { cursor: grabbing; }
+.atlas-canvas__viewport:not(.is-grabbing) { cursor: grab; }
+
+.atlas-svg {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: block;
+  user-select: none;
+  touch-action: none;
+  overflow: visible;
+}
+
+.atlas-legend {
+  list-style: none;
+  margin: 0;
+  padding: 14px 22px 18px;
+  display: flex;
+  gap: 22px;
+  flex-wrap: wrap;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--vellum-muted);
+  border-top: 1px solid var(--rule-soft);
+}
+.atlas-legend li { display: inline-flex; align-items: center; gap: 8px; }
+.legend-swatch { display: inline-block; width: 22px; height: 2px; border-radius: 1px; }
+.legend-swatch--call { background: var(--edge-call); }
+.legend-swatch--return { background: var(--edge-return); }
+.legend-swatch--data-row { background: var(--edge-data-row); }
+.legend-swatch--failure { background: var(--edge-failure); }
+
+.atlas-index {
+  background: rgba(15, 27, 42, 0.6);
+  border: 1px solid var(--rule);
+  border-radius: 18px;
+  padding: 22px 22px 14px;
+  max-height: clamp(520px, 72vh, 820px);
+  overflow: auto;
+  box-shadow: var(--shadow-card);
+}
+.atlas-index::-webkit-scrollbar { width: 10px; }
+.atlas-index::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 999px; }
+.atlas-index::-webkit-scrollbar-track { background: transparent; }
+
+.atlas-submodule-index {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.atlas-submodule-index__item { position: relative; }
+.atlas-submodule-index__item a {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 4px 12px;
+  padding: 12px 14px;
+  background: linear-gradient(180deg, rgba(31, 54, 81, 0.42), rgba(15, 27, 42, 0.6));
+  border: 1px solid var(--rule);
+  border-radius: 12px;
+  color: var(--vellum);
+  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+}
+.atlas-submodule-index__item a:hover {
+  transform: translateY(-1px);
+  border-color: var(--accent);
+  background: linear-gradient(180deg, rgba(102, 229, 199, 0.07), rgba(15, 27, 42, 0.7));
+}
+.atlas-submodule-index__feature {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--vellum-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  grid-column: 1 / 3;
+}
+.atlas-submodule-index__sub {
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: 18px;
+  letter-spacing: -0.01em;
+  color: var(--vellum);
+}
+.atlas-submodule-index__kind {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: rgba(11, 19, 31, 0.85);
+  border: 1px solid var(--rule);
+  color: var(--vellum-soft);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.atlas-submodule-index__role {
+  margin: 6px 14px 12px;
+  font-size: 12.5px;
+  color: var(--vellum-muted);
+  line-height: 1.5;
+}
+
+/* =================================================================
+   SVG macro nodes & edges
+   ================================================================= */
+.m-cluster__bg {
+  fill: rgba(11, 19, 31, 0.55);
+  stroke: rgba(237, 231, 216, 0.08);
+  stroke-width: 1;
+}
+.m-cluster__title {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  fill: var(--vellum-muted);
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+.m-node { cursor: pointer; }
+.m-node rect {
+  fill: rgba(6, 11, 18, 0.92);
+  stroke: var(--rule);
+  stroke-width: 1;
+  transition: stroke 160ms ease, fill 160ms ease, filter 160ms ease;
+}
+.m-node:hover rect,
+.m-node:focus rect,
+.m-node:focus-visible rect {
+  stroke: var(--accent);
+  stroke-width: 1.6;
+  fill: rgba(102, 229, 199, 0.08);
+  filter: drop-shadow(0 0 14px rgba(102, 229, 199, 0.35));
+}
+.m-node:focus { outline: none; }
+.m-node__title {
+  font-family: var(--font-display);
+  font-size: 15px;
+  font-weight: 500;
+  fill: var(--vellum);
+  letter-spacing: -0.01em;
+}
+.m-node__kind {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  fill: var(--vellum-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+}
+.m-node__role {
+  font-family: var(--font-ui);
+  font-size: 11.5px;
+  fill: var(--vellum-soft);
+}
+.m-node:hover .m-node__title,
+.m-node:focus .m-node__title { fill: var(--accent); }
+
+.m-node--ui rect { stroke: var(--kind-ui); }
+.m-node--api rect { stroke: var(--kind-api); }
+.m-node--service rect { stroke: var(--kind-service); }
+.m-node--db rect { stroke: var(--kind-db); }
+.m-node--pure-fn rect { stroke: var(--kind-pure-fn); }
+.m-node--queue rect { stroke: var(--kind-queue); }
+.m-node--external rect { stroke: var(--kind-external); stroke-dasharray: 5 4; }
+
+.m-edge path { stroke-width: 1.6; }
+.m-edge--call path { stroke: var(--edge-call); }
+.m-edge--return path { stroke: var(--edge-return); stroke-dasharray: 6 4; }
+.m-edge--data-row path { stroke: var(--edge-data-row); }
+.m-edge--failure path { stroke: var(--edge-failure); stroke-dasharray: 3 3; }
+
+.m-arrow path { fill: currentColor; }
+.m-arrow--call { color: var(--edge-call); }
+.m-arrow--return { color: var(--edge-return); }
+.m-arrow--data-row { color: var(--edge-data-row); }
+.m-arrow--failure { color: var(--edge-failure); }
+
+.m-edge__label {
+  fill: var(--vellum-soft);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  paint-order: stroke fill;
+  stroke: var(--ink);
+  stroke-width: 3.5;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+/* Cross-feature edges are routed across the entire atlas and tend to
+   be the loudest lines on screen. Dim them so intra-feature flow
+   reads first; restore full strength on hover/focus. */
+.m-edge--cross path { opacity: 0.5; stroke-width: 1.1; }
+.m-edge--cross .m-edge__label { opacity: 0.7; }
+.m-edge--cross:hover path,
+.m-edge--cross:focus-within path { opacity: 1; stroke-width: 1.8; }
+.m-edge--cross:hover .m-edge__label,
+.m-edge--cross:focus-within .m-edge__label { opacity: 1; }
+
+/* =================================================================
+   feature page
+   ================================================================= */
+.feature-header, .submodule-header {
+  position: relative;
+  padding: 52px 56px 28px;
+  border-bottom: 1px solid var(--rule-soft);
+  z-index: 1;
+}
+.feature-breadcrumb, .submodule-breadcrumb {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.22em;
+  color: var(--vellum-muted);
+  text-transform: uppercase;
+  margin-bottom: 22px;
+}
+.feature-breadcrumb a, .submodule-breadcrumb a { color: var(--accent); }
+.feature-depends {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--vellum-muted);
+  margin: 18px 0 0;
+}
+.feature-main, .submodule-main {
+  position: relative;
+  padding: 36px 56px 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  z-index: 1;
+}
+.feature-story p {
+  font-family: var(--font-display);
+  font-size: 19px;
+  font-weight: 350;
+  line-height: 1.6;
+  max-width: 70ch;
+  color: var(--vellum-soft);
+}
+
+.submodule-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+.submodule-card {
+  background: linear-gradient(180deg, rgba(31, 54, 81, 0.42), rgba(15, 27, 42, 0.65));
+  border: 1px solid var(--rule);
+  border-radius: 14px;
+  padding: 18px 18px 16px;
+  transition: transform 160ms ease, border-color 160ms ease;
+}
+.submodule-card:hover { transform: translateY(-2px); border-color: var(--accent); }
+.submodule-card__link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--vellum);
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: 18px;
+}
+.submodule-card__name { letter-spacing: -0.01em; }
+.submodule-card__kind {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--rule);
+  color: var(--vellum-soft);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.submodule-card__role {
+  margin: 10px 0 0;
+  font-size: 13px;
+  color: var(--vellum-muted);
+  line-height: 1.5;
+}
+
+.feature-edges__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.feature-edges__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 2.2fr);
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(15, 27, 42, 0.55);
+  border: 1px solid var(--rule);
+  border-radius: 12px;
+  font-size: 13px;
+  align-items: center;
+}
+.feature-edges__endpoints { font-family: var(--font-mono); color: var(--vellum); }
+.feature-edges__kind {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--vellum-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+}
+.feature-edges__label { color: var(--vellum-soft); }
+.feature-edges__item--call { border-left: 3px solid var(--edge-call); }
+.feature-edges__item--return { border-left: 3px solid var(--edge-return); }
+.feature-edges__item--data-row { border-left: 3px solid var(--edge-data-row); }
+.feature-edges__item--failure { border-left: 3px solid var(--edge-failure); }
+
+/* =================================================================
+   submodule page
+   ================================================================= */
+.submodule-kind {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--rule);
+  color: var(--accent);
+  margin-left: 14px;
+  vertical-align: middle;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+}
+.submodule-role {
+  color: var(--vellum-soft);
+  margin: 14px 0 0;
+  max-width: 70ch;
+  font-family: var(--font-display);
+  font-size: 17px;
+  font-weight: 350;
+  line-height: 1.55;
+}
+
+.sub-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  background: rgba(15, 27, 42, 0.55);
+  border: 1px solid var(--rule);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.sub-table th, .sub-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--rule-soft);
+  text-align: left;
+  vertical-align: top;
+}
+.sub-table tr:last-child td { border-bottom: none; }
+.sub-table th {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--vellum-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  background: rgba(6, 11, 18, 0.7);
+}
+.sub-table td { color: var(--vellum-soft); font-family: var(--font-mono); }
+.sub-table td:first-child { color: var(--vellum); }
+
+.sub-section__empty {
+  color: var(--vellum-muted);
+  font-style: italic;
+  font-size: 13px;
+  padding: 14px 18px;
+  background: rgba(15, 27, 42, 0.4);
+  border: 1px dashed var(--rule);
+  border-radius: 12px;
+  font-family: var(--font-display);
+}
+
+.sub-dataflow__canvas {
+  position: relative;
+  background: linear-gradient(180deg, rgba(15, 27, 42, 0.92), rgba(11, 19, 31, 0.92));
+  border: 1px solid var(--rule);
+  border-radius: 18px;
+  padding: 0;
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+.sub-dataflow__canvas::before {
+  content: 'INTERNAL FLOW';
+  position: absolute;
+  top: 18px;
+  left: 22px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.28em;
+  color: var(--accent);
+  z-index: 3;
+}
+.sub-dataflow__toolbar {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  display: flex;
+  gap: 4px;
+  z-index: 3;
+  background: rgba(6, 11, 18, 0.65);
+  border: 1px solid var(--rule);
+  border-radius: 10px;
+  padding: 4px;
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+}
+.sub-dataflow__toolbar button {
+  background: transparent;
+  color: var(--vellum-soft);
+  border: 0;
+  padding: 4px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
+.sub-dataflow__toolbar button:hover { background: var(--ink-3); color: var(--accent); }
+
+.sub-dataflow__viewport {
+  position: relative;
+  width: 100%;
+  height: clamp(480px, 64vh, 720px);
+  overflow: hidden;
+  margin-top: 44px;
+  background:
+    radial-gradient(circle at 50% 38%, rgba(102, 229, 199, 0.05), transparent 60%),
+    linear-gradient(180deg, #05101B, #03080F);
+}
+.sub-dataflow__viewport::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, rgba(237, 231, 216, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(237, 231, 216, 0.04) 1px, transparent 1px);
+  background-size: 32px 32px;
+  pointer-events: none;
+}
+.sub-dataflow__viewport.is-grabbing { cursor: grabbing; }
+.sub-dataflow__viewport:not(.is-grabbing) { cursor: grab; }
+.sub-dataflow__svg {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: block;
+  user-select: none;
+  touch-action: none;
+  overflow: visible;
+}
+.sub-dataflow__badge { fill: rgba(102, 229, 199, 0.12); stroke: var(--accent); stroke-width: 1.5; }
+.sub-dataflow__badge-text {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  fill: var(--accent);
+  letter-spacing: 0.04em;
+}
+.sub-dataflow__step .sub-dataflow__box {
+  fill: rgba(15, 27, 42, 0.78);
+  stroke: var(--rule);
+  stroke-width: 1;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
+}
+.sub-dataflow__step:hover .sub-dataflow__box { stroke: var(--accent); }
+.sub-dataflow__text {
+  font-family: var(--font-display);
+  font-size: 15px;
+  font-weight: 400;
+  fill: var(--vellum);
+}
+.sub-dataflow__arrow { stroke: var(--accent); stroke-width: 1.5; opacity: 0.7; }
+.sub-dataflow__fn-bg { fill: rgba(102, 229, 199, 0.16); stroke: var(--accent); stroke-width: 1; }
+.sub-dataflow__fn-text {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  fill: var(--accent);
+  letter-spacing: 0.04em;
+}
+.sub-dataflow__chip {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+}
+.sub-dataflow__chip--reads { fill: var(--kind-service); }
+.sub-dataflow__chip--writes { fill: var(--kind-db); }
+.sub-dataflow__empty {
+  color: var(--vellum-muted);
+  font-style: italic;
+  padding: 14px 18px;
+  border: 1px dashed var(--rule);
+  border-radius: 12px;
+  font-family: var(--font-display);
+}
+
+@media (max-width: 960px) {
+  .atlas-header, .feature-header, .submodule-header { padding: 40px 28px 24px; }
+  .atlas-header::before { left: 28px; }
+  .atlas-main { grid-template-columns: 1fr; padding: 24px 28px 48px; gap: 22px; }
+  .feature-main, .submodule-main { padding: 28px 28px 48px; gap: 32px; }
+}