@inkami/blx 0.17.3

package/style.css

@@ -0,0 +1,4670 @@
+/* ── Theme variables ────────────────────────────────────────── */
+
+.blx-editor {
+  --blx-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --blx-font-mono: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Menlo, Consolas, monospace;
+
+  /* CJK font fallback stack */
+  --blx-font-cjk: "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC",
+    "Hiragino Sans", "Microsoft YaHei", "Malgun Gothic", sans-serif;
+
+  /* CJK-appropriate line height (slightly taller than Latin) */
+  --blx-lh-cjk: 1.7;
+
+  --blx-font-base-size: 0.975rem;
+
+  /* ── Golden ratio typographic scale (H1–H4) ───────────────
+     Font sizes:  step = √φ ≈ 1.272, so each level = prev × 1.272
+     Line heights: inversely proportional — larger text, tighter leading
+                   lh = 1 + (0.618 / φ^(step/2))
+                   This keeps body text airy (1.618) and H1 tight (1.300) */
+
+  /* Font size scale */
+  --blx-font-scale-1: calc(var(--blx-font-base-size) * 2.058);  /* H1: φ^1.5  */
+  --blx-font-scale-2: calc(var(--blx-font-base-size) * 1.618);  /* H2: φ      */
+  --blx-font-scale-3: calc(var(--blx-font-base-size) * 1.272);  /* H3: √φ     */
+  --blx-font-scale-4: calc(var(--blx-font-base-size) * 1.0);    /* H4: 1      */
+
+  /* Line height scale (inverse golden — tighter as text grows) */
+  --blx-lh-body: 1.618;
+  --blx-lh-1: 1.300;
+  --blx-lh-2: 1.382;
+  --blx-lh-3: 1.486;
+  --blx-lh-4: 1.618;
+
+  --blx-bg: #f5f5f3;
+  --blx-surface: #ffffff;
+  --blx-text: #404550;
+  --blx-text-heading: #3b4255;
+  --blx-text-muted: #8a8f9a;
+  --blx-text-faint: #b0b5bf;
+  --blx-text-icon: #7c8394;
+  --blx-accent: #4285f4;
+  --blx-caret-color: var(--blx-accent);
+  --blx-accent-hover: #3370d4;
+  --blx-accent-bg: rgba(66, 133, 244, 0.10);
+  --blx-accent-bg-hover: rgba(66, 133, 244, 0.15);
+  --blx-accent-muted: rgba(66, 133, 244, 0.45);
+  --blx-visual-select-bg: rgba(16, 185, 129, 0.14);
+  --blx-border: rgba(0, 0, 0, 0.06);
+  --blx-border-input: rgba(0, 0, 0, 0.10);
+  --blx-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
+  --blx-inline-code-bg: rgba(0, 0, 0, 0.06);
+  --blx-hr: #e0e0dd;
+  --blx-danger: #dc3545;
+  --blx-focus-bg: rgba(255, 255, 255, 0.45);
+  --blx-hover-bg: rgba(0, 0, 0, 0.05);
+  --blx-selected-bg: rgba(0, 0, 0, 0.04);
+  --blx-selection-bg: rgba(66, 133, 244, 0.2);
+  --blx-btn-secondary-bg: rgba(0, 0, 0, 0.05);
+  --blx-btn-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --blx-btn-secondary-text: #666;
+  --blx-checklist-checked-color: #7c8394;
+  --blx-placeholder-color: #b0b5bf;
+  --blx-description-color: #9da3b0;
+  --blx-emoji-name-color: #9399a6;
+  --blx-toolbar-sep: rgba(0, 0, 0, 0.1);
+  --blx-link-underline: rgba(66, 133, 244, 0.35);
+  --blx-scrollbar-thumb: rgba(0, 0, 0, 0.12);
+  --blx-menu-highlight: rgba(0, 0, 0, 0.07);
+
+  /* Agenda state colors */
+  --blx-agenda-overdue: #c5303e;
+  --blx-agenda-overdue-bg: rgba(197, 48, 62, 0.08);
+  --blx-agenda-today: #c27022;
+  --blx-agenda-today-bg: rgba(194, 112, 34, 0.08);
+  --blx-agenda-upcoming: var(--blx-text-muted);
+  --blx-agenda-upcoming-bg: rgba(0, 0, 0, 0.03);
+  --blx-agenda-future: var(--blx-text-faint);
+  --blx-agenda-future-bg: rgba(0, 0, 0, 0.02);
+
+  /* Highlight colors */
+  --blx-highlight-yellow: rgba(255, 235, 100, 0.50);
+  --blx-highlight-green: rgba(100, 220, 130, 0.40);
+  --blx-highlight-blue: rgba(120, 195, 255, 0.40);
+  --blx-highlight-pink: rgba(255, 140, 170, 0.40);
+  --blx-highlight-orange: rgba(255, 185, 80, 0.40);
+  --blx-highlight-purple: rgba(190, 140, 255, 0.40);
+
+  /* Widget design tokens */
+  --blx-widget-surface: var(--blx-surface);
+  --blx-widget-shadow: var(--blx-shadow);
+  --blx-widget-border: var(--blx-border);
+  --blx-widget-radius: 8px;
+  --blx-widget-text: var(--blx-text);
+  --blx-widget-text-muted: var(--blx-text-muted);
+  --blx-widget-anim-duration: 0.15s;
+  --blx-widget-anim-curve: cubic-bezier(0.16, 1, 0.3, 1);
+  --blx-widget-anim-exit-curve: ease-out;
+  --blx-widget-anim-exit-duration: 0.1s;
+}
+
+/* System dark: applies when OS is dark AND no manual override to light */
+@media (prefers-color-scheme: dark) {
+  .blx-editor:not([data-blx-theme="light"]) {
+    --blx-bg: #1a1a22;
+    --blx-surface: #252530;
+    --blx-text: #d0d4dc;
+    --blx-text-heading: #e2e5eb;
+    --blx-text-muted: #6b7080;
+    --blx-text-faint: #555a68;
+    --blx-text-icon: #7c8394;
+    --blx-accent: #6ea8fe;
+    --blx-accent-hover: #5a96ec;
+    --blx-accent-bg: rgba(110, 168, 254, 0.12);
+    --blx-accent-bg-hover: rgba(110, 168, 254, 0.18);
+    --blx-accent-muted: rgba(110, 168, 254, 0.45);
+    --blx-visual-select-bg: rgba(16, 185, 129, 0.18);
+    --blx-border: rgba(255, 255, 255, 0.08);
+    --blx-border-input: rgba(255, 255, 255, 0.12);
+    --blx-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
+    --blx-inline-code-bg: rgba(255, 255, 255, 0.08);
+    --blx-hr: #3a3a45;
+    --blx-danger: #f87171;
+    --blx-focus-bg: rgba(255, 255, 255, 0.04);
+    --blx-hover-bg: rgba(255, 255, 255, 0.06);
+    --blx-selected-bg: rgba(255, 255, 255, 0.06);
+    --blx-selection-bg: rgba(110, 168, 254, 0.2);
+    --blx-btn-secondary-bg: rgba(255, 255, 255, 0.06);
+    --blx-btn-secondary-bg-hover: rgba(255, 255, 255, 0.10);
+    --blx-btn-secondary-text: #9da3b0;
+    --blx-checklist-checked-color: #6b7080;
+    --blx-placeholder-color: #555a68;
+    --blx-description-color: #6b7080;
+    --blx-emoji-name-color: #6b7080;
+    --blx-toolbar-sep: rgba(255, 255, 255, 0.1);
+    --blx-link-underline: rgba(110, 168, 254, 0.35);
+    --blx-scrollbar-thumb: rgba(255, 255, 255, 0.12);
+    --blx-menu-highlight: rgba(255, 255, 255, 0.09);
+
+    --blx-agenda-overdue: #f87171;
+    --blx-agenda-overdue-bg: rgba(248, 113, 113, 0.10);
+    --blx-agenda-today: #f0a050;
+    --blx-agenda-today-bg: rgba(240, 160, 80, 0.10);
+    --blx-agenda-upcoming: var(--blx-text-muted);
+    --blx-agenda-upcoming-bg: rgba(255, 255, 255, 0.04);
+    --blx-agenda-future: var(--blx-text-faint);
+    --blx-agenda-future-bg: rgba(255, 255, 255, 0.03);
+
+    --blx-highlight-yellow: rgba(255, 235, 100, 0.22);
+    --blx-highlight-green: rgba(100, 220, 130, 0.20);
+    --blx-highlight-blue: rgba(120, 195, 255, 0.20);
+    --blx-highlight-pink: rgba(255, 140, 170, 0.20);
+    --blx-highlight-orange: rgba(255, 185, 80, 0.20);
+    --blx-highlight-purple: rgba(190, 140, 255, 0.20);
+  }
+}
+
+/* Manual dark: applies when explicitly set via API */
+.blx-editor[data-blx-theme="dark"] {
+  --blx-bg: #1a1a22;
+  --blx-surface: #252530;
+  --blx-text: #d0d4dc;
+  --blx-text-heading: #e2e5eb;
+  --blx-text-muted: #6b7080;
+  --blx-text-faint: #555a68;
+  --blx-text-icon: #7c8394;
+  --blx-accent: #6ea8fe;
+  --blx-accent-hover: #5a96ec;
+  --blx-accent-bg: rgba(110, 168, 254, 0.12);
+  --blx-accent-bg-hover: rgba(110, 168, 254, 0.18);
+  --blx-accent-muted: rgba(110, 168, 254, 0.45);
+  --blx-visual-select-bg: rgba(16, 185, 129, 0.18);
+  --blx-border: rgba(255, 255, 255, 0.08);
+  --blx-border-input: rgba(255, 255, 255, 0.12);
+  --blx-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --blx-inline-code-bg: rgba(255, 255, 255, 0.08);
+  --blx-hr: #3a3a45;
+  --blx-danger: #f87171;
+  --blx-focus-bg: rgba(255, 255, 255, 0.04);
+  --blx-hover-bg: rgba(255, 255, 255, 0.06);
+  --blx-selected-bg: rgba(255, 255, 255, 0.06);
+  --blx-selection-bg: rgba(110, 168, 254, 0.2);
+  --blx-btn-secondary-bg: rgba(255, 255, 255, 0.06);
+  --blx-btn-secondary-bg-hover: rgba(255, 255, 255, 0.10);
+  --blx-btn-secondary-text: #9da3b0;
+  --blx-checklist-checked-color: #6b7080;
+  --blx-placeholder-color: #555a68;
+  --blx-description-color: #6b7080;
+  --blx-emoji-name-color: #6b7080;
+  --blx-toolbar-sep: rgba(255, 255, 255, 0.1);
+  --blx-link-underline: rgba(110, 168, 254, 0.35);
+  --blx-scrollbar-thumb: rgba(255, 255, 255, 0.12);
+  --blx-menu-highlight: rgba(255, 255, 255, 0.08);
+
+  --blx-agenda-overdue: #f87171;
+  --blx-agenda-overdue-bg: rgba(248, 113, 113, 0.10);
+  --blx-agenda-today: #f0a050;
+  --blx-agenda-today-bg: rgba(240, 160, 80, 0.10);
+  --blx-agenda-upcoming: var(--blx-text-muted);
+  --blx-agenda-upcoming-bg: rgba(255, 255, 255, 0.04);
+  --blx-agenda-future: var(--blx-text-faint);
+  --blx-agenda-future-bg: rgba(255, 255, 255, 0.03);
+
+  --blx-highlight-yellow: rgba(255, 235, 100, 0.22);
+  --blx-highlight-green: rgba(100, 220, 130, 0.20);
+  --blx-highlight-blue: rgba(120, 195, 255, 0.20);
+  --blx-highlight-pink: rgba(255, 140, 170, 0.20);
+  --blx-highlight-orange: rgba(255, 185, 80, 0.20);
+  --blx-highlight-purple: rgba(190, 140, 255, 0.20);
+}
+
+.blx-editor {
+  position: relative;
+  color: var(--blx-text);
+  font-family: var(--blx-font-sans);
+  --blx-gutter: 64px;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  width: 100%;
+}
+
+/* ── Content column (centered within the full-width editor) ──── */
+
+.blx-content {
+  position: relative;
+  box-sizing: border-box;
+  padding-inline: var(--blx-gutter);
+  max-width: var(--blx-content-max-width, none);
+  margin-inline: auto;
+  min-width: calc(var(--blx-gutter) + 120px);
+  min-height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.blx-blocks {
+  flex: 1;
+}
+
+.blx-editor:focus-within {
+  outline: none;
+}
+
+/* ── Gutter (widget rail) ───────────────────────────────────── */
+
+.blx-gutter {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  bottom: 0;
+  width: var(--blx-gutter);
+  pointer-events: none;
+}
+
+.blx-drag-handle,
+.blx-action-btn {
+  pointer-events: auto;
+}
+
+/* ── Blocks ──────────────────────────────────────────────────── */
+
+.blx-block {
+  position: relative;
+  /* Creates a Block Formatting Context so that child margins (e.g. heading
+     margin-top) are contained within this element instead of collapsing
+     through it. This is critical for the virtual viewport: offsetHeight
+     must capture the full visual space so height caching and scroll
+     compensation work correctly during mount/unmount cycles. */
+  display: flow-root;
+}
+
+/* Disable browser scroll anchoring on block containers — we manage scroll
+   compensation manually in BlockViewport.handleIntersection. Without this,
+   the browser's anchoring fights our scrollBy() calls and causes jitter. */
+.blx-block {
+  overflow-anchor: none;
+}
+
+/* Ejected blocks: content stays in the DOM but the browser skips painting.
+   Height is preserved via an explicit inline style set in ejectContent()
+   because contain-intrinsic-size auto only remembers the last rendered size
+   for content-visibility: auto, NOT hidden — using hidden without an
+   explicit height collapses the block to 0px and destroys scroll position. */
+.blx-block-ejected {
+  content-visibility: hidden;
+}
+
+.blx-block [contenteditable="true"] {
+  outline: none;
+  border: none;
+  padding: 3px 6px;
+  border-radius: 5px;
+  transition: background-color 0.35s ease;
+  caret-color: transparent;
+}
+
+.blx-block [contenteditable="true"]:focus {
+  background-color: var(--blx-focus-bg);
+}
+
+/* Table cells are contenteditable but should not inherit block-level CE styles */
+.blx-table-cell[contenteditable="true"] {
+  border: 1px solid var(--blx-border-input);
+  border-radius: 0;
+  padding: 6px 10px;
+  transition: none;
+}
+
+.blx-table-cell[contenteditable="true"]:focus {
+  background-color: transparent;
+}
+
+.blx-block-focused {
+  /* handled by the contenteditable :focus above */
+}
+
+/* ── Paragraph ───────────────────────────────────────────────── */
+
+.blx-paragraph {
+  font-size: var(--blx-font-base-size);
+  line-height: var(--blx-lh-body);
+  margin: 1px 0;
+  min-height: 1.7em;
+  letter-spacing: -0.008em;
+  word-spacing: 0.02em;
+}
+
+/* ── Headings ────────────────────────────────────────────────── */
+
+.blx-heading {
+  font-weight: 600;
+  color: var(--blx-text-heading);
+  margin: 20px 0 2px;
+  min-height: 1.2em;
+  letter-spacing: -0.02em;
+}
+
+.blx-heading-1 {
+  font-size: var(--blx-font-scale-1);
+  line-height: var(--blx-lh-1);
+  margin-top: 32px;
+  font-weight: 650;
+  letter-spacing: -0.022em;
+}
+
+.blx-heading-2 {
+  font-size: var(--blx-font-scale-2);
+  line-height: var(--blx-lh-2);
+  margin-top: 28px;
+  letter-spacing: -0.018em;
+}
+
+.blx-heading-3 {
+  font-size: var(--blx-font-scale-3);
+  line-height: var(--blx-lh-3);
+  letter-spacing: -0.014em;
+}
+
+.blx-heading-4 {
+  font-size: var(--blx-font-scale-4);
+  line-height: var(--blx-lh-4);
+  font-weight: 580;
+}
+
+/* ── Heading Task Status ─────────────────────────────────────── */
+
+.blx-heading-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px; /* matches base heading margin — keeps spacing when heading margin is zeroed */
+}
+
+/* Transfer heading margin-top to wrapper so flex centering aligns with text, not margin-box */
+.blx-heading-wrapper > .blx-heading {
+  margin-top: 0;
+}
+.blx-heading-wrapper:has(.blx-heading-1) { margin-top: 32px; }
+.blx-heading-wrapper:has(.blx-heading-2) { margin-top: 28px; }
+
+.blx-heading-task-indicator {
+  flex-shrink: 0;
+  width: var(--_indicator-size, 18px);
+  height: var(--_indicator-size, 18px);
+  border-radius: 50%;
+  border: 1.5px solid var(--blx-text-faint);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Expand touch target to 44px on coarse pointer (mobile) */
+@media (pointer: coarse) {
+  .blx-heading-task-indicator::before {
+    content: "";
+    position: absolute;
+    top: 50%; left: 50%;
+    min-width: 44px;
+    min-height: 44px;
+    transform: translate(-50%, -50%);
+  }
+}
+
+/* Per-level indicator size — proportional to heading */
+.blx-heading-wrapper:has(.blx-heading-1) .blx-heading-task-indicator { --_indicator-size: 22px; }
+.blx-heading-wrapper:has(.blx-heading-2) .blx-heading-task-indicator { --_indicator-size: 18px; }
+.blx-heading-wrapper:has(.blx-heading-3) .blx-heading-task-indicator { --_indicator-size: 15px; }
+.blx-heading-wrapper:has(.blx-heading-4) .blx-heading-task-indicator { --_indicator-size: 13px; }
+
+.blx-heading-task-indicator::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+
+/* Todo: open circle — ready to start */
+.blx-heading-task-indicator.blx-task-todo {
+  border-color: var(--blx-text-faint);
+}
+
+.blx-heading-task-indicator.blx-task-todo:hover {
+  border-color: var(--blx-accent);
+  box-shadow: 0 0 0 3px var(--blx-accent-bg);
+}
+
+/* In Progress: accent-bordered circle with centered accent dot */
+.blx-heading-task-indicator.blx-task-in-progress {
+  border-color: var(--blx-accent);
+  background: var(--blx-accent-bg);
+}
+
+.blx-heading-task-indicator.blx-task-in-progress::after {
+  width: 33%;
+  height: 33%;
+  border-radius: 50%;
+  background: var(--blx-accent);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.blx-heading-task-indicator.blx-task-in-progress:hover {
+  background: var(--blx-accent-bg-hover);
+  box-shadow: 0 0 0 3px var(--blx-accent-bg);
+}
+
+/* Done: green filled circle with a checkmark */
+.blx-heading-task-indicator.blx-task-done {
+  --_done: #34a853;
+  border-color: var(--_done);
+  background: var(--_done);
+}
+
+.blx-heading-task-indicator.blx-task-done::after {
+  /* CSS checkmark — scales with indicator */
+  width: 28%;
+  height: 45%;
+  border-right: 1.5px solid #fff;
+  border-bottom: 1.5px solid #fff;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -55%) rotate(40deg);
+}
+
+.blx-heading-task-indicator.blx-task-done:hover {
+  --_done: #2d9249;
+  box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.15);
+}
+
+/* Done heading text: completed feel without dulling */
+.blx-heading-task-done {
+  color: var(--blx-text-muted);
+}
+
+@media (prefers-color-scheme: dark) {
+  .blx-editor:not([data-blx-theme="light"]) .blx-heading-task-indicator.blx-task-done {
+    --_done: #4eca6a;
+  }
+  .blx-editor:not([data-blx-theme="light"]) .blx-heading-task-indicator.blx-task-done:hover {
+    --_done: #43b85e;
+    box-shadow: 0 0 0 3px rgba(78, 202, 106, 0.15);
+  }
+}
+
+.blx-editor[data-blx-theme="dark"] .blx-heading-task-indicator.blx-task-done {
+  --_done: #4eca6a;
+}
+
+.blx-editor[data-blx-theme="dark"] .blx-heading-task-indicator.blx-task-done:hover {
+  --_done: #43b85e;
+  box-shadow: 0 0 0 3px rgba(78, 202, 106, 0.15);
+}
+
+/* ── Lists ───────────────────────────────────────────────────── */
+
+.blx-list {
+  margin: 1px 0;
+  padding-inline-start: 24px;
+}
+
+.blx-list li {
+  font-size: var(--blx-font-base-size);
+  line-height: var(--blx-lh-body);
+  min-height: 1.7em;
+  letter-spacing: -0.008em;
+  word-spacing: 0.02em;
+}
+
+.blx-list-ordered {
+  list-style-type: decimal;
+}
+
+.blx-list-unordered {
+  list-style-type: disc;
+}
+
+.blx-list li::marker {
+  color: var(--blx-text-faint);
+}
+
+/* ── Task Lists ──────────────────────────────────────────────── */
+
+.blx-checklist {
+  margin: 1px 0;
+  padding-inline-start: 6px;
+  list-style: none;
+}
+
+.blx-checklist-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: var(--blx-font-base-size);
+  line-height: var(--blx-lh-body);
+  min-height: 1.7em;
+  letter-spacing: -0.008em;
+  word-spacing: 0.02em;
+  transition: opacity 0.2s ease, color 0.2s ease;
+}
+
+.blx-checklist-checkbox {
+  font-size: inherit;
+  --_line: calc(1em * var(--blx-lh-body));
+  --_check-size: calc(var(--_line) * 0.7);
+  width: var(--_check-size);
+  height: var(--_check-size);
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: calc((var(--_line) - var(--_check-size)) / 2 + 3px);
+  border-radius: 3px;
+  border: 1.5px solid var(--blx-text-faint);
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+  transition: all 0.15s ease;
+}
+
+.blx-checklist-checkbox:hover {
+  border-color: var(--blx-accent);
+  background-color: var(--blx-accent-bg);
+}
+
+.blx-checklist-checkbox:checked {
+  background-color: var(--blx-accent);
+  border-color: var(--blx-accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.5 3.5L6 11l-3.5-3.5L1 9l5 5 9-9z'/%3E%3C/svg%3E");
+  background-size: calc(var(--_check-size) * 0.75);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.blx-checklist-content {
+  flex: 1;
+  outline: none;
+}
+
+.blx-checklist-checked {
+  opacity: 0.5;
+}
+
+.blx-checklist-checked .blx-checklist-content {
+  text-decoration: line-through;
+  color: var(--blx-checklist-checked-color);
+}
+
+/* ── Agenda Badges & Labels ──────────────────────────────────── */
+
+/* Right-aligned chip badge for blocks with agenda dates */
+.blx-agenda-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: auto;
+  flex-shrink: 0;
+  font-family: var(--blx-font-sans);
+  font-size: 0.66rem;
+  font-weight: 550;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  color: var(--blx-agenda-future);
+  background: var(--blx-agenda-future-bg);
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition: filter 0.15s ease;
+}
+
+.blx-agenda-badge:hover {
+  filter: brightness(0.95);
+}
+
+/* Agenda label for task headings — stacks above the heading row. */
+.blx-heading-wrapper:has(.blx-agenda-label) {
+  flex-wrap: wrap;
+  row-gap: 0;
+  column-gap: 8px;
+}
+
+.blx-agenda-label {
+  display: flex;
+  align-items: center;
+  flex-basis: 100%; /* Forces label onto its own row above the heading */
+  line-height: 1;
+  color: var(--blx-agenda-future);
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 2px;
+  margin-left: 28px; /* Align with heading text past indicator */
+}
+
+.blx-agenda-label-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--blx-font-sans);
+  font-size: 0.65rem;
+  font-weight: 550;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  color: inherit;
+  padding: 2px 7px;
+  border-radius: 3px;
+  background: var(--blx-agenda-future-bg);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+/* ── Recurrence indicator ────────────────────────────────────── */
+
+.blx-agenda-recurrence {
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.45;
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.blx-agenda-recurrence svg {
+  width: 1em;
+  height: 1em;
+}
+
+.blx-agenda-badge:hover .blx-agenda-recurrence,
+.blx-agenda-label:hover .blx-agenda-recurrence {
+  opacity: 0.7;
+}
+
+/* ── Agenda state colors ─────────────────────────────────────── */
+
+.blx-agenda-overdue {
+  color: var(--blx-agenda-overdue);
+}
+
+.blx-agenda-badge.blx-agenda-overdue {
+  background: var(--blx-agenda-overdue-bg);
+}
+
+.blx-agenda-label.blx-agenda-overdue .blx-agenda-label-text {
+  background: var(--blx-agenda-overdue-bg);
+}
+
+.blx-agenda-today {
+  color: var(--blx-agenda-today);
+}
+
+.blx-agenda-badge.blx-agenda-today {
+  background: var(--blx-agenda-today-bg);
+}
+
+.blx-agenda-label.blx-agenda-today .blx-agenda-label-text {
+  background: var(--blx-agenda-today-bg);
+}
+
+.blx-agenda-tomorrow {
+  color: var(--blx-agenda-today);
+}
+
+.blx-agenda-badge.blx-agenda-tomorrow {
+  background: var(--blx-agenda-today-bg);
+}
+
+.blx-agenda-label.blx-agenda-tomorrow .blx-agenda-label-text {
+  background: var(--blx-agenda-today-bg);
+}
+
+.blx-agenda-upcoming {
+  color: var(--blx-agenda-upcoming);
+}
+
+.blx-agenda-badge.blx-agenda-upcoming {
+  background: var(--blx-agenda-upcoming-bg);
+}
+
+.blx-agenda-future {
+  color: var(--blx-agenda-future);
+}
+
+.blx-agenda-badge.blx-agenda-future {
+  background: var(--blx-agenda-future-bg);
+}
+
+/* Past event — muted, informational */
+.blx-agenda-past {
+  color: var(--blx-agenda-future);
+}
+
+.blx-agenda-badge.blx-agenda-past {
+  background: var(--blx-agenda-future-bg);
+}
+
+/* Ongoing scheduled item — still active */
+.blx-agenda-ongoing {
+  color: var(--blx-agenda-upcoming);
+}
+
+.blx-agenda-badge.blx-agenda-ongoing {
+  background: var(--blx-agenda-upcoming-bg);
+}
+
+/* Completed task: muted + strikethrough */
+.blx-agenda-done {
+  text-decoration: line-through;
+  opacity: 0.45;
+}
+
+/* ── Date Picker ────────────────────────────────────────────── */
+
+.blx-date-picker {
+  position: fixed;
+  z-index: 1000;
+  background: var(--blx-surface, #ffffff);
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 0, 0, 0.02);
+  width: 252px;
+  font-family: var(--blx-font-sans, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  font-size: 0.8rem;
+  color: var(--blx-text, #404550);
+  animation: blx-date-picker-in var(--blx-widget-anim-duration, 0.15s) var(--blx-widget-anim-curve, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+@keyframes blx-date-picker-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Calendar month header */
+.blx-date-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.blx-date-picker-month {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--blx-text, #404550);
+}
+
+.blx-date-picker-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: transparent;
+  color: var(--blx-text-muted, #8a8f9a);
+  cursor: pointer;
+  font-size: 14px;
+  border-radius: 6px;
+  font-family: inherit;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+
+.blx-date-picker-nav:hover {
+  background: var(--blx-hover-bg, rgba(0, 0, 0, 0.05));
+  color: var(--blx-text, #404550);
+}
+
+/* Day-of-week headers */
+.blx-date-picker-dow {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-size: 0.65rem;
+  font-weight: 550;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--blx-text-faint, #b0b5bf);
+  margin-bottom: 4px;
+  padding-bottom: 4px;
+}
+
+/* Calendar grid */
+.blx-date-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.blx-date-picker-pad {
+  /* Empty spacer for days before the 1st */
+}
+
+/* Individual day cell */
+.blx-date-picker-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--blx-text, #404550);
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 450;
+  font-family: inherit;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+
+.blx-date-picker-day:hover {
+  background: var(--blx-hover-bg, rgba(0, 0, 0, 0.05));
+}
+
+/* Today's date: accent ring */
+.blx-date-picker-today {
+  font-weight: 650;
+  color: var(--blx-accent, #4285f4);
+  box-shadow: inset 0 0 0 1.5px var(--blx-accent, #4285f4);
+}
+
+/* Selected date: solid accent fill */
+.blx-date-picker-selected {
+  background: var(--blx-accent, #4285f4);
+  color: #fff;
+  font-weight: 600;
+}
+
+.blx-date-picker-selected:hover {
+  background: var(--blx-accent-hover, #3370d4);
+}
+
+/* Today + selected: fill wins, no ring */
+.blx-date-picker-selected.blx-date-picker-today {
+  box-shadow: none;
+  color: #fff;
+}
+
+/* Remove date button */
+.blx-date-picker-remove {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 5px 8px;
+  border: none;
+  border-top: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  padding-top: 10px;
+  background: transparent;
+  color: var(--blx-danger, #dc3545);
+  cursor: pointer;
+  font-size: 0.7rem;
+  font-weight: 500;
+  text-align: center;
+  border-radius: 0;
+  font-family: inherit;
+  transition: color 0.1s ease;
+}
+
+.blx-date-picker-remove:hover {
+  color: var(--blx-danger, #dc3545);
+  filter: brightness(1.15);
+}
+
+/* ── Date picker suggestions (@ natural language search) ─────── */
+
+.blx-date-picker-suggestions {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+}
+
+.blx-date-picker-suggestion-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 0.8rem;
+  color: var(--blx-text, #404550);
+  text-align: left;
+  width: 100%;
+  border-radius: 6px;
+  gap: 12px;
+}
+
+.blx-date-picker-suggestion-item:hover,
+.blx-date-picker-suggestion-selected {
+  background: var(--blx-accent-bg, rgba(66, 133, 244, 0.10));
+}
+
+.blx-date-picker-suggestion-label {
+  font-weight: 500;
+}
+
+.blx-date-picker-suggestion-date {
+  font-size: 0.75rem;
+  color: var(--blx-muted, #9ca3af);
+  white-space: nowrap;
+}
+
+.blx-date-picker-suggestion-empty {
+  padding: 12px 8px;
+  font-size: 0.8rem;
+  color: var(--blx-muted, #9ca3af);
+  text-align: center;
+}
+
+/* ── Date picker: role tabs ──────────────────────────────────── */
+
+.blx-date-picker-roles {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 8px;
+  padding: 2px;
+  background: var(--blx-hover-bg, rgba(0, 0, 0, 0.04));
+  border-radius: 8px;
+}
+
+.blx-date-picker-role-tab {
+  flex: 1 1 0;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--blx-text-muted, #8a8f9a);
+  cursor: pointer;
+  font-size: 0.7rem;
+  font-weight: 550;
+  font-family: inherit;
+  text-align: center;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.blx-date-picker-role-tab:hover:not(:disabled) {
+  color: var(--blx-text, #404550);
+}
+
+.blx-date-picker-role-active {
+  background: var(--blx-surface, #ffffff);
+  color: var(--blx-text, #404550);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.blx-date-picker-role-disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* ── Date picker: calendar section wrapper ───────────────────── */
+
+.blx-date-picker-calendar-section {
+  /* wrapper for collapsing calendar when repeat config is shown */
+}
+
+/* ── Date picker: footer bar (repeat toggle + confirm/cancel) ── */
+
+.blx-date-picker-footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-top: 8px;
+  margin-top: 4px;
+  border-top: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+}
+
+.blx-date-picker-footer-spacer {
+  flex: 1;
+}
+
+.blx-date-picker-confirm-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 26px;
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease, opacity 0.1s ease;
+}
+
+.blx-date-picker-confirm-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.blx-date-picker-tick {
+  color: var(--blx-success, #22c55e);
+}
+
+.blx-date-picker-tick:hover:not(:disabled) {
+  background: rgba(34, 197, 94, 0.1);
+  border-color: var(--blx-success, #22c55e);
+}
+
+.blx-date-picker-cross {
+  color: var(--blx-text-muted, #8a8f9a);
+}
+
+.blx-date-picker-cross:hover {
+  background: var(--blx-hover-bg, rgba(0, 0, 0, 0.05));
+  color: var(--blx-danger, #dc3545);
+}
+
+/* ── Date picker: repeat toggle (in footer) ──────────────────── */
+
+.blx-date-picker-repeat-toggle {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  border-radius: 6px;
+  background: transparent;
+  color: var(--blx-text-muted, #8a8f9a);
+  cursor: pointer;
+  font-size: 0.68rem;
+  font-weight: 500;
+  font-family: inherit;
+  white-space: nowrap;
+  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
+}
+
+.blx-date-picker-repeat-toggle:hover:not(:disabled) {
+  background: var(--blx-hover-bg, rgba(0, 0, 0, 0.05));
+  color: var(--blx-text, #404550);
+}
+
+.blx-date-picker-repeat-toggle:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.blx-date-picker-repeat-active {
+  background: var(--blx-accent-bg, rgba(66, 133, 244, 0.10));
+  color: var(--blx-accent, #4285f4);
+  border-color: var(--blx-accent, #4285f4);
+}
+
+.blx-date-picker-repeat-active:hover:not(:disabled) {
+  background: var(--blx-accent-bg, rgba(66, 133, 244, 0.15));
+  color: var(--blx-accent, #4285f4);
+}
+
+/* ── Date picker: repeat config panel ────────────────────────── */
+
+.blx-date-picker-repeat-config {
+  padding: 10px;
+  background: var(--blx-hover-bg, rgba(0, 0, 0, 0.025));
+  border-radius: 8px;
+}
+
+/* Date chip — shows selected date in repeat view */
+.blx-date-picker-date-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  margin-bottom: 10px;
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  border-radius: 6px;
+  background: var(--blx-surface, #ffffff);
+  color: var(--blx-text, #404550);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 550;
+  font-family: inherit;
+  text-align: left;
+  transition: border-color 0.1s ease, box-shadow 0.1s ease;
+}
+
+.blx-date-picker-date-chip:hover {
+  border-color: var(--blx-accent, #4285f4);
+  box-shadow: 0 0 0 1px var(--blx-accent-bg, rgba(66, 133, 244, 0.10));
+}
+
+.blx-date-picker-date-chip svg {
+  color: var(--blx-text-muted, #8a8f9a);
+  flex-shrink: 0;
+}
+
+.blx-date-picker-date-chip-edit {
+  margin-left: auto;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.blx-date-picker-date-chip:hover .blx-date-picker-date-chip-edit {
+  opacity: 0.6;
+}
+
+.blx-date-picker-repeat-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.blx-date-picker-repeat-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--blx-text, #404550);
+  white-space: nowrap;
+}
+
+.blx-date-picker-repeat-num {
+  width: 48px;
+  padding: 5px 6px;
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.1));
+  border-radius: 6px;
+  background: var(--blx-surface, #ffffff);
+  color: var(--blx-text, #404550);
+  font-size: 0.75rem;
+  font-family: inherit;
+  text-align: center;
+  -moz-appearance: textfield;
+}
+
+.blx-date-picker-repeat-num:focus {
+  outline: none;
+  border-color: var(--blx-accent, #4285f4);
+  box-shadow: 0 0 0 2px var(--blx-accent-bg, rgba(66, 133, 244, 0.15));
+}
+
+.blx-date-picker-repeat-num::-webkit-inner-spin-button,
+.blx-date-picker-repeat-num::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.blx-date-picker-repeat-unit {
+  flex: 1;
+  padding: 5px 6px;
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.1));
+  border-radius: 6px;
+  background: var(--blx-surface, #ffffff);
+  color: var(--blx-text, #404550);
+  font-size: 0.75rem;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.blx-date-picker-repeat-unit:focus {
+  outline: none;
+  border-color: var(--blx-accent, #4285f4);
+  box-shadow: 0 0 0 2px var(--blx-accent-bg, rgba(66, 133, 244, 0.15));
+}
+
+.blx-date-picker-repeat-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.7rem;
+  color: var(--blx-text-muted, #8a8f9a);
+  cursor: pointer;
+  padding: 4px 0 0;
+}
+
+.blx-date-picker-repeat-check input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--blx-accent, #4285f4);
+  cursor: pointer;
+}
+
+/* ── CJK Typography ──────────────────────────────────────────── */
+
+/* CJK font fallback chain for text content */
+.blx-paragraph,
+.blx-heading,
+.blx-list li,
+.blx-checklist-content {
+  font-family: var(--blx-font-sans), var(--blx-font-cjk);
+}
+
+/* Progressive enhancement: CJK-Latin autospacing (Baseline Nov 2025) */
+.blx-paragraph,
+.blx-heading,
+.blx-list li,
+.blx-checklist-content {
+  text-autospace: ideograph-alpha ideograph-numeric;
+}
+
+/* ── Block content wrapper ───────────────────────────────────── */
+
+.blx-block-content {
+  position: relative;
+}
+
+/* ── Code Block ──────────────────────────────────────────────── */
+
+.blx-code-block {
+  background: #1e1e2e;
+  border-radius: 10px;
+  margin: 10px;
+}
+
+/* ── Language picker (Dropdown widget) ───────────────────────── */
+
+.blx-code-lang-picker {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  z-index: 2;
+}
+
+/* Code language dropdown — ghost button inside the always-dark code block */
+.blx-code-lang-dropdown.blx-dropdown-trigger {
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.75rem;
+  font-family: var(--blx-font-sans);
+  font-weight: 500;
+  padding: 3px 8px;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+}
+
+.blx-code-lang-dropdown.blx-dropdown-trigger:hover {
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.blx-code-lang-dropdown.blx-dropdown-trigger[aria-expanded="true"] {
+  color: rgba(255, 255, 255, 0.85);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.blx-block-content:focus-within .blx-code-lang-dropdown.blx-dropdown-trigger {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.blx-code-pre {
+  margin: 0;
+  padding: 0;
+}
+
+.blx-code-content {
+  display: block;
+  font-family: var(--blx-font-mono);
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: #cdd6f4;
+  white-space: pre;
+  padding: 16px 18px;
+  overflow-x: auto;
+  min-height: 1.6em;
+  tab-size: 2;
+}
+
+.blx-code-block [contenteditable="true"]:focus {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.blx-code-block [contenteditable="true"] {
+  padding: 16px 18px;
+  border-radius: 0;
+  transition: none;
+}
+
+/* Empty code block placeholder */
+.blx-code-content:empty::before {
+  content: "Type code here...";
+  color: #585b70;
+  pointer-events: none;
+}
+
+/* ── Prism token colors (Catppuccin Mocha-inspired) ──────────── */
+
+.blx-code-content .token.comment,
+.blx-code-content .token.prolog,
+.blx-code-content .token.doctype,
+.blx-code-content .token.cdata {
+  color: #6c7086;
+  font-style: italic;
+}
+
+.blx-code-content .token.punctuation {
+  color: #bac2de;
+}
+
+.blx-code-content .token.keyword,
+.blx-code-content .token.tag,
+.blx-code-content .token.boolean,
+.blx-code-content .token.important {
+  color: #cba6f7;
+}
+
+.blx-code-content .token.string,
+.blx-code-content .token.char,
+.blx-code-content .token.attr-value,
+.blx-code-content .token.regex {
+  color: #a6e3a1;
+}
+
+.blx-code-content .token.number {
+  color: #fab387;
+}
+
+.blx-code-content .token.function {
+  color: #89b4fa;
+}
+
+.blx-code-content .token.class-name,
+.blx-code-content .token.builtin {
+  color: #f9e2af;
+}
+
+.blx-code-content .token.property,
+.blx-code-content .token.constant,
+.blx-code-content .token.symbol {
+  color: #f38ba8;
+}
+
+.blx-code-content .token.operator,
+.blx-code-content .token.entity,
+.blx-code-content .token.url {
+  color: #89dceb;
+}
+
+.blx-code-content .token.attr-name {
+  color: #f9e2af;
+}
+
+.blx-code-content .token.selector {
+  color: #a6e3a1;
+}
+
+.blx-code-content .token.atrule {
+  color: #cba6f7;
+}
+
+.blx-code-content .token.inserted {
+  color: #a6e3a1;
+}
+
+.blx-code-content .token.deleted {
+  color: #f38ba8;
+}
+
+/* ── Inline Code ────────────────────────────────────────────── */
+
+.blx-inline-code {
+  font-family: var(--blx-font-mono);
+  font-size: 0.9em;
+  background-color: var(--blx-inline-code-bg);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+/* ── Block References (inline pills) ─────────────────────────── */
+
+.blx-block-ref {
+  display: inline;
+  background-color: var(--blx-accent-bg);
+  color: var(--blx-accent);
+  border-radius: 3px;
+  padding: 0.05em 0.2em;
+  cursor: pointer;
+  transition: background-color 0.12s ease;
+}
+
+.blx-block-ref:hover {
+  background-color: var(--blx-accent-bg-hover);
+}
+
+/* ── Base Menu (shared by SlashMenu, AutoComplete, BlockAction, Table) ── */
+
+.blx-menu {
+  position: fixed;
+  z-index: 100;
+  min-width: 220px;
+  background: var(--blx-surface);
+  border: 1px solid var(--blx-border);
+  border-radius: 10px;
+  box-shadow: var(--blx-shadow);
+  padding: 6px 4px;
+  max-height: 320px;
+  overflow-y: auto;
+  animation: blx-menu-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes blx-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.blx-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: start;
+  padding: 7px 11px;
+  border: none;
+  background: none;
+  border-radius: 7px;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.1s ease;
+}
+
+.blx-menu-item-selected {
+  background: var(--blx-menu-highlight, rgba(0, 0, 0, 0.06));
+}
+
+.blx-menu-item-disabled {
+  opacity: 0.35;
+  pointer-events: none;
+  cursor: default;
+}
+
+.blx-menu-item-danger .blx-menu-label {
+  color: var(--blx-danger);
+}
+
+.blx-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--blx-text-icon);
+}
+
+.blx-menu-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.blx-menu-label {
+  font-size: 0.825rem;
+  font-weight: 500;
+  color: var(--blx-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.blx-menu-description {
+  font-size: 0.7rem;
+  color: var(--blx-description-color);
+}
+
+.blx-menu-hint {
+  margin-left: auto;
+  padding-left: 12px;
+  font-size: 0.75rem;
+  color: var(--blx-text-faint);
+  white-space: nowrap;
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+}
+
+.blx-menu-sep {
+  height: 1px;
+  background: var(--blx-border);
+  margin: 4px 6px;
+}
+
+.blx-menu-empty {
+  padding: 12px 11px;
+  font-size: 0.775rem;
+  color: var(--blx-text-muted);
+  text-align: center;
+}
+
+/* ── Thin scrollbars (shared by all scrollable widgets) ─────── */
+
+.blx-menu,
+.blx-emoji-grid-browse,
+.kb-panel-body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--blx-scrollbar-thumb) transparent;
+}
+
+.blx-menu::-webkit-scrollbar,
+.blx-emoji-grid-browse::-webkit-scrollbar,
+.kb-panel-body::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.blx-menu::-webkit-scrollbar-track,
+.blx-emoji-grid-browse::-webkit-scrollbar-track,
+.kb-panel-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.blx-menu::-webkit-scrollbar-thumb,
+.blx-emoji-grid-browse::-webkit-scrollbar-thumb,
+.kb-panel-body::-webkit-scrollbar-thumb {
+  background: var(--blx-scrollbar-thumb);
+  border-radius: 2px;
+}
+
+/* Code blocks are always dark (Catppuccin) — hardcoded thumb color */
+.blx-code-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+}
+
+.blx-code-content::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.blx-code-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.blx-code-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+
+/* ── Base Popover (shared by LinkPopover, HighlightPicker, InlineToolbar) ── */
+
+.blx-popover {
+  position: fixed;
+  z-index: 110;
+  background: var(--blx-surface);
+  border: 1px solid var(--blx-border);
+  border-radius: 8px;
+  box-shadow: var(--blx-shadow);
+  padding: 4px;
+  animation: blx-popover-in 0.12s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes blx-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Tooltip ──────────────────────────────────────────────────── */
+/*
+ * Tooltip is appended to document.body — outside .blx-editor — so CSS
+ * custom properties are specified with explicit fallbacks for light theme.
+ * Dark-mode adaptation happens through the explicit @media block below.
+ */
+
+.blx-tooltip {
+  position: fixed;
+  z-index: 10000;
+  padding: 6px 11px;
+  border-radius: 7px;
+  background: var(--blx-text, #404550);
+  color: var(--blx-surface, #ffffff);
+  font-family: var(--blx-font-sans, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.5;
+  letter-spacing: 0.01em;
+  pointer-events: none;
+  white-space: nowrap;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 4px 12px rgba(0, 0, 0, 0.10),
+    0 0 0 1px rgba(0, 0, 0, 0.04);
+  animation: blx-tooltip-in var(--blx-widget-anim-duration, 0.15s) var(--blx-widget-anim-curve, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+/* Shortcut hint styling — lighter weight for key combos */
+.blx-tooltip kbd {
+  font-family: var(--blx-font-sans, "Plus Jakarta Sans", -apple-system, sans-serif);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  opacity: 0.72;
+  margin-inline-start: 6px;
+}
+
+@keyframes blx-tooltip-in {
+  from { opacity: 0; transform: scale(0.96) translateY(2px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* ── Toast ────────────────────────────────────────────────────── */
+/*
+ * Toast is appended to document.body — CSS custom properties have fallbacks.
+ */
+
+.blx-toast-container {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.blx-toast {
+  padding: 10px 20px;
+  border-radius: var(--blx-widget-radius, 8px);
+  background: var(--blx-text, #404550);
+  color: var(--blx-surface, #ffffff);
+  font-family: var(--blx-font-sans, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1.45;
+  letter-spacing: 0.005em;
+  box-shadow:
+    0 4px 20px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 0, 0, 0.03);
+  pointer-events: auto;
+  cursor: pointer;
+  animation: blx-toast-in 0.2s ease;
+  max-width: 400px;
+  text-align: center;
+  min-width: 160px;
+  transition: opacity 0.12s ease;
+}
+
+.blx-toast:hover {
+  opacity: 0.88;
+}
+
+.blx-toast-error {
+  background: var(--blx-danger, #dc3545);
+  color: #fff;
+}
+
+.blx-toast-success {
+  background: #16a34a;
+  color: #fff;
+}
+
+.blx-toast-exit {
+  animation: blx-toast-out 0.15s ease forwards;
+}
+
+@keyframes blx-toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes blx-toast-out {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(6px); }
+}
+
+/* ── Modal ────────────────────────────────────────────────────── */
+/*
+ * Modal uses native <dialog> appended to document.body.
+ * CSS custom properties have explicit fallbacks for light theme.
+ */
+
+.blx-modal {
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  border-radius: 12px;
+  background: var(--blx-widget-surface, var(--blx-surface, #ffffff));
+  color: var(--blx-widget-text, var(--blx-text, #404550));
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.02),
+    0 8px 24px rgba(0, 0, 0, 0.06),
+    0 24px 64px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  max-width: 440px;
+  width: 90vw;
+  font-family: var(--blx-font-sans, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  animation: blx-modal-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.blx-modal::backdrop {
+  background: rgba(0, 0, 0, 0.18);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  animation: blx-modal-backdrop-in 0.15s ease-out;
+}
+
+.blx-modal-header {
+  padding: 20px 24px 14px;
+  border-bottom: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+}
+
+.blx-modal-header h3 {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.015em;
+  color: var(--blx-text-heading, #3b4255);
+}
+
+.blx-modal-body {
+  padding: 18px 24px;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: var(--blx-text, #404550);
+}
+
+.blx-modal-footer {
+  padding: 14px 24px 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  border-top: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+}
+
+.blx-modal-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  border-radius: 8px;
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  background: var(--blx-widget-surface, var(--blx-surface, #ffffff));
+  color: var(--blx-widget-text, var(--blx-text, #404550));
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  line-height: 1.4;
+  min-width: 76px;
+  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.blx-modal-btn:hover {
+  background: var(--blx-hover-bg, rgba(0, 0, 0, 0.035));
+  color: var(--blx-text, #404550);
+}
+
+.blx-modal-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--blx-widget-surface, #fff), 0 0 0 4px var(--blx-accent, #4285f4);
+}
+
+.blx-modal-btn-primary {
+  background: var(--blx-accent, #4285f4);
+  color: #fff;
+  border-color: var(--blx-accent, #4285f4);
+  font-weight: 500;
+}
+
+.blx-modal-btn-primary:hover {
+  opacity: 0.9;
+}
+
+.blx-modal-btn-danger {
+  background: transparent;
+  color: var(--blx-danger, #dc3545);
+  border-color: transparent;
+}
+
+.blx-modal-btn-danger:hover {
+  background: rgba(239, 68, 68, 0.08);
+  color: var(--blx-danger, #dc3545);
+}
+
+@keyframes blx-modal-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes blx-modal-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ── Dropdown ─────────────────────────────────────────────────── */
+/*
+ * Dropdown trigger is always inside .blx-editor and inherits CSS variables.
+ * The menu (ContextMenu element) is appended inside .blx-editor too (see
+ * Dropdown.attachTo), so it also has access to --blx-* variables via .blx-menu.
+ */
+
+.blx-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--blx-border-input);
+  background: var(--blx-surface);
+  color: var(--blx-text);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: var(--blx-font-sans);
+  cursor: pointer;
+  line-height: 1.4;
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+
+.blx-dropdown-trigger:hover {
+  background: var(--blx-hover-bg);
+  border-color: var(--blx-border-input);
+}
+
+.blx-dropdown-trigger[aria-expanded="true"] {
+  background: var(--blx-accent-bg);
+  border-color: var(--blx-accent);
+  color: var(--blx-accent);
+}
+
+.blx-dropdown-trigger::after {
+  content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 3.5px solid transparent;
+  border-right: 3.5px solid transparent;
+  border-top: 3.5px solid currentColor;
+  opacity: 0.5;
+  margin-inline-start: 4px;
+  flex-shrink: 0;
+  transition: transform var(--blx-widget-anim-duration) var(--blx-widget-anim-curve);
+}
+
+.blx-dropdown-trigger[aria-expanded="true"]::after {
+  transform: rotate(180deg);
+  opacity: 0.7;
+}
+
+/* Dropdown menu — explicit fallbacks since menu may land on document.body
+ * (outside .blx-editor) when closest() fails to find the editor root.
+ * Same pattern as Tooltip/Toast: duplicate base .blx-menu surface styles. */
+.blx-dropdown-menu {
+  min-width: 160px;
+  background: var(--blx-surface, #ffffff);
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  border-radius: 10px;
+  padding: 6px;
+  box-shadow: var(--blx-shadow, 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02));
+  font-family: var(--blx-font-sans, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  color: var(--blx-text, #404550);
+}
+
+.blx-dropdown-menu .blx-menu-item {
+  padding: 6px 10px;
+}
+
+.blx-dropdown-menu .blx-menu-item-selected {
+  background: var(--blx-menu-highlight, rgba(0, 0, 0, 0.06));
+}
+
+.blx-dropdown-menu .blx-menu-label {
+  font-size: 0.8rem;
+  color: var(--blx-text, #404550);
+}
+
+.blx-dropdown-check {
+  color: var(--blx-accent, #4f7dff);
+}
+
+/* ── Menu type overrides ──────────────────────────────────────── */
+
+.blx-autocomplete-menu { max-width: 340px; max-height: 280px; }
+.blx-slash-menu { max-height: min(280px, 40vh); }
+.blx-slash-menu .blx-menu-item { flex-direction: column; align-items: flex-start; gap: 1px; }
+.blx-action-menu { z-index: 110; min-width: 180px; max-height: 360px; }
+.blx-action-menu .blx-menu-item { padding: 6px 10px; }
+.blx-action-menu .blx-menu-icon { width: 16px; height: 16px; }
+.blx-action-menu .blx-menu-label { font-weight: 450; font-family: var(--blx-font-sans); }
+.blx-context-menu { z-index: 120; min-width: 160px; max-height: 320px; }
+.blx-context-menu .blx-menu-item { padding: 6px 10px; }
+.blx-context-menu .blx-menu-icon { width: 16px; height: 16px; }
+.blx-context-menu .blx-menu-label { font-weight: 450; font-family: var(--blx-font-sans); }
+
+/* ── Highlight / Text Marking ────────────────────────────────── */
+
+.blx-highlight {
+  border-radius: 2px;
+  padding: 0.05em 0;
+}
+
+.blx-highlight-yellow { background-color: var(--blx-highlight-yellow); }
+.blx-highlight-green  { background-color: var(--blx-highlight-green); }
+.blx-highlight-blue   { background-color: var(--blx-highlight-blue); }
+.blx-highlight-pink   { background-color: var(--blx-highlight-pink); }
+.blx-highlight-orange { background-color: var(--blx-highlight-orange); }
+.blx-highlight-purple { background-color: var(--blx-highlight-purple); }
+
+/* ── Highlight Picker ────────────────────────────────────────── */
+
+
+.blx-highlight-picker-row {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.blx-highlight-swatch {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: border-color 0.1s ease, transform 0.1s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  outline: none;
+}
+
+.blx-highlight-swatch:hover {
+  transform: scale(1.15);
+}
+
+.blx-highlight-swatch-active {
+  border-color: var(--blx-accent);
+}
+
+.blx-highlight-swatch-yellow { background-color: var(--blx-highlight-yellow); }
+.blx-highlight-swatch-green  { background-color: var(--blx-highlight-green); }
+.blx-highlight-swatch-blue   { background-color: var(--blx-highlight-blue); }
+.blx-highlight-swatch-pink   { background-color: var(--blx-highlight-pink); }
+.blx-highlight-swatch-orange { background-color: var(--blx-highlight-orange); }
+.blx-highlight-swatch-purple { background-color: var(--blx-highlight-purple); }
+
+.blx-highlight-swatch-remove {
+  background: var(--blx-btn-secondary-bg);
+  color: var(--blx-text-muted);
+}
+
+.blx-highlight-swatch-remove:hover {
+  background: var(--blx-btn-secondary-bg-hover);
+  color: var(--blx-text);
+}
+
+/* Mobile: larger tap targets */
+@media (pointer: coarse) {
+  .blx-highlight-swatch {
+    width: 36px;
+    height: 36px;
+  }
+
+  .blx-highlight-picker {
+    padding: 5px;
+  }
+
+  .blx-highlight-picker-row {
+    gap: 4px;
+  }
+}
+
+/* ── Drag Handle ─────────────────────────────────────────────── */
+
+.blx-drag-handle {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  inset-inline-start: calc(var(--blx-gutter) - 26px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: opacity 0.15s ease, transform 0.15s ease, top 0.1s ease, background-color 0.15s ease;
+  border-radius: 5px;
+  color: var(--blx-text-faint);
+  user-select: none;
+  touch-action: none;
+}
+
+.blx-drag-handle:hover {
+  background: var(--blx-hover-bg);
+  color: var(--blx-text-icon);
+}
+
+/* ── Block Action Button ─────────────────────────────────── */
+
+.blx-action-btn {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  inset-inline-start: calc(var(--blx-gutter) - 52px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: opacity 0.15s ease, transform 0.15s ease, top 0.1s ease, background-color 0.15s ease;
+  border-radius: 5px;
+  color: var(--blx-text-faint);
+  user-select: none;
+  touch-action: manipulation;
+}
+
+.blx-action-btn:hover {
+  background: var(--blx-hover-bg);
+  color: var(--blx-text-icon);
+}
+
+/* ── Block Action Menu ───────────────────────────────────── */
+
+
+/* ── Mobile: larger tap targets and visible positioning ──── */
+@media (pointer: coarse) {
+  .blx-editor {
+    --blx-gutter: 104px;
+  }
+
+  .blx-drag-handle {
+    width: 44px;
+    height: 44px;
+    inset-inline-start: calc(var(--blx-gutter) - 46px);
+    border-radius: 7px;
+  }
+
+  .blx-action-btn {
+    width: 44px;
+    height: 44px;
+    inset-inline-start: calc(var(--blx-gutter) - 92px);
+    border-radius: 7px;
+  }
+}
+
+/* Small screens: compact gutter with tightly packed widgets */
+@media (max-width: 600px) {
+  .blx-editor {
+    --blx-gutter: 50px;
+  }
+
+  .blx-drag-handle {
+    inset-inline-start: calc(var(--blx-gutter) - 24px);
+  }
+
+  .blx-action-btn {
+    inset-inline-start: 1px;
+  }
+}
+
+.blx-block-dragging {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.blx-block-shift {
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.blx-drag-ghost {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+/* ── Horizontal Rule ─────────────────────────────────────────── */
+
+.blx-horizontal-rule {
+  padding: 16px 6px;
+  cursor: default;
+}
+
+.blx-hr {
+  border: none;
+  height: 1px;
+  background: var(--blx-hr);
+  margin: 0;
+}
+
+/* ── Blockquote ────────────────────────────────────────────── */
+
+/* Cancel default indent margin — blockquotes express depth via stacked borders */
+.blx-block:has(.blx-blockquote) {
+  margin-inline-start: 0 !important;
+}
+
+.blx-blockquote {
+  --bq-line: 2px;
+  --bq-gap: 12px;
+  --bq-step: calc(var(--bq-line) + var(--bq-gap));
+  --bq-full: calc(var(--bq-step) + 6px);
+  margin: 0;
+  padding: 0 0 0 var(--bq-step);
+  border-left: none;
+  color: var(--blx-text-muted);
+  background: linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat 0 0 / var(--bq-line) 100%;
+}
+
+.blx-blockquote p {
+  margin: 0;
+}
+
+/* Stacked left borders for nested blockquotes via indentLevel.
+   --bq-full = bq-step + 6px contenteditable padding, used as the
+   consistent spacing between all borders. */
+.blx-block[data-indent-level="1"] .blx-blockquote {
+  padding-left: calc(var(--bq-full) + var(--bq-step));
+  background:
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat 0 0 / var(--bq-line) 100%,
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat var(--bq-full) 0 / var(--bq-line) 100%;
+}
+
+.blx-block[data-indent-level="2"] .blx-blockquote {
+  padding-left: calc(var(--bq-full) * 2 + var(--bq-step));
+  background:
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat 0 0 / var(--bq-line) 100%,
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat var(--bq-full) 0 / var(--bq-line) 100%,
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat calc(var(--bq-full) * 2) 0 / var(--bq-line) 100%;
+}
+
+.blx-block[data-indent-level="3"] .blx-blockquote {
+  padding-left: calc(var(--bq-full) * 3 + var(--bq-step));
+  background:
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat 0 0 / var(--bq-line) 100%,
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat var(--bq-full) 0 / var(--bq-line) 100%,
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat calc(var(--bq-full) * 2) 0 / var(--bq-line) 100%,
+    linear-gradient(var(--blx-accent-muted), var(--blx-accent-muted)) no-repeat calc(var(--bq-full) * 3) 0 / var(--bq-line) 100%;
+}
+
+/* ── Block indentation / nesting ─────────────────────────────── */
+
+.blx-block.blx-indent-animated {
+  transition: margin-inline-start 0.15s ease;
+}
+
+/* ── Block selection (Shift+Arrow multi-block) ──────────────── */
+
+.blx-block-selected {
+  background-color: var(--blx-accent-bg);
+  border-radius: 0;
+}
+
+/* First in contiguous group — round top corners */
+.blx-block-selected:not(.blx-block-selected + .blx-block-selected) {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+/* Last in contiguous group — round bottom corners */
+.blx-block-selected:not(:has(+ .blx-block-selected)) {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.blx-block-selected [contenteditable] {
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Visual block mode uses a distinct teal highlight to differentiate from normal-mode selection */
+.blx-mode-visual-block .blx-block-selected {
+  background-color: var(--blx-visual-select-bg);
+}
+
+/* ── Focused non-text block (keyboard navigation) ────────────── */
+
+.blx-block-focused {
+  outline: 2px solid var(--blx-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+/* ── Selection highlighting ──────────────────────────────────── */
+
+.blx-block ::selection {
+  background-color: var(--blx-selection-bg);
+}
+
+/* ── Slash command menu ──────────────────────────────────────── */
+
+
+/* ── Emoji picker ────────────────────────────────────────────── */
+
+.blx-emoji-picker {
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  animation: blx-emoji-picker-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes blx-emoji-picker-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Category tabs ── */
+
+.blx-emoji-tabs {
+  display: flex;
+  gap: 1px;
+  padding: 2px 3px;
+  background: var(--blx-surface);
+  border: 1px solid var(--blx-border);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.blx-emoji-tab {
+  flex: 1;
+  padding: 4px 0;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  filter: grayscale(1);
+  opacity: 0.5;
+  transition: filter 0.12s ease, opacity 0.12s ease, background-color 0.12s ease;
+  outline: none;
+}
+
+.blx-emoji-tab:hover {
+  filter: grayscale(0.3);
+  opacity: 0.85;
+  background: var(--blx-hover-bg);
+}
+
+.blx-emoji-tab-active {
+  filter: grayscale(0);
+  opacity: 1;
+  background: var(--blx-selected-bg);
+}
+
+/* ── Emoji grid ── */
+
+.blx-emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 1px;
+  padding: 4px;
+  position: relative;
+  background: var(--blx-surface);
+  border: 1px solid var(--blx-border);
+  border-radius: 10px;
+  box-shadow: var(--blx-shadow);
+}
+
+.blx-emoji-grid-browse {
+  max-height: 192px;
+  overflow-y: auto;
+}
+
+.blx-emoji-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  padding: 0;
+  transition: background-color 0.08s ease, transform 0.08s ease;
+  outline: none;
+}
+
+.blx-emoji-cell:hover {
+  background: var(--blx-selected-bg);
+}
+
+.blx-emoji-cell-selected {
+  background: var(--blx-hover-bg);
+  transform: scale(1.12);
+}
+
+/* ── Tooltip ── */
+
+.blx-emoji-tooltip {
+  position: absolute;
+  bottom: -22px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: var(--blx-text-muted);
+  background: var(--blx-surface);
+  border: 1px solid var(--blx-border);
+  border-radius: 4px;
+  padding: 1px 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* ── Inline Toolbar ──────────────────────────────────────────── */
+
+.blx-inline-toolbar {
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+}
+
+.blx-inline-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--blx-text);
+  font-size: 0.8rem;
+  font-family: var(--blx-font-sans);
+  transition: background-color 0.1s ease, color 0.1s ease;
+  outline: none;
+}
+
+.blx-inline-toolbar-btn:hover {
+  background: var(--blx-hover-bg);
+}
+
+.blx-inline-toolbar-btn-active {
+  background: var(--blx-accent-bg);
+  color: var(--blx-accent);
+}
+
+.blx-inline-toolbar-btn-active:hover {
+  background: var(--blx-accent-bg-hover);
+}
+
+/* Button icon styles */
+.blx-inline-toolbar-icon-bold {
+  font-weight: 700;
+}
+
+.blx-inline-toolbar-icon-italic {
+  font-style: italic;
+  font-family: Georgia, "Times New Roman", serif;
+}
+
+.blx-inline-toolbar-icon-underline {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.blx-inline-toolbar-icon-strikethrough {
+  text-decoration: line-through;
+}
+
+.blx-inline-toolbar-icon-code {
+  font-family: var(--blx-font-mono);
+  font-size: 0.7rem;
+}
+
+/* Separator between built-in and plugin buttons */
+.blx-inline-toolbar-sep {
+  width: 1px;
+  height: 16px;
+  background: var(--blx-toolbar-sep);
+  margin: 0 2px;
+  flex-shrink: 0;
+}
+
+/* Mobile: larger tap targets (44px meets Apple HIG minimum) */
+@media (pointer: coarse) {
+  .blx-inline-toolbar {
+    gap: 1px;
+    padding: 2px;
+  }
+
+  .blx-inline-toolbar-btn {
+    width: 44px;
+    height: 44px;
+    font-size: 0.95rem;
+    border-radius: 7px;
+  }
+
+  .blx-inline-toolbar-icon-code {
+    font-size: 0.8rem;
+  }
+
+  .blx-inline-toolbar-sep {
+    height: 24px;
+    margin: 0 1px;
+  }
+}
+
+/* ── Inline Links ────────────────────────────────────────────── */
+
+.blx-link {
+  color: var(--blx-accent);
+  text-decoration: underline;
+  text-decoration-color: var(--blx-link-underline);
+  text-underline-offset: 2px;
+  cursor: text;
+  transition: text-decoration-color 0.15s ease;
+}
+
+.blx-link:hover {
+  text-decoration-color: var(--blx-accent);
+}
+
+/* ── Link Popover ────────────────────────────────────────────── */
+
+
+.blx-link-popover-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.blx-link-popover-input {
+  font-family: var(--blx-font-sans);
+  font-size: 0.8rem;
+  padding: 5px 8px;
+  border: 1px solid var(--blx-border-input);
+  border-radius: 5px;
+  outline: none;
+  min-width: 220px;
+  color: var(--blx-text);
+  background: var(--blx-surface);
+  transition: border-color 0.15s ease;
+}
+
+.blx-link-popover-input:focus {
+  border-color: var(--blx-accent);
+}
+
+.blx-link-popover-btn {
+  font-family: var(--blx-font-sans);
+  font-size: 0.75rem;
+  padding: 5px 10px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.1s ease;
+}
+
+.blx-link-popover-apply {
+  background: var(--blx-accent);
+  color: #fff;
+}
+
+.blx-link-popover-apply:hover {
+  background: var(--blx-accent-hover);
+}
+
+.blx-link-popover-remove {
+  background: var(--blx-btn-secondary-bg);
+  color: var(--blx-btn-secondary-text);
+}
+
+.blx-link-popover-remove:hover {
+  background: var(--blx-btn-secondary-bg-hover);
+}
+
+/* ── Empty block placeholder ─────────────────────────────────── */
+
+.blx-empty[data-placeholder]:focus::before {
+  content: attr(data-placeholder);
+  color: var(--blx-placeholder-color);
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+
+/* RTL override: float: inline-start is Firefox-only; use explicit direction override */
+[dir="rtl"] .blx-empty[data-placeholder]:focus::before,
+.blx-empty[dir="rtl"][data-placeholder]:focus::before {
+  float: right;
+}
+
+/* ── Keybindings Panel ───────────────────────────────────────── */
+
+.kb-panel-toggle {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 200;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+.kb-panel-toggle:hover {
+  background: #f0f0ee;
+  color: #404550;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+}
+
+.kb-panel-toggle-active {
+  background: #4285f4;
+  color: #fff;
+  border-color: transparent;
+}
+
+.kb-panel-toggle-active:hover {
+  background: #3370d4;
+  color: #fff;
+}
+
+/* Dark theme */
+.kb-panel-toggle[data-theme="dark"] {
+  background: #252530;
+  color: #9da3b0;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.kb-panel-toggle[data-theme="dark"]:hover {
+  background: #303040;
+  color: #d0d4dc;
+}
+
+.kb-panel-toggle[data-theme="dark"].kb-panel-toggle-active {
+  background: #6ea8fe;
+  color: #1a1a22;
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel-toggle:not([data-theme="light"]) {
+    background: #252530;
+    color: #9da3b0;
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .kb-panel-toggle:not([data-theme="light"]):hover {
+    background: #303040;
+    color: #d0d4dc;
+  }
+
+  .kb-panel-toggle:not([data-theme="light"]).kb-panel-toggle-active {
+    background: #6ea8fe;
+    color: #1a1a22;
+  }
+}
+
+/* Overlay */
+.kb-panel-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 210;
+  background: rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
+.kb-panel-overlay-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel-overlay {
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* Panel */
+.kb-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 220;
+  width: 380px;
+  max-width: 90vw;
+  background: #ffffff;
+  border-inline-start: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06);
+  transform: translateX(100%);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex;
+  flex-direction: column;
+  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: #404550;
+}
+
+.kb-panel-open {
+  transform: translateX(0);
+}
+
+/* Dark theme */
+.kb-panel[data-theme="dark"] {
+  background: #1e1e28;
+  border-color: rgba(255, 255, 255, 0.06);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
+  color: #d0d4dc;
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel:not([data-theme="light"]) {
+    background: #1e1e28;
+    border-color: rgba(255, 255, 255, 0.06);
+    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
+    color: #d0d4dc;
+  }
+}
+
+.kb-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  flex-shrink: 0;
+}
+
+.kb-panel[data-theme="dark"] .kb-panel-header {
+  border-color: rgba(255, 255, 255, 0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel:not([data-theme="light"]) .kb-panel-header {
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+}
+
+.kb-panel-title {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+
+.kb-panel-close {
+  background: none;
+  border: none;
+  font-size: 1.3rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.4;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: opacity 0.12s ease, background-color 0.12s ease;
+  line-height: 1;
+}
+
+.kb-panel-close:hover {
+  opacity: 0.8;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.kb-panel[data-theme="dark"] .kb-panel-close:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel:not([data-theme="light"]) .kb-panel-close:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+}
+
+.kb-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 24px 32px;
+}
+
+.kb-section-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #8a8f9a;
+  margin: 20px 0 8px;
+}
+
+.kb-panel[data-theme="dark"] .kb-section-title {
+  color: #6b7080;
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel:not([data-theme="light"]) .kb-section-title {
+    color: #6b7080;
+  }
+}
+
+.kb-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.kb-table tr {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.kb-panel[data-theme="dark"] .kb-table tr {
+  border-color: rgba(255, 255, 255, 0.04);
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel:not([data-theme="light"]) .kb-table tr {
+    border-color: rgba(255, 255, 255, 0.04);
+  }
+}
+
+.kb-table tr:last-child {
+  border-bottom: none;
+}
+
+.kb-key-cell {
+  padding: 6px 12px 6px 0;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.kb-action-cell {
+  padding: 6px 0;
+  font-size: 0.8rem;
+  color: #666;
+}
+
+.kb-panel[data-theme="dark"] .kb-action-cell {
+  color: #9da3b0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel:not([data-theme="light"]) .kb-action-cell {
+    color: #9da3b0;
+  }
+}
+
+.kb-panel kbd {
+  display: inline-block;
+  font-family: "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
+  font-size: 0.7rem;
+  line-height: 1;
+  padding: 3px 6px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  color: #404550;
+  min-width: 20px;
+  text-align: center;
+}
+
+.kb-panel[data-theme="dark"] kbd {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: #d0d4dc;
+}
+
+@media (prefers-color-scheme: dark) {
+  .kb-panel:not([data-theme="light"]) kbd {
+    background: rgba(255, 255, 255, 0.07);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #d0d4dc;
+  }
+}
+
+
+/* Mobile: full-width panel */
+@media (max-width: 480px) {
+  .kb-panel {
+    width: 100vw;
+    max-width: 100vw;
+  }
+}
+
+/* ── YouTube Block ─────────────────────────────────────────────── */
+
+.blx-youtube {
+  margin: 8px 0;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.blx-youtube-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 20px;
+  border: 1.5px dashed var(--blx-border-input);
+  border-radius: 10px;
+  background: var(--blx-selected-bg);
+  transition: border-color 0.15s ease;
+}
+
+.blx-youtube-placeholder:hover {
+  border-color: var(--blx-accent);
+}
+
+.blx-youtube-icon {
+  font-size: 1.4rem;
+  color: var(--blx-text-faint);
+  flex-shrink: 0;
+}
+
+.blx-youtube-input {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--blx-border-input);
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 0.85rem;
+  font-family: var(--blx-font-sans);
+  color: var(--blx-text);
+  background: var(--blx-surface);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.blx-youtube-input:focus {
+  border-color: var(--blx-accent);
+}
+
+.blx-youtube-input-error {
+  border-color: var(--blx-danger) !important;
+  animation: blx-shake 0.3s ease;
+}
+
+@keyframes blx-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+
+.blx-youtube-aspect {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 */
+  background: #000;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.blx-youtube-aspect iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/* ── Image Block ───────────────────────────────────────────────── */
+
+.blx-image {
+  margin: 8px 0;
+}
+
+.blx-image-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 28px 20px;
+  border: 1.5px dashed var(--blx-border-input);
+  border-radius: 10px;
+  background: var(--blx-selected-bg);
+  transition: border-color 0.15s ease;
+  cursor: default;
+}
+
+.blx-image-placeholder:hover {
+  border-color: var(--blx-accent);
+}
+
+.blx-image-icon {
+  color: var(--blx-placeholder-color);
+  line-height: 0;
+}
+
+.blx-image-placeholder-label {
+  font-size: 0.85rem;
+  color: var(--blx-text-muted);
+}
+
+.blx-image-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.blx-image-upload-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px;
+  border: none;
+  border-radius: 6px;
+  background: var(--blx-accent);
+  color: #fff;
+  font-size: 0.8rem;
+  font-family: var(--blx-font-sans);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.blx-image-upload-btn:hover {
+  background: var(--blx-accent-hover);
+}
+
+.blx-image-url-input {
+  min-width: 180px;
+  border: 1px solid var(--blx-border-input);
+  border-radius: 6px;
+  padding: 5px 10px;
+  font-size: 0.8rem;
+  font-family: var(--blx-font-sans);
+  color: var(--blx-text);
+  background: var(--blx-surface);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.blx-image-url-input:focus {
+  border-color: var(--blx-accent);
+}
+
+.blx-image-figure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.blx-image-container {
+  position: relative;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.blx-image-img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.blx-image-resize-handle {
+  position: absolute;
+  right: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: ew-resize;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.blx-image-resize-handle::after {
+  content: "";
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 32px;
+  border-radius: 2px;
+  background: var(--blx-accent);
+}
+
+.blx-image-container:hover .blx-image-resize-handle {
+  opacity: 1;
+}
+
+.blx-image-caption {
+  margin-top: 6px;
+  font-size: 0.8rem;
+  color: var(--blx-text-muted);
+  text-align: center;
+  min-height: 1.4em;
+  outline: none;
+  max-width: 100%;
+}
+
+.blx-image-caption:empty::before {
+  content: attr(data-placeholder);
+  color: var(--blx-placeholder-color);
+  pointer-events: none;
+}
+
+/* Placeholder highlighted when image is dragged over it */
+.blx-image-placeholder-dragover {
+  border-color: var(--blx-accent) !important;
+  background: var(--blx-accent-bg) !important;
+}
+
+/* Drop zone shown between blocks when dragging an image file from OS */
+.blx-image-drop-zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  border: 1.5px dashed var(--blx-accent);
+  border-radius: 10px;
+  background: var(--blx-accent-bg);
+  color: var(--blx-accent);
+  font-size: 0.85rem;
+  font-family: var(--blx-font-sans);
+  pointer-events: none;
+  animation: blx-drop-zone-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes blx-drop-zone-pulse {
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 1; }
+}
+
+/* Full-editor overlay when dragging unsupported files */
+.blx-drop-reject-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  pointer-events: none;
+
+  /* Blur content so text reads clearly without needing shadows */
+  background: transparent;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+
+  /* Pill message anchored center-left */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: max(var(--blx-gutter, 64px), 24px);
+
+  animation: blx-reject-fade-in 0.15s ease-out both;
+}
+
+@keyframes blx-reject-fade-in {
+  from { opacity: 0; backdrop-filter: blur(0); }
+  to   { opacity: 1; backdrop-filter: blur(6px); }
+}
+
+
+/* Message text */
+.blx-drop-reject-msg {
+  font-family: var(--blx-font-sans);
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--blx-text, #404550);
+  white-space: nowrap;
+}
+
+
+/* Animated chevron nudging leftward */
+.blx-drop-reject-nudge {
+  display: inline-flex;
+  align-items: center;
+  color: var(--blx-text-muted);
+  margin-right: 4px;
+  animation: blx-nudge-left 1s cubic-bezier(0.37, 0, 0.63, 1) infinite;
+}
+
+@keyframes blx-nudge-left {
+  0%, 100% { transform: translateX(0); opacity: 0.5; }
+  50%      { transform: translateX(-6px); opacity: 1; }
+}
+
+/* ── Replay Bar ───────────────────────────────────────────────── */
+
+.blx-replay-mode [contenteditable] {
+  cursor: default;
+}
+
+.blx-replay-bar {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 150;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--blx-surface);
+  border-top: 1px solid var(--blx-border-input);
+  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
+  animation: blx-replay-bar-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes blx-replay-bar-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.blx-replay-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.blx-replay-title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--blx-text-muted);
+  margin-inline-end: 4px;
+  user-select: none;
+}
+
+.blx-replay-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--blx-text-muted);
+  transition: background-color 0.1s ease, color 0.1s ease;
+}
+
+.blx-replay-btn:hover:not(:disabled) {
+  background: var(--blx-hover-bg);
+  color: var(--blx-text);
+}
+
+.blx-replay-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.blx-replay-play-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--blx-accent-bg);
+  color: var(--blx-accent);
+}
+
+.blx-replay-play-btn:hover:not(:disabled) {
+  background: var(--blx-accent);
+  color: #fff;
+}
+
+.blx-replay-exit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--blx-text-faint);
+  margin-inline-end: 2px;
+  transition: background-color 0.1s ease, color 0.1s ease;
+}
+
+.blx-replay-exit-btn:hover {
+  background: var(--blx-hover-bg);
+  color: var(--blx-text);
+}
+
+.blx-replay-slider-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.blx-replay-slider {
+  flex: 1;
+  min-width: 0;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--blx-border-input);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.blx-replay-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--blx-accent);
+  border: 2px solid var(--blx-surface);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  cursor: grab;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.blx-replay-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.blx-replay-slider::-webkit-slider-thumb:active {
+  cursor: grabbing;
+  transform: scale(1.1);
+}
+
+.blx-replay-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--blx-accent);
+  border: 2px solid var(--blx-surface);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  cursor: grab;
+}
+
+.blx-replay-pos {
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--blx-text-muted);
+  white-space: nowrap;
+  min-width: 60px;
+  text-align: right;
+  user-select: none;
+}
+
+/* Mobile: bigger touch targets */
+@media (pointer: coarse) {
+  .blx-replay-btn {
+    width: 40px;
+    height: 40px;
+  }
+
+  .blx-replay-play-btn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .blx-replay-exit-btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .blx-replay-slider {
+    height: 6px;
+  }
+
+  .blx-replay-slider::-webkit-slider-thumb {
+    width: 20px;
+    height: 20px;
+  }
+
+  .blx-replay-slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+/* ── Remote Cursors (Multiplayer — Overlay) ──────────────────── */
+
+/* Overlay container: sits on top of the editor, pointer-transparent */
+.blx-remote-cursor-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+  overflow: visible;
+}
+
+/* Caret line — absolutely positioned thin bar (steady when idle) */
+.blx-remote-cursor {
+  position: absolute;
+  width: 0;
+  border-inline-start: 2px solid var(--blx-remote-cursor-color, currentColor);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Active cursor: blink animation + label visible */
+.blx-remote-cursor--active {
+  animation: blx-remote-cursor-blink 1.1s step-end infinite;
+}
+
+@keyframes blx-remote-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* Safety net: hide label on idle cursors (renderer already omits it) */
+.blx-remote-cursor:not(.blx-remote-cursor--active) .blx-remote-cursor-label {
+  display: none;
+}
+
+/* Name label floats above the caret */
+.blx-remote-cursor-label {
+  position: absolute;
+  bottom: 100%;
+  inset-inline-start: -1px;
+  font-size: 0.6rem;
+  font-weight: 600;
+  font-family: var(--blx-font-sans);
+  letter-spacing: 0.02em;
+  line-height: 1;
+  padding: 2px 5px;
+  border-radius: 3px 3px 3px 0;
+  color: #fff;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.9;
+  z-index: 10;
+  animation: blx-remote-label-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes blx-remote-label-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 0.9;
+    transform: translateY(0);
+  }
+}
+
+/* Selection highlight — semi-transparent rectangle per line fragment.
+   getClientRects() returns tight glyph rects — pad vertically to match
+   the native browser selection feel. */
+.blx-remote-cursor-selection {
+  position: absolute;
+  opacity: 0.18;
+  pointer-events: none;
+  user-select: none;
+  border-radius: 2px;
+  margin-top: -2px;
+  padding-bottom: 4px;
+}
+
+/* Block selection border — left bar indicator for multi-block selections */
+.blx-remote-block-border {
+  position: absolute;
+  width: 3px;
+  border-radius: 1.5px;
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.6;
+}
+
+/* During replay, don't blink — just show steady cursors */
+.blx-replay-mode .blx-remote-cursor {
+  animation: none;
+  opacity: 1;
+}
+
+/* ── Replay Toggle Button ──────────────────────────────────────── */
+
+.blx-replay-toggle-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--blx-border-input);
+  background: var(--blx-surface);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  color: var(--blx-text-muted);
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+.blx-replay-toggle-btn:hover {
+  background: var(--blx-accent-bg);
+  color: var(--blx-accent);
+  border-color: var(--blx-accent);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  transform: scale(1.05);
+}
+
+.blx-replay-mode .blx-replay-toggle-btn {
+  display: none;
+}
+
+/* ── Search Panel ──────────────────────────────────────────────── */
+
+.blx-search-panel {
+  position: fixed;
+  top: 8px;
+  right: 8px;
+  z-index: 200;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 6px 8px;
+  background: var(--blx-surface);
+  border: 1px solid var(--blx-border);
+  border-radius: 10px;
+  box-shadow: var(--blx-shadow);
+  animation: blx-search-panel-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes blx-search-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Expand/collapse chevron */
+.blx-search-expand-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 28px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--blx-text-faint);
+  cursor: pointer;
+  transition: color 0.1s ease, transform 0.15s ease;
+  padding: 0;
+}
+
+.blx-search-expand-btn svg {
+  transform: rotate(-90deg);
+  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.blx-search-expand-btn:hover {
+  color: var(--blx-text);
+}
+
+.blx-search-expand-btn-active svg {
+  transform: rotate(0deg);
+}
+
+/* Body: stacks search + replace rows */
+.blx-search-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.blx-search-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.blx-search-input-wrap {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--blx-border-input);
+  border-radius: 6px;
+  background: var(--blx-surface);
+  padding: 0 4px 0 0;
+  transition: border-color 0.15s ease;
+}
+
+.blx-search-input-wrap:focus-within {
+  border-color: var(--blx-accent);
+}
+
+.blx-search-input {
+  min-width: 180px;
+  border: none;
+  padding: 5px 8px;
+  font-size: 0.8rem;
+  font-family: var(--blx-font-sans);
+  color: var(--blx-text);
+  background: transparent;
+  outline: none;
+}
+
+.blx-search-option-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--blx-text-faint);
+  font-size: 0.7rem;
+  font-family: var(--blx-font-mono);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.1s ease, color 0.1s ease;
+}
+
+.blx-search-option-btn:hover {
+  background: var(--blx-hover-bg);
+  color: var(--blx-text);
+}
+
+.blx-search-option-btn-active {
+  background: var(--blx-accent-bg);
+  color: var(--blx-accent);
+}
+
+.blx-search-count {
+  font-size: 0.75rem;
+  color: var(--blx-text-muted);
+  white-space: nowrap;
+  min-width: 60px;
+  text-align: center;
+}
+
+.blx-search-nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--blx-text-muted);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.blx-search-nav-btn:hover {
+  background: var(--blx-hover-bg);
+  color: var(--blx-text);
+}
+
+.blx-search-close-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--blx-text-muted);
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.blx-search-close-btn:hover {
+  background: var(--blx-hover-bg);
+  color: var(--blx-text);
+}
+
+/* Replace row: hidden by default, shown via JS class toggle */
+.blx-search-replace-row {
+  display: none;
+  align-items: center;
+  gap: 6px;
+}
+
+.blx-search-replace-row-visible {
+  display: flex;
+}
+
+.blx-search-replace-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  padding: 5px 8px;
+  font-size: 0.8rem;
+  font-family: var(--blx-font-sans);
+  color: var(--blx-text);
+  background: transparent;
+  outline: none;
+}
+
+.blx-search-replace-btn {
+  padding: 4px 10px;
+  border: 1px solid var(--blx-border-input);
+  border-radius: 5px;
+  background: var(--blx-surface);
+  color: var(--blx-text);
+  font-size: 0.75rem;
+  font-family: var(--blx-font-sans);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.1s ease, border-color 0.1s ease;
+}
+
+.blx-search-replace-btn:hover {
+  background: var(--blx-hover-bg);
+  border-color: var(--blx-accent);
+}
+
+/* Search match highlights */
+mark.blx-search-match {
+  background-color: var(--blx-search-match-bg, rgba(255, 200, 0, 0.3));
+  color: inherit;
+  border-radius: 2px;
+  padding: 0;
+}
+
+mark.blx-search-highlight {
+  background-color: var(--blx-search-highlight-bg, rgba(255, 160, 0, 0.6));
+  color: inherit;
+  border-radius: 2px;
+  outline: 2px solid var(--blx-accent);
+  outline-offset: 1px;
+  padding: 0;
+}
+
+/* Mobile: touch targets */
+@media (pointer: coarse) {
+  .blx-search-nav-btn,
+  .blx-search-close-btn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .blx-search-option-btn {
+    width: 36px;
+    height: 36px;
+  }
+}
+
+/* ── Table of Contents ──────────────────────────────────────── */
+
+.blx-toc {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  /* 40px left padding creates invisible hover zone so user doesn't need to
+     precisely target the thin minimap lines to trigger the TOC */
+  padding-left: 40px;
+  pointer-events: auto;
+  z-index: 50;
+}
+
+.blx-toc-empty {
+  display: none;
+}
+
+/* ── Sticky track — vertically centered, right-aligned ── */
+
+.blx-toc-track {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 12px 8px 12px 0;
+  max-height: 70vh;
+  overflow: visible;
+}
+
+/* ── ToC Entry (button) ── */
+
+.blx-toc-entry {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0;
+  width: auto;
+  border: none;
+  background: none;
+  /* vertical padding is set dynamically by JS for uniform spacing */
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+  flex-shrink: 0;
+  /* Allow label to expand leftward on hover */
+  white-space: nowrap;
+  /* Ensure generous hit area centered around the line */
+  min-height: 14px;
+}
+
+/* Invisible hit-target extension — makes thin lines easier to click */
+.blx-toc-entry::after {
+  content: "";
+  position: absolute;
+  inset: -6px -8px;
+}
+
+.blx-toc-entry:focus-visible {
+  outline: 2px solid var(--blx-accent);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+
+/* ── ToC Line (minimap bar) ── */
+
+.blx-toc-line {
+  flex-shrink: 0;
+  display: block;
+  border-radius: 99px;
+  background: var(--blx-text-faint);
+  /* width, height, opacity set by JS magnification */
+  width: 16px;
+  height: 2.5px;
+  opacity: 0.45;
+  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              height 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 0.2s ease,
+              background-color 0.2s ease;
+}
+
+/* Active heading — accent color line */
+.blx-toc-entry-active .blx-toc-line {
+  background: var(--blx-accent);
+}
+
+/* ── ToC Label (heading title — hidden until individual entry hover) ── */
+
+.blx-toc-label {
+  position: absolute;
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+  max-width: 0;
+  overflow: hidden;
+  font-size: 0.7rem;
+  font-family: var(--blx-font-sans);
+  font-weight: 450;
+  color: var(--blx-text-muted);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: end;
+  opacity: 0;
+  padding-inline-end: 0;
+  pointer-events: none;
+  border-radius: 4px;
+  /* background set dynamically by JS based on browse factor (Gaussian distance to cursor) */
+  transition: max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 0.2s ease,
+              padding-inline-end 0.2s ease,
+              background 0.15s ease;
+}
+
+/* Reveal label on the entry nearest to cursor (driven by JS, matches click target) */
+.blx-toc-entry-browsed .blx-toc-label {
+  max-width: 180px;
+  opacity: 1;
+  padding: 2px 8px 2px 6px;
+  background: var(--blx-surface, #ffffff);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.blx-toc-entry-active .blx-toc-label {
+  color: var(--blx-accent);
+  font-weight: 550;
+}
+
+/* ── ToC Emoji — sits between label and line ── */
+
+.blx-toc-emoji {
+  flex-shrink: 0;
+  font-size: 0;
+  line-height: 1;
+  filter: grayscale(1);
+  opacity: 0;
+  margin-inline-end: 0;
+  transition: font-size 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 0.2s ease,
+              filter 0.2s ease,
+              margin-inline-end 0.2s ease;
+}
+
+/* When TOC is hovered, show emoji faintly */
+.blx-toc-hovered .blx-toc-emoji {
+  font-size: 0.6rem;
+  opacity: 0.25;
+  margin-inline-end: 3px;
+}
+
+/* Hide emoji on browsed entry (label is visible instead) */
+.blx-toc-entry-browsed .blx-toc-emoji {
+  font-size: 0;
+  opacity: 0;
+  margin-inline-end: 0;
+}
+
+/* ── ToC navigation pulse — confirms which heading was jumped to ── */
+
+@keyframes blx-toc-pulse {
+  0%   { background-color: transparent; }
+  15%  { background-color: var(--blx-accent-faint, rgba(59, 130, 246, 0.1)); }
+  100% { background-color: transparent; }
+}
+
+.blx-toc-pulse {
+  animation: blx-toc-pulse 1.2s ease-out;
+  border-radius: 4px;
+}
+
+/* ── Responsive: hide on small screens and touch devices ── */
+
+@media (max-width: 900px) {
+  .blx-toc {
+    display: none;
+  }
+}
+
+@media (pointer: coarse) {
+  .blx-toc {
+    display: none;
+  }
+}
+
+/* ── Table ─────────────────────────────────────────────────── */
+
+.blx-table-wrapper {
+  position: relative;
+  margin: 8px 0;
+  outline: none;
+}
+
+.blx-table-inner {
+  overflow: visible;
+  position: relative;
+}
+
+.blx-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--blx-border-input);
+  font-size: var(--blx-font-base-size);
+  line-height: var(--blx-lh-body);
+  table-layout: fixed;
+}
+
+.blx-table-row {
+  border-bottom: 1px solid var(--blx-border-input);
+}
+
+.blx-table-row:last-child {
+  border-bottom: none;
+}
+
+.blx-table-cell {
+  border: 1px solid var(--blx-border-input);
+  border-radius: 0;
+  padding: 6px 10px;
+  min-width: 60px;
+  min-height: 1.5em;
+  vertical-align: top;
+  outline: none;
+  word-wrap: break-word;
+}
+
+.blx-table-row:first-child .blx-table-cell {
+  font-weight: 600;
+  background: var(--blx-hover-bg);
+}
+
+.blx-table-cell:focus {
+  outline: 2px solid var(--blx-accent);
+  outline-offset: -2px;
+  border-radius: 0;
+  z-index: 2;
+  position: relative;
+}
+
+/* ── Table selection overlay ──────────────────────────────── */
+
+.blx-table-selection-overlay {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid var(--blx-accent);
+  background: var(--blx-selection-bg);
+  pointer-events: none;
+  z-index: 1;
+  display: none;
+}
+
+/* ── Table focus handles (edge/corner drag targets) ───────── */
+
+.blx-table-focus-handle {
+  position: absolute;
+  pointer-events: auto;
+  z-index: 3;
+  background: transparent;
+}
+
+.blx-table-focus-handle-top,
+.blx-table-focus-handle-bottom {
+  cursor: ns-resize;
+}
+
+.blx-table-focus-handle-left,
+.blx-table-focus-handle-right {
+  cursor: ew-resize;
+}
+
+.blx-table-focus-handle-top-left,
+.blx-table-focus-handle-bottom-right {
+  cursor: nwse-resize;
+}
+
+.blx-table-focus-handle-top-right,
+.blx-table-focus-handle-bottom-left {
+  cursor: nesw-resize;
+}
+
+/* ── Table row / column pill widgets ──────────────────────── */
+
+.blx-table-row-widget,
+.blx-table-col-widget,
+.blx-table-add-row-widget,
+.blx-table-add-col-widget {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5px;
+  border: none;
+  border-radius: 3px;
+  background: var(--blx-accent);
+  cursor: pointer;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+  z-index: 4;
+}
+
+.blx-table-widget-dot {
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: #fff;
+  flex-shrink: 0;
+}
+
+.blx-table-row-widget.blx-table-widget-visible,
+.blx-table-col-widget.blx-table-widget-visible,
+.blx-table-row-widget.blx-table-widget-active,
+.blx-table-col-widget.blx-table-widget-active,
+.blx-table-add-row-widget.blx-table-widget-visible,
+.blx-table-add-col-widget.blx-table-widget-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.blx-table-row-widget:hover,
+.blx-table-col-widget:hover,
+.blx-table-add-row-widget:hover,
+.blx-table-add-col-widget:hover {
+  background: var(--blx-accent-hover);
+}
+
+/* Row widget: vertical dots, centered on the table's left border */
+.blx-table-row-widget {
+  left: 0;
+  width: 10px;
+  height: 14px;
+  flex-direction: column;
+  transform: translate(-50%, -50%);
+}
+
+/* Column widget: horizontal dots, centered on the table's top border */
+.blx-table-col-widget {
+  top: 0;
+  width: 14px;
+  height: 10px;
+  flex-direction: row;
+  transform: translate(-50%, -50%);
+}
+
+/* Add-row widget: + centered on the table's bottom border */
+.blx-table-add-row-widget {
+  bottom: 0;
+  left: 50%;
+  width: 14px;
+  height: 10px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1;
+  transform: translate(-50%, 50%);
+}
+
+/* Add-col widget: + centered on the table's right border */
+.blx-table-add-col-widget {
+  right: 0;
+  top: 50%;
+  width: 10px;
+  height: 14px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1;
+  transform: translate(50%, -50%);
+}
+
+/* ── Table column resize handles ────────────────────────── */
+
+.blx-table-col-resize {
+  position: absolute;
+  cursor: col-resize;
+  z-index: 4;
+  background: transparent;
+}
+
+.blx-table-col-resize:hover {
+  background: var(--blx-accent);
+  opacity: 0.3;
+}
+
+/* ── Table context menu ──────────────────────────────────── */
+
+.blx-table-context-menu {
+  min-width: 160px;
+}
+
+/* ── Reduced motion ──────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .blx-menu,
+  .blx-popover,
+  .blx-tooltip,
+  .blx-toast,
+  .blx-modal,
+  .blx-dropdown-menu {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .blx-caret {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* ── Fold visibility ────────────────────────────────────────────── */
+
+/* Blocks hidden by a heading fold. Uses a class instead of inline
+   style.display so it doesn't interfere with plugin-set inline
+   display values (e.g. display:flex for agenda badges). */
+.blx-fold-hidden {
+  display: none !important;
+}
+
+/* ── Heading fold indicator ─────────────────────────────────────── */
+
+/* Clickable bar below folded headings: ▸ icon + dashed line.
+   Hidden by default, shown when block has .blx-heading-folded. */
+.blx-fold-indicator {
+  display: none;
+  align-items: center;
+  gap: 6px;
+  margin: 4px 6px 0;
+  padding: 2px 0;
+  cursor: pointer;
+  color: var(--blx-text-faint);
+  opacity: 0.3;
+  transition: opacity 0.15s ease;
+  user-select: none;
+}
+
+.blx-fold-indicator::before {
+  content: "▸";
+  flex-shrink: 0;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.blx-fold-indicator::after {
+  content: "";
+  flex: 1;
+  height: 0;
+  border-bottom: 1.5px dashed currentColor;
+}
+
+.blx-heading-folded > .blx-fold-indicator {
+  display: flex;
+}
+
+.blx-fold-indicator:hover {
+  opacity: 0.6;
+}
+
+/* ── Fold animation ────────────────────────────────────────────── */
+
+/* Blocks appearing after an unfold — subtle slide-in */
+.blx-fold-revealed {
+  animation: blx-fold-reveal 0.2s var(--blx-widget-anim-curve) both;
+}
+
+@keyframes blx-fold-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ── Custom Caret ─────────────────────────────────────────── */
+
+@keyframes blx-caret-blink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0; }
+}
+
+
+.blx-caret {
+  position: fixed;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--blx-caret-color, var(--blx-accent));
+  pointer-events: none;
+  transform-origin: bottom center;
+  z-index: var(--blx-caret-z-index, 20);
+
+  /* Smooth motion for nearby moves */
+  transition:
+    top    0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    left   0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    height 0.08s ease,
+    opacity 0.05s ease;
+
+  /* Blink (default state) */
+  animation: blx-caret-blink 1.1s ease-in-out infinite;
+}
+
+/* While user is actively typing/moving — blink paused, caret solid, no slide */
+.blx-caret--active {
+  animation: none;
+  opacity: 1;
+  transition: none;
+}
+
+/* Snap: disable transition for this frame */
+.blx-caret--no-transition {
+  transition: none;
+}
+
+/* Motion trail for cross-block jumps — caret slides from old to new position */
+.blx-caret--trailing {
+  transition:
+    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
+    opacity   0.15s cubic-bezier(0.16, 1, 0.3, 1),
+    mask-image 0.15s cubic-bezier(0.16, 1, 0.3, 1),
+    -webkit-mask-image 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: none;
+}
+
+/* Hidden state — !important needed to beat CSS animation cascade */
+.blx-caret--hidden {
+  opacity: 0 !important;
+  animation: none !important;
+  transition: none !important;
+}
+
+/* ── Mermaid Diagram Block ─────────────────────────────────────── */
+
+.blx-mermaid {
+  border-radius: 10px;
+  margin: 10px;
+}
+
+/* Code area — hidden when not editing */
+.blx-mermaid:not(.blx-mermaid--editing) .blx-mermaid-code {
+  display: none;
+}
+
+.blx-mermaid-code {
+  background: #1e1e2e;
+  border-radius: 10px 10px 0 0;
+  position: relative;
+}
+
+.blx-mermaid-label {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  z-index: 2;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.75rem;
+  font-family: var(--blx-font-sans);
+  font-weight: 500;
+  padding: 3px 8px;
+  user-select: none;
+}
+
+.blx-mermaid-pre {
+  margin: 0;
+  padding: 0;
+}
+
+.blx-mermaid-content {
+  display: block;
+  font-family: var(--blx-font-mono);
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: #cdd6f4;
+  white-space: pre;
+  padding: 16px 18px;
+  overflow-x: auto;
+  min-height: 1.6em;
+  tab-size: 2;
+}
+
+.blx-mermaid [contenteditable="true"] {
+  padding: 16px 18px;
+  border-radius: 0;
+  transition: none;
+}
+
+.blx-mermaid [contenteditable="true"]:focus,
+.blx-mermaid-content:focus {
+  background-color: transparent;
+  box-shadow: none;
+  outline: none;
+}
+
+/* Empty mermaid placeholder */
+.blx-mermaid-content:empty::before {
+  content: "Type mermaid diagram syntax…";
+  color: #585b70;
+  pointer-events: none;
+}
+
+/* Preview area */
+.blx-mermaid-preview {
+  min-height: 60px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid var(--blx-border-input);
+  border-radius: 10px;
+  background: var(--blx-surface);
+  transition: border-color 0.15s ease;
+}
+
+.blx-mermaid--editing .blx-mermaid-preview {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: none;
+}
+
+.blx-mermaid:not(.blx-mermaid--editing) .blx-mermaid-preview {
+  cursor: pointer;
+}
+
+.blx-mermaid:not(.blx-mermaid--editing) .blx-mermaid-preview:hover {
+  border-color: var(--blx-accent);
+}
+
+.blx-mermaid-diagram {
+  width: 100%;
+  max-height: 600px;
+  overflow: auto;
+}
+
+.blx-mermaid-preview svg,
+.blx-mermaid-diagram svg {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.blx-mermaid-preview.blx-mermaid-empty {
+  padding: 2rem;
+  color: var(--blx-placeholder-color);
+  font-size: 0.85rem;
+}
+
+.blx-mermaid-preview.blx-mermaid-empty::before {
+  content: "Mermaid diagram preview";
+}
+
+.blx-mermaid-error {
+  color: var(--blx-danger, #e64553);
+  font-size: 0.8rem;
+  font-family: var(--blx-font-mono);
+  max-height: 3em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.blx-mermaid-error:empty {
+  display: none;
+}
+
+.blx-mermaid-diagram:empty + .blx-mermaid-error:empty {
+  display: none;
+}
+
+/* ── Excalidraw Block ──────────────────────────────────────────── */
+
+.blx-excalidraw {
+  margin: 10px;
+}
+
+.blx-excalidraw-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 32px 24px;
+  border: 1.5px dashed var(--blx-border-input);
+  border-radius: 10px;
+  background: var(--blx-selected-bg);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+  cursor: pointer;
+}
+
+.blx-excalidraw-placeholder:hover {
+  border-color: var(--blx-accent);
+  background: var(--blx-accent-bg);
+}
+
+.blx-excalidraw-icon {
+  color: var(--blx-text-faint);
+  line-height: 0;
+}
+
+.blx-excalidraw-placeholder:hover .blx-excalidraw-icon {
+  color: var(--blx-accent);
+}
+
+.blx-excalidraw-placeholder-label {
+  font-size: 0.8rem;
+  font-family: var(--blx-font-sans);
+  color: var(--blx-text-muted);
+  letter-spacing: -0.01em;
+}
+
+.blx-excalidraw-create-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 16px;
+  border: none;
+  border-radius: 8px;
+  background: var(--blx-accent);
+  color: #fff;
+  font-size: 0.8rem;
+  font-family: var(--blx-font-sans);
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: opacity 0.12s ease;
+}
+
+.blx-excalidraw-create-btn:hover {
+  opacity: 0.9;
+}
+
+/* Excalidraw figure with preview */
+.blx-excalidraw-figure {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.blx-excalidraw-preview {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid var(--blx-border-input);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--blx-surface);
+  min-height: 100px;
+}
+
+.blx-excalidraw-preview svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.blx-excalidraw-no-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 2rem;
+  color: var(--blx-placeholder-color);
+  font-size: 0.85rem;
+}
+
+/* Edit overlay on hover */
+.blx-excalidraw-edit-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.blx-excalidraw-figure:hover .blx-excalidraw-edit-overlay {
+  opacity: 1;
+}
+
+.blx-excalidraw-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 6px;
+  background: var(--blx-accent);
+  color: #fff;
+  font-size: 0.8rem;
+  font-family: var(--blx-font-sans);
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.blx-excalidraw-edit-btn:hover {
+  background: var(--blx-accent-hover);
+}
+
+/* ── Excalidraw Modal ──────────────────────────────────────────── */
+
+.blx-excalidraw-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.blx-excalidraw-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.18);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  animation: blx-modal-backdrop-in 0.15s ease-out;
+}
+
+.blx-excalidraw-modal-content {
+  position: relative;
+  width: min(90vw, 1400px);
+  height: min(85vh, 900px);
+  background: var(--blx-surface, #ffffff);
+  border: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.02),
+    0 8px 24px rgba(0, 0, 0, 0.06),
+    0 24px 64px rgba(0, 0, 0, 0.1);
+  animation: blx-excalidraw-modal-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes blx-excalidraw-modal-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.blx-excalidraw-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px 16px 13px 20px;
+  border-bottom: 1px solid var(--blx-border, rgba(0, 0, 0, 0.06));
+  flex-shrink: 0;
+}
+
+.blx-excalidraw-modal-title {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  font-family: var(--ws-font-display, var(--blx-font-sans));
+  letter-spacing: -0.01em;
+  line-height: 1;
+  color: var(--blx-text-heading, #3b4255);
+  margin: 0;
+}
+
+.blx-excalidraw-modal-close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--blx-text-faint, #b0b5bf);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+  margin-right: -4px;
+}
+
+.blx-excalidraw-modal-close:hover {
+  background: var(--blx-hover-bg, rgba(0, 0, 0, 0.035));
+  color: var(--blx-text-muted, #8a8f9a);
+}
+
+.blx-excalidraw-modal-close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--blx-surface, #fff), 0 0 0 4px var(--blx-accent, #4285f4);
+}
+
+.blx-excalidraw-modal-close svg {
+  width: 14px;
+  height: 14px;
+}
+
+.blx-excalidraw-modal-body {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Hide library sidebar trigger — no official prop yet */
+.blx-excalidraw-modal-body .excalidraw .sidebar-trigger {
+  display: none !important;
+}
+
+/* Excalidraw renders dialogs (help, etc.) as portals on document.body —
+   they need a higher z-index than our modal (10000) */
+.excalidraw-modal-container {
+  z-index: 10001 !important;
+}
+
+/* Dark mode adjustments */
+[data-blx-theme="dark"] .blx-excalidraw-edit-overlay {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+[data-blx-theme="dark"] .blx-excalidraw-modal-content,
+[data-theme="dark"] .blx-excalidraw-modal-content {
+  background: #1e1e2e;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 8px 24px rgba(0, 0, 0, 0.2),
+    0 24px 64px rgba(0, 0, 0, 0.35);
+}
+
+[data-blx-theme="dark"] .blx-excalidraw-modal-header,
+[data-theme="dark"] .blx-excalidraw-modal-header {
+  border-bottom-color: #313244;
+}
+
+[data-blx-theme="dark"] .blx-excalidraw-modal-backdrop,
+[data-theme="dark"] .blx-excalidraw-modal-backdrop {
+  background: rgba(0, 0, 0, 0.45);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-blx-theme="light"]) .blx-excalidraw-modal-content {
+    background: #1e1e2e;
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.06),
+      0 8px 24px rgba(0, 0, 0, 0.2),
+      0 24px 64px rgba(0, 0, 0, 0.35);
+  }
+  :root:not([data-theme="light"]):not([data-blx-theme="light"]) .blx-excalidraw-modal-header {
+    border-bottom-color: #313244;
+  }
+  :root:not([data-theme="light"]):not([data-blx-theme="light"]) .blx-excalidraw-modal-backdrop {
+    background: rgba(0, 0, 0, 0.45);
+  }
+}