viteboard 0.1.0

package/src/styles.css

@@ -0,0 +1,3257 @@
+:root {
+  --brand-100: #ffffff;
+  --brand-200: #4dabf7;
+  --brand-300: #0078d4;
+  --brand-400: #495057;
+  --brand-500: #0078d4;
+  --brand-600: #005a9e;
+  --neutral-100: #f3f2f1;
+  --neutral-200: #eaeaea;
+  --neutral-300: #d1d1d1;
+  --neutral-400: #c8c8c8;
+  --neutral-500: #6e6e6e;
+  --neutral-600: #7a7a7a;
+  --neutral-700: #495057;
+  --neutral-800: #4a4a4a;
+  --neutral-900: #0f0f0f;
+  --neutral-000: #ffffff;
+  --success-main: #28a745;
+  --success-bg: #e6f4ea;
+  --success-text: #1e7e34;
+  --warning-main: #dc2626;
+  --warning-bg: #fef2f2;
+  --warning-text: #ffffff;
+  --error-main: #cd0000;
+  --error-bg: #ffe5e5;
+  --error-text: #b91c1c;
+  --info-main: #1080a6;
+  --info-bg: #e0f7fa;
+  --info-text: #0369a1;
+  --bg-canvas: var(--neutral-100);
+  --bg-toolbar: rgba(255, 255, 255, 0.92);
+  --bg-panel: var(--brand-100);
+  --bg-hover: rgba(0, 0, 0, 0.05);
+  --bg-active: rgba(0, 120, 212, 0.12);
+  --surface-raised: var(--brand-100);
+  --accent: var(--neutral-500);
+  --accent-quiet: rgba(110, 110, 110, 0.14);
+  --accent-soft: rgba(110, 110, 110, 0.08);
+  --accent-secondary: var(--brand-300);
+  --accent-secondary-quiet: rgba(0, 120, 212, 0.13);
+  --focus-glow: rgba(0, 120, 212, 0.26);
+  --text-primary: var(--neutral-900);
+  --text-secondary: #6e6e6e;
+  --border-subtle: rgba(0, 0, 0, 0.08);
+  --selection: var(--accent);
+  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-modal: 0 12px 48px rgba(0, 0, 0, 0.18);
+  --grid-dot: rgba(110, 110, 110, 0.16);
+  --danger: var(--error-main);
+}
+
+[data-theme="dark"] {
+  --bg-canvas: #0d0d0d;
+  --bg-toolbar: rgba(20, 22, 23, 0.94);
+  --bg-panel: #1a1a1a;
+  --bg-hover: rgba(255, 255, 255, 0.055);
+  --bg-active: rgba(97, 218, 251, 0.12);
+  --surface-raised: #212121;
+  --accent: #61dafb;
+  --accent-quiet: rgba(97, 218, 251, 0.14);
+  --accent-soft: rgba(97, 218, 251, 0.075);
+  --accent-secondary: #73d0f4;
+  --accent-secondary-quiet: rgba(97, 218, 251, 0.18);
+  --focus-glow: rgba(97, 218, 251, 0.28);
+  --text-primary: #f6f6f3;
+  --text-secondary: #a7aaa8;
+  --border-subtle: rgba(255, 255, 255, 0.09);
+  --selection: var(--accent);
+  --shadow-soft: 0 16px 46px rgba(0, 0, 0, 0.52), 0 1px 1px rgba(255, 255, 255, 0.03);
+  --shadow-modal: 0 22px 70px rgba(0, 0, 0, 0.72);
+  --grid-dot: rgba(97, 218, 251, 0.1);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: var(--bg-canvas);
+  color: var(--text-primary);
+}
+
+#app {
+  position: fixed;
+  inset: 0;
+}
+
+.canvas-stack {
+  position: absolute;
+  inset: 0;
+}
+
+.canvas-stack canvas {
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+
+/* ---------- Toolbar ---------- */
+.bottom-tool-cluster {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  z-index: 125;
+}
+
+.toolbar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px;
+  background: var(--bg-toolbar);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  box-shadow: var(--shadow-soft);
+  z-index: 100;
+}
+
+.bottom-tool-cluster .toolbar {
+  position: relative;
+  inset: auto;
+  transform: none;
+  z-index: 1;
+}
+
+.shape-tool-group {
+  position: relative;
+  display: flex;
+}
+
+.shape-tool-popover {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 12px);
+  transform: translateX(-50%) translateY(8px) scale(0.96);
+  transform-origin: bottom center;
+  display: grid;
+  grid-template-columns: repeat(3, 38px);
+  gap: 4px;
+  padding: 6px;
+  background: var(--bg-toolbar);
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.shape-tool-group.open .shape-tool-popover {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(-50%) translateY(0) scale(1);
+}
+
+.shape-option-btn {
+  width: 38px;
+  height: 38px;
+}
+
+.shape-tool-popover::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: -5px;
+  width: 10px;
+  height: 10px;
+  transform: translateX(-50%) rotate(45deg);
+  background: var(--bg-toolbar);
+  border-right: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.context-tool-popover {
+  position: relative;
+  width: 0;
+  height: 52px;
+  transform: translateX(-14px) scale(0.96);
+  transform-origin: left center;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  background: var(--bg-toolbar);
+  border: 1px solid transparent;
+  border-radius: 999px;
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+  transition:
+    width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
+    padding 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 0.18s ease,
+    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
+    border-color 0.18s ease;
+}
+
+.context-tool-popover.is-visible {
+  padding: 6px 10px;
+  border-color: var(--border-subtle);
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0) scale(1);
+}
+
+.sticky-color-popover.is-visible {
+  width: 286px;
+}
+
+.text-size-popover.is-visible {
+  width: 300px;
+}
+
+.shape-style-popover.is-visible {
+  width: 386px;
+}
+
+.sticky-color-btn,
+.shape-fill-btn {
+  width: 24px;
+  height: 24px;
+  border: 1px solid rgba(0, 0, 0, 0.16);
+  border-radius: 999px;
+  background: var(--swatch);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
+  cursor: pointer;
+  opacity: 0;
+  transform: translateX(-6px) scale(0.88);
+  transition:
+    opacity 0.16s ease,
+    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 0.12s ease,
+    border-color 0.12s ease;
+}
+
+.shape-text-color-btn {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateX(-6px) scale(0.88);
+  transition:
+    opacity 0.16s ease,
+    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 0.12s ease,
+    border-color 0.12s ease,
+    background 0.12s ease;
+}
+
+.shape-text-color-btn[aria-label="White text"] {
+  background: #ffffff;
+  color: #252829;
+}
+
+.shape-text-color-btn[aria-label="Black text"] {
+  background: #252829;
+  color: #ffffff;
+}
+
+.context-tool-divider {
+  width: 1px;
+  height: 28px;
+  background: var(--border-subtle);
+  opacity: 0;
+  transform: scaleY(0.65);
+  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.text-size-btn {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 38px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateX(-6px) scale(0.88);
+  transition:
+    opacity 0.16s ease,
+    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+    background 0.12s ease,
+    color 0.12s ease,
+    border-color 0.12s ease;
+}
+
+.context-tool-popover.is-visible .sticky-color-btn,
+.context-tool-popover.is-visible .shape-fill-btn,
+.context-tool-popover.is-visible .shape-text-color-btn,
+.context-tool-popover.is-visible .text-size-btn,
+.context-tool-popover.is-visible .context-tool-divider {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.context-tool-popover.is-visible > :nth-child(2) { transition-delay: 0.015s; }
+.context-tool-popover.is-visible > :nth-child(3) { transition-delay: 0.03s; }
+.context-tool-popover.is-visible > :nth-child(4) { transition-delay: 0.045s; }
+.context-tool-popover.is-visible > :nth-child(5) { transition-delay: 0.06s; }
+.context-tool-popover.is-visible > :nth-child(6) { transition-delay: 0.075s; }
+.context-tool-popover.is-visible > :nth-child(7) { transition-delay: 0.09s; }
+.context-tool-popover.is-visible > :nth-child(8) { transition-delay: 0.105s; }
+
+.sticky-color-btn:hover,
+.shape-fill-btn:hover {
+  transform: translateY(-1px) scale(1.04);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52), 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+.sticky-color-btn:focus-visible,
+.shape-fill-btn:focus-visible {
+  outline: 2px solid var(--selection);
+  outline-offset: 3px;
+}
+
+.text-size-btn:hover,
+.text-size-btn:focus-visible {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.shape-text-color-btn:hover,
+.shape-text-color-btn:focus-visible {
+  border-color: color-mix(in srgb, var(--selection) 45%, var(--border-subtle));
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
+  outline: none;
+}
+
+.sticky-color-btn.active,
+.shape-fill-btn.active {
+  border-color: var(--brand-500);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.54), 0 0 0 3px rgba(66, 141, 48, 0.2);
+}
+
+.shape-text-color-btn.active {
+  border-color: var(--brand-500);
+  box-shadow: 0 0 0 3px rgba(66, 141, 48, 0.2);
+}
+
+.text-size-btn.active {
+  border-color: color-mix(in srgb, var(--selection) 36%, var(--border-subtle));
+  background: var(--bg-active);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .sticky-color-btn,
+[data-theme="dark"] .shape-fill-btn {
+  border-color: rgba(255, 255, 255, 0.18);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
+}
+
+.layer-menu {
+  position: fixed;
+  min-width: 176px;
+  padding: 6px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  box-shadow: var(--shadow-modal);
+  z-index: 150;
+}
+
+.layer-menu-label {
+  padding: 8px 10px 5px;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.layer-menu button {
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 650;
+  text-align: left;
+  cursor: pointer;
+}
+
+.layer-menu button:hover,
+.layer-menu button:focus-visible {
+  background: var(--bg-hover);
+  outline: none;
+}
+
+.layer-menu-divider {
+  height: 1px;
+  margin: 5px 6px;
+  background: var(--border-subtle);
+}
+
+.toolbar-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--border-subtle);
+  margin: 0 4px;
+}
+
+.tool-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border: none;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.tool-btn:hover {
+  background: var(--bg-hover);
+}
+
+.tool-btn:focus-visible {
+  outline: 2px solid var(--selection);
+  outline-offset: 1px;
+}
+
+.tool-btn.active {
+  background: var(--bg-active);
+  color: var(--selection);
+}
+
+.tool-btn svg {
+  width: 19px;
+  height: 19px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.tool-btn .tooltip {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  padding: 5px 9px;
+  font-size: 11.5px;
+  font-weight: 500;
+  border-radius: 7px;
+  background: var(--text-primary);
+  color: var(--bg-panel);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.tool-btn:hover .tooltip {
+  opacity: 1;
+}
+
+.tooltip kbd {
+  font-family: inherit;
+  opacity: 0.65;
+  margin-left: 5px;
+}
+
+/* ---------- Top bar ---------- */
+.top-left {
+  position: fixed;
+  top: 14px;
+  left: 14px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.board-title {
+  height: 40px;
+  padding: 0 11px;
+  background: var(--bg-toolbar);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  box-shadow: var(--shadow-soft);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+  outline: none;
+  min-width: 60px;
+  max-width: calc(100vw - 460px);
+}
+
+.board-title:focus {
+  border-color: var(--selection);
+}
+
+.board-title-measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: pre;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: inherit;
+}
+
+.top-right {
+  position: fixed;
+  top: 14px;
+  right: 14px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.control-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: var(--bg-toolbar);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  box-shadow: var(--shadow-soft);
+}
+
+.control-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  min-width: 30px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s ease;
+  position: relative;
+}
+
+.control-btn:hover {
+  background: var(--bg-hover);
+}
+
+.control-btn.danger-control:hover {
+  color: var(--danger);
+}
+
+.control-btn:focus-visible {
+  outline: 2px solid var(--selection);
+}
+
+.control-btn svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.zoom-label {
+  font-variant-numeric: tabular-nums;
+  min-width: 48px;
+  text-align: center;
+}
+
+/* ---------- Performance overlay ---------- */
+.perf-overlay {
+  position: fixed;
+  top: 60px;
+  right: 14px;
+  z-index: 99;
+  padding: 12px 14px;
+  background: var(--bg-toolbar);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  box-shadow: var(--shadow-soft);
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  line-height: 1.7;
+  color: var(--text-primary);
+  white-space: pre;
+  pointer-events: none;
+  display: none;
+}
+
+.perf-overlay.visible {
+  display: block;
+}
+
+/* ---------- Modals ---------- */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  box-shadow: var(--shadow-modal);
+  width: 520px;
+  max-width: calc(100vw - 40px);
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.modal h2 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.modal-close {
+  float: right;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 18px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: 6px;
+}
+
+.modal-close:hover {
+  background: var(--bg-hover);
+}
+
+.modal .board-title {
+  height: 38px;
+  max-width: none;
+  padding: 0 10px;
+  background: var(--bg-panel);
+  backdrop-filter: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: none;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.modal .board-title:focus {
+  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-subtle));
+  box-shadow: none;
+}
+
+.command-palette {
+  position: fixed;
+  inset: 0;
+  z-index: 650;
+  display: none;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: min(120px, 14vh);
+  background: rgba(15, 23, 42, 0.28);
+}
+
+.command-palette.visible {
+  display: flex;
+}
+
+.command-panel {
+  width: min(640px, calc(100vw - 32px));
+  max-height: min(620px, calc(100vh - 80px));
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-modal);
+}
+
+.command-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+}
+
+.command-search svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.command-search input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 15px;
+}
+
+.command-results {
+  max-height: min(520px, calc(100vh - 160px));
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.command-result {
+  display: block;
+  padding: 10px 12px;
+  border-radius: 8px;
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.command-result:hover,
+.command-result.active {
+  background: var(--bg-active);
+}
+
+.command-result-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.command-result-meta,
+.command-result-summary {
+  margin-top: 3px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text-secondary);
+}
+
+.command-result-summary {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.command-result mark {
+  border-radius: 4px;
+  padding: 0 2px;
+  background: var(--accent-quiet);
+  color: inherit;
+}
+
+.command-empty {
+  padding: 28px 16px;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.template-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.template-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+
+.template-card:hover {
+  border-color: var(--selection);
+  background: var(--bg-hover);
+}
+
+.template-card .t-name {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.template-card .t-desc {
+  font-size: 11.5px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.storage-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  font-size: 13px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.storage-row span:last-child {
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.modal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.modal-copy {
+  color: var(--text-secondary);
+  font-size: 13.5px;
+  line-height: 1.6;
+}
+
+.btn {
+  padding: 8px 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.btn:hover {
+  background: var(--bg-hover);
+}
+
+.btn.danger {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+.btn.primary {
+  background: var(--accent-secondary);
+  border-color: var(--selection);
+  color: #fff;
+}
+
+/* ---------- Stress panel ---------- */
+.stress-panel {
+  position: fixed;
+  bottom: 84px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 99;
+  display: none;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: 640px;
+  justify-content: center;
+  padding: 10px;
+  background: var(--bg-toolbar);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  box-shadow: var(--shadow-soft);
+}
+
+.stress-panel.visible {
+  display: flex;
+}
+
+.stress-panel .btn {
+  font-size: 11.5px;
+  padding: 6px 10px;
+}
+
+/* ---------- Text editing overlay ---------- */
+.text-editor {
+  position: absolute;
+  z-index: 50;
+  border: 1.5px solid var(--selection);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  resize: none;
+  overflow: hidden;
+  outline: none;
+  padding: 0;
+  line-height: 1.35;
+}
+
+/* ---------- Toast ---------- */
+.toast {
+  position: fixed;
+  bottom: 84px;
+  left: 50%;
+  transform: translateX(-50%) translateY(8px);
+  z-index: 300;
+  padding: 10px 18px;
+  background: var(--text-primary);
+  color: var(--bg-panel);
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: var(--shadow-soft);
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+
+.toast.visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+  }
+}
+
+/* ============================================================
+   Docs shell (sidebar + content)
+   ============================================================ */
+.shell {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.shell-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.shell.sidebar-collapsed .sidebar {
+  display: none;
+}
+
+.shell-topbar {
+  position: relative;
+  flex: 0 0 auto;
+  height: 58px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
+  backdrop-filter: blur(16px);
+}
+
+.topbar-icon-btn,
+.topbar-search,
+.topbar-cart,
+.topbar-edit,
+.topbar-theme {
+  height: 34px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.topbar-icon-btn {
+  width: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.topbar-icon-btn:hover,
+.topbar-search:hover,
+.topbar-cart:hover,
+.topbar-edit:hover,
+.topbar-theme:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.topbar-icon-btn:focus-visible,
+.topbar-search:focus-visible,
+.topbar-cart:focus-visible,
+.topbar-edit:focus-visible,
+.topbar-theme:focus-visible {
+  outline: 2px solid var(--selection);
+  outline-offset: 1px;
+}
+
+.topbar-icon-btn svg,
+.topbar-search svg,
+.topbar-edit svg,
+.topbar-theme svg {
+  width: 17px;
+  height: 17px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.topbar-search {
+  width: min(360px, 42vw);
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  padding: 0 8px 0 10px;
+  text-align: left;
+  font-size: 13px;
+}
+
+.topbar-search span {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.topbar-search kbd {
+  flex: 0 0 auto;
+  padding: 2px 6px;
+  border-radius: 5px;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  font: 11px/1.3 "SF Mono", ui-monospace, Menlo, monospace;
+}
+
+.topbar-cart {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px 0 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.topbar-search + .topbar-cart {
+  margin-left: auto;
+}
+
+.topbar-cart[hidden] {
+  display: none;
+}
+
+.topbar-cart:disabled {
+  opacity: 0.58;
+  cursor: default;
+}
+
+.topbar-cart strong {
+  min-width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--accent-quiet);
+  color: var(--selection);
+  font-size: 12px;
+}
+
+.topbar-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.topbar-edit[hidden] {
+  display: none;
+}
+
+.topbar-cart[hidden] + .topbar-edit {
+  margin-left: auto;
+}
+
+.shell-topbar.editing-doc .topbar-cart {
+  display: none;
+}
+
+.topbar-cart-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 58px;
+  z-index: 800;
+  display: none;
+  width: 330px;
+  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.16));
+}
+
+.topbar-cart-popover.visible {
+  display: block;
+}
+
+.topbar-cart-popover .capability-cart {
+  position: static;
+}
+
+.content.cart-popover-open .capability-layout > .capability-cart {
+  visibility: hidden;
+}
+
+.sidebar {
+  flex: 0 0 270px;
+  width: 270px;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-subtle);
+  background: var(--surface-raised);
+  padding: 0 12px;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  height: 58px;
+  padding: 0 12px;
+  border-bottom: 1px solid transparent;
+}
+
+.sidebar-brand {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+  text-decoration: none;
+  /* reset button defaults */
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: inherit;
+}
+
+.sidebar-nav {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding-bottom: 18px;
+}
+
+.sidebar-footer {
+  flex: 0 0 auto;
+  padding: 10px 0 14px;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--surface-raised);
+}
+
+.sidebar-add-repo {
+  width: 100%;
+  height: 36px;
+  border: 1px dashed color-mix(in srgb, var(--selection) 38%, var(--border-subtle));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.sidebar-add-repo:hover {
+  background: var(--accent-soft);
+  border-color: color-mix(in srgb, var(--selection) 58%, var(--border-subtle));
+  color: var(--text-primary);
+}
+
+.nav-group { margin-bottom: 18px; }
+
+.nav-section-head,
+.nav-root-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.nav-repo-group {
+  margin-bottom: 10px;
+}
+
+.nav-repo-header,
+.nav-dir-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.nav-count-pill {
+  flex: 0 0 auto;
+  padding: 3px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--surface-raised) 82%, var(--accent-soft));
+  color: var(--text-secondary);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.nav-dir-toggle {
+  padding: 4px 6px;
+  font-size: 11px;
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 650;
+}
+
+/* Path-segment directories (parents of /docs/) — same weight as docs dirs */
+.nav-dir-project {
+  opacity: 0.85;
+  color: var(--text-secondary);
+}
+
+.nav-dir-project:hover {
+  opacity: 1;
+}
+
+/* Docs directories inside a docs root */
+.nav-dir-docs {
+  opacity: 1;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.nav-repo-header,
+.nav-dir-toggle {
+  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
+}
+
+.nav-repo-header:hover,
+.nav-dir-toggle:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.nav-repo-header:focus-visible,
+.nav-dir-toggle:focus-visible {
+  outline: 2px solid var(--selection);
+  outline-offset: 1px;
+}
+
+.nav-repo-header > span:not(.nav-repo-chevron),
+.nav-dir-toggle > span:not(.nav-repo-chevron) {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nav-repo-chevron {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  transform: rotate(90deg);
+  transition: transform 0.12s ease;
+}
+
+.nav-repo-group.collapsed .nav-repo-chevron {
+  transform: rotate(0deg);
+}
+
+.nav-collapsible-dir.collapsed > .nav-dir-header-row .nav-dir-toggle .nav-repo-chevron {
+  transform: rotate(0deg);
+}
+
+.nav-dir-header-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+}
+
+.nav-dir-header-row .nav-dir-toggle {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.nav-dir-header-row .nav-dir-wiki-link {
+  flex: 0 0 auto;
+}
+
+.nav-repo-body[hidden],
+.nav-dir-body[hidden] {
+  display: none;
+}
+
+.nav-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+  padding: 6px 8px;
+}
+
+.nav-empty-copy {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0.01em;
+  line-height: 1.45;
+}
+
+.nav-subgroup { margin: 2px 0 2px 8px; }
+.nav-subgroup .nav-label {
+  font-size: 11px;
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 600;
+  color: var(--text-secondary);
+  opacity: 0.85;
+}
+
+/* Root-level docs label — just the leaf segment ("docs"), no badge. */
+.nav-docs-root {
+  margin: 0 0 2px 0;
+}
+
+.nav-root-path-label {
+  padding: 4px 8px 3px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  opacity: 0.6;
+  cursor: default;
+  /* Right-click affordance hint */
+  user-select: none;
+}
+.nav-root-path-label:hover {
+  opacity: 1;
+  color: var(--text-secondary);
+}
+
+/* Path-segment intermediate toggle — slightly lighter than project header */
+.nav-path-seg-toggle {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text-secondary);
+  opacity: 0.9;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  margin: 1px 0;
+  border-radius: 7px;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.nav-link:hover { 
+  background: var(--bg-hover); 
+  color: var(--text-primary);
+}
+.nav-link-muted {
+  font-size: 12px;
+  opacity: 0.82;
+}
+.nav-link.active {
+  background: var(--bg-active);
+  color: var(--selection);
+  font-weight: 600;
+}
+
+[data-theme="dark"] .nav-link.active {
+  color: var(--neutral-100);
+}
+
+/* ---------- Sidebar: inline node icons (Doc / Board / Capability) ---------- */
+
+.nav-node-icon {
+  flex: 0 0 auto;
+  width: 13px;
+  height: 13px;
+  margin-right: 5px;
+  vertical-align: middle;
+  fill: currentColor;
+  stroke: none;
+  opacity: 0.85;
+  position: relative;
+  top: -1px;
+}
+
+/* Doc icons: Google Docs blue */
+.nav-node-icon-doc {
+  fill: #4285f4;
+  opacity: 1;
+}
+
+/* Board icons: purple/violet */
+.nav-node-icon-board {
+  fill: #8b5cf6;
+  opacity: 1;
+}
+
+[data-theme="dark"] .nav-node-icon-board {
+  fill: #a78bfa;
+}
+
+/* Skill/Capability icons: amber/gold */
+.nav-node-icon-capability {
+  fill: #f59e0b;
+  opacity: 1;
+}
+
+[data-theme="dark"] .nav-node-icon-capability {
+  fill: #fbbf24;
+}
+
+/* Board nodes: purple/violet accent */
+:root {
+  --nav-board-color: #8b5cf6;
+  --nav-board-bg: rgba(139, 92, 246, 0.08);
+  --nav-board-bg-active: rgba(139, 92, 246, 0.15);
+  --nav-cap-color: #8a6800;
+  --nav-cap-bg: rgba(138, 104, 0, 0.08);
+  --nav-cap-bg-active: rgba(138, 104, 0, 0.15);
+}
+[data-theme="dark"] {
+  --nav-board-color: #a78bfa;
+  --nav-board-bg: rgba(167, 139, 250, 0.08);
+  --nav-board-bg-active: rgba(167, 139, 250, 0.14);
+  --nav-cap-color: #d4a800;
+  --nav-cap-bg: rgba(212, 168, 0, 0.08);
+  --nav-cap-bg-active: rgba(212, 168, 0, 0.14);
+}
+
+.nav-link-board {
+  display: flex;
+  align-items: center;
+  color: var(--nav-board-color);
+}
+.nav-link-board:hover {
+  background: var(--nav-board-bg);
+  color: var(--nav-board-color);
+}
+.nav-link-board.active {
+  background: var(--nav-board-bg-active);
+  color: var(--nav-board-color);
+  font-weight: 600;
+}
+
+/* Capability nodes: amber/gold accent */
+.nav-link-capability {
+  display: flex;
+  align-items: center;
+  color: var(--nav-cap-color);
+}
+.nav-link-capability:hover {
+  background: var(--nav-cap-bg);
+  color: var(--nav-cap-color);
+}
+.nav-link-capability.active {
+  background: var(--nav-cap-bg-active);
+  color: var(--nav-cap-color);
+  font-weight: 600;
+}
+
+/* "All Boards" row at the bottom of each project */
+.nav-project-boards-row {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* ---------- Sidebar: right-click context menu ---------- */
+
+.nav-context-menu {
+  z-index: 900;
+  min-width: 168px;
+  padding: 5px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  box-shadow: var(--shadow-modal);
+  user-select: none;
+}
+
+.nav-context-label {
+  padding: 5px 10px 4px;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+
+.nav-context-divider {
+  height: 1px;
+  margin: 4px 5px;
+  background: var(--border-subtle);
+}
+
+.nav-context-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.nav-context-item:hover,
+.nav-context-item:focus-visible {
+  background: var(--bg-hover);
+  outline: none;
+}
+.nav-context-item-danger {
+  color: var(--danger);
+}
+.nav-context-item-danger:hover,
+.nav-context-item-danger:focus-visible {
+  background: color-mix(in srgb, var(--danger) 8%, transparent);
+}
+
+.nav-dragging {
+  opacity: 0.48;
+  cursor: grabbing !important;
+}
+
+/* Draggable items keep pointer cursor — grab only appears during actual drag */
+.nav-link[draggable="true"],
+.nav-dir-toggle[draggable="true"] {
+  cursor: pointer;
+}
+
+/* VS Code-style drop target - VERY obvious */
+.nav-drop-target > .nav-dir-toggle,
+.nav-drop-target > .nav-dir-header-row,
+.nav-drop-target.nav-repo-header,
+.nav-drop-target.nav-docs-root {
+  background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
+  outline: 2px solid var(--accent) !important;
+  outline-offset: -2px;
+  box-shadow: inset 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
+  border-radius: 6px;
+  position: relative;
+}
+
+/* Pulse animation for drop target */
+@keyframes dropPulse {
+  0%, 100% { outline-color: var(--accent); }
+  50% { outline-color: color-mix(in srgb, var(--accent) 60%, transparent); }
+}
+
+.nav-drop-target > .nav-dir-toggle,
+.nav-drop-target > .nav-dir-header-row,
+.nav-drop-target.nav-repo-header,
+.nav-drop-target.nav-docs-root {
+  animation: dropPulse 1s ease-in-out infinite;
+}
+
+.nav-ctx-icon {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+/* Fill-based icons (board, doc, capability) */
+.nav-ctx-icon svg.nav-node-icon {
+  width: 13px;
+  height: 13px;
+  fill: currentColor;
+  stroke: none;
+}
+/* Stroke-based icons (edit, rename, trash) */
+.nav-ctx-svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Doc items in context menu */
+.nav-ctx-doc { color: var(--text-secondary); }
+/* Directory items */
+.nav-ctx-dir { color: var(--text-secondary); }
+/* Board items */
+.nav-ctx-board { color: var(--nav-board-color); }
+/* Capability items */
+.nav-ctx-cap { color: var(--nav-cap-color); }
+/* Neutral actions (edit, rename) */
+.nav-ctx-edit,
+.nav-ctx-rename { color: var(--text-secondary); }
+/* Destructive action */
+.nav-ctx-delete { color: var(--danger); }
+
+.content-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.content {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 36px 40px 120px;
+}
+
+.content.content-wide {
+  max-width: 1240px;
+}
+
+.external-doc-eyebrow {
+  margin: 0 0 18px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.external-repo-overview .page-bar {
+  align-items: flex-start;
+}
+
+.repo-source-pill {
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.external-doc-dir-list {
+  display: grid;
+  gap: 22px;
+}
+
+.external-doc-dir h2 {
+  margin: 0 0 10px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.external-doc-file-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 10px;
+}
+
+.external-doc-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 82px;
+  padding: 14px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
+}
+
+.external-doc-card:hover {
+  border-color: color-mix(in srgb, var(--selection) 42%, var(--border-subtle));
+  background: color-mix(in srgb, var(--accent) 4%, var(--surface-raised));
+  transform: translateY(-1px);
+}
+
+.external-doc-card strong {
+  font-size: 14px;
+  line-height: 1.3;
+}
+
+.external-doc-card span {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+/* ---------- generic pages (boards, capabilities index) ---------- */
+.page-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+.page-bar h1 { margin: 0; }
+.page-bar-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.page-lead {
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 4px 0 24px;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 14px;
+}
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 190px;
+  padding: 18px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--text-primary);
+  background: var(--surface-raised);
+  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
+}
+.card:hover {
+  border-color: color-mix(in srgb, var(--selection) 42%, var(--border-subtle));
+  transform: translateY(-1px);
+}
+.card.selected {
+  border-color: color-mix(in srgb, var(--selection) 72%, var(--border-subtle));
+  background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised));
+}
+.card.selected::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  border-radius: 8px 0 0 8px;
+  background: var(--selection);
+}
+.card-title {
+  max-width: 92%;
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+.card-title a {
+  color: inherit;
+  text-decoration: none;
+}
+.card-title a:hover { color: var(--selection); }
+.card-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.55;
+}
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: auto;
+}
+.card-actions {
+  padding-top: 4px;
+}
+.card-actions .btn {
+  height: 30px;
+  padding: 0 11px;
+  border-radius: 999px;
+  font-size: 12px;
+}
+.card-actions .capability-add-btn.primary {
+  background: transparent;
+  border-color: color-mix(in srgb, var(--selection) 42%, var(--border-subtle));
+  color: var(--selection);
+}
+.card-actions .capability-add-btn.primary:hover {
+  background: var(--accent-soft);
+}
+.card-actions .capability-add-btn:not(.primary) {
+  border-color: transparent;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}
+.tag {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: var(--accent-secondary-quiet);
+  color: color-mix(in srgb, var(--accent-secondary) 72%, var(--text-primary));
+}
+.empty-note {
+  grid-column: 1 / -1;
+  padding: 32px;
+  text-align: center;
+  color: var(--text-secondary);
+  border: 1px dashed var(--border-subtle);
+  border-radius: 12px;
+}
+
+.capability-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 28px;
+  align-items: start;
+}
+
+.capability-grid {
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.capability-library h1 {
+  font-size: 32px;
+  letter-spacing: 0;
+  margin-bottom: 6px;
+}
+
+.capability-library .page-lead {
+  max-width: 680px;
+  margin-bottom: 28px;
+}
+
+.board-library .page-lead {
+  max-width: 760px;
+}
+
+.board-grid {
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 18px;
+}
+
+.token-library .page-bar {
+  margin-bottom: 6px;
+}
+
+.token-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.token-section {
+  margin-top: 30px;
+}
+
+.token-section h2 {
+  margin: 0 0 14px;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.token-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 12px;
+}
+
+.token-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 44px;
+  align-items: stretch;
+  min-height: 72px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--surface-raised);
+  overflow: hidden;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+
+.token-card:hover {
+  border-color: color-mix(in srgb, var(--selection) 36%, var(--border-subtle));
+}
+
+.token-card.selected {
+  border-color: var(--brand-500);
+  background: color-mix(in srgb, var(--accent) 4%, var(--surface-raised));
+}
+
+.token-card input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.token-select-zone {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.token-copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  border: none;
+  border-left: 1px solid var(--border-subtle);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.token-copy-btn:hover {
+  background: var(--accent-soft);
+  color: var(--selection);
+}
+
+.token-copy-btn:focus-visible {
+  outline: 2px solid var(--selection);
+  outline-offset: -2px;
+}
+
+.token-copy-btn svg {
+  width: 17px;
+  height: 17px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.token-swatch {
+  width: 42px;
+  height: 42px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 7px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+}
+
+[data-theme="dark"] .card,
+[data-theme="dark"] .token-card,
+[data-theme="dark"] .capability-cart,
+[data-theme="dark"] .command-panel,
+[data-theme="dark"] .modal {
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 18px 48px rgba(0, 0, 0, 0.36);
+}
+
+[data-theme="dark"] .card:hover,
+[data-theme="dark"] .token-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.12));
+}
+
+[data-theme="dark"] .shell-topbar,
+[data-theme="dark"] .sidebar {
+  border-color: rgba(255, 255, 255, 0.075);
+}
+
+[data-theme="dark"] .nav-link.active {
+  background: rgba(163, 162, 126, 0.16);
+  color: #ffffff;
+}
+
+[data-theme="dark"] .btn.primary {
+  color: #111312;
+}
+
+.token-copy {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.token-copy strong {
+  font-size: 13px;
+  line-height: 1.25;
+}
+
+.token-copy code {
+  color: var(--text-secondary);
+  font: 12px/1.25 "SF Mono", ui-monospace, Menlo, monospace;
+  background: transparent;
+}
+
+.token-copy small {
+  color: var(--text-secondary);
+  font-size: 11.5px;
+  line-height: 1.3;
+}
+
+.capability-cart {
+  position: sticky;
+  top: 18px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-panel) 96%, var(--bg-hover));
+  overflow: hidden;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
+}
+
+.capability-cart-head,
+.capability-cart-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 14px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.capability-cart-actions {
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: none;
+}
+
+.capability-cart-head h2 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+}
+
+.capability-cart-count {
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--accent-quiet);
+  color: var(--selection);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.capability-cart-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 420px;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.capability-cart-empty {
+  padding: 22px 12px;
+  color: var(--text-secondary);
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+.capability-cart-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 8px;
+  background: var(--surface-raised);
+  border: 1px solid transparent;
+}
+
+.capability-cart-item:hover {
+  border-color: var(--border-subtle);
+}
+
+.capability-cart-item-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.capability-cart-item-meta {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  line-height: 1.35;
+}
+
+.capability-cart-remove {
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 11.5px;
+  cursor: pointer;
+  padding: 1px 0;
+}
+
+.capability-cart-remove:hover {
+  color: var(--danger);
+}
+
+/* ---------- markdown body ---------- */
+.markdown-body { font-size: 15px; line-height: 1.7; color: var(--text-primary); }
+.markdown-body h1 { font-size: 30px; font-weight: 700; margin: 8px 0 20px; letter-spacing: -0.015em; }
+.markdown-body h2 {
+  font-size: 22px;
+  font-weight: 650;
+  margin: 36px 0 14px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.markdown-body h3 { font-size: 17px; font-weight: 650; margin: 26px 0 10px; }
+.markdown-body h4 { font-size: 15px; font-weight: 650; margin: 20px 0 8px; }
+.markdown-body p { margin: 14px 0; }
+.markdown-body a { color: var(--selection); text-decoration: none; }
+.markdown-body a:hover { text-decoration: underline; }
+.markdown-body ul, .markdown-body ol { margin: 14px 0; padding-left: 26px; }
+.markdown-body li { margin: 5px 0; }
+.markdown-body li.task { list-style: none; margin-left: -22px; }
+.markdown-body li.task input { margin-right: 8px; }
+.markdown-body blockquote {
+  margin: 16px 0;
+  padding: 4px 16px;
+  border-left: 3px solid var(--selection);
+  background: var(--bg-hover);
+  border-radius: 0 8px 8px 0;
+  color: var(--text-secondary);
+}
+.markdown-body code {
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  font-size: 0.86em;
+  background: var(--bg-hover);
+  padding: 2px 6px;
+  border-radius: 5px;
+}
+.markdown-body pre.code-block {
+  margin: 16px 0;
+  padding: 16px;
+  background: var(--bg-hover);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  overflow-x: auto;
+}
+.markdown-body pre.code-block code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
+.markdown-body img { max-width: 100%; border-radius: 8px; }
+.markdown-body hr { border: none; border-top: 1px solid var(--border-subtle); margin: 32px 0; }
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 18px 0;
+  font-size: 13.5px;
+}
+.markdown-body th, .markdown-body td {
+  border: 1px solid var(--border-subtle);
+  padding: 8px 12px;
+  text-align: left;
+}
+.markdown-body th { background: var(--bg-hover); font-weight: 600; }
+.markdown-body .md-error {
+  margin: 16px 0;
+  padding: 14px 16px;
+  border: 1px solid #ef4444;
+  border-radius: 10px;
+  background: rgba(239, 68, 68, 0.08);
+  color: var(--text-primary);
+}
+.markdown-body .md-error pre {
+  margin: 8px 0 0;
+  font-size: 12px;
+  white-space: pre-wrap;
+  color: var(--text-secondary);
+}
+
+/* ---------- board embeds in markdown ---------- */
+.board-embed { margin: 24px 0; }
+.board-embed-frame {
+  position: relative;
+  width: 100%;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-canvas);
+  box-shadow: var(--shadow-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.board-embed-frame canvas { display: block; }
+.board-embed-frame.error { color: var(--text-secondary); font-size: 13px; }
+.board-embed-msg { padding: 24px; }
+.board-embed-open {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 8px;
+  background: var(--bg-toolbar);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-primary);
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.board-embed-frame:hover .board-embed-open { opacity: 1; }
+.board-embed figcaption {
+  margin-top: 8px;
+  font-size: 12.5px;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+/* ---------- board editor (full-screen mode) ---------- */
+.board-editor-host { position: fixed; inset: 0; z-index: 500; }
+
+/* "← Docs" button sits to the left of the title in the top-left cluster */
+.top-left .back-btn {
+  height: 40px;
+  width: auto;
+  gap: 6px;
+  padding: 0 12px;
+  background: var(--bg-toolbar);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle);
+  box-shadow: var(--shadow-soft);
+  font-size: 13px;
+  font-weight: 500;
+}
+.top-left .back-btn span { line-height: 1; }
+
+/* drag-to-select embed overlay */
+.embed-select-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  cursor: crosshair;
+  background: rgba(15, 23, 42, 0.18);
+}
+.embed-select-rect {
+  position: absolute;
+  border: 1.5px solid var(--selection);
+  background: color-mix(in srgb, var(--selection) 16%, transparent);
+  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.12);
+  pointer-events: none;
+}
+.embed-select-hint {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 14px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #fff;
+  background: rgba(15, 23, 42, 0.82);
+  pointer-events: none;
+}
+
+/* ---------- doc page actions + embed chips ---------- */
+.doc-page { position: relative; }
+.doc-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+/* Subtle, elegant edit affordance: grey border + grey text. */
+.btn.doc-edit {
+  background: transparent;
+  border-color: var(--border-subtle);
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.btn.doc-edit:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.capability-doc-actions {
+  align-items: center;
+}
+
+.capability-doc-actions .capability-detail-btn,
+.capability-doc-actions .capability-detail-btn.primary {
+  height: 34px;
+  padding: 0 13px;
+  border-radius: 999px;
+  background: transparent;
+  border-color: color-mix(in srgb, var(--selection) 34%, var(--border-subtle));
+  color: var(--text-primary);
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+.capability-doc-actions .capability-detail-btn:hover,
+.capability-doc-actions .capability-detail-btn.primary:hover {
+  background: var(--accent-soft);
+  color: var(--text-primary);
+}
+
+.capability-doc-actions .capability-detail-btn.is-selected {
+  background: var(--accent-secondary);
+  border-color: var(--accent-secondary);
+  color: #fff;
+}
+
+.capability-doc-actions .capability-detail-btn.is-selected:hover {
+  background: color-mix(in srgb, var(--accent-secondary) 88%, #000);
+  color: #fff;
+}
+.markdown-body figure.board-embed.embed-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px dashed var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  font-size: 13px;
+  user-select: none;
+  cursor: pointer;
+  outline: none;
+}
+.markdown-body figure.board-embed.embed-chip:hover,
+.markdown-body figure.board-embed.embed-chip.selected,
+.markdown-body figure.board-embed.embed-chip:focus {
+  border-color: color-mix(in srgb, var(--selection) 54%, var(--border-subtle));
+  background: var(--accent-soft);
+  color: var(--text-primary);
+}
+.embed-chip-icon { font-size: 15px; }
+.embed-chip-remove {
+  margin-left: auto;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.embed-chip:hover .embed-chip-remove,
+.embed-chip.selected .embed-chip-remove,
+.embed-chip:focus .embed-chip-remove {
+  opacity: 0.85;
+}
+.doc-editor-surface .embed-caret-spacer {
+  min-height: 1.35em;
+}
+
+/* ---------- doc editor (WYSIWYG) ---------- */
+.doc-editor {
+  position: fixed;
+  inset: 0;
+  z-index: 700;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-canvas);
+}
+.doc-editor-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+}
+.doc-editor-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.doc-editor-done {
+  padding: 7px 16px;
+  border: 1px solid var(--border-subtle);
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.doc-editor-done:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.doc-editor-path {
+  font-size: 12.5px;
+  color: var(--text-secondary);
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Quiet, ambient indicator: only an error is allowed to stand out. */
+.doc-editor-status {
+  font-size: 12px;
+  color: var(--text-secondary);
+  opacity: 0.6;
+  white-space: nowrap;
+}
+.doc-editor-status[data-state="error"] {
+  color: var(--danger);
+  opacity: 1;
+  font-weight: 600;
+}
+
+.doc-editor-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-canvas);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.doc-editor-tb-group {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
+}
+.doc-editor-tb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.doc-editor-tb-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.doc-editor-tb-btn.active {
+  background: var(--accent-secondary-quiet);
+  color: var(--text-primary);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-secondary) 28%, transparent);
+}
+.doc-editor-tb-btn:focus-visible {
+  outline: 2px solid var(--selection);
+  outline-offset: 2px;
+}
+.doc-editor-tb-btn.icon svg {
+  width: 17px;
+  height: 17px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.doc-editor-scroll {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+.doc-editor-surface {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 36px 40px 160px;
+  min-height: 100%;
+  outline: none;
+  background: transparent;
+}
+.doc-editor-surface:focus { outline: none; }
+.doc-editor-surface img { cursor: default; }
+.doc-editor-surface:empty::before {
+  content: "Start writing...";
+  color: var(--text-secondary);
+  opacity: 0.55;
+}
+.doc-editor-surface a {
+  cursor: text;
+}
+.doc-editor-surface pre.code-block {
+  position: relative;
+}
+.doc-editor-surface pre.code-block:focus-within {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--selection) 34%, transparent);
+}
+
+/* ============================================================
+   Breadcrumb
+   ============================================================ */
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.breadcrumb-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: color 0.1s ease, background 0.1s ease;
+}
+.breadcrumb-link:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.breadcrumb-sep {
+  color: var(--text-secondary);
+  opacity: 0.4;
+  user-select: none;
+  padding: 0 2px;
+}
+
+.breadcrumb-current {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+/* ============================================================
+   Page prev / next navigation
+   ============================================================ */
+
+.page-nav {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 56px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.page-nav-prev,
+.page-nav-next {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  text-decoration: none;
+  color: var(--text-secondary);
+  background: var(--surface-raised);
+  font-size: 13px;
+  font-weight: 500;
+  min-width: 0;
+  max-width: 48%;
+  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
+}
+.page-nav-prev:hover,
+.page-nav-next:hover {
+  border-color: color-mix(in srgb, var(--selection) 45%, var(--border-subtle));
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.page-nav-prev { margin-right: auto; }
+.page-nav-next { margin-left: auto; flex-direction: row-reverse; }
+
+.page-nav-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.page-nav-arrow {
+  flex: 0 0 auto;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--text-secondary);
+  transition: color 0.12s ease;
+}
+.page-nav-prev:hover .page-nav-arrow,
+.page-nav-next:hover .page-nav-arrow {
+  color: var(--text-primary);
+}
+
+.page-nav-spacer { flex: 1; }
+
+/* ============================================================
+   Sidebar docs mode
+   ============================================================ */
+
+/* Brand button — same look as a link, activates on click */
+.sidebar-brand {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+  text-decoration: none;
+  padding: 0;
+  transition: color 0.12s ease;
+}
+.sidebar-brand:hover { color: var(--selection); }
+.sidebar-brand:focus-visible {
+  outline: 2px solid var(--selection);
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+/* Docs mode: brand gets an active indicator */
+.sidebar-docs-mode .sidebar-brand {
+  color: var(--selection);
+}
+.sidebar-docs-mode .sidebar-brand::after {
+  content: " ·";
+  opacity: 0.4;
+}
+
+/* Back row */
+.docs-mode-back-row {
+  padding: 8px 0 4px;
+}
+.docs-mode-back {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  padding: 5px 8px;
+  border-radius: 7px;
+  width: 100%;
+  text-align: left;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.docs-mode-back:hover { background: var(--bg-hover); color: var(--text-primary); }
+.docs-mode-back svg {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+}
+
+/* Docs mode tree — auto-expanded, slight indent */
+.docs-mode-tree { padding-left: 0; }
+
+/* ============================================================
+   Home page — two-column: guide + workspace panel
+   ============================================================ */
+
+.home-page { padding-top: 8px; }
+
+.home-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 36px;
+  align-items: start;
+}
+
+/* ── Guide (left) ── */
+.home-guide { min-width: 0; }
+
+.home-hero-title {
+  font-size: 30px;
+  font-weight: 750;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  margin: 0 0 8px;
+  color: var(--text-primary);
+}
+.home-hero-sub {
+  font-size: 14px;
+  line-height: 1.65;
+  color: var(--text-secondary);
+  margin: 0 0 32px;
+}
+
+/* Feature sections */
+.home-feature {
+  margin-bottom: 28px;
+  padding-bottom: 28px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.home-feature:last-of-type { border-bottom: none; }
+
+.home-feature-header { margin-bottom: 8px; }
+
+.home-feature-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border: 1px solid var(--border-subtle);
+  background: var(--accent-soft);
+  color: var(--text-secondary);
+}
+.home-feature-badge-board {
+  background: var(--nav-board-bg);
+  color: var(--nav-board-color);
+  border-color: color-mix(in srgb, var(--nav-board-color) 25%, var(--border-subtle));
+}
+.home-feature-badge-capability {
+  background: var(--nav-cap-bg);
+  color: var(--nav-cap-color);
+  border-color: color-mix(in srgb, var(--nav-cap-color) 25%, var(--border-subtle));
+}
+.home-feature-badge-doc {
+  background: var(--accent-soft);
+  color: var(--text-secondary);
+}
+
+.home-feature-body {
+  font-size: 13.5px;
+  line-height: 1.65;
+  color: var(--text-secondary);
+  margin: 0 0 10px;
+}
+
+.home-feature-list {
+  margin: 0;
+  padding-left: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.home-feature-list li {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-secondary);
+}
+
+/* Shortcut table */
+.home-shortcut-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  margin: 32px 0 10px;
+}
+.home-shortcut-table {
+  display: grid;
+  gap: 1px;
+  background: var(--border-subtle);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.home-shortcut-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 7px 12px;
+  background: var(--surface-raised);
+}
+.home-shortcut-row:hover { background: var(--bg-hover); }
+.home-shortcut-key {
+  flex: 0 0 auto;
+  min-width: 200px;
+  font: 11.5px/1.4 "SF Mono", ui-monospace, Menlo, monospace;
+  color: var(--text-primary);
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+.home-shortcut-desc {
+  font-size: 12.5px;
+  color: var(--text-secondary);
+}
+
+/* ── Workspace panel (right) ── */
+.home-panel {
+  position: sticky;
+  top: 24px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: var(--surface-raised);
+  overflow: hidden;
+}
+
+.home-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.home-panel-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.home-panel-add {
+  padding: 4px 10px;
+  font-size: 12px;
+  height: auto;
+}
+
+.home-panel-empty {
+  padding: 20px 14px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+/* Per-project block inside panel */
+.home-panel-project {
+  border-bottom: 1px solid var(--border-subtle);
+}
+.home-panel-project:last-child { border-bottom: none; }
+
+.home-panel-project-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 14px 6px;
+  text-decoration: none;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.1s ease;
+}
+.home-panel-project-head:hover { background: var(--bg-hover); }
+
+.home-panel-project-name {
+  font-size: 13px;
+  font-weight: 650;
+  color: var(--text-primary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.home-panel-project-meta {
+  flex: 0 0 auto;
+  font-size: 11px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+/* Root rows inside a project block */
+.home-panel-roots { display: flex; flex-direction: column; }
+
+.home-panel-root {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 5px 14px;
+  text-decoration: none;
+  transition: background 0.1s ease;
+  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 50%, transparent);
+}
+.home-panel-root:last-of-type { border-bottom: none; }
+.home-panel-root:hover { background: var(--bg-hover); }
+
+.home-panel-root-path {
+  font-size: 11.5px;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  color: var(--text-secondary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.home-panel-root:hover .home-panel-root-path { color: var(--text-primary); }
+
+.home-panel-root-meta {
+  flex: 0 0 auto;
+  font-size: 10.5px;
+  color: var(--text-secondary);
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+.home-panel-more {
+  display: block;
+  padding: 6px 14px 8px;
+  font-size: 11.5px;
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+.home-panel-more:hover { color: var(--text-primary); }
+
+/* ── Wiki link button in sidebar project header ── */
+.nav-repo-label-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nav-repo-wiki-link {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  color: var(--text-secondary);
+  opacity: 0;
+  transition: opacity 0.12s ease, background 0.12s ease;
+  text-decoration: none;
+}
+.nav-repo-header:hover .nav-repo-wiki-link,
+.nav-dir-toggle:hover .nav-repo-wiki-link,
+.nav-dir-header-row:hover .nav-dir-wiki-link,
+.nav-repo-wiki-link:focus-visible {
+  opacity: 1;
+}
+
+/* Wiki links next to path-segment directories — show on hover */
+.nav-dir-project ~ .nav-dir-wiki-link {
+  opacity: 0;
+}
+
+.nav-dir-header-row:hover .nav-dir-project ~ .nav-dir-wiki-link {
+  opacity: 0.7;
+}
+.nav-repo-wiki-link:hover { background: var(--bg-active); color: var(--text-primary); }
+.nav-repo-wiki-link svg { width: 12px; height: 12px; }
+
+/* ============================================================
+   Project wiki page
+   ============================================================ */
+
+.wiki-page { padding-top: 4px; }
+
+.wiki-head {
+  margin-bottom: 28px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.wiki-back {
+  display: inline-block;
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  margin-bottom: 10px;
+}
+.wiki-back:hover { color: var(--text-primary); }
+
+.wiki-title {
+  font-size: 26px;
+  font-weight: 750;
+  letter-spacing: -0.01em;
+  margin: 0 0 16px;
+}
+
+.wiki-stats {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+.wiki-stat { text-align: left; }
+.wiki-stat-val {
+  font-size: 22px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  line-height: 1;
+}
+.wiki-stat-label {
+  font-size: 11px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+/* Per-root section */
+.wiki-root-section {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.wiki-root-section:last-child { border-bottom: none; }
+
+.wiki-root-head { margin-bottom: 12px; }
+.wiki-root-path {
+  font-size: 12px;
+  font-weight: 700;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  color: var(--text-secondary);
+  letter-spacing: 0.01em;
+}
+
+.wiki-root-empty {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+/* Three-column layout per root */
+.wiki-root-cols {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.wiki-col-head {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.wiki-col-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.wiki-col-item {
+  display: block;
+  padding: 4px 6px;
+  border-radius: 5px;
+  font-size: 12.5px;
+  text-decoration: none;
+  color: var(--text-secondary);
+  transition: background 0.1s ease, color 0.1s ease;
+  text-transform: capitalize;
+}
+.wiki-col-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.wiki-col-item-board { color: var(--nav-board-color); }
+.wiki-col-item-board:hover { background: var(--nav-board-bg); color: var(--nav-board-color); }
+.wiki-col-item-cap { color: var(--nav-cap-color); }
+.wiki-col-item-cap:hover { background: var(--nav-cap-bg); color: var(--nav-cap-color); }
+
+.wiki-col-item-path {
+  display: block;
+  font-size: 10.5px;
+  font-family: "SF Mono", ui-monospace, Menlo, monospace;
+  color: var(--text-secondary);
+  opacity: 0.6;
+  margin-top: 1px;
+}
+
+@media (max-width: 720px) {
+  .sidebar { flex-basis: 220px; width: 220px; }
+  .shell-topbar { padding: 10px 12px; }
+  .topbar-search {
+    width: auto;
+    flex: 1 1 auto;
+  }
+  .topbar-search kbd { display: none; }
+  .topbar-edit span { display: none; }
+  .topbar-edit {
+    width: 34px;
+    padding: 0;
+    justify-content: center;
+  }
+  .capability-layout {
+    grid-template-columns: 1fr;
+  }
+  .capability-cart {
+    position: static;
+  }
+  .content { padding: 32px 20px 100px; }
+  .doc-editor-surface { padding: 24px 18px 140px; }
+}
+
+/* ---------- Project three-dot menu button ---------- */
+
+.nav-repo-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin-left: auto;
+  margin-right: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s ease, background 0.12s ease;
+}
+
+.nav-repo-header:hover .nav-repo-more {
+  opacity: 0.5;
+}
+
+.nav-repo-more:hover {
+  background: var(--bg-hover);
+  opacity: 1 !important;
+}
+
+/* ---------- Raw view: non-docs directories (subtly muted) ---------- */
+
+.nav-browse-dir-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 4px 8px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+  opacity: 0.45;
+  transition: opacity 0.12s ease, background 0.12s ease;
+}
+
+.nav-browse-dir-toggle:hover {
+  background: var(--bg-hover);
+  opacity: 0.75;
+}
+
+/* Inline rename / create input */
+.nav-inline-input {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  margin: 1px 0;
+  font: inherit;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: var(--bg-canvas);
+  border: 1px solid var(--brand-300);
+  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
+}
+
+.nav-inline-input::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.6;
+}