markstream-octane 0.0.56-beta.1

package/dist/index.tailwind.css

@@ -0,0 +1,2009 @@
+/*
+ * Keep button defaults minimal, but don't override Tailwind utilities.
+ * Use :where() to keep specificity low so `.markstream-octane .<utility>` wins.
+ */
+:where(.markstream-octane) button {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.markstream-octane {
+  --border: 214.3 31.8% 91.4%;
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --secondary: 210 40% 96%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+}
+
+
+
+.dark .markstream-octane,
+.markstream-octane.dark {
+  --border: 217.2 32.6% 17.5%;
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --secondary: 217.2 32.6% 17.5%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+}
+
+:where(.markstream-octane).markdown-renderer {
+  position: relative;
+  contain: layout;
+  content-visibility: auto;
+  contain-intrinsic-size: 800px 600px;
+}
+
+:where(.markstream-octane).markdown-renderer.virtualized {
+  /* When virtualization is active, `content-visibility: auto` can keep the
+     whole subtree unpainted until the scroll container dispatches a scroll
+     event in some layouts (e.g. complex chat shells). The virtual window
+     already limits DOM cost, so keep it visible to avoid a blank first paint. */
+  content-visibility: visible;
+  contain-intrinsic-size: auto;
+}
+
+:where(.markstream-octane) .node-slot,
+:where(.markstream-octane) .node-content {
+  width: 100%;
+}
+
+:where(.markstream-octane) .node-placeholder {
+  width: 100%;
+  min-height: 1rem;
+  margin: 0.25rem 0;
+  border-radius: 0.5rem;
+  background-image: linear-gradient(90deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.05), rgba(148, 163, 184, 0.18));
+  background-size: 200% 100%;
+  animation: markstream-octane-node-placeholder-shimmer 1.1s ease-in-out infinite;
+}
+
+:where(.markstream-octane) .node-placeholder:first-child {
+  margin-top: 0;
+}
+
+:where(.markstream-octane) .node-spacer {
+  width: 100%;
+}
+
+:where(.markstream-octane) .fade-node,
+:where(.markstream-octane) .typewriter-node {
+  opacity: 0;
+  animation: markstream-octane-node-enter-fade var(--fade-duration, var(--typewriter-fade-duration, 280ms)) var(--fade-ease, var(--typewriter-fade-ease, cubic-bezier(0.33, 0, 0.67, 1))) forwards;
+}
+
+:where(.markstream-octane) .unknown-node {
+  color: #6a737d;
+  font-style: italic;
+  margin: 1rem 0;
+}
+
+:where(.markstream-octane) .text-node {
+  display: inline;
+  font-weight: inherit;
+  vertical-align: baseline;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+:where(.markstream-octane) .text-node.text-node-center {
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+}
+
+:where(.markstream-octane) .text-node-stream-delta {
+  animation-duration: var(--stream-update-fade-duration, var(--fade-duration, var(--typewriter-fade-duration, 280ms)));
+  animation-timing-function: var(--stream-update-fade-ease, var(--fade-ease, var(--typewriter-fade-ease, cubic-bezier(0.33, 0, 0.67, 1))));
+  animation-fill-mode: both;
+  will-change: opacity;
+}
+
+:where(.markstream-octane) .text-node-stream-delta--a {
+  animation-name: markstream-octane-text-node-stream-update-fade-a;
+}
+
+:where(.markstream-octane) .text-node-stream-delta--b {
+  animation-name: markstream-octane-text-node-stream-update-fade-b;
+}
+
+:where(.markstream-octane) .paragraph-node {
+  margin: 1.25em 0;
+  line-height: 1.625;
+}
+
+:where(.markstream-octane) li .paragraph-node {
+  margin: 0;
+}
+
+:where(.markstream-octane) .blockquote-node {
+  font-weight: 500;
+  font-style: italic;
+  border-left: 0.25rem solid var(--blockquote-border-color,#e2e8f0);
+  quotes: "\201C" "\201D" "\2018" "\2019";
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+
+/* Prevent "tall but blank" placeholders when nested renderers use content-visibility. */
+:where(.markstream-octane) .blockquote-node .markdown-renderer {
+  content-visibility: visible;
+  contain: content;
+  contain-intrinsic-size: 0px 0px;
+}
+
+:where(.markstream-octane) .heading-node {
+  font-weight: 600;
+}
+
+:where(.markstream-octane) .heading-1 {
+  margin-top: 0;
+  margin-bottom: calc(8 / 9 * 1em);
+  font-size: 2.25rem;
+  line-height: calc(10 / 9 * 1);
+  font-weight: 800;
+}
+
+:where(.markstream-octane) .heading-2 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  line-height: calc(4 / 3 * 1);
+}
+
+:where(.markstream-octane) .heading-3 {
+  margin-top: calc(8 / 5 * 1em);
+  margin-bottom: calc(3 / 5 * 1em);
+  font-size: 1.25rem;
+  line-height: calc(5 / 3 * 1);
+}
+
+:where(.markstream-octane) .heading-4,
+:where(.markstream-octane) .heading-5,
+:where(.markstream-octane) .heading-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+}
+
+:where(.markstream-octane) .heading-5,
+:where(.markstream-octane) .heading-6 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:where(.markstream-octane) .link-node {
+  color: var(--link-color, #0366d6);
+  text-decoration: none;
+}
+
+:where(.markstream-octane) .link-node:hover {
+  text-decoration: underline;
+  text-underline-offset: .2rem;
+}
+
+:where(.markstream-octane) .link-loading {
+  color: var(--link-color, #0366d6);
+}
+
+:where(.markstream-octane) .link-loading .link-text-wrapper {
+  position: relative;
+}
+
+:where(.markstream-octane) .link-loading .link-text {
+  position: relative;
+  z-index: 2;
+}
+
+:where(.markstream-octane) .link-loading-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--underline-height, 2px);
+  bottom: var(--underline-bottom, -3px);
+  background: currentColor;
+  border-radius: 999px;
+  will-change: opacity;
+  opacity: var(--underline-rest-opacity, 0.18);
+  animation: markstream-octane-link-loading-pulse var(--underline-duration, 1.6s) var(--underline-timing, ease-in-out) var(--underline-iteration, infinite);
+}
+
+@keyframes markstream-octane-link-loading-pulse {
+  0%, 100% { opacity: var(--underline-rest-opacity, 0.18); }
+  50% { opacity: var(--underline-opacity, 0.35); }
+}
+
+@keyframes markstream-octane-text-node-stream-update-fade-a {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes markstream-octane-text-node-stream-update-fade-b {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.markstream-octane) .link-loading-indicator {
+    animation: none !important;
+    opacity: var(--underline-rest-opacity, 0.18);
+  }
+
+  :where(.markstream-octane) .text-node-stream-delta {
+    animation: none !important;
+  }
+
+  :where(.markstream-octane) .fade-node,
+:where(.markstream-octane) .typewriter-node {
+    animation: none !important;
+    opacity: 1;
+  }
+
+  :where(.markstream-octane) .typewriter-cursor {
+    animation: none !important;
+    opacity: 1;
+  }
+}
+
+:where(.markstream-octane) .inline-code {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.375rem;
+  background: #f3f4f6;
+  font-size: 0.875rem;
+}
+
+:where(.markstream-octane) .image-node__img {
+  display: inline-block;
+  max-width: none;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  vertical-align: middle;
+  border-radius: 0.75rem;
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+:where(.markstream-octane) .image-node__img.is-loaded {
+  opacity: 1;
+}
+
+:where(.markstream-octane) .image-node__placeholder,
+:where(.markstream-octane) .image-node__error {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: auto;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  vertical-align: middle;
+}
+
+:where(.markstream-octane) .image-node__placeholder {
+  background: linear-gradient(120deg, rgba(148, 163, 184, 0.2), rgba(226, 232, 240, 0.35));
+  color: #475569;
+  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
+}
+
+:where(.markstream-octane) .image-node__error {
+  color: #dc2626;
+  background: rgba(248, 113, 113, 0.08);
+}
+
+:where(.markstream-octane) .image-node__spinner {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 999px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: markstream-octane-spin 1s linear infinite;
+}
+
+:where(.markstream-octane) .image-node__placeholder-text {
+  font-size: 0.875rem;
+  color: currentColor;
+}
+
+@keyframes markstream-octane-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+:where(.markstream-octane) .footnote-node {
+  display: flex;
+  margin-top: var(--ms-flow-footnote-y, 0.5em);
+  margin-bottom: var(--ms-flow-footnote-y, 0.5em);
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--footnote-border, hsl(var(--border)));
+  font-size: 0.875rem;
+  line-height: 1.625;
+}
+
+:where(.markstream-octane) .footnote-reference {
+  font-size: 0.75em;
+  line-height: 0;
+}
+
+:where(.markstream-octane) .footnote-link {
+  color: var(--link-color, #0366d6);
+  text-decoration: none;
+}
+
+:where(.markstream-octane) .footnote-link:hover {
+  text-decoration: underline;
+}
+
+:where(.markstream-octane) .footnote-anchor {
+  margin-left: 0.5rem;
+  color: var(--link-color, #0366d6);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+:where(.markstream-octane) .footnote-anchor:hover {
+  text-decoration: underline;
+}
+
+:where(.markstream-octane) .admonition-node {
+  border-left: 4px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  margin: 1.5rem 0;
+  background: rgba(249, 250, 251, 0.9);
+}
+
+:where(.markstream-octane) .admonition-node__title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+:where(.markstream-octane) .table-node-wrapper {
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: auto;
+  scrollbar-gutter: stable;
+}
+
+:where(.markstream-octane) .table-node {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+:where(.markstream-octane) .table-node th,
+:where(.markstream-octane) .table-node td {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+:where(.markstream-octane) .table-node thead th {
+  position: relative;
+}
+
+:where(.markstream-octane) .table-node__resize-handle {
+  position: absolute;
+  top: 0;
+  right: -4px;
+  bottom: 0;
+  z-index: 1;
+  width: 8px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+:where(.markstream-octane) .table-node__resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 0.35em;
+  bottom: 0.35em;
+  left: 50%;
+  width: 2px;
+  border-radius: 9999px;
+  background: rgba(94, 104, 121, 0.55);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: opacity 0.12s ease;
+}
+
+:where(.markstream-octane) .table-node__resize-handle:hover::after,
+:where(.markstream-octane) .table-node__resize-handle:focus-visible::after {
+  opacity: 1;
+}
+
+/* Override the default `break-words` / pre-wrap text styles inside tables so
+   dense tables don't turn into vertical glyph stacks. */
+:where(.markstream-octane) .table-node .text-node,
+:where(.markstream-octane) .table-node code {
+  white-space: inherit;
+  overflow-wrap: inherit;
+  word-break: inherit;
+  max-width: none;
+}
+
+:where(.markstream-octane) .table-node--loading tbody td {
+  position: relative;
+  overflow: hidden;
+}
+
+:where(.markstream-octane) .table-node--loading tbody td > * {
+  visibility: hidden;
+}
+
+:where(.markstream-octane) .table-node--loading tbody td::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 0.25rem;
+  background: linear-gradient(
+    90deg,
+    rgba(148, 163, 184, 0.16) 25%,
+    rgba(148, 163, 184, 0.28) 50%,
+    rgba(148, 163, 184, 0.16) 75%
+  );
+  background-size: 200% 100%;
+  animation: markstream-octane-table-node-shimmer 1.2s linear infinite;
+  will-change: background-position;
+}
+
+:where(.markstream-octane) .table-node__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+:where(.markstream-octane) .table-node__spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 999px;
+  border: 2px solid rgba(94, 104, 121, 0.25);
+  border-top-color: rgba(94, 104, 121, 0.8);
+  animation: markstream-octane-spin 1s linear infinite;
+  will-change: transform;
+}
+
+/* Table cells: make NodeRenderer layout-transparent to avoid block boxes in <td>. */
+:where(.markstream-octane) .table-node .markdown-renderer {
+  display: contents;
+  content-visibility: visible;
+  contain: content;
+  contain-intrinsic-size: 0px 0px;
+}
+
+:where(.markstream-octane) .table-node .markdown-renderer .node-slot,
+:where(.markstream-octane) .table-node .markdown-renderer .node-content,
+:where(.markstream-octane) .table-node .markdown-renderer .node-space {
+  display: contents;
+}
+
+/* Nested renderers (often used inside custom components like <thinking>).
+   Avoid `content-visibility: auto` causing blank inner content. */
+:where(.markstream-octane).markdown-renderer .markdown-renderer {
+  content-visibility: visible;
+  contain-intrinsic-size: auto;
+}
+
+@keyframes markstream-octane-table-node-shimmer {
+  0% {
+    background-position: 0% 0%;
+  }
+  50% {
+    background-position: 100% 0%;
+  }
+  100% {
+    background-position: 200% 0%;
+  }
+}
+
+:where(.markstream-octane) .hr + .table-node-wrapper {
+  margin-top: 0;
+}
+
+:where(.markstream-octane) .hr + .table-node-wrapper .table-node {
+  margin-top: 0;
+}
+
+:where(.markstream-octane) .code-block-node {
+  background: #0f172a;
+  color: #fff;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin: 1.25rem 0;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+:where(.markstream-octane) .code-block {
+  border-radius: 0.75rem;
+  background: #0f172a;
+  color: #e2e8f0;
+  margin: 1.25rem 0;
+  overflow: hidden;
+  position: relative;
+}
+
+:where(.markstream-octane) .code-block--expanded {
+  max-height: none;
+}
+
+:where(.markstream-octane) .code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.65rem 0.9rem;
+  background: rgba(15, 23, 42, 0.85);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+:where(.markstream-octane) .code-block-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+:where(.markstream-octane) .code-block-language {
+  font-size: 0.825rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(226, 232, 240, 0.85);
+}
+
+:where(.markstream-octane) .code-block-badge {
+  font-size: 0.7rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 9999px;
+  background: rgba(59, 130, 246, 0.2);
+  color: #bfdbfe;
+}
+
+:where(.markstream-octane) .code-block-actions {
+  display: flex;
+  gap: 0.35rem;
+}
+
+:where(.markstream-octane) .code-block-btn {
+  border: 1px solid rgba(148, 163, 184, 0.4);
+  background: rgba(15, 23, 42, 0.6);
+  color: #f8fafc;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.65rem;
+  border-radius: 0.35rem;
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+:where(.markstream-octane) .code-block-btn:hover {
+  background: rgba(59, 130, 246, 0.8);
+  border-color: rgba(59, 130, 246, 0.6);
+}
+
+:where(.markstream-octane) .code-block-body {
+  position: relative;
+}
+
+:where(.markstream-octane) .code-block-body--expanded {
+  max-height: none;
+}
+
+:where(.markstream-octane) .code-block-body--collapsed {
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+:where(.markstream-octane) .code-block-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(2px);
+}
+
+
+:where(.markstream-octane) .code-block-spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: rgba(255, 255, 255, 0.9);
+  border-radius: 9999px;
+  animation: markstream-octane-spin 1s linear infinite;
+}
+
+:where(.markstream-octane) .code-block-footer {
+  padding: 0.35rem 0.9rem 0.7rem;
+  border-top: 1px solid rgba(148, 163, 184, 0.2);
+  font-size: 0.75rem;
+  color: rgba(226, 232, 240, 0.8);
+}
+
+:where(.markstream-octane) .mermaid-block {
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 1rem;
+  background: #fff;
+  color: #0f172a;
+  margin: 1.25rem 0;
+  overflow: hidden;
+}
+
+.dark :where(.markstream-octane) .mermaid-block,
+:where(.markstream-octane).dark .mermaid-block {
+  background: #0f172a;
+  color: #e2e8f0;
+  border-color: rgba(148, 163, 184, 0.4);
+}
+
+:where(.markstream-octane).mermaid-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+:where(.markstream-octane) .mermaid-modal-panel {
+  position: relative;
+  width: min(64rem, calc(100% - 2rem));
+  margin: 2rem auto;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: #fff;
+  color: #0f172a;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
+}
+
+:where(.markstream-octane) .mermaid-modal-panel.is-dark {
+  background: #0f172a;
+  color: #e2e8f0;
+}
+
+:where(.markstream-octane) .mermaid-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
+}
+
+:where(.markstream-octane) .mermaid-modal-panel.is-dark .mermaid-modal-header {
+  border-bottom-color: rgba(148, 163, 184, 0.25);
+}
+
+:where(.markstream-octane) .mermaid-modal-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+:where(.markstream-octane) .mermaid-modal-close {
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  opacity: 0.9;
+}
+
+:where(.markstream-octane) .mermaid-modal-close:hover {
+  opacity: 1;
+  background: rgba(148, 163, 184, 0.16);
+}
+
+:where(.markstream-octane) .mermaid-modal-body {
+  padding: 1rem;
+  max-height: 80vh;
+  overflow: auto;
+}
+
+:where(.markstream-octane) .mermaid-modal-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+:where(.markstream-octane) .fullscreen {
+  width: 100%;
+  max-height: 100% !important;
+  height: 100% !important;
+}
+
+:where(.markstream-octane) .mermaid-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.65rem 0.9rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
+  background: rgba(248, 250, 252, 0.85);
+}
+
+.dark :where(.markstream-octane) .mermaid-header,
+:where(.markstream-octane).dark .mermaid-header {
+  background: rgba(15, 23, 42, 0.85);
+  border-color: rgba(71, 85, 105, 0.6);
+}
+
+:where(.markstream-octane) .mermaid-title__text {
+  font-size: 0.85rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: inherit;
+}
+
+:where(.markstream-octane) .mermaid-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+:where(.markstream-octane) .mermaid-btn {
+  border: 1px solid rgba(148, 163, 184, 0.4);
+  background: transparent;
+  color: inherit;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.65rem;
+  border-radius: 0.35rem;
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+:where(.markstream-octane) .mermaid-btn:hover {
+  background: rgba(59, 130, 246, 0.15);
+  color: #1d4ed8;
+}
+
+.dark :where(.markstream-octane) .mermaid-btn:hover,
+:where(.markstream-octane).dark .mermaid-btn:hover {
+  background: rgba(59, 130, 246, 0.3);
+  color: #bfdbfe;
+}
+
+:where(.markstream-octane) .mermaid-toggle {
+  display: inline-flex;
+  border-radius: 9999px;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  overflow: hidden;
+}
+
+:where(.markstream-octane) .mermaid-toggle-btn {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 0.75rem;
+  padding: 0.2rem 0.65rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+:where(.markstream-octane) .mermaid-toggle-btn--active {
+  background: rgba(59, 130, 246, 0.18);
+  color: #1d4ed8;
+}
+
+.dark :where(.markstream-octane) .mermaid-toggle-btn--active,
+:where(.markstream-octane).dark .mermaid-toggle-btn--active {
+  background: rgba(59, 130, 246, 0.3);
+  color: #bfdbfe;
+}
+
+:where(.markstream-octane) .mermaid-body {
+  position: relative;
+  padding: 1rem;
+}
+
+:where(.markstream-octane) .mermaid-preview {
+  width: 100%;
+  min-height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+:where(.markstream-octane) .mermaid-preview svg {
+  width: 100%;
+  height: auto;
+}
+
+:where(.markstream-octane) .mermaid-source {
+  background: rgba(15, 23, 42, 0.95);
+  color: #e2e8f0;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+:where(.markstream-octane) .mermaid-error {
+  padding: 0.85rem 1rem;
+  color: #b91c1c;
+  background: rgba(248, 113, 113, 0.15);
+  border-top: 1px solid rgba(248, 113, 113, 0.25);
+}
+
+:where(.markstream-octane) .mermaid-loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem 1rem;
+  font-size: 0.85rem;
+  color: rgba(15, 23, 42, 0.6);
+}
+
+.dark :where(.markstream-octane) .mermaid-loading,
+:where(.markstream-octane).dark .mermaid-loading {
+  color: rgba(226, 232, 240, 0.7);
+}
+
+:where(.markstream-octane) .mermaid-spinner {
+  width: 1.2rem;
+  height: 1.2rem;
+  border: 2px solid rgba(59, 130, 246, 0.4);
+  border-top-color: rgba(59, 130, 246, 0.9);
+  border-radius: 9999px;
+  animation: markstream-octane-spin 0.9s linear infinite;
+}
+
+:where(.markstream-octane) .math-block-node {
+  margin: 1rem 0;
+}
+
+:where(.markstream-octane) .math-inline-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+:where(.markstream-octane) .math-inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+:where(.markstream-octane) .math-inline--hidden {
+  visibility: hidden;
+}
+
+:where(.markstream-octane) .math-inline__loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+:where(.markstream-octane) .math-inline__spinner {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  border: 2px solid rgba(94, 104, 121, 0.25);
+  border-top-color: rgba(94, 104, 121, 0.8);
+  animation: markstream-octane-spin 1s linear infinite;
+}
+
+:where(.markstream-octane) .math-block {
+  position: relative;
+  text-align: center;
+  overflow-x: auto;
+  min-height: 40px;
+  padding: 0.5rem;
+}
+
+:where(.markstream-octane) .math-rendering {
+  opacity: 0.3;
+  transition: opacity 0.2s ease;
+}
+
+:where(.markstream-octane) .thematic-break {
+  margin: 3rem 0;
+  border-top: 1px solid #e2e8f0;
+}
+
+:where(.markstream-octane) .hr-node {
+  margin: 3rem 0;
+  border-top: 1px solid var(--hr-border-color, #e2e8f0);
+}
+
+:where(.markstream-octane) .hard-break {
+  display: block;
+}
+
+:where(.markstream-octane) .checkbox-node {
+  margin-right: 0.5rem;
+  vertical-align: middle;
+}
+
+:where(.markstream-octane) .checkbox-input {
+  margin: 0;
+  cursor: default;
+}
+
+:where(.markstream-octane) .html-inline-node {
+  display: inline;
+}
+
+:where(.markstream-octane) .html-inline-node--loading {
+  opacity: 0.85;
+}
+
+:where(.markstream-octane) .html-block-node__placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.5rem 0;
+}
+
+:where(.markstream-octane) .html-block-node__placeholder-bar {
+  display: block;
+  height: 0.8rem;
+  border-radius: 9999px;
+  background-image: linear-gradient(90deg, rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.35));
+  background-size: 200% 100%;
+  animation: markstream-octane-html-block-node-shimmer 1.2s ease infinite;
+}
+
+@keyframes markstream-octane-html-block-node-shimmer {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 200% 0%;
+  }
+}
+
+:where(.markstream-octane) .vmr-container {
+  border-radius: 0.5rem;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  padding: 1rem;
+  margin: 1rem 0;
+  border-left-width: 4px;
+}
+
+:where(.markstream-octane) .admonition {
+  --admonition-bg: #f8f8f8;
+  --admonition-border: #eaecef;
+  --admonition-header-bg: rgba(0, 0, 0, 0.03);
+  --admonition-text: #111827;
+  --admonition-muted: #374151;
+  --admonition-note-color: #448aff;
+  --admonition-tip-color: #00bfa5;
+  --admonition-warning-color: #ff9100;
+  --admonition-danger-color: #ff5252;
+  margin: 1rem 0;
+  padding: 0;
+  border-radius: 4px;
+  border-left: 4px solid var(--admonition-border);
+  background-color: var(--admonition-bg);
+  color: var(--admonition-text);
+  overflow: hidden;
+}
+
+:where(.markstream-octane) .admonition-header {
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  background-color: var(--admonition-header-bg);
+  color: var(--admonition-muted);
+}
+
+:where(.markstream-octane) .admonition-icon {
+  margin-right: 0.5rem;
+  color: inherit;
+}
+
+:where(.markstream-octane) .admonition-content {
+  padding: 0.5rem 1rem 1rem;
+  color: var(--admonition-text);
+}
+
+:where(.markstream-octane) .admonition-note { border-left-color: var(--admonition-note-color); }
+:where(.markstream-octane) .admonition-note .admonition-header { background-color: rgba(68, 138, 255, 0.06); color: var(--admonition-note-color); }
+:where(.markstream-octane) .admonition-info { border-left-color: var(--admonition-note-color); }
+:where(.markstream-octane) .admonition-info .admonition-header { background-color: rgba(68, 138, 255, 0.06); color: var(--admonition-note-color); }
+:where(.markstream-octane) .admonition-tip { border-left-color: var(--admonition-tip-color); }
+:where(.markstream-octane) .admonition-tip .admonition-header { background-color: rgba(0, 191, 165, 0.06); color: var(--admonition-tip-color); }
+:where(.markstream-octane) .admonition-warning { border-left-color: var(--admonition-warning-color); }
+:where(.markstream-octane) .admonition-warning .admonition-header { background-color: rgba(255, 145, 0, 0.06); color: var(--admonition-warning-color); }
+:where(.markstream-octane) .admonition-danger { border-left-color: var(--admonition-danger-color); }
+:where(.markstream-octane) .admonition-danger .admonition-header { background-color: rgba(255, 82, 82, 0.06); color: var(--admonition-danger-color); }
+:where(.markstream-octane) .admonition-error { border-left-color: var(--admonition-danger-color); }
+:where(.markstream-octane) .admonition-error .admonition-header { background-color: rgba(255, 82, 82, 0.06); color: var(--admonition-danger-color); }
+:where(.markstream-octane) .admonition-caution { border-left-color: var(--admonition-warning-color); }
+:where(.markstream-octane) .admonition-caution .admonition-header { background-color: rgba(255, 145, 0, 0.06); color: var(--admonition-warning-color); }
+
+:where(.markstream-octane) .admonition-toggle {
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+:where(.markstream-octane) .admonition-toggle:focus {
+  outline: 2px solid rgba(0, 0, 0, 0.08);
+  outline-offset: 2px;
+}
+
+:where(.markstream-octane) .admonition.is-dark {
+  --admonition-bg: #0b1220;
+  --admonition-border: rgba(255, 255, 255, 0.06);
+  --admonition-header-bg: rgba(255, 255, 255, 0.03);
+  --admonition-text: #e6eef8;
+  --admonition-muted: #cbd5e1;
+}
+
+:where(.markstream-octane) .code-block-container {
+  contain: content;
+  content-visibility: auto;
+  contain-intrinsic-size: 320px 180px;
+  container-type: inline-size;
+  --markstream-code-fallback-bg: #ffffff;
+  --markstream-code-fallback-fg: #111827;
+  --markstream-code-border-color: rgb(229 231 235);
+  --markstream-code-fallback-selection-bg: rgba(0, 0, 0, 0.06);
+  --vscode-editor-selectionBackground: var(--markstream-code-fallback-selection-bg);
+  --markstream-diff-frame-border: rgb(203 213 225 / 0.56);
+  --markstream-diff-frame-shadow: 0 16px 40px -32px rgb(15 23 42 / 0.18);
+  --markstream-diff-shell-fg: #0f172a;
+  --markstream-diff-shell-muted: #64748b;
+  --markstream-diff-shell-border: rgb(148 163 184 / 0.18);
+  --markstream-diff-shell-shadow: 0 30px 70px -48px rgb(15 23 42 / 0.42);
+  --markstream-diff-shell-bg: radial-gradient(
+      circle at top center,
+      rgb(255 255 255 / 0.9),
+      transparent 55%
+    ),
+    linear-gradient(180deg, #fffdfa 0%, #fbfcfe 100%);
+  --markstream-diff-header-border: rgb(226 232 240 / 0.92);
+  --markstream-diff-stage-bg: radial-gradient(
+      circle at top center,
+      rgb(255 255 255 / 0.95),
+      transparent 60%
+    ),
+    linear-gradient(180deg, #fcfdff 0%, #f6f8fb 100%);
+  --markstream-diff-editor-bg: #ffffff;
+  --markstream-diff-editor-fg: #435266;
+  --markstream-diff-unchanged-fg: lab(36.247 0.0071872 -0.000424832);
+  --markstream-diff-unchanged-bg: lab(95.9989 0.0180531 -0.0010643);
+  --markstream-diff-unchanged-divider: rgb(255 255 255 / 0.94);
+  --markstream-diff-focus: rgb(14 165 233 / 0.42);
+  --markstream-diff-widget-shadow: rgb(15 23 42 / 0.26);
+  --markstream-diff-action-hover: rgb(15 23 42 / 0.06);
+  --markstream-diff-panel-bg: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
+  --markstream-diff-panel-bg-soft: #ffffff;
+  --markstream-diff-panel-bg-strong: #ffffff;
+  --markstream-diff-panel-border: rgb(226 232 240 / 0.3);
+  --markstream-diff-pane-divider: rgb(226 232 240 / 0.42);
+  --markstream-diff-gutter-bg: transparent;
+  --markstream-diff-gutter-guide: transparent;
+  --markstream-diff-gutter-gap: 16px;
+  --markstream-diff-line-number: rgb(82 82 82 / 0.88);
+  --markstream-diff-line-number-active: rgb(82 82 82 / 0.88);
+  --markstream-diff-added-fg: #14b8a6;
+  --markstream-diff-removed-fg: #ff3658;
+  --markstream-diff-added-line: rgb(232 249 245 / 0.98);
+  --markstream-diff-removed-line: rgb(255 241 241 / 0.98);
+  --markstream-diff-added-inline: rgb(197 245 219 / 0.96);
+  --markstream-diff-removed-inline: rgb(255 215 217 / 0.92);
+  --markstream-diff-added-inline-border: transparent;
+  --markstream-diff-removed-inline-border: transparent;
+  --markstream-diff-added-gutter: linear-gradient(
+    90deg,
+    var(--markstream-diff-added-fg) 0 var(--stream-monaco-gutter-marker-width, 4px),
+    rgb(20 184 166 / 0.08) var(--stream-monaco-gutter-marker-width, 4px) 100%
+  );
+  --markstream-diff-removed-gutter: repeating-linear-gradient(
+        180deg,
+        var(--markstream-diff-removed-fg) 0 2px,
+        transparent 2px 4px
+      )
+      left / var(--stream-monaco-gutter-marker-width, 4px) 100% no-repeat,
+    linear-gradient(90deg, rgb(255 54 88 / 0.08) 0 100%);
+  --markstream-diff-added-line-fill: rgb(231 248 244 / 0.96);
+  --markstream-diff-removed-line-fill: rgb(255 241 241 / 0.98);
+}
+
+:where(.markstream-octane) .code-block-container.is-dark {
+  --markstream-code-fallback-bg: #111827;
+  --markstream-code-fallback-fg: #e5e7eb;
+  --markstream-code-border-color: rgb(55 65 81 / 0.3);
+  --markstream-code-fallback-selection-bg: rgba(255, 255, 255, 0.08);
+  --markstream-diff-frame-border: rgb(82 82 91 / 0.56);
+  --markstream-diff-frame-shadow: 0 18px 40px -30px rgb(0 0 0 / 0.84);
+  --markstream-diff-shell-fg: #e2e8f0;
+  --markstream-diff-shell-muted: #94a3b8;
+  --markstream-diff-shell-border: rgb(82 82 91 / 0.56);
+  --markstream-diff-shell-shadow: 0 34px 80px -52px rgb(0 0 0 / 0.72);
+  --markstream-diff-shell-bg: rgb(10 10 11 / 0.99);
+  --markstream-diff-header-border: rgb(63 63 70 / 0.82);
+  --markstream-diff-stage-bg: rgb(10 10 11 / 0.99);
+  --markstream-diff-editor-bg: rgb(12 12 14 / 0.99);
+  --markstream-diff-editor-fg: #b6c2d3;
+  --markstream-diff-unchanged-fg: #cbd5e1;
+  --markstream-diff-unchanged-bg: rgb(24 24 27 / 0.92);
+  --markstream-diff-unchanged-divider: rgb(255 255 255 / 0.18);
+  --markstream-diff-focus: rgb(96 165 250 / 0.42);
+  --markstream-diff-widget-shadow: rgb(0 0 0 / 0.72);
+  --markstream-diff-action-hover: rgb(255 255 255 / 0.08);
+  --markstream-diff-panel-bg: rgb(10 10 11 / 0.99);
+  --markstream-diff-panel-bg-soft: rgb(10 10 11 / 0.99);
+  --markstream-diff-panel-bg-strong: rgb(10 10 11 / 0.99);
+  --markstream-diff-panel-border: rgb(82 82 91 / 0.3);
+  --markstream-diff-pane-divider: rgb(82 82 91 / 0.34);
+  --markstream-diff-gutter-bg: linear-gradient(
+    180deg,
+    rgb(13 13 15 / 0.94) 0%,
+    rgb(9 9 10 / 0.98) 100%
+  );
+  --markstream-diff-gutter-guide: rgb(161 161 170 / 0.08);
+  --markstream-diff-gutter-gap: 16px;
+  --markstream-diff-line-number: rgb(161 161 170 / 0.68);
+  --markstream-diff-line-number-active: rgb(228 228 231 / 0.82);
+  --markstream-diff-added-fg: #5eead4;
+  --markstream-diff-removed-fg: #fda4af;
+  --markstream-diff-added-line: rgb(13 148 136 / 0.18);
+  --markstream-diff-removed-line: rgb(225 29 72 / 0.18);
+  --markstream-diff-added-inline: rgb(45 212 191 / 0.24);
+  --markstream-diff-removed-inline: rgb(251 113 133 / 0.24);
+  --markstream-diff-added-inline-border: transparent;
+  --markstream-diff-removed-inline-border: transparent;
+  --markstream-diff-added-gutter: linear-gradient(
+    90deg,
+    var(--markstream-diff-added-fg) 0 var(--stream-monaco-gutter-marker-width, 4px),
+    rgb(94 234 212 / 0.2) var(--stream-monaco-gutter-marker-width, 4px) 100%
+  );
+  --markstream-diff-removed-gutter: repeating-linear-gradient(
+        180deg,
+        var(--markstream-diff-removed-fg) 0 2px,
+        transparent 2px 4px
+      )
+      left / var(--stream-monaco-gutter-marker-width, 4px) 100% no-repeat,
+    linear-gradient(90deg, rgb(253 164 175 / 0.18) 0 100%);
+  --markstream-diff-added-line-fill: linear-gradient(
+    90deg,
+    rgb(15 118 110 / 0.38) 0%,
+    rgb(13 148 136 / 0.28) 100%
+  );
+  --markstream-diff-removed-line-fill: linear-gradient(
+    90deg,
+    rgb(159 18 57 / 0.38) 0%,
+    rgb(225 29 72 / 0.28) 100%
+  );
+}
+
+:where(.markstream-octane) .code-editor-container {
+  transition: height 180ms ease, max-height 180ms ease;
+}
+
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor,
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor .monaco-editor-background,
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor .margin,
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor .lines-content {
+  background: var(--vscode-editor-background, var(--markstream-code-fallback-bg)) !important;
+}
+
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor,
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor .margin,
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor .view-lines,
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor .view-line,
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor .view-line span,
+:where(.markstream-octane) .code-block-container.is-plain-text:not(.is-diff) .monaco-editor .line-numbers {
+  color: var(--vscode-editor-foreground, var(--markstream-code-fallback-fg)) !important;
+}
+
+:where(.markstream-octane) .code-action-btn {
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+:where(.markstream-octane) .code-action-btn:hover {
+  opacity: 1;
+}
+
+:where(.markstream-octane) .code-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:where(.markstream-octane) .code-action-btn:disabled:hover {
+  background-color: transparent;
+}
+
+/* Ensure injected icons align consistently whether img or inline svg */
+:where(.markstream-octane) .icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where(.markstream-octane) .icon-slot svg,
+:where(.markstream-octane) .icon-slot img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:where(.markstream-octane) .code-editor-layer {
+  display: grid;
+  min-width: 0;
+}
+
+:where(.markstream-octane) .code-editor-layer > .code-editor-container,
+:where(.markstream-octane) .code-editor-layer > .code-editor-fallback-surface {
+  grid-area: 1 / 1;
+}
+
+:where(.markstream-octane) .code-editor-fallback-surface {
+  overflow: auto;
+  padding: 1rem;
+}
+
+:where(.markstream-octane) .code-block-container.is-diff .code-editor-fallback-surface {
+  padding: 0;
+  background: var(--markstream-diff-editor-bg);
+}
+
+:where(.markstream-octane) .code-block-container.is-diff {
+  background: var(--markstream-diff-shell-bg);
+  box-shadow: var(--markstream-diff-shell-shadow);
+  border-color: var(--markstream-diff-shell-border);
+  --vscode-editor-selectionBackground: var(--markstream-diff-action-hover);
+}
+
+:where(.markstream-octane) .code-block-container.is-diff .code-block-header {
+  padding: 18px 20px 14px;
+  color: var(--markstream-diff-shell-fg);
+  background: transparent;
+  border-bottom-color: var(--markstream-diff-header-border);
+}
+
+:where(.markstream-octane) .code-block-container.is-diff .code-editor-layer {
+  padding: 4px 4px 8px;
+  background: var(--markstream-diff-stage-bg);
+  --vscode-editor-background: var(--markstream-diff-editor-bg);
+  --vscode-editor-foreground: var(--markstream-diff-editor-fg);
+  --vscode-diffEditor-unchangedRegionForeground: var(--markstream-diff-unchanged-fg);
+  --vscode-diffEditor-unchangedRegionBackground: var(--markstream-diff-unchanged-bg);
+  --vscode-focusBorder: var(--markstream-diff-focus);
+  --vscode-widget-shadow: var(--markstream-diff-widget-shadow);
+}
+
+:where(.markstream-octane) .code-block-container .monaco-diff-editor .diffOverview {
+  background-color: var(--vscode-editor-background, #111827);
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .monaco-diff-editor .diffOverview,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .decorationsOverviewRuler {
+  display: none !important;
+  width: 0 !important;
+  min-width: 0 !important;
+  max-width: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  overflow: hidden !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .monaco-diff-editor {
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .monaco-editor .diff-hidden-lines .center:not(.stream-monaco-clickable) > *:not(a) {
+  visibility: hidden !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .monaco-editor .diff-hidden-lines-compact .text {
+  opacity: 0 !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root {
+  --stream-monaco-gutter-gap: var(--markstream-diff-gutter-gap) !important;
+  --stream-monaco-line-number: var(--markstream-diff-line-number) !important;
+  --stream-monaco-line-number-active: var(--markstream-diff-line-number-active) !important;
+  --stream-monaco-added-fg: var(--markstream-diff-added-fg) !important;
+  --stream-monaco-removed-fg: var(--markstream-diff-removed-fg) !important;
+  --stream-monaco-added-line: var(--markstream-diff-added-line) !important;
+  --stream-monaco-removed-line: var(--markstream-diff-removed-line) !important;
+  --stream-monaco-added-inline: var(--markstream-diff-added-inline) !important;
+  --stream-monaco-removed-inline: var(--markstream-diff-removed-inline) !important;
+  --stream-monaco-added-inline-border: var(--markstream-diff-added-inline-border) !important;
+  --stream-monaco-removed-inline-border: var(--markstream-diff-removed-inline-border) !important;
+  --stream-monaco-added-line-fill: var(--markstream-diff-added-line-fill) !important;
+  --stream-monaco-removed-line-fill: var(--markstream-diff-removed-line-fill) !important;
+  --stream-monaco-added-gutter: var(--markstream-diff-added-gutter) !important;
+  --stream-monaco-removed-gutter: var(--markstream-diff-removed-gutter) !important;
+  --stream-monaco-added-line-shadow: none !important;
+  --stream-monaco-removed-line-shadow: none !important;
+  --stream-monaco-unchanged-bg: var(--markstream-diff-unchanged-bg) !important;
+  --stream-monaco-unchanged-fg: var(--markstream-diff-unchanged-fg) !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .monaco-editor .diff-hidden-lines .center:not(.stream-monaco-unchanged-bridge-source),
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge {
+  --stream-monaco-unchanged-bg: var(--markstream-diff-unchanged-bg) !important;
+  --stream-monaco-unchanged-fg: var(--markstream-diff-unchanged-fg) !important;
+  background: var(--stream-monaco-unchanged-bg) !important;
+  color: var(--stream-monaco-unchanged-fg) !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge {
+  right: calc(
+    var(--stream-monaco-gutter-marker-width) - var(--stream-monaco-unchanged-rail-width) / 2 + (var(--stream-monaco-gutter-gap) * 2)
+  ) !important;
+  width: auto !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-summary,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-summary:hover,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-summary:focus-visible,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-summary.stream-monaco-focus-visible {
+  background: var(--stream-monaco-unchanged-bg) !important;
+  color: var(--markstream-diff-unchanged-fg) !important;
+  padding-left: calc(
+    var(--stream-monaco-gutter-marker-width) + (var(--stream-monaco-gutter-gap) * 2)
+  ) !important;
+  padding-right: calc(
+    var(--stream-monaco-gutter-marker-width) + (var(--stream-monaco-gutter-gap) * 2)
+  ) !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-rail,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge.stream-monaco-diff-unchanged-bridge-line-info .stream-monaco-unchanged-rail,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal:hover,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal:focus-visible,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal.stream-monaco-focus-visible {
+  background: var(--stream-monaco-unchanged-bg) !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-rail {
+  border-right-color: var(--markstream-diff-unchanged-divider) !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal {
+  border-bottom-color: transparent !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-rail.stream-monaco-unchanged-rail-both .stream-monaco-unchanged-reveal:first-child {
+  border-bottom-color: var(--markstream-diff-unchanged-divider) !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-rail.stream-monaco-unchanged-rail-top-only .stream-monaco-unchanged-reveal,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-rail.stream-monaco-unchanged-rail-bottom-only .stream-monaco-unchanged-reveal {
+  border-bottom: 0 !important;
+}
+
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .monaco-editor .diff-hidden-lines .center .stream-monaco-unchanged-meta,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .monaco-editor .diff-hidden-lines .center .stream-monaco-unchanged-count,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .monaco-editor .diff-hidden-lines .center .stream-monaco-unchanged-metadata-label,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-meta,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-count,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-metadata-label,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal:hover,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal:focus-visible,
+:where(.markstream-octane) .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal.stream-monaco-focus-visible {
+  color: var(--markstream-diff-unchanged-fg) !important;
+}
+
+:where(.markstream-octane) .code-block-content {
+  display: grid;
+  max-height: min(70vh, 500px);
+  overflow: auto;
+  transition: max-height 0.3s ease;
+  font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+  line-height: var(--vscode-editor-line-height, 1.5);
+}
+
+:where(.markstream-octane) .code-block-render,
+:where(.markstream-octane) .code-fallback-plain {
+  grid-area: 1 / 1;
+  min-width: 0;
+}
+
+:where(.markstream-octane) .code-block-render {
+  min-height: 1px;
+}
+
+:where(.markstream-octane) .code-block-render pre,
+:where(.markstream-octane) .code-block-content .shiki {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+:where(.markstream-octane) .code-block-content .shiki-fallback {
+  margin: 0;
+  padding: 1rem;
+  background: inherit;
+  color: inherit;
+  white-space: pre;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+:where(.markstream-octane) .code-fallback-plain {
+  position: relative;
+  z-index: 1;
+  white-space: pre;
+  overflow: auto;
+  background: var(--vscode-editor-background, var(--markstream-code-fallback-bg));
+  color: var(--vscode-editor-foreground, var(--markstream-code-fallback-fg));
+  font-size: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  font-weight: var(--vscode-editor-font-weight, 400);
+}
+
+:where(.markstream-octane) .code-fallback-plain > code {
+  font-size: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview {
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  color: var(--markstream-diff-editor-fg, var(--vscode-editor-foreground, inherit));
+  background: var(--markstream-diff-editor-bg, var(--vscode-editor-background, transparent));
+  font-variant-ligatures: none;
+  -moz-tab-size: var(--markstream-pre-tab-size, 4);
+    -o-tab-size: var(--markstream-pre-tab-size, 4);
+       tab-size: var(--markstream-pre-tab-size, 4);
+
+  --markstream-pre-diff-gutter-marker-width: var(--stream-monaco-gutter-marker-width, 4px);
+  --markstream-pre-diff-gutter-gap: var(--stream-monaco-gutter-gap, 8px);
+  --markstream-pre-diff-code-gap: var(--stream-monaco-diff-code-gap, 7.8px);
+  --markstream-pre-diff-code-padding: var(--stream-monaco-diff-code-padding, 0px);
+  --markstream-diff-added-fg: var(--diff-added-fg, #2f8f68);
+  --markstream-diff-removed-fg: var(--diff-removed-fg, #c24141);
+  --markstream-diff-added-line-fill: var(--diff-added-bg, rgb(47 143 104 / 12%));
+  --markstream-diff-removed-line-fill: var(--diff-removed-bg, rgb(194 65 65 / 12%));
+  --markstream-diff-added-gutter: linear-gradient(
+    90deg,
+    var(--markstream-diff-added-fg) 0 var(--markstream-pre-diff-gutter-marker-width),
+    transparent var(--markstream-pre-diff-gutter-marker-width) 100%
+  );
+  --markstream-diff-removed-gutter: linear-gradient(
+    90deg,
+    var(--markstream-diff-removed-fg) 0 var(--markstream-pre-diff-gutter-marker-width),
+    transparent var(--markstream-pre-diff-gutter-marker-width) 100%
+  );
+  --markstream-pre-diff-line-number-width: var(
+    --stream-monaco-line-number-width,
+    39px
+  );
+  --markstream-pre-diff-line-number-padding-left: var(--stream-monaco-line-number-padding-left, 15.6px);
+  --markstream-pre-diff-line-number-padding-right: var(--stream-monaco-line-number-padding-right, 7.8px);
+  --markstream-pre-diff-line-number-gap-to-code: var(
+    --stream-monaco-original-line-number-gap-to-code,
+    var(--stream-monaco-line-number-gap-to-code, var(--markstream-pre-diff-code-gap))
+  );
+  --markstream-pre-diff-line-number-left: var(
+    --stream-monaco-line-number-left,
+    var(--markstream-pre-diff-gutter-marker-width)
+  );
+  --markstream-pre-diff-line-number-border: var(
+    --stream-monaco-gutter-guide,
+    var(--markstream-diff-gutter-guide, hsl(var(--ms-border, 214 32% 91%) / 0.72))
+  );
+  --markstream-pre-diff-line-number-align: var(--markstream-diff-line-number-align, right);
+  --markstream-pre-diff-code-fill-left: calc(
+    var(--markstream-pre-diff-line-number-left)
+    + var(--markstream-pre-diff-line-number-width)
+  );
+  --markstream-pre-diff-code-left: calc(
+    var(--markstream-pre-diff-code-fill-left)
+    + var(--markstream-pre-diff-line-number-gap-to-code)
+    + var(--markstream-pre-diff-code-padding)
+  );
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview.markstream-pre--diff-inline {
+  --markstream-pre-diff-line-number-gap-to-code: var(
+    --stream-monaco-modified-line-number-gap-to-code,
+    var(--stream-monaco-line-number-gap-to-code, var(--markstream-pre-diff-code-gap))
+  );
+  --markstream-pre-diff-line-number-left: var(
+    --stream-monaco-line-number-left,
+    var(--markstream-pre-diff-gutter-marker-width)
+  );
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview > .markstream-pre__diff-code {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  width: 100%;
+  min-width: 100%;
+  font: inherit;
+  line-height: inherit;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview.markstream-pre--diff-inline > .markstream-pre__diff-code {
+  grid-template-columns: minmax(100%, max-content);
+  width: 100%;
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-pane {
+  min-width: 0;
+  overflow: hidden;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview:not(.markstream-pre--diff-inline) .markstream-pre__diff-pane {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview.markstream-pre--diff-inline .markstream-pre__diff-pane {
+  min-width: -moz-max-content;
+  min-width: max-content;
+  overflow: visible;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-pane--modified {
+  --markstream-pre-diff-line-number-gap-to-code: var(
+    --stream-monaco-modified-line-number-gap-to-code,
+    var(--stream-monaco-line-number-gap-to-code, var(--markstream-pre-diff-code-gap))
+  );
+  --markstream-pre-diff-line-number-left: var(
+    --stream-monaco-line-number-left,
+    var(--markstream-pre-diff-gutter-marker-width)
+  );
+  box-shadow: inset 1px 0 var(--markstream-diff-pane-divider, rgb(148 163 184 / 0.18));
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview.markstream-pre--diff-inline .markstream-pre__diff-pane--modified {
+  box-shadow: none;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  min-height: var(--markstream-pre-diff-line-height, 18px);
+  padding-left: var(--markstream-pre-diff-code-left);
+  line-height: var(--markstream-pre-diff-line-height, 18px);
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line::before {
+  content: '';
+  position: absolute;
+  left: var(--markstream-pre-diff-code-fill-left);
+  right: 0;
+  top: 0;
+  height: var(--markstream-pre-diff-line-height, 18px);
+  z-index: 0;
+  pointer-events: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-rail {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: var(--markstream-pre-diff-gutter-marker-width, 4px);
+  min-width: var(--markstream-pre-diff-gutter-marker-width, 4px);
+  height: var(--markstream-pre-diff-line-height, 18px);
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-number {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: var(--markstream-pre-diff-line-number-left);
+  width: var(--markstream-pre-diff-line-number-width);
+  height: var(
+    --markstream-pre-diff-content-height,
+    var(--markstream-pre-diff-line-height, 18px)
+  );
+  box-sizing: border-box;
+  box-shadow: inset -1px 0 var(--markstream-pre-diff-line-number-border);
+  padding-left: var(--markstream-pre-diff-line-number-padding-left, 15.6px);
+  padding-right: var(--markstream-pre-diff-line-number-padding-right, 7.8px);
+  color: var(--stream-monaco-line-number, var(--markstream-diff-line-number, #6b7280));
+  font-variant-numeric: tabular-nums;
+  line-height: var(--markstream-pre-diff-line-height, 18px);
+  text-align: var(--markstream-pre-diff-line-number-align, right);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line--added > .markstream-pre__diff-number {
+  background: var(--stream-monaco-added-line-fill, var(--markstream-diff-added-line-fill, transparent));
+  color: var(--stream-monaco-added-fg, var(--markstream-diff-added-fg, var(--markstream-diff-line-number, #6b7280)));
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line--removed > .markstream-pre__diff-number {
+  background: var(--stream-monaco-removed-line-fill, var(--markstream-diff-removed-line-fill, transparent));
+  color: var(--stream-monaco-removed-fg, var(--markstream-diff-removed-fg, var(--markstream-diff-line-number, #6b7280)));
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-content {
+  position: relative;
+  z-index: 1;
+  display: block;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  line-height: var(--markstream-pre-diff-line-height, 18px);
+  white-space: inherit;
+  overflow-wrap: normal;
+  word-break: normal;
+  line-break: auto;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-content-inner {
+  white-space: inherit;
+  overflow-wrap: inherit;
+  word-break: inherit;
+  line-break: inherit;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line--hunk {
+  color: var(--stream-monaco-unchanged-fg, var(--markstream-diff-unchanged-fg, var(--markstream-diff-line-number, currentColor)));
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line--hunk::before {
+  background: var(--stream-monaco-unchanged-bg, var(--markstream-diff-unchanged-bg, transparent));
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line--added::before {
+  background: var(--stream-monaco-added-line-fill, var(--markstream-diff-added-line-fill, transparent));
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line--removed::before {
+  background: var(--stream-monaco-removed-line-fill, var(--markstream-diff-removed-line-fill, transparent));
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line--added > .markstream-pre__diff-rail {
+  background: var(--stream-monaco-added-gutter, var(--markstream-diff-added-gutter, currentColor));
+}
+
+:where(.markstream-octane) .code-fallback-plain.markstream-pre--diff-preview .markstream-pre__diff-line--removed > .markstream-pre__diff-rail {
+  background: var(--stream-monaco-removed-gutter, var(--markstream-diff-removed-gutter, currentColor));
+}
+
+:where(.markstream-octane) .code-loading-placeholder {
+  padding: 1rem;
+  min-height: 120px;
+}
+
+:where(.markstream-octane) .loading-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+:where(.markstream-octane) .skeleton-line {
+  height: 1rem;
+  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
+  background-size: 400% 100%;
+  animation: markstream-octane-code-skeleton-shimmer 1.2s ease-in-out infinite;
+  border-radius: 0.25rem;
+}
+
+:where(.markstream-octane) .code-block-container.is-dark .skeleton-line {
+  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
+  background-size: 400% 100%;
+}
+
+:where(.markstream-octane) .skeleton-line.short {
+  width: 60%;
+}
+
+@keyframes markstream-octane-code-skeleton-shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: 0 0; }
+}
+
+.markstream-octane pre[class^='language-'],
+.markstream-octane pre[class*=' language-'] {
+  white-space: pre;
+  overflow: auto;
+  -moz-tab-size: 2;
+    -o-tab-size: 2;
+       tab-size: 2;
+  font-variant-ligatures: none;
+  contain: content;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  -webkit-font-smoothing: antialiased;
+}
+
+.markstream-octane pre[class^='language-'] > code,
+.markstream-octane pre[class*=' language-'] > code {
+  display: block;
+}
+
+.markstream-octane pre[class^='language-']:focus,
+.markstream-octane pre[class*=' language-']:focus {
+  outline: 2px solid var(--vmdr-focus, #3b82f6);
+  outline-offset: 2px;
+}
+
+:where(.markstream-octane).html-preview-frame__backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+:where(.markstream-octane).html-preview-frame__backdrop--dark {
+  background-color: rgba(15, 23, 42, 0.8);
+}
+
+:where(.markstream-octane) .html-preview-frame {
+  width: 80vw;
+  max-width: 960px;
+  height: 70vh;
+  background-color: #fff;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+
+:where(.markstream-octane) .html-preview-frame--dark {
+  background-color: #020617;
+  color: #e5e7eb;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+}
+
+:where(.markstream-octane) .html-preview-frame__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+:where(.markstream-octane) .html-preview-frame--dark .html-preview-frame__header {
+  border-bottom-color: rgba(148, 163, 184, 0.35);
+}
+
+:where(.markstream-octane) .html-preview-frame__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+
+:where(.markstream-octane) .html-preview-frame__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  background-color: #22c55e;
+}
+
+:where(.markstream-octane) .html-preview-frame--dark .html-preview-frame__dot {
+  background-color: #4ade80;
+}
+
+:where(.markstream-octane) .html-preview-frame__label {
+  white-space: nowrap;
+}
+
+:where(.markstream-octane) .html-preview-frame__close {
+  border: none;
+  background: transparent;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+:where(.markstream-octane) .html-preview-frame__close--dark {
+  color: #e5e7eb;
+}
+
+:where(.markstream-octane) .html-preview-frame__iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+@media (max-width: 640px) {
+  :where(.markstream-octane) .html-preview-frame {
+    width: 100vw;
+    height: 80vh;
+    border-radius: 0;
+  }
+}
+
+:where(.markstream-octane).ms-tooltip {
+  position: fixed;
+  padding: 0.4rem 0.65rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 120ms linear, transform 220ms cubic-bezier(.16, 1, .3, 1);
+}
+
+:where(.markstream-octane).ms-tooltip[data-visible='true'] {
+  opacity: 1;
+}
+
+:where(.markstream-octane).ms-tooltip[data-dark='true'] {
+  background-color: #111827;
+  color: #f9fafb;
+  border-color: #374151;
+}
+
+:where(.markstream-octane).ms-tooltip[data-dark='false'],
+:where(.markstream-octane).ms-tooltip:not([data-dark='true']) {
+  background-color: #ffffff;
+  color: #111827;
+  border-color: #e5e7eb;
+}
+
+@keyframes markstream-octane-node-placeholder-shimmer {
+  from {
+    background-position: 200% 0%;
+  }
+  to {
+    background-position: -200% 0%;
+  }
+}
+
+@keyframes markstream-octane-node-enter-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Backward compat alias */
+@keyframes markstream-octane-typewriter-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Typewriter cursor */
+:where(.markstream-octane) .typewriter-cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 0.08em;
+  vertical-align: -0.12em;
+  border-right: 2px solid currentColor;
+  pointer-events: none;
+  animation: markstream-octane-typewriter-cursor-blink 1s steps(1, end) infinite;
+}
+
+@keyframes markstream-octane-typewriter-cursor-blink {
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
+.markstream-octane .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+:where(.markstream-octane) .d2-block-body {
+  position: relative;
+}
+
+:where(.markstream-octane) .d2-source {
+  font-family: var(--vscode-editor-font-family, 'Fira Code', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
+}
+
+:where(.markstream-octane) .d2-code {
+  white-space: pre;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+:where(.markstream-octane) .d2-render {
+  overflow: auto;
+}
+
+:where(.markstream-octane) .d2-svg svg.markstream-d2-root-svg {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+:where(.markstream-octane) .mode-btn {
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+:where(.markstream-octane) .mode-btn.is-active {
+  opacity: 1;
+  font-weight: 600;
+}
+
+:where(.markstream-octane) .d2-action-btn {
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+:where(.markstream-octane) .d2-action-btn:hover {
+  opacity: 1;
+}
+
+:where(.markstream-octane) .d2-action-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+:where(.markstream-octane) .d2-error {
+  color: #dc2626;
+}
+
+/* Prevent mermaid temporary render containers from causing layout shift */
+body > div[id^="dmermaid-"] {
+  position: fixed;
+  top: -10000px;
+  left: 0;
+  width: 100%;
+  visibility: hidden;
+  pointer-events: none;
+}
+/*$vite$:1*/