concept-atlas-dense-explain 0.1.0

package/skill/assets/template/src/styles/concept-explain.css

@@ -0,0 +1,2425 @@
+@charset "UTF-8";
+
+/* ==========================================================================
+   THEME VARIABLES & DESIGN SYSTEM (Editorial / Knowledge Atlas Style)
+   ========================================================================== */
+
+:root,
+[data-theme="dark"] {
+  --theme-mode: "dark";
+  
+  /* Background layers - deep indigo slate for high-tech monograph feel */
+  --bg-canvas: #090d16;
+  --bg-surface: #0f172a;
+  --bg-card: #151f32;
+  --bg-card-hover: #1c2a44;
+  --bg-subtle: #1e293b;
+  --bg-highlight: rgba(56, 189, 248, 0.08);
+
+  /* Borders & Dividers */
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-medium: rgba(255, 255, 255, 0.14);
+  --border-strong: rgba(255, 255, 255, 0.24);
+  --border-accent: rgba(99, 102, 241, 0.4);
+
+  /* Typography Colors */
+  --text-primary: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --text-dim: #64748b;
+  --text-accent: #38bdf8;
+
+  /* Accent & Category Semantic Tones */
+  --primary: #6366f1;
+  --primary-light: #818cf8;
+  --primary-glow: rgba(99, 102, 241, 0.25);
+  
+  --accent-cyan: #06b6d4;
+  --accent-emerald: #10b981;
+  --accent-amber: #f59e0b;
+  --accent-rose: #f43f5e;
+  --accent-purple: #a855f7;
+
+  /* Code & Syntax */
+  --code-bg: #060911;
+  --code-text: #34d399;
+  --code-border: rgba(255, 255, 255, 0.1);
+
+  /* Shadows & Depth */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 30px -4px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
+  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.2);
+
+  /* Knowledge Badge & Callouts */
+  --callout-info-bg: rgba(56, 189, 248, 0.08);
+  --callout-info-border: #38bdf8;
+  --callout-warn-bg: rgba(245, 158, 11, 0.08);
+  --callout-warn-border: #f59e0b;
+  --callout-danger-bg: rgba(244, 63, 94, 0.08);
+  --callout-danger-border: #f43f5e;
+  --callout-success-bg: rgba(16, 185, 129, 0.08);
+  --callout-success-border: #10b981;
+
+  /* Graph background grid */
+  --graph-grid: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+}
+
+[data-theme="light"] {
+  --theme-mode: "light";
+  
+  /* Background layers - warm parchment & crisp editorial paper */
+  --bg-canvas: #f6f7f9;
+  --bg-surface: #ffffff;
+  --bg-card: #ffffff;
+  --bg-card-hover: #f1f5f9;
+  --bg-subtle: #f8fafc;
+  --bg-highlight: rgba(37, 99, 235, 0.06);
+
+  /* Borders & Dividers */
+  --border-subtle: rgba(0, 0, 0, 0.06);
+  --border-medium: rgba(0, 0, 0, 0.12);
+  --border-strong: rgba(0, 0, 0, 0.2);
+  --border-accent: rgba(79, 70, 229, 0.35);
+
+  /* Typography Colors */
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+  --text-dim: #94a3b8;
+  --text-accent: #2563eb;
+
+  /* Accent & Category Semantic Tones */
+  --primary: #4f46e5;
+  --primary-light: #6366f1;
+  --primary-glow: rgba(79, 70, 229, 0.18);
+
+  --accent-cyan: #0891b2;
+  --accent-emerald: #059669;
+  --accent-amber: #d97706;
+  --accent-rose: #e11d48;
+  --accent-purple: #9333ea;
+
+  /* Code & Syntax */
+  --code-bg: #1e293b;
+  --code-text: #38bdf8;
+  --code-border: rgba(0, 0, 0, 0.08);
+
+  /* Shadows & Depth */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
+  --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.12);
+
+  /* Knowledge Badge & Callouts */
+  --callout-info-bg: #eff6ff;
+  --callout-info-border: #3b82f6;
+  --callout-warn-bg: #fffbeb;
+  --callout-warn-border: #f59e0b;
+  --callout-danger-bg: #fff1f2;
+  --callout-danger-border: #f43f5e;
+  --callout-success-bg: #ecfdf5;
+  --callout-success-border: #10b981;
+
+  /* Graph background grid */
+  --graph-grid: radial-gradient(circle, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
+}
+
+/* ==========================================================================
+   RESET & BASE TYPOGRAPHY
+   ========================================================================== */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  background: var(--bg-canvas);
+  color: var(--text-primary);
+  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  letter-spacing: -0.01em;
+  overflow: hidden;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Editorial Title Font Styling */
+h1, h2, h3, .hero-title, .brand-title {
+  font-family: 'Lora', 'Noto Serif SC', Georgia, serif;
+}
+
+button, input, select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 3px;
+}
+
+.global-search { position: relative; display: flex; align-items: center; gap: 7px; min-width: 220px; margin-left: auto; color: var(--text-muted, #94a3b8); }
+.global-search input { width: 100%; border: 1px solid var(--line-subtle, rgba(148,163,184,.24)); border-radius: 8px; background: var(--surface-soft, rgba(15,23,42,.3)); color: inherit; padding: 7px 28px 7px 28px; }
+.global-search > svg { position: absolute; left: 9px; pointer-events: none; }
+.global-search > button { position: absolute; right: 5px; border: 0; background: transparent; color: inherit; padding: 3px; }
+.global-search-results { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; padding: 5px; border: 1px solid var(--line-subtle, rgba(148,163,184,.24)); border-radius: 10px; background: var(--surface-strong, #111827); box-shadow: 0 12px 30px rgba(0,0,0,.24); }
+.global-search-results button { display: grid; gap: 2px; width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary, #e2e8f0); text-align: left; padding: 8px; }
+.global-search-results button:hover { background: rgba(148,163,184,.12); }
+.global-search-results small { color: var(--text-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* Optional semantic layout primitives */
+.semantic-stack { display: flex; flex-direction: column; }
+.semantic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
+.semantic-split { display: grid; grid-template-columns: var(--split-ratio, 1fr 1fr); align-items: start; }
+.gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 28px; }
+.semantic-tabs details { border-bottom: 1px solid var(--border-subtle); padding: 8px 0; }
+.semantic-tabs summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
+.mermaid-tools { display: inline-flex; align-items: center; gap: 5px; }
+.mermaid-tools button { width: 22px; height: 22px; border: 1px solid var(--border-medium); border-radius: 4px; background: var(--bg-subtle); font-weight: 700; }
+.mermaid-tools button:hover { color: var(--primary); border-color: var(--primary); }
+.mermaid-canvas { overflow: hidden; min-height: 120px; display: grid; place-items: center; cursor: grab; }
+.mermaid-canvas-inner { display: inline-block; min-width: 100%; transform-origin: center center; transition: transform .15s ease; }
+
+/* Scrollbar beautification */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-medium);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-strong);
+}
+
+/* ==========================================================================
+   APP CONTAINER & HEADER
+   ========================================================================== */
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  background: var(--bg-canvas);
+}
+
+/* Header */
+.app-header {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border-medium);
+  z-index: 30;
+  box-shadow: var(--shadow-sm);
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.brand-section {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.brand-logo-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, var(--primary) 0%, #38bdf8 100%);
+  color: #fff;
+  box-shadow: var(--shadow-glow);
+}
+
+.brand-text-wrap {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.brand-title {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+}
+
+.brand-doc-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  border-left: 1px solid var(--border-medium);
+  padding-left: 12px;
+  max-width: 300px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* View switcher tabs */
+.view-tabs {
+  display: flex;
+  gap: 4px;
+  background: var(--bg-canvas);
+  padding: 4px;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle);
+}
+
+.view-tab {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 14px;
+  border-radius: 7px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-muted);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.view-tab:hover {
+  color: var(--text-primary);
+  background: rgba(125, 125, 125, 0.08);
+}
+
+.view-tab.active {
+  background: var(--bg-surface);
+  color: var(--primary);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-medium);
+}
+
+/* Theme Toggle Button */
+.theme-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 9px;
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  color: var(--text-secondary);
+  transition: all 0.2s ease;
+}
+
+.theme-toggle-btn:hover {
+  color: var(--text-primary);
+  border-color: var(--primary);
+  background: var(--bg-highlight);
+  transform: translateY(-1px);
+}
+
+/* Viewport Area */
+.app-main {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.app-toolbar {
+  position: absolute;
+  top: 14px;
+  right: 18px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px;
+  border: 1px solid var(--border-medium);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(10px);
+}
+
+.app-toolbar .view-tabs {
+  padding: 2px;
+}
+
+.app-toolbar .view-tab {
+  padding: 5px 10px;
+  font-size: 11px;
+}
+
+.app-toolbar .theme-toggle-btn {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  color: var(--text-muted);
+}
+
+.app-toolbar .theme-toggle-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-card-hover);
+}
+
+/* ==========================================================================
+   NODE EXPLORER (3-COLUMN EDITORIAL KNOWLEDGE LAYOUT)
+   ========================================================================== */
+
+.node-explorer-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr 340px;
+  height: 100%;
+  min-height: 0;
+}
+
+.explorer-side {
+  background: var(--bg-surface);
+  overflow-y: auto;
+  padding: 24px 18px;
+  transition: background-color 0.3s ease;
+}
+
+.left-side {
+  border-right: 1px solid var(--border-medium);
+}
+
+.right-side {
+  border-left: 1px solid var(--border-medium);
+}
+
+.side-section {
+  margin-bottom: 28px;
+}
+
+.compact-tree {
+  margin-top: 8px;
+  margin-bottom: 0;
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 12px;
+}
+
+.compact-tree > summary {
+  list-style: none;
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+.compact-tree > summary::-webkit-details-marker { display: none; }
+.compact-tree > summary::after {
+  content: '＋';
+  margin-left: auto;
+  color: var(--text-dim);
+  font-size: 13px;
+}
+.compact-tree[open] > summary { margin-bottom: 12px; }
+.compact-tree[open] > summary::after { content: '−'; }
+
+.side-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 12px;
+}
+
+.side-label::before {
+  content: "";
+  display: inline-block;
+  width: 4px;
+  height: 12px;
+  background: var(--primary);
+  border-radius: 2px;
+}
+
+/* Left: Breadcrumbs Tree */
+.ancestor-breadcrumbs {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+  padding-left: 14px;
+}
+
+.ancestor-breadcrumbs::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 10px;
+  bottom: 10px;
+  width: 2px;
+  background: var(--border-medium);
+}
+
+.breadcrumb-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  font-size: 13px;
+  transition: all 0.15s ease;
+  background: transparent;
+  border: 1px solid transparent;
+}
+
+.breadcrumb-node:hover {
+  background: var(--bg-subtle);
+  color: var(--text-primary);
+  border-color: var(--border-subtle);
+}
+
+.breadcrumb-node.active {
+  background: var(--bg-highlight);
+  color: var(--primary);
+  font-weight: 600;
+  border-color: var(--border-accent);
+}
+
+.bc-level-pill {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 4px;
+  border: 1px solid;
+  font-family: monospace;
+}
+
+.bc-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bc-arrow {
+  color: var(--text-dim);
+}
+
+.back-parent-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 9px 12px;
+  border-radius: 8px;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-medium);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.back-parent-btn:hover {
+  background: var(--bg-highlight);
+  color: var(--primary);
+  border-color: var(--primary);
+}
+
+/* Sibling List */
+.sibling-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sibling-btn {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 7px 10px;
+  border-radius: 7px;
+  text-align: left;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.15s ease;
+}
+
+.sibling-btn:hover {
+  background: var(--bg-subtle);
+  color: var(--text-primary);
+  transform: translateX(2px);
+}
+
+.sib-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.sib-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sib-lvl {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-dim);
+  font-family: monospace;
+}
+
+/* Navigation Hierarchy Tree */
+.concept-nav-tree {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.tree-node-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.tree-node-btn {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  text-align: left;
+  color: var(--text-secondary);
+  font-size: 12px;
+  transition: all 0.15s;
+  position: relative;
+}
+
+.tree-node-btn:hover {
+  background: var(--bg-subtle);
+  color: var(--text-primary);
+}
+
+.tree-node-btn.active {
+  background: var(--bg-highlight);
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.tree-node-btn.active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 3px;
+  background: var(--primary);
+  border-radius: 0 2px 2px 0;
+}
+
+.node-bullet {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.tree-title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tree-level {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-dim);
+  font-family: monospace;
+}
+
+/* ==========================================================================
+   MIDDLE COLUMN: KNOWLEDGE HERO & ARTICLE EXPLANATION
+   ========================================================================== */
+
+.explorer-center {
+  background: var(--bg-canvas);
+  overflow-y: auto;
+  padding: 32px 40px;
+  transition: background-color 0.3s ease;
+}
+
+.center-scrollable {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+/* Toolbar */
+.center-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border-medium);
+}
+
+.node-id-tag {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  font-family: 'Fira Code', monospace;
+  letter-spacing: 0.04em;
+}
+
+.node-id-tag code {
+  color: var(--primary-light);
+  background: var(--bg-surface);
+  padding: 3px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-subtle);
+}
+
+.level-indicators {
+  display: flex;
+  gap: 5px;
+}
+
+.level-pill {
+  padding: 4px 9px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  background: var(--bg-surface);
+  color: var(--text-dim);
+  border: 1px solid var(--border-medium);
+  transition: all 0.2s ease;
+}
+
+.level-pill:hover {
+  border-color: var(--text-muted);
+  color: var(--text-primary);
+}
+
+.level-pill.active {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.view-graph-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-medium);
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.2s ease;
+}
+
+.view-graph-btn:hover {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+  transform: translateY(-1px);
+}
+
+/* HERO EXPLANATORY CARD */
+.concept-hero-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-medium);
+  border-radius: 16px;
+  padding: 32px 36px;
+  margin-bottom: 28px;
+  box-shadow: var(--shadow-md);
+  position: relative;
+  overflow: hidden;
+}
+
+.concept-hero-card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--primary) 0%, #38bdf8 50%, #34d399 100%);
+}
+
+.hero-level-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  margin-bottom: 14px;
+}
+
+.hero-level-banner .badge {
+  background: var(--bg-highlight);
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border-accent);
+}
+
+.hero-title {
+  font-size: 32px;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1.25;
+  margin-bottom: 14px;
+  letter-spacing: -0.02em;
+}
+
+.hero-summary {
+  font-size: 16px;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin-bottom: 24px;
+  font-family: 'Lora', Georgia, serif;
+  font-style: italic;
+}
+
+.hero-meta-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 24px;
+}
+
+.meta-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.chip-label {
+  font-weight: 700;
+  color: var(--text-dim);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.chip-value {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+/* Local Flow Ribbon (Upstream -> Focus -> Downstream) */
+.local-flow-ribbon {
+  display: flex;
+  align-items: stretch;
+  gap: 12px;
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  padding: 16px;
+  border-radius: 12px;
+}
+
+.flow-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  padding: 12px 14px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-medium);
+  border-radius: 8px;
+  font-size: 12px;
+  transition: all 0.2s ease;
+}
+
+button.flow-box {
+  text-align: left;
+}
+
+.flow-box.current-focus {
+  border-color: var(--primary);
+  background: var(--bg-highlight);
+  box-shadow: var(--shadow-glow);
+}
+
+.flow-box.clickable:hover {
+  background: var(--bg-subtle);
+  border-color: var(--primary);
+  transform: translateY(-2px);
+}
+
+.flow-box.disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.box-type {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.box-title {
+  font-weight: 700;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+}
+
+.flow-arrow {
+  display: flex;
+  align-items: center;
+  color: var(--text-dim);
+  font-size: 16px;
+}
+
+.flow-node-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.flow-node-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  width: 100%;
+  padding: 4px 6px;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-subtle);
+  transition: all 0.15s ease;
+}
+
+.flow-node-link:hover {
+  color: var(--primary);
+  border-color: var(--primary);
+  background: var(--bg-surface);
+}
+
+/* ==========================================================================
+   CONTENT BLOCKS (Editorial Monograph Structure)
+   ========================================================================== */
+
+.content-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.node-block {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-medium);
+  border-radius: 12px;
+  padding: 24px 28px;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.2s ease;
+}
+
+.node-block:hover {
+  border-color: var(--border-strong);
+}
+
+.node-block.highlight-warn {
+  border-left: 4px solid var(--accent-rose);
+  background: var(--callout-danger-bg);
+}
+
+.block-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  padding-bottom: 10px;
+}
+
+.block-head h2 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+.block-head small {
+  font-size: 12px;
+  color: var(--text-dim);
+  font-weight: 500;
+}
+
+.block-body {
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.impl-lang {
+  font-size: 11px;
+  font-weight: 700;
+  font-family: 'Fira Code', monospace;
+  text-transform: uppercase;
+  background: var(--bg-canvas);
+  padding: 3px 8px;
+  border-radius: 6px;
+  color: var(--primary);
+  border: 1px solid var(--border-medium);
+}
+
+.code-block {
+  background: var(--code-bg);
+  padding: 18px 20px;
+  border-radius: 10px;
+  overflow-x: auto;
+  font-family: "Fira Code", monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--code-text);
+  border: 1px solid var(--code-border);
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.example-item, .counterexample-item {
+  margin-top: 12px;
+  padding: 14px 18px;
+  border-radius: 8px;
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+}
+
+.ex-title {
+  font-weight: 700;
+  color: var(--accent-emerald);
+  margin-bottom: 6px;
+  font-size: 13px;
+}
+
+.cex-title {
+  font-weight: 700;
+  color: var(--accent-rose);
+  margin-bottom: 6px;
+  font-size: 13px;
+}
+
+/* Subnode Grid for Drill-down */
+.subnodes-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 14px;
+  margin-top: 14px;
+}
+
+.subnode-card {
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  border-radius: 10px;
+  padding: 18px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+}
+
+.subnode-card:hover {
+  border-color: var(--primary);
+  background: var(--bg-surface);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md);
+}
+
+.sn-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.sn-level {
+  font-size: 11px;
+  font-weight: 800;
+  font-family: monospace;
+}
+
+.sn-arrow {
+  color: var(--text-dim);
+  transition: transform 0.2s;
+}
+
+.subnode-card:hover .sn-arrow {
+  color: var(--primary);
+  transform: translate(2px, -2px);
+}
+
+.sn-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.sn-summary {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  flex: 1;
+}
+
+/* ==========================================================================
+   RIGHT COLUMN: CONTEXT INSPECTOR & LOCAL GRAPH LINKS
+   ========================================================================== */
+
+.inspector-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.inspector-head {
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-medium);
+}
+
+.insp-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.insp-sub {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+
+.insp-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.insp-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.insp-pill-list {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.insp-pill {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 5px 12px;
+  border-radius: 6px;
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  color: var(--text-secondary);
+}
+
+.prereq-pill {
+  border-left: 3px solid var(--accent-amber);
+}
+
+.boundary-card {
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  padding: 12px 14px;
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.b-title {
+  font-weight: 700;
+  color: var(--accent-amber);
+  margin-bottom: 4px;
+}
+
+.b-content {
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.relation-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.relation-link-card {
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  border-radius: 8px;
+  padding: 12px 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.relation-link-card:hover {
+  background: var(--bg-surface);
+  border-color: var(--primary);
+  transform: translateX(3px);
+  box-shadow: var(--shadow-sm);
+}
+
+.rel-type-tag {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 4px;
+  border: 1px solid;
+  padding: 2px 7px;
+  margin-bottom: 6px;
+}
+
+.rel-target {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.rel-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.glossary-dl dt {
+  font-weight: 700;
+  color: var(--primary);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.glossary-dl dd {
+  color: var(--text-secondary);
+  font-size: 12px;
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+
+/* ==========================================================================
+   GLOBAL RELATION GRAPH VIEW
+   ========================================================================== */
+
+.relation-graph-layout {
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  height: 100%;
+  position: relative;
+}
+
+.graph-main {
+  position: relative;
+  height: 100%;
+  background: var(--bg-canvas);
+  background-image: var(--graph-grid);
+  background-size: 24px 24px;
+  overflow: hidden;
+}
+
+.graph-control-bar {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  right: 20px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  pointer-events: auto;
+}
+
+.graph-mode-switch {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-medium);
+  border-radius: 8px;
+  box-shadow: var(--shadow-sm);
+}
+
+.graph-mode-switch button {
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--text-dim);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.graph-mode-switch button:hover {
+  color: var(--text-primary);
+}
+
+.graph-mode-switch button.active {
+  color: #fff;
+  background: var(--primary);
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-medium);
+  padding: 8px 14px;
+  border-radius: 10px;
+  width: 260px;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.2s ease;
+}
+
+.search-box:focus-within {
+  border-color: var(--primary);
+  box-shadow: var(--shadow-glow);
+}
+
+.search-box input {
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.search-icon {
+  color: var(--text-dim);
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-medium);
+  padding: 7px 12px;
+  border-radius: 10px;
+  font-size: 12px;
+  box-shadow: var(--shadow-sm);
+}
+
+.filter-group select {
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.filter-group select option {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+
+.filter-label {
+  color: var(--text-dim);
+  font-weight: 600;
+}
+
+.graph-legend-ribbon {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: var(--bg-surface);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--border-medium);
+  padding: 8px 18px;
+  border-radius: 30px;
+  font-size: 11px;
+  box-shadow: var(--shadow-md);
+}
+
+.legend-title {
+  color: var(--text-dim);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.legend-items {
+  display: flex;
+  gap: 12px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--text-secondary);
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.graph-svg {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+
+.graph-svg:active {
+  cursor: grabbing;
+}
+
+/* SVG paths are open strokes; disabling the default fill prevents the
+   browser from closing them into grey polygons between connected nodes. */
+.graph-edge {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.graph-edge-label {
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   CONCEPT DRAFT CANVAS
+   ========================================================================== */
+
+.explorer-center {
+  min-width: 0;
+  overflow: hidden;
+  padding: 16px 20px 20px;
+  background:
+    linear-gradient(rgba(56, 189, 248, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(56, 189, 248, 0.025) 1px, transparent 1px),
+    var(--bg-canvas);
+  background-size: 28px 28px;
+}
+
+.center-scrollable {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.center-toolbar {
+  flex: 0 0 auto;
+  gap: 10px;
+  min-height: 24px;
+  margin-bottom: 4px;
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.draft-floating-tools {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px;
+  border: 1px solid var(--border-medium);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(8px);
+  opacity: 0.62;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.draft-floating-tools:hover,
+.draft-floating-tools:focus-within {
+  opacity: 1;
+  transform: translateY(-2px);
+}
+
+@media (max-width: 900px) {
+  .app-toolbar {
+    right: 10px;
+  }
+
+  .draft-floating-tools {
+    top: auto;
+    right: 8px;
+    bottom: 8px;
+  }
+}
+
+.draft-floating-tools .view-graph-btn {
+  margin: 0;
+  padding: 5px 9px;
+}
+
+.draft-zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border: 1px solid var(--border-medium);
+  border-radius: 8px;
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.draft-zoom-controls button {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+  color: var(--text-muted);
+}
+
+.draft-zoom-controls button:hover {
+  color: var(--text-primary);
+  background: var(--bg-card-hover);
+}
+
+.draft-zoom-controls span {
+  min-width: 36px;
+  text-align: center;
+}
+
+.draft-viewport {
+  flex: 1 1 auto;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+  padding: 12px 10px 40px;
+  scrollbar-gutter: stable both-edges;
+  cursor: grab;
+  touch-action: none;
+}
+
+.draft-viewport:active {
+  cursor: grabbing;
+}
+
+.draft-viewport.is-dragging,
+.draft-viewport.is-dragging * {
+  user-select: none !important;
+}
+
+.draft-board {
+  min-width: 980px;
+  min-height: 100%;
+  position: relative;
+  transform-origin: top left;
+  padding: 4px 8px 28px;
+  user-select: none;
+}
+
+.draft-board .node-block,
+.draft-board .inline-inspector {
+  user-select: text;
+}
+
+.draft-board .concept-hero-card {
+  margin-bottom: 18px;
+  padding: 22px 26px;
+  border-radius: 7px 12px 8px 10px;
+  border-style: solid;
+  box-shadow: 3px 4px 0 rgba(15, 23, 42, 0.12), var(--shadow-sm);
+}
+
+.draft-board .hero-title {
+  font-size: 28px;
+}
+
+.draft-board .hero-meta-chips {
+  margin-bottom: 0;
+}
+
+.draft-board .content-blocks {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(250px, 1fr));
+  align-items: start;
+  gap: 12px;
+}
+
+.hierarchy-strip {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 0 0 auto;
+  width: 100%;
+  min-height: 38px;
+  margin: 0 0 10px;
+  padding: 0 2px 8px;
+  border-bottom: 1px solid var(--border-medium);
+}
+
+.hierarchy-strip-main, .hierarchy-strip-children { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.hierarchy-strip-main { min-height: 30px; }
+.hierarchy-strip-label { flex: 0 0 auto; color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
+
+.hierarchy-strip-path,
+.hierarchy-strip-children {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.hierarchy-strip-path {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.hierarchy-strip-path button,
+.hierarchy-strip-path strong,
+.hierarchy-strip-children button,
+.hierarchy-strip-empty {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 26px;
+  padding: 3px 6px;
+  border-radius: 5px;
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
+.hierarchy-strip-path button:hover,
+.hierarchy-strip-children button:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+}
+
+.hierarchy-strip-path span {
+  color: var(--text-dim);
+  font-family: 'Fira Code', monospace;
+  font-size: 9px;
+}
+
+.hierarchy-strip-path strong {
+  border: 1px solid var(--border-accent);
+  background: var(--bg-highlight);
+  color: var(--text-primary);
+}
+
+.hierarchy-strip-children {
+  padding-left: 0;
+}
+
+.hierarchy-child-scroll { display: flex; gap: 5px; overflow-x: auto; min-width: 0; }
+
+.hierarchy-strip-children button {
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+  color: var(--text-accent);
+}
+
+.hierarchy-strip-children .hierarchy-parent-link {
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+}
+
+.hierarchy-strip-empty {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.hierarchy-navigator {
+  margin: 0 0 16px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--bg-surface) 84%, var(--primary) 16%);
+}
+
+.hierarchy-nav-label {
+  margin-bottom: 6px;
+  color: var(--text-dim);
+  font-family: 'Fira Code', monospace;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hierarchy-nav-track {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.hierarchy-nav-node,
+.hierarchy-nav-current,
+.hierarchy-nav-children {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+  padding: 7px 9px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--bg-canvas);
+  text-align: left;
+}
+
+.hierarchy-nav-node:hover:not(:disabled) {
+  border-color: var(--primary-light);
+  background: var(--bg-card-hover);
+}
+
+.hierarchy-nav-node small,
+.hierarchy-nav-current small,
+.hierarchy-nav-children small {
+  margin-bottom: 2px;
+  color: var(--text-dim);
+  font-size: 9px;
+  font-weight: 800;
+}
+
+.hierarchy-nav-node span,
+.hierarchy-nav-current span,
+.hierarchy-nav-children > span {
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 11px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hierarchy-nav-current {
+  flex: 0 0 130px;
+  border-color: var(--border-accent);
+  background: var(--bg-highlight);
+}
+
+.hierarchy-nav-arrow {
+  align-self: center;
+  flex: 0 0 auto;
+  color: var(--text-dim);
+}
+
+.hierarchy-nav-children.is-disabled,
+.hierarchy-nav-node.is-disabled {
+  opacity: 0.5;
+}
+
+.hierarchy-child-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.hierarchy-child-links button {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  max-width: 100%;
+  padding: 2px 5px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  color: var(--text-accent);
+  font-size: 10px;
+}
+
+.hierarchy-child-links button:hover {
+  border-color: var(--primary-light);
+  background: var(--bg-card-hover);
+}
+
+.draft-board .node-block {
+  min-width: 0;
+  padding: 16px 17px;
+  border-radius: 8px 11px 7px 10px;
+  box-shadow: 2px 3px 0 rgba(15, 23, 42, 0.09), var(--shadow-sm);
+}
+
+.draft-board .node-block:nth-child(3n) {
+  transform: rotate(-0.2deg);
+}
+
+.draft-board .node-block:nth-child(3n + 1) {
+  transform: rotate(0.15deg);
+}
+
+.draft-board .drill-down-section,
+.draft-board .custom-section {
+  grid-column: auto;
+  justify-self: start;
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.draft-board .custom-section:has(.semantic-widget-absolute) {
+  position: static;
+  width: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  overflow: visible;
+  box-shadow: none;
+}
+
+.node-explorer-layout {
+  grid-template-columns: 220px minmax(0, 1fr);
+}
+
+.node-explorer-layout .right-side {
+  display: none;
+}
+
+.inline-inspector {
+  margin-top: 18px;
+  padding: 18px 20px;
+  border: 1px dashed var(--border-strong);
+  border-radius: 10px 7px 11px 8px;
+  background: color-mix(in srgb, var(--bg-surface) 86%, var(--primary) 14%);
+  box-shadow: 2px 3px 0 rgba(15, 23, 42, 0.08);
+}
+
+.inline-inspector-head {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.inline-inspector-head h2 {
+  margin-top: 2px;
+  font-size: 18px;
+  color: var(--text-primary);
+}
+
+.inline-inspector-count {
+  color: var(--text-dim);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.inline-inspector-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(180px, 1fr));
+  gap: 14px;
+}
+
+.inline-note-block {
+  min-width: 0;
+}
+
+.inline-note-block > .insp-label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.inline-pill-flow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.inline-boundary {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 8px 10px;
+  border-left: 2px solid var(--accent-amber);
+  background: var(--bg-canvas);
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
+.inline-boundary + .inline-boundary {
+  margin-top: 6px;
+}
+
+.inline-boundary b {
+  color: var(--accent-amber);
+  font-size: 11px;
+}
+
+.relation-column {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.inline-relation {
+  display: block;
+  width: 100%;
+  padding: 7px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--bg-canvas);
+  text-align: left;
+}
+
+.inline-relation:hover {
+  border-color: var(--primary-light);
+  background: var(--bg-card-hover);
+}
+
+.inline-relation-type {
+  display: block;
+  margin-bottom: 2px;
+  font-size: 10px;
+  font-weight: 800;
+}
+
+.inline-relation-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  color: var(--text-primary);
+  font-size: 12px;
+}
+
+.inline-relation small {
+  display: block;
+  margin-top: 3px;
+  color: var(--text-dim);
+  font-size: 10px;
+  line-height: 1.45;
+}
+
+/* High-density MDX widgets */
+.semantic-mermaid,
+.semantic-relation-map,
+.semantic-insight,
+.semantic-note-grid {
+  min-width: 0;
+}
+
+.draft-board .custom-section {
+  padding: 12px 14px;
+}
+
+/* Layout primitives are orchestration layers, not another card around their children. */
+.draft-board .custom-section:has(.semantic-grid),
+.draft-board .custom-section:has(.semantic-split),
+.draft-board .custom-section:has(.semantic-stack) {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  width: 100%;
+}
+
+.draft-board .semantic-grid,
+.draft-board .semantic-split {
+  width: 100%;
+  align-items: stretch;
+}
+.draft-board .semantic-grid { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .9fr); }
+
+.draft-board .semantic-grid > .semantic-mermaid,
+.draft-board .semantic-grid > .semantic-relation-map {
+  width: 100% !important;
+  max-width: none;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--border-medium);
+  border-radius: 10px;
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
+}
+
+.semantic-relation-path {
+  width: 100%;
+  margin: 0 0 14px;
+  padding: 14px 16px;
+  border: 1px solid var(--border-medium);
+  border-radius: 10px;
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
+}
+.relation-path-steps { display: flex; align-items: stretch; overflow-x: auto; padding: 2px 0 4px; }
+.relation-path-node { flex: 1 0 150px; min-width: 150px; padding: 10px 12px; border: 1px solid var(--border-medium); border-top: 3px solid var(--accent-cyan); border-radius: 8px; background: var(--bg-card); }
+.relation-path-node.tone-success { border-top-color: var(--accent-emerald); }
+.relation-path-node.tone-warning { border-top-color: var(--accent-amber); }
+.relation-path-node.tone-danger { border-top-color: var(--accent-rose); }
+.relation-path-kicker, .relation-path-node strong, .relation-path-node small { display: block; }
+.relation-path-kicker { color: var(--text-dim); font: 700 10px 'Fira Code', monospace; margin-bottom: 4px; }
+.relation-path-node strong { color: var(--text-primary); font-size: 13px; }
+.relation-path-node small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
+.relation-path-edge { flex: 0 0 72px; display: grid; place-items: center; position: relative; color: var(--text-accent); font: 700 10px 'Fira Code', monospace; }
+.relation-path-edge::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1px dashed var(--border-strong); }
+.relation-path-edge span { z-index: 1; padding: 2px 4px; background: var(--bg-surface); }
+
+.draft-board .semantic-mermaid,
+.draft-board .semantic-relation-map {
+  width: fit-content;
+  max-width: 100%;
+  overflow: visible;
+}
+
+.draft-board .semantic-insight,
+.draft-board .semantic-note-grid {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.semantic-widget-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+  color: var(--text-primary);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.semantic-widget-head code {
+  color: var(--text-dim);
+  font-family: 'Fira Code', monospace;
+  font-size: 9px;
+}
+
+.mermaid-canvas {
+  min-height: 100px;
+  overflow: auto;
+  padding: 4px;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.mermaid-canvas svg {
+  max-width: none;
+  min-width: 100%;
+  height: auto;
+}
+
+.mermaid-error {
+  margin: 0;
+  color: var(--accent-rose);
+  font-size: 11px;
+  white-space: pre-wrap;
+}
+
+.relation-map-grid {
+  display: grid;
+  gap: 5px;
+}
+
+.relation-map-row {
+  display: grid;
+  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
+  gap: 8px;
+  align-items: center;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 11px;
+}
+
+.relation-map-source { color: var(--text-secondary); }
+.relation-map-target { color: var(--text-accent); font-weight: 700; }
+.relation-map-arrow { color: var(--accent-amber); font-family: 'Fira Code', monospace; font-size: 10px; }
+.relation-map-row small { grid-column: 1 / -1; color: var(--text-dim); }
+
+.semantic-insight {
+  padding: 12px 14px;
+  border-left: 3px solid var(--primary-light);
+  background: var(--bg-highlight);
+}
+
+.insight-kicker { margin-bottom: 4px; color: var(--text-accent); font-size: 11px; font-weight: 800; }
+.insight-body { color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
+.insight-warn { border-color: var(--accent-amber); background: var(--callout-warn-bg); }
+.insight-warn .insight-kicker { color: var(--accent-amber); }
+.insight-success { border-color: var(--accent-emerald); background: var(--callout-success-bg); }
+.insight-success .insight-kicker { color: var(--accent-emerald); }
+
+.semantic-note-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+}
+
+.semantic-note {
+  min-height: 54px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px 8px 5px 7px;
+  background: var(--bg-card);
+  box-shadow: 2px 2px 0 rgba(15, 23, 42, 0.08);
+}
+
+.semantic-note strong,
+.semantic-note span { display: block; }
+.semantic-note strong { margin-bottom: 4px; color: var(--text-primary); font-size: 11px; }
+.semantic-note span { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
+
+@media (max-width: 1120px) {
+  .node-explorer-layout {
+    grid-template-columns: 190px minmax(0, 1fr);
+  }
+
+  .draft-board .content-blocks {
+    grid-template-columns: repeat(2, minmax(250px, 1fr));
+  }
+
+  .draft-board .drill-down-section,
+  .draft-board .custom-section {
+    grid-column: auto;
+  }
+
+  .inline-inspector-grid {
+    grid-template-columns: repeat(2, minmax(180px, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .node-explorer-layout { display: block; overflow-y: auto; }
+  .explorer-side { max-height: none; border: 0; }
+  .left-side { display: none; }
+  .explorer-center { padding: 16px 12px 18px; }
+  .hierarchy-strip { width: 100%; top: 4px; }
+  .draft-board { min-width: 0; }
+  .semantic-split { grid-template-columns: 1fr; }
+  .draft-board .semantic-grid { grid-template-columns: 1fr; }
+  .draft-board .content-blocks {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 760px) {
+  .relation-graph-layout { display: flex; flex-direction: column; }
+  .graph-main { min-height: 62vh; }
+  .graph-side-panel { max-height: 38vh; border-left: 0; border-top: 1px solid var(--border-medium); padding: 16px; }
+  .graph-control-bar { left: 10px; right: 10px; top: 10px; flex-wrap: wrap; gap: 6px; }
+  .graph-control-bar .filter-group { display: none; }
+  .graph-legend-ribbon { display: none; }
+}
+
+.graph-side-panel {
+  background: var(--bg-surface);
+  border-left: 1px solid var(--border-medium);
+  padding: 28px 24px;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg);
+  transition: background-color 0.3s ease;
+}
+
+.graph-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.panel-badge {
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.panel-node-title {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+
+.panel-summary {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.jump-explorer-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px;
+  border-radius: 10px;
+  background: var(--primary);
+  color: #fff;
+  font-weight: 700;
+  font-size: 13px;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.2s ease;
+}
+
+.jump-explorer-btn:hover {
+  background: var(--primary-light);
+  box-shadow: var(--shadow-glow);
+  transform: translateY(-1px);
+}
+
+.panel-divider {
+  height: 1px;
+  background: var(--border-medium);
+  margin: 6px 0;
+}
+
+.panel-section .section-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 12px;
+}
+
+.panel-rel-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.panel-rel-card {
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  border-radius: 8px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.panel-rel-card:hover {
+  border-color: var(--primary);
+  background: var(--bg-subtle);
+  transform: translateX(2px);
+}
+
+.rel-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 10px;
+  margin-bottom: 4px;
+}
+
+.rel-tag {
+  font-weight: 700;
+}
+
+.rel-dir {
+  color: var(--text-dim);
+}
+
+.rel-target-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.rel-target-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.io-capsule {
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-medium);
+  padding: 12px 14px;
+  border-radius: 8px;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.empty-inspector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 320px;
+  color: var(--text-dim);
+  text-align: center;
+  gap: 14px;
+  font-size: 13px;
+  padding: 0 20px;
+}
+
+.empty-subtext {
+  font-size: 12px;
+  color: var(--text-dim);
+  font-style: italic;
+  padding: 6px 0;
+}
+
+/* ==========================================================================
+   SEMANTIC PRESENTATION COMPONENTS (Matrix, Compare, Callouts)
+   ========================================================================== */
+
+.semantic-learning-objectives,
+.semantic-key-question,
+.semantic-evidence,
+.semantic-invariant,
+.semantic-failure-mode {
+  border: 1px solid var(--line-subtle, rgba(148, 163, 184, .24));
+  border-radius: 12px;
+  padding: 12px 14px;
+  background: var(--surface-soft, rgba(15, 23, 42, .28));
+}
+
+.semantic-learning-objectives ul { margin: 8px 0 0; padding-left: 20px; }
+.semantic-learning-objectives li { margin: 4px 0; }
+.semantic-key-question { display: flex; align-items: baseline; gap: 10px; border-color: rgba(56, 189, 248, .35); }
+.semantic-key-question strong { color: var(--text-primary, #e2e8f0); }
+.semantic-evidence { display: grid; gap: 7px; border-color: rgba(52, 211, 153, .3); }
+.evidence-command { overflow-x: auto; color: #a7f3d0; }
+.evidence-observes { color: var(--text-secondary, #cbd5e1); }
+.semantic-invariant { border-color: rgba(129, 140, 248, .35); }
+.semantic-invariant > div:last-child { margin-top: 6px; }
+.semantic-failure-mode { border-color: rgba(251, 146, 60, .38); }
+.semantic-failure-mode dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 8px 0 0; }
+.semantic-failure-mode dt { color: var(--text-muted, #94a3b8); font-size: .8rem; }
+.semantic-failure-mode dd { margin: 0; }
+.failure-details { margin-top: 10px; }
+.semantic-tradeoff { border: 1px solid rgba(250, 204, 21, .3); border-radius: 12px; padding: 12px 14px; background: var(--surface-soft, rgba(15,23,42,.24)); }
+.tradeoff-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 8px; }
+.tradeoff-option { display: grid; gap: 4px; padding: 9px; border-radius: 8px; background: rgba(148,163,184,.08); }
+.tradeoff-option span { color: var(--text-secondary, #cbd5e1); font-size: .86rem; }
+.tradeoff-option b { color: var(--text-muted, #94a3b8); font-size: .72rem; margin-right: 5px; }
+
+.semantic-callout {
+  padding: 16px 20px;
+  border-radius: 10px;
+  margin: 14px 0;
+  background: var(--callout-info-bg);
+  border-left: 4px solid var(--callout-info-border);
+}
+
+.semantic-callout.callout-warn {
+  border-left-color: var(--callout-warn-border);
+  background: var(--callout-warn-bg);
+}
+
+.semantic-callout.callout-danger {
+  border-left-color: var(--callout-danger-border);
+  background: var(--callout-danger-bg);
+}
+
+.callout-title {
+  font-weight: 700;
+  margin-bottom: 6px;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.callout-content {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.semantic-decision-matrix, .semantic-compare-table {
+  overflow-x: auto;
+  margin-top: 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border-medium);
+  background: var(--bg-canvas);
+}
+
+.matrix-title {
+  padding: 12px 16px;
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-medium);
+  background: var(--bg-surface);
+}
+
+.semantic-decision-matrix table, .semantic-compare-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.semantic-decision-matrix th, .semantic-compare-table th {
+  background: var(--bg-surface);
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-medium);
+  border-right: 1px solid var(--border-subtle);
+  text-align: left;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.semantic-decision-matrix td, .semantic-compare-table td {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  border-right: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+}
+
+.semantic-decision-matrix tr:last-child td, .semantic-compare-table tr:last-child td {
+  border-bottom: none;
+}